@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="card shadow-sm border-0">
            <div class="card-body">

                <div class="row mb-2">
                    <div class="col-md-auto">
                        <div class="text-uppercase text-muted small" style="letter-spacing:.06em;">
                            LIST STOK PEMINJAMAN BARANG
                        </div>
                    </div>
                    <div class="col">
                        @include('components.alert')
                    </div>
                </div>

                <hr class="horizontal dark mt-0">

                <div class="mb-3">
                    @if ($authorize->add == '1')
                        <button class="btn btn-primary mb-0" onclick="window.location='{{ URL::to($url_menu . '/add') }}'">
                            <i class="fas fa-plus me-1"></i>
                            <span class="font-weight-bold">Tambah</span>
                        </button>
                    @endif
                </div>

                <div class="table-responsive">
                    <table class="table align-middle table-hover display" id="list_{{ $dmenu ?? 'mspjst' }}">
                        <thead style="background:#00b7bd4f;">
                            <tr>
                                <th style="width:120px;">Action</th>
                                <th style="min-width:220px;">Nama Barang</th>
                                <th style="width:180px; text-align:center;">Total Bisa Dipinjam</th>
                                <th style="width:180px; text-align:center;">Sedang Dipinjam</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($requests ?? [] as $i => $r)
                                @if (!$r->has_data)
                                    @continue
                                @endif
                                <tr {{ $r->isactive == '0' ? 'class=not style=background-color:#ffe9ed;' : '' }}>
                                    <td class="text-sm font-weight-normal">
                                        <button class="btn btn-primary btn-sm mb-0 px-3 btn-detail" type="button"
                                            title="Lihat Kode Asset" data-value="{{ $r->value }}"
                                            data-nama="{{ $r->nama_barang }}">
                                            <i class="fas fa-eye"></i>
                                            <span class="font-weight-bold"> View</span>
                                        </button>
                                    </td>
                                    <td>{{ $r->nama_barang ?? '-' }}</td>
                                    <td class="text-center">
                                        {{ $r->total_tersedia }}
                                    </td>
                                    <td class="text-center">
                                        <span class="badge px-3 py-2 badge-peminjam"
                                            style="background:{{ $r->sedang_dipinjam > 0 ? '#f59e0b' : '#6b7280' }};color:#fff;font-size:.8rem;border-radius:.5rem;cursor:pointer;"
                                            title="Klik untuk lihat yang sedang dipinjam"
                                            data-id="{{ $r->id }}"
                                            data-nama="{{ $r->nama_barang }}">
                                            {{ $r->sedang_dipinjam }}
                                            <i class="fas fa-user-clock ms-1" style="font-size:.7rem;"></i>
                                        </span>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <div class="mt-2">
                    <code>Note :
                        <i aria-hidden="true" style="color:#ffc2cd;" class="fas fa-circle"></i> Data not active
                    </code>
                </div>

            </div>
        </div>

    </div>
    <div class="modal fade" id="modalPeminjam" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-scrollable">
            <div class="modal-content" style="border-radius:12px;overflow:hidden;border:none;">
                <div class="modal-header" style="background:#0a8f97;padding:14px 18px;">
                    <div>
                        <h5 class="modal-title text-white" style="font-size:15px;font-weight:500;display:flex;align-items:center;gap:8px;">
                            <i class="fas fa-users"></i> Daftar Peminjam
                        </h5>
                        <small class="text-white opacity-75" id="peminjam-subtitle">–</small>
                    </div>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body p-0">
                    <table class="table table-sm table-bordered align-middle mb-0" style="font-size:13px;table-layout:fixed;">
                        <thead style="background:#0a8f97;color:#fff;position:sticky;top:0;z-index:10;">
                            <tr>
                                <th style="width:130px;padding:9px 12px;">Kode Aset</th>
                                <th style="width:140px;padding:9px 12px;">Peminjam</th>
                                <th style="width:130px;padding:9px 12px;">Departemen</th>
                                <th style="width:100px;padding:9px 12px;">Tgl Pinjam</th>
                                <th style="width:100px;padding:9px 12px;">Tgl Kembali</th>
                            </tr>
                        </thead>
                        <tbody id="peminjam-list-body"></tbody>
                    </table>
                </div>
                <div class="modal-footer" style="background:#f8f9fa;">
                    <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="modalKodeAsset" 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;">
                    <div>
                        <h5 class="modal-title text-white">
                            <i class="fas fa-box me-2"></i> Daftar Kode Asset
                        </h5>
                        <small class="text-white opacity-75" id="modal-subtitle">–</small>
                    </div>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body">

                    <div id="modal-loading" class="text-center py-4">
                        <div class="spinner-border text-teal" role="status"></div>
                        <div class="text-muted mt-2 small">Memuat data...</div>
                    </div>

                    <div id="modal-error" class="alert alert-danger d-none">
                        Gagal memuat data. Silakan coba lagi.
                    </div>

                    <div id="formEditAssets" class="d-none">

                        <div id="section-manual" 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;">
                                    <div>
                                        <strong><i class="fas fa-cube me-1"></i> Data Manual</strong>
                                        <small class="ms-2 text-muted">Stok tanpa kode asset</small>
                                    </div>
                                    <div class="d-flex align-items-center gap-2">
                                        <span class="me-2">
                                            Qty: <strong id="manual-qty-display">0</strong>
                                        </span>
                                        <button type="button" class="btn btn-warning btn-sm" id="btnEditManualQty">
                                            <i class="fas fa-pen me-1"></i> Edit Qty
                                        </button>

                                    </div>
                                </div>
                                <div class="card-body py-2 d-none" id="manualEditForm">
                                    <div class="d-flex align-items-center gap-2">
                                        <label class="form-label mb-0 fw-semibold small">Qty Baru:</label>
                                        <input type="number" class="form-control form-control-sm" id="manualQtyInput"
                                            min="0" style="width:90px;">
                                        <button type="button" class="btn btn-success btn-sm" id="btnSaveManualQty">
                                            <i class="fas fa-check me-1"></i> Simpan
                                        </button>
                                        <button type="button" class="btn btn-secondary btn-sm" id="btnCancelManualQty">
                                            <i class="fas fa-times"></i>
                                        </button>
                                    </div>
                                    <div id="manualQtyMsg" class="mt-2 d-none small"></div>
                                </div>
                            </div>
                        </div>


                        <div id="section-in-table" class="d-none">

                            <div class="mb-2">
                                <small class="text-success fw-semibold">
                                    <i class="fas fa-boxes me-1"></i>
                                    Data dari Peminjaman Barang
                                </small>
                            </div>

                            <div class="table-scroll-wrapper">
                                <table class="table table-sm table-bordered table-hover align-middle mb-0"
                                    id="table-in-table">
                                    <thead style="background:#0a8f97; color:#fff;">
                                        <tr>
                                            <th style="width:90px;">Action</th>
                                            <th style="width:40px;">No</th>
                                            <th style="min-width:130px;">Value</th>
                                            <th style="min-width:150px;">Nama Barang</th>
                                            <th style="min-width:170px;">Kode Asset</th>
                                            <th style="min-width:130px;">Merk</th>
                                            <th style="min-width:130px;">User</th>
                                        </tr>
                                    </thead>
                                    <tbody id="items-in-table">
                                        <tr class="text-center text-muted">
                                            <td colspan="8">Tidak ada data</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                        </div>

                    </div>

                </div>

                <div class="modal-footer">
                    <small id="hint-editing" class="text-warning me-auto d-none">
                        <i class="fas fa-triangle-exclamation me-1"></i>
                        Ada baris yang belum dikonfirmasi (klik ✓ dulu)
                    </small>

                    <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">
                        <i class="fas fa-times me-1"></i> Tutup
                    </button>

                    @if ($authorize->edit == '1')
                        <button type="button" class="btn btn-primary btn-sm" id="btnSaveAll" disabled>
                            <i class="fas fa-save me-1"></i> Simpan Perubahan
                        </button>
                    @endif
                </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 Value
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></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 Value Baru ke sys_enum</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"
                                            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 Value Baru
                        </button>
                    </div>

                    <div id="pickerLoading" class="text-center py-2 d-none">
                        <div class="spinner-border spinner-border-sm text-teal" role="status"></div>
                        <span class="ms-2 text-muted small">Memuat ulang daftar...</span>
                    </div>

                    <div class="table-scroll-wrapper">
                        <table class="table table-sm table-bordered table-hover align-middle mb-0" id="valuePickerTable">
                            <thead style="background:#0a8f97; color:#fff; position:sticky; top:0; z-index:10;">
                                <tr>
                                    <th style="width:90px;">Action</th>
                                    <th>Value</th>
                                    <th>Nama Barang</th>
                                </tr>
                            </thead>
                            <tbody id="valuePickerList">
                                <tr>
                                    <td colspan="3" class="text-center text-muted py-3">–</td>
                                </tr>
                            </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="barangModal" 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;">
                    <div>
                        <h5 class="modal-title text-white">
                            <i class="fas fa-box me-2"></i> Pilih Kode Asset
                        </h5>
                        <small class="text-white opacity-75" id="asset-modal-subtitle">–</small>
                    </div>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body">
                    <div id="asset-modal-loading" class="text-center py-4 d-none">
                        <div class="spinner-border text-teal" role="status"></div>
                        <div class="text-muted mt-2 small">Memuat data...</div>
                    </div>

                    <div id="asset-modal-error" class="alert alert-danger d-none">
                        Gagal memuat data. Silakan coba lagi.
                    </div>

                    <div class="table-responsive">
                        <table class="table display" id="barangTable">
                            <thead style="background:#00b7bd4f;">
                                <tr>
                                    <th style="width:120px;">Action</th>
                                    <th>Kode Asset</th>
                                    <th>Merk</th>
                                    <th>User</th>
                                </tr>
                            </thead>
                            <tbody></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>
