@extends('layouts.master')
@php
    $fromProses = $fromProses ?? false;
    $pfx = $fromProses ? 'proses-pengiriman' : 'permintaan-pengeluaran';
@endphp

@section('title', 'Proses Pemenuhan — ' . $ppb->nomor)

@section('styles')
<style>
    #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; }

    .chip-stok { display:inline-block; font-size:.72rem; padding:1px 7px; border-radius:10px; white-space:nowrap; }
    .chip-stok-ok   { background:#d1fae5; color:#065f46; }
    .chip-stok-warn { background:#fee2e2; color:#991b1b; }
    .chip-stok-none { background:#f3f4f6; color:#6b7280; }
    .chip-kso { background:#dbeafe; color:#1d4ed8; font-size:.72rem; padding:1px 7px; border-radius:10px; display:inline-block; white-space:nowrap; border:none; cursor:pointer; }
    .chip-kso:hover { background:#bfdbfe; }
    .chip-kso-none { background:#f3f4f6; color:#6b7280; font-size:.72rem; padding:1px 7px; border-radius:10px; display:inline-block; white-space:nowrap; }
    .chip-pjl { background:#fef9c3; color:#854d0e; font-size:.72rem; padding:1px 7px; border-radius:10px; display:inline-block; white-space:nowrap; }

    .chip-lot { display:inline-block; font-size:.72rem; padding:2px 8px; border-radius:10px; cursor:pointer; white-space:nowrap; border:1px solid transparent; }
    .chip-lot-unset     { background:#f3f4f6; color:#6b7280; border-color:#d1d5db; }
    .chip-lot-confirmed { background:#d1fae5; color:#065f46; border-color:#6ee7b7; }
    .chip-lot-warn      { background:#fee2e2; color:#991b1b; border-color:#fca5a5; }

    #tblModalLots { font-size:.83rem; }
    #tblModalLots thead th { background:#f8f5ff; color:#7c3aed; border:1px solid #e9d5ff; padding:7px 10px; }
    #tblModalLots tbody td { border:1px solid #f0e8ff; vertical-align:middle; padding:6px 8px; }
    .lot-qty-input { width:70px; text-align:center; font-size:.82rem; padding:2px 4px; height:28px; }
    #lotTotalBar { font-size:.85rem; }

    .qty-dipenuhi-input { width:72px; text-align:center; font-size:.82rem; padding:3px 5px; height:28px; }

    .badge-ed-ok   { background:#d1fae5; color:#065f46; font-size:.7rem; padding:1px 5px; border-radius:4px; display:inline-block; }
    .badge-ed-warn { background:#fef9c3; color:#854d0e; font-size:.7rem; padding:1px 5px; border-radius:4px; display:inline-block; }
    .badge-ed-none { background:#f3f4f6; color:#6b7280; font-size:.7rem; padding:1px 5px; border-radius:4px; display:inline-block; }

    #tblKso { font-size:.83rem; }
    #tblKso thead th { background:#eff6ff; color:#1d4ed8; border:1px solid #dbeafe; padding:7px 10px; }
    #tblKso tbody td { border:1px solid #dbeafe; vertical-align:middle; padding:6px 8px; }
    .retur-qty-input { width:75px; text-align:center; font-size:.82rem; padding:2px 4px; height:28px; }

    .retur-badge { display:inline-block; font-size:.7rem; padding:2px 8px; border-radius:10px; }
    .retur-badge-draft { background:#f3f4f6; color:#374151; }
    .retur-badge-divalidasi { background:#d1fae5; color:#065f46; }
    .retur-badge-direvisi { background:#fef9c3; color:#854d0e; }
    .retur-badge-selesai { background:#bfdbfe; color:#1e40af; }
</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">Proses Pemenuhan Permintaan</p>
            <span class="fs-13 text-muted">Gudang &rarr; Permintaan Mutasi &rarr; Pemenuhan</span>
        </div>
        <a href="{{ route("$pfx.show", $ppb->id) }}" class="btn btn-secondary btn-sm mt-2 mt-md-0">
            <i class="bx bx-arrow-back me-1"></i> Kembali
        </a>
    </div>

    {{-- Info Header --}}
    <div class="card custom-card mb-3">
        <div class="card-body py-3">
            <div class="row g-2 align-items-center">
                <div class="col-auto"><span class="text-muted fs-13">Nomor:</span> <strong>{{ $ppb->nomor }}</strong></div>
                <div class="col-auto text-muted">·</div>
                <div class="col-auto"><span class="text-muted fs-13">Tanggal:</span> {{ $ppb->tanggal->format('d-m-Y') }}</div>
                <div class="col-auto text-muted">·</div>
                <div class="col-auto"><span class="text-muted fs-13">Faskes Tujuan:</span> <strong>{{ $ppb->nama_faskes ?? '—' }}</strong></div>
                @if($gudangKso)
                <div class="col-auto text-muted">·</div>
                <div class="col-auto"><span class="text-muted fs-13">Gudang KSO:</span> {{ $gudangKso->nama }}</div>
                @endif
            </div>
        </div>
    </div>

    {{-- Tabel Item --}}
    <div class="card custom-card mb-3">
        <div class="card-header">
            <div class="card-title mb-0"><i class="bx bx-list-ul me-2 text-primary"></i>Daftar Barang</div>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table id="tblItems" class="table mb-0" style="width:100%">
                    <thead>
                        <tr>
                            <th class="text-center" style="width:36px">No</th>
                            <th style="min-width:180px">Barang</th>
                            <th class="text-center" style="width:90px">Qty Diminta</th>
                            <th class="text-center" style="width:100px">Qty Dipenuhi</th>
                            <th class="text-center" style="width:100px">Stok Pusat</th>
                            <th class="text-center" style="width:100px">Stok KSO</th>
                            <th class="text-center" style="width:105px">Penjualan 3Bln</th>
                            <th class="text-center" style="width:145px">Lot</th>
                            <th class="text-center" style="width:110px">Keterangan</th>
                        </tr>
                    </thead>
                    <tbody id="tbodyItems"></tbody>
                </table>
            </div>
        </div>
    </div>

    {{-- Info Retur Terkait --}}
    @if($returTerkait->isNotEmpty())
    <div class="card custom-card mb-3">
        <div class="card-header">
            <div class="card-title mb-0"><i class="bx bx-transfer me-2 text-warning"></i>Retur Draft Terkait</div>
        </div>
        <div class="card-body p-2">
            <div class="table-responsive">
                <table class="table table-sm mb-0" style="font-size:.83rem">
                    <thead>
                        <tr style="background:#fffbeb;">
                            <th style="width:150px;border:1px solid #fde68a;padding:6px 10px;color:#92400e">Nomor Retur</th>
                            <th style="border:1px solid #fde68a;padding:6px 10px;color:#92400e">Faskes</th>
                            <th style="width:100px;border:1px solid #fde68a;padding:6px 10px;color:#92400e">Status</th>
                            <th style="border:1px solid #fde68a;padding:6px 10px;color:#92400e">Barang (Rencana)</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($returTerkait as $retur)
                        <tr>
                            <td style="border:1px solid #fde68a;padding:6px 10px">
                                <a href="{{ route('penjualan.retur-kso.show', $retur->id) }}" class="text-primary fw-semibold">
                                    {{ $retur->nomor }}
                                </a>
                            </td>
                            <td style="border:1px solid #fde68a;padding:6px 10px">{{ $retur->nama_faskes }}</td>
                            <td style="border:1px solid #fde68a;padding:6px 10px">
                                @php
                                $badgeCls = match($retur->status) {
                                    'draft'      => 'retur-badge-draft',
                                    'divalidasi' => 'retur-badge-divalidasi',
                                    'direvisi'   => 'retur-badge-direvisi',
                                    'selesai'    => 'retur-badge-selesai',
                                    default      => 'retur-badge-draft',
                                };
                                @endphp
                                <span class="retur-badge {{ $badgeCls }}">{{ ucfirst($retur->status) }}</span>
                            </td>
                            <td style="border:1px solid #fde68a;padding:6px 10px">
                                @foreach($retur->items as $ri)
                                    <span class="me-2">{{ $ri->nama_barang }} <span class="text-muted">({{ $ri->qty }} {{ $ri->satuan }})</span></span>
                                @endforeach
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    @endif

    {{-- Tombol --}}
    <div class="d-flex gap-2 justify-content-end mb-4">
        <a href="{{ route("$pfx.show", $ppb->id) }}" class="btn btn-secondary">
            <i class="bx bx-x me-1"></i> Batal
        </a>
        <button type="button" id="btnSelesaikan" class="btn btn-primary">
            <i class="bx bx-check-circle me-1"></i> Selesaikan Pemenuhan
        </button>
    </div>
</div>

{{-- Modal Lot ──────────────────────────────────────────────────────────────── --}}
<div class="modal fade" id="modalLot" tabindex="-1" data-bs-backdrop="static">
    <div class="modal-dialog modal-lg modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header py-2">
                <div>
                    <h6 class="modal-title mb-0" id="modalLotTitle">Pilih Lot Stok</h6>
                    <div class="text-muted small" id="modalLotSubtitle"></div>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body p-0">
                <div class="table-responsive">
                    <table id="tblModalLots" class="table table-bordered mb-0">
                        <thead>
                            <tr>
                                <th style="width:110px">No Lot</th>
                                <th style="width:110px">No Serial</th>
                                <th style="width:130px">Kedaluwarsa</th>
                                <th class="text-center" style="width:90px">Tersedia</th>
                                <th class="text-center" style="width:100px">Qty Ambil</th>
                            </tr>
                        </thead>
                        <tbody id="tbodyModalLots"></tbody>
                    </table>
                </div>
                <div class="px-3 py-2 border-top d-flex align-items-center gap-3" id="lotTotalBar">
                    <span>Total diambil: <strong id="lotTotalAmbil">0</strong> / <strong id="lotQtyTarget">0</strong></span>
                    <span id="lotStatusOk"     class="badge bg-success d-none">✓ Sesuai</span>
                    <span id="lotStatusKurang" class="badge bg-warning text-dark d-none">Kurang</span>
                    <span id="lotStatusLebih"  class="badge bg-danger d-none">Melebihi</span>
                </div>
            </div>
            <div class="modal-footer py-2">
                <button type="button" class="btn btn-sm btn-outline-secondary" id="btnResetFEFO">
                    <i class="bx bx-refresh me-1"></i> Reset ke FEFO
                </button>
                <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Batal</button>
                <button type="button" class="btn btn-sm btn-success" id="btnKonfirmasiLot" disabled>
                    <i class="bx bx-check me-1"></i> Konfirmasi
                </button>
            </div>
        </div>
    </div>
</div>

{{-- Modal Keterangan ───────────────────────────────────────────────────────── --}}
<div class="modal fade" id="modalKeterangan" tabindex="-1">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header py-2">
                <h6 class="modal-title mb-0" id="modalKeteranganTitle">Keterangan</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div id="modalKeteranganAlert" class="alert alert-warning py-2 fs-13 d-none">
                    <i class="bx bx-error me-1"></i> Keterangan wajib diisi karena jumlah dipenuhi kurang dari yang diminta.
                </div>
                <textarea id="inputKeterangan" class="form-control" rows="3" placeholder="Contoh: stok pusat habis, akan dipenuhi berikutnya..."></textarea>
            </div>
            <div class="modal-footer py-2">
                <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Batal</button>
                <button type="button" class="btn btn-sm btn-primary" id="btnSimpanKeterangan">Simpan</button>
            </div>
        </div>
    </div>
</div>

{{-- Modal Stok KSO ─────────────────────────────────────────────────────────── --}}
<div class="modal fade" id="modalStokKso" tabindex="-1" data-bs-backdrop="static">
    <div class="modal-dialog modal-lg modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header py-2">
                <div>
                    <h6 class="modal-title mb-0">Stok KSO — <span id="ksoBarangNama"></span></h6>
                    <div class="text-muted small">Klik chip stok lalu isi "Rencana Retur" untuk membuat draft retur.</div>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body p-0">
                <div class="table-responsive">
                    <table id="tblKso" class="table mb-0">
                        <thead>
                            <tr>
                                <th style="min-width:160px">Faskes</th>
                                <th style="width:100px">No Lot</th>
                                <th style="width:100px">No Serial</th>
                                <th style="width:110px">Tgl ED</th>
                                <th class="text-center" style="width:80px">Stok</th>
                                <th class="text-center" style="width:110px">Rencana Retur</th>
                            </tr>
                        </thead>
                        <tbody id="tbodyKso"></tbody>
                    </table>
                </div>
                <div class="px-3 py-2 border-top text-muted" style="font-size:.82rem">
                    <i class="bx bx-info-circle me-1 text-info"></i>
                    Rencana retur akan dibuat sebagai draft retur faskes dan bisa diproses dari menu Retur Faskes.
                </div>
            </div>
            <div class="modal-footer py-2">
                <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Tutup</button>
                <button type="button" class="btn btn-sm btn-warning" id="btnBuatRetur">
                    <i class="bx bx-transfer me-1"></i> Buat Retur Draft
                </button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
const BASE_URL          = '{{ url('') }}';
const PPB_ID            = {{ $ppb->id }};
const CSRF              = '{{ csrf_token() }}';
const PPB_PREFIX        = '{{ $pfx }}';
const SELESAIKAN_URL    = `${BASE_URL}/${PPB_PREFIX}/${PPB_ID}/selesaikan`;
const BUAT_RETUR_URL    = `${BASE_URL}/permintaan-pengeluaran/${PPB_ID}/buat-retur-draft`;

@php
$jsItems = $itemData->map(fn($d) => [
    'permintaan_item_id' => $d['item']->id,
    'barang_id'          => $d['item']->barang_id,
    'nama_barang'        => $d['item']->nama_barang,
    'kode_barang'        => $d['item']->kode_barang ?? '',
    'merek'              => $d['item']->barang->merekBarang->nama ?? '—',
    'ukuran'             => $d['item']->barang->ukuran ?? '—',
    'satuan'             => $d['item']->satuan,
    'qty'                => $d['item']->qty,
    'qty_dipenuhi'       => $d['stokPusatTotal'] > 0 ? $d['item']->qty : 0,
    'stok_pusat'         => $d['stokPusatTotal'],
    'stok_kso'           => $d['stokKsoTotal'],
    'stok_kso_detail'    => $stokKsoByBarang[$d['item']->barang_id] ?? [],
    'penjualan3bln'      => $d['penjualan3bln'],
    'fefo'               => $d['fefoAssigned'],
    'lot_confirmed'      => false,
    'catatan'            => $d['item']->catatan ?? '',
])->values()->all();
@endphp
let items    = {!! json_encode($jsItems) !!};
let modalIdx = -1;
let ksoIdx   = -1;

// ── Render tabel ──────────────────────────────────────────────────
function esc(s) {
    if (s == null || s === '') return '—';
    return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
}

function stokChip(total, satuan, target) {
    if (total === 0) return `<span class="chip-stok chip-stok-warn">Habis</span>`;
    if (total < target) return `<span class="chip-stok chip-stok-warn">${total} ${satuan}</span>`;
    return `<span class="chip-stok chip-stok-ok">${total} ${satuan}</span>`;
}

function renderItems() {
    const tbody = document.getElementById('tbodyItems');
    tbody.innerHTML = items.map((item, idx) => {
        const lotTotal = item.fefo.reduce((s, l) => s + (l.qty_ambil || 0), 0);
        let lotChip = '';
        if (!item.fefo.length) {
            lotChip = `<span class="chip-lot chip-lot-warn">Tdk ada stok</span>`;
        } else if (item.lot_confirmed) {
            lotChip = `<button type="button" class="chip-lot chip-lot-confirmed" onclick="bukaModalLot(${idx})">✓ ${lotTotal} dikonfirmasi</button>`;
        } else {
            lotChip = `<button type="button" class="chip-lot chip-lot-unset" onclick="bukaModalLot(${idx})">📋 ${lotTotal} (saran FEFO)</button>`;
        }

        let ksoChip = '';
        if (item.stok_kso_detail && item.stok_kso_detail.length > 0) {
            ksoChip = `<button type="button" class="chip-kso" onclick="bukaModalKso(${idx})">${item.stok_kso} ${esc(item.satuan)} <i class="bx bx-info-circle" style="font-size:.8rem"></i></button>`;
        } else {
            ksoChip = `<span class="chip-kso-none">${item.stok_kso} ${esc(item.satuan)}</span>`;
        }

        const perluKeterangan = item.qty_dipenuhi < item.qty;
        let keteranganChip = '';
        if (perluKeterangan && !item.catatan) {
            keteranganChip = `<button type="button" class="chip-lot chip-lot-warn" onclick="bukaModalKeterangan(${idx})">⚠ Wajib isi</button>`;
        } else if (item.catatan) {
            keteranganChip = `<button type="button" class="chip-lot chip-lot-confirmed" title="${esc(item.catatan)}" onclick="bukaModalKeterangan(${idx})">✓ Terisi</button>`;
        } else {
            keteranganChip = `<button type="button" class="chip-lot chip-lot-unset" onclick="bukaModalKeterangan(${idx})">+ Tambah</button>`;
        }

        return `
        <tr>
            <td class="text-center">${idx + 1}</td>
            <td>
                <div class="fw-semibold">${esc(item.nama_barang)}</div>
                <div class="text-muted" style="font-size:.78rem">${esc(item.kode_barang)}</div>
                ${item.merek !== '—' || item.ukuran !== '—'
                    ? `<div class="text-muted fst-italic" style="font-size:.75rem">${esc(item.merek)} · ${esc(item.ukuran)}</div>` : ''}
            </td>
            <td class="text-center">${item.qty} ${esc(item.satuan)}</td>
            <td class="text-center">
                <input type="number" min="0" max="${item.qty}"
                       class="form-control qty-dipenuhi-input"
                       data-idx="${idx}" value="${item.qty_dipenuhi}">
            </td>
            <td class="text-center">${stokChip(item.stok_pusat, item.satuan, item.qty_dipenuhi)}</td>
            <td class="text-center">${ksoChip}</td>
            <td class="text-center"><span class="chip-pjl">${item.penjualan3bln} ${esc(item.satuan)}</span></td>
            <td class="text-center">${lotChip}</td>
            <td class="text-center">${keteranganChip}</td>
        </tr>`;
    }).join('');

    // Re-bind qty_dipenuhi inputs
    document.querySelectorAll('.qty-dipenuhi-input').forEach(inp => {
        inp.addEventListener('change', function () {
            const idx = parseInt(this.dataset.idx);
            items[idx].qty_dipenuhi = Math.max(0, Math.min(parseInt(this.value)||0, items[idx].qty));
            this.value = items[idx].qty_dipenuhi;
            applyFefoForItem(idx);
            items[idx].lot_confirmed = false;
            renderItems();
        });
    });
}

// ── FEFO ──────────────────────────────────────────────────────────
function applyFefoForItem(idx) {
    let sisa = items[idx].qty_dipenuhi;
    items[idx].fefo = items[idx].fefo.map(lot => {
        const ambil = Math.min(lot.qty_tersedia, Math.max(0, sisa));
        sisa -= ambil;
        return { ...lot, qty_ambil: ambil };
    });
}

// ── Modal Lot ─────────────────────────────────────────────────────
function bukaModalLot(idx) {
    modalIdx = idx;
    const item = items[idx];
    document.getElementById('modalLotTitle').textContent    = item.nama_barang;
    document.getElementById('modalLotSubtitle').textContent =
        `Stok Pusat: ${item.stok_pusat} ${item.satuan} · Qty Dipenuhi: ${item.qty_dipenuhi} ${item.satuan}`;
    document.getElementById('lotQtyTarget').textContent = item.qty_dipenuhi;
    renderModalLots();
    bootstrap.Modal.getOrCreateInstance(document.getElementById('modalLot')).show();
}

function renderModalLots() {
    const item  = items[modalIdx];
    const tbody = document.getElementById('tbodyModalLots');
    if (!item.fefo.length) {
        tbody.innerHTML = '<tr><td colspan="5" class="text-center text-muted py-3">Tidak ada stok tersedia di gudang pusat.</td></tr>';
        updateLotTotal(); return;
    }
    tbody.innerHTML = item.fefo.map(lot => {
        const ed = lot.kedaluwarsa;
        let edBadge = '<span class="badge-ed-none">Tanpa ED</span>';
        if (ed) {
            const parts   = ed.split('-');
            const edDate  = new Date(parts[2], parts[1]-1, parts[0]);
            const diffDay = Math.round((edDate - new Date()) / 86400000);
            const cls     = diffDay < 0 ? 'badge-ed-warn' : diffDay < 90 ? 'badge-ed-warn' : 'badge-ed-ok';
            edBadge = `<span class="${cls}">${ed}</span>`;
        }
        return `
        <tr>
            <td>${lot.no_lot || '<span class="text-muted fst-italic">—</span>'}</td>
            <td>${lot.no_serial || '<span class="text-muted fst-italic">—</span>'}</td>
            <td>${edBadge}</td>
            <td class="text-center fw-semibold">${lot.qty_tersedia} <small class="text-muted">${item.satuan}</small></td>
            <td class="text-center">
                <input type="number" class="form-control lot-qty-input"
                       min="0" max="${lot.qty_tersedia}" value="${lot.qty_ambil}"
                       data-stok-id="${lot.stok_id}"
                       data-tersedia="${lot.qty_tersedia}">
            </td>
        </tr>`;
    }).join('');
    updateLotTotal();
}

function updateLotTotal() {
    const target = items[modalIdx]?.qty_dipenuhi ?? 0;
    let total = 0;
    document.querySelectorAll('.lot-qty-input').forEach(inp => {
        const max = parseInt(inp.dataset.tersedia) || 0;
        let v = parseInt(inp.value) || 0;
        if (v > max) { inp.value = v = max; }
        total += v;
    });
    document.getElementById('lotTotalAmbil').textContent = total;
    document.getElementById('lotQtyTarget').textContent  = target;
    const ok     = total === target;
    const kurang = total < target;
    const lebih  = total > target;
    document.getElementById('lotStatusOk').classList.toggle('d-none', !ok);
    document.getElementById('lotStatusKurang').classList.toggle('d-none', !kurang);
    document.getElementById('lotStatusLebih').classList.toggle('d-none', !lebih);
    document.getElementById('btnKonfirmasiLot').disabled = !ok;
}

function applyFEFO() {
    if (modalIdx < 0) return;
    let sisa = items[modalIdx].qty_dipenuhi;
    document.querySelectorAll('.lot-qty-input').forEach(inp => {
        const tersedia = parseInt(inp.dataset.tersedia) || 0;
        const ambil    = Math.min(tersedia, Math.max(0, sisa));
        inp.value = ambil;
        sisa -= ambil;
    });
    updateLotTotal();
}

function konfirmasiLot() {
    if (modalIdx < 0) return;
    items[modalIdx].fefo = items[modalIdx].fefo.map((lot, i) => {
        const inp   = document.querySelectorAll('.lot-qty-input')[i];
        const ambil = inp ? (parseInt(inp.value) || 0) : lot.qty_ambil;
        return { ...lot, qty_ambil: ambil };
    });
    items[modalIdx].lot_confirmed = true;
    bootstrap.Modal.getInstance(document.getElementById('modalLot')).hide();
    renderItems();
}

// ── Modal Keterangan ──────────────────────────────────────────────
let keteranganIdx = -1;

function bukaModalKeterangan(idx) {
    keteranganIdx = idx;
    const item = items[idx];
    const perlu = item.qty_dipenuhi < item.qty;
    document.getElementById('modalKeteranganTitle').textContent = item.nama_barang;
    document.getElementById('modalKeteranganAlert').classList.toggle('d-none', !perlu);
    document.getElementById('inputKeterangan').value = item.catatan || '';
    bootstrap.Modal.getOrCreateInstance(document.getElementById('modalKeterangan')).show();
    setTimeout(() => document.getElementById('inputKeterangan').focus(), 300);
}

document.getElementById('btnSimpanKeterangan').addEventListener('click', function () {
    if (keteranganIdx < 0) return;
    const val = document.getElementById('inputKeterangan').value.trim();
    const item = items[keteranganIdx];
    const perlu = item.qty_dipenuhi < item.qty;
    if (perlu && !val) {
        document.getElementById('inputKeterangan').classList.add('is-invalid');
        return;
    }
    document.getElementById('inputKeterangan').classList.remove('is-invalid');
    items[keteranganIdx].catatan = val;
    bootstrap.Modal.getInstance(document.getElementById('modalKeterangan')).hide();
    renderItems();
});

// ── Modal Stok KSO ────────────────────────────────────────────────
function bukaModalKso(idx) {
    ksoIdx = idx;
    const item = items[idx];
    document.getElementById('ksoBarangNama').textContent = item.nama_barang;

    const tbody = document.getElementById('tbodyKso');
    if (!item.stok_kso_detail || item.stok_kso_detail.length === 0) {
        tbody.innerHTML = '<tr><td colspan="6" class="text-center text-muted py-3">Tidak ada stok di gudang KSO manapun.</td></tr>';
    } else {
        tbody.innerHTML = item.stok_kso_detail.map(g => {
            const ed = g.kedaluwarsa;
            let edBadge = '<span class="badge-ed-none">—</span>';
            if (ed) {
                const parts   = ed.split('-');
                const edDate  = new Date(parts[2], parts[1]-1, parts[0]);
                const diffDay = Math.round((edDate - new Date()) / 86400000);
                const cls     = diffDay < 0 ? 'badge-ed-warn' : diffDay < 90 ? 'badge-ed-warn' : 'badge-ed-ok';
                edBadge = `<span class="${cls}">${ed}</span>`;
            }
            return `
        <tr>
            <td>${esc(g.faskes_nama)}</td>
            <td>${g.no_lot || '<span class="text-muted fst-italic">—</span>'}</td>
            <td>${g.no_serial || '<span class="text-muted fst-italic">—</span>'}</td>
            <td>${edBadge}</td>
            <td class="text-center fw-semibold">${g.qty} <small class="text-muted">${esc(item.satuan)}</small></td>
            <td class="text-center">
                <input type="number" class="form-control retur-qty-input"
                       min="0" max="${g.qty}" value="0"
                       data-stok-id="${g.stok_id}"
                       data-gudang-id="${g.gudang_id}"
                       data-faskes-id="${g.faskes_id}"
                       data-faskes-nama="${esc(g.faskes_nama)}"
                       data-no-lot="${g.no_lot || ''}"
                       data-no-serial="${g.no_serial || ''}"
                       data-kedaluwarsa="${g.kedaluwarsa || ''}">
            </td>
        </tr>`;
        }).join('');
    }

    bootstrap.Modal.getOrCreateInstance(document.getElementById('modalStokKso')).show();
}

document.getElementById('btnBuatRetur').addEventListener('click', function () {
    if (ksoIdx < 0) return;
    const item = items[ksoIdx];
    const inputList = [];

    document.querySelectorAll('.retur-qty-input').forEach(inp => {
        const qty = parseInt(inp.value) || 0;
        if (qty < 1) return;
        inputList.push({
            stok_id      : parseInt(inp.dataset.stokId),
            gudang_kso_id: parseInt(inp.dataset.gudangId),
            faskes_id    : parseInt(inp.dataset.faskesId),
            faskes_nama  : inp.dataset.faskesNama,
            barang_id    : item.barang_id,
            nama_barang  : item.nama_barang,
            satuan       : item.satuan,
            qty          : qty,
            no_lot       : inp.dataset.noLot || null,
            no_serial    : inp.dataset.noSerial || null,
            kedaluwarsa  : inp.dataset.kedaluwarsa || null,
        });
    });

    if (!inputList.length) {
        Swal.fire({ icon: 'warning', title: 'Perhatian', text: 'Isi minimal 1 qty rencana retur.' });
        return;
    }

    const btn = this;
    btn.disabled = true;
    btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span> Memproses...';

    fetch(BUAT_RETUR_URL, {
        method : 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': CSRF, 'Accept': 'application/json' },
        body   : JSON.stringify({ items: inputList }),
    })
    .then(r => r.json())
    .then(data => {
        btn.disabled = false;
        btn.innerHTML = '<i class="bx bx-transfer me-1"></i> Buat Retur Draft';
        if (data.success) {
            bootstrap.Modal.getInstance(document.getElementById('modalStokKso')).hide();
            Swal.fire({ icon:'success', title:'Berhasil', text: data.message, timer:1800, showConfirmButton:false })
                .then(() => location.reload());
        } else {
            Swal.fire({ icon:'error', title:'Gagal', text: data.message || 'Terjadi kesalahan.' });
        }
    })
    .catch(() => {
        btn.disabled = false;
        btn.innerHTML = '<i class="bx bx-transfer me-1"></i> Buat Retur Draft';
        Swal.fire({ icon:'error', title:'Gagal', text: 'Terjadi kesalahan koneksi.' });
    });
});

// ── Event binds ───────────────────────────────────────────────────
document.getElementById('btnResetFEFO').addEventListener('click', applyFEFO);
document.getElementById('btnKonfirmasiLot').addEventListener('click', konfirmasiLot);
$(document).on('input', '.lot-qty-input', updateLotTotal);

// ── Submit ────────────────────────────────────────────────────────
document.getElementById('btnSelesaikan').addEventListener('click', function () {
    // Auto-konfirmasi item yang belum dikonfirmasi menggunakan saran FEFO default
    items.forEach((item, idx) => {
        if (item.fefo.length > 0 && !item.lot_confirmed) {
            items[idx].lot_confirmed = true;
        }
    });

    const belumKeterangan = items.filter(i => i.qty_dipenuhi < i.qty && !i.catatan);
    if (belumKeterangan.length) {
        Swal.fire({ icon:'warning', title:'Keterangan Wajib Diisi',
            text: `${belumKeterangan.length} barang dipenuhi kurang dari yang diminta. Isi keterangan terlebih dahulu pada setiap baris yang ditandai merah.` });
        return;
    }

    Swal.fire({
        title: 'Selesaikan pemenuhan?',
        text: 'Stok gudang pusat akan berkurang dan stok gudang KSO tujuan akan bertambah.',
        icon: 'question', showCancelButton: true,
        confirmButtonColor: '#7c3aed', confirmButtonText: 'Ya, Selesaikan', cancelButtonText: 'Batal',
    }).then(res => {
        if (!res.isConfirmed) return;

        const btn = document.getElementById('btnSelesaikan');
        btn.disabled = true;
        btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span> Memproses...';

        const payload = {
            _token: CSRF,
            items: items.map(item => ({
                permintaan_item_id: item.permintaan_item_id,
                qty_dipenuhi      : item.qty_dipenuhi,
                catatan           : item.catatan || null,
                lots: item.fefo.filter(l => l.qty_ambil > 0).map(l => ({
                    stok_id: l.stok_id,
                    qty    : l.qty_ambil,
                })),
            })),
        };

        $.ajax({
            url: SELESAIKAN_URL, method: 'POST',
            contentType: 'application/json',
            headers: { 'X-CSRF-TOKEN': CSRF },
            data: JSON.stringify(payload),
            success: r => {
                if (r.success) {
                    Swal.fire({ icon:'success', title:'Berhasil', text: r.message, timer:1800, showConfirmButton:false })
                        .then(() => window.location.replace(`${BASE_URL}/${PPB_PREFIX}/${PPB_ID}`));
                }
            },
            error: xhr => {
                btn.disabled = false;
                btn.innerHTML = '<i class="bx bx-check-circle me-1"></i> Selesaikan Pemenuhan';
                Swal.fire({ icon:'error', title:'Gagal', text: xhr.responseJSON?.message ?? 'Terjadi kesalahan.' });
            },
        });
    });
});

// ── Init ──────────────────────────────────────────────────────────
renderItems();
</script>
@endsection