@extends('layouts.master')

@php $isEdit = isset($penerimaan); @endphp
@section('title', $isEdit ? 'Edit Penerimaan Barang' : 'Buat Penerimaan Barang')

@section('styles')
<link rel="stylesheet" href="{{ asset('build/assets/libs/flatpickr/flatpickr.min.css') }}">
<style>
    .select2-container .select2-selection--single { height: 36px !important; }
    .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 34px !important; font-size: .875rem; padding-left: 10px; }
    .select2-container--default .select2-selection--single .select2-selection__arrow { height: 34px !important; }
    .foto-thumb { width: 60px; height: 60px; object-fit: cover; border-radius: 6px; border: 1px solid #e9ecef; cursor: pointer; }
    .foto-wrap { position: relative; display: inline-block; }
    .foto-wrap .btn-del-foto { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: #dc3545; color: #fff; border: none; font-size: 10px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
    #modalLot .table th, #modalLot .table td { vertical-align: middle; padding: 5px 8px; }
    #lotTableBody input { border-radius: 4px; }
    #tblItems { font-size: .83rem; }
    #tblItems thead th { background: #f8f5ff; color: #7c3aed; border: 1px solid #e9d5ff; white-space: nowrap; vertical-align: middle; padding: 7px 10px; }
    #tblItems tbody td { border: 1px solid #f0e8ff; vertical-align: middle; padding: 6px 8px; }
    @if($isKoreksi ?? false)
    .btn-hapus-item { display: none !important; }
    @endif
</style>
@endsection

@section('content')
<div class="container-fluid">
    <div class="d-md-flex d-block align-items-center justify-content-between my-4 page-header-breadcrumb">
        <div>
            <p class="fw-semibold fs-18 mb-0">{{ $isEdit ? 'Edit Penerimaan Barang' : 'Buat Penerimaan Barang' }}</p>
            <span class="fs-13 text-muted">Gudang &rarr; <a href="{{ route('gudang.penerimaan.index') }}">Penerimaan Barang</a> &rarr; {{ $isEdit ? $penerimaan->nomor_penerimaan : 'Baru' }}</span>
        </div>
    </div>

    <form id="formPenerimaan">
        @csrf
        <div class="row g-3">
            {{-- Header --}}
            <div class="col-12">
                <div class="card custom-card">
                    <div class="card-header">
                        <div class="card-title mb-0"><i class="bx bx-receipt me-2 text-primary"></i>Informasi Dokumen</div>
                    </div>
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-md-4">
                                <label class="form-label fw-semibold">No. Penerimaan</label>
                                <input type="text" class="form-control" value="{{ $isEdit ? $penerimaan->nomor_penerimaan : '—' }}" readonly>
                                @if(!$isEdit)<small class="text-muted">Digenerate saat simpan</small>@endif
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-semibold">Tanggal Terima <span class="text-danger">*</span></label>
                                <input type="text" id="tanggalTerima" name="tanggal_terima" class="form-control flatpickr"
                                    value="{{ $isEdit ? $penerimaan->tanggal_terima->format('Y-m-d') : now()->format('Y-m-d') }}" required>
                                <div class="invalid-feedback" id="err_tanggal_terima"></div>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-semibold">Purchase Order</label>
                                <select id="selectPO" class="form-select" style="width:100%;">
                                    @if($isEdit && $penerimaan->purchaseOrder)
                                        <option value="{{ $penerimaan->purchase_order_id }}" selected>
                                            {{ $penerimaan->purchaseOrder->nomor_po }}
                                        </option>
                                    @else
                                        <option value="">— Tanpa PO (opsional) —</option>
                                    @endif
                                </select>
                                <small class="text-muted">Pilih PO untuk auto-fill item barang</small>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-semibold">Supplier</label>
                                <select id="selectSupplier" class="form-select" style="width:100%;">
                                    <option value="">— Pilih Supplier —</option>
                                    @foreach($produsenList as $p)
                                        <option value="{{ $p->id }}"
                                            @if($isEdit && $penerimaan->produsen_id == $p->id) selected @endif>
                                            {{ $p->nama }}
                                        </option>
                                    @endforeach
                                </select>
                                <small class="text-muted" id="supplierHint">Diisi otomatis bila memilih PO</small>
                            </div>
                            <div class="col-12">
                                <label class="form-label fw-semibold">Catatan</label>
                                <textarea name="catatan" class="form-control" rows="2" placeholder="Catatan tambahan (opsional)">{{ $isEdit ? $penerimaan->catatan : '' }}</textarea>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Items --}}
            <div class="col-12">
                <div class="card custom-card">
                    <div class="card-header d-flex align-items-center justify-content-between">
                        <div class="card-title mb-0"><i class="bx bx-package me-2 text-primary"></i>Item Barang</div>
                        <div class="d-flex gap-2">
                            <button type="button" class="btn btn-outline-success btn-sm px-2 py-1" id="btnScanSemuaPO" title="Scan semua barang PO sekaligus dengan AI">
                                <i class="bx bx-scan me-1"></i> Scan Semua (AI)
                            </button>
                            <button type="button" class="btn btn-outline-primary btn-sm px-2 py-1" id="btnTambahItem">
                                <i class="bx bx-plus me-1"></i> Tambah Item
                            </button>
                        </div>
                    </div>
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table id="tblItems" class="table table-hover mb-0" style="width:100%;font-size:.875rem">
                                <thead class="table-light">
                                    <tr>
                                        <th class="text-center" style="width:40px">No</th>
                                        <th>Barang</th>
                                        <th class="text-center" style="width:80px">Satuan</th>
                                        <th class="text-center" style="width:130px">Qty Pesan</th>
                                        <th class="text-center" style="width:100px">Qty Terima</th>
                                        <th class="text-center" style="width:165px">Stok / SN / LOT</th>
                                        <th class="text-center" style="width:44px">Aksi</th>
                                    </tr>
                                </thead>
                                <tbody id="itemContainer">
                                    @if($isEdit)
                                        @php
                                            $editGroups = $penerimaan->items
                                                ->groupBy(fn($i) => $i->barang_id . '_' . ($i->purchase_order_item_id ?? 'null'))
                                                ->values();
                                        @endphp
                                        @foreach($editGroups as $group)
                                            @include('gudang.penerimaan-barang._item-row', ['item' => $group->first(), 'idx' => $loop->index])
                                        @endforeach
                                    @endif
                                </tbody>
                            </table>
                        </div>
                        <div id="emptyMsg" class="text-center text-muted py-4 {{ $isEdit && $penerimaan->items->count() ? 'd-none' : '' }}">
                            <i class="bx bx-package fs-3"></i>
                            <p class="mt-2 mb-0">Belum ada item. Pilih PO atau klik "Tambah Item".</p>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Foto Global --}}
            <div class="col-12">
                <div class="card custom-card">
                    <div class="card-header">
                        <div class="card-title mb-0"><i class="bx bx-images me-2 text-primary"></i>Foto Penerimaan</div>
                    </div>
                    <div class="card-body">
                        @if(!$isEdit)
                        <div class="alert alert-info py-2 fs-13 mb-2"><i class="bx bx-info-circle me-1"></i>Foto scan AI otomatis tersimpan di sini. Foto akan diupload setelah form disimpan.</div>
                        @endif
                        <div class="d-flex flex-wrap align-items-center gap-2 mb-2" id="globalFotoList">
                            @if($isEdit)
                            @foreach($penerimaan->fotos as $foto)
                            <div class="foto-wrap" id="fw_{{ $foto->id }}">
                                <a href="{{ $foto->url }}" target="_blank"><img src="{{ $foto->url }}" class="foto-thumb"></a>
                                <button type="button" class="btn-del-foto" onclick="hapusFoto({{ $foto->id }})">&times;</button>
                            </div>
                            @endforeach
                            @endif
                        </div>
                        <label class="btn btn-outline-secondary btn-sm px-2 py-1 mb-0">
                            <i class="bx bx-image-add me-1"></i> Upload Foto
                            <input type="file" id="globalFotoInput" class="d-none" accept="image/*">
                        </label>
                    </div>
                </div>
            </div>

            {{-- Actions --}}
            <div class="col-12 mb-4">
                <button type="submit" class="btn btn-primary px-4" id="btnSimpan">
                    <i class="bx bx-save me-1"></i> {{ ($isKoreksi ?? false) ? 'Simpan Koreksi' : 'Simpan Draft' }}
                </button>
                <a href="{{ route('gudang.penerimaan.index') }}" class="btn btn-outline-secondary px-4 ms-2">Batal</a>
            </div>
        </div>
    </form>