@endsection

<style>
    .text-teal {
        color: #028284 !important;
    }

    .spinner-border.text-teal {
        border-color: #028284;
        border-right-color: transparent;
    }

    tr.row-editing {
        background-color: #fff8e1 !important;
        outline: 2px solid #f59e0b;
    }

    tr.row-dirty {
        background-color: #fffbe6 !important;
    }

    tr.row-deleted {
        background-color: #fee2e2 !important;
        opacity: .65;
    }

    .btn-act-edit {
        color: #028284;
        background: transparent;
        border: 1px solid #028284;
    }

    .btn-act-edit:hover {
        background: #028284;
        color: #fff;
    }

    .btn-act-edit.disabled-btn {
        opacity: .35;
        pointer-events: none;
    }

    .btn-act-delete {
        color: #ef4444;
        background: transparent;
        border: 1px solid #ef4444;
    }

    .btn-act-delete:hover {
        background: #ef4444;
        color: #fff;
    }

    .btn-act-delete.marked-delete {
        background: #ef4444;
        color: #fff;
        animation: pulse-red .8s infinite alternate;
    }

    .btn-act-delete.disabled-btn {
        opacity: .35;
        pointer-events: none;
    }

    .btn-act-save {
        color: #16a34a;
        background: transparent;
        border: 1px solid #16a34a;
    }

    .btn-act-save:hover {
        background: #16a34a;
        color: #fff;
    }

    @keyframes pulse-red {
        from {
            box-shadow: 0 0 0 0 #ef444466;
        }

        to {
            box-shadow: 0 0 0 5px #ef444400;
        }
    }

    .dirty-badge {
        display: inline-block;
        width: 8px;
        height: 8px;
        background: #f59e0b;
        border-radius: 50%;
        margin-left: 4px;
        vertical-align: middle;
    }

    .input-error-msg {
        font-size: .73rem;
        color: #dc2626;
        margin-top: 2px;
        line-height: 1.3;
    }

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

    .table-scroll-wrapper table {
        margin-bottom: 0;
    }
