@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => 'Stok'])

    <div class="container-fluid py-3">
        <div class="row">
            <div class="col-md-12">
                <div class="row mx-1">
                    <div class="card">

                        <div class="row">
                            <div class="card-header col-md-auto">
                                <h5 class="mb-0">Tambah Stok Peminjaman Barang</h5>
                            </div>
                            <div class="col">
                                @include('components.alert')
                            </div>
                        </div>
                        <hr class="horizontal dark mt-0">

                        <div class="card-body pt-0">

                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label class="form-label fw-bold text-sm">
                                        Nama Barang <span class="text-danger">*</span>
                                    </label>

                                    <div class="input-group mb-0">
                                        <input type="text" class="form-control" id="selectedValueName"
                                            placeholder="Pilih Nama Barang..." readonly onfocus="focused(this)"
                                            onfocusout="defocused(this)">

                                        <span class="input-group-text bg-primary text-light btnOpenValuePickerModal"
                                            style="border-color:#d2d6da; border-left:3px solid #d2d6da; cursor:pointer;">
                                            <i class="fas fa-search"></i>
                                        </span>
                                    </div>

                                    <input type="hidden" id="selectedValue">

                                    <small class="text-muted d-block mt-2" style="font-size:0.8rem;">
                                        <i class="fas fa-info-circle me-1"></i>
                                        Jika data tidak ditemukan di <span class="fw-semibold">Master Data</span>,
                                        gunakan <span class="fw-semibold text-warning">Tambah Manual</span>.
                                    </small>
                                </div>

                                <div class="col-md-6 mb-5 d-flex align-items-end gap-2" id="btnActionWrap" style="display:none !important;">
                                    <button type="button" class="btn btn-info mb-0" id="btnOpenMasterModal">
                                        <i class="fas fa-database me-1"></i> Dari Master Data
                                    </button>
                                    <button type="button" class="btn btn-warning mb-0" id="btnShowManualInline">
                                        <i class="fas fa-plus me-1"></i> Tambah Manual
                                    </button>
                                </div>
                            </div>
                            <div id="manualInlineSection" class="d-none">
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="card border-warning shadow-sm">
                                            <div class="card-body py-3">
                                                <label class="form-label fw-bold text-sm">
                                                    Quantity <span class="text-danger">*</span>
                                                </label>
                                                <div class="d-flex gap-2 align-items-center">
                                                    <input type="number" class="form-control form-control-sm" id="manualQtyInline"
                                                        min="1" max="999" value="1" style="width:100px;">
                                                    <button type="button" class="btn btn-success btn-sm mb-0" id="btnSubmitManualInline">
                                                        <i class="fas fa-save me-1"></i> Simpan
                                                    </button>
                                                    <button type="button" class="btn btn-secondary btn-sm mb-0" id="btnCancelManualInline">
                                                        <i class="fas fa-times"></i>
                                                    </button>
                                                </div>
                                                <div id="manualInlineMsg" class="mt-2 d-none small"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <hr class="horizontal dark">
                            </div>
                            <div id="selectedItemsSection" class="d-none">
                                <hr class="horizontal dark">
                                <div class="d-flex justify-content-between align-items-center mb-2">
                                    <h6 class="mb-0 fw-bold">
                                        <i class="fas fa-list me-1 text-primary"></i>
                                        Daftar Barang yang Akan Ditambahkan
                                    </h6>
                                    <span class="badge bg-primary" id="selectedCountBadge">0 item</span>
                                </div>

                                <div class="table-responsive">
                                    <table class="table table-sm table-bordered align-middle mb-0">
                                        <thead style="background:#0a8f9715;">
                                            <tr>
                                                <th style="width:60px;" class="text-center">No</th>
                                                <th style="width:160px;">Nama Barang</th>
                                                <th>Kode Asset</th>
                                                <th>Merk</th>
                                                <th>User</th>
                                                <th style="width:60px;" class="text-center">Hapus</th>
                                            </tr>
                                        </thead>
                                        <tbody id="selectedItemsBody">
                                        </tbody>
                                    </table>
                                </div>

                                <hr class="horizontal dark mt-3">
                                <div class="d-flex gap-2">
                                    <button type="button" class="btn btn-primary mb-0" id="btnBatchSubmit">
                                        <i class="fas fa-save me-1"></i>
                                        <span class="font-weight-bold">Simpan Semua</span>
                                    </button>
                                    <a href="{{ url($url_menu) }}" class="btn btn-secondary mb-0">
                                        <i class="fas fa-arrow-left me-1"></i>
                                        <span class="font-weight-bold">Kembali</span>
                                    </a>
                                </div>
                            </div>

                            <div id="fallbackBack">
                                <hr class="horizontal dark">
                                <a href="{{ url($url_menu) }}" class="btn btn-secondary mb-0">
                                    <i class="fas fa-arrow-left me-1"></i>
                                    <span class="font-weight-bold">Kembali</span>
                                </a>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="valuePickerModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header" style="background:#028284;">
                    <h5 class="modal-title text-white">
                        <i class="fas fa-list me-2"></i>Pilih Nama Barang
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="modal-body">

                    <div id="formAddEnumWrap" class="d-none mb-3">
                        <div class="card border-warning shadow-sm">
                            <div class="card-header py-2 d-flex justify-content-between align-items-center"
                                style="background:#fff3cd; color:#856404;">
                                <strong><i class="fas fa-plus-circle me-1"></i> Tambah Nama Barang Baru</strong>
                                <button type="button" class="btn btn-sm btn-link p-0 text-muted" id="btnCancelAddEnum"><i
                                        class="fas fa-times"></i></button>
                            </div>
                            <div class="card-body py-2">
                                <input type="hidden" id="newEnumIdenum" value="bpinjam">
                                <div class="row g-2 align-items-start">
                                    <div class="col-md-3">
                                        <label class="form-label form-label-sm mb-1 fw-semibold">
                                            Value <span class="text-danger">*</span>
                                        </label>
                                        <input type="text" class="form-control form-control-sm" id="newEnumValue"
                                            placeholder="e.g. KBD" maxlength="10" style="text-transform:uppercase;">
                                        <div class="invalid-feedback">Value wajib diisi</div>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label form-label-sm mb-1 fw-semibold">
                                            Nama <span class="text-danger">*</span>
                                        </label>
                                        <input type="text" class="form-control form-control-sm" id="newEnumName"
                                            placeholder="e.g. Keyboard" maxlength="255">
                                        <div class="invalid-feedback">Nama wajib diisi</div>
                                    </div>
                                    <div class="col-md-3 d-flex align-items-end">
                                        <button type="button" class="btn btn-success btn-sm w-100 mt-4"
                                            id="btnSubmitNewEnum">
                                            <i class="fas fa-save me-1"></i> Simpan
                                        </button>
                                    </div>
                                </div>
                                <div id="addEnumMsg" class="mt-2 d-none small"></div>
                            </div>
                        </div>
                    </div>

                    <div class="mb-2">
                        <button type="button" class="btn btn-warning btn-sm" id="btnShowAddEnum">
                            <i class="fas fa-plus me-1"></i> Tambah Nama Barang Baru
                        </button>
                    </div>

                    <div id="pickerLoading" class="text-center py-2">
                        <i class="fas fa-spinner fa-spin me-1"></i> Memuat data...
                    </div>

                    <div class="table-scroll-wrapper" id="valuePickerWrapper" style="display:none;">
                        <table class="table table-hover table-sm mb-0">
                            <thead style="background:#0a8f9715;">
                                <tr>
                                    <th style="width:100px;">Action</th>
                                    <th>Value</th>
                                    <th>Nama Barang</th>
                                </tr>
                            </thead>
                            <tbody id="valuePickerList"></tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">
                        <i class="fas fa-times me-1"></i>Tutup
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="masterDataModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header" style="background:#028284;">
                    <h5 class="modal-title text-white">
                        <i class="fas fa-database me-2"></i>
                        Master Data — <span id="masterModalTitle">-</span>
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="modal-body">

                    <div class="row mb-3">
                        <div class="col-md-4">
                            <div class="input-group input-group-sm">
                                <span class="input-group-text"><i class="fas fa-search"></i></span>
                                <input type="text" class="form-control" id="masterSearchInput"
                                    placeholder="Cari kode asset, dept, area...">
                            </div>
                        </div>
                        <div class="col-md-8 d-flex align-items-center gap-2">
                            <span class="text-muted small" id="masterSelectedInfo">0 dipilih</span>
                        </div>
                    </div>

                    <div id="masterLoading" class="text-center py-4">
                        <i class="fas fa-spinner fa-spin me-1"></i> Memuat data master...
                    </div>

                    <div id="masterDataWrapper" style="display:none;">
                        <div class="table-scroll-wrapper-xl">
                            <table class="table table-hover table-sm mb-0" id="masterDataTable">
                                <thead style="background:#0a8f9715;">
                                    <tr>
                                        <th style="width:50px;" class="text-center">
                                            <input type="checkbox" id="checkAll" title="Pilih semua halaman ini">
                                        </th>
                                        <th>Kode Asset</th>
                                        <th>Merk</th>
                                        <th>Departemen</th>
                                        <th>User</th>
                                    </tr>
                                </thead>
                                <tbody id="masterDataList"></tbody>
                            </table>
                        </div>
                        <div class="text-muted small mt-2" id="masterDataCount"></div>
                    </div>

                    <div id="masterEmptyInfo" class="text-center text-muted py-4 d-none">
                        <i class="fas fa-inbox fa-2x mb-2 d-block"></i>
                        Tidak ada data tersedia
                    </div>

                    

                </div>
                <div class="modal-footer">
                    <span class="me-auto text-sm text-muted" id="masterFooterInfo"></span>
                    <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">
                        <i class="fas fa-times me-1"></i>Batal
                    </button>
                    <button type="button" class="btn btn-primary btn-sm" id="btnConfirmMaster" disabled>
                        <i class="fas fa-check me-1"></i>OK — Tambahkan ke Daftar
                    </button>
                </div>
            </div>
        </div>
    </div>
