@extends('layouts.master')
@section('title', isset($retur) ? 'Edit Retur Faskes — ' . $retur->nomor : 'Buat Retur Faskes')

@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; border:1px solid #e9d5ff; padding:7px 10px; }
    #trInlineAdd td { background:#fdfaff; border:1px solid #e9d5ff; padding:6px 8px; }
    .inline-ctrl { font-size:.8rem !important; padding:3px 7px !important; height:30px; }
    #tblModalStoks { font-size:.83rem; }
    #tblModalStoks thead th { background:#f8f5ff; color:#7c3aed; border:1px solid #e9d5ff; }
    #tblModalStoks tbody td { border:1px solid #f0e8ff; vertical-align:middle; }
    .stok-qty-input { width:72px; text-align:center; font-size:.82rem; padding:2px 4px; height:28px; }
</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($retur) ? 'Edit Retur Faskes' : 'Buat Retur Faskes' }}</p>
            <span class="fs-13 text-muted">Mutasi Barang &rarr; <a href="{{ route('penjualan.retur-kso.index') }}" class="text-muted">Retur Faskes</a> &rarr; {{ isset($retur) ? $retur->nomor : 'Buat' }}</span>
        </div>
        <a href="{{ route('penjualan.retur-kso.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="formRetur" autocomplete="off">
    @csrf

    {{-- Info Retur --}}
    <div class="card custom-card mb-3">
        <div class="card-header">
            <div class="card-title mb-0"><i class="bx bx-info-circle me-2 text-primary"></i>Informasi Retur</div>
        </div>
        <div class="card-body">
            <div class="row g-3">
                <div class="col-md-2">
                    <label class="form-label fw-semibold small">Tgl. Input</label>
                    <input type="text" class="form-control form-control-sm bg-light" value="{{ now()->format('d/m/Y') }}" readonly>
                </div>
                <div class="col-md-2">
                    <label class="form-label fw-semibold small">Tgl. Retur <span class="text-danger">*</span></label>
                    <input type="text" id="tglRetur" class="form-control form-control-sm flatpickr" placeholder="dd/mm/yyyy"
                        value="{{ isset($retur) && $retur->tanggal_retur ? $retur->tanggal_retur->format('d/m/Y') : now()->format('d/m/Y') }}" required>
                    <div class="text-danger small mt-1 d-none" id="err_tanggal_retur">Wajib diisi</div>
                </div>
                <div class="col-md-4">
                    <label class="form-label fw-semibold small">Faskes <span class="text-danger">*</span></label>
                    <select id="selectFaskes" class="form-select form-select-sm" style="width:100%" required>
                        <option value="">-- Pilih Faskes --</option>
                        @foreach($faskesList as $f)
                            <option value="{{ $f->id }}" {{ isset($retur) && $retur->faskes_id == $f->id ? 'selected' : '' }}>{{ $f->nama }}</option>
                        @endforeach
                    </select>
                    <div class="text-danger small mt-1 d-none" id="err_faskes_id">Wajib dipilih</div>
                </div>
                <div class="col-md-4">
                    <label class="form-label fw-semibold small">Catatan</label>
                    <textarea id="inputCatatan" class="form-control form-control-sm" rows="1" placeholder="Catatan retur (opsional)">{{ $retur->catatan_sales ?? '' }}</textarea>
                </div>
                <div id="infoGudang" class="col-12 d-none">
                    <div class="alert alert-info py-2 px-3 mb-0 fs-13">
                        <i class="bx bx-store me-1"></i> Gudang Faskes: <span id="namaGudang" class="fw-semibold"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Daftar 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 Retur</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>
                            @if($isPerLot)
                            <th class="text-center" style="width:130px;white-space:nowrap">No. Surat Jalan</th>
                            @endif
                            <th class="text-center" style="width:110px">No. LOT</th>
                            <th class="text-center" style="width:110px">No. Serial</th>
                            <th class="text-center" style="width:100px">Tgl. ED</th>
                            <th class="text-center" style="width:90px">Qty Retur</th>
                            <th class="text-center" style="width:70px">Satuan</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">+</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" style="width:100%">
                                            <option value="">Ketik 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>
                            </td>
                            <td colspan="5" class="text-muted fs-13" id="inlinePlaceholder">
                                — pilih barang lalu klik "Pilih Stok" —
                            </td>
                            <td class="text-center">
                                <button type="button" class="btn btn-primary btn-sm px-2" id="btnPilihStok" onclick="bukaModalStok()" disabled title="Pilih Stok">
                                    <i class="bx bx-list-check"></i>
                                </button>
                            </td>
                        </tr>
                    </tbody>
                </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 ikon list di kanan.
            </div>
        </div>
    </div>

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

