@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@section('content')
    <style>
        .qty-input::-webkit-inner-spin-button,
        .qty-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
        .qty-input { -moz-appearance: textfield; }
    </style>
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="card shadow-lg mx-4" style="margin-bottom: 30px;">
        <div class="card-body p-3">
            <div class="row gx-4">
                <div class="col-lg">
                    <div class="nav-wrapper">
                        <button class="btn btn-secondary mb-0" onclick="window.location='{{ URL::to($url_menu) }}'"><i
                                class="fas fa-chevron-left me-1"></i>Kembali</button>
                        <button type="submit" id="saveButton" class="btn btn-primary mb-0" onclick="saveData(event)"><i
                                class="fas fa-download me-1"></i>Simpan</button>
                        <!-- <button class="btn btn-primary" onclick="event.preventDefault(); document.getElementById('master-form').submit();">Simpan</button> -->
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid py-2">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header py-2" style="margin-top: 20px;">
                        <h5 class="mb-0">Header {{ $title_menu }}</h5>
                    </div>
                    <div class="card-body py-3">
                        <form id="my-form" autocomplete="off">
                            @csrf
                            <!-- ROW 1 -->
                            <div class="row mb-2">
                                <div class="col-md-4">
                                    <div class="d-flex align-items-center">
                                        <label for="id" class="form-label me-2" style="min-width:100px;">ID</label>
                                        <input type="text" class="form-control" id="id" name="id"
                                            placeholder="--" readonly>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="d-flex align-items-center">
                                        <label for="petugas" class="form-label me-2"
                                            style="min-width:100px;">Petugas</label>
                                        <select id="petugas" name="petugas" class="form-control">
                                            <option value=""></option>
                                            @foreach ($petugas as $p)
                                                <option value="{{ $p->value }}"
                                                    {{ old('petugas', $model->petugas ?? '') == $p->value ? 'selected' : '' }}>
                                                    {{ $p->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="d-flex align-items-center">
                                        <label for="shift" class="form-label me-2" style="min-width:100px;">Shift</label>
                                        <select id="shift" name="shift" class="form-control">
                                            <option value=""></option>
                                            @foreach ($shift as $p)
                                                <option value="{{ $p->value }}"
                                                    {{ old('shift', $model->shift ?? '') == $p->value ? 'selected' : '' }}>
                                                    {{ $p->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <!-- ROW 2 -->
                            <div class="row mb-2">
                                <div class="col-md-4">
                                    <div class="d-flex align-items-center">
                                        <label for="tanggal" class="form-label me-2"
                                            style="min-width:100px;">Tanggal</label>
                                        <input type="date" class="form-control" id="tanggal" name="tanggal"
                                            value="{{ date('Y-m-d') }}">
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <div class="d-flex align-items-center">
                                        <label for="jenis_spin" class="form-label me-2"
                                            style="min-width:100px;">Jenis</label>
                                        <select id="jenis_spin" name="jenis_spin" class="form-control">
                                            <option value=""></option>
                                            @foreach ($jenis as $p)
                                                <option value="{{ $p->value }}"
                                                    {{ old('jenis', $model->jenis ?? '') == $p->value ? 'selected' : '' }}>
                                                    {{ $p->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="d-flex align-items-center">
                                        <label for="group" class="form-label me-2" style="min-width:100px;">Group</label>
                                        <select id="group" name="group" class="form-control">
                                            <option value=""></option>
                                            @foreach ($group as $p)
                                                <option value="{{ $p->value }}"
                                                    {{ old('group', $model->group ?? '') == $p->value ? 'selected' : '' }}>
                                                    {{ $p->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="row mb-2">
                                <div class="col-md-4">
                                    <div class="d-flex align-items-center">
                                        <label for="no_lpb" class="form-label me-2"
                                            style="min-width:100px;">No. LPB</label>
                                        <input type="text" class="form-control" id="no_lpb" name="no_lpb"
                                            placeholder="Masukkan No. LPB" value="{{ old('no_lpb') }}" required>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="d-flex align-items-center">
                                        <label for="supplier" class="form-label me-2"
                                            style="min-width:100px;">Supplier</label>
                                        <select id="supplier" name="supplier" class="form-control custom-select"
                                            style="width: 100%" required>
                                            <option value="">-- Pilih Supplier --</option>
                                            @foreach ($supplier as $s)
                                                <option value="{{ $s->id }}">{{ $s->nama }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid py-2">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header py-2"><!-- header lebih rapat -->
                        <h5 class="mb-0">Detail {{ $title_menu }}</h5>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table id="tgrpo-tbl-detail" class="table table-bordered table-striped">
                                <thead style="background-color: #daecff;">
                                    <tr>
                                        <th style="text-align:center; border-color: #daecff;">No</th>
                                        <th style="text-align:center; border-color: #daecff;">Act</th>
                                        <th style="text-align:center; border-color: #daecff;">Nama Barang</th>
                                        <th style="text-align:center; border-color: #daecff;">Kode Lama</th>
                                        <th style="text-align:center; border-color: #daecff;">Kode Baru</th>
                                        <th style="text-align:center; border-color: #daecff;">QTY</th>
                                        <th style="text-align:center; border-color: #daecff;">Satuan</th>
                                        <th style="text-align:center; border-color: #daecff;">Catatan</th>
                                    </tr>
                                </thead>
                                <tbody id="tbody-grpo">
                                    {{-- Row tombol tambah --}}
                                    <tr id="add-row">
                                        <td colspan="8" class="text-left">
                                            <span type="button" class="btn btn-primary btn-sm" id="btnAddRow">
                                                <i class="fas fa-plus"></i> Tambah
                                            </span>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade bd-example-modal-lg" id="supplierModal" tabindex="-1" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">List Supplier</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div id="tableModalWrapper" class="table-responsive">
                        <h5 class="font-weight-bolder"></h5>
                        <table id="tbl-suppliers" class="table table-bordered table-striped">
                            <thead style="background-color: #daecff;">
                                <tr>
                                    <th style="border-color: #daecff;">Action</th>
                                    <th style="border-color: #daecff;">Name</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($supplier as $s)
                                    <tr data-id="{{ $s->id }}" data-name="{{ e($s->nama) }}">
                                        <td>
                                            <button type="button"
                                                class="btn btn-primary btn-sm choose-supplier mb-0">Pilih</button>
                                        </td>
                                        <td>{{ $s->nama }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade bd-example-modal-lg" id="barangModal" tabindex="-1" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">List Nama Barang</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div id="tableModalWrapper" class="table-responsive">
                        <h5 class="font-weight-bolder"></h5>
                        <table id="tbl-barang" class="table table-bordered table-striped">
                            <thead style="background-color: #daecff;">
                                <tr>
                                    <th style="border-color: #daecff;">Action</th>
                                    <th style="border-color: #daecff;">Kode Baru</th>
                                    <th style="border-color: #daecff;">Kode Lama</th>
                                    <th style="border-color: #daecff;">Name</th>
                                    <th style="border-color: #daecff;">Stok</th>
                                    <th style="border-color: #daecff;">Satuan</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($barang as $s)
                                    <tr data-id="{{ $s->id }}" data-kode-baru="{{ $s->kode_baru }}" data-kode-lama="{{ $s->kode_lama }}"
                                        data-name="{{ e($s->nama) }}" data-satuan="{{ e($s->satuan_nama) }}">
                                        <td>
                                            <button type="button"
                                                class="btn btn-primary btn-sm choose-barang mb-0">Pilih</button>
                                        </td>
                                        <td>{{ $s->kode_baru }}</td>
                                        <td>{{ $s->kode_lama }}</td>
                                        <td>{{ $s->nama }}</td>
                                        <td>{{ (float) $s->stok }}</td>
                                        <td>{{ $s->satuan_nama }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    @if ($jsmenu == '1')
        @if (view()->exists("js.{$dmenu}"))
            @push('addjs')
                @include('js.' . $dmenu);
    <script>
        document.addEventListener('wheel', function(event) {
            if (event.target.matches('.qty-input')) event.preventDefault();
        }, { passive: false });
    </script>
@endpush
        @else
            @push('addjs')
            @endif
        @endif
    @endsection
    @push('js')
        <style>
            #supplier_name,
            #btn-find-header-supplier {
                height: 38px;
            }

            #btn-find-header-supplier {
                padding-top: 0;
                padding-bottom: 0;
            }

            .input-group .form-control {
                border-right: 0;
                border-top-right-radius: 0;
                border-bottom-right-radius: 0;
            }

            .input-group .btn {
                border-top-left-radius: 0;
                border-bottom-left-radius: 0;
            }

            .input-group.input-group-sm .form-control {
                height: calc(1.5em + .5rem + 2px);
            }

            .input-group .form-control:focus {
                box-shadow: none;
            }

            .btn-find-supplier i {
                pointer-events: none;
            }
        </style>
        <script>
            $(document).ready(function() {
                const dt = $('#tbl-suppliers').DataTable({
                    columnDefs: [{
                        targets: 0,
                        orderable: false,
                        searchable: false
                    }],
                    order: [
                        [1, 'asc']
                    ],
                    responsive: true,
                    language: {
                        sEmptyTable: "Tidak ada data yang tersedia pada tabel ini",
                        sProcessing: "Sedang memproses...",
                        sLengthMenu: "Tampilkan _MENU_ Data",
                        sZeroRecords: "Tidak ditemukan data yang sesuai",
                        sInfo: "Menampilkan _START_ sampai _END_ dari _TOTAL_ data",
                        sInfoEmpty: "Menampilkan 0 sampai 0 dari 0 data",
                        sInfoFiltered: "(disaring dari _MAX_ total data)",
                        sSearch: "Cari:",
                        oPaginate: {
                            sFirst: "Pertama",
                            sPrevious: "Sebelumnya",
                            sNext: "Selanjutnya",
                            sLast: "Terakhir"
                        },
                        oAria: {
                            sSortAscending: ": aktifkan untuk mengurutkan kolom secara ascending",
                            sSortDescending: ": aktifkan untuk mengurutkan kolom secara descending"
                        }
                    }
                });

                $('#supplierModal').on('shown.bs.modal', function() {
                    dt.columns.adjust();
                });

                $('#supplierModal').on('hide.bs.modal', function() {
                    $(this).find(':focus').blur();
                });
            });

            $(document).ready(function() {
                const dtBrg = $('#tbl-barang').DataTable({
                    columnDefs: [{
                        targets: 0,
                        orderable: false,
                        searchable: false
                    }],
                    order: [
                        [3, 'asc']
                    ],
                    responsive: true,
                    language: {
                        sEmptyTable: "Tidak ada data yang tersedia pada tabel ini",
                        sProcessing: "Sedang memproses...",
                        sLengthMenu: "Tampilkan _MENU_ Data",
                        sZeroRecords: "Tidak ditemukan data yang sesuai",
                        sInfo: "Menampilkan _START_ sampai _END_ dari _TOTAL_ data",
                        sInfoEmpty: "Menampilkan 0 sampai 0 dari 0 data",
                        sInfoFiltered: "(disaring dari _MAX_ total data)",
                        sSearch: "Cari:",
                        oPaginate: {
                            sFirst: "Pertama",
                            sPrevious: "Sebelumnya",
                            sNext: "Selanjutnya",
                            sLast: "Terakhir"
                        },
                        oAria: {
                            sSortAscending: ": aktifkan untuk mengurutkan kolom secara ascending",
                            sSortDescending: ": aktifkan untuk mengurutkan kolom secara descending"
                        }
                    }
                });

                dtBrg.on('draw', function() {
                    highlightSelectedBarang();
                });

                $('#barangModal').on('shown.bs.modal', function() {
                    dtBrg.columns.adjust();
                    highlightSelectedBarang();
                });

                $('#barangModal').on('hide.bs.modal', function() {
                    $(this).find(':focus').blur();
                });
            });

            // Fungsi untuk menandai barang yang sudah dipilih
            function highlightSelectedBarang() {
                // Reset semua baris dulu
                $('#tbl-barang tbody tr').removeClass('table-success').find('.choose-barang').removeClass('btn-success')
                    .addClass('btn-primary').text('Pilih').css('cursor', 'pointer');

                // Ambil semua id_barang dan kode_baru yang sudah dipilih di detail
                const selectedIds = new Set();
                const selectedCodesNoId = new Set();
                const allSelectedCodes = new Set();

                document.querySelectorAll('#tbody-grpo tr.form-row').forEach(row => {
                    const idVal = String(row.querySelector('[name="tmp_id_barang[]"]')?.value || '').trim();
                    const rawKode = String(row.querySelector('[name="tmp_nama_barang_id[]"]')?.value || '').trim();
                    const kodeVal = rawKode.includes('|') ? rawKode.split('|')[0] : rawKode;

                    if (idVal) {
                        selectedIds.add(idVal);
                    } else if (kodeVal) {
                        selectedCodesNoId.add(kodeVal);
                    }

                    if (kodeVal) {
                        allSelectedCodes.add(kodeVal);
                    }
                });

                // Tandai baris yang sudah dipilih
                $('#tbl-barang tbody tr').each(function() {
                    const idBarang = String($(this).data('id') || '').trim();
                    const kodeBaru = String($(this).data('kode-baru') || '').trim();

                    let isSelected = false;
                    if (idBarang) {
                        isSelected = selectedIds.has(idBarang) || (kodeBaru && selectedCodesNoId.has(kodeBaru));
                    } else if (kodeBaru) {
                        isSelected = allSelectedCodes.has(kodeBaru);
                    }

                    if (isSelected) {
                        $(this).addClass('table-success');
                        $(this).find('.choose-barang').removeClass('btn-primary').addClass('btn-success').text(
                            'Terpilih').css('cursor', 'not-allowed');
                    }
                });
            }
        </script>
        <script>
            let rowIdx = 0;
            let activeRow = null;

            document.addEventListener('DOMContentLoaded', () => {
                const tbody = document.getElementById('tbody-grpo');
                const btnAdd = document.getElementById('btnAddRow');

                btnAdd.addEventListener('click', () => {
                    rowIdx += 10;

                    const formRow =
                        '<tr class="form-row">' +
                        '  <td class="text-center" style="white-space:nowrap;">' +
                        '    <button type="button" class="btn btn-danger btn-sm btn-cancel"><i class="fas fa-times"></i></button>' +
                        '  </td>' +
                        '  <td class="text-center">' + rowIdx +
                        '<input type="hidden" name="tmp_urut[]" value="' + rowIdx + '"></td>' +
                        '  <td>' +
                        '    <div class="input-group input-group-sm">' +
                        '      <input name="tmp_nama_barang[]" class="form-control form-control-sm" placeholder="Pilih Barang…" readonly required>' +
                        '      <input type="hidden" name="tmp_id_barang[]">' +
                        '      <input type="hidden" name="tmp_nama_barang_id[]">' +
                        '      <input type="hidden" name="tmp_kode_lama[]">' +
                        '      <button type="button" class="btn btn-outline-primary btn-find-barang" title="Cari Barang">' +
                        '        <i class="fas fa-search"></i>' +
                        '      </button>' +
                        '    </div>' +
                        '  </td>' +
                        '  <td><input name="tmp_kode_lama_display[]" class="form-control form-control-sm" readonly></td>' +
                        '  <td><input name="tmp_kode_baru_display[]" class="form-control form-control-sm" readonly></td>' +
                        '  <td style="width:120px"><input type="number" step="1" min="0" name="tmp_qty[]" class="form-control form-control-sm qty-input" required><input type="hidden" name="tmp_stok[]" class="stok-hidden"></td>' +
                        '  <td style="width:140px"><input type="text" name="tmp_satuan[]" class="form-control form-control-sm" disabled></td>' +
                        '  <td><input name="tmp_catatan[]" class="form-control form-control-sm"></td>' +
                        '</tr>';

                    // Sisipkan sebelum tombol tambah
                    const addRow = document.getElementById('add-row');
                    addRow.insertAdjacentHTML('beforebegin', formRow);

                    // Attach event listener to new qty input
                    const newQtyInput = addRow.previousElementSibling.querySelector('.qty-input');
                    newQtyInput.addEventListener('input', () => validateQty(newQtyInput));
                });

                function renumber() {
                    let n = 10;
                    document.querySelectorAll('#tbody-grpo tr.form-row').forEach(r => {
                        const td = r.querySelector('td:nth-child(2)');
                        if (td) td.firstChild.nodeType === 3 ? (td.firstChild.nodeValue = n) : (td.textContent =
                            n);
                        const hid = r.querySelector('input[name="tmp_urut[]"]');
                        if (hid) hid.value = n;
                        n += 10;
                    });
                }

                tbody.addEventListener('click', (e) => {
                    const tr = e.target.closest('tr.form-row');
                    if (!tr) return;

                    if (e.target.closest('.btn-cancel')) {
                        tr.remove();
                        let num = 10;
                        tbody.querySelectorAll('tr.form-row').forEach(r => {
                            const noCell = r.querySelector('td:nth-child(2)');
                            if (noCell) noCell.textContent = num;
                            num += 10;
                        });
                        rowIdx = num - 10;
                        // Refresh highlight pada modal barang
                        highlightSelectedBarang();
                        return;
                    }

                    if (e.target.closest('.btn-find-barang')) {
                        activeRow = tr;
                        new bootstrap.Modal(document.getElementById('barangModal')).show();
                        return;
                    }
                });

                document.getElementById('tbl-barang').addEventListener('click', (e) => {
                    const btn = e.target.closest('.choose-barang');
                    if (!btn || !activeRow) return;

                    const row = btn.closest('tr');
                    const idBarang = row.dataset.id || '';
                    const kodeBaru = row.dataset.kodeBaru || '';
                    const kodeLama = row.dataset.kodeLama || '';
                    const name = row.dataset.name || '';
                    const satuan = row.dataset.satuan || '';

                    activeRow.querySelector('[name="tmp_nama_barang[]"]').value = name;
                    activeRow.querySelector('[name="tmp_id_barang[]"]').value = idBarang;
                    activeRow.querySelector('[name="tmp_nama_barang_id[]"]').value = kodeBaru;
                    activeRow.querySelector('[name="tmp_kode_lama[]"]').value = kodeLama;
                    activeRow.querySelector('[name="tmp_kode_baru_display[]"]').value = kodeBaru;
                    activeRow.querySelector('[name="tmp_kode_lama_display[]"]').value = kodeLama;
                    activeRow.querySelector('[name="tmp_satuan[]"]').value = satuan;

                    // Fetch stok
                    fetch("{{ URL::to($url_menu) }}/get-stok", {
                            method: "POST",
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': '{{ csrf_token() }}'
                            },
                            body: JSON.stringify({
                                kode_baru: kodeBaru,
                                kode_lama: kodeLama
                            })
                        })
                        .then(res => res.json())
                        .then(data => {
                            activeRow.querySelector('.stok-hidden').value = data.stok;
                            // Trigger validation on qty input
                            const qtyInput = activeRow.querySelector('.qty-input');
                            validateQty(qtyInput);
                        })
                        .catch(err => console.error('Error fetching stok:', err));

                    bootstrap.Modal.getInstance(document.getElementById('barangModal')).hide();
                    setTimeout(() => highlightSelectedBarang(), 100);
                });
            });

            function validateQty(qtyInput) {
                const row = qtyInput.closest('tr');
                const barangId = row.querySelector('[name="tmp_nama_barang_id[]"]').value;
                if (!barangId) return; // Jangan validasi jika belum pilih barang

                const stokHidden = row.querySelector('.stok-hidden');
                const stok = parseFloat(stokHidden.value) || 0;
                const qty = parseFloat(qtyInput.value) || 0;

                // Remove existing error message
                const existingError = row.querySelector('.qty-error');
                if (existingError) existingError.remove();

                // Reset background
                qtyInput.classList.remove('is-invalid');
            }
        </script>
        <script>
            function saveData(event) {
                event.preventDefault();

                const formData = new FormData();
                formData.append('_token', '{{ csrf_token() }}');

                const fields = ['tanggal', 'shift', 'group', 'petugas', 'jenis_spin', 'supplier', 'no_lpb'];

                const getVal = f => (document.querySelector(`[name="${f}"]`)?.value || '').trim();
                fields.forEach(f => formData.set(f, getVal(f)));
                formData.set('supplier', getVal('supplier'));
                formData.set('id_pembelian', getVal('id_pembelian'));
                formData.set('no_lpb', getVal('no_lpb'));

                const headerKurang = fields.some(f => !getVal(f));
                if (headerKurang) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Data header belum lengkap diisi',
                        text: 'Silakan lengkapi data header (termasuk No. LPB) terlebih dahulu.',
                        confirmButtonText: 'OK',
                    });
                    return;
                }

                const rows = document.querySelectorAll('#tbody-grpo tr.form-row');
                if (rows.length === 0) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Tidak Ada Data Detail!',
                        text: 'Silakan Tambahkan Minimal 1 Data Detail.',
                        confirmButtonText: 'OK',
                    });
                    return;
                }

                // Validasi setiap baris detail sebelum submit
                let validationError = '';
                rows.forEach((row, i) => {
                    const rowNum = i + 1;
                    const barangId = row.querySelector('[name="tmp_nama_barang_id[]"]')?.value || '';
                    const qty = row.querySelector('[name="tmp_qty[]"]')?.value || '';

                    if (!barangId) validationError += `Baris ${rowNum}: Barang harus dipilih\n`;
                    if (!qty || parseFloat(qty) <= 0) validationError += `Baris ${rowNum}: Qty harus lebih dari 0\n`;
                });

                if (validationError) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Data Detail Belum Sesuai!',
                        html: '<pre style="text-align:left; white-space:pre-wrap;">' + validationError + '</pre>',
                        confirmButtonText: 'OK',
                    });
                    return;
                }

                const headerLpbNo = getVal('no_lpb');
                rows.forEach((row, i) => {
                    // Pastikan urut memiliki nilai valid (fallback ke index * 10 jika kosong)
                    const urutValue = row.querySelector('[name="tmp_urut[]"]')?.value || '';
                    formData.append(`details[${i}][urut]`, urutValue || ((i + 1) * 10));
                    formData.append(`details[${i}][lpb_no]`, headerLpbNo);
                    formData.append(`details[${i}][id_barang]`, row.querySelector('[name="tmp_id_barang[]"]')?.value || '');
                    formData.append(`details[${i}][kode_baru]`, row.querySelector('[name="tmp_nama_barang_id[]"]')
                        ?.value || '');
                    formData.append(`details[${i}][kode_lama]`, row.querySelector('[name="tmp_kode_lama[]"]')
                        ?.value || '');
                    formData.append(`details[${i}][qty]`, row.querySelector('[name="tmp_qty[]"]')?.value || '');
                    formData.append(`details[${i}][satuan]`, row.querySelector('[name="tmp_satuan[]"]')?.value || '');
                    formData.append(`details[${i}][catatan]`, row.querySelector('[name="tmp_catatan[]"]')?.value || '');
                });

                fetch("{{ URL::to($url_menu) }}/store", {
                        method: "POST",
                        body: formData,
                    })
                    .then(async res => {
                        const text = await res.text();

                        try {
                            const data = JSON.parse(text);

                            if (data.success) {
                                Swal.fire({
                                    icon: 'success',
                                    title: 'Sukses',
                                    html: '<strong>Data Transaksi Berhasil Dibuat</strong><br><br>Kode Transaksi: <strong>' +
                                        (data.id_transaksi || '-') + '</strong>',
                                    showConfirmButton: true,
                                }).then((result) => {
                                    window.location.href = "{{ url($url_menu) }}";
                                });
                            } else {
                                Swal.fire({
                                    icon: 'warning',
                                    title: 'Gagal!',
                                    text: '⚠️ Gagal menyimpan data: ' + (data.message),
                                    confirmButtonText: 'OK'
                                });
                            }

                        } catch (err) {
                            console.warn("⚠️ Response bukan JSON, tampilkan isi response di console:");
                            console.log(text);

                            Swal.fire({
                                icon: 'error',
                                title: 'Kesalahan!',
                                html: '<p>Server mengirim respons yang tidak bisa dibaca.</p><pre>' + text +
                                    '</pre>',
                                confirmButtonText: 'Tutup'
                            });
                        }
                    })
                    .catch(err => {
                        console.error("❌ Error:", err);
                        Swal.fire({
                            icon: 'error',
                            title: 'Gagal konek ke server!',
                            text: 'Silakan cek koneksi internet atau server.',
                            confirmButtonText: 'OK'
                        });
                    });

            }
        </script>
    @endpush