@endsection

<style>
    .table-scroll-wrapper {
        max-height: 400px;
        overflow-y: auto;
        border: 1px solid #dee2e6;
        border-radius: .375rem;
    }

    .table-scroll-wrapper-xl {
        max-height: 450px;
        overflow-y: auto;
        border: 1px solid #dee2e6;
        border-radius: .375rem;
    }

    .table-scroll-wrapper table,
    .table-scroll-wrapper-xl table {
        margin-bottom: 0;
    }

    .table-scroll-wrapper-xl thead th,
    .table-scroll-wrapper thead th {
        position: sticky;
        top: 0;
        z-index: 1;
        background: #f0fafa;
    }

    tr.already-selected {
        opacity: .45;
        pointer-events: none;
    }

    tr.row-checked {
        background: #e8f5e9 !important;
    }
</style>

@push('js')
    <script>
        $(document).ready(function() {
            const CSRF = '{{ csrf_token() }}';
            const URL_ENUM_ADD = '{{ url('mst-stok-peminjaman/store-enum') }}';
            const URL_ENUM_LST = '{{ url('mst-stok-peminjaman/list-enum') }}';
            const URL_MASTER = '{{ url('mst-stok-peminjaman/master-data') }}'; 
            const URL_STORE_MANUAL = '{{ url('mst-stok-peminjaman/store-manual') }}';
            const URL_STORE = '{{ url('mst-stok-peminjaman/store-batch') }}'; 
            const URL_MENU = '{{ url($url_menu) }}';

            const listValue = @json($list_value ?? []);

            let currentValue = '';
            let currentNama = '';
            let masterDataCache = []; 
            let checkedInModal = {}; 
            let alreadyAdded = new Set(); 

            
            function esc(str) {
                return String(str ?? '')
                    .replace(/&/g, '&amp;').replace(/</g, '&lt;')
                    .replace(/>/g, '&gt;').replace(/"/g, '&quot;');
            }

            function renderValuePickerList() {
                if (!listValue.length) {
                    $('#valuePickerList').html(
                        '<tr><td colspan="3" class="text-center text-muted py-3">Tidak ada data</td></tr>'
                    );
                    return;
                }
                const html = listValue.map(item => `
            <tr data-value="${esc(item.value)}" data-nama="${esc(item.nama_barang || '')}">
                <td class="text-center">
                    <button type="button" class="btn btn-sm btn-primary btn-select-value mb-0">Pilih</button>
                </td>
                <td><strong>${esc(item.value)}</strong></td>
                <td>${esc(item.nama_barang || '-')}</td>
            </tr>
        `).join('');
                $('#valuePickerList').html(html);
            }

            $(document).on('click', '.btnOpenValuePickerModal', function(e) {
                e.preventDefault();
                e.stopPropagation();
                $('#pickerLoading').show();
                $('#valuePickerWrapper').hide();
                $('#formAddEnumWrap').addClass('d-none');
                renderValuePickerList();
                setTimeout(() => {
                    $('#pickerLoading').hide();
                    $('#valuePickerWrapper').show();
                }, 300);
                new bootstrap.Modal(document.getElementById('valuePickerModal')).show();
            });

            $(document).on('click', '.btn-select-value', function() {
                const value = $(this).closest('tr').data('value');
                const nama = $(this).closest('tr').data('nama');

                currentValue = value;
                currentNama = nama;

                $('#selectedValue').val(value);
                $('#selectedValueName').val(value + ' — ' + nama);

                $('#btnActionWrap').css('display', '').removeClass('d-none');

                $('#manualInlineSection').addClass('d-none');
                $('#manualQtyInline').val(1);
                $('#manualInlineMsg').addClass('d-none').html('');

                bootstrap.Modal.getInstance(document.getElementById('valuePickerModal')).hide();
            });
            let existingInDb = new Set(); 

            $('#btnOpenMasterModal').on('click', function() {
                if (!currentValue) return;

                $('#masterModalTitle').text(currentValue + ' — ' + currentNama);
                $('#masterLoading').show();
                $('#masterDataWrapper').hide();
                $('#masterEmptyInfo').addClass('d-none').html( 
                    '<i class="fas fa-inbox fa-2x mb-2 d-block"></i>Tidak ada data tersedia'
                );
                $('#masterSearchInput').val('');
                checkedInModal = {};
                existingInDb = new Set(); 
                updateModalFooter();

                new bootstrap.Modal(document.getElementById('masterDataModal')).show();

                $.ajax({
                    url: URL_MASTER,
                    method: 'GET',
                    data: { value: currentValue },
                    headers: { 'X-Requested-With': 'XMLHttpRequest' },
                    success: function(res) {
                        masterDataCache = res.items ?? [];
                        existingInDb = new Set(res.existing_codes ?? []);
                        $('#masterLoading').hide();

                        if (!masterDataCache.length) {
                            $('#masterEmptyInfo').removeClass('d-none');
                            return;
                        }

                        renderMasterTable(masterDataCache);
                        $('#masterDataWrapper').show();
                    },
                    error: function() {
                        $('#masterLoading').hide();
                        $('#masterEmptyInfo').removeClass('d-none').html(
                            '<i class="fas fa-exclamation-triangle fa-2x mb-2 d-block text-danger"></i>Gagal memuat data'
                        );
                    }
                });
            });

           
            

            $('#btnShowManualInline').on('click', function() {
                $('#manualInlineSection').toggleClass('d-none');
                if (!$('#manualInlineSection').hasClass('d-none')) {
                    $('#manualQtyInline').val(1).focus();
                    $('#manualInlineMsg').addClass('d-none').html('');
                }
            });

            $('#btnCancelManualInline').on('click', function() {
                $('#manualInlineSection').addClass('d-none');
                $('#manualQtyInline').val(1);
                $('#manualInlineMsg').addClass('d-none').html('');
            });

            $('#btnSubmitManualInline').on('click', function() {
                const qty = parseInt($('#manualQtyInline').val());
                const $btn = $(this);

                $('#manualQtyInline').removeClass('is-invalid');
                $('#manualInlineMsg').addClass('d-none').html('');

                if (!qty || qty < 1) {
                    $('#manualQtyInline').addClass('is-invalid');
                    return;
                }

                if (!currentValue) {
                    alert('Pilih Nama Barang terlebih dahulu');
                    return;
                }

                $btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin me-1"></i>');

                $.ajax({
                    url: URL_STORE_MANUAL,
                    type: 'POST',
                    data: {
                        _token: CSRF,
                        value: currentValue,
                        nama_barang: currentNama,
                        qty: qty,
                    },
                    headers: { 'X-CSRF-TOKEN': CSRF, 'X-Requested-With': 'XMLHttpRequest' },
                    success: function(res) {
                        $btn.prop('disabled', false).html('<i class="fas fa-save me-1"></i> Simpan');

                        if (res.success) {
                            $('#manualInlineMsg')
                                .removeClass('d-none alert-danger').addClass('alert alert-success')
                                .html(`<i class="fas fa-check-circle me-1"></i> Berhasil menyimpan <strong>${qty}</strong> data manual`);

                            setTimeout(() => {
                                window.location.href = URL_MENU;
                            }, 1500);
                        } else {
                            $('#manualInlineMsg')
                                .removeClass('d-none alert-success').addClass('alert alert-danger')
                                .html(`<i class="fas fa-times-circle me-1"></i> ${esc(res.message ?? 'Gagal menyimpan')}`);
                        }
                    },
                    error: function(xhr) {
                        $btn.prop('disabled', false).html('<i class="fas fa-save me-1"></i> Simpan');
                        const msg = xhr.responseJSON?.message ?? 'Terjadi kesalahan';
                        $('#manualInlineMsg')
                            .removeClass('d-none alert-success').addClass('alert alert-danger')
                            .html(`<i class="fas fa-times-circle me-1"></i> ${esc(msg)}`);
                    }
                });
            });
            
            function isRowDisabled(ka) {
                return existingInDb.has(ka) || alreadyAdded.has(ka);
            }
            
            function renderMasterTable(data) {
                if (!data.length) {
                    $('#masterDataList').html(
                        '<tr><td colspan="5" class="text-center text-muted py-3">Tidak ada data</td></tr>'
                    );
                    $('#masterDataCount').text('');
                    $('#checkAll').prop({ checked: false, indeterminate: false });
                    return;
                }

                const html = data.map(item => {
                    const ka = item.kode_asset;
                    const disabled = isRowDisabled(ka);
                    const isChk = !disabled && !!checkedInModal[ka];

                    let rowCls = '';
                    let badge = '';
                    let titleTxt = '';

                    if (existingInDb.has(ka)) {
                        rowCls = 'already-selected';
                        titleTxt = 'Sudah terdaftar di stok';
                        badge = '<span class="badge bg-secondary ms-1" style="font-size:.7rem;">Sudah di stok</span>';
                    } else if (alreadyAdded.has(ka)) {
                        rowCls = 'already-selected';
                        titleTxt = 'Sudah ditambahkan ke daftar';
                        badge = '<span class="badge bg-success ms-1" style="font-size:.7rem;">Dipilih</span>';
                    } else if (isChk) {
                        rowCls = 'row-checked';
                    }

                    return `
            <tr class="${rowCls}" data-kode="${esc(ka)}" title="${titleTxt}">
                <td class="text-center">
                    <input type="checkbox" class="master-chk" value="${esc(ka)}"
                        ${isChk ? 'checked' : ''} ${disabled ? 'disabled' : ''}>
                </td>
                <td><strong>${esc(ka)}</strong>${badge}</td>
                <td>${esc(item.merk ?? '-')}</td>
                <td>${esc(item.dept ?? '-')}</td>
                <td>${esc(item.user ?? '-')}</td>
            </tr>`;
                }).join('');

                $('#masterDataList').html(html);
                $('#masterDataCount').text(`Menampilkan ${data.length} baris`);
                syncCheckAll();
            }

            $('#masterSearchInput').on('input', function() {
                const q = $(this).val().toLowerCase().trim();
                if (!q) {
                    renderMasterTable(masterDataCache);
                    return;
                }
                const filtered = masterDataCache.filter(item =>
                    (item.kode_asset ?? '').toLowerCase().includes(q) ||
                    (item.merk ?? '').toLowerCase().includes(q) ||
                    (item.dept ?? '').toLowerCase().includes(q) ||
                    (item.user ?? '').toLowerCase().includes(q)
                );
                renderMasterTable(filtered);
            });

            $(document).on('change', '.master-chk', function() {
                if ($(this).is(':disabled')) return; 
                const ka = $(this).val();
                if (isRowDisabled(ka)) {
                    $(this).prop('checked', false);
                    return;
                }
                if ($(this).is(':checked')) {
                    checkedInModal[ka] = true;
                    $(this).closest('tr').addClass('row-checked');
                } else {
                    delete checkedInModal[ka];
                    $(this).closest('tr').removeClass('row-checked');
                }
                syncCheckAll();
                updateModalFooter();
            });

            $('#checkAll').on('change', function() {
                const checked = $(this).is(':checked');
                $('.master-chk:not(:disabled)').each(function() {
                    const ka = $(this).val();
                    if (isRowDisabled(ka)) return; 
                    $(this).prop('checked', checked);
                    if (checked) {
                        checkedInModal[ka] = true;
                        $(this).closest('tr').addClass('row-checked');
                    } else {
                        delete checkedInModal[ka];
                        $(this).closest('tr').removeClass('row-checked');
                    }
                });
                updateModalFooter();
            });

            function syncCheckAll() {
                const total = $('.master-chk:not(:disabled)').length;
                const checked = $('.master-chk:not(:disabled):checked').length;
                $('#checkAll').prop({
                    checked: checked > 0 && checked === total,
                    indeterminate: checked > 0 && checked < total,
                });
            }

            function updateModalFooter() {
                const count = Object.keys(checkedInModal).length;
                $('#masterSelectedInfo').text(count + ' dipilih');
                $('#masterFooterInfo').text(count > 0 ? count + ' item akan ditambahkan' : '');
                $('#btnConfirmMaster').prop('disabled', count === 0);
            }

            $('#btnConfirmMaster').on('click', function() {
                const keys = Object.keys(checkedInModal);
                if (!keys.length) return;

                keys.forEach(ka => {
                    if (alreadyAdded.has(ka)) return;
                    alreadyAdded.add(ka);

                    const found = masterDataCache.find(i => i.kode_asset === ka);
                    const merk = found?.merk ?? '-';
                    const user = found?.user ?? '';

                    appendSelectedRow(ka, currentValue, currentNama, merk, user);
                });

                checkedInModal = {};
                updateSelectedSection();
                bootstrap.Modal.getInstance(document.getElementById('masterDataModal')).hide();
            });

            function appendSelectedRow(kodeAsset, value, namaBarang, merk, user) {
                const idx = $('#selectedItemsBody tr').length + 1;
                const html = `
        <tr data-kode="${esc(kodeAsset)}">
            <td class="text-center row-no">${idx}</td>
            <td>
                <span class="badge bg-secondary">${esc(value)}</span>
                <small class="text-muted ms-1">${esc(namaBarang)}</small>
                <input type="hidden" class="hidden-value" value="${esc(value)}">
                <input type="hidden" class="hidden-nama" value="${esc(namaBarang)}">
                <input type="hidden" class="hidden-merk" value="${esc(merk ?? '')}">
                <input type="hidden" class="hidden-user" value="${esc(user ?? '')}">
            </td>
            <td>
                <code>${esc(kodeAsset)}</code>
                <input type="hidden" class="kode-asset-input" value="${esc(kodeAsset)}">
            </td>
            <td>${esc(merk ?? '-')}</td>
            <td>${esc(user ?? '-')}</td>
            <td class="text-center">
                <button type="button" class="btn btn-sm btn-danger btn-remove-row mb-0"
                    title="Hapus baris ini">
                    <i class="fas fa-trash"></i>
                </button>
            </td>
        </tr>`;
                $('#selectedItemsBody').append(html);
            }

            $(document).on('click', '.btn-remove-row', function() {
                const $row = $(this).closest('tr');
                const ka = $row.data('kode');
                alreadyAdded.delete(ka);
                $row.remove();
                renumberRows();
                updateSelectedSection();
            });

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

            function updateSelectedSection() {
                const count = $('#selectedItemsBody tr').length;
                if (count > 0) {
                    $('#selectedItemsSection').removeClass('d-none');
                    $('#fallbackBack').addClass('d-none');
                    $('#selectedCountBadge').text(count + ' item');
                } else {
                    $('#selectedItemsSection').addClass('d-none');
                    $('#fallbackBack').removeClass('d-none');
                }
            }

            $('#btnBatchSubmit').on('click', function() {
                const $btn = $(this);
                const rows = [];

                let hasError = false;
                $('#selectedItemsBody tr').each(function() {
                    const $row = $(this);
                    const ka = $row.find('.kode-asset-input').val().trim();
                    const value = $row.find('.hidden-value').val();
                    const nama = $row.find('.hidden-nama').val();
                    const merk = $row.find('.hidden-merk').val();

                    if (!ka) {
                        $row.find('.kode-asset-input').addClass('is-invalid');
                        hasError = true;
                        return;
                    }
                    $row.find('.kode-asset-input').removeClass('is-invalid');
                    rows.push({
                        kode_asset: ka,
                        value,
                        nama_barang: nama,
                        merk,
                        user: $row.find('.hidden-user').val()
                    });
                });

                if (hasError) {
                    alert('Kode Asset tidak boleh kosong. Periksa kembali.');
                    return;
                }
                if (!rows.length) return;

                $btn.prop('disabled', true).html(
                    '<i class="fas fa-spinner fa-spin me-1"></i> Menyimpan...');

                $.ajax({
                    url: URL_STORE,
                    type: 'POST',
                    data: {
                        _token: CSRF,
                        items: JSON.stringify(rows),
                    },
                    headers: {
                        'X-CSRF-TOKEN': CSRF,
                        'X-Requested-With': 'XMLHttpRequest'
                    },
                    success: function(res) {
                        if (res.success) {
                            window.location.href = URL_MENU;
                        } else {
                            $btn.prop('disabled', false).html(
                                '<i class="fas fa-save me-1"></i> Simpan Semua');
                            alert('Gagal: ' + (res.message ?? 'Terjadi kesalahan'));
                        }
                    },
                    error: function(xhr) {
                        $btn.prop('disabled', false).html(
                            '<i class="fas fa-save me-1"></i> Simpan Semua');
                        const msg = xhr.responseJSON?.message ??
                            'Terjadi kesalahan saat menyimpan';
                        alert('Error: ' + msg);
                    }
                });
            });

            $('#btnShowAddEnum').on('click', function() {
                const hidden = $('#formAddEnumWrap').hasClass('d-none');
                $('#formAddEnumWrap').toggleClass('d-none', !hidden);
                if (hidden) $('#newEnumValue').focus();
            });

            $('#btnCancelAddEnum').on('click', function() {
                $('#formAddEnumWrap').addClass('d-none');
                $('#newEnumValue, #newEnumName').val('').removeClass('is-invalid');
                $('#addEnumMsg').addClass('d-none').html('');
            });

            $('#btnSubmitNewEnum').on('click', function() {
                const idenum = $('#newEnumIdenum').val();
                const value = $('#newEnumValue').val().trim().toUpperCase();
                const name = $('#newEnumName').val().trim();
                let ok = true;

                $('#newEnumValue, #newEnumName').removeClass('is-invalid');
                $('#addEnumMsg').addClass('d-none').html('');

                if (!value) {
                    $('#newEnumValue').addClass('is-invalid');
                    ok = false;
                }
                if (!name) {
                    $('#newEnumName').addClass('is-invalid');
                    ok = false;
                }
                if (!ok) return;

                const $btn = $(this);
                $btn.prop('disabled', true).html(
                    '<i class="fas fa-spinner fa-spin me-1"></i> Menyimpan...');

                $.ajax({
                    url: URL_ENUM_ADD,
                    type: 'POST',
                    data: {
                        idenum,
                        value,
                        name,
                        _token: CSRF
                    },
                    headers: {
                        'X-CSRF-TOKEN': CSRF,
                        'X-Requested-With': 'XMLHttpRequest'
                    },
                    success: function() {
                        $btn.prop('disabled', false).html(
                            '<i class="fas fa-save me-1"></i> Simpan');
                        $('#pickerLoading').show();
                        $('#valuePickerWrapper').hide();

                        $.ajax({
                            url: URL_ENUM_LST,
                            method: 'GET',
                            headers: {
                                'X-Requested-With': 'XMLHttpRequest'
                            },
                            success: function(res) {
                                const newList = res.list_value ?? [];
                                if (newList.length) {
                                    listValue.length = 0;
                                    listValue.push(...newList);
                                } else {
                                    listValue.push({
                                        value,
                                        nama_barang: name
                                    });
                                }
                                renderValuePickerList();
                                $('#pickerLoading').hide();
                                $('#valuePickerWrapper').show();
                                $('#newEnumValue, #newEnumName').val('')
                                    .removeClass('is-invalid');
                                $('#formAddEnumWrap').addClass('d-none');
                                $('#addEnumMsg')
                                    .removeClass('d-none alert-danger').addClass(
                                        'alert alert-success')
                                    .html(
                                        `<i class="fas fa-check-circle me-1"></i> Value "<strong>${esc(value)}</strong>" berhasil ditambahkan`
                                    );
                                setTimeout(() => $('#addEnumMsg').addClass('d-none')
                                    .html(''), 2500);
                            },
                            error: function() {
                                listValue.push({
                                    value,
                                    nama_barang: name
                                });
                                renderValuePickerList();
                                $('#pickerLoading').hide();
                                $('#valuePickerWrapper').show();
                                $('#formAddEnumWrap').addClass('d-none');
                            }
                        });
                    },
                    error: function(xhr) {
                        $btn.prop('disabled', false).html(
                            '<i class="fas fa-save me-1"></i> Simpan');
                        const msg = xhr.responseJSON?.message || 'Gagal menyimpan, coba lagi';
                        $('#addEnumMsg')
                            .removeClass('d-none alert-success').addClass('alert alert-danger')
                            .html(`<i class="fas fa-times-circle me-1"></i> ${esc(msg)}`);
                    }
                });
            });
        });
    </script>
@endpush