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

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

    <div class="card shadow-lg mx-4">
        <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="history.back()">
                            <i class="fas fa-circle-left me-1"></i>
                            <span class="font-weight-bold">Kembali</span>
                        </button>
                        @if ($authorize->add == '1')
                            <button type="button" class="btn btn-primary mb-0" id="btnSubmit" onclick="submitForm()"
                                id="btn-simpan">
                                <i class="fas fa-floppy-disk me-1"></i>
                                <span class="font-weight-bold">Simpan</span>
                            </button>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-body">
                        <p class="text-uppercase text-sm">Form Penjualan Barang</p>
                        <hr class="horizontal dark mt-0">
                        <div class="row">
                            <div class="col-md-6">
                                <form role="form" method="POST" action="{{ URL::to($url_menu) }}" id="dailya-form"
                                    enctype="multipart/form-data">
                                    @csrf
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="d-flex align-items-center">
                                                <label for="inputdate" class="form-label me-2"
                                                    style="min-width: 150px;">ID</label>
                                                <small class="form-text text-muted"></small>
                                                <input type="text" class="form-control" id="did" name="did"
                                                    placeholder="--" disabled>
                                            </div>
                                            <p></p>
                                            <div class="d-flex align-items-center">
                                                <label for="inputdate" class="form-label me-2" style="min-width: 150px;">No
                                                    Surat <code> *</code></label>
                                                <input type="text" class="form-control upper" id="no_surat"
                                                    name="no_surat" maxlength="50" required>
                                            </div>

                                            <p></p>


                                            <div class="d-flex align-items-center">
                                                <label for="inputdate" class="form-label me-2"
                                                    style="min-width: 150px;">Diajukan <code> *</code></label>
                                                <small class="form-text text-muted"></small>


                                                <select class="form-select" id="dajukan" name="dajukan" required>
                                                    <!-- Opsi default, tampil jika $typeform kosong atau tidak cocok dengan value di $types -->
                                                    <option value=""></option>
                                                    @foreach ($user_mis as $s)
                                                        <option value="{{ $s->nik }}">
                                                            {{ $s->nama }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <p></p>

                                            <div class="d-flex align-items-center">
                                                <label for="inputdate" class="form-label me-2"
                                                    style="min-width: 150px;">Diketahui <code> *</code></label>
                                                <small class="form-text text-muted"></small>


                                                <select class="form-select" id="dketahui" name="dketahui" required>
                                                    <!-- Opsi default, tampil jika $typeform kosong atau tidak cocok dengan value di $types -->
                                                    <option value=""></option>
                                                    @foreach ($user_feat as $s)
                                                        <option value="{{ $s->nik }}">
                                                            {{ $s->nama }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <p></p>
                                            <div class="d-flex align-items-center">
                                                <label for="dsetuju" class="form-label me-2" style="min-width: 150px;">
                                                    Disetujui <code>*</code>
                                                </label>
                                                <small class="form-text text-muted"></small>

                                                <select id="dsetuju" name="dsetuju[]"
                                                    class="form-select custom-select select-multiple" multiple="multiple"
                                                    required>
                                                    @foreach ($user_mis as $u)
                                                        <option value="{{ $u->nik }}">{{ $u->nama }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                            </div>

                            <div class="col-md-6">
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <div class="d-flex align-items-center">
                                                <label for="inputdate" class="form-label me-2"
                                                    style="min-width: 150px;">Date</label>
                                                <small class="form-text text-muted"></small>
                                                <input type="date" class="form-control" id="ddate" name="ddate"
                                                    value="{{ date('Y-m-d') }}" readonly>
                                            </div>
                                            <p></p>
                                            {{-- <div class="d-flex align-items-center">
                                                <label for="inputdate" class="form-label me-2"
                                                    style="min-width: 150px;">Keterangan <code> *</code></label>
                                                <input type="text" class="form-control" id="dket" name="dket"
                                                    maxlength="50" required>
                                            </div> --}}

                                            <p></p>
                                            <div class="d-flex align-items-center">
                                                <label for="inputdate" class="form-label me-2"
                                                    style="min-width: 150px;">Nama Vendor <code> *</code></label>
                                                <input type="text" class="form-control" id="nvendor" name="nvendor"
                                                    maxlength="50" required>
                                            </div>
                                            <p></p>

                                            <div class="d-flex align-items-center">
                                                <label for="inputdate" class="form-label me-2"
                                                    style="min-width: 150px;">No Telp Vendor</label>
                                                <input type="text" class="form-control" id="novendor"
                                                    name="novendor" maxlength="50" required>
                                            </div>

                                            <p></p>
                                            <p></p>


                                            <div class="d-flex align-items-center">
                                                <label for="inputdate" class="form-label me-2"
                                                    style="min-width: 150px;">Status <code> *</code></label>
                                                <small class="form-text text-muted"></small>


                                                <select class="form-select" id="dstatus" name="dstatus" required>
                                                    <!-- Opsi default, tampil jika $typeform kosong atau tidak cocok dengan value di $types -->
                                                    <option value=""></option>
                                                    @foreach ($status as $s)
                                                        <option value="{{ $s->value }}">
                                                            {{ $s->name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>




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


                            </div>
                            </form>
                        </div>
                        <br>
                        <h6>Note : (<code>*</code>) Wajib diisi.</h6>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-lg-12">
                <div class="card shadow-sm">
                    <div class="card-body">
                        <div class="row g-3 align-items-end">
                            <div class="col-md-8">
                                <label class="form-label text-uppercase text-sm fw-bold">Scan / Paste Link</label>
                                <div class="input-group">
                                    <input type="text" class="form-control" id="scan-input"
                                        name="brcpicking-scan-batch" placeholder="Tempelkan link atau kode, lalu Enter"
                                        maxlength="255" autocomplete="off" autofocus
                                        style="max-width: 300px; max-height: 43px">

                                    <button type="button" class="btn btn-success" id="brcpicking-enter">
                                        <i class="fa fa-right-to-bracket me-1"></i> Enter
                                    </button>

                                    {{-- tombol search untuk buka modal --}}
                                    <button type="button" class="btn btn-outline-primary" onclick="searchItems()">
                                        <i class="fa fa-search me-1"></i> Search
                                    </button>
                                </div>

                            </div>
                        </div>

                        <hr class="horizontal dark my-4">

                        <p class="text-uppercase text-sm mb-2">List Barang (Asset)</p>
                        <div class="table-responsive" style="height:300px; overflow-y:auto;">
                            <table id="brcpicking-scan-packing-data"
                                class="table table-bordered table-striped align-middle mb-0">
                                <thead style="background-color:#daecff;">
                                    <tr>
                                        <th style="width:60px">Action</th>
                                        <th style="width:60px">No</th>
                                        <th style="width:140px">Kategori</th>
                                        <th style="width:220px">Code</th>
                                        <th style="width:220px">Kode Asset SAP</th>
                                        <th>Merk</th>
                                        <th>Type</th>
                                        <th>Qty</th>
                                        <th>User/Location</th>
                                        <th>Remark</th>
                                        <th>Source</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>

                        <div id="loadingRow" class="mt-3 d-none">
                            <span class="spinner-border spinner-border-sm me-2" aria-hidden="true"></span>
                            <span class="text-muted">Memeriksa database…</span>
                        </div>

                        <hr class="horizontal dark my-4">
                        <p class="text-uppercase text-sm mb-2">List Barang (Non Asset)</p>
                        <div class="table-responsive" style="height:300px; overflow-y:auto;">
                            <table id="list-non-asset" class="table table-bordered table-striped align-middle mb-0">
                                <thead style="background-color:#daecff;">
                                    <tr>
                                        <th style="width:60px">Action</th>
                                        <th style="width:60px">No</th>
                                        <th style="width:140px">Kategori</th>
                                        {{-- <th style="width:220px">Code</th>
                                        <th style="width:220px">Kode Asset SAP</th> --}}
                                        <th>Detail Barang</th>
                                        {{-- <th>Type</th> --}}
                                        <th>Qty</th>
                                        <th>Remark</th>

                                        {{-- <th>User/Location</th>
                                        <th>Remark</th>
                                        <th>Source</th> --}}
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                        <button type="button" class="btn btn-primary" id="additem">
                            Add Item <i class="bi bi-file-earmark-plus"></i>
                        </button>
                        <input type="hidden" id="id_item" value="0" />
                    </div>
                </div>
            </div>
        </div>
    </div>


    {{-- Modal Not Found --}}
    <div class="modal fade" id="notFoundModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-sm modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header py-2">
                    <h6 class="modal-title">Informasi</h6>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Tutup"></button>
                </div>
                <div class="modal-body">
                    <p class="mb-0" id="notFoundText">Maaf, data tidak ada.</p>
                </div>
                <div class="modal-footer py-2">
                    <button type="button" class="btn btn-primary btn-sm" data-bs-dismiss="modal">OK</button>
                </div>
            </div>
        </div>
    </div>

    {{-- modal menampilkan master data --}}
    <div class="modal fade" id="codeModal" tabindex="-1" aria-labelledby="codeModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="codeModalLabel">Master Data </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="table-responsive">
                        <table id="myTableMaster" class="table table-bordered table-striped" style="width:100%">
                            <thead style="background-color: #daecff;">
                                <tr>
                                    {{-- <th scope="col">Action</th> --}}
                                    <th style="width:48px" class="text-center">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" id="chkMasterAll">
                                        </div>
                                    </th>
                                    <th scope="col">Source</th>
                                    <th scope="col">Kategori</th>
                                    <th scope="col">Code</th>
                                    <th scope="col">Merk</th>
                                    <th scope="col">Type</th>
                                    <th scope="col">Qty</th>
                                    <th scope="col">User/Location</th>

                                </tr>
                            </thead>
                            <tbody id="modal-body-content">

                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" id="btnAddSelected" class="btn btn-primary">
                        <i class="fa fa-plus me-1"></i> Submit
                    </button>
                </div>
            </div>
        </div>
    </div>

    <style>
        #brcpicking-enter:disabled {
            opacity: .8;
            cursor: not-allowed;
        }

        .table td,
        .table th {
            vertical-align: middle;
        }
    </style>

    <script>
        var listCode = []; // Untuk menyimpan data hasil pencarian
        var tableData = []; // Array untuk menyimpan data dari tabel

        function searchItems() {
            var category = 'null';
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            function getExistingCodesSet() {
                const set = new Set();
                document.querySelectorAll('#brcpicking-scan-packing-data tbody tr').forEach(tr => {
                    // kolom Code ada di <td><code>...</code></td> (posisi 4 pada addRow milikmu)
                    const codeEl = tr.querySelector('td:nth-child(4) code');
                    const code = (codeEl?.textContent || '').trim();
                    if (code) set.add(code);
                });
                return set;
            }


            $.ajax({
                url: "{{ url('/trdefc/search-defect') }}",
                type: 'GET',
                data: {
                    category
                },
                success: function(response) {
                    const listCode = response.map(r => ({
                        SOURCE: r.source,
                        KAT: r.kategori,
                        CODE: r.code,
                        MERK: r.merk,
                        TYPE: r.type,
                        QTY: r.qty,
                        USER: r.user
                    }));

                    const existingSet = getExistingCodesSet();

                    const dt = $('#myTableMaster').DataTable({
                        language: {
                            search: "Cari :",
                            lengthMenu: "Tampilkan _MENU_ baris",
                            zeroRecords: "Maaf - Data tidak ada",
                            info: "Halaman _PAGE_ dari _PAGES_",
                            infoEmpty: "Tidak ada data",
                            infoFiltered: "(pencarian dari _MAX_ data)"
                        },
                        destroy: true,
                        responsive: true,
                        data: listCode,
                        columns: [{ // checkbox
                                data: 'CODE',
                                orderable: false,
                                searchable: false,
                                className: 'text-center',
                                render: function(code, type, row) {
                                    const id = 'chk_' + code.replace(/[^a-zA-Z0-9]/g, '');
                                    const disabled = existingSet.has(code) ?
                                        'disabled checked' : '';
                                    return `<div class="form-check"> <input class="form-check-input row-check" type="checkbox" id="${id}" value="${code}" ${disabled}> </div>`;
                                }
                            },
                            {
                                data: 'SOURCE'
                            },
                            {
                                data: 'KAT'
                            },
                            {
                                data: 'CODE'
                            },
                            {
                                data: 'MERK'
                            },
                            {
                                data: 'TYPE'
                            },
                            {
                                data: 'QTY'
                            },
                            {
                                data: 'USER'
                            }
                        ]
                    });

                    // Select All → centang semua checkbox yang terlihat di halaman aktif
                    $('#chkMasterAll').off('change').on('change', function() {
                        $('#myTableMaster tbody input.row-check:visible:not(:disabled)')
                            .prop('checked', this.checked);
                    });

                    // Jika user centang/uncentang per-baris → update master (sederhana)
                    $('#myTableMaster').off('change', 'tbody input.row-check')
                        .on('change', 'tbody input.row-check', function() {
                            const $all = $('#myTableMaster tbody input.row-check:visible:not(:disabled)');
                            const allChecked = $all.length && $all.filter(':checked').length === $all
                                .length;
                            $('#chkMasterAll').prop('checked', allChecked);
                        });

                    // Buka modal
                    $('#codeModal').modal('show');

                    // Tombol Tambah Terpilih
                    $('#btnAddSelected').off('click').on('click', function() {
                        const nodes = dt.rows().nodes(); // semua halaman
                        $(nodes).each(function() {
                            const $row = $(this);
                            const $chk = $row.find('input.row-check');
                            if ($chk.is(':checked') && !$chk.is(':disabled')) {
                                const data = dt.row($row).data(); // {KAT,CODE,MERK,DEPT,USER}

                                // mapping ke format yang dibutuhkan addRow()
                                const mapped = {
                                    source: data.SOURCE,
                                    kategori: data.KAT,
                                    code: data.CODE,
                                    kode_sap: data.KODE_SAP,
                                    merk: data.MERK,
                                    type: data.TYPE,
                                    qty: data.QTY,
                                    user: data.USER,
                                    user_location: data.USER
                                };

                                addRow(mapped); // gunakan function addRow kamu
                                $chk.prop('disabled', true).prop('checked',
                                    true); // tandai sudah ditambahkan
                            }
                        });

                        // reset master checkbox, lalu tutup modal
                        $('#checkAllMaster').prop('checked', false);
                        $('#codeModal').modal('hide');
                    });
                },
                error: function(xhr) {
                    console.error('AJAX request error:', xhr.responseText);
                    Swal.fire({
                        title: 'Warning!',
                        text: 'Data tidak ditemukan.',
                        icon: 'warning',
                        confirmButtonText: 'OK'
                    });
                }
            });

        }


        document.addEventListener("DOMContentLoaded", function() {
            var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
            var popoverList = popoverTriggerList.map(function(popoverTriggerEl) {
                return new bootstrap.Popover(popoverTriggerEl, {
                    trigger: 'focus', // Popover akan tertutup jika klik di luar
                    html: true // Aktifkan HTML dalam popover
                });
            });
        });



        function submitForm(e) {
            e?.preventDefault?.();
            const no_surat = $('#no_surat').val();
            const dajukan = $('#dajukan').val();
            const dketahui = $('#dketahui').val();
            const dsetuju = $('#dsetuju').val();
            const ddate = $('#ddate').val();
            const nvendor = $('#nvendor').val();
            const novendor = $('#novendor').val();
            const dstatus = $('#dstatus').val();

            if (!no_surat || !dajukan || !dketahui || !dsetuju || !ddate || !nvendor || !novendor || !dstatus) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Harap lengkapi data!',
                    text: 'Pastikan data sudah diisi dengan benar.'
                });
                return;
            }


            const $tbody = document.querySelector('#brcpicking-scan-packing-data tbody');
            const rows = [...$tbody.querySelectorAll('tr')];

            if (!rows.length) {

                Swal.fire({
                    icon: 'warning',
                    title: 'List kosong',
                    text: 'Tambahkan minimal 1 item.'
                });

                return;
            }

            // 1) ambil header otomatis dari elemen yg diberi data-header



            // 2) siapkan FormData (aman utk array & file juga)
            const fd = new FormData();
            // header[...] => Laravel akan nerima sebagai array "header"
            const assetRows = document.querySelectorAll('#brcpicking-scan-packing-data tbody tr');
            const nonAssetRows = document.querySelectorAll('#list-non-asset tbody tr');

            if (!assetRows.length && !nonAssetRows.length) {
                Swal.fire({
                    icon: 'warning',
                    title: 'List kosong',
                    text: 'Tambahkan minimal 1 item.'
                });
                return;
            }

            const listBarang = [];

            // ✅ Loop Asset (scan/search → pakai dataset)
            assetRows.forEach((tr) => {
                const code = (tr.dataset.code || '').trim();
                const kode_sap = (tr.dataset.kode_sap || '').trim();
                const source = tr.dataset.source || '';
                const kategori = tr.dataset.kategori || '';
                const merk = tr.dataset.merk || '';
                const type = tr.dataset.type || '';
                const qty = tr.dataset.qty || '';
                const user = tr.dataset.user || '';
                const remark = tr.querySelector('.remark-input')?.value?.trim() || '';

                listBarang.push({
                    code,
                    kode_sap,
                    source,
                    merk,
                    type,
                    qty,
                    user,
                    remark,
                    kategori
                });
            });

            // ✅ Loop Non Asset (add item → pakai input value)
            nonAssetRows.forEach((tr) => {
                const kategori = tr.querySelector('input[name="kategori_na[]"]').value.trim();
                const merk = tr.querySelector('input[name="merk_na[]"]').value.trim();
                const qty = tr.querySelector('input[name="qty_na[]"]').value.trim();
                const remark = tr.querySelector('input[name="remark_na[]"]').value.trim();

                listBarang.push({
                    code: "-",
                    kode_sap: "-",
                    source: "-",
                    kategori,
                    merk,
                    type: "-",
                    qty,
                    user: "-",
                    remark,
                    source: "Non Asset"
                });
            });

            console.log('details:', listBarang);

            var input = {
                'no_surat': no_surat,
                'dajukan': dajukan,
                'dketahui': dketahui,
                'dsetuju': dsetuju,
                'ddate': ddate,
                'nvendor': nvendor,
                'novendor': novendor,
                'dstatus': dstatus,
                'details': listBarang,
            }

            console.log('input', input);


            // 4) AJAX ke Laravel
            const actionUrl = document.getElementById('defectForm')?.getAttribute('action') ||
                "{{ url('/trdefc/store') }}";

            $.ajax({
                url: "{{ url('/trdefc/store') }}",
                method: 'POST',
                data: JSON.stringify({
                    defect: input
                }),
                dataType: "json",

                contentType: "application/json; charset=utf-8",
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                beforeSend: function() {
                    $('#btnSubmit').prop('disabled', true).append(
                        '<span class="spinner-border spinner-border-sm ms-2"></span>');
                },
                success: function(res) {

                    Swal.fire({
                        icon: 'success',
                        title: 'Tersimpan',
                        text: 'Data berhasil disimpan.'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            window.location.href = "{{ URL::to('/') }}/trdefc";
                        }
                    })

                    // reset tabel & set
                    $tbody.innerHTML = '';
                    if (window.scannedSet) scannedSet.clear?.();
                    // reset form header (opsional)
                    document.querySelectorAll('[data-header]').forEach(el => {
                        if (el.type === 'checkbox') el.checked = false;
                        else el.value = '';
                    });
                },
                error: function(xhr) {
                    console.error(xhr.responseText);
                    let msg = 'Gagal menyimpan.';
                    try {
                        const j = JSON.parse(xhr.responseText);
                        if (j?.message) msg = j.message;
                    } catch (e) {}
                    if (window.Swal) {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: msg
                        });
                    } else {
                        alert(msg);
                    }
                },
                complete: function() {
                    $('#btnSubmit').prop('disabled', false).find('.spinner-border').remove();
                }
            });
        }

        const $input = document.getElementById('scan-input');
        const $btn = document.getElementById('brcpicking-enter');
        const $tbody = document.querySelector('#brcpicking-scan-packing-data tbody');
        const $loading = document.getElementById('loadingRow');
        const scannedSet = new Set(); // cegah duplikat (pakai code_fmt sebagai key)

        // Ambil segmen terakhir dari URL, atau kembalikan string asal jika bukan URL
        function getLastPathSegment(str) {
            try {
                const u = new URL(str.trim());
                const path = u.pathname.split('/').filter(Boolean);
                return path[path.length - 1] || '';
            } catch (_) {
                // bukan URL
                return str.trim();
            }
        }

        // Bersihkan non-alnum & uppercase
        function sanitizeRaw(str) {
            return (str || '')
                .toString()
                .toUpperCase()
                .replace(/[^A-Z0-9]/g, '');
        }

        // Validasi & format ke 000.021.X.LCD.01.A.11
        function toDotFormat(raw) {
            console.log('raw', raw);

            // harus 15 char: 3+3+1+3+2+1+2
            if (!/^[A-Z0-9]{15}$/.test(raw)) return null;

            const p1 = raw.slice(0, 3); // 000
            const p2 = raw.slice(3, 6); // 021
            const p3 = raw.slice(6, 7); // X
            const p4 = raw.slice(7, 10); // LCD, CPU, MNP
            const p5 = raw.slice(10, 12); // 01
            const p6 = raw.slice(12, 13); // A
            const p7 = raw.slice(13, 15); // 11

            return `${p1}.${p2}.${p3}.${p4}.${p5}.${p6}.${p7}`;
        }

        function normalizeInput(str) {
            const last = getLastPathSegment(str);
            const compact = sanitizeRaw(last);
            return toDotFormat(compact);
        }

        function showLoading(on) {
            $loading.classList.toggle('d-none', !on);
            $btn.disabled = !!on;
        }

        function showNotFound(msg) {
            document.getElementById('notFoundText').textContent = msg || 'Maaf, data tidak ada.';
            const modal = new bootstrap.Modal(document.getElementById('notFoundModal'));
            modal.show();
        }

        const $naTable = $('#list-non-asset').last();
        const $naTbody = $naTable.find('tbody');
        $('#additem').on('click', function() {
            const no = $naTbody.children('tr').length + 1;

            const $row = $(`
            <tr>
                <td>
                <button type="button" class="btn btn-sm btn-danger btn-delete-row">
                    <i class="fa fa-trash"></i>
                </button>
                </td>
                <td class="row-no">${no}</td>
                <td><input type="text" class="form-control form-control-sm"
                        name="kategori_na[]" placeholder="Kategori" required></td>
                <td><input type="text" class="form-control form-control-sm"
                        name="merk_na[]" placeholder="Detail Barang" required></td>
                <td><input type="number" class="form-control form-control-sm"
                        name="qty_na[]" min="1" value="1" required></td>
                <td><input type="text" class="form-control form-control-sm"
                        name="remark_na[]" placeholder="Tulis Remark"></td>
               
            </tr>
            `);

            $naTbody.append($row);

            // hapus baris
            $row.find('.btn-delete-row').on('click', function() {
                $(this).closest('tr').remove();
                $naTbody.find('.row-no').each(function(i) {
                    $(this).text(i + 1);
                });
            });
        });


        function addRow(data) {
            const no = $tbody.children.length + 1;
            const tr = document.createElement('tr');

            // ⬇️ simpan semua field ke dataset baris (stabil, ga tergantung posisi kolom)
            tr.dataset.code = (data.code || '').trim();
            tr.dataset.kode_sap = (data.kode_sap || '').trim();
            tr.dataset.source = data.source || '';
            tr.dataset.kategori = data.kategori || '';
            tr.dataset.merk = data.merk || '';
            tr.dataset.type = data.type || '';
            tr.dataset.qty = data.qty || '';
            tr.dataset.user = data.user || '';

            tr.innerHTML = `
                   <!-- Kolom Hapus -->
                    <td class="text-center">
                        <button type="button" class="btn btn-sm btn-danger btn-delete-row">
                            <i class="fa fa-trash"></i>
                        </button>
                    </td>
                    <td class="text-center">${no}</td>
                    <td><span class="badge bg-secondary">${data.kategori ?? '-'}</span></td>
                    <td><code>${data.code ?? '-'}</code></td>
                    <td><code>${data.kode_sap ?? '-'}</code></td>

                    <td>${data.merk ?? '-'}</td>
                    <td>${data.type ?? '-'}</td>
                    <td>${data.qty ?? '-'}</td>


                    <td>${data.user ?? '-'}</td>
              

                    <!-- Kolom Remark -->
                    <td>
                        <input type="text" class="form-control form-control-sm remark-input" 
                            name="remarks[${data.code}]" placeholder="Tulis remark...">
                    </td>

                    <td>${data.source ?? '-'}</td>
                `;

            $tbody.appendChild(tr);

            // event tombol hapus
            tr.querySelector('.btn-delete-row').addEventListener('click', function() {
                tr.remove();
                reindexTable();
            });
        }

        // fungsi untuk update ulang nomor urut setelah ada row yang dihapus
        function reindexTable() {
            const $tbody = document.querySelector('#brcpicking-scan-packing-data tbody');
            [...$tbody.querySelectorAll('tr')].forEach((tr, idx) => {
                const noCell = tr.querySelector(
                    'td:nth-child(2)'); // No di kolom ke-2 (setelah tombol hapus)
                if (noCell) noCell.textContent = (idx + 1).toString();
            });
        }

        function handleScan() {
            const rawInput = $input.value.trim();
            if (!rawInput) return;

            const last = getLastPathSegment(rawInput);
            const raw15 = sanitizeRaw(last);
            const codeFmt = toDotFormat(raw15);


            if (!codeFmt) {
                showNotFound('Format kode tidak valid. Harus 15 karakter alfanumerik.');
                $input.select();
                return;
            }

            if (scannedSet.has(codeFmt)) {
                // Cari barisnya
                const $tbody = document.querySelector('#brcpicking-scan-packing-data tbody');
                let row = $tbody.querySelector(`tr[data-code="${CSS.escape(codeFmt)}"]`);

                // fallback kalau belum pakai data-attr: cari dari kolom Code (td ke-4)
                if (!row) {
                    row = [...$tbody.querySelectorAll('tr')].find(tr => {
                        const codeEl = tr.querySelector('td:nth-child(4) code');
                        return (codeEl?.textContent || '').trim() === codeFmt;
                    });
                }

                if (row) {
                    // highlight + scroll + fokus remark
                    row.classList.add('table-warning');
                    row.scrollIntoView({
                        behavior: 'smooth',
                        block: 'center'
                    });
                    setTimeout(() => row.classList.remove('table-warning'), 1200);

                    const remark = row.querySelector('input.remark-input');
                    if (remark) remark.focus();
                }


                $input.value = '';
                return;
            }

            $.ajax({
                url: "{{ url('/trdefc/scan') }}",
                type: "POST",
                dataType: "json",
                headers: {
                    "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content")
                },
                data: {
                    code_raw: raw15,
                    code_fmt: codeFmt
                },
                beforeSend: function() {
                    showLoading(true);
                },
                success: function(json) {
                    if (json && json.found) {
                        addRow(json.data);
                        scannedSet.add(codeFmt);
                    } else {
                        showNotFound(`Maaf, Code ${codeFmt} tidak ada dalam daftar barang rusak.`);
                    }
                },
                error: function(xhr, status, error) {
                    console.error(error);
                    showNotFound("Terjadi kesalahan saat memeriksa data.");
                },
                complete: function() {
                    showLoading(false);
                    $input.value = '';
                    $input.focus();
                }
            });
        }

        // Enter button
        $btn.addEventListener('click', handleScan);
        // Enter key
        $input.addEventListener('keydown', (e) => {
            if (e.key === 'Enter') {
                e.preventDefault();
                handleScan();
            }
        });
    </script>
@endsection