</div>

{{-- Template item row (hidden) --}}
<template id="tmplItem">
    @include('gudang.penerimaan-barang._item-row', ['item' => null, 'idx' => '__IDX__'])
</template>

{{-- Modal Input LOT / Serial / Kedaluwarsa --}}
<div class="modal fade" id="modalLot" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header py-2">
                <h6 class="modal-title fw-semibold" id="modalLotTitle">Stok Masuk</h6>
                <small class="text-muted ms-2" id="modalLotQtyPesan"></small>
                <button type="button" class="btn-close ms-auto" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body p-0">
                <div class="table-responsive">
                    <table class="table table-bordered table-sm mb-0" style="font-size:.82rem;">
                        <thead class="table-light">
                            <tr>
                                <th style="min-width:130px;">No. LOT</th>
                                <th style="min-width:130px;">No. Serial</th>
                                <th style="min-width:150px;">Tgl. Kedaluwarsa</th>
                                <th style="width:90px;">Qty <span class="text-danger js-qty-required">*</span></th>
                                <th style="width:110px;">Kondisi</th>
                                <th style="width:44px;" class="js-col-hapus"></th>
                            </tr>
                        </thead>
                        <tbody id="lotTableBody"></tbody>
                    </table>
                </div>
                <div class="px-3 py-2 d-flex align-items-center justify-content-between border-top">
                    <div class="d-flex gap-2">
                        <button type="button" class="btn btn-sm btn-outline-primary px-3" id="btnTambahLotRow">
                            <i class="bx bx-plus me-1"></i> Tambah Baris
                        </button>
                        <button type="button" class="btn btn-sm btn-outline-secondary px-3" id="btnScanLot">
                            <i class="bx bx-camera me-1"></i> Scan AI
                        </button>
                    </div>
                    <span class="text-muted fs-12">Total: <strong id="lotModalTotal">0</strong> pcs</span>
                </div>
            </div>
            <div class="modal-footer py-2">
                <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Batal</button>
                <button type="button" class="btn btn-primary btn-sm px-4" id="btnSaveLot">
                    <i class="bx bx-save me-1"></i> Simpan
                </button>
            </div>
        </div>
    </div>
</div>

