@extends('layouts.master')

@section('title', isset($kso) ? 'Edit Pemakaian Barang' : 'Catat Pemakaian Barang')

@section('styles')
<link rel="stylesheet" href="{{ asset('build/assets/libs/flatpickr/flatpickr.min.css') }}">
<style>
    .s2-barang .select2-selection--single { height:auto !important; min-height:30px !important; position:relative !important; }
    .s2-barang .select2-selection__rendered { white-space:normal !important; word-break:break-word !important; line-height:1.4 !important; font-size:.82rem !important; padding:4px 44px 4px 8px !important; }
    .s2-barang .select2-selection__arrow { position:absolute !important; right:4px !important; top:50% !important; transform:translateY(-50%) !important; height:20px !important; }
    #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; }
    #tblItems tfoot td { background:#faf5ff; font-weight:600; border:1px solid #e9d5ff; padding:7px 10px; }
    #trInlineAdd td { background:#fdfaff; border:1px solid #e9d5ff; padding:6px 6px; }
    .inline-ctrl { font-size:.8rem !important; padding:3px 7px !important; height:30px; }
    .inline-ctrl-right { text-align:right; }
    .chip-info { display:inline-block; font-size:.75rem; color:#6c757d; }
    .chip-stok { display:inline-block; font-size:.72rem; padding:1px 6px; 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-lot { display:inline-block; font-size:.72rem; padding:1px 7px; 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; }
    #tblModalLots { font-size:.83rem; }
    #tblModalLots thead th { background:#f8f5ff; color:#7c3aed; border:1px solid #e9d5ff; }
    #tblModalLots tbody td { border:1px solid #f0e8ff; vertical-align:middle; }
    .lot-qty-input { width:70px; text-align:center; font-size:.82rem; padding:2px 4px; height:28px; }
    #lotTotalBar { font-size:.85rem; }
</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">{{ isset($kso) ? 'Edit Pemakaian Barang' : 'Catat Pemakaian Barang' }}</p>
            <span class="fs-13 text-muted">Penjualan &rarr; Pemakaian Barang &rarr; {{ isset($kso) ? 'Edit' : 'Buat Baru' }}</span>
        </div>
        <a href="{{ route('penjualan.pemakaian-barang.index') }}" class="btn btn-secondary btn-sm mt-2 mt-md-0">
            <i class="bx bx-arrow-back me-1"></i> Kembali
        </a>
    </div>

    <form id="formKso" autocomplete="off">
    @csrf

    {{-- Header --}}
    <div class="card custom-card mb-3">
        <div class="card-header">
            <div class="card-title mb-0"><i class="bx bx-receipt me-2 text-primary"></i>Informasi Pemakaian Barang</div>
        </div>
        <div class="card-body">
            <div class="row g-3">
                <div class="col-md-2">
                    <label class="form-label fw-semibold">Nomor KSO</label>
                    <input type="text" class="form-control form-control-sm bg-light" value="{{ $nomor }}" readonly>
                    <small class="text-muted">Digenerate otomatis</small>
                </div>
                <div class="col-md-2">
                    <label class="form-label fw-semibold">Tgl. Transaksi</label>
                    <input type="text" class="form-control form-control-sm bg-light"
                           value="{{ isset($kso) ? $kso->tanggal_transaksi->format('d-m-Y') : now()->format('d-m-Y') }}" readonly>
                </div>
                <div class="col-md-4">
                    <label class="form-label fw-semibold">Faskes KSO <span class="text-danger">*</span></label>
                    <div class="d-flex align-items-center gap-2">
                        <div class="flex-grow-1">
                            <select id="selectFaskes" class="form-select form-select-sm" required>
                                <option value="">-- Pilih Faskes KSO --</option>
                                @foreach($faskesList as $f)
                                <option value="{{ $f->id }}"
                                    data-mode="{{ $f->mode_pengiriman ?? 'normal' }}"
                                    data-mode-pemakaian="{{ $f->mode_pemakaian ?? 'normal' }}"
                                    {{ (isset($kso) && $kso->faskes_id == $f->id) || (isset($source) && $source->faskes_id == $f->id) ? 'selected' : '' }}>{{ $f->nama }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="invalid-feedback" id="err_faskes_id"></div>
                </div>
                <div class="col-md-3">
                    <label class="form-label fw-semibold">Nama Pasien <span class="text-danger">*</span></label>
                    <input type="text" id="inputNamaPasien" class="form-control form-control-sm"
                           placeholder="Nama lengkap pasien" maxlength="255"
                           value="{{ $kso->nama_pasien ?? $source->nama_pasien ?? '' }}">
                    <div class="invalid-feedback" id="err_nama_pasien"></div>
                </div>
                <div class="col-md-2">
                    <label class="form-label fw-semibold">No. Rekam Medis</label>
                    <input type="text" id="inputNoRm" class="form-control form-control-sm"
                           placeholder="(opsional)" maxlength="50"
                           value="{{ $kso->no_rm ?? $source->no_rm ?? '' }}">
                </div>
                <div class="col-md-2">
                    <label class="form-label fw-semibold">Jenis Pasien <span class="text-danger">*</span></label>
                    <select id="selectJenisPasien" class="form-select form-select-sm" required>
                        <option value="">-- Pilih --</option>
                        @php $jpId = $kso->jenis_pasien_id ?? $source->jenis_pasien_id ?? null; @endphp
                        @foreach($jenisPasienList as $jp)
                        <option value="{{ $jp->id }}" {{ $jpId == $jp->id ? 'selected' : '' }}>{{ $jp->nama }}</option>
                        @endforeach
                    </select>
                    <div class="invalid-feedback" id="err_jenis_pasien_id"></div>
                </div>
                <div class="col-md-2">
                    <label class="form-label fw-semibold">Tgl. Pemakaian <span class="text-danger">*</span></label>
                    <input type="text" id="tglPemakaian" class="form-control form-control-sm flatpickr"
                           placeholder="dd-mm-yyyy"
                           value="{{ isset($kso) && $kso->tgl_pemakaian ? $kso->tgl_pemakaian->format('d-m-Y') : '' }}">
                    <div class="invalid-feedback" id="err_tgl_pemakaian"></div>
                </div>
                <div class="col-md-4">
                    <label class="form-label fw-semibold">Nama Dokter <span class="text-danger">*</span></label>
                    <select id="selectDokter" class="form-select form-select-sm" style="width:100%" required>
                        <option value="">-- Pilih Dokter --</option>
                    </select>
                </div>
                <div class="col-md-4">
                    <label class="form-label fw-semibold">Catatan</label>
                    <textarea id="inputCatatan" class="form-control form-control-sm" rows="2"
                              placeholder="Catatan tambahan (opsional)">{{ $kso->catatan ?? $source->catatan ?? '' }}</textarea>
                </div>
            </div>
        </div>
    </div>

    {{-- Tabel Barang --}}
    <div class="card custom-card mb-3">
        <div class="card-header">
            <div class="card-title mb-0"><i class="bx bx-package 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:200px">Barang</th>
                            <th class="text-center" style="width:60px">Satuan</th>
                            <th class="text-center" style="width:68px">Qty</th>
                            <th class="text-center" style="width:130px" id="thStokLot">Stok KSO / Lot</th>
                            <th style="width:130px">No. Surat Jalan</th>
                            <th style="width:130px">No. Transaksi</th>
                            <th style="width:130px">Harga Jual</th>
                            <th class="text-end" style="width:140px">Subtotal</th>
                            <th class="text-center" style="width:42px">Aksi</th>
                        </tr>
                    </thead>
                    <tbody id="tbodyItems"></tbody>
                    <tbody id="tbodyInline">
                        <tr id="trInlineAdd">
                            <td class="text-center text-muted" style="width:36px">+</td>
                            <td>
                                <div class="d-flex gap-1 align-items-center">
                                    <div class="flex-grow-1" style="min-width:0">
                                        <select id="inlineBarang" class="form-select select2-barang" style="width:100%">
                                            <option value="">Ketik kode atau nama barang...</option>
                                        </select>
                                    </div>
                                    <button type="button" class="btn btn-outline-secondary btn-sm px-2" style="height:30px;flex-shrink:0" onclick="openBrowseBarang()" title="Cari barang">
                                        <i class="bx bx-search"></i>
                                    </button>
                                </div>
                                <span id="inlineManufaktur" data-manufaktur="" data-jenis-nie="" data-no-nie=""></span>
                            </td>
                            <td class="text-center"><span id="inlineSatuan" class="chip-info">—</span></td>
                            <td class="text-center fw-semibold">
                                <span id="inlineQtyDisplay">—</span>
                                <input type="hidden" id="inlineQty" value="0">
                            </td>
                            <td class="text-center">
                                {{-- Normal mode: stok chip (clickable) --}}
                                <span id="inlineStokChip" class="chip-stok chip-stok-none" style="cursor:default" onclick="bukaModalInlineLot()">—</span>
                            </td>
                            <td>
                                <span id="inlineNomorKirim" class="chip-info small text-muted fst-italic">—</span>
                            </td>
                            <td>
                                <input type="text" id="inlineNoTransaksi" class="form-control inline-ctrl" placeholder="(opsional)" maxlength="50" style="width:115px">
                            </td>
                            <td>
                                <div class="d-flex align-items-center gap-1">
                                    <input type="text" id="inlineHarga" class="form-control inline-ctrl inline-ctrl-right" placeholder="0" style="width:105px;background:#f8f9fa;cursor:default" readonly>
                                    <span id="inlineHargaWarn" class="text-warning small d-none" title="Tidak ada harga terdaftar">⚠</span>
                                </div>
                            </td>
                            <td></td>
                            <td class="text-center">
                                <button type="button" class="btn btn-primary btn-sm px-2" onclick="tambahItem()" title="Tambahkan">
                                    <i class="bx bx-plus"></i>
                                </button>
                            </td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr>
                            <td colspan="8" class="text-end pe-3 text-muted">Subtotal</td>
                            <td id="tdSubtotal" class="text-end pe-3 text-muted">Rp 0</td>
                            <td colspan="2"></td>
                        </tr>
                        <tr>
                            <td colspan="8" class="text-end pe-3 text-muted">DPP (11/12 × Subtotal)</td>
                            <td id="tdDpp" class="text-end pe-3 text-muted">Rp 0</td>
                            <td colspan="2"></td>
                        </tr>
                        <tr>
                            <td colspan="8" class="text-end pe-3 text-muted">PPN 12%</td>
                            <td id="tdPpn" class="text-end pe-3 text-muted">Rp 0</td>
                            <td colspan="2"></td>
                        </tr>
                        <tr class="fw-semibold">
                            <td colspan="8" class="text-end pe-3">
                                Total Harga
                                <button type="button" id="btnResetTotal" class="btn btn-link btn-sm p-0 ms-2 text-muted d-none"
                                        onclick="resetTotal()" title="Kembalikan ke kalkulasi otomatis" style="font-size:.75rem">↺ otomatis</button>
                            </td>
                            <td class="text-end pe-2">
                                <input type="text" id="inputTotal" class="form-control form-control-sm text-end fw-semibold"
                                       style="width:130px;margin-left:auto" placeholder="0"
                                       oninput="onTotalInput(this.value)" onblur="onTotalBlur(this.value)">
                            </td>
                            <td colspan="2"></td>
                        </tr>
                    </tfoot>
                </table>
            </div>
            <div id="alertItemsEmpty" class="alert alert-warning m-3 d-none">
                <i class="bx bx-error-circle me-2"></i> Belum ada barang. Pilih barang lalu klik <strong>+</strong>.
            </div>
        </div>
    </div>

    <div class="d-flex gap-2 justify-content-end mb-4">
        <a href="{{ route('penjualan.pemakaian-barang.index') }}" class="btn btn-secondary">Batal</a>
        <button type="button" class="btn btn-primary" onclick="submitForm()">
            <i class="bx bx-save me-1"></i> Simpan
        </button>
    </div>
    </form>
</div>

{{-- Modal Browse Barang --}}
<div class="modal fade" id="modalBrowseBarang" tabindex="-1">
    <div class="modal-dialog modal-xl modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header py-2">
                <h6 class="modal-title fw-semibold"><i class="bx bx-search-alt me-2"></i>Cari Barang</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <input type="text" id="browseCari" class="form-control form-control-sm" placeholder="Ketik nama atau kode barang...">
                </div>
                <div class="table-responsive" style="max-height:400px;overflow-y:auto">
                    <table class="table table-hover table-bordered mb-0" style="font-size:.83rem">
                        <thead style="background:#f8f5ff;color:#7c3aed;position:sticky;top:0">
                            <tr>
                                <th style="width:90px">Kode</th>
                                <th style="min-width:200px">Nama Barang</th>
                                <th style="width:120px">Jenis</th>
                                <th style="width:100px">Merek</th>
                                <th style="width:80px">Ukuran</th>
                                <th class="text-center" style="width:70px">Satuan</th>
                            </tr>
                        </thead>
                        <tbody id="tbodyBrowseBarang">
                            <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>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer py-2">
                <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>

{{-- Modal Lot (Normal mode: qty input per 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">Detail Lot Stok KSO</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>No. Surat Jalan</th>
                                <th style="width:110px">No. Lot</th>
                                <th style="width:110px">No. Serial</th>
                                <th style="width:120px">Tgl. Kedaluwarsa</th>
                                <th class="text-center" style="width:85px">Tersedia</th>
                                <th class="text-center" style="width:95px">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></span>
                    <span id="lotStatusOk"    class="badge bg-success d-none">✓ Dipilih</span>
                    <span id="lotStatusKurang" class="badge bg-warning text-dark d-none"></span>
                    <span id="lotStatusLebih"  class="badge bg-danger d-none"></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>


@endsection

@section('scripts')
<script src="{{ asset('build/assets/libs/flatpickr/flatpickr.min.js') }}"></script>
<script>
@php
$existingItems = isset($kso) ? $kso->items->map(fn($i) => [
    'barang_id'   => $i->barang_id,
    'kode_barang' => $i->kode_barang,
    'nama_barang' => $i->nama_barang,
    'manufaktur'  => $i->barang?->manufaktur ?? '',
    'jenis_nie'   => $i->barang?->jenis_nie ?? '',
    'no_nie'      => $i->barang?->no_nie ?? '',
    'satuan'      => $i->satuan,
    'qty'         => $i->qty,
    'nomor_kirim'  => $i->nomor_kirim,
    'no_transaksi' => $i->no_transaksi,
    'harga_jual'   => (float) $i->harga_jual,
    'stok_total'  => null,
    'stok_lots'   => [],
    'sj_lots'     => [],
    'lots'        => $i->itemStoks->map(fn($s) => [
        'stok_id'              => $s->stok_id,
        'sj_lot_id'            => $s->surat_jalan_lot_id,
        'no_lot'               => $s->no_lot,
        'tgl_ed'               => $s->tanggal_kedaluwarsa?->format('d-m-Y'),
        'tgl_ed_iso'           => $s->tanggal_kedaluwarsa?->format('Y-m-d'),
        'tanggal_kedaluwarsa'     => $s->tanggal_kedaluwarsa?->format('d-m-Y'),
        'tanggal_kedaluwarsa_iso' => $s->tanggal_kedaluwarsa?->format('Y-m-d'),
        'qty_ambil'            => $s->qty_ambil,
        'qty_tersedia'         => $s->stok?->qty ?? 0,
    ])->values()->all(),
    'lot_confirmed' => $i->itemStoks->isNotEmpty(),
])->values()->all() : [];
@endphp

const BASE_URL       = "{{ url('/') }}";
const CSRF           = "{{ csrf_token() }}";
const IS_EDIT        = {{ isset($kso) ? 'true' : 'false' }};
const KSO_ID         = {{ $kso->id ?? 'null' }};
const EXISTING_ITEMS = @json($existingItems);
const EXISTING_TOTAL = {{ isset($kso) ? (float) $kso->total_harga : 'null' }};
const ROUTE_STORE    = '{{ route("penjualan.pemakaian-barang.store") }}';
const ROUTE_UPDATE   = IS_EDIT ? `{{ url("pemakaian-barang") }}/${KSO_ID}` : null;
const ROUTE_BARANG   = '{{ route("penjualan.pemakaian-barang.cari-barang") }}';
const ROUTE_HARGA    = '{{ route("penjualan.pemakaian-barang.harga-jual") }}';
const ROUTE_STOK     = '{{ route("penjualan.pemakaian-barang.stok-tersedia") }}';
const ROUTE_SJ_LOT   = '{{ route("penjualan.pemakaian-barang.sj-lot-tersedia") }}';
const ROUTE_DOKTER   = '{{ route("penjualan.pemakaian-barang.dokter-faskes") }}';

let items         = [];
let totalManual   = false;
let modalIdx      = -1;      // index di items[] yang sedang dibuka modal
let modalLots     = [];      // lot stok (normal mode)
let modalSjLots   = [];      // sj lots (sn mode)
let modePemakaian = 'normal'; // 'normal' | 'serial_number'

// Stok lots untuk inline add row (normal mode)
let inlineStokLotsAll    = [];
let inlineStokLots       = [];
let inlinePpbNomors      = [];
let inlineLotsConfirmed  = false;

// SJ lots untuk inline add row (sn mode)
let inlineSjLotsAll      = [];
let inlineSelectedSjIds  = new Set();

$(function () {
    flatpickr('#tglPemakaian', { dateFormat: 'd-m-Y', maxDate: 'today' });

    $('#selectDokter').select2({ dropdownParent: $('body'), placeholder: '-- Pilih Dokter --', allowClear: true, width: '100%' });
    $('#selectPerawat').select2({ dropdownParent: $('body'), placeholder: '-- Pilih Perawat --', allowClear: true, width: '100%' });

    function loadDokterFaskes(faskesId, selectedVal) {
        const $sel = $('#selectDokter');
        $sel.empty().append('<option value="">-- Pilih Dokter --</option>');
        if (!faskesId) return;
        $.get(ROUTE_DOKTER, { faskes_id: faskesId }, function (data) {
            data.forEach(d => {
                const opt = new Option(`${d.nama} (${d.profesi})`, d.nama, false, d.nama === selectedVal);
                $sel.append(opt);
            });
            if (selectedVal) $sel.val(selectedVal);
            $sel.trigger('change');
        });
    }

    $('#selectFaskes').select2({
        dropdownParent: $('body'), placeholder: '-- Pilih Faskes KSO --', allowClear: true, width: '100%',
    }).on('select2:select', function () {
        const opt = $(this).find(':selected');
        modePemakaian = opt.data('mode-pemakaian') || 'normal';
        loadDokterFaskes($(this).val(), null);
        resetInlineRow();
        if (items.length) refetchAllData();
    }).on('select2:clear', function () {
        modePemakaian = 'normal';
        loadDokterFaskes(null, null);
        resetInlineRow();
    });

    // Set mode pemakaian dari faskes yang sudah terpilih (mode edit/copy)
    const _initOpt = $('#selectFaskes').find(':selected');
    if (_initOpt.val()) modePemakaian = _initOpt.data('mode-pemakaian') || 'normal';

    // Load dokter sesuai faskes awal (mode edit/copy)
    const _initFaskes = $('#selectFaskes').val();
    const _initDokter = '{{ isset($kso) ? $kso->nama_dokter : (isset($source) ? $source->nama_dokter : "") }}';
    if (_initFaskes) loadDokterFaskes(_initFaskes, _initDokter);

    $('#selectJenisPasien').on('change', function () {
        // Re-fetch inline row harga jika barang sudah dipilih
        const sel = $('#inlineBarang').select2('data')[0];
        if (sel && sel.id) {
            fetchHarga(sel.id, function (harga) {
                if (harga) {
                    document.getElementById('inlineHarga').value = formatRp(harga);
                    document.getElementById('inlineHargaWarn').classList.add('d-none');
                } else {
                    document.getElementById('inlineHarga').value = '';
                    document.getElementById('inlineHargaWarn').classList.toggle('d-none', !$('#selectFaskes').val());
                }
            });
        }
        // Re-fetch harga semua item yang sudah ditambahkan
        if (items.length) refetchAllHarga();
    });

    $('#inlineBarang').select2({
        dropdownParent: $('body'), placeholder: 'Ketik kode atau nama barang...', allowClear: false,
        minimumInputLength: 0, width: '100%', containerCssClass: 's2-barang',
        templateResult: (item) => {
            if (item.loading) return item.text;
            const merek = item.raw?.merek && item.raw.merek !== '-'
                ? `<span style="color:#aaa;font-size:.78rem"> — ${item.raw.merek}</span>` : '';
            return $(`<span>${item.text}${merek}</span>`);
        },
        templateSelection: (item) => item.text,
        ajax: {
            url: ROUTE_BARANG, dataType: 'json', delay: 300,
            data: p => ({ q: p.term ?? '', faskes_id: $('#selectFaskes').val() ?? '', mode: modePemakaian === 'serial_number' ? 'serial_number' : 'normal' }),
            processResults: data => {
                return { results: data.map(b => ({ id: b.id, text: b.nama, raw: b })) };
            },
            cache: false,
        },
    }).on('select2:select', function (e) {
        const b = e.params.data.raw;
        $(this).data('raw', b);
        document.getElementById('inlineSatuan').textContent = b.satuan || '—';
        const mEl = document.getElementById('inlineManufaktur');
        mEl.dataset.manufaktur = b.manufaktur || '';
        mEl.dataset.jenisNie   = b.jenis_nie  || '';
        mEl.dataset.noNie      = b.no_nie     || '';

        if (modePemakaian === 'serial_number') {
            fetchSjLots(b.id, function (lots) {
                inlineSjLotsAll     = lots;
                inlineSelectedSjIds = new Set();
                inlineLotsConfirmed = false;
                const usedIds = usedSjIds(-1);
                const tersedia = lots.filter(sj => !usedIds.has(sj.id)).length;
                renderInlineStokChipSn(tersedia);
                document.getElementById('inlineStokChip').dataset.total = tersedia;
            });
        } else {
            fetchStokKso(b.id, function (data) {
                inlineStokLotsAll   = data.lots || [];
                inlinePpbNomors     = data.ppb_nomors || [];
                inlineStokLots      = [];
                inlineLotsConfirmed = false;
                const sudahDipakai = items.filter(i => i.barang_id == b.id).reduce((s, i) => s + (parseInt(i.qty) || 0), 0);
                const stokEfektif  = Math.max(0, (data.total || 0) - sudahDipakai);
                renderInlineStokChip(stokEfektif, data.satuan, parseInt($('#inlineQty').val()) || 1);
                document.getElementById('inlineStokChip').dataset.total = stokEfektif;
            });
        }
        fetchHarga(b.id, function (harga) {
            if (harga) {
                document.getElementById('inlineHarga').value = formatRp(harga);
                document.getElementById('inlineHargaWarn').classList.add('d-none');
            } else {
                document.getElementById('inlineHarga').value = '';
                document.getElementById('inlineHargaWarn').classList.toggle('d-none', !$('#selectFaskes').val());
            }
        });
    }).on('select2:clear', function () {
        $(this).removeData('raw');
        const _mEl = document.getElementById('inlineManufaktur'); _mEl.dataset.manufaktur=''; _mEl.dataset.jenisNie=''; _mEl.dataset.noNie='';
        document.getElementById('inlineSatuan').textContent = '—';
        resetInlineStokArea();
    }).on('select2:open', function () {
        if (!$('#selectFaskes').val()) {
            Swal.fire({ icon: 'warning', title: 'Perhatian', text: 'Pilih Faskes terlebih dahulu.', timer: 2000, showConfirmButton: false });
            $(this).select2('close');
            return;
        }
        setTimeout(() => { const s = document.querySelector('.select2-container--open .select2-search__field'); if (s) s.focus(); }, 30);
    });

    $('#inlineQty').on('input', function () {
        const sel = $('#inlineBarang').select2('data')[0];
        if (!sel || !sel.id) return;
        const el = document.getElementById('inlineStokChip');
        renderInlineStokChip(parseInt(el.dataset.total ?? 0) || 0, el.dataset.satuan ?? '', parseInt(this.value) || 1);
    });

    $('#inlineQty').on('keydown',  e => { if (e.key === 'Enter') { e.preventDefault(); tambahItem(); } });

    if (IS_EDIT && EXISTING_ITEMS.length) {
        items = EXISTING_ITEMS.map(i => ({ ...i }));
        const faskesId = $('#selectFaskes').val();
        if (faskesId) {
            items.forEach((item, idx) => {
                fetchStokKso(item.barang_id, function (data) {
                    items[idx].stok_total  = data.total;
                    items[idx].stok_lots   = data.lots;
                    items[idx].ppb_nomors  = data.ppb_nomors || [];
                    renderItems();
                });
            });
        }
    }
    renderItems();

    if (IS_EDIT && EXISTING_TOTAL !== null) {
        const subtotal  = items.reduce((s, i) => s + i.harga_jual * i.qty, 0);
        const autoTotal = subtotal + (subtotal * 11 / 12 * 0.12);
        if (Math.abs(EXISTING_TOTAL - autoTotal) > 0.01) {
            totalManual = true;
            document.getElementById('inputTotal').value = EXISTING_TOTAL.toLocaleString('id-ID', { maximumFractionDigits: 2 });
            document.getElementById('btnResetTotal').classList.remove('d-none');
        }
    }

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

    document.getElementById('modalLot').addEventListener('hidden.bs.modal', function () {
        // Restore header modal ke normal mode
        const thead = document.querySelector('#tblModalLots thead tr');
        thead.innerHTML = `
            <th>No. Surat Jalan</th>
            <th style="width:110px">No. Lot</th>
            <th style="width:110px">No. Serial</th>
            <th style="width:120px">Tgl. Kedaluwarsa</th>
            <th class="text-center" style="width:85px">Tersedia</th>
            <th class="text-center" style="width:95px">Qty Ambil</th>`;
        document.getElementById('btnResetFEFO').classList.remove('d-none');
        _tempSelectedSjIds = new Set();
    });
});

// ── Row helpers ──────────────────────────────────────────────────────────

function resetInlineRow() {
    $('#inlineBarang').val(null).trigger('change');
    const _mEl = document.getElementById('inlineManufaktur'); _mEl.dataset.manufaktur=''; _mEl.dataset.jenisNie=''; _mEl.dataset.noNie='';
    document.getElementById('inlineSatuan').textContent = '—';
    document.getElementById('inlineQty').value = 0;
    document.getElementById('inlineQtyDisplay').textContent = '—';
    document.getElementById('inlineNomorKirim').textContent = '—';
    document.getElementById('inlineNoTransaksi').value = '';
    document.getElementById('inlineHarga').value = '';
    document.getElementById('inlineHargaWarn').classList.add('d-none');
    resetInlineStokArea();
}

function resetInlineStokArea() {
    const chip = document.getElementById('inlineStokChip');
    chip.className = 'chip-stok chip-stok-none'; chip.textContent = '—'; chip.style.cursor = 'default';
    inlineStokLotsAll = []; inlineStokLots = []; inlinePpbNomors = []; inlineLotsConfirmed = false;
    inlineSjLotsAll = []; inlineSelectedSjIds = new Set();
}

// ── Fetch helpers ─────────────────────────────────────────────────────────

function fetchStokKso(barangId, cb) {
    const faskesId = $('#selectFaskes').val();
    if (!faskesId) { cb({ total: 0, satuan: '', lots: [] }); return; }
    $.get(ROUTE_STOK, { barang_id: barangId, faskes_id: faskesId }, cb);
}

function fetchSjLots(barangId, cb) {
    const faskesId = $('#selectFaskes').val();
    if (!faskesId) { cb([]); return; }
    $.get(ROUTE_SJ_LOT, { barang_id: barangId, faskes_id: faskesId }, cb);
}

function renderInlineStokChipSn(totalUnit) {
    const el = document.getElementById('inlineStokChip');
    el.dataset.total = totalUnit;
    if (inlineLotsConfirmed && inlineSelectedSjIds.size > 0) {
        el.className = 'chip-lot chip-lot-confirmed'; el.textContent = `✓ ${inlineSelectedSjIds.size} dipilih`; el.style.cursor = 'pointer';
    } else if (totalUnit === 0) {
        el.className = 'chip-stok chip-stok-none'; el.textContent = 'Tdk ada unit'; el.style.cursor = 'default';
    } else {
        el.className = 'chip-stok chip-stok-ok'; el.textContent = `${totalUnit} unit tersedia`; el.style.cursor = 'pointer';
    }
}

function fetchHarga(barangId, cb) {
    const faskesId     = $('#selectFaskes').val();
    const jenisPasienId = $('#selectJenisPasien').val();
    if (!faskesId) { cb(null); return; }
    $.get(ROUTE_HARGA, { faskes_id: faskesId, barang_id: barangId, jenis_pasien_id: jenisPasienId || '' }, d => cb(d.harga));
}

function renderInlineStokChip(total, satuan, qty) {
    const el = document.getElementById('inlineStokChip');
    el.dataset.total  = total;
    el.dataset.satuan = satuan;
    if (inlineLotsConfirmed && inlineStokLots.length) {
        el.className = 'chip-lot chip-lot-confirmed'; el.textContent = `✓ ${inlineStokLots.length} dikonfirmasi`;
        el.style.cursor = 'pointer';
    } else if (total === 0) {
        el.className = 'chip-stok chip-stok-none'; el.textContent = 'Tdk ada stok'; el.style.cursor = 'default';
    } else if (total < qty) {
        el.className = 'chip-stok chip-stok-warn'; el.textContent = `Tersedia: ${total} ${satuan}`; el.style.cursor = 'pointer';
    } else {
        el.className = 'chip-stok chip-stok-ok'; el.textContent = `Tersedia: ${total} ${satuan}`; el.style.cursor = 'pointer';
    }
}

function refetchAllHarga() {
    const faskesId = $('#selectFaskes').val();
    if (!faskesId) return;
    items.forEach((item, idx) => {
        fetchHarga(item.barang_id, function (harga) {
            if (harga !== null && harga !== undefined) {
                items[idx].harga_jual = parseFloat(harga);
                renderItems();
            }
        });
    });
}

function refetchAllData() {
    const faskesId = $('#selectFaskes').val();
    if (!faskesId) return;
    items.forEach((item, idx) => {
        fetchStokKso(item.barang_id, function (data) {
            items[idx].stok_total  = data.total;
            items[idx].stok_lots   = data.lots;
            items[idx].ppb_nomors  = data.ppb_nomors || [];
            items[idx].lots = suggestiFEFO(data.lots, item.qty);
            items[idx].lot_confirmed = false;
            renderItems();
        });
        $.get(ROUTE_HARGA, { faskes_id: faskesId, barang_id: item.barang_id }, d => {
            if (d.harga) { items[idx].harga_jual = parseFloat(d.harga); renderItems(); }
        });
    });
}

// ── Inline add row — Normal mode lot selection ───────────────────────────

function bukaModalInlineLot() {
    const sel = $('#inlineBarang').select2('data')[0];
    if (!sel || !sel.id) { toast('Pilih barang terlebih dahulu.'); return; }
    modalIdx = -1;
    document.getElementById('modalLotTitle').textContent = sel.text;

    if (modePemakaian === 'serial_number') {
        document.getElementById('modalLotSubtitle').textContent = `Unit tersedia: ${document.getElementById('inlineStokChip').dataset.total ?? '?'}`;
        const openSnModal = () => {
            modalSjLots = inlineSjLotsAll;
            renderModalSjLots(inlineSelectedSjIds);
            bootstrap.Modal.getOrCreateInstance(document.getElementById('modalLot')).show();
        };
        if (!inlineSjLotsAll.length) {
            fetchSjLots(sel.raw?.id ?? sel.id, function(lots) {
                inlineSjLotsAll = lots;
                document.getElementById('inlineStokChip').dataset.total = lots.length;
                openSnModal();
            });
        } else { openSnModal(); }
    } else {
        document.getElementById('modalLotSubtitle').textContent = `Stok KSO tersedia: ${document.getElementById('inlineStokChip').dataset.total ?? '?'}`;
        const openModal = () => {
            modalLots = inlineStokLotsAll;
            renderModalLots(inlineStokLots);
            bootstrap.Modal.getOrCreateInstance(document.getElementById('modalLot')).show();
        };
        if (!inlineStokLotsAll.length) {
            fetchStokKso(sel.raw?.id ?? sel.id, function(data) {
                inlineStokLotsAll = data.lots || [];
                const chip = document.getElementById('inlineStokChip');
                chip.dataset.total = data.total; chip.dataset.satuan = data.satuan;
                openModal();
            });
        } else { openModal(); }
    }
}

// ── Tambah item ───────────────────────────────────────────────────────────

function tambahItem() {
    const sel   = $('#inlineBarang').select2('data')[0];
    const hRaw  = document.getElementById('inlineHarga').value.replace(/\./g, '');
    const harga = parseFloat(hRaw) || 0;

    if (!sel || !sel.id) { toast('Pilih barang terlebih dahulu.'); return; }
    if (harga <= 0)       { toast('Harga jual harus diisi.'); return; }
    if (!$('#selectFaskes').val()) { toast('Pilih Faskes KSO terlebih dahulu.'); return; }

    const b = sel.raw ?? $('#inlineBarang').data('raw');
    if (!b) { toast('Data barang tidak lengkap, pilih ulang.'); return; }

    const qty    = parseInt(document.getElementById('inlineQty').value) || 0;
    const confirmed = inlineLotsConfirmed && inlineStokLots.length > 0;
    if (qty < 1) { toast('Pilih ' + (modePemakaian === 'serial_number' ? 'unit SJ' : 'lot') + ' terlebih dahulu.'); return; }
    const stokEl = document.getElementById('inlineStokChip');
    const nomorKirim = modePemakaian === 'serial_number'
        ? (confirmed ? inlineStokLots.map(l => l.nomor_sj).filter(Boolean).join(', ') || null : null)
        : (confirmed && inlinePpbNomors.length ? inlinePpbNomors.join(', ') : null);
    const _m2 = document.getElementById('inlineManufaktur');
    const newItem  = {
        barang_id : b.id, kode_barang: b.kode, nama_barang: b.nama,
        manufaktur: _m2.dataset.manufaktur, jenis_nie: _m2.dataset.jenisNie, no_nie: _m2.dataset.noNie,
        satuan    : b.satuan, qty, harga_jual: harga,
        nomor_kirim : nomorKirim,
        no_transaksi: document.getElementById('inlineNoTransaksi').value.trim() || null,
        stok_total: parseInt(stokEl.dataset.total ?? 0) || 0,
        stok_lots : modePemakaian === 'serial_number' ? [] : [...inlineStokLotsAll],
        sj_lots   : modePemakaian === 'serial_number' ? [...inlineSjLotsAll] : [],
        lots      : confirmed ? [...inlineStokLots] : [],
        lot_confirmed: confirmed,
        ppb_nomors: [...inlinePpbNomors],
    };
    items.push(newItem);
    if (!confirmed) {
        const idx = items.length - 1;
        fetchStokKso(b.id, function (data) {
            items[idx].stok_total  = data.total;
            items[idx].stok_lots   = data.lots;
            items[idx].ppb_nomors  = data.ppb_nomors || [];
            items[idx].lots = suggestiFEFO(data.lots, qty);
            renderItems();
        });
    }

    resetInlineRow();
    renderItems();
    setTimeout(() => $('#inlineBarang').select2('open'), 100);
}

// ── Render items table ─────────────────────────────────────────────────────

function suggestiFEFO(lots, qtyTarget) {
    const result = [];
    let sisa = qtyTarget;
    for (const lot of lots) {
        if (sisa <= 0) break;
        const ambil = Math.min(lot.qty, sisa);
        if (ambil > 0) {
            result.push({ stok_id: lot.id, no_lot: lot.no_lot, tanggal_kedaluwarsa: lot.tanggal_kedaluwarsa,
                tanggal_kedaluwarsa_iso: lot.tanggal_kedaluwarsa_iso, qty_ambil: ambil, qty_tersedia: lot.qty,
                nomor_sj: lot.nomor_sj ?? null });
            sisa -= ambil;
        }
    }
    return result;
}

function renderItems() {
    const tbody = document.getElementById('tbodyItems');
    if (!items.length) {
        tbody.innerHTML = '';
        document.getElementById('alertItemsEmpty').classList.remove('d-none');
        document.getElementById('tbodyInline').style.display = '';
        ['tdSubtotal','tdDpp','tdPpn'].forEach(id => document.getElementById(id).textContent = 'Rp 0');
        resetTotal();
        return;
    }
    document.getElementById('alertItemsEmpty').classList.add('d-none');
    document.getElementById('tbodyInline').style.display = '';
    tbody.innerHTML = items.map((item, idx) => {
        // Stok / lot cell
        let lotCell = '';
        if (modePemakaian === 'serial_number') {
            const usedIds     = usedSjIds(idx);
            const unitTersedia = item.sj_lots ? item.sj_lots.filter(sj => !usedIds.has(sj.id) || (item.lots||[]).some(l=>l.sj_lot_id===sj.id)).length : '?';
            let stokChip = item.sj_lots
                ? `<span class="chip-stok chip-stok-ok">Tersedia: ${unitTersedia} unit</span>`
                : `<span class="chip-stok chip-stok-none">—</span>`;
            let lotChip = item.lot_confirmed
                ? `<button type="button" class="chip-lot chip-lot-confirmed" onclick="bukaModalLot(${idx})">✓ ${item.lots?.length ?? 0} dipilih</button>`
                : `<button type="button" class="chip-lot chip-lot-unset" onclick="bukaModalLot(${idx})">Pilih unit SJ</button>`;
            lotCell = `<div class="d-flex flex-column align-items-center gap-1">${stokChip}${lotChip}</div>`;
        } else {
            let stokChip = '';
            if (item.stok_total === null || item.stok_total === undefined) stokChip = `<span class="chip-stok chip-stok-none">—</span>`;
            else if (item.stok_total === 0) stokChip = `<span class="chip-stok chip-stok-warn">Tdk ada stok</span>`;
            else if (item.stok_total < item.qty) stokChip = `<span class="chip-stok chip-stok-warn">Tersedia: ${item.stok_total}</span>`;
            else stokChip = `<span class="chip-stok chip-stok-ok">Tersedia: ${item.stok_total}</span>`;
            const lotTotal = item.lots?.reduce((s, l) => s + (l.qty_ambil || 0), 0) ?? 0;
            let lotChip = '';
            if (!item.stok_lots || !item.stok_lots.length) {
                lotChip = `<span class="chip-lot chip-lot-unset" style="font-size:.7rem">Tdk ada lot</span>`;
            } else if (item.lot_confirmed) {
                lotChip = `<button type="button" class="chip-lot chip-lot-confirmed" onclick="bukaModalLot(${idx})">✓ ${lotTotal} dikonfirmasi</button>`;
            } else {
                const label = item.lots?.length ? `${lotTotal} (saran FEFO)` : 'Lihat lot';
                lotChip = `<button type="button" class="chip-lot chip-lot-unset" onclick="bukaModalLot(${idx})">📋 ${label}</button>`;
            }
            lotCell = `<div class="d-flex flex-column align-items-center gap-1">${stokChip}${lotChip}</div>`;
        }

        return `
        <tr>
            <td class="text-center">${idx + 1}</td>
            <td>
                <div class="fw-semibold">${esc(item.nama_barang)}</div>
                ${item.manufaktur ? `<div style="font-size:.75rem;color:#666">${esc(item.manufaktur)}</div>` : ''}
                ${(item.jenis_nie || item.no_nie) ? `<div style="font-size:.75rem;color:#888">${esc(item.jenis_nie||'')}${item.jenis_nie && item.no_nie ? ' · ' : ''}${esc(item.no_nie||'')}</div>` : ''}
            </td>
            <td class="text-center">${esc(item.satuan)}</td>
            <td class="text-center fw-semibold">${item.qty || '—'}</td>
            <td class="text-center">${lotCell}</td>
            <td>
                <span class="${item.nomor_kirim ? 'text-primary fw-semibold' : 'text-muted fst-italic'}" style="font-size:.8rem">
                    ${esc(item.nomor_kirim || '—')}
                </span>
            </td>
            <td>
                <input type="text" class="form-control inline-ctrl" placeholder="(opsional)" maxlength="50"
                       value="${esc(item.no_transaksi || '')}" onchange="updateNoTransaksi(${idx}, this.value)" style="width:115px">
            </td>
            <td>
                <input type="text" class="form-control inline-ctrl inline-ctrl-right"
                       value="${formatRp(item.harga_jual)}" readonly style="width:115px;background:#f8f9fa;cursor:default">
            </td>
            <td class="text-end pe-2 fw-semibold">${formatRpStr(item.harga_jual * item.qty)}</td>
            <td class="text-center">
                <button type="button" class="btn btn-danger btn-sm px-2" onclick="hapusItem(${idx})"><i class="bx bx-trash"></i></button>
            </td>
        </tr>`;
    }).join('');
    updateTotal();
}

function updateQty(idx, val) {
    items[idx].qty = Math.max(1, parseInt(val) || 1);
    if (items[idx].stok_lots?.length) {
        items[idx].lots = suggestiFEFO(items[idx].stok_lots, items[idx].qty);
        items[idx].lot_confirmed = false;
        items[idx].nomor_kirim = null;
    }
    renderItems();
}
function updateHarga(idx, val)       { items[idx].harga_jual   = parseFloat(val.replace(/\./g,'').replace(',','.')) || 0; renderItems(); }
function updateNoTransaksi(idx, val) { items[idx].no_transaksi = val.trim() || null; }
function hapusItem(idx)              { items.splice(idx, 1); renderItems(); }

// ── Modal Lot (Normal mode) ────────────────────────────────────────────────

function bukaModalLot(idx) {
    modalIdx = idx;
    const item = items[idx];
    document.getElementById('modalLotTitle').textContent = item.nama_barang;

    if (modePemakaian === 'serial_number') {
        document.getElementById('modalLotSubtitle').textContent = `Unit terpilih: ${item.lots?.length ?? 0}`;
        const selectedIds = new Set((item.lots || []).map(l => l.sj_lot_id).filter(Boolean));
        if (!item.sj_lots || !item.sj_lots.length) {
            fetchSjLots(item.barang_id, function (lots) {
                items[idx].sj_lots = lots;
                modalSjLots = lots;
                renderModalSjLots(selectedIds);
            });
        } else {
            modalSjLots = item.sj_lots;
            renderModalSjLots(selectedIds);
        }
    } else {
        document.getElementById('modalLotSubtitle').textContent =
            `Stok KSO tersedia: ${item.stok_total ?? '?'} ${item.satuan}`;
        if (!item.stok_lots || !item.stok_lots.length) {
            fetchStokKso(item.barang_id, function (data) {
                items[idx].stok_total = data.total; items[idx].stok_lots = data.lots;
                items[idx].ppb_nomors = data.ppb_nomors || [];
                modalLots = data.lots; renderModalLots(items[idx].lots);
            });
        } else {
            modalLots = item.stok_lots; renderModalLots(item.lots);
        }
    }
    bootstrap.Modal.getOrCreateInstance(document.getElementById('modalLot')).show();
}

// Hitung qty yang sudah dialokasikan per stok_id dari items lain (bukan modalIdx)
function reservedByStokId(barangId, excludeIdx) {
    const reserved = {};
    items.forEach((item, idx) => {
        if (idx === excludeIdx) return;
        if (item.barang_id != barangId) return;
        (item.lots || []).forEach(l => {
            if (l.stok_id) reserved[l.stok_id] = (reserved[l.stok_id] || 0) + (l.qty_ambil || 0);
        });
    });
    return reserved;
}

function renderModalLots(currentLots) {
    const tbody = document.getElementById('tbodyModalLots');
    if (!modalLots.length) {
        tbody.innerHTML = '<tr><td colspan="6" class="text-center text-muted py-3">Tidak ada stok KSO tersedia.</td></tr>';
        updateLotTotal(); return;
    }
    // Barang yang sedang dibuka modal
    const barangId = modalIdx === -1
        ? ($('#inlineBarang').select2('data')[0]?.id ?? null)
        : (items[modalIdx]?.barang_id ?? null);
    const reserved = barangId ? reservedByStokId(barangId, modalIdx) : {};

    // Match by row_key (session) or stok_id (loaded from DB on edit)
    const rowMap = {}, stokIdMap = {};
    (currentLots || []).forEach(l => {
        if (l.row_key) rowMap[l.row_key] = l.qty_ambil || 0;
        if (l.stok_id) stokIdMap[l.stok_id] = (stokIdMap[l.stok_id] || 0) + (l.qty_ambil || 0);
    });
    tbody.innerHTML = modalLots.map(lot => {
        const ambil        = rowMap[lot.row_key] || stokIdMap[lot.id] || 0;
        const reservedQty  = reserved[lot.id] || 0;
        const qtyEfektif   = Math.max(0, lot.qty - reservedQty);
        return `<tr>
            <td style="font-size:.79rem">${esc(lot.ppb_nomor || '—')}</td>
            <td>${esc(lot.no_lot || '—')}</td>
            <td>${esc(lot.no_serial || '—')}</td>
            <td>${lot.tanggal_kedaluwarsa || '<span class="text-muted">—</span>'}</td>
            <td class="text-center fw-semibold">${qtyEfektif} <small class="text-muted">${lot.satuan}</small></td>
            <td class="text-center">
                <input type="number" class="form-control lot-qty-input"
                       min="0" max="${qtyEfektif}" value="${Math.min(ambil, qtyEfektif)}"
                       data-stok-id="${lot.id}" data-row-key="${lot.row_key ?? ''}"
                       data-no-lot="${lot.no_lot ?? ''}" data-no-serial="${lot.no_serial ?? ''}"
                       data-ed="${lot.tanggal_kedaluwarsa ?? ''}" data-ed-iso="${lot.tanggal_kedaluwarsa_iso ?? ''}"
                       data-tersedia="${qtyEfektif}" data-ppb-nomor="${lot.ppb_nomor ?? ''}">
            </td>
        </tr>`;
    }).join('');
    updateLotTotal();
}

// ── Modal SN mode ──────────────────────────────────────────────────────────

// Kumpulkan sj_lot_id yang sudah dipakai oleh baris lain (bukan excludeIdx)
function usedSjIds(excludeIdx) {
    const used = new Set();
    items.forEach((item, idx) => {
        if (idx === excludeIdx) return;
        (item.lots || []).forEach(l => { if (l.sj_lot_id) used.add(l.sj_lot_id); });
    });
    return used;
}

function renderModalSjLots(selectedIds) {
    initSnModalState(selectedIds);
    // Ubah header modal untuk SN mode
    const thead = document.querySelector('#tblModalLots thead tr');
    thead.innerHTML = `
        <th style="min-width:180px">No. Surat Jalan</th>
        <th style="width:110px">No. Lot</th>
        <th style="width:110px">No. Serial</th>
        <th style="width:120px">Tgl. ED</th>
        <th class="text-center" style="width:70px">Pilih</th>`;
    document.getElementById('btnResetFEFO').classList.add('d-none');

    // Filter: hilangkan SJ yang sudah dipakai baris lain
    const used = usedSjIds(modalIdx);
    const visibleLots = modalSjLots.filter(sj => !used.has(sj.id) || selectedIds.has(sj.id));

    const tbody = document.getElementById('tbodyModalLots');
    if (!visibleLots.length) {
        tbody.innerHTML = '<tr><td colspan="5" class="text-center text-muted py-3">Tidak ada unit tersedia.</td></tr>';
        updateLotTotalSn(); return;
    }
    tbody.innerHTML = visibleLots.map(sj => {
        const checked = selectedIds.has(sj.id);
        return `<tr class="${checked ? 'table-success' : ''}" id="sj-row-${sj.id}" style="cursor:pointer" onclick="toggleSjRow(${sj.id})">
            <td style="font-size:.82rem;font-weight:${checked?'600':'400'}">${esc(sj.nomor_sj)}</td>
            <td>${esc(sj.no_lot || '—')}</td>
            <td>${esc(sj.no_serial || '—')}</td>
            <td>${esc(sj.tgl_ed || '—')}</td>
            <td class="text-center">
                <input type="radio" class="sj-check form-check-input" name="sj_radio" data-sj-id="${sj.id}" ${checked ? 'checked' : ''} onclick="event.stopPropagation(); selectSjRow(${sj.id})">
            </td>
        </tr>`;
    }).join('');
    updateLotTotalSn();
}

let _tempSelectedSjIds = new Set();

// Radio behavior: pilih 1, deselect semua yang lain
function selectSjRow(sjId) {
    _tempSelectedSjIds = new Set([sjId]);
    document.querySelectorAll('[id^="sj-row-"]').forEach(row => {
        const id = parseInt(row.id.replace('sj-row-', ''));
        const isSelected = id === sjId;
        row.classList.toggle('table-success', isSelected);
        const fw = row.querySelector('td:first-child');
        if (fw) fw.style.fontWeight = isSelected ? '600' : '400';
        const radio = row.querySelector('.sj-check');
        if (radio) radio.checked = isSelected;
    });
    updateLotTotalSn();
}

function toggleSjRow(sjId) {
    selectSjRow(sjId);
}


function updateLotTotalSn() {
    const total = _tempSelectedSjIds.size;
    document.getElementById('lotTotalAmbil').textContent = total;
    document.getElementById('lotStatusOk').classList.toggle('d-none', total === 0);
    document.getElementById('lotStatusKurang').classList.add('d-none');
    document.getElementById('lotStatusLebih').classList.add('d-none');
    document.getElementById('btnKonfirmasiLot').disabled = total === 0;
}

// Inisialisasi _tempSelectedSjIds saat modal dibuka
function initSnModalState(selectedIds) {
    _tempSelectedSjIds = new Set(selectedIds);
}

function updateLotTotal() {
    let total = 0;
    document.querySelectorAll('.lot-qty-input').forEach(inp => {
        const max = parseInt(inp.max) || 0;
        if ((parseInt(inp.value)||0) > max) inp.value = max;
        total += parseInt(inp.value) || 0;
    });
    document.getElementById('lotTotalAmbil').textContent = total;
    document.getElementById('lotStatusOk').classList.toggle('d-none', total === 0);
    document.getElementById('lotStatusKurang').classList.add('d-none');
    document.getElementById('lotStatusLebih').classList.add('d-none');
    document.getElementById('btnKonfirmasiLot').disabled = total === 0;
}

function applyFEFO() {
    if (modePemakaian === 'serial_number') return; // tidak berlaku untuk SN mode
    let sisa = modalIdx === -1
        ? (parseInt(document.getElementById('inlineQty').value) || 1)
        : (items[modalIdx]?.qty ?? 0);
    document.querySelectorAll('.lot-qty-input').forEach(inp => {
        const t = parseInt(inp.max) || 0;
        const a = Math.min(t, sisa);
        inp.value = a; sisa -= a;
    });
    updateLotTotal();
}

function konfirmasiLot() {
    if (modePemakaian === 'serial_number') {
        konfirmasiLotSn(); return;
    }
    // Group by stok_id — sum qty across multiple PPB rows for same stok
    const stokMap = {};
    const ppbSet = new Set();
    document.querySelectorAll('.lot-qty-input').forEach(inp => {
        const a = parseInt(inp.value) || 0;
        if (a > 0) {
            const sid = parseInt(inp.dataset.stokId);
            if (!stokMap[sid]) {
                stokMap[sid] = { stok_id: sid, row_key: inp.dataset.rowKey || null,
                    no_lot: inp.dataset.noLot || null, no_serial: inp.dataset.noSerial || null,
                    tanggal_kedaluwarsa: inp.dataset.ed || null, tanggal_kedaluwarsa_iso: inp.dataset.edIso || null,
                    qty_ambil: 0, qty_tersedia: parseInt(inp.dataset.tersedia) || 0 };
            }
            stokMap[sid].qty_ambil += a;
            if (inp.dataset.ppbNomor) { const t = inp.dataset.ppbNomor.trim(); if (t) ppbSet.add(t); }
        }
    });
    Object.values(stokMap).forEach(l => { if (l.qty_ambil > l.qty_tersedia) l.qty_ambil = l.qty_tersedia; });
    const lots = Object.values(stokMap).filter(l => l.qty_ambil > 0);
    const totalAmbil = lots.reduce((s, l) => s + (l.qty_ambil || 0), 0);
    const nomorKirim = ppbSet.size ? [...ppbSet].join(', ') : null;
    if (modalIdx === -1) {
        inlineStokLots      = lots;
        inlineLotsConfirmed = lots.length > 0;
        inlinePpbNomors     = [...ppbSet];
        document.getElementById('inlineQty').value = totalAmbil || 0;
        document.getElementById('inlineQtyDisplay').textContent = totalAmbil || '—';
        const el = document.getElementById('inlineStokChip');
        renderInlineStokChip(parseInt(el.dataset.total ?? 0) || 0, el.dataset.satuan ?? '', totalAmbil || 1);
    } else {
        items[modalIdx].lots          = lots;
        items[modalIdx].qty           = totalAmbil || items[modalIdx].qty;
        items[modalIdx].lot_confirmed = true;
        items[modalIdx].nomor_kirim   = nomorKirim;
        renderItems();
    }
    bootstrap.Modal.getInstance(document.getElementById('modalLot')).hide();
}

function konfirmasiLotSn() {
    const allSjLots = modalIdx === -1 ? inlineSjLotsAll : (items[modalIdx]?.sj_lots || []);
    const selected  = allSjLots.filter(sj => _tempSelectedSjIds.has(sj.id));
    const lots = selected.map(sj => ({
        stok_id               : sj.stok_id,
        sj_lot_id             : sj.id,
        no_lot                : sj.no_lot  || null,
        no_serial             : sj.no_serial || null,
        tanggal_kedaluwarsa   : sj.tgl_ed  || null,
        tanggal_kedaluwarsa_iso: sj.tgl_ed_iso || null,
        qty_ambil             : 1,
        nomor_sj              : sj.nomor_sj,
    }));
    const nomorKirim = selected.map(sj => sj.nomor_sj).join(', ') || null;
    const totalAmbil = selected.length;

    if (modalIdx === -1) {
        inlineSjLotsAll     = allSjLots;
        inlineSelectedSjIds = new Set(_tempSelectedSjIds);
        inlineLotsConfirmed = totalAmbil > 0;
        inlineStokLots      = lots;
        document.getElementById('inlineQty').value = totalAmbil;
        document.getElementById('inlineQtyDisplay').textContent = totalAmbil || '—';
        document.getElementById('inlineNomorKirim').textContent = nomorKirim || '—';
        renderInlineStokChipSn(allSjLots.length);
    } else {
        items[modalIdx].lots          = lots;
        items[modalIdx].sj_lots       = allSjLots;
        items[modalIdx].qty           = totalAmbil || items[modalIdx].qty;
        items[modalIdx].lot_confirmed = true;
        items[modalIdx].nomor_kirim   = nomorKirim;
        renderItems();
    }
    bootstrap.Modal.getInstance(document.getElementById('modalLot')).hide();
}

// ── Total calculations ─────────────────────────────────────────────────────

function fmtRp(n)       { return 'Rp ' + n.toLocaleString('id-ID', { maximumFractionDigits:2 }); }
function formatRp(n)    { return Math.round(n).toLocaleString('id-ID'); }
function formatRpStr(n) { return 'Rp ' + Math.round(n).toLocaleString('id-ID'); }

function updateTotal() {
    const subtotal = items.reduce((s, i) => s + i.harga_jual * i.qty, 0);
    const dpp = subtotal * 11 / 12;
    const ppn = dpp * 0.12;
    const auto = subtotal + ppn;
    document.getElementById('tdSubtotal').textContent = fmtRp(subtotal);
    document.getElementById('tdDpp').textContent      = fmtRp(dpp);
    document.getElementById('tdPpn').textContent      = fmtRp(ppn);
    if (!totalManual) document.getElementById('inputTotal').value = auto.toLocaleString('id-ID', { maximumFractionDigits: 2 });
}
function onTotalInput(val) {
    totalManual = val.replace(/\./g,'').replace(',','') !== '';
    document.getElementById('btnResetTotal').classList.toggle('d-none', !totalManual);
}
function onTotalBlur(val) {
    const raw = parseFloat(val.replace(/\./g,'').replace(',','.'));
    if (!isNaN(raw)) document.getElementById('inputTotal').value = raw.toLocaleString('id-ID', { maximumFractionDigits: 2 });
}
function resetTotal() { totalManual = false; document.getElementById('btnResetTotal').classList.add('d-none'); updateTotal(); }
function getTotalValue() { return parseFloat(document.getElementById('inputTotal').value.replace(/\./g,'').replace(',','.')) || 0; }

// ── Submit ─────────────────────────────────────────────────────────────────

function submitForm() {
    document.querySelectorAll('[id^="err_"]').forEach(el => el.textContent = '');
    const faskesId   = $('#selectFaskes').val();
    const namaPasien = document.getElementById('inputNamaPasien').value.trim();
    const tglPemakaian = document.getElementById('tglPemakaian').value;
    const jenisPasienId = $('#selectJenisPasien').val();
    const errors = {};
    if (!faskesId)      errors.faskes_id       = 'Faskes wajib dipilih.';
    if (!namaPasien)    errors.nama_pasien     = 'Nama pasien wajib diisi.';
    if (!jenisPasienId) errors.jenis_pasien_id = 'Jenis pasien wajib dipilih.';
    if (!tglPemakaian)  errors.tgl_pemakaian   = 'Tgl. pemakaian wajib diisi.';
    if (Object.keys(errors).length) {
        for (const [k, msg] of Object.entries(errors)) { const el = document.getElementById('err_' + k); if (el) el.textContent = msg; }
        return;
    }
    if (!items.length) { Swal.fire('Peringatan', 'Belum ada barang yang ditambahkan.', 'warning'); return; }

    Swal.fire({
        title: IS_EDIT ? 'Simpan perubahan?' : 'Simpan pemakaian barang?',
        icon: 'question', showCancelButton: true,
        confirmButtonColor: '#7c3aed', cancelButtonColor: '#6c757d',
        confirmButtonText: 'Ya, simpan', cancelButtonText: 'Batal',
    }).then(res => {
        if (!res.isConfirmed) return;
        const payload = {
            _token          : CSRF,
            faskes_id       : faskesId,
            nama_pasien     : namaPasien,
            jenis_pasien_id : jenisPasienId,
            nama_dokter     : $('#selectDokter').val() || '',
            no_rm           : $('#inputNoRm').val() || null,
            tgl_pemakaian   : dmy2iso(tglPemakaian),
            catatan         : document.getElementById('inputCatatan').value,
            total_harga     : getTotalValue(),
            items: items.map(i => ({
                barang_id   : i.barang_id,
                qty         : i.qty,
                nomor_kirim  : i.nomor_kirim  || null,
                no_transaksi : i.no_transaksi || null,
                harga_jual   : i.harga_jual,
                catatan      : i.catatan      || null,
                lots        : (i.lots || []).map(l => ({
                    stok_id             : l.stok_id,
                    sj_lot_id           : l.sj_lot_id ?? null,
                    no_lot              : l.no_lot ?? null,
                    no_serial           : l.no_serial ?? null,
                    tgl_ed_iso          : l.tanggal_kedaluwarsa_iso ?? null,
                    tanggal_kedaluwarsa_iso: l.tanggal_kedaluwarsa_iso ?? null,
                    qty_ambil           : l.qty_ambil,
                    nomor_sj            : l.nomor_sj ?? null,
                })),
            })),
        };
        if (IS_EDIT) payload._method = 'PUT';

        $.ajax({
            url: IS_EDIT ? ROUTE_UPDATE : ROUTE_STORE, method: 'POST',
            contentType: 'application/json', data: JSON.stringify(payload),
            success: r => {
                if (r.success) Swal.fire({ icon:'success', title:'Berhasil', text:'Disimpan.', timer:1800, showConfirmButton:false })
                    .then(() => window.location.href = r.redirect ?? BASE_URL + '/pemakaian-barang');
            },
            error: xhr => {
                const errs = xhr.responseJSON?.errors ?? {};
                for (const [k, msgs] of Object.entries(errs)) {
                    const el = document.getElementById('err_' + k.replace(/\./g,'_'));
                    if (el) el.textContent = msgs[0];
                }
                Swal.fire('Validasi Gagal', xhr.responseJSON?.message ?? 'Periksa kembali isian.', 'error');
            },
        });
    });
}

function esc(s) { if (s == null) return '—'; return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); }
function dmy2iso(s) { if (!s) return ''; const [d,m,y] = s.split('-'); return `${y}-${m}-${d}`; }
function toast(msg) { Swal.fire({ icon:'warning', title:'Perhatian', text:msg, timer:2000, showConfirmButton:false }); }

// ── Modal Browse Barang ────────────────────────────────────────
let browseTimer = null;
function openBrowseBarang() {
    if (!$('#selectFaskes').val()) { toast('Pilih Faskes terlebih dahulu.'); return; }
    document.getElementById('browseCari').value = '';
    bootstrap.Modal.getOrCreateInstance(document.getElementById('modalBrowseBarang')).show();
    doBrowseBarang();
}
function doBrowseBarang() {
    const q = document.getElementById('browseCari').value;
    const fid = $('#selectFaskes').val();
    document.getElementById('tbodyBrowseBarang').innerHTML =
        '<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(ROUTE_BARANG, { q, faskes_id: fid, mode: modePemakaian === 'serial_number' ? 'serial_number' : 'normal' }, function (data) {
        const tbody = document.getElementById('tbodyBrowseBarang');
        if (!data.length) {
            tbody.innerHTML = '<tr><td colspan="6" class="text-center text-muted py-3">Barang tidak ditemukan.</td></tr>';
            return;
        }
        tbody.innerHTML = data.map(b =>
            `<tr style="cursor:pointer" onclick='pilihDariBrowseBarang(${JSON.stringify(b).replace(/'/g,"&#39;")})'>
                <td>${esc(b.kode)}</td>
                <td class="fw-semibold">${esc(b.nama)}</td>
                <td>${esc(b.jenis)}</td>
                <td>${esc(b.merek)}</td>
                <td>${esc(b.ukuran || '—')}</td>
                <td class="text-center">${esc(b.satuan)}</td>
            </tr>`
        ).join('');
    });
}
function pilihDariBrowseBarang(b) {
    bootstrap.Modal.getInstance(document.getElementById('modalBrowseBarang')).hide();
    if ($('#inlineBarang').find(`option[value="${b.id}"]`).length === 0) {
        $('#inlineBarang').append(new Option(b.nama, b.id, true, true));
    } else {
        $('#inlineBarang').val(b.id);
    }
    $('#inlineBarang').trigger({ type: 'select2:select', params: { data: { id: b.id, text: b.nama, raw: b } } });
}
$(document).on('input', '#browseCari', function () {
    clearTimeout(browseTimer);
    browseTimer = setTimeout(doBrowseBarang, 350);
});
</script>
@endsection