{{-- Modal Browse Barang --}}
<div class="modal fade" id="modalBrowseBarang" tabindex="-1">
    <div class="modal-dialog modal-lg 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="min-width:200px">Nama Barang</th>
                                <th class="text-center" style="width:70px">Satuan</th>
                                <th class="text-center" style="width:80px">Stok</th>
                            </tr>
                        </thead>
                        <tbody id="tbodyBrowseBarang">
                            <tr><td colspan="3" 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 Pilih Stok --}}
<div class="modal fade" id="modalStok" tabindex="-1" data-bs-backdrop="static">
    <div class="modal-dialog modal-lg modal-dialog-scrollable modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header py-2">
                <div>
                    <h6 class="modal-title mb-0" id="modalStokTitle">Pilih Stok Faskes</h6>
                    <div class="text-muted small" id="modalStokSubtitle"></div>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body p-0">
                <div id="modalStokLoading" class="text-center py-4 d-none">
                    <div class="spinner-border spinner-border-sm text-primary"></div>
                    <div class="text-muted small mt-2">Memuat stok...</div>
                </div>
                <div id="modalStokEmpty" class="text-center text-muted py-4 d-none">
                    <i class="bx bx-package fs-2 d-block mb-2"></i> Tidak ada stok tersedia
                </div>
                <div class="table-responsive" id="modalStokTableWrap">
                    <table id="tblModalStoks" class="table table-bordered mb-0">
                        <thead>
                            <tr>
                                <th style="width:110px">No. LOT</th>
                                <th style="width:115px">No. Serial</th>
                                <th style="width:100px">Tgl. ED</th>
                                <th class="text-center" style="width:90px">Tersedia</th>
                                <th class="text-center" style="width:95px">Qty Retur</th>
                            </tr>
                        </thead>
                        <tbody id="tbodyModalStoks"></tbody>
                    </table>
                </div>
                <div class="px-3 py-2 border-top d-flex align-items-center gap-3 fs-13">
                    <span id="modalTotalLabel">Total dipilih:</span> <strong id="modalTotalAmbil">0</strong>
                    <span id="modalStatusOk" class="badge bg-success d-none">✓ Siap ditambah</span>
                </div>
            </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-success" id="btnKonfirmasiStok" disabled onclick="konfirmasiStok()">
                    <i class="bx bx-check me-1"></i> Tambahkan ke Daftar
                </button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script src="{{ asset('build/assets/libs/flatpickr/flatpickr.min.js') }}"></script>
<script>
const ROUTE_CARI_BARANG = '{{ route("penjualan.retur-kso.cari-barang") }}';
const ROUTE_STOK_BARANG = '{{ route("penjualan.retur-kso.stok-barang") }}';
const ROUTE_STORE       = '{{ route("penjualan.retur-kso.store") }}';
const ROUTE_UPDATE      = '{{ isset($retur) ? route("penjualan.retur-kso.update", $retur->id) : "" }}';
const IS_EDIT           = {{ isset($retur) ? 'true' : 'false' }};
const BASE_URL          = '{{ url("/") }}';
const CSRF              = '{{ csrf_token() }}';

