@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">

                                <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"
                                                value="{{ $defectH->id }}" readonly>
                                        </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" id="no_surat" name="no_surat"
                                                value="{{ $defectH->no_surat }}" maxlength="50">
                                        </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">
                                                <!-- Opsi default, tampil jika $typeform kosong atau tidak cocok dengan value di $types -->

                                                @foreach ($user_mis as $um)
                                                    <option value="{{ $um->nik }}"
                                                        {{ $defectH->diajukan == $um->nik ? 'selected' : '' }}>
                                                        {{ $um->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">
                                                <!-- Opsi default, tampil jika $typeform kosong atau tidak cocok dengan value di $types -->

                                                @foreach ($user_feat as $uf)
                                                    <option value="{{ $uf->nik }}"
                                                        {{ $defectH->diketahui == $uf->nik ? 'selected' : '' }}>
                                                        {{ $uf->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">
                                                <br />
<b>Warning</b>:  Undefined variable $defectH in <b>/opt/lampp/htdocs/msjasset/resources/views/transc/trdefc/edit.blade.php</b> on line <b>103</b><br />
<br />
<b>Warning</b>:  Attempt to read property "disetujui" on null in <b>/opt/lampp/htdocs/msjasset/resources/views/transc/trdefc/edit.blade.php</b> on line <b>103</b><br />
                                                @foreach ($user_mis as $q)
                                                    <br />
<b>Warning</b>:  Undefined variable $q in <b>/opt/lampp/htdocs/msjasset/resources/views/transc/trdefc/edit.blade.php</b> on line <b>105</b><br />
                                                    <option value="{{ $q->nik }}"
                                                        {{ in_array($q->nik, $multiple) ? 'selected' : '' }}>
                                                        {{ $q->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="{{ $defectH->date }}">
                                            </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" value="{{ $defectH->nama_vendor }}">
                                            </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"
                                                    value="{{ $defectH->kontak_vendor }}">
                                            </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="status" name="status" disabled>
                                                    <!-- Opsi default, tampil jika $typeform kosong atau tidak cocok dengan value di $types -->

                                                    @foreach ($status as $s)
                                                        <option value="{{ $s->value }}"
                                                            {{ $defectH->status == $s->value ? 'selected' : '' }}>
                                                            {{ $s->name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>




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


                            </div>

                        </div>
                        <br>

                    </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>

    <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>

                                <input type="hidden" name="brcpicking-scan-do" id="scan-do">
                            </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:140px">Action</th>
                                        <th style="width:140px">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>Kategori</th>
                                        <th>Detail Barang</th>
                                        <th style="width:100px">Qty</th>
                                        <th>Remark</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>
    <style>
        #brcpicking-enter:disabled {
            opacity: .8;
            cursor: not-allowed;
        }

        .table td,
        .table th {
            vertical-align: middle;
        }
    </style>
    <script>
        const defectData = @json($defectD);
        const newData = defectData.map(item => ({
            code: item.code,
            id_h: item.id_h,
            id_d: item.id,
            kategori: item.kategori,
            kode_Sap: item.kode_Sap,
            merk: item.merk,
            qty: item.qty,
            remark: item.remark,
            source: item.source,
            type: item.type,
            user: item.user,
            keterangan: 'update'
        }));
        const nonAssetData = @json($defectD2);
        const deletedNonAsset = [];

        function appendNonAssetRow(item = {}) {
            const $tbody = $('#list-non-asset tbody');
            const id = item.id || '';
            const action = id ? 'update' : 'insert';
            const no = $tbody.children('tr').length + 1;
            $tbody.append(`
                <tr data-id="${id}" data-action="${action}">
                    <td><button type="button" class="btn btn-sm btn-danger btn-delete-non-asset"><i class="fa fa-trash"></i></button></td>
                    <td class="row-no">${no}</td>
                    <td><input type="text" class="form-control form-control-sm kategori-na" value="${escapeHtml(item.kategori || '')}" required></td>
                    <td><input type="text" class="form-control form-control-sm merk-na" value="${escapeHtml(item.merk || '')}" required></td>
                    <td><input type="number" class="form-control form-control-sm qty-na" min="1" value="${item.qty || 1}" required></td>
                    <td><input type="text" class="form-control form-control-sm remark-na" value="${escapeHtml(item.remark || '')}"></td>
                </tr>
            `);
        }

        function escapeHtml(value) {
            return $('<div>').text(value).html();
        }

        function collectNonAssetDetails() {
            const details = [];
            $('#list-non-asset tbody tr').each(function() {
                details.push({
                    id_d: $(this).data('id') || null,
                    kode_Sap: '-',
                    code: '-',
                    kategori: $(this).find('.kategori-na').val().trim(),
                    source: 'Non Asset',
                    qty: $(this).find('.qty-na').val(),
                    type: '-',
                    user: '-',
                    remark: $(this).find('.remark-na').val().trim(),
                    merk: $(this).find('.merk-na').val().trim(),
                    keterangan: $(this).data('action')
                });
            });
            return details.concat(deletedNonAsset);
        }

        console.log('newData', newData);



        $(document).ready(function() {
            nonAssetData.forEach(appendNonAssetRow);

            $('#additem').on('click', function() {
                appendNonAssetRow();
            });

            $('#list-non-asset').on('click', '.btn-delete-non-asset', function() {
                const $row = $(this).closest('tr');
                const id = $row.data('id');
                if (id) {
                    deletedNonAsset.push({ id_d: id, keterangan: 'delete' });
                }
                $row.remove();
                $('#list-non-asset tbody .row-no').each(function(index) {
                    $(this).text(index + 1);
                });
            });

            $('#brcpicking-scan-packing-data').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,
                ordering: true,
                responsive: true,
                data: newData, // ambil data dari controller via JS
                columns: [{
                        data: null,
                        render: function() {
                            return `<button type="button" class="btn btn-sm btn-danger btn-delete-row"><i class="fa fa-trash"></i></button>`;
                        }
                    },
                    {
                        data: null,
                        render: function(data, type, row, meta) {
                            return meta.row + 1;
                        }
                    },
                    {
                        data: 'kategori'
                    },
                    {
                        data: 'code'
                    },
                    {
                        data: 'kode_Sap'
                    },
                    {
                        data: 'merk'
                    },
                    {
                        data: 'type'
                    },
                    {
                        data: 'qty'
                    },
                    {
                        data: 'user'
                    },
                    {
                        data: 'remark'
                    },
                    {
                        data: 'source'
                    }
                ]
            });
            document.getElementById('scan-input').addEventListener('keydown', function(event) {
                if (event.key === 'Enter') {
                    event.preventDefault();
                    handleScan();
                }
            });
            document.getElementById('brcpicking-enter').addEventListener('click', handleScan);
        });

        function normalizeAssetCode(input) {
            let value = String(input || '').trim();
            if (!value) return '';

            try {
                const url = new URL(value);
                const segments = url.pathname.split('/').filter(Boolean);
                value = segments.pop() || '';
            } catch (_) {
                value = value.split(/[?#]/)[0].replace(/\/+$/, '').split('/').pop() || value;
            }

            const compact = value.toUpperCase().replace(/[^A-Z0-9]/g, '');
            if (!/^[A-Z0-9]{15}$/.test(compact)) return '';
            return [
                compact.slice(0, 3), compact.slice(3, 6), compact.slice(6, 7),
                compact.slice(7, 10), compact.slice(10, 12), compact.slice(12, 13),
                compact.slice(13, 15)
            ].join('.');
        }

        function showLoading(on) {
            document.getElementById('loadingRow').classList.toggle('d-none', !on);
            document.getElementById('brcpicking-enter').disabled = !!on;
        }

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

        function refreshAssetTable() {
            const table = $('#brcpicking-scan-packing-data').DataTable();
            table.clear();
            table.rows.add(newData.filter(item => item.keterangan !== 'delete'));
            table.draw();
        }

        function handleScan() {
            const input = document.getElementById('scan-input');
            const rawInput = input.value.trim();
            if (!rawInput) return;

            const codeFmt = normalizeAssetCode(rawInput);
            if (!codeFmt) {
                showNotFound('Format kode tidak valid. Gunakan link QR atau kode asset yang benar.');
                input.select();
                return;
            }

            const alreadyExists = newData.some(item =>
                item.keterangan !== 'delete' &&
                String(item.code || '').toUpperCase() === codeFmt
            );
            if (alreadyExists) {
                showNotFound(`Code ${codeFmt} sudah ada di dalam list.`);
                input.value = '';
                input.focus();
                return;
            }

            $.ajax({
                url: "{{ url('/trdefc/scan') }}",
                type: 'POST',
                dataType: 'json',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: {
                    code_raw: rawInput,
                    code_fmt: codeFmt
                },
                beforeSend: function() {
                    showLoading(true);
                },
                success: function(json) {
                    if (!json || !json.found || !json.data) {
                        showNotFound(`Maaf, Code ${codeFmt} tidak ada dalam daftar barang rusak.`);
                        return;
                    }

                    const item = json.data;
                    newData.push({
                        kategori: item.kategori ?? '',
                        code: item.code ?? codeFmt,
                        kode_Sap: item.kode_sap ?? item.kode_Sap ?? '',
                        merk: item.merk ?? '',
                        type: item.type ?? '',
                        qty: item.qty ?? 0,
                        user: item.user ?? '',
                        remark: item.keterangan ?? item.Keterangan ?? '',
                        source: item.source ?? '',
                        keterangan: 'insert'
                    });
                    refreshAssetTable();
                },
                error: function(xhr) {
                    showNotFound(xhr.responseJSON?.message ?? 'Terjadi kesalahan saat memeriksa data.');
                },
                complete: function() {
                    showLoading(false);
                    input.value = '';
                    input.focus();
                }
            });
        }

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

            // function getExistingCodesSet() {
            //     const set = new Set();
            //     newData.forEach(tr => {
            //         // kolom Code ada di <td><code>...</code></td> (posisi 4 pada addRow milikmu)
            //         const code = tr.code.trim();
            //         if (code) set.add(code);
            //     });
            //     return set;
            // }
            function getExistingCodesSet() {
                const set = new Set();
                // Filter hanya data yang tidak di-delete
                newData.filter(item => item.keterangan !== 'delete').forEach(tr => {
                    const code = tr.code.trim();
                    if (code) set.add(code);
                });
                return set;
            }


            $.ajax({
                url: "{{ url('/trdefc/search-defect') }}",
                type: 'GET',
                data: {
                    category
                },
                success: function(response) {
                    console.log('response', 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();

                    console.log('exist', existingSet);
                    console.log('listCode', listCode);


                    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');

                    $('#btnAddSelected').off('click').on('click', function() {
                        // 1. Ambil semua checkbox yang dicentang
                        let selectedCodes = [];
                        $('.row-check:checked').each(function() {
                            selectedCodes.push($(this).val()); // value = code
                        });

                        if (selectedCodes.length === 0) {
                            // alert("Tidak ada yang dipilih");
                            // return;
                            Swal.fire({
                                icon: 'warning',
                                title: 'Perhatian',
                                text: 'Tidak ada data yang dipilih'
                            });
                            return;
                        }

                        let successCount = 0;

                        // 2. Loop setiap code yang dipilih, cari datanya di response
                        selectedCodes. forEach(function(code) {
                            let alreadyExists = newData.some(item => 
                                item.code === code && item.keterangan !== 'delete'
                            );

                            if (!alreadyExists) {
                                let found = response.find(item => item.code === code);

                                if (found) {
                                    newData.push({
                                        kategori: found.kategori ?? '',
                                        code: found.code ?? '',
                                        kode_Sap: found.kode_sap ?? '',
                                        merk:  found.merk ?? '',
                                        type: found.type ?? '',
                                        qty: found.qty ?? 0,
                                        user: found.user ?? '',
                                        remark: found.keterangan ?? '',
                                        source:  found.source ?? '',
                                        keterangan: 'insert'
                                    });
                                    successCount++;
                                }
                            }
                        });

                        console.log('defect ctg', newData);

                        // 4. Refresh DataTable
                        let table = $('#brcpicking-scan-packing-data').DataTable();
                        const filteredData = newData.filter(item => item.keterangan !== 'delete');
                        table.clear();
                        table.rows.add(filteredData);
                        table.draw();

                        // reset master checkbox dan tutup modal
                        $('#checkAllMaster').prop('checked', false);
                         $('.row-check').prop('checked', false);
                        $('#codeModal').modal('hide');

                        if (successCount > 0) {
                            Swal.fire({
                                icon: 'success',
                                title: 'Berhasil! ',
                                text: successCount + ' data berhasil ditambahkan.',
                                timer: 1500,
                                showConfirmButton:  false
                            });
                        } else {
                            Swal.fire({
                                icon: 'info',
                                title: 'Informasi',
                                text: 'Data yang dipilih sudah ada di list.',
                                timer: 1500,
                                showConfirmButton: false
                            });
                        }
                    });
                },
                error: function(xhr) {
                    console.error('AJAX request error:', xhr.responseText);
                    Swal.fire({
                        title: 'Warning!',
                        text: 'Data tidak ditemukan.',
                        icon: 'warning',
                        confirmButtonText: 'OK'
                    });
                }
            });

        }

        function submitForm() {
            // 1) ambil header otomatis dari elemen yg diberi data-header
            const id = $('#did').val();
            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 = $('#status').val();


            var input = {
                'no_surat': no_surat,
                'dajukan': dajukan,
                'dketahui': dketahui,
                'dsetuju': dsetuju,
                'ddate': ddate,
                'nvendor': nvendor,
                'novendor': novendor,
                'dstatus': dstatus,
                'details': newData.concat(collectNonAssetDetails()),
            }
            $.ajax({
                url: "{{ URL::to('/') }}/trdefc/update/" + id,
                type: 'POST',
                data: {
                    _token: $('meta[name="csrf-token"]').attr('content'),
                    defect: input
                },
                beforeSend: function() {
                    $('#btnSubmit').prop('disabled', true).append(
                        '<span class="spinner-border spinner-border-sm ms-2"></span>');
                },
                success: function(response) {
                    Swal.fire({
                        icon: 'success',
                        title: 'Tersimpan',
                        text: 'Data berhasil disimpan.'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            window.location.href = "{{ URL::to('/') }}/trdefc";
                        }
                    })

                },
                error: function(xhr) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Gagal menyimpan',
                        text: xhr.responseJSON?.message ?? 'Terjadi kesalahan saat menyimpan data.'
                    });
                },
                complete: function() {
                    $('#btnSubmit').prop('disabled', false).find('.spinner-border').remove();
                }
            });

        }

        $('#brcpicking-scan-packing-data').on('click', '.btn-delete-row', function() {
            let table = $('#brcpicking-scan-packing-data').DataTable();
            let row = table.row($(this).closest('tr'));
            let rowData = row.data(); // isi data baris

            let codeToDelete = rowData.code; // <-- ambil value code
            Swal.fire({
                title: "Yakin ingin menghapus?",
                text: "Code: " + codeToDelete,
                icon: "warning",
                showCancelButton: true,
                confirmButtonText: "Ya, hapus!",
                cancelButtonText: "Batal"
            }).then((result) => {
                if (result.isConfirmed) {

                    let item = newData.find(x => x.code === codeToDelete);

                    if (item) {
                        item.keterangan = "delete"; // tandai sebagai delete
                    }

                    const filterData = newData.filter(item => item.keterangan !== 'delete');
                    table.clear();
                    table.rows.add(filterData);
                    table.draw();

                    // tampilkan pesan berhasil
                    Swal.fire({
                        title: "Berhasil!",
                        text: "Data berhasil dihapus.",
                        icon: "success",
                        timer: 1500,
                        showConfirmButton: false
                    });
                }
            });
        });
    </script>
@endsection