@extends('layouts.master')

@section('title', isset($ppb) ? 'Edit Permintaan Barang' : 'Buat Permintaan Barang')

@section('styles')
<link rel="stylesheet" href="{{ asset('build/assets/libs/flatpickr/flatpickr.min.css') }}">
<style>
    /* ── Select2 barang inline ── */
    .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; }

    /* ── Tabel items ── */
    #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; }

    /* Baris inline add */
    #trInlineAdd td { background:#fdfaff; border:1px solid #e9d5ff; padding:6px 6px; }
    .inline-ctrl { font-size:.8rem !important; padding:3px 7px !important; height:30px; }
    .chip-info  { display:inline-block; font-size:.75rem; color:#6c757d; }
    .chip-stok-ok   { display:inline-block; font-size:.72rem; padding:1px 7px; border-radius:10px; background:#d1fae5; color:#065f46; }
    .chip-stok-warn { display:inline-block; font-size:.72rem; padding:1px 7px; border-radius:10px; background:#fee2e2; color:#991b1b; }
    .chip-stok-none { display:inline-block; font-size:.72rem; padding:1px 7px; border-radius:10px; background:#f3f4f6; color:#6b7280; }
</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($ppb) ? 'Edit Permintaan Barang' : 'Buat Permintaan Barang' }}</p>
            <span class="fs-13 text-muted">Mutasi Barang &rarr; Permintaan Barang &rarr; {{ isset($ppb) ? 'Edit' : 'Buat Baru' }}</span>
        </div>
        <a href="{{ route('permintaan-pengeluaran.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="formPPB" autocomplete="off">
    @csrf

    {{-- Alert catatan pengembalian --}}
    @if(isset($ppb) && $ppb->isDikembalikan() && $ppb->catatan_pengembalian)
    <div class="alert alert-warning d-flex gap-2 align-items-start mb-3">
        <i class="bx bx-undo fs-18 mt-1"></i>
        <div>
            <strong>Permintaan Dikembalikan</strong>
            @if($ppb->dikembalikan_at)
            <span class="text-muted ms-2" style="font-size:.82rem">
                {{ $ppb->dikembalikan_at->format('d-m-Y H:i') }}
                @if($ppb->dikembalikanOleh) oleh {{ $ppb->dikembalikanOleh->nama }} @endif
            </span>
            @endif
            <div class="mt-1">{{ $ppb->catatan_pengembalian }}</div>
        </div>
    </div>
    @endif

    {{-- Header --}}
    <div class="card custom-card mb-3">
        <div class="card-header">
            <div class="card-title mb-0"><i class="bx bx-transfer me-2 text-primary"></i>Informasi Permintaan</div>
        </div>
        <div class="card-body">
            <div class="row g-3">
                <div class="col-md-3">
                    <label class="form-label fw-semibold">Nomor Permintaan</label>
                    <input type="text" class="form-control form-control-sm bg-light"
                           value="{{ $ppb->nomor ?? '' }}" placeholder="Digenerate saat disimpan" readonly>
                    <small class="text-muted">Format: PPB/YYYYMMDD/KODE.NNNN</small>
                </div>
                <div class="col-md-5">
                    <label class="form-label fw-semibold">Faskes / Gudang KSO Tujuan <span class="text-danger">*</span></label>
                    <select id="selectFaskes" class="form-select form-select-sm" required>
                        <option value="">-- Pilih Faskes KSO --</option>
                        @foreach($faskesList as $f)
                        <option value="{{ $f->id }}"
                            {{ (isset($ppb) && $ppb->faskes_id == $f->id) ? 'selected' : '' }}>
                            {{ $f->nama }}
                        </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label fw-semibold">Tanggal <span class="text-danger">*</span></label>
                    <input type="text" id="tanggalPermintaan" class="form-control form-control-sm"
                           placeholder="dd-mm-yyyy" required
                           value="{{ isset($ppb) ? $ppb->tanggal->format('d-m-Y') : now()->format('d-m-Y') }}">
                </div>
                <div class="col-md-12">
                    <label class="form-label fw-semibold">Catatan</label>
                    <textarea id="catatan" class="form-control form-control-sm" rows="2"
                              placeholder="Catatan tambahan (opsional)">{{ $ppb->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-list-ul me-2 text-primary"></i>Daftar Barang</div>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table id="tblItems" class="table mb-0" style="width:100%">
                    <thead>
                        <tr>
                            <th class="text-center" style="width:36px">No</th>
                            <th style="min-width:200px">Barang</th>
                            <th style="width:110px">Merek</th>
                            <th style="width:80px">Ukuran</th>
                            <th class="text-center" style="width:70px">Satuan</th>
                            <th class="text-center" style="width:110px">Stok Pusat</th>
                            <th class="text-center" style="width:68px">Qty</th>
                            <th class="text-center" style="width:46px">Aksi</th>
                        </tr>
                    </thead>

                    {{-- Item rows --}}
                    <tbody id="tbodyItems"></tbody>

                    {{-- Inline add row --}}
                    <tbody id="tbodyInline">
                        <tr id="trInlineAdd">
                            <td class="text-center text-muted">+</td>
                            <td>
                                <div class="d-flex align-items-center gap-1">
                                    <div style="flex:1;min-width:0">
                                        <select id="inlineBarang" class="form-select" 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 flex-shrink-0"
                                            onclick="openBrowse()" title="Cari & lihat detail barang">
                                        <i class="bx bx-search-alt"></i>
                                    </button>
                                </div>
                            </td>
                            <td><span id="inlineMerek" class="chip-info text-muted">—</span></td>
                            <td><span id="inlineUkuran" class="chip-info text-muted">—</span></td>
                            <td class="text-center"><span id="inlineSatuan" class="chip-info text-muted">—</span></td>
                            <td class="text-center"><span id="inlineStok" class="chip-stok-none">—</span></td>
                            <td>
                                <input type="number" id="inlineQty" class="form-control inline-ctrl text-center" min="1" value="1" style="width:60px">
                            </td>
                            <td class="text-center">
                                <button type="button" class="btn btn-primary btn-sm px-2" onclick="tambahItem()" title="Tambahkan ke list">
                                    <i class="bx bx-plus"></i>
                                </button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div id="alertItemsEmpty" class="alert alert-warning m-3 {{ isset($ppb) && $ppb->items->count() ? 'd-none' : '' }}">
                <i class="bx bx-error-circle me-2"></i> Belum ada barang. Pilih barang pada baris di atas lalu klik <strong>+</strong>.
            </div>
        </div>
    </div>

    {{-- Tombol Simpan --}}
    <div class="d-flex gap-2 justify-content-end mb-4">
        <button type="button" id="btnSimpanDraft" class="btn btn-outline-primary">
            <i class="bx bx-save me-1"></i> Simpan Draft
        </button>
        <button type="button" id="btnAjukan" class="btn btn-primary">
            <i class="bx bx-send me-1"></i> Simpan & Ajukan
        </button>
    </div>
    </form>
</div>

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

@section('scripts')
<script src="{{ asset('build/assets/libs/flatpickr/flatpickr.min.js') }}"></script>
<script>
const BASE_URL   = '{{ url('') }}';
const IS_EDIT    = {{ isset($ppb) ? 'true' : 'false' }};
const PPB_ID     = {{ $ppb->id ?? 'null' }};
const CARI_URL   = BASE_URL + '/permintaan-pengeluaran/cari-barang';
const STOK_URL   = BASE_URL + '/permintaan-pengeluaran/stok-pusat';
const CSRF       = '{{ csrf_token() }}';

// ── Existing items (edit mode) ────────────────────────────────
@php
$existingItems = isset($ppb) ? $ppb->items->map(fn($it) => [
    'barang_id'   => $it->barang_id,
    'nama_barang' => $it->nama_barang,
    'kode_barang' => $it->kode_barang ?? '',
    'merek'       => $it->barang->merekBarang->nama ?? '-',
    'ukuran'      => $it->barang->ukuran ?? '',
    'satuan'      => $it->satuan,
    'stok_pusat'  => null,
    'qty'         => $it->qty,
])->values()->all() : [];
@endphp
let items = {!! json_encode($existingItems) !!};
let selectedBarang = null;
let inlineStokData  = null; // { total, satuan } dari AJAX stok pusat

// ── Init ──────────────────────────────────────────────────────
$(document).ready(function () {
    flatpickr('#tanggalPermintaan', { dateFormat: 'd-m-Y', allowInput: false });

    $('#selectFaskes').select2({ placeholder: '-- Pilih Faskes KSO --', allowClear: true, width: '100%' });

    // Select2 AJAX inline barang
    $('#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: CARI_URL, dataType: 'json', delay: 300,
            data: (p) => ({ q: p.term ?? '' }),
            processResults: (data) => ({
                results: data.map(b => ({ id: b.id, text: b.nama, raw: b }))
            }),
            cache: true,
        },
    }).on('select2:select', function (e) {
        selectedBarang = e.params.data.raw;
        inlineStokData  = null;
        fillInlineFromBarang(selectedBarang);
    }).on('select2:clear', function () {
        selectedBarang = null;
        inlineStokData  = null;
    });

    // Autofocus search field
    $('#inlineBarang').on('select2:open', function () {
        setTimeout(() => {
            const s = document.querySelector('.select2-container--open .select2-search__field');
            if (s) s.focus();
        }, 30);
    });

    // Keyboard flow: qty → tambah
    $('#inlineQty').on('keydown', function (e) {
        if (e.key === 'Enter') { e.preventDefault(); tambahItem(); }
    });

    renderItems();
});

// ── Isi info dari barang terpilih ─────────────────────────────
function fillInlineFromBarang(b) {
    document.getElementById('inlineMerek').textContent  = b.merek  || '—';
    document.getElementById('inlineUkuran').textContent = b.ukuran || '—';
    document.getElementById('inlineSatuan').textContent = b.satuan || '—';
    document.getElementById('inlineStok').className     = 'chip-stok-none';
    document.getElementById('inlineStok').textContent   = '...';

    // Ambil stok pusat
    $.get(STOK_URL, { barang_id: b.id }, function (res) {
        inlineStokData = res;
        const el = document.getElementById('inlineStok');
        if (res.total > 0) {
            el.className   = 'chip-stok-ok';
            el.textContent = `${res.total} ${res.satuan}`;
        } else {
            el.className   = 'chip-stok-warn';
            el.textContent = 'Habis';
        }
    }).fail(function () {
        inlineStokData = { total: 0, satuan: '' };
        const el = document.getElementById('inlineStok');
        el.className   = 'chip-stok-warn';
        el.textContent = 'Gagal';
    });

    setTimeout(() => {
        document.getElementById('inlineQty').focus();
        document.getElementById('inlineQty').select();
    }, 50);
}

// ── Tambah item ───────────────────────────────────────────────
function tambahItem() {
    const qty = parseInt(document.getElementById('inlineQty').value) || 0;

    if (!selectedBarang) { showWarn('Pilih barang terlebih dahulu.'); return; }
    if (qty < 1)          { showWarn('Qty minimal 1.'); return; }

    const b = selectedBarang;
    const stok = inlineStokData;
    const stokLabel = stok === null ? null
        : stok.total > 0 ? `${stok.total} ${stok.satuan}`.trim() : 'Habis';

    items.push({
        barang_id  : b.id,
        kode_barang: b.kode,
        nama_barang: b.nama,
        merek      : b.merek,
        ukuran     : document.getElementById('inlineUkuran').textContent.replace('—','').trim(),
        satuan     : b.satuan,
        stok_pusat : stokLabel,
        qty,
    });

    // Reset inline
    selectedBarang = null;
    inlineStokData  = null;
    $('#inlineBarang').val(null).trigger('change');
    document.getElementById('inlineMerek').textContent  = '—';
    document.getElementById('inlineUkuran').textContent = '—';
    document.getElementById('inlineSatuan').textContent = '—';
    document.getElementById('inlineStok').className     = 'chip-stok-none';
    document.getElementById('inlineStok').textContent   = '—';
    document.getElementById('inlineQty').value          = 1;

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

function showWarn(msg) {
    Swal.fire({ icon:'warning', title:'Perhatian', text:msg, timer:2000, showConfirmButton:false });
}

// ── Render rows ───────────────────────────────────────────────
function esc(s) { return String(s ?? '').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); }

function renderItems() {
    const tbody = document.getElementById('tbodyItems');
    const alert = document.getElementById('alertItemsEmpty');

    if (!items.length) {
        tbody.innerHTML = '';
        alert.classList.remove('d-none');
        return;
    }
    alert.classList.add('d-none');

    // fetch live stok for items that have no stok_pusat cached
    setTimeout(fetchLiveStok, 0);

    tbody.innerHTML = items.map((item, idx) => `
        <tr>
            <td class="text-center">${idx + 1}</td>
            <td>
                <div class="fw-semibold">${esc(item.nama_barang)}</div>
                <div class="text-muted" style="font-size:.78rem">${esc(item.kode_barang)}</div>
            </td>
            <td><span class="chip-info">${esc(item.merek || '—')}</span></td>
            <td>${esc(item.ukuran || '—')}</td>
            <td class="text-center">${esc(item.satuan || '—')}</td>
            <td class="text-center" data-stok-cell data-barang-id="${item.barang_id}" data-idx="${idx}">
                ${item.stok_pusat !== null
                    ? `<span class="${item.stok_pusat === 'Habis' ? 'chip-stok-warn' : 'chip-stok-ok'}">${esc(item.stok_pusat)}</span>`
                    : '<span class="chip-stok-none">...</span>'}
            </td>
            <td class="text-center">
                <input type="number" class="form-control inline-ctrl text-center" min="1"
                       value="${item.qty}" style="width:60px"
                       onchange="items[${idx}].qty = parseInt(this.value)||1">
            </td>
            <td class="text-center">
                <button type="button" class="btn btn-sm btn-danger px-2 py-1" onclick="hapusItem(${idx})" title="Hapus">
                    <i class="bx bx-trash"></i>
                </button>
            </td>
        </tr>
    `).join('');
}

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

function fetchLiveStok() {
    document.querySelectorAll('[data-stok-cell]').forEach(function (cell) {
        const barangId = cell.dataset.barangId;
        const idx      = parseInt(cell.dataset.idx);
        if (items[idx] && items[idx].stok_pusat !== null) return; // already loaded
        $.get(STOK_URL, { barang_id: barangId }, function (res) {
            const label = res.total > 0 ? `${res.total} ${res.satuan}`.trim() : 'Habis';
            const cls   = res.total > 0 ? 'chip-stok-ok' : 'chip-stok-warn';
            if (items[idx]) items[idx].stok_pusat = label;
            cell.innerHTML = `<span class="${cls}">${label}</span>`;
        }).fail(function () {
            cell.innerHTML = '<span class="chip-stok-none">—</span>';
        });
    });
}

// ── Submit ────────────────────────────────────────────────────
function buildPayload(ajukan) {
    return {
        _token   : CSRF,
        tanggal  : document.getElementById('tanggalPermintaan').value,
        faskes_id: $('#selectFaskes').val() || null,
        catatan  : document.getElementById('catatan').value,
        ajukan   : ajukan ? 1 : 0,
        items    : items.map(i => ({
            barang_id: i.barang_id,
            qty      : i.qty,
            satuan   : i.satuan,
        })),
    };
}

function doSubmit(ajukan) {
    // Auto-tambah jika ada barang terpilih di inline form yang belum di-+
    if ($('#inlineBarang').val()) {
        tambahItem();
        // Jika tambahItem gagal (qty 0 dll), items belum bertambah — biarkan validasi di bawah tangani
    }

    if (!document.getElementById('tanggalPermintaan').value) {
        return Swal.fire({ icon:'warning', title:'Tanggal wajib diisi' });
    }
    if (!$('#selectFaskes').val()) {
        return Swal.fire({ icon:'warning', title:'Pilih faskes KSO tujuan' });
    }
    if (!items.length) {
        return Swal.fire({ icon:'warning', title:'Tambahkan minimal 1 barang' });
    }

    const payload = buildPayload(ajukan);
    const url     = IS_EDIT ? `${BASE_URL}/permintaan-pengeluaran/${PPB_ID}` : `${BASE_URL}/permintaan-pengeluaran`;
    if (IS_EDIT) payload._method = 'PUT';

    $.ajax({
        url,
        method : 'POST',
        contentType: 'application/json',
        data   : JSON.stringify(payload),
        success: r => {
            if (r.success) {
                Swal.fire({ icon:'success', title:'Berhasil', text:r.message, timer:1500, showConfirmButton:false })
                    .then(() => window.location.href = BASE_URL + '/permintaan-pengeluaran');
            }
        },
        error: xhr => {
            Swal.fire({ icon:'error', title:'Gagal', text: xhr.responseJSON?.message ?? 'Terjadi kesalahan.' });
        }
    });
}

$('#btnSimpanDraft').on('click', () => doSubmit(false));
$('#btnAjukan').on('click', () => doSubmit(true));

// ── Modal Browse Barang ───────────────────────────────────────
const BROWSE_URL = BASE_URL + '/permintaan-pengeluaran/cari-barang';
const UKURAN_URL = BASE_URL + '/permintaan-pengeluaran/ukuran-list';
let browseTimer  = null;

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

function openBrowse() {
    $('#browseJenis, #browseMerek, #browseUkuran').val(null).trigger('change');
    $('#browseCari').val('');
    loadBrowseUkuran('');
    new bootstrap.Modal(document.getElementById('modalBrowse')).show();
    doBrowse();
}

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

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

function pilihDariBrowse(b) {
    bootstrap.Modal.getInstance(document.getElementById('modalBrowse')).hide();

    // Pilih di Select2 inline
    if ($('#inlineBarang').find(`option[value="${b.id}"]`).length === 0) {
        $('#inlineBarang').append(new Option(b.nama, b.id, true, true));
    } else {
        $('#inlineBarang').val(b.id).trigger('change');
    }

    // Set state manual (sama seperti saat select2:select)
    selectedBarang = b;
    inlineStokData  = null;
    fillInlineFromBarang(b);
}
</script>
@endsection