@php
$sjLotQueue    = $sjLotQueue ?? [];
$existingItems = isset($retur) ? $retur->items->map(function($i) use (&$sjLotQueue) {
    $k = $i->no_serial ? 'sn:'.$i->no_serial : ($i->no_lot ? 'lot:'.$i->no_lot : null);
    $nSj = $k ? array_shift($sjLotQueue[$k]) : null;
    return [
        'stok_id'             => $i->stok_id,
        'nama_barang'         => $i->nama_barang,
        'no_lot'              => $i->no_lot,
        'no_serial'           => $i->no_serial,
        'tanggal_kedaluwarsa' => $i->tanggal_kedaluwarsa?->format('d/m/Y'),
        'qty'                 => $i->qty,
        'satuan'              => $i->satuan,
        'nomor_sj'            => $nSj,
    ];
})->values()->all() : [];
$isPerLot = isset($retur) && ($retur->faskes?->mode_pengiriman === 'per_lot');
@endphp
const EXISTING_ITEMS = @json($existingItems);
const IS_PER_LOT     = {{ $isPerLot ? 'true' : 'false' }};

let items        = [...EXISTING_ITEMS];   // {stok_id, nama_barang, no_lot, no_serial, tanggal_kedaluwarsa, qty, satuan, nomor_sj}
let modalStoks   = [];   // stok list di modal saat ini
let modalMode    = 'normal'; // 'normal' | 'per_lot'
let inlineBarangRaw = null; // raw barang object dari select2

$(function () {
    flatpickr('#tglRetur', { dateFormat: 'd/m/Y', allowInput: true, defaultDate: 'today' });

    $('#selectFaskes').select2({
        dropdownParent: $('body'), placeholder: '-- Pilih Faskes --', allowClear: true, width: '100%',
    }).on('change', function () {
        const fid = $(this).val();
        items = [];
        renderItems();
        resetInlineRow();
        if (fid) {
            // tampilkan nama gudang
            $.get(ROUTE_STOK_BARANG, { faskes_id: fid, barang_id: 0 }).fail(function(){}).always(function(){});
            // Muat info gudang
            $.get('{{ route("penjualan.retur-kso.stok-kso") }}', { faskes_id: fid }, function (res) {
                if (res.gudang_nama) {
                    $('#namaGudang').text(res.gudang_nama);
                    $('#infoGudang').removeClass('d-none');
                }
            });
        } else {
            $('#infoGudang').addClass('d-none');
        }
    });

    $('#inlineBarang').select2({
        dropdownParent: $('body'),
        placeholder: 'Ketik nama barang...',
        allowClear: true,
        minimumInputLength: 0,
        width: '100%',
        containerCssClass: 's2-barang',
        templateResult: function (item) {
            if (item.loading) return item.text;
            const qty = item.raw ? `<span style="color:#aaa;font-size:.78rem"> — stok: ${item.raw.qty} ${item.raw.satuan}</span>` : '';
            return $(`<span>${item.text}${qty}</span>`);
        },
        templateSelection: item => item.text,
        ajax: {
            url: ROUTE_CARI_BARANG,
            dataType: 'json',
            delay: 250,
            data: p => ({ q: p.term ?? '', faskes_id: $('#selectFaskes').val() ?? '' }),
            processResults: data => ({ results: data.map(b => ({ id: b.id, text: b.nama, raw: b })) }),
            cache: false,
        },
    }).on('select2:select', function (e) {
        inlineBarangRaw = e.params.data.raw;
        document.getElementById('btnPilihStok').disabled = false;
        document.getElementById('inlinePlaceholder').innerHTML = `
            <span class="text-muted fs-13">Satuan: <strong>${inlineBarangRaw.satuan}</strong> &bull; Stok tersedia: <strong>${inlineBarangRaw.qty}</strong></span>`;
    }).on('select2:clear', function () {
        inlineBarangRaw = null;
        document.getElementById('btnPilihStok').disabled = true;
        document.getElementById('inlinePlaceholder').innerHTML = '— pilih barang lalu klik "Pilih Stok" —';
    }).on('select2:open', function () {
        if (!$('#selectFaskes').val()) {
            Swal.fire({ icon: 'warning', title: 'Perhatian', text: 'Pilih Faskes terlebih dahulu.', timer: 2000, showConfirmButton: false });
            $('#inlineBarang').select2('close');
            return;
        }
        setTimeout(() => { const s = document.querySelector('.select2-container--open .select2-search__field'); if (s) s.focus(); }, 30);
    });

    renderItems();
});