{{-- Modal Browse Barang --}}
<div class="modal fade" id="modalBrowse" tabindex="-1" data-bs-backdrop="static">
    <div class="modal-dialog modal-xl modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="bx bx-search-alt me-2"></i>Cari Barang</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="row g-2 mb-3">
                    <div class="col-md-4">
                        <label class="form-label small fw-semibold">Jenis Barang</label>
                        <select id="browseJenis" class="form-select form-select-sm" data-placeholder="Semua Jenis">
                            <option value=""></option>
                            @foreach($jenisList as $j)
                            <option value="{{ $j->id }}">{{ $j->nama }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label small fw-semibold">Merek</label>
                        <select id="browseMerek" class="form-select form-select-sm" data-placeholder="Semua Merek">
                            <option value=""></option>
                            @foreach($merekList as $m)
                            <option value="{{ $m->id }}">{{ $m->nama }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label small fw-semibold">Ukuran</label>
                        <select id="browseUkuran" class="form-select form-select-sm" data-placeholder="Semua Ukuran">
                            <option value=""></option>
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label small fw-semibold">Cari Nama / Kode</label>
                        <input type="text" id="browseCari" class="form-control form-control-sm" placeholder="Ketik nama atau kode...">
                    </div>
                </div>
                <div class="table-responsive" style="max-height:380px;overflow-y:auto">
                    <table class="table table-hover mb-0" style="font-size:.82rem">
                        <thead>
                            <tr style="background:#f8f5ff;color:#7c3aed">
                                <th style="width:90px;border:1px solid #e9d5ff;padding:7px 10px">Kode</th>
                                <th style="min-width:200px;border:1px solid #e9d5ff;padding:7px 10px">Nama Barang</th>
                                <th style="width:130px;border:1px solid #e9d5ff;padding:7px 10px">Jenis</th>
                                <th style="width:120px;border:1px solid #e9d5ff;padding:7px 10px">Merek</th>
                                <th style="width:90px;border:1px solid #e9d5ff;padding:7px 10px">Ukuran</th>
                                <th style="width:80px;border:1px solid #e9d5ff;padding:7px 10px;text-align:center">Satuan</th>
                            </tr>
                        </thead>
                        <tbody id="tbodyBrowse" style="cursor:pointer">
                            <tr><td colspan="6" class="text-center text-muted py-3">
                                <i class="bx bx-loader-alt bx-spin me-1"></i> Memuat data...
                            </td></tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <small class="text-muted me-auto">Klik baris untuk memilih barang</small>
                <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Tutup</button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
@include('gudang._modal-scan-kamera')
<script src="{{ asset('build/assets/libs/flatpickr/flatpickr.min.js') }}"></script>
<script>
const BASE_URL = "{{ url('/') }}";
const fpOpts = { dateFormat: 'Y-m-d', altInput: true, altFormat: 'd-m-Y', allowInput: true,
    onReady(_, __, fp) { if (fp.altInput) fp.altInput.placeholder = 'DD-MM-YYYY'; } };
const IS_KOREKSI = {{ ($isKoreksi ?? false) ? 'true' : 'false' }};
let itemIdx = {{ ($isEdit && isset($editGroups)) ? $editGroups->count() : 0 }};

// lotData[itemIdx] = [{no_lot, no_serial, tanggal_kedaluwarsa, qty_diterima}, ...]
const lotData = {};
@if($isEdit)
@foreach($editGroups as $group)
lotData[{{ $loop->index }}] = [
    @foreach($group as $item)
    { id: {{ $item->id }}, no_lot: @json($item->no_lot ?? ''), no_serial: @json($item->no_serial ?? ''), tanggal_kedaluwarsa: @json($item->tanggal_kedaluwarsa?->format('Y-m-d') ?? ''), qty_diterima: {{ $item->qty_diterima }}, kondisi: @json($item->kondisi ?? 'baik') },
    @endforeach
];
@endforeach
@endif

let activeLotIdx = null;

$(function () {
    flatpickr('.flatpickr', fpOpts);


    @if($isEdit)
    @foreach($editGroups as $group)
    updateLotSummary({{ $loop->index }});
    @endforeach
    @endif

    updateRowNumbers();

    $('#selectPO').select2({
        placeholder: '— Tanpa PO —',
        allowClear: true,
        ajax: {
            url: BASE_URL + '/gudang/penerimaan-barang/cari-po',
            dataType: 'json',
            delay: 250,
            data: d => ({ q: d.term }),
            processResults: d => ({ results: d }),
        },
        width: '100%',
    });

    $('#selectSupplier').select2({ placeholder: '— Pilih Supplier —', allowClear: true, width: '100%' });

    function setSupplierFromPO(poText) {
        // poText format: "PO/2026/... — Nama Supplier"
        const parts = poText ? poText.split(' — ') : [];
        const nama  = parts.length > 1 ? parts.slice(1).join(' — ') : null;

        // Cari option yang cocok by text
        let found = false;
        if (nama) {
            $('#selectSupplier option').each(function () {
                if ($(this).text().trim() === nama.trim()) {
                    $(this).prop('selected', true);
                    found = true;
                    return false;
                }
            });
            if (!found) {
                // Tambahkan option sementara
                const opt = new Option(nama, '', true, true);
                $('#selectSupplier').append(opt);
            }
        }
        $('#selectSupplier').trigger('change');
        $('#selectSupplier').prop('disabled', true);
        $('#supplierHint').text('Diisi otomatis dari PO');
    }

    function clearSupplierFromPO() {
        $('#selectSupplier').val(null).trigger('change');
        $('#selectSupplier').prop('disabled', false);
        $('#supplierHint').text('');
    }

    // Inisialisasi state awal bila edit dengan PO
    @if($isEdit && isset($penerimaan) && $penerimaan->purchase_order_id)
        $('#selectSupplier').prop('disabled', true);
        $('#supplierHint').text('Diisi otomatis dari PO');
    @endif

    $('#selectPO').on('select2:select', function (e) {
        const poId = e.params.data.id;
        setSupplierFromPO(e.params.data.text);
        $.get(BASE_URL + '/gudang/penerimaan-barang/items-po/' + poId, function (items) {
            $('#itemContainer').empty();
            items.forEach(function (item) { addItemRow(item); });
            updateEmpty();
        });
    });

    $('#selectPO').on('select2:clear', function () {
        clearSupplierFromPO();
        $('#itemContainer').empty();
        updateEmpty();
    });

    $('#btnTambahItem').on('click', function () { addItemRow(null); });

    $('#formPenerimaan').on('submit', function (e) {
        e.preventDefault();
        simpan();
    });

    $(document).on('click', '.btn-atur-stok', function () {
        const idx = $(this).data('idx');
        const $row = $(`#itemRow${idx}`);
        const namaBarang = $row.find('.label-barang').text() || $row.find('[name$="[nama_barang]"]').val() || 'Barang';
        const qtyPesan   = parseInt($row.find('[name$="[qty_pesan]"]').val()) || 0;

        activeLotIdx = idx;
        const qtySisa = parseInt($(`#qtySisa${idx}`).val()) || 0;
        $('#modalLotTitle').text('Stok Masuk: ' + namaBarang);
        if (qtyPesan > 0) {
            const sudah = qtyPesan - qtySisa;
            const sisaText = sudah > 0
                ? `Qty PO: ${qtyPesan} pcs &nbsp;|&nbsp; Sudah diterima: ${sudah} &nbsp;|&nbsp; <strong>Sisa: ${qtySisa} pcs</strong>`
                : `Qty PO: ${qtyPesan} pcs &nbsp;|&nbsp; <strong>Sisa: ${qtySisa} pcs</strong>`;
            $('#modalLotQtyPesan').html(sisaText);
        } else {
            $('#modalLotQtyPesan').text('');
        }

        if (!lotData[idx]) lotData[idx] = [];
        renderLotRows(idx);

        // Koreksi: sembunyikan tambah baris & hapus hanya untuk item lama (punya id)
        const isItemLama = IS_KOREKSI && lotData[idx] && lotData[idx].some(l => l.id);
        $('#btnTambahLotRow').toggle(!isItemLama);
        $('.js-col-hapus').toggle(!isItemLama);
        $('.js-qty-required').toggle(!isItemLama);

        new bootstrap.Modal(document.getElementById('modalLot')).show();
    });

    $(document).on('click', '#btnScanLot', function () {
        const $row = $(`#itemRow${activeLotIdx}`);
        window.scanNamaBarang  = $row.find('[name$="[nama_barang]"]').val() || '';
        window.scanMerekBarang = $row.find('[name$="[merek_barang]"]').val() || '';
        window.scanUkuran      = $row.find('[name$="[ukuran]"]').val() || '';
        openScanOverlay();
    });

    // Scan Semua PO — kumpulkan daftar barang dari baris item yang ada
    $('#btnScanSemuaPO').on('click', function () {
        const poItems = [];
        $('#itemContainer tr.item-row').each(function () {
            const $r = $(this);
            const idx = $r.data('idx');
            poItems.push({
                id:       $r.find('[name$="[barang_id]"]').val() || idx,
                nama:     $r.find('[name$="[nama_barang]"]').val() || '',
                merek:    $r.find('[name$="[merek_barang]"]').val() || '',
                kode_ref: $r.find('[name$="[kode_ref]"]').val() || '',
            });
        });
        if (poItems.length === 0) {
            Swal.fire('Info', 'Tambahkan item barang terlebih dahulu atau pilih PO.', 'info');
            return;
        }
        openScanBulk(poItems);
    });

    $('#globalFotoInput').on('change', function () {
        const file = this.files[0];
        if (!file) return;
        uploadGlobalFoto(file, this);
    });
});

function addItemRow(data) {
    const idx = itemIdx++;
    let tmpl = document.getElementById('tmplItem').innerHTML;
    tmpl = tmpl.replace(/__IDX__/g, idx);
    $('#itemContainer').append(tmpl);
    initItemRow(idx, data);
    updateEmpty();
    updateRowNumbers();
}

function initItemRow(idx, data) {
    if (data) {
        const $row = $(`#itemRow${idx}`);
        $row.find('[name$="[barang_id]"]').val(data.barang_id || '');
        $row.find('[name$="[purchase_order_item_id]"]').val(data.purchase_order_item_id || '');
        $row.find('[name$="[kode_barang]"]').val(data.kode_barang || '');
        $row.find('[name$="[nama_barang]"]').val(data.nama_barang || '');
        $row.find('[name$="[jenis_barang]"]').val(data.jenis_barang || '');
        $row.find('[name$="[merek_barang]"]').val(data.merek_barang || '');
        $row.find('[name$="[ukuran]"]').val(data.ukuran || '');
        $row.find('[name$="[satuan]"]').val(data.satuan || '');
        $row.find('[name$="[qty_pesan]"]').val(data.qty_pesan || 0);
        $row.find('.satuan-display').text(data.satuan || '—');
        $row.find('.qty-pesan-display').text(data.qty_pesan || '—');
        $row.find('[name$="[kondisi]"]').val(data.kondisi || 'baik');

        const qtySisa = data.qty_sisa !== undefined ? data.qty_sisa : (data.qty_pesan || 0);
        $(`#qtySisa${idx}`).val(qtySisa);
        if (data.qty_sudah_diterima > 0) {
            $(`#qtyInfoSisa${idx}`).text('Sisa: ' + qtySisa + ' (sudah ' + data.qty_sudah_diterima + ')');
        }

        const detail = [data.jenis_barang, data.merek_barang, data.ukuran].filter(Boolean).join(', ');
        $row.find('.label-barang').text((data.kode_barang || '') + ' — ' + (data.nama_barang || ''));
        $row.find('.label-barang-detail').text(detail);
        $row.find('.div-barang-label').removeClass('d-none');
        $row.find('.div-barang-select').addClass('d-none');
        $row.find('.select2-barang').prop('required', false);

        if (!lotData[idx]) {
            lotData[idx] = [];
            updateLotSummary(idx);
        }
    }

    const $selBarang = $(`#selectBarang${idx}`);
    if ($selBarang.length) {
        $selBarang.select2({
            placeholder: 'Cari kode / nama barang...',
            ajax: {
                url: BASE_URL + '/pengadaan/purchase-order/cari-barang',
                dataType: 'json',
                delay: 250,
                data: d => ({ q: d.term }),
                processResults: function (res) {
                    return { results: res.map(b => ({ id: b.id, text: b.kode + ' — ' + b.nama, data: b })) };
                },
            },
            width: '100%',
        }).on('select2:select', function (e) {
            const b = e.params.data.data;
            const $row = $(`#itemRow${idx}`);
            $row.find('[name$="[barang_id]"]').val(b.id);
            $row.find('[name$="[kode_barang]"]').val(b.kode);
            $row.find('[name$="[nama_barang]"]').val(b.nama);
            $row.find('[name$="[jenis_barang]"]').val(b.jenis !== '-' ? b.jenis : '');
            $row.find('[name$="[merek_barang]"]').val(b.merek !== '-' ? b.merek : '');
            $row.find('[name$="[ukuran]"]').val(b.ukuran || '');
            $row.find('[name$="[satuan]"]').val(b.satuan_beli || '');
        });
    }
}

function updateEmpty() {
    const count = $('#itemContainer tr.item-row').length;
    count ? $('#emptyMsg').addClass('d-none') : $('#emptyMsg').removeClass('d-none');
}

function updateRowNumbers() {
    $('#itemContainer tr.item-row').each(function (i) {
        $(this).find('.item-no').text(i + 1);
    });
}

$(document).on('click', '.btn-hapus-item', function () {
    if (IS_KOREKSI) return; // tidak boleh hapus item di mode koreksi
    $(this).closest('tr.item-row').remove();
    updateEmpty();
    updateRowNumbers();
});

function simpan() {
    const items = [];
    let valid = true;

    $('tr.item-row').each(function () {
        const $r  = $(this);
        const idx = $r.attr('id').replace('itemRow', '');
        const get = n => $r.find(`[name$="[${n}]"]`).val();

        const base = {
            barang_id:              get('barang_id'),
            purchase_order_item_id: get('purchase_order_item_id') || null,
            kode_barang:            get('kode_barang'),
            nama_barang:            get('nama_barang'),
            jenis_barang:           get('jenis_barang') || null,
            merek_barang:           get('merek_barang') || null,
            ukuran:                 get('ukuran') || null,
            satuan:                 get('satuan'),
            qty_pesan:              parseInt(get('qty_pesan')) || 0,
            catatan:                get('catatan') || null,
        };

        const lots = lotData[idx] || [];
        const itemId = get('id') || $r.data('item-id') || null;
        const isItemLamaKoreksi = IS_KOREKSI && lots.some(l => l.id);

        if (lots.length === 0 && !isItemLamaKoreksi) {
            alert('Item "' + (base.nama_barang || 'barang') + '" belum memiliki data stok. Klik "Atur SN / LOT" untuk mengisi.');
            valid = false;
            return false;
        }

        const lotTanpaED = lots.filter(l => (parseInt(l.qty_diterima) || 0) > 0 && !l.tanggal_kedaluwarsa);
        if (lotTanpaED.length > 0) {
            alert('Item "' + (base.nama_barang || 'barang') + '" memiliki ' + lotTanpaED.length + ' baris tanpa Tgl. ED. Wajib diisi sebelum menyimpan.');
            valid = false;
            return false;
        }

        lots.forEach(function (lot) {
            items.push(Object.assign({}, base, {
                id:                  lot.id || null,
                no_lot:              lot.no_lot || null,
                no_serial:           lot.no_serial || null,
                tanggal_kedaluwarsa: lot.tanggal_kedaluwarsa || null,
                qty_diterima:        parseInt(lot.qty_diterima) || 0,
                kondisi:             lot.kondisi || 'baik',
            }));
        });
    });

    if (!valid) return;

    const payload = {
        _token:             $('meta[name="csrf-token"]').attr('content'),
        purchase_order_id:  $('#selectPO').val() || null,
        produsen_id:        $('#selectPO').val() ? null : ($('#selectSupplier').val() || null),
        tanggal_terima:     $('#tanggalTerima').val(),
        catatan:            $('[name="catatan"]').val(),
        items:              items,
    };

    const isEdit = {{ $isEdit ? 'true' : 'false' }};
    @if($isEdit) payload._method = 'PUT'; @endif
    const url = isEdit
        ? BASE_URL + '/gudang/penerimaan-barang/{{ $isEdit ? $penerimaan->id : "" }}'
        : BASE_URL + '/gudang/penerimaan-barang';

    $('#btnSimpan').prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-1"></span>Menyimpan...');

    $.ajax({
        url, method: 'POST', contentType: 'application/json',
        data: JSON.stringify(payload),
        success: function (res) {
            if (pendingFotos.length > 0 && res.id) {
                uploadPendingFotos(res.id, function () { window.location.href = res.redirect; });
            } else {
                window.location.href = res.redirect;
            }
        },
        error: function (xhr) {
            $('#btnSimpan').prop('disabled', false).html('<i class="bx bx-save me-1"></i> {{ ($isKoreksi ?? false) ? "Simpan Koreksi" : "Simpan Draft" }}');
            if (xhr.status === 422) {
                const errs = xhr.responseJSON?.errors || {};
                Object.keys(errs).forEach(function (k) {
                    const simple = k.replace(/\./g, '_');
                    $(`#err_${simple}`).text(errs[k][0]);
                });
                const errMsg = Object.keys(errs).length
                    ? Object.entries(errs).map(([k,v]) => k + ': ' + v[0]).join('\n')
                    : (xhr.responseJSON?.message || 'Periksa kembali isian form.');
                alert(errMsg);
            } else {
                alert(xhr.responseJSON?.message || 'Gagal menyimpan.');
            }
        }
    });
}

// Foto pending (create mode) — array of {blob, previewId}
const pendingFotos = [];
let pendingFotoIdx = 0;

function addPendingFotoPreview(blob) {
    const pid = 'pf_' + (pendingFotoIdx++);
    const url = URL.createObjectURL(blob);
    const html = `<div class="foto-wrap" id="${pid}">
        <img src="${url}" class="foto-thumb">
        <button type="button" class="btn-del-foto" onclick="hapusPendingFoto('${pid}')">&times;</button>
    </div>`;
    $('#globalFotoList').append(html);
    pendingFotos.push({ pid, blob });
}

function hapusPendingFoto(pid) {
    const idx = pendingFotos.findIndex(f => f.pid === pid);
    if (idx > -1) pendingFotos.splice(idx, 1);
    $('#' + pid).remove();
}

function uploadGlobalFoto(file, inputEl) {
    const isEdit = {{ $isEdit ? 'true' : 'false' }};
    if (!isEdit) {
        addPendingFotoPreview(file);
        if (inputEl) $(inputEl).val('');
        return;
    }
    const fd = new FormData();
    fd.append('_token', $('meta[name="csrf-token"]').attr('content'));
    fd.append('penerimaan_id', '{{ $isEdit ? $penerimaan->id : "" }}');
    fd.append('foto', file);

    $.ajax({
        url: BASE_URL + '/gudang/penerimaan-barang/upload-foto',
        method: 'POST', data: fd, processData: false, contentType: false,
        success: function (res) {
            const html = `<div class="foto-wrap" id="fw_${res.id}">
                <a href="${res.url}" target="_blank"><img src="${res.url}" class="foto-thumb"></a>
                <button type="button" class="btn-del-foto" onclick="hapusFoto(${res.id})">&times;</button>
            </div>`;
            $('#globalFotoList').append(html);
            if (inputEl) $(inputEl).val('');
        },
        error: function () { alert('Gagal upload foto.'); }
    });
}

function uploadPendingFotos(penerimaanId, callback) {
    if (pendingFotos.length === 0) { callback(); return; }
    const csrf = $('meta[name="csrf-token"]').attr('content');
    let done = 0;
    pendingFotos.forEach(function (pf) {
        const fd = new FormData();
        fd.append('_token', csrf);
        fd.append('penerimaan_id', penerimaanId);
        fd.append('foto', pf.blob, 'foto.jpg');
        $.ajax({
            url: BASE_URL + '/gudang/penerimaan-barang/upload-foto',
            method: 'POST', data: fd, processData: false, contentType: false,
            complete: function () { if (++done === pendingFotos.length) callback(); }
        });
    });
}

function hapusFoto(id) {
    if (!confirm('Hapus foto ini?')) return;
    $.ajax({
        url: BASE_URL + '/gudang/penerimaan-barang/foto/' + id,
        method: 'DELETE',
        headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
        success: function () { $(`#fw_${id}`).remove(); },
        error: function () { alert('Gagal menghapus foto.'); }
    });
}

// ── Modal LOT ──────────────────────────────────────────────────────────────

function renderLotRows(idx) {
    const lots = lotData[idx] || [];
    let html = '';
    lots.forEach(function (lot, i) {
        const kondisiVal   = lot.kondisi || 'baik';
        const kondisiBadge = kondisiVal === 'rusak'
            ? '<span class="badge bg-danger-transparent text-danger">Rusak</span>'
            : '<span class="badge bg-success-transparent text-success">Baik</span>';

        const kondisiSelect = `<select class="form-select form-select-sm lot-field" data-field="kondisi">
            <option value="baik" ${kondisiVal === 'baik' ? 'selected' : ''}>Baik</option>
            <option value="rusak" ${kondisiVal === 'rusak' ? 'selected' : ''}>Rusak</option>
        </select>`;

        if (IS_KOREKSI) {
            // Koreksi: LOT/serial/ED/qty bisa diedit, kondisi readonly
            html += `<tr>
                <td><input type="text" class="form-control form-control-sm lot-field" data-field="no_lot" value="${lot.no_lot || ''}" placeholder="Opsional"></td>
                <td><input type="text" class="form-control form-control-sm lot-field" data-field="no_serial" value="${lot.no_serial || ''}" placeholder="Opsional"></td>
                <td><input type="text" class="form-control form-control-sm lot-field lot-expired flatpickr-lot" data-field="tanggal_kedaluwarsa" value="${lot.tanggal_kedaluwarsa || ''}" placeholder="DD-MM-YYYY" autocomplete="off"></td>
                <td><input type="number" class="form-control form-control-sm lot-field" min="0" data-field="qty_diterima" value="${lot.qty_diterima || ''}"></td>
                <td class="text-center">${kondisiBadge}</td>
                <td></td>
            </tr>`;
        } else {
            html += `<tr>
                <td><input type="text" class="form-control form-control-sm lot-field" data-field="no_lot" value="${lot.no_lot || ''}" placeholder="Opsional"></td>
                <td><input type="text" class="form-control form-control-sm lot-field" data-field="no_serial" value="${lot.no_serial || ''}" placeholder="Opsional"></td>
                <td><input type="text" class="form-control form-control-sm lot-field lot-expired flatpickr-lot" data-field="tanggal_kedaluwarsa" value="${lot.tanggal_kedaluwarsa || ''}" placeholder="DD-MM-YYYY" autocomplete="off"></td>
                <td><input type="number" class="form-control form-control-sm lot-field" min="1" placeholder="0" required data-field="qty_diterima" value="${lot.qty_diterima || ''}"></td>
                <td>${kondisiSelect}</td>
                <td class="text-center"><button type="button" class="btn btn-sm btn-outline-danger px-2 py-0 btn-hapus-lot-row"><i class="bx bx-trash"></i></button></td>
            </tr>`;
        }
    });
    $('#lotTableBody').html(html);

    $('#lotTableBody .flatpickr-lot').each(function () {
        flatpickr(this, { ...fpOpts });
    });

    updateLotModalTotal();
}

function updateLotModalTotal() {
    let total = 0;
    $('#lotTableBody [data-field="qty_diterima"]').each(function () {
        total += parseInt($(this).val()) || 0;
    });
    $('#lotModalTotal').text(total);
}

function saveLotModal() {
    const idx = activeLotIdx;
    if (idx === null) return;

    const lots = [];
    const existing = lotData[idx] || [];
    $('#lotTableBody tr').each(function (i) {
        const get = f => $(this).find(`.lot-field[data-field="${f}"]`).val();
        const qty = parseInt($(this).find('[data-field="qty_diterima"]').val()) || 0;
        if (qty > 0 || get('no_lot') || get('no_serial') || get('tanggal_kedaluwarsa')) {
            lots.push({
                id:                  existing[i]?.id || null,
                no_lot:              get('no_lot'),
                no_serial:           get('no_serial'),
                tanggal_kedaluwarsa: get('tanggal_kedaluwarsa'),
                qty_diterima:        qty,
                kondisi:             IS_KOREKSI ? (existing[i]?.kondisi || 'baik') : (get('kondisi') || 'baik'),
            });
        }
    });

    lotData[idx] = lots;
    updateLotSummary(idx);
    bootstrap.Modal.getInstance(document.getElementById('modalLot')).hide();
}

function updateLotSummary(idx) {
    const lots = lotData[idx] || [];
    const totalQty = lots.reduce((s, e) => s + (parseInt(e.qty_diterima) || 0), 0);

    $(`#qtyDiterima${idx}`).val(totalQty);
    $(`#qtyDiterimaText${idx}`).text(totalQty);

    const $el = $(`#lotSummary${idx}`);
    const isLamaKoreksi = IS_KOREKSI && lots.some(l => l.id);
    if (lots.length > 0 && (totalQty > 0 || isLamaKoreksi)) {
        $el.html(`<span class="badge bg-primary-transparent">${lots.length} LOT &middot; ${totalQty} pcs</span>`);
    } else {
        $el.html('<span class="text-danger">Belum ada stok diinput</span>');
    }
}

$(document).on('click', '#btnTambahLotRow', function () {
    const idx = activeLotIdx;
    if (!lotData[idx]) lotData[idx] = [];

    // Sync nilai input yang sudah diketik ke lotData sebelum render ulang
    const existing = lotData[idx];
    $('#lotTableBody tr').each(function (i) {
        if (!existing[i]) return;
        const get = f => $(this).find(`.lot-field[data-field="${f}"]`).val();
        existing[i].no_lot              = get('no_lot');
        existing[i].no_serial           = get('no_serial');
        existing[i].tanggal_kedaluwarsa = get('tanggal_kedaluwarsa');
        existing[i].qty_diterima        = parseInt($(this).find('[data-field="qty_diterima"]').val()) || 0;
        if (!IS_KOREKSI) existing[i].kondisi = get('kondisi') || 'baik';
    });

    lotData[idx].push({ no_lot: '', no_serial: '', tanggal_kedaluwarsa: '', qty_diterima: '' });
    renderLotRows(idx);
});

$(document).on('click', '.btn-hapus-lot-row', function () {
    $(this).closest('tr').remove();
    updateLotModalTotal();
});

$(document).on('input change', '#lotTableBody .lot-field', function () {
    updateLotModalTotal();
});

$('#btnSaveLot').on('click', saveLotModal);

// ── Modal Browse Barang ────────────────────────────────────────
const BROWSE_URL  = BASE_URL + '/pengadaan/purchase-order/cari-barang';
const UKURAN_URL  = BASE_URL + '/pengadaan/purchase-order/ukuran-list';
let browseTargetIdx = null;
let browseTimer     = null;

$(function () {
    $('#browseJenis, #browseMerek, #browseUkuran').select2({
        dropdownParent: $('#modalBrowse'),
        width: '100%',
        allowClear: true,
        placeholder: function () { return $(this).data('placeholder'); },
    });
    $('#browseJenis').on('change', function () { loadBrowseUkuran(this.value); doBrowse(); });
    $('#browseMerek, #browseUkuran').on('change', () => doBrowse());
    $('#browseCari').on('input', function () {
        clearTimeout(browseTimer);
        browseTimer = setTimeout(doBrowse, 350);
    });
});

$(document).on('click', '.btn-browse-barang', function () {
    browseTargetIdx = $(this).data('idx');
    $('#browseJenis, #browseMerek, #browseUkuran').val(null).trigger('change');
    $('#browseCari').val('');
    loadBrowseUkuran('');
    new bootstrap.Modal(document.getElementById('modalBrowse')).show();
    doBrowse();
});

function loadBrowseUkuran(jenisId) {
    const $sel = $('#browseUkuran');
    const prev = $sel.val();
    $sel.empty().append('<option value="">Semua Ukuran</option>');
    $.get(UKURAN_URL, jenisId ? { jenis_id: jenisId } : {}, function (data) {
        data.forEach(u => $sel.append(new Option(u, u, false, u === prev)));
        $sel.trigger('change.select2');
    });
}

function doBrowse() {
    const q      = $('#browseCari').val();
    const jenis  = $('#browseJenis').val();
    const merek  = $('#browseMerek').val();
    const ukuran = $('#browseUkuran').val();
    $('#tbodyBrowse').html('<tr><td colspan="6" class="text-center text-muted py-3"><i class="bx bx-loader-alt bx-spin me-1"></i>Memuat...</td></tr>');
    $.get(BROWSE_URL, { q, jenis_id: jenis, merek_id: merek, ukuran }, function (data) {
        if (!data.length) {
            $('#tbodyBrowse').html('<tr><td colspan="6" class="text-center text-muted py-3">Barang tidak ditemukan.</td></tr>');
            return;
        }
        const esc = s => $('<div>').text(s ?? '—').html();
        $('#tbodyBrowse').html(data.map(b => `
            <tr onclick='pilihDariBrowse(${JSON.stringify(b).replace(/'/g,"&#39;")})' style="cursor:pointer">
                <td style="border:1px solid #f0e8ff;padding:5px 8px">${esc(b.kode)}</td>
                <td style="border:1px solid #f0e8ff;padding:5px 8px">${esc(b.nama)}</td>
                <td style="border:1px solid #f0e8ff;padding:5px 8px">${esc(b.jenis)}</td>
                <td style="border:1px solid #f0e8ff;padding:5px 8px">${esc(b.merek)}</td>
                <td style="border:1px solid #f0e8ff;padding:5px 8px">${esc(b.ukuran || '—')}</td>
                <td style="border:1px solid #f0e8ff;padding:5px 8px;text-align:center">${esc(b.satuan_beli)}</td>
            </tr>`).join(''));
    });
}

function pilihDariBrowse(b) {
    bootstrap.Modal.getInstance(document.getElementById('modalBrowse')).hide();
    const idx  = browseTargetIdx;
    if (idx === null) return;
    const $row = $(`#itemRow${idx}`);

    $row.find('[name$="[barang_id]"]').val(b.id);
    $row.find('[name$="[kode_barang]"]').val(b.kode);
    $row.find('[name$="[nama_barang]"]').val(b.nama);
    $row.find('[name$="[jenis_barang]"]').val(b.jenis !== '-' ? b.jenis : '');
    $row.find('[name$="[merek_barang]"]').val(b.merek !== '-' ? b.merek : '');
    $row.find('[name$="[ukuran]"]').val(b.ukuran || '');
    $row.find('[name$="[satuan]"]').val(b.satuan_beli || '');

    const detail = [b.jenis, b.merek, b.ukuran].filter(v => v && v !== '-').join(', ');
    $row.find('.label-barang').text(b.kode + ' — ' + b.nama);
    $row.find('.label-barang-detail').text(detail);
    $row.find('.satuan-display').text(b.satuan_beli || '—');
    $row.find('.div-barang-label').removeClass('d-none');
    $row.find('.div-barang-select').addClass('d-none');
    $row.find('.select2-barang').prop('required', false);

    if (!lotData[idx]) { lotData[idx] = []; updateLotSummary(idx); }

    const $sel = $(`#selectBarang${idx}`);
    if ($sel.find(`option[value="${b.id}"]`).length === 0) {
        $sel.append(new Option(b.kode + ' — ' + b.nama, b.id, true, true));
    } else {
        $sel.val(b.id).trigger('change');
    }
}

function onScanResult(items) {
    const idx = activeLotIdx;
    if (idx === null) return;
    if (!lotData[idx]) lotData[idx] = [];

    items.forEach(function (data) {
        const ei = lotData[idx].findIndex(function (l) {
            return (l.no_lot || null) === (data.no_lot || null) &&
                   (l.no_serial || null) === (data.no_serial || null) &&
                   (l.tanggal_kedaluwarsa || null) === (data.tanggal_kedaluwarsa || null);
        });
        if (ei >= 0) {
            lotData[idx][ei].qty_diterima = (parseInt(lotData[idx][ei].qty_diterima) || 0) + 1;
        } else {
            lotData[idx].push({
                no_lot:              data.no_lot || '',
                no_serial:           data.no_serial || '',
                tanggal_kedaluwarsa: data.tanggal_kedaluwarsa || '',
                qty_diterima:        1,
                kondisi:             'baik',
            });
        }
    });

    renderLotRows(idx);
    closeScanOverlay();
}

// Bulk scan — terapkan semua hasil ke baris item yang sesuai berdasarkan barang_id
function onScanBulkResult(items, poItems) {
    let totalInserted = 0;

    items.forEach(function(data) {
        // Cari idx baris dari barang_id
        let targetIdx = null;
        $('#itemContainer tr.item-row').each(function() {
            const $r = $(this);
            const barangId = $r.find('[name$="[barang_id]"]').val();
            if (barangId && barangId == data.barang_id) {
                targetIdx = $r.data('idx');
                return false; // break
            }
        });

        if (targetIdx === null) return; // barang tidak ada di form, skip

        if (!lotData[targetIdx]) lotData[targetIdx] = [];

        // Cek duplikat dalam lotData baris itu
        const alreadyExists = lotData[targetIdx].some(function(l) {
            const sameKey = (l.no_lot || '') + '||' + (l.no_serial || '');
            const newKey  = (data.no_lot || '') + '||' + (data.no_serial || '');
            return sameKey === newKey && newKey !== '||';
        });

        if (!alreadyExists) {
            lotData[targetIdx].push({
                no_lot:              data.no_lot || '',
                no_serial:           data.no_serial || '',
                tanggal_kedaluwarsa: data.tanggal_kedaluwarsa || '',
                qty_diterima:        1,
                kondisi:             'baik',
            });
            totalInserted++;
        }
    });

    // Re-render semua baris yang terpengaruh
    const affectedIdx = [...new Set(items.map(d => {
        let idx = null;
        $('#itemContainer tr.item-row').each(function() {
            if ($(this).find('[name$="[barang_id]"]').val() == d.barang_id) { idx = $(this).data('idx'); return false; }
        });
        return idx;
    }).filter(i => i !== null))];

    affectedIdx.forEach(idx => { renderLotRows(idx); updateLotSummary(idx); });

    if (totalInserted > 0) {
        Swal.fire({ icon: 'success', title: `${totalInserted} LOT berhasil dimasukkan`, timer: 2000, showConfirmButton: false });
    } else {
        Swal.fire({ icon: 'info', title: 'Tidak ada LOT baru', text: 'Semua hasil scan sudah ada atau tidak cocok dengan barang di form.' });
    }
}
</script>
@endsection