</style>
@push('js')
    <script>
        $(document).ready(function() {


            const CSRF = '{{ csrf_token() }}';
            const URL_DETAIL = '{{ url('mst-stok-peminjaman/get-detail') }}';
            const URL_BATCH = '{{ url('mst-stok-peminjaman/batch-update') }}';
            const URL_ENUM_ADD = '{{ url('mst-stok-peminjaman/store-enum') }}';
            const URL_ENUM_LST = '{{ url('mst-stok-peminjaman/list-enum') }}';


            let activeEditRow = null;
            window._listValue = [];
            window._codesInTable = [];


            const mainId = '#list_{{ $dmenu ?? 'mspjst' }}';
            if ($.fn.DataTable.isDataTable(mainId)) $(mainId).DataTable().destroy();
            $(mainId).DataTable({
                stateSave: false,
                order: [],
                orderMulti: false,
                columnDefs: [{
                    orderable: false,
                    targets: [0]
                }],
                pageLength: 25,
                autoWidth: false,
                language: {
                    emptyTable: "Tidak ada data yang tersedia",
                    info: "Menampilkan _START_ sampai _END_ dari _TOTAL_ data",
                    infoEmpty: "Menampilkan 0 sampai 0 dari 0 data",
                    infoFiltered: "(difilter dari _MAX_ total data)",
                    lengthMenu: "Tampilkan _MENU_ baris",
                    loadingRecords: "Memuat...",
                    processing: "Memproses...",
                    search: "Cari :",
                    zeroRecords: "Data tidak ditemukan",
                    paginate: {
                        first: "Pertama",
                        last: "Terakhir",
                        next: "Selanjutnya",
                        previous: "Sebelumnya"
                    }
                }
            });


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

            function actionBtns(isManual = false) {
                if (isManual) {
                    return `<span class="text-muted small fst-italic">—</span>`;
                }
                return `
        <button type="button" class="btn btn-act-edit btn-sm px-2 me-1 btn-row-edit" title="Edit">
            <i class="fas fa-pen"></i>
        </button>
        <button type="button" class="btn btn-act-delete btn-sm px-2 btn-row-delete" title="Hapus">
            <i class="fas fa-trash"></i>
        </button>`;
            }

            function simpleDt(sel) {
                if ($.fn.DataTable.isDataTable(sel)) $(sel).DataTable().destroy();
                $(sel).DataTable({
                    stateSave: false,
                    order: [],
                    orderMulti: false,
                    paging: false,
                    info: false,
                    columnDefs: [{
                        orderable: false,
                        targets: [0]
                    }],
                    language: {
                        emptyTable: "Tidak ada data",
                        search: "Cari :",
                        zeroRecords: "Tidak ditemukan"
                    }
                });
            }


            function syncSaveBtn() {
                const editingCount = $('tr.row-editing').length;
                const dirtyCount = $('tr.row-dirty, tr.row-deleted').length;

                const $btn = $('#btnSaveAll');
                const $hint = $('#hint-editing');

                if (editingCount > 0) {

                    $btn.prop('disabled', true);
                    $hint.removeClass('d-none');
                } else if (dirtyCount > 0) {

                    $btn.prop('disabled', false);
                    $hint.addClass('d-none');
                } else {

                    $btn.prop('disabled', true);
                    $hint.addClass('d-none');
                }
            }


            function resetModal() {
                if ($.fn.DataTable.isDataTable('#table-view-only')) $('#table-view-only').DataTable().destroy();
                if ($.fn.DataTable.isDataTable('#table-in-table')) $('#table-in-table').DataTable().destroy();
                $('#items-view-only').empty();
                $('#items-in-table').empty();
                $('#section-view-only, #section-in-table, #section-manual').addClass(
                    'd-none');
                $('#manualEditForm').addClass('d-none');
                $('#formEditAssets').addClass('d-none');
                $('#modal-error').addClass('d-none');
                $('#modal-loading').removeClass('d-none');
                $('#hint-editing').addClass('d-none');
                window._codesInTable = [];
                $('#btnSaveAll').prop('disabled', true);
            }


            function simpleDt(sel) {
                if ($.fn.DataTable.isDataTable(sel)) $(sel).DataTable().destroy();
                $(sel).DataTable({
                    stateSave: false,
                    order: [],
                    orderMulti: false,
                    paging: false,
                    info: false,
                    columnDefs: [{
                        orderable: false,
                        targets: [0]
                    }],
                    language: {
                        emptyTable: "Tidak ada data",
                        search: "Cari :",
                        zeroRecords: "Tidak ditemukan"
                    }
                });
            }


            $(document).on('click', '.badge-peminjam', function() {
                const headerId = $(this).data('id');
                const namaBarang = $(this).data('nama');

                $('#peminjam-subtitle').text(namaBarang);
                $('#peminjam-list-body').html(
                    '<tr><td colspan="5" class="text-center py-3"><div class="spinner-border spinner-border-sm text-teal"></div> Memuat...</td></tr>'
                );

                const oldModal = bootstrap.Modal.getInstance(document.getElementById('modalPeminjam'));
                if (oldModal) oldModal.dispose();
                new bootstrap.Modal(document.getElementById('modalPeminjam')).show();

                $.ajax({
                    url: '{{ url('mst-stok-peminjaman/get-peminjam-list') }}',
                    method: 'GET',
                    data: {
                        header_id: headerId
                    },
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    },
                    success: function(res) {
                        const peminjamData = res.data ?? [];
                        let html = '';

                        if (!peminjamData.length) {
                            html =
                                '<tr><td colspan="5" class="text-center text-muted py-3">Tidak ada yang sedang meminjam</td></tr>';
                        } else {
                            peminjamData.forEach(function(p) {
                                const dept = p.departemen
                                    ? `<span style="background:#e0f2fe;color:#0369a1;border-radius:4px;font-size:11px;padding:2px 8px;font-weight:500;">${esc(p.departemen)}</span>`
                                    : `<span class="text-muted">–</span>`;

                                html += `<tr>
                                    <td><span style="font-family:monospace;color:#dc2626;font-weight:600;font-size:12px;">${esc(p.kode_asset || '–')}</span></td>
                                    <td>${esc(p.nama_peminjam || '–')}</td>
                                    <td>${dept}</td>
                                    <td>${formatTanggal(p.tanggal_pinjam)}</td>
                                    <td>${formatTanggal(p.tanggal_kembali)}</td>
                                </tr>`;
                            });
                        }
                        $('#peminjam-list-body').html(html);
                    },
                    error: function() {
                        $('#peminjam-list-body').html(
                            '<tr><td colspan="5" class="text-center text-danger py-3">Gagal memuat data</td></tr>'
                        );
                    }
                });
            });

            function renderTableItems(items, manualHeader) {

                if (manualHeader) {
                    $('#manual-qty-display').text(manualHeader.stok ?? 0);
                    $('#manualQtyInput').val(manualHeader.stok ?? 0);
                    $('#section-manual')
                        .removeClass('d-none')
                        .data('manual-id', manualHeader.encrypted_id)
                        .data('manual-qty', manualHeader.stok ?? 0);
                    $('#manualEditForm').addClass('d-none');
                    $('#manualQtyMsg').addClass('d-none').html('');
                } else {
                    $('#section-manual').addClass('d-none');
                }

                window._codesInTable = items
                    .map(i => (i.kode_asset || '').toUpperCase())
                    .filter(Boolean);

                if ($.fn.DataTable.isDataTable('#table-in-table')) {
                    $('#table-in-table').DataTable().destroy();
                }

                $('#section-in-table').removeClass('d-none');

                if (!items.length) {
                    $('#items-in-table').html(
                        '<tr><td colspan="7" class="text-center text-muted py-3">Tidak ada data asset</td></tr>'
                    );
                    return;
                }

                let html = '';
                items.forEach((item, idx) => {
                    html += `<tr
                    data-type="table"
                    data-manual="0"
                    data-id="${esc(item.encrypted_id)}"
                    data-id-header="${esc(item.encrypted_id_header)}"
                    data-original-value="${esc(item.value || '')}"
                    data-original-nama="${esc(item.nama_barang || '')}"
                    data-original-code="${esc(item.kode_asset || '')}"
                    data-original-merk="${esc(item.merk || '-')}"
                    data-original-user="${esc(item.user || '-')}">
                    <td>${actionBtns(false)}</td>
                    <td>${idx + 1}</td>
                    <td class="cell-value">${esc(item.value || '-')}</td>
                    <td class="cell-nama">${esc(item.nama_barang || '-')}</td>
                    <td class="cell-code">${esc(item.kode_asset || '-')}</td>
                    <td class="cell-merk">${esc(item.merk || '-')}</td>
                    <td class="cell-user">${esc(item.user || '-')}</td>
                </tr>`;
                });

                $('#items-in-table').html(html);
                simpleDt('#table-in-table');
            }


            function renderPickerRows(list) {
                if (!list.length) {
                    $('#valuePickerList').html(
                        '<tr><td colspan="8" class="text-center text-muted py-3">Tidak ada data</td></tr>');
                    return;
                }
                $('#valuePickerList').html(list.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>${esc(item.value)}</td>
                <td>${esc(item.nama_barang || '-')}</td>
            </tr>
        `).join(''));
            }
            const URL_BATCH_MANUAL = '{{ url('mst-stok-peminjaman/batch-update') }}';

            $('#btnEditManualQty').on('click', function() {
                $('#manualEditForm').toggleClass('d-none');
                $('#manualQtyMsg').addClass('d-none').html('');
            });

            $('#btnCancelManualQty').on('click', function() {
                $('#manualEditForm').addClass('d-none');
                $('#manualQtyMsg').addClass('d-none').html('');
            });

            $('#btnSaveManualQty').on('click', function() {
                const $btn = $(this);
                const newQty = parseInt($('#manualQtyInput').val());
                const id = $('#section-manual').data('manual-id');
                const oldQty = $('#section-manual').data('manual-qty');

                if (isNaN(newQty) || newQty < 0) {
                    $('#manualQtyMsg')
                        .removeClass('d-none alert-success').addClass('alert alert-danger')
                        .html('<i class="fas fa-times-circle me-1"></i> Qty tidak valid');
                    return;
                }

                Swal.fire({
                    title: 'Ubah Stok Manual?',
                    html: `Stok akan diubah dari <strong>${oldQty}</strong> menjadi <strong>${newQty}</strong>`,
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonColor: '#028284',
                    cancelButtonColor: '#6b7280',
                    confirmButtonText: '<i class="fas fa-check me-1"></i> Ya, Simpan',
                    cancelButtonText: '<i class="fas fa-times me-1"></i> Batal',
                }).then(result => {
                    if (!result.isConfirmed) return;

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

                    $.ajax({
                        url: URL_BATCH,
                        type: 'POST',
                        data: {
                            _token: CSRF,
                            updates: JSON.stringify([{
                                id: id,
                                is_manual: 1,
                                new_qty: newQty,
                                delete: 0,
                            }])
                        },
                        headers: {
                            'X-CSRF-TOKEN': CSRF,
                            'X-Requested-With': 'XMLHttpRequest',
                            'Content-Type': 'application/x-www-form-urlencoded'
                        },
                        success: function(res) {
                            $btn.prop('disabled', false).html(
                                '<i class="fas fa-check me-1"></i> Simpan');

                            if (res.errors && res.errors.length) {
                                Swal.fire({
                                    title: 'Gagal!',
                                    text: res.errors[0],
                                    icon: 'error',
                                    confirmButtonColor: '#ef4444',
                                });
                                return;
                            }

                            if (res.success) {
                                $('#manual-qty-display').text(newQty);
                                $('#section-manual').data('manual-qty', newQty);
                                $('#manualEditForm').addClass('d-none');
                                $('#manualQtyMsg').addClass('d-none').html('');

                                Swal.fire({
                                    title: 'Berhasil!',
                                    text: 'Stok berhasil diperbarui',
                                    icon: 'success',
                                    confirmButtonColor: '#028284',
                                });
                            } else {
                                Swal.fire({
                                    title: 'Gagal!',
                                    text: res.message ?? 'Terjadi kesalahan',
                                    icon: 'error',
                                    confirmButtonColor: '#ef4444',
                                });
                            }
                        },
                        error: function() {
                            $btn.prop('disabled', false).html(
                                '<i class="fas fa-check me-1"></i> Simpan');
                            Swal.fire({
                                title: 'Error!',
                                text: 'Terjadi kesalahan saat menyimpan',
                                icon: 'error',
                                confirmButtonColor: '#ef4444',
                            });
                        }
                    });
                });
            });

            $('#btnDeactivateManual').on('click', function() {
                const id = $('#section-manual').data('manual-id');

                Swal.fire({
                    title: 'Nonaktifkan data manual?',
                    text: 'Data manual akan dinonaktifkan.',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#ef4444',
                    cancelButtonColor: '#6b7280',
                    confirmButtonText: 'Ya, nonaktifkan',
                    cancelButtonText: 'Batal'
                }).then(result => {
                    if (!result.isConfirmed) return;

                    $.ajax({
                        url: URL_BATCH_MANUAL,
                        type: 'POST',
                        data: {
                            _token: CSRF,
                            updates: JSON.stringify([{
                                id: id,
                                is_manual: 1,
                                new_qty: 0,
                                delete: 1,
                            }])
                        },
                        headers: {
                            'X-CSRF-TOKEN': CSRF,
                            'X-Requested-With': 'XMLHttpRequest',
                            'Content-Type': 'application/x-www-form-urlencoded'
                        },
                        success: function(res) {
                            if (res.success) {
                                $('#section-manual').addClass('d-none');
                                Swal.fire({
                                    title: 'Berhasil!',
                                    text: 'Data manual dinonaktifkan',
                                    icon: 'success',
                                    confirmButtonColor: '#028284'
                                });
                            }
                        },
                        error: function() {
                            Swal.fire('Error!', 'Terjadi kesalahan', 'error');
                        }
                    });
                });
            });

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

                const oldModal = bootstrap.Modal.getInstance(document.getElementById('modalKodeAsset'));
                if (oldModal) oldModal.dispose();

                resetModal();
                $('#modal-subtitle').text(value + ' — ' + nama);
                new bootstrap.Modal(document.getElementById('modalKodeAsset')).show();

                $.ajax({
                    url: URL_DETAIL,
                    method: 'GET',
                    data: {
                        value,
                        nama_barang: nama
                    },
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    },
                    success: function(res) {
                        $('#modal-loading').addClass('d-none');
                        $('#formEditAssets').removeClass('d-none');
                        window._listValue = res.list_value ?? [];
                        renderTableItems(res.table_items ?? [], res.manual_header ?? null);
                        syncSaveBtn();
                    },
                    error: function(xhr) {
                        $('#modal-loading').addClass('d-none');
                        $('#modal-error').removeClass('d-none');
                    }
                });
            });
            

            $(document).on('click', '.btn-row-save-manual', function() {
                const $tr = $(this).closest('tr');
                const $btn = $(this);
                const newQty = parseInt($tr.find('.input-qty').val());

                const $input = $tr.find('.input-qty');
                const $errSpan = $tr.find('.input-error-msg');

                $input.removeClass('is-invalid');
                $errSpan.addClass('d-none').text('');

                if (isNaN(newQty) || newQty < 0) {
                    $input.addClass('is-invalid');
                    $errSpan.text('Qty tidak valid').removeClass('d-none');
                    return;
                }

                $tr.find('.cell-qty').html(`
                    <span class="badge bg-info px-2">${newQty}</span>
                    <span class="dirty-badge" title="Belum disimpan ke DB"></span>
                `);

                $tr.attr('data-new-qty', newQty);

                $btn.removeClass('btn-act-save btn-row-save-manual')
                    .addClass('btn-act-edit btn-row-edit-manual mb-0')
                    .attr('title', 'Edit Qty')
                    .html('<i class="fas fa-pen"></i>');

                $tr.removeClass('row-editing').addClass('row-dirty');
                $tr.find('.btn-row-delete').removeClass('disabled-btn');
                syncSaveBtn();
            });

            $(document).on('click', '.btnSelectAsset', function() {
                if (!activeAssetRow) return;

                const code = $(this).data('code');
                const merk = $(this).data('merk');
                const user = $(this).data('user');

                activeAssetRow.find('.input-code').val(code);
                activeAssetRow.find('.cell-merk').html(`${esc(merk || '-')}`);
                activeAssetRow.find('.cell-user').html(`${esc(user || '-')}`);

                activeAssetRow
                    .attr('data-current-merk', merk)
                    .attr('data-current-user', user);

                bootstrap.Modal.getInstance(document.getElementById('barangModal')).hide();
                activeAssetRow = null;
            });
            let activeAssetRow = null;

            $(document).on('click', '.btnOpenAssetModal', function() {
                const $tr = $(this).closest('tr');
                activeAssetRow = $tr;

                const value = $(this).data('value');
                const nama = $(this).data('nama');

                $('#barangTable tbody').html(
                    '<tr><td colspan="4" class="text-center py-3"><div class="spinner-border spinner-border-sm text-teal"></div> Memuat...</td></tr>'
                );

                const oldModal = bootstrap.Modal.getInstance(document.getElementById('barangModal'));
                if (oldModal) oldModal.dispose();
                new bootstrap.Modal(document.getElementById('barangModal')).show();

                $.ajax({
                    url: '{{ url('mst-stok-peminjaman/master-data') }}',
                    method: 'GET',
                    data: {
                        value,
                        nama_barang: nama
                    },
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    },
                    success: function(res) {
                        const items = res.items ?? [];
                        const existingCodes = res.existing_codes ?? [];

                        const ownCode = (activeAssetRow?.data('current-code') ??
                            activeAssetRow?.data('original-code') ?? '').toUpperCase();

                        if (!items.length) {
                            $('#barangTable tbody').html(
                                '<tr><td colspan="4" class="text-center text-muted py-3">Tidak ada data</td></tr>'
                            );
                            return;
                        }

                        let html = '';
                        items.forEach(item => {
                            const upper = (item.kode_asset || '').toUpperCase();
                            const sudahDipakai = existingCodes
                                .map(c => (c || '').toUpperCase())
                                .filter(c => c !== ownCode)
                                .includes(upper);

                            html += `<tr>
                                <td>
                                    <button type="button"
                                        class="btn bg-primary text-light fw-bold btnSelectAsset mb-0 ${sudahDipakai ? 'disabled' : ''}"
                                        ${sudahDipakai ? 'disabled title="Sudah dipakai di stok"' : ''}
                                        data-code="${esc(item.kode_asset || '')}"
                                        data-merk="${esc(item.merk || '')}"
                                        data-user="${esc(item.user || '')}">
                                        Select
                                    </button>
                                </td>
                                <td>
                                    ${esc(item.kode_asset || '-')}
                                    ${sudahDipakai ? '<span class="badge bg-secondary ms-1">Dipakai</span>' : ''}
                                </td>
                                <td>${esc(item.merk || '-')}</td>
                                <td>${esc(item.user || '-')}</td>
                            </tr>`;
                        });

                        $('#barangTable tbody').html(html);

                        if ($.fn.DataTable.isDataTable('#barangTable')) $('#barangTable')
                            .DataTable().destroy();
                        $('#barangTable').DataTable({
                            stateSave: false,
                            order: [],
                            paging: true,
                            pageLength: 10,
                            columnDefs: [{
                                orderable: false,
                                targets: [0]
                            }],
                            language: {
                                search: "Cari :",
                                emptyTable: "Tidak ada data",
                                zeroRecords: "Tidak ditemukan",
                                info: "Menampilkan _START_-_END_ dari _TOTAL_",
                                paginate: {
                                    next: "›",
                                    previous: "‹"
                                }
                            }
                        });
                    },
                    error: function() {
                        $('#barangTable tbody').html(
                            '<tr><td colspan="4" class="text-center text-danger py-3">Gagal memuat data</td></tr>'
                        );
                    }
                });
            });

            function validateCode($tr, newCode) {
                const $input = $tr.find('.input-code');
                const $errSpan = $tr.find('.input-error-msg');

                const ownCode = (($tr.data('current-code') ?? $tr.data('original-code')) || '').toUpperCase();
                const upper = newCode.toUpperCase();

                $input.removeClass('is-invalid');
                $errSpan.addClass('d-none').text('');

                if (!newCode.trim()) {
                    $input.addClass('is-invalid');
                    $errSpan.text('Kode Asset tidak boleh kosong').removeClass('d-none');
                    return false;
                }


                const dupInTable = window._codesInTable.some(c => c === upper && c !== ownCode);
                if (dupInTable) {
                    $input.addClass('is-invalid');
                    $errSpan.text('Kode Asset sudah dipakai di baris stok lain').removeClass('d-none');
                    return false;
                }

                return true;
            }


            $(document).on('click', '.btn-row-save', function() {
                const $tr = $(this).closest('tr');
                const $btn = $(this);

                const newCode = $tr.find('.input-code').val().trim();
                const newMerk = $tr.attr('data-current-merk') ?? $tr.data('original-merk') ?? '';
                const newUser = $tr.attr('data-current-user') ?? $tr.data('original-user') ?? '';

                if (!validateCode($tr, newCode)) return;

                const ownCode = (($tr.data('current-code') ?? $tr.data('original-code')) || '')
                .toUpperCase();
                const idx = window._codesInTable.indexOf(ownCode);
                if (idx !== -1) window._codesInTable[idx] = newCode.toUpperCase();
                else window._codesInTable.push(newCode.toUpperCase());

                $tr.find('.cell-code').html(`${esc(newCode || '-')} <span class="dirty-badge"></span>`);
                $tr.find('.cell-merk').html(`${esc(newMerk || '-')} <span class="dirty-badge"></span>`);
                $tr.find('.cell-user').html(`${esc(newUser || '-')} <span class="dirty-badge"></span>`);

                $tr.attr('data-current-code', newCode)
                    .attr('data-current-merk', newMerk)
                    .attr('data-current-user', newUser);

                $tr.attr('data-new-code', newCode)
                    .attr('data-new-merk', newMerk)
                    .attr('data-new-user', newUser);

                $btn.removeClass('btn-act-save btn-row-save')
                    .addClass('btn-act-edit btn-row-edit')
                    .attr('title', 'Edit')
                    .html('<i class="fas fa-pen"></i>');

                $tr.removeClass('row-editing').addClass('row-dirty');
                $tr.find('.btn-row-delete').removeClass('disabled-btn');
                syncSaveBtn();
            });

function cekKonflikAsset(kodeAsset, namaBarang, callback) {
    const payload = {};

    if (kodeAsset) {
        payload.kode_assets = [kodeAsset];
    } else {
        payload.nama_barangs = [namaBarang];
    }

    $.ajax({
        url: '{{ url('mst-stok-peminjaman/get-booking-konflik') }}',
        method: 'GET',
        data: payload,
        headers: { 'X-Requested-With': 'XMLHttpRequest' },
        success: function(res) {
            if (res.error) {
                callback(false, null); 
                return;
            }
            const konflik = Array.isArray(res) ? res : [];
            callback(true, konflik);
        },
        error: function() {
            callback(false, null);
        }
    });
}

function renderKonflikHtml(konflikList) {
    if (!konflikList.length) return '';

    let rows = konflikList.map(k => `
        <tr>
            <td>${esc(k.kode_asset || '(manual)')}</td>
            <td>${esc(k.nama_barang || '-')}</td>
            <td>${formatTanggal(k.tanggal_pinjam)}</td>
            <td>${formatTanggal(k.tanggal_kembali)}</td>
        </tr>
    `).join('');

    return `
        <div class="text-start" style="font-size:.85rem;">
            <p class="mb-2 text-muted">Asset ini memiliki booking aktif yang sedang berjalan atau akan datang:</p>
            <table class="table table-sm table-bordered mb-2">
                <thead class="table-light">
                    <tr>
                        <th>Kode Asset</th>
                        <th>Nama Barang</th>
                        <th>Tgl Pinjam</th>
                        <th>Tgl Kembali</th>
                    </tr>
                </thead>
                <tbody>${rows}</tbody>
            </table>
            <small class="text-danger">Selesaikan peminjaman terlebih dahulu sebelum melakukan perubahan.</small>
        </div>
    `;
}
function formatTanggal(str) {
    if (!str) return '-';
    const d = new Date(str);
    return d.toLocaleDateString('id-ID', { day: '2-digit', month: 'long', year: 'numeric' });
}

$(document).on('click', '.btn-row-edit', function() {
    const $btn = $(this);
    const $tr = $btn.closest('tr');

    if ($btn.hasClass('disabled-btn') || $tr.hasClass('row-deleted')) return;

    const kodeAsset = ($tr.data('current-code') || $tr.data('original-code') || '').trim();
    const namaBarang = ($tr.data('original-nama') || '').trim();

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

    cekKonflikAsset(kodeAsset, namaBarang, function(ok, konflikList) {
        $btn.prop('disabled', false).html('<i class="fas fa-pen"></i>');

        if (!ok) {
            doEditRow($tr, $btn);
            return;
        }

        if (konflikList.length > 0) {
            Swal.fire({
                title: 'Tidak Bisa Diedit',
                html: renderKonflikHtml(konflikList),
                icon: 'error',
                confirmButtonColor: '#ef4444',
                confirmButtonText: '<i class="fas fa-times me-1"></i> Tutup',
                width: '650px',
            });
            return;  
        }

        doEditRow($tr, $btn);
    });
});

function doEditRow($tr, $btn) {
    $tr.addClass('row-editing');

    const code  = $tr.attr('data-current-code') || $tr.data('original-code') || '';
    const value = $tr.data('original-value') || '';
    const nama  = $tr.data('original-nama') || '';

    $tr.find('.cell-code').html(`
        <div>
            <div class="input-group input-group-sm">
                <input type="text" class="form-control form-control-sm input-code"
                    value="${esc(code)}" style="min-width:100px;" readonly>
                <span class="input-group-text bg-primary text-light btnOpenAssetModal"
                    style="cursor:pointer;"
                    data-value="${esc(value)}"
                    data-nama="${esc(nama)}">
                    <i class="fas fa-search"></i>
                </span>
            </div>
            <span class="input-error-msg d-none"></span>
        </div>
    `);

    $btn.removeClass('btn-act-edit btn-row-edit')
        .addClass('btn-act-save btn-row-save')
        .attr('title', 'Konfirmasi edit baris')
        .html('<i class="fas fa-check"></i>');

    $tr.find('.btn-row-delete').addClass('disabled-btn');
    syncSaveBtn();
}

$(document).on('click', '.btn-row-delete', function() {
    const $btn = $(this);
    const $tr  = $btn.closest('tr');

    if ($btn.hasClass('disabled-btn')) return;

    if ($tr.hasClass('row-deleted')) {
        $tr.removeClass('row-deleted').removeAttr('data-delete');
        $btn.removeClass('marked-delete').attr('title', 'Hapus');
        $tr.find('.btn-row-edit').removeClass('disabled-btn');
        syncSaveBtn();
        return;
    }

    const kodeAsset  = ($tr.attr('data-current-code') || $tr.data('original-code') || '').trim();
    const namaBarang = ($tr.data('original-nama') || '').trim();

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

    cekKonflikAsset(kodeAsset, namaBarang, function(ok, konflikList) {
        $btn.prop('disabled', false).html('<i class="fas fa-trash"></i>');

        if (ok && konflikList.length > 0) {
            Swal.fire({
                title: 'Tidak Bisa Dihapus',
                html: renderKonflikHtml(konflikList),
                icon: 'error',
                confirmButtonColor: '#ef4444',
                confirmButtonText: '<i class="fas fa-times me-1"></i> Tutup',
                width: '650px',
            });
            return;
        }

        Swal.fire({
            title: 'Hapus data ini?',
            text: 'Data akan dihapus dari stok peminjaman. Belum tersimpan sampai klik Simpan Perubahan.',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#ef4444',
            cancelButtonColor: '#6b7280',
            confirmButtonText: 'Ya, hapus',
            cancelButtonText: 'Batal'
        }).then(result => {
            if (result.isConfirmed) {
                $tr.addClass('row-deleted').attr('data-delete', '1');
                $btn.addClass('marked-delete').attr('title', 'Batalkan hapus');
                $tr.find('.btn-row-edit').addClass('disabled-btn');
                syncSaveBtn();
            }
        });
    });
});


            $(document).on('click', '.btn-select-value-picker', function(e) {
                e.preventDefault();
                e.stopPropagation();
                activeEditRow = $(this).closest('tr');

                renderPickerRows(window._listValue);
                $('#formAddEnumWrap').addClass('d-none');
                $('#newEnumValue, #newEnumName').val('').removeClass('is-invalid');
                $('#addEnumMsg').addClass('d-none').html('');

                const oldPicker = bootstrap.Modal.getInstance(document.getElementById('valuePickerModal'));
                if (oldPicker) oldPicker.dispose();
                new bootstrap.Modal(document.getElementById('valuePickerModal')).show();
            });

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

                activeEditRow.find('.input-value').val(value);
                const $namaInput = activeEditRow.find('.input-nama');
                if (!$namaInput.val().trim() || $namaInput.val().trim() === '-') {
                    $namaInput.val(nama);
                }

                bootstrap.Modal.getInstance(document.getElementById('valuePickerModal')).hide();
                activeEditRow = null;
            });


            $('#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');
                        $('#newEnumValue, #newEnumName').val('');
                        $('#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`
                            );


                        $('#pickerLoading').removeClass('d-none');
                        $('#valuePickerList').html('');
                        $.ajax({
                            url: URL_ENUM_LST,
                            method: 'GET',
                            headers: {
                                'X-Requested-With': 'XMLHttpRequest'
                            },
                            success: function(res) {
                                $('#pickerLoading').addClass('d-none');
                                window._listValue = res.list_value ?? [];
                                renderPickerRows(window._listValue);
                                setTimeout(() => $('#addEnumMsg').addClass('d-none')
                                    .html(''), 4000);
                            },
                            error: function() {
                                $('#pickerLoading').addClass('d-none');
                                window._listValue.push({
                                    value,
                                    nama_barang: name
                                });
                                renderPickerRows(window._listValue);
                            }
                        });
                    },
                    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)}`);
                    }
                });
            });


            $('#btnSaveAll').on('click', function() {

                if ($('tr.row-editing').length > 0) {
                    Swal.fire('Perhatian',
                        'Ada baris yang belum dikonfirmasi. Klik ✓ pada baris tersebut terlebih dahulu.',
                        'warning');
                    return;
                }

                const updates = [];
                const updateDetails = [];

                $('tr[data-type="table"]').each(function() {
                    const $tr = $(this);
                    const isDirty = $tr.hasClass('row-dirty');
                    const isDel = $tr.attr('data-delete') === '1';
                    if (!isDirty && !isDel) return;

                    const origValue = $tr.data('original-value');
                    const origNama = $tr.data('original-nama');
                    const origCode = $tr.data('original-code');
                    const newCode = $tr.attr('data-new-code') || origCode;

                    let detail =
                        `<strong>${esc(origValue || '-')}</strong> — ${esc(origNama || '-')}`;
                    detail +=
                        ` <span class="badge bg-${isDel ? 'danger' : 'warning'} ms-2">${isDel ? 'DELETE' : 'EDIT'}</span><br>`;

                    if (!isDel) {
                        if (newCode !== origCode) detail +=
                            `&nbsp;&nbsp;<small>Kode: <code>${esc(origCode)}</code> → <code>${esc(newCode)}</code></small><br>`;
                    } else {
                        detail +=
                            `&nbsp;&nbsp;<small class="text-danger"><i class="fas fa-triangle-exclamation me-1"></i>Data akan dihapus</small><br>`;
                    }

                    updateDetails.push(detail);
                    updates.push({
                        id: $tr.data('id'),
                        is_manual: 0,
                        new_code: newCode,
                        delete: isDel ? 1 : 0,
                    });
                });

                if (!updates.length) {
                    Swal.fire('Info', 'Tidak ada perubahan yang perlu disimpan', 'info');
                    return;
                }

                let htmlList =
                    '<div class="text-start small" style="max-height:350px; overflow-y:auto; border:1px solid #dee2e6; padding:10px; border-radius:.375rem; background:#f9fafb;">';
                htmlList +=
                    '<strong class="d-block mb-2"><i class="fas fa-list me-1"></i> Perubahan yang akan disimpan:</strong>';
                htmlList += updateDetails.join('');
                htmlList += '</div>';

                Swal.fire({
                    title: 'Konfirmasi Penyimpanan',
                    html: htmlList,
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#028284',
                    cancelButtonColor: '#6b7280',
                    confirmButtonText: '<i class="fas fa-check me-1"></i> Ya, Simpan Semua',
                    cancelButtonText: '<i class="fas fa-times me-1"></i> Batal',
                    allowOutsideClick: false,
                    allowEscapeKey: false
                }).then((result) => {
                    if (!result.isConfirmed) return;

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

                    $.ajax({
                        url: URL_BATCH,
                        type: 'POST',
                        data: {
                            updates: JSON.stringify(updates),
                            _token: CSRF
                        },
                        headers: {
                            'X-CSRF-TOKEN': CSRF,
                            'X-Requested-With': 'XMLHttpRequest',
                            'Content-Type': 'application/x-www-form-urlencoded'
                        },
                        success: function(res) {
                            $btn.prop('disabled', false).html(
                                '<i class="fas fa-save me-1"></i> Simpan Perubahan');

                            if (res.errors && res.errors.length) {
                                let errHtml =
                                    '<div class="text-start"><strong class="d-block mb-2">Kesalahan pada beberapa baris:</strong><ul class="mb-0 small">';
                                res.errors.forEach(e => {
                                    errHtml += `<li>${esc(e)}</li>`;
                                });
                                errHtml += '</ul></div>';
                                Swal.fire({
                                    title: 'Sebagian gagal disimpan',
                                    html: errHtml,
                                    icon: 'warning',
                                    confirmButtonColor: '#028284'
                                });
                                return;
                            }

                            Swal.fire({
                                    title: 'Sukses!',
                                    text: `${updates.length} perubahan berhasil disimpan`,
                                    icon: 'success',
                                    confirmButtonColor: '#028284'
                                })
                                .then(() => location.reload());
                        },
                        error: function(xhr) {
                            $btn.prop('disabled', false).html(
                                '<i class="fas fa-save me-1"></i> Simpan Perubahan');
                            const msg = xhr.responseJSON?.message ||
                                'Terjadi kesalahan saat menyimpan';
                            Swal.fire('Error!', esc(msg), 'error');
                        }
                    });
                });
            });

        });
    </script>
@endpush