// ── Modal Stok ─────────────────────────────────────────────────────────────────
function bukaModalStok() {
    const fid = $('#selectFaskes').val();
    if (!fid) { Swal.fire({ icon: 'warning', title: 'Perhatian', text: 'Pilih Faskes terlebih dahulu.', timer: 2000, showConfirmButton: false }); return; }
    if (!inlineBarangRaw) { Swal.fire({ icon: 'warning', title: 'Perhatian', text: 'Pilih barang terlebih dahulu.', timer: 2000, showConfirmButton: false }); return; }

    document.getElementById('modalStokTitle').textContent    = inlineBarangRaw.nama;
    document.getElementById('modalStokSubtitle').textContent = `Stok tersedia: ${inlineBarangRaw.qty} ${inlineBarangRaw.satuan}`;
    document.getElementById('modalStokLoading').classList.remove('d-none');
    document.getElementById('modalStokEmpty').classList.add('d-none');
    document.getElementById('modalStokTableWrap').classList.add('d-none');
    document.getElementById('btnKonfirmasiStok').disabled = true;
    document.getElementById('modalTotalAmbil').textContent = '0';
    document.getElementById('modalStatusOk').classList.add('d-none');

    bootstrap.Modal.getOrCreateInstance(document.getElementById('modalStok')).show();

    $.get(ROUTE_STOK_BARANG, { faskes_id: fid, barang_id: inlineBarangRaw.id }, function (res) {
        document.getElementById('modalStokLoading').classList.add('d-none');
        modalMode  = res.mode || 'normal';
        modalStoks = res.stoks || [];
        if (!modalStoks.length) {
            document.getElementById('modalStokEmpty').classList.remove('d-none');
            return;
        }
        document.getElementById('modalStokTableWrap').classList.remove('d-none');
        renderModalStoks();
    }).fail(function () {
        document.getElementById('modalStokLoading').classList.add('d-none');
        document.getElementById('modalStokEmpty').classList.remove('d-none');
    });
}

function renderModalStoks() {
    const thead = document.querySelector('#tblModalStoks thead tr');
    const tbody = document.getElementById('tbodyModalStoks');

    document.getElementById('modalTotalLabel').textContent = modalMode === 'per_lot' ? 'Unit dipilih:' : 'Total dipilih:';

    if (modalMode === 'per_lot') {
        thead.innerHTML = `
            <th style="width:130px">No. SJ Lot</th>
            <th style="width:110px">No. LOT</th>
            <th style="width:115px">No. Serial</th>
            <th style="width:100px">Tgl. ED</th>
            <th class="text-center" style="width:50px">Pilih</th>`;
        tbody.innerHTML = modalStoks.map((s, i) => `
            <tr>
                <td class="font-monospace">${s.nomor_sj || '<em class="text-muted">—</em>'}</td>
                <td class="font-monospace">${s.no_lot || '<em class="text-muted">—</em>'}</td>
                <td class="font-monospace">${s.no_serial || '<em class="text-muted">—</em>'}</td>
                <td class="text-center">${s.tanggal_kedaluwarsa || '<em class="text-muted">—</em>'}</td>
                <td class="text-center">
                    <input type="checkbox" class="form-check-input stok-lot-check" data-idx="${i}" onchange="updateModalTotal()">
                </td>
            </tr>`).join('');
    } else {
        thead.innerHTML = `
            <th style="width:110px">No. LOT</th>
            <th style="width:115px">No. Serial</th>
            <th style="width:100px">Tgl. ED</th>
            <th class="text-center" style="width:90px">Tersedia</th>
            <th class="text-center" style="width:95px">Qty Retur</th>`;
        tbody.innerHTML = modalStoks.map((s, i) => `
            <tr>
                <td class="font-monospace">${s.no_lot || '<em class="text-muted">—</em>'}</td>
                <td class="font-monospace">${s.no_serial || '<em class="text-muted">—</em>'}</td>
                <td>${s.tanggal_kedaluwarsa || '<em class="text-muted">—</em>'}</td>
                <td class="text-center fw-semibold">${s.qty_tersedia} <small class="text-muted">${s.satuan}</small></td>
                <td class="text-center">
                    <input type="number" class="form-control stok-qty-input"
                        min="0" max="${s.qty_tersedia}" value="0"
                        data-idx="${i}" oninput="updateModalTotal()">
                </td>
            </tr>`).join('');
    }
    updateModalTotal();
}

