@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 custom-select"
                                            style="width: 100%">
                                            <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>
                            @php
                                $tglPostSetting = DB::table('sys_enum')
                                    ->where('idenum', 'tglpost')
                                    ->where('isactive', '1')
                                    ->value('name');

                                $tglPostLimit = (int) ($tglPostSetting ?: 6);

                                $minTanggal = now()
                                    ->copy()
                                    ->subMonthNoOverflow()
                                    ->startOfMonth()
                                    ->addDays($tglPostLimit - 1)
                                    ->format('Y-m-d');

                                $minTanggalText = \Carbon\Carbon::parse($minTanggal)->format('d-m-Y');
                            @endphp
                            <!-- 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"
                                            min="{{ $minTanggal }}" 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="pengambil" class="form-label me-2"
                                            style="min-width:100px;">Pengambil</label>
                                        <select id="pengambil" name="pengambil" class="form-control custom-select"
                                            style="width: 100%">
                                            <option value=""></option>
                                            @foreach ($pengambil as $p)
                                                <option value="{{ $p->id }}"
                                                    {{ old('pengambil', $model->pengambil ?? '') == $p->id ? 'selected' : '' }}>
                                                    {{ $p->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;">Keperluan</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="10" class="text-left">
                                            <div class="d-flex gap-2">
                                                <button type="button" class="btn btn-primary btn-sm" id="btnAddRow">
                                                    <i class="fas fa-plus"></i> Tambah
                                                </button>
                                                <button type="button" class="btn btn-success btn-sm" id="scanBarcodeBtn"
                                                    data-bs-toggle="modal" data-bs-target="#scanBarcodeModal">
                                                    <i class="fas fa-barcode"></i> Scan Barcode
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </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>

    <div class="modal fade bd-example-modal-lg" id="keperluanModal" 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 Keperluan</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-keperluan" class="table table-bordered table-striped">
                            <thead style="background-color: #daecff;">
                                <tr>
                                    <th style="border-color: #daecff;">Action</th>
                                    <th style="border-color: #daecff;">Keperluan</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($keperluan as $s)
                                    <tr data-id="{{ $s->id }}" data-name="{{ e($s->deskripsi) }}">
                                        <td>
                                            <button type="button"
                                                class="btn btn-primary btn-sm choose-keperluan mb-0">Pilih</button>
                                        </td>
                                        <td>{{ $s->deskripsi }}</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>

    <!-- Modal Scan Barcode -->
    <div class="modal fade" id="scanBarcodeModal" tabindex="-1" aria-labelledby="scanBarcodeModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" style="max-width: 700px;">
            <div class="modal-content">
                <div class="modal-header bg-success text-white">
                    <h5 class="modal-title" id="scanBarcodeModalLabel">
                        <i class="fas fa-barcode me-2"></i>Scan Barcode
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="barcodeDisplay" class="form-label">Kode Baru / Scan Barcode</label>

                        {{-- Input yang tampil, hanya display --}}
                        <input type="text" class="form-control form-control-lg scan-display" id="barcodeDisplay"
                            placeholder="Scan kode baru..." readonly inputmode="none" tabindex="-1" autocomplete="off">

                        {{-- Input tersembunyi khusus menerima scanner --}}
                        <input type="text" id="barcodeScannerInput" autocomplete="off" inputmode="none"
                            style="position:absolute; left:-9999px; top:0; opacity:0; width:1px; height:1px;">

                        <small class="text-muted" id="barcodeHelpText">
                            Arahkan scanner ke barcode
                        </small>
                    </div>
                    <div id="barcodeResult" class="alert" style="display: none;"></div>
                    <div id="barcodeItemInfo" class="card" style="display: none;">
                        <div class="card-body">
                            <h6 class="card-title text-primary">Informasi Barang:</h6>
                            <div class="row">
                                <div class="col-md-6">
                                    <table class="table table-sm table-borderless mb-0">
                                        <tr>
                                            <td style="width: 100px;">Kode Baru</td>
                                            <td>: <span id="infoKodeBaru">-</span></td>
                                        </tr>
                                        <tr>
                                            <td>Kode Lama</td>
                                            <td>: <span id="infoKodeLama">-</span></td>
                                        </tr>
                                        <tr>
                                            <td>Nama</td>
                                            <td>: <span id="infoNama">-</span></td>
                                        </tr>
                                        <tr>
                                            <td>Nama Label</td>
                                            <td>: <span id="infoNamaLabel">-</span></td>
                                        </tr>
                                        <tr>
                                            <td>Kategori</td>
                                            <td>: <span id="infoKategori">-</span></td>
                                        </tr>
                                    </table>
                                </div>
                                <div class="col-md-6">
                                    <table class="table table-sm table-borderless mb-0">
                                        <tr>
                                            <td style="width: 100px;">Satuan</td>
                                            <td>: <span id="infoSatuan">-</span></td>
                                        </tr>
                                        <tr>
                                            <td>Stok</td>
                                            <td>: <span id="infoStok">-</span></td>
                                        </tr>
                                        <tr>
                                            <td>Min Stok</td>
                                            <td>: <span id="infoMinStok">-</span></td>
                                        </tr>
                                        <tr>
                                            <td>Lokasi</td>
                                            <td>: <span id="infoLokasi">-</span></td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="button" class="btn btn-success" id="btnSubmitBarcode" disabled>
                        <i class="fas fa-check me-1"></i>Tambahkan ke Detail
                    </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>
            .select2-container {
                width: 100% !important;
            }

            .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;
            }

            /* Responsive untuk modal scan barcode */
            @media (max-width: 768px) {
                .modal-dialog {
                    margin: 0.5rem;
                    max-width: calc(100% - 1rem) !important;
                }

                #barcodeItemInfo .col-md-6 {
                    margin-bottom: 1rem;
                }
            }
        </style>
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                const tanggalInput = document.getElementById('tanggal');
                const minTanggal = "{{ $minTanggal }}";
                const minTanggalText = "{{ $minTanggalText }}";

                if (tanggalInput) {
                    tanggalInput.addEventListener('change', function() {
                        if (this.value && this.value < minTanggal) {
                            Swal.fire({
                                icon: 'warning',
                                title: 'Tanggal tidak valid',
                                html: 'Tanggal transaksi tidak boleh sebelum <b>' + minTanggalText +
                                    '</b>.',
                                confirmButtonText: 'OK'
                            });

                            this.value = "{{ date('Y-m-d') }}";
                        }
                    });
                }
            });

            $(document).ready(function() {
                const dt = $('#tbl-keperluan').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"
                        }
                    }
                });

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

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

            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 barangId = String(row.querySelector('[name="tmp_nama_barang_id[]"]')?.value || '').trim();
                    const kodeVal = barangId.split('|')[0] || '';

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

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

                // Tandai baris yang sudah dipilih (konversi ke string untuk perbandingan)
                $('#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');
                    }
                });
            }

            function isItemAlreadyInDetail(kodeBaru) {
                let found = false;
                document.querySelectorAll('#tbody-grpo tr.form-row').forEach(row => {
                    const barangId = row.querySelector('[name="tmp_nama_barang_id[]"]')?.value || '';
                    const existingKodeBaru = barangId.split('|')[0] || '';
                    if (existingKodeBaru === kodeBaru) {
                        found = true;
                    }
                });
                return found;
            }
        </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">' +
                        '    <span class="row-number">' + rowIdx + '</span>' +
                        '    <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[]">' +
                        '      <input type="hidden" name="tmp_kode_baru[]">' +
                        '      <input type="hidden" name="tmp_input_method[]" value="manual">' +
                        '      <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_display_kode_lama[]" class="form-control form-control-sm" readonly></td>' +
                        '  <td><input name="tmp_display_kode_baru[]" 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>' +
                        '    <div class="input-group input-group-sm">' +
                        '      <input name="tmp_keperluan[]" class="form-control form-control-sm" placeholder="Pilih Keperluan" readonly required>' +
                        '      <input type="hidden" name="tmp_keperluan_id[]">' +
                        '      <button type="button" class="btn btn-outline-primary btn-find-keperluan" title="Cari Keperluan">' +
                        '        <i class="fas fa-search"></i>' +
                        '      </button>' +
                        '    </div>' +
                        '  </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 numberSpan = r.querySelector('.row-number');
                        const hiddenUrut = r.querySelector('input[name="tmp_urut[]"]');

                        if (numberSpan) {
                            numberSpan.textContent = n;
                        }

                        if (hiddenUrut) {
                            hiddenUrut.value = n;
                        }

                        n += 10;
                    });

                    rowIdx = 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();

                        renumber();

                        highlightSelectedBarang();
                        return;
                    }

                    if (e.target.closest('.btn-find-keperluan')) {
                        activeRow = tr;
                        new bootstrap.Modal(document.getElementById('keperluanModal')).show();
                        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 + '|' +
                        kodeLama; // Combine for display
                    activeRow.querySelector('[name="tmp_kode_lama[]"]').value = kodeLama;
                    activeRow.querySelector('[name="tmp_kode_baru[]"]').value = kodeBaru;
                    activeRow.querySelector('[name="tmp_display_kode_lama[]"]').value = kodeLama;
                    activeRow.querySelector('[name="tmp_display_kode_baru[]"]').value = kodeBaru;
                    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);
                });

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

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

                    activeRow.querySelector('[name="tmp_keperluan[]"]').value = name;
                    activeRow.querySelector('[name="tmp_keperluan_id[]"]').value = id;

                    bootstrap.Modal.getInstance(document.getElementById('keperluanModal')).hide();
                });
            });
        </script>
        <script>
            function saveData(event) {
                event.preventDefault();

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

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

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

                const headerKurang = fields.some(f => !getVal(f));
                if (headerKurang) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Data header belum lengkap diisi',
                        text: 'Silakan lengkapi data header 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 urut = row.querySelector('[name="tmp_urut[]"]')?.value || '';
                    const barangId = row.querySelector('[name="tmp_nama_barang_id[]"]')?.value || '';
                    const qty = row.querySelector('[name="tmp_qty[]"]')?.value || '';
                    const keperluanId = row.querySelector('[name="tmp_keperluan_id[]"]')?.value || '';
                    const stok = parseFloat(row.querySelector('.stok-hidden')?.value || 0);

                    if (!urut) validationError += `Baris ${rowNum}: Urut tidak terbaca\n`;
                    if (!barangId) validationError += `Baris ${rowNum}: Barang harus dipilih\n`;
                    if (!qty || parseFloat(qty) <= 0) validationError += `Baris ${rowNum}: Qty harus lebih dari 0\n`;
                    if (!keperluanId) validationError += `Baris ${rowNum}: Keperluan harus dipilih\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;
                }

                rows.forEach((row, i) => {
                    const barangIdCombined = row.querySelector('[name="tmp_nama_barang_id[]"]')?.value || '';
                    const parts = barangIdCombined.split('|');
                    const kodeBaru = parts[0] || '';
                    const kodeLama = parts[1] || '';

                    formData.append(`details[${i}][urut]`, row.querySelector('[name="tmp_urut[]"]')?.value || '');
                    formData.append(`details[${i}][id_barang]`, row.querySelector('[name="tmp_id_barang[]"]')?.value || '');
                    formData.append(`details[${i}][kode_baru]`, kodeBaru || '');
                    formData.append(`details[${i}][kode_lama]`, kodeLama || '');
                    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}][input_method]`, row.querySelector('[name="tmp_input_method[]"]')
                        ?.value || 'manual');
                    formData.append(`details[${i}][catatan]`, row.querySelector('[name="tmp_catatan[]"]')?.value || '');
                    formData.append(`details[${i}][keperluan_id]`, row.querySelector('[name="tmp_keperluan_id[]"]')
                        ?.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>
        <script>
            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 untuk Scan Barcode -->
        {{-- <script>
            document.addEventListener('DOMContentLoaded', () => {
                const barcodeInput = document.getElementById('barcodeInput');
                const barcodeResult = document.getElementById('barcodeResult');
                const barcodeItemInfo = document.getElementById('barcodeItemInfo');
                const btnSubmitBarcode = document.getElementById('btnSubmitBarcode');
                const scanBarcodeModal = document.getElementById('scanBarcodeModal');

                let searchTimeout = null;
                let startTime = 0;
                let isPasteMode = false;
                let isScannerLikeInput = false;

                scanBarcodeModal.addEventListener('shown.bs.modal', () => {
                    barcodeInput.value = '';
                    barcodeInput.focus();
                    barcodeResult.style.display = 'none';
                    barcodeItemInfo.style.display = 'none';
                    btnSubmitBarcode.disabled = true;
                    scannedItemData = null;

                    startTime = 0;
                    keyCount = 0;
                    isPasteMode = false;
                });

                barcodeInput.addEventListener('paste', function() {
                    isPasteMode = true;
                });

                barcodeInput.addEventListener('keydown', function(e) {
                    if (startTime === 0 && e.key !== 'Enter') {
                        startTime = Date.now();
                        isScannerLikeInput = false;
                    }

                    if (e.key === 'Enter') {
                        e.preventDefault();
                        clearTimeout(searchTimeout);

                        const kodeBaru = this.value.trim();
                        if (kodeBaru.length < 3) return;

                        const duration = Date.now() - startTime;
                        const avgTimePerChar = kodeBaru.length ? duration / kodeBaru.length : 999;

                        let method = 'manual';

                        if (!isPasteMode && avgTimePerChar < 70) {
                            method = 'scan';
                            isScannerLikeInput = true;
                        }

                        searchBarcode(kodeBaru, method);

                        startTime = 0;
                        isPasteMode = false;
                    }
                });

                // Debounce untuk input barcode
                barcodeInput.addEventListener('input', function() {
                    clearTimeout(searchTimeout);
                    const kodeBaru = this.value.trim();

                    if (kodeBaru.length < 3) {
                        barcodeResult.style.display = 'none';
                        barcodeItemInfo.style.display = 'none';
                        btnSubmitBarcode.disabled = true;
                        scannedItemData = null;
                        return;
                    }

                    searchTimeout = setTimeout(() => {
                        if (!isScannerLikeInput) {
                            searchBarcode(kodeBaru, 'manual');
                        }
                    }, 500);
                });

                // Fungsi search barcode
                function searchBarcode(kodeBaru, method = 'manual') {
                    barcodeResult.className = 'alert alert-info';
                    barcodeResult.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Mencari barang...';
                    barcodeResult.style.display = 'block';
                    barcodeItemInfo.style.display = 'none';
                    btnSubmitBarcode.disabled = true;

                    fetch("{{ URL::to($url_menu) }}/search-barcode", {
                            method: "POST",
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': '{{ csrf_token() }}'
                            },
                            body: JSON.stringify({
                                kode_baru: kodeBaru,
                                input_method: method
                            })
                        })
                        .then(res => res.json())
                        .then(data => {
                            if (data.success && data.item) {
                                // Item ditemukan
                                barcodeResult.className = 'alert alert-success';
                                barcodeResult.innerHTML =
                                    '<i class="fas fa-check-circle me-2"></i>Barang ditemukan!';

                                // Tampilkan info barang
                                document.getElementById('infoKodeBaru').textContent = data.item.kode_baru || '-';
                                document.getElementById('infoKodeLama').textContent = data.item.kode_lama || '-';
                                document.getElementById('infoNama').textContent = data.item.nama || '-';
                                document.getElementById('infoNamaLabel').textContent = data.item.nama_label || '-';
                                document.getElementById('infoKategori').textContent = data.item.kategori || '-';
                                document.getElementById('infoSatuan').textContent = data.item.satuan_nama || '-';
                                document.getElementById('infoStok').textContent = parseFloat(data.item.stok) || '0';
                                document.getElementById('infoMinStok').textContent = parseFloat(data.item
                                    .min_stok) || '0';
                                document.getElementById('infoLokasi').textContent = data.item.lokasi || '-';

                                barcodeItemInfo.style.display = 'block';
                                btnSubmitBarcode.disabled = false;

                                scannedItemData = data.item;
                                scannedItemData.input_method = (data.input_method === 'scan') ?
                                    (data.ip_address || 'scan') :
                                    'manual';
                            } else {
                                barcodeResult.className = 'alert alert-danger';
                                barcodeResult.innerHTML =
                                    '<i class="fas fa-times-circle me-2"></i>Barang tidak ditemukan dengan kode: <strong>' +
                                    kodeBaru + '</strong>';
                                barcodeItemInfo.style.display = 'none';
                                btnSubmitBarcode.disabled = true;
                                scannedItemData = null;
                            }
                        })
                        .catch(err => {
                            console.error('Error searching barcode:', err);
                            barcodeResult.className = 'alert alert-danger';
                            barcodeResult.innerHTML =
                                '<i class="fas fa-exclamation-triangle me-2"></i>Terjadi kesalahan saat mencari barang';
                            barcodeItemInfo.style.display = 'none';
                            btnSubmitBarcode.disabled = true;
                            scannedItemData = null;
                        });
                }

                // Submit barcode - tambahkan ke detail
                btnSubmitBarcode.addEventListener('click', () => {
                    if (!scannedItemData) return;

                    // Cek apakah barang sudah ada di detail
                    if (isItemAlreadyInDetail(scannedItemData.kode_baru)) {
                        Swal.fire({
                            icon: 'warning',
                            title: 'Barang Sudah Ada!',
                            text: 'Barang "' + scannedItemData.nama + '" sudah ada pada detail.',
                            confirmButtonText: 'OK'
                        });
                        return;
                    }

                    // Tambahkan row baru dengan data barang
                    addRowWithScannedData(scannedItemData);

                    // Tutup modal
                    bootstrap.Modal.getInstance(scanBarcodeModal).hide();

                    // Tampilkan notifikasi
                    Swal.fire({
                        icon: 'success',
                        title: 'Berhasil!',
                        text: 'Barang "' + scannedItemData.nama + '" ditambahkan ke detail',
                        timer: 2000,
                        showConfirmButton: false
                    });
                });

                // Fungsi untuk menambahkan row dengan data hasil scan
                function addRowWithScannedData(item) {
                    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 value="' +
                    escapeHtml(item.nama) + '">' +
                    '      <input type="hidden" name="tmp_id_barang[]" value="' + escapeHtml(item.id || '') + '">' +
                    '      <input type="hidden" name="tmp_nama_barang_id[]" value="' + (item.kode_baru || '') +
                        '|' + (item.kode_lama || '') + '">' +
                        '      <input type="hidden" name="tmp_kode_lama[]" value="' + (item.kode_lama || '') + '">' +
                        '      <input type="hidden" name="tmp_kode_baru[]" value="' + (item.kode_baru || '') + '">' +
                        '      <input type="hidden" name="tmp_input_method[]" value="' + (item.input_method ||
                            'manual') + '">' +
                        '      <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_display_kode_lama[]" class="form-control form-control-sm" readonly value="' +
                        escapeHtml(item.kode_lama || '') + '"></td>' +
                        '  <td><input name="tmp_display_kode_baru[]" class="form-control form-control-sm" readonly value="' +
                        escapeHtml(item.kode_baru || '') + '"></td>' +
                        '  <td style="width:120px"><input type="number" step="1" min="0" name="tmp_qty[]" class="form-control form-control-sm qty-input" required value="0"><input type="hidden" name="tmp_stok[]" class="stok-hidden" value="' +
                        (item.stok || 0) + '"></td>' +
                        '  <td style="width:140px"><input type="text" name="tmp_satuan[]" class="form-control form-control-sm" disabled value="' +
                        escapeHtml(item.satuan_nama || '') + '"></td>' +
                        '  <td>' +
                        '    <div class="input-group input-group-sm">' +
                        '      <input name="tmp_keperluan[]" class="form-control form-control-sm" placeholder="Pilih Keperluan" readonly required>' +
                        '      <input type="hidden" name="tmp_keperluan_id[]">' +
                        '      <button type="button" class="btn btn-outline-primary btn-find-keperluan" title="Cari Keperluan">' +
                        '        <i class="fas fa-search"></i>' +
                        '      </button>' +
                        '    </div>' +
                        '  </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 newRow = addRow.previousElementSibling;
                    const newQtyInput = newRow.querySelector('.qty-input');
                    newQtyInput.addEventListener('input', () => validateQty(newQtyInput));

                    // Focus ke qty input
                    newQtyInput.focus();
                    newQtyInput.select();
                }

                // Helper function untuk escape HTML
                function escapeHtml(text) {
                    if (!text) return '';
                    const div = document.createElement('div');
                    div.textContent = text;
                    return div.innerHTML;
                }
            });
        </script> --}}

        <script>
            const barcodeDisplay = document.getElementById('barcodeDisplay');
            const barcodeScannerInput = document.getElementById('barcodeScannerInput');
            const barcodeHelpText = document.getElementById('barcodeHelpText');
            const barcodeResult = document.getElementById('barcodeResult');
            const barcodeItemInfo = document.getElementById('barcodeItemInfo');
            const btnSubmitBarcode = document.getElementById('btnSubmitBarcode');
            const scanBarcodeModal = document.getElementById('scanBarcodeModal');

            let scanStartTime = null;
            let lastKeyTime = null;
            let maxKeyGap = 0;

            const MAX_SCAN_DURATION = 2000;
            const MIN_BARCODE_LENGTH = 3;

            function focusScannerInput() {
                setTimeout(function() {
                    barcodeScannerInput.focus();
                }, 100);
            }

            function resetScanBuffer() {
                scanStartTime = null;
                barcodeScannerInput.value = '';
            }

            function resetBarcodeScanForm() {
                barcodeDisplay.value = '';
                barcodeScannerInput.value = '';

                barcodeResult.style.display = 'none';
                barcodeItemInfo.style.display = 'none';
                btnSubmitBarcode.disabled = true;
                scannedItemData = null;

                if (barcodeHelpText) {
                    barcodeHelpText.textContent = 'Arahkan scanner ke barcode';
                }

                resetScanBuffer();
                focusScannerInput();
            }

            barcodeScannerInput.addEventListener('input', function() {
                if (scanStartTime === null && this.value.length > 0) {
                    scanStartTime = Date.now();
                }

                // Jangan isi barcodeDisplay di sini
                // barcodeDisplay baru diisi setelah data valid dari database
            });

            barcodeScannerInput.addEventListener('keydown', function(e) {
                if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'v') {
                    e.preventDefault();
                    resetScanBuffer();
                    focusScannerInput();
                    return;
                }

                if (e.key === 'Enter') {
                    e.preventDefault();

                    const kodeBaru = barcodeScannerInput.value.trim();
                    const duration = scanStartTime ? Date.now() - scanStartTime : 0;

                    console.log('SCAN VALUE:', kodeBaru);
                    console.log('SCAN DURATION:', duration);

                    if (kodeBaru.length < MIN_BARCODE_LENGTH) {
                        resetScanBuffer();
                        focusScannerInput();
                        return;
                    }

                    if (duration > MAX_SCAN_DURATION) {
                        resetScanBuffer();

                        Swal.fire({
                            icon: 'warning',
                            title: 'Input Manual Tidak Diizinkan',
                            text: 'Gunakan scanner barcode.',
                            confirmButtonColor: '#008284'
                        }).then(() => {
                            focusScannerInput();
                        });

                        return;
                    }

                    searchBarcode(kodeBaru, 'scan');

                    resetScanBuffer();
                    focusScannerInput();
                }
            });

            barcodeScannerInput.addEventListener('paste', function(e) {
                e.preventDefault();
                resetScanBuffer();
                focusScannerInput();
            });

            scanBarcodeModal.addEventListener('shown.bs.modal', function() {
                barcodeDisplay.readOnly = true;
                barcodeDisplay.setAttribute('readonly', true);
                barcodeDisplay.setAttribute('inputmode', 'none');
                barcodeDisplay.setAttribute('tabindex', '-1');

                barcodeScannerInput.setAttribute('inputmode', 'none');
                barcodeScannerInput.setAttribute('autocomplete', 'off');

                resetBarcodeScanForm();
            });

            scanBarcodeModal.addEventListener('hidden.bs.modal', function() {
                resetScanBuffer();
            });

            barcodeDisplay.addEventListener('focus', function(e) {
                barcodeDisplay.blur();
                focusScannerInput();
            });

            barcodeDisplay.addEventListener('click', function(e) {
                e.preventDefault();
                barcodeDisplay.blur();
                focusScannerInput();
            });

            barcodeDisplay.addEventListener('touchstart', function(e) {
                e.preventDefault();
                barcodeDisplay.blur();
                focusScannerInput();
            });

            function searchBarcode(kodeBaru, method = 'scan') {
                barcodeResult.className = 'alert alert-info';
                barcodeResult.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Mencari barang...';
                barcodeResult.style.display = 'block';
                barcodeItemInfo.style.display = 'none';
                btnSubmitBarcode.disabled = true;
                scannedItemData = null;

                fetch("{{ URL::to($url_menu) }}/search-barcode", {
                        method: "POST",
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        },
                        body: JSON.stringify({
                            kode_baru: kodeBaru,
                            input_method: method
                        })
                    })
                    .then(res => res.json())
                    .then(data => {
                        if (data.success && data.item) {
                            barcodeResult.className = 'alert alert-success';
                            barcodeResult.innerHTML =
                                '<i class="fas fa-check-circle me-2"></i>Barang ditemukan!';

                            // Display baru diisi kalau barang valid dari database
                            barcodeDisplay.value = data.item.kode_baru || kodeBaru;

                            document.getElementById('infoKodeBaru').textContent = data.item.kode_baru || '-';
                            document.getElementById('infoKodeLama').textContent = data.item.kode_lama || '-';
                            document.getElementById('infoNama').textContent = data.item.nama || '-';
                            document.getElementById('infoNamaLabel').textContent = data.item.nama_label || '-';
                            document.getElementById('infoKategori').textContent = data.item.kategori || '-';
                            document.getElementById('infoSatuan').textContent = data.item.satuan_nama || '-';
                            document.getElementById('infoStok').textContent = parseFloat(data.item.stok) || '0';
                            document.getElementById('infoMinStok').textContent = parseFloat(data.item.min_stok) || '0';
                            document.getElementById('infoLokasi').textContent = data.item.lokasi || '-';

                            barcodeItemInfo.style.display = 'block';
                            btnSubmitBarcode.disabled = false;

                            scannedItemData = data.item;
                            scannedItemData.input_method = 'scan';
                        } else {
                            barcodeDisplay.value = '';

                            barcodeResult.className = 'alert alert-danger';
                            barcodeResult.innerHTML =
                                '<i class="fas fa-times-circle me-2"></i>Barang tidak ditemukan dengan kode: <strong>' +
                                kodeBaru + '</strong>';

                            barcodeItemInfo.style.display = 'none';
                            btnSubmitBarcode.disabled = true;
                            scannedItemData = null;
                        }
                    })
                    .catch(err => {
                        console.error('Error searching barcode:', err);

                        barcodeDisplay.value = '';

                        barcodeResult.className = 'alert alert-danger';
                        barcodeResult.innerHTML =
                            '<i class="fas fa-exclamation-triangle me-2"></i>Terjadi kesalahan saat mencari barang';

                        barcodeItemInfo.style.display = 'none';
                        btnSubmitBarcode.disabled = true;
                        scannedItemData = null;
                    });
            }

            btnSubmitBarcode.addEventListener('click', function() {
                if (!scannedItemData) return;

                if (isItemAlreadyInDetail(scannedItemData.kode_baru)) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Barang Sudah Ada!',
                        text: 'Barang "' + scannedItemData.nama + '" sudah ada pada detail.',
                        confirmButtonText: 'OK'
                    });
                    return;
                }

                addRowWithScannedData(scannedItemData);

                bootstrap.Modal.getInstance(scanBarcodeModal).hide();

                Swal.fire({
                    icon: 'success',
                    title: 'Berhasil!',
                    text: 'Barang "' + scannedItemData.nama + '" ditambahkan ke detail',
                    timer: 2000,
                    showConfirmButton: false
                });
            });

            function addRowWithScannedData(item) {
                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 value="' +
                    escapeHtml(item.nama) + '">' +
                    '      <input type="hidden" name="tmp_nama_barang_id[]" value="' + escapeHtml((item.kode_baru || '') + '|' +
                        (item.kode_lama || '')) + '">' +
                    '      <input type="hidden" name="tmp_kode_lama[]" value="' + escapeHtml(item.kode_lama || '') + '">' +
                    '      <input type="hidden" name="tmp_kode_baru[]" value="' + escapeHtml(item.kode_baru || '') + '">' +
                    '      <input type="hidden" name="tmp_input_method[]" value="' + escapeHtml(item.input_method || 'scan') +
                    '">' +
                    '      <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_display_kode_lama[]" class="form-control form-control-sm" readonly value="' +
                    escapeHtml(item.kode_lama || '') + '"></td>' +
                    '  <td><input name="tmp_display_kode_baru[]" class="form-control form-control-sm" readonly value="' +
                    escapeHtml(item.kode_baru || '') + '"></td>' +

                    '  <td style="width:120px">' +
                    '    <input type="number" step="1" min="0" name="tmp_qty[]" class="form-control form-control-sm qty-input" required value="0">' +
                    '    <input type="hidden" name="tmp_stok[]" class="stok-hidden" value="' + escapeHtml(item.stok || 0) +
                    '">' +
                    '  </td>' +

                    '  <td style="width:140px">' +
                    '    <input type="text" name="tmp_satuan[]" class="form-control form-control-sm" disabled value="' +
                    escapeHtml(item.satuan_nama || '') + '">' +
                    '  </td>' +

                    '  <td>' +
                    '    <div class="input-group input-group-sm">' +
                    '      <input name="tmp_keperluan[]" class="form-control form-control-sm" placeholder="Pilih Keperluan" readonly required>' +
                    '      <input type="hidden" name="tmp_keperluan_id[]">' +
                    '      <button type="button" class="btn btn-outline-primary btn-find-keperluan" title="Cari Keperluan">' +
                    '        <i class="fas fa-search"></i>' +
                    '      </button>' +
                    '    </div>' +
                    '  </td>' +

                    '  <td><input name="tmp_catatan[]" class="form-control form-control-sm"></td>' +
                    '</tr>';

                const addRow = document.getElementById('add-row');
                addRow.insertAdjacentHTML('beforebegin', formRow);

                const newRow = addRow.previousElementSibling;
                const newQtyInput = newRow.querySelector('.qty-input');

                newQtyInput.addEventListener('input', function() {
                    validateQty(newQtyInput);
                });

                newQtyInput.focus();
                newQtyInput.select();
            }

            function escapeHtml(text) {
                if (text === null || text === undefined) return '';

                const div = document.createElement('div');
                div.textContent = String(text);

                return div.innerHTML;
            }
        </script>
    @endpush