function updateModalTotal() {
    let total = 0;
    if (modalMode === 'per_lot') {
        document.querySelectorAll('.stok-lot-check').forEach(cb => { if (cb.checked) total++; });
    } else {
        document.querySelectorAll('.stok-qty-input').forEach(inp => {
            const max = parseInt(inp.max) || 0;
            let v = parseInt(inp.value) || 0;
            if (v > max) { v = max; inp.value = max; }
            if (v < 0)   { v = 0;   inp.value = 0; }
            total += v;
        });
    }
    document.getElementById('modalTotalAmbil').textContent = total;
    document.getElementById('btnKonfirmasiStok').disabled = total === 0;
    document.getElementById('modalStatusOk').classList.toggle('d-none', total === 0);
}

function konfirmasiStok() {
    if (modalMode === 'per_lot') {
        document.querySelectorAll('.stok-lot-check').forEach(cb => {
            if (!cb.checked) return;
            const s = modalStoks[parseInt(cb.dataset.idx)];
            // untuk per_lot, stok_id per unit unik via sj_lot_id — gunakan sj_lot_id sebagai key
            const existing = items.find(i => i.sj_lot_id === s.sj_lot_id);
            if (!existing) {
                items.push({
                    stok_id:              s.stok_id,
                    sj_lot_id:            s.sj_lot_id,
                    nama_barang:          inlineBarangRaw.nama,
                    no_lot:               s.no_lot,
                    no_serial:            s.no_serial,
                    tanggal_kedaluwarsa:  s.tanggal_kedaluwarsa,
                    qty:                  1,
                    satuan:               s.satuan,
                    nomor_sj:             s.nomor_sj,
                });
            }
        });
    } else {
        document.querySelectorAll('.stok-qty-input').forEach(inp => {
            const qty = parseInt(inp.value) || 0;
            if (qty <= 0) return;
            const s = modalStoks[parseInt(inp.dataset.idx)];
            const existing = items.find(i => i.stok_id === s.stok_id);
            if (existing) {
                existing.qty = Math.min(existing.qty + qty, s.qty_tersedia);
            } else {
                items.push({
                    stok_id:              s.stok_id,
                    nama_barang:          inlineBarangRaw.nama,
                    no_lot:               s.no_lot,
                    no_serial:            s.no_serial,
                    tanggal_kedaluwarsa:  s.tanggal_kedaluwarsa,
                    qty:                  qty,
                    satuan:               s.satuan,
                });
            }
        });
    }
    renderItems();
    bootstrap.Modal.getInstance(document.getElementById('modalStok')).hide();
    resetInlineRow();
}

// ── Render table ────────────────────────────────────────────────────────────────
function renderItems() {
    const tbody = document.getElementById('tbodyItems');
    document.getElementById('alertItemsEmpty').classList.toggle('d-none', items.length > 0);

    if (!items.length) { tbody.innerHTML = ''; return; }

    tbody.innerHTML = items.map((item, idx) => `
        <tr>
            <td class="text-center text-muted">${idx + 1}</td>
            <td class="fw-semibold">${esc(item.nama_barang)}</td>
            ${IS_PER_LOT ? `<td class="font-monospace small" style="white-space:nowrap">${esc(item.nomor_sj || '—')}</td>` : ''}
            <td class="text-center font-monospace">${item.no_lot || '—'}</td>
            <td class="text-center font-monospace">${item.no_serial || '—'}</td>
            <td class="text-center">${item.tanggal_kedaluwarsa || '—'}</td>
            <td class="text-center fw-semibold">${item.qty}</td>
            <td class="text-center text-muted">${esc(item.satuan)}</td>
            <td class="text-center">
                <button type="button" class="btn btn-danger btn-sm px-2 py-1" onclick="hapusItem(${idx})">
                    <i class="bx bx-trash"></i>
                </button>
            </td>
        </tr>`).join('');
}

function updateQty(idx, val) {
    items[idx].qty = Math.max(1, parseInt(val) || 1);
}

function hapusItem(idx) {
    items.splice(idx, 1);
    renderItems();
}

function resetInlineRow() {
    $('#inlineBarang').val(null).trigger('change');
    inlineBarangRaw = null;
    document.getElementById('btnPilihStok').disabled = true;
    document.getElementById('inlinePlaceholder').innerHTML = '— pilih barang lalu klik "Pilih Stok" —';
}

// ── Submit ──────────────────────────────────────────────────────────────────────
function submitForm() {
    const fid  = $('#selectFaskes').val();
    const tgl  = document.getElementById('tglRetur').value;
    let valid  = true;

    document.getElementById('err_faskes_id').classList.add('d-none');
    document.getElementById('err_tanggal_retur').classList.add('d-none');
    if (!fid)  { document.getElementById('err_faskes_id').classList.remove('d-none'); valid = false; }
    if (!tgl)  { document.getElementById('err_tanggal_retur').classList.remove('d-none'); valid = false; }
    if (!valid) return;

    if (!items.length) {
        Swal.fire({ icon: 'warning', title: 'Perhatian', text: 'Belum ada barang yang ditambahkan.', timer: 2000, showConfirmButton: false });
        return;
    }

    Swal.fire({
        title: IS_EDIT ? 'Simpan perubahan?' : 'Simpan Retur?',
        text: `${items.length} item akan disimpan sebagai draft.`,
        icon: 'question',
        showCancelButton: true,
        confirmButtonText: 'Ya, Simpan',
        cancelButtonText: 'Batal',
        confirmButtonColor: '#0d6efd',
    }).then(res => {
        if (!res.isConfirmed) return;

        // Convert tgl dd/mm/yyyy → yyyy-mm-dd
        const [d, m, y] = tgl.split('/');
        const tglIso = `${y}-${m}-${d}`;

        const payload = {
            _token:         CSRF,
            faskes_id:      fid,
            tanggal_retur:  tglIso,
            catatan_sales:  document.getElementById('inputCatatan').value,
            items:          items.map(i => ({ stok_id: i.stok_id, qty: i.qty })),
        };

        if (IS_EDIT) payload._method = 'PUT';

        $.ajax({
            url: IS_EDIT ? ROUTE_UPDATE : ROUTE_STORE,
            method: 'POST',
            contentType: 'application/json',
            data: JSON.stringify(payload),
            success: function (r) {
                if (r.redirect) window.location.href = r.redirect;
                else window.location.href = BASE_URL + '/retur-kso';
            },
            error: function (xhr) {
                const msg = xhr.responseJSON?.message ?? 'Terjadi kesalahan, coba lagi.';
                Swal.fire('Gagal', msg, 'error');
            },
        });
    });
}

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

// ── Modal Browse Barang ────────────────────────────────────────
let browseTimer = null;
function openBrowseBarang() {
    if (!$('#selectFaskes').val()) {
        Swal.fire({ icon: 'warning', title: 'Perhatian', text: 'Pilih Faskes terlebih dahulu.', timer: 2000, showConfirmButton: false });
        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="3" class="text-center text-muted py-3"><i class="bx bx-loader-alt bx-spin me-1"></i> Memuat...</td></tr>';
    $.get(ROUTE_CARI_BARANG, { q, faskes_id: fid }, function (data) {
        const tbody = document.getElementById('tbodyBrowseBarang');
        if (!data.length) {
            tbody.innerHTML = '<tr><td colspan="3" 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 class="fw-semibold">${esc(b.nama)}</td>
                <td class="text-center">${esc(b.satuan)}</td>
                <td class="text-center fw-semibold">${b.qty ?? '—'}</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