@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@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 back --}}
                        <button class="btn btn-secondary mb-0" onclick="history.back()"><i class="fas fa-circle-left me-1">
                            </i><span class="font-weight-bold">Back</button>
                        {{-- check authorize add --}}
                        @if ($authorize->add == '1')
                            {{-- button save --}}
                            <button class="btn btn-primary mb-0" onclick="postData()" id="btn_send" disabled><i
                                    class="fas fa-paper-plane"></i><span class="font-weight-bold"> Send to PPC</button>
                            <button class="btn btn-info mb-0" onclick="sendApprove()" id="btn_send_approve" disabled><i
                                    class="fas fa-paper-plane"></i><span class="font-weight-bold"> Send to Approve</button>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <form role="form" method="POST" action="{{ URL::to($url_menu) }}" id="{{ $dmenu }}-form"
                        enctype="multipart/form-data">
                        @csrf
                        <div class="card-body">
                            <p class="text-uppercase text-sm">Insert {{ $title_menu }}</p>
                            <hr class="horizontal dark mt-0">
                            <div class="row">
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <div class="form-group">
                                            <label for="request_by" class="col-form-label">Request by</label>
                                            <input class="form-control" type="text" id="request_by" name="request_by"
                                                value="{{ $user_login->firstname }}" readonly>
                                        </div>
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label for="request_date" class="col-form-label">Stuffing Date</label>
                                        <input class="form-control" type="date" id="request_date" name="request_date">
                                    </div>
                                    <div class="col-md-3 mb-3">
                                        <button type="button" class="btn bg-gradient-primary" onclick="searchData()">
                                            <i class="fas fa-search"></i><span class="font-weight-bold">
                                                Search Data
                                        </button>
                                    </div>

                                    <div class="col-12 d-flex justify-content-between align-items-center">
                                        <h5 class="mb-0"><strong>Detail</strong></h5>
                                        <p id="textLoad" class="mb-0" hidden>
                                            <span class="spinner-border spinner-border-sm" role="status"
                                                aria-hidden="true"></span>
                                            Update data SO...
                                        </p>
                                    </div>

                                    <div id="inputExcel">
                                        <div id="spreadsheet" style="height: 100%"></div>
                                        <textarea id="hot_data" name="data" hidden></textarea>
                                    </div>
                                </div>
                            </div>
                            <hr class="horizontal dark">
                            <!-- Keterangan -->
                            <div class="row">
                                <div class="col-md-2">
                                    <p style="font-weight: bold;">Status Pengiriman:</p>
                                    <table class="table-bordered">
                                        <tr>
                                            <td><img src="{{ asset('/img/icons/check.png') }}" alt="Check" width="20px"
                                                    style="margin: 5px">
                                            </td>
                                            <td>
                                                <p style="margin: 5px">Sudah Terkirim</p>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><img src="{{ asset('/img/icons/cross.png') }}" alt="Cross" width="20px"
                                                    style="margin: 5px"></td>
                                            <td>
                                                <p style="margin: 5px">Belum Terkirim</p>
                                            </td>
                                        </tr>
                                    </table>
                                </div>

                                <div class="col-md-6">
                                    <p style="font-weight: bold;">Status Ketersediaan Stok:</p>
                                    <table class="table-bordered">
                                        <tr>
                                            <td style="padding: 5px;"><strong>Ready</strong></td>
                                            <td style="padding: 5px;">Stok barang lebih dari atau sama dengan Order Qty</td>
                                        </tr>
                                        <tr>
                                            <td style="padding: 5px;"><strong>OK</strong></td>
                                            <td style="padding: 5px;">Stok barang kurang dari Order Qty dan diperkirakan
                                                ready
                                                di hari H Stuffing
                                            </td>
                                        </tr>
                                        <tr>
                                            <td style="padding: 5px;"><strong>Nego</strong></td>
                                            <td style="padding: 5px;">Stok barang kurang dari Order Qty dan tidak ready di
                                                hari
                                                H Stuffing</td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer align-items-center pt-0 pb-2">
                            <input type="hidden" id="id_request" name="id_request">
                            <input type="hidden" id="id_user" name="id_user" value="{{ $user_name }}">
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal -->
    <div class="modal fade" id="searchSOModal" tabindex="-1" role="dialog" aria-labelledby="searchSOModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="searchSOModalLabel">Daftar SO</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="table-responsive">
                        <table class="table table-bordered table-striped" id="table-so">
                            <thead class="thead-light">
                                <tr>
                                    <th>
                                        <input type="checkbox" id="checkAllSO">
                                    </th>
                                    <th>SO</th>
                                    <th>PO</th>
                                    <th>Customer</th>
                                    <th>Item</th>
                                    <th>Material</th>
                                    <th>Order Qty</th>
                                    <th>Remaining Qty</th>
                                    <th>Delivered Qty</th>
                                    <th>Current Stock (Roll)</th>
                                    <th>GSM</th>
                                    <th>Width</th>
                                    <th>Length</th>
                                    <th>Weight</th>
                                    <th>UOM</th>
                                    <th>Shipment By</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer d-flex justify-content-between">
                    <button type="button" class="btn btn-primary" onclick="saveSelectedSO()">Save</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal -->
    <div class="modal fade" id="modalItem" tabindex="-1" role="dialog" aria-labelledby="modalItemLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalItemLabel">Detail Item</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">X</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="table-responsive">
                        <table class="table table-bordered table-striped" id="table-item">
                            <thead class="thead-light">
                                <tr>
                                    <th>Delivery Date</th>
                                    <th>Order Quantity</th>
                                    <th>Confirm Quantity</th>
                                    <th>Delivered Quantity</th>
                                    <th>Sales Unit</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="searchModal" tabindex="-1" role="dialog" aria-labelledby="searchModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="searchModalLabel">Search Data Schedule Line</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="table-responsive" style="max-height: 500px; overflow-y: auto;">
                        <table class="table table-bordered table-striped" id="tblSearch">
                            <thead class="table-light">
                                <tr>
                                    <th><input type="checkbox" id="check-all" /></th>
                                    <th>SO</th>
                                    <th>PO</th>
                                    <th>Customer</th>
                                    <th>Material</th>
                                    <th>Order Qty</th>
                                    <th>GSM</th>
                                    <th>Width</th>
                                    <th>Length</th>
                                    <th>Weight</th>
                                    <th>Shipment By</th>
                                    <th>Code Customer</th>
                                    <th>Incoterm</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-bs-dismiss="modal" id="save-selected">Select
                        Data</button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal -->
    <div class="modal fade" id="tblApprove" tabindex="-1" role="dialog" aria-labelledby="tblApproveLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="tblApproveLabel">List SO</h5>
                </div>
                <div class="modal-body" style="max-height: 70vh; overflow-y: auto;">
                    <button class="btn btn-secondary mb-3" id="btn_check" onclick="centangAll()"><span
                            class="font-weight-bold">Pilih
                            Semua</button>
                    <div class="table-responsive">
                        <table class="table table-striped table-bordered" id="tblSo">
                            <thead>
                                <tr>
                                    <th>Check</th>
                                    <th>SO</th>
                                    <th>Submit to</th>
                                    <th>PO</th>
                                    <th>Customer</th>
                                    <th>Material</th>
                                    <th>Order Qty</th>
                                    <th>Current Stock</th>
                                    <th>GSM</th>
                                    <th>Width</th>
                                    <th>Length</th>
                                    <th>Weight</th>
                                    <th>Note Marketing</th>
                                    <th>Note PPC</th>
                                    <th>Note Shipping</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn bg-gradient-primary" id="btnKirim">Send</button>
                </div>
            </div>
        </div>
    </div>
    {{-- check flag js on dmenu --}}
    @if ($jsmenu == '1')
        @if (view()->exists("js.{$dmenu}"))
            @push('addjs')
                {{-- file js in folder (resources/views/js) --}}
                @include('js.' . $dmenu);
            @endpush
        @else
            @push('addjs')
                <script>
                    Swal.fire({
                        title: 'JS Not Found!!',
                        text: 'Please Create File JS',
                        icon: 'error',
                        confirmButtonColor: '#028284'
                    });
                </script>
            @endpush
        @endif
    @endif
@endsection
@push('js')
    {{-- JS untuk JSpreadsheet --}}

    <script>
        let internalEdit = false;
        let rowsToRemove = [];
        let requestRows = [];
        let requestTimeout = null;

        let isFetchingSAP = false; // lock ketika sedang ambil data SAP
        let autoSaveLocked = false;
        let autoSaveTimeout = null;
        let isProcessing = false;

        var existingRowCount = "";
        const headers = [
            "SO",
            "PO",
            "Customer",
            "Material",
            "Order Qty",
            "Current Stock (Roll)",
            "Actual Qty",
            "GSM",
            "Width",
            "Length",
            "Weight",
            "Shipment By",
            "Status PPC",
            "Status Shipping",
            "Note Marketing",
            "Note PPC",
            "Note Shipping",
            "Other Note",
            "ID",
            "Flag",
            "Code Customer",
            "Incoterm",
            "Approved",
            "Remark"
        ];

        function generateEmptyRows(n) {
            return Array.from({
                length: n
            }, () => Array(headers.length).fill(""));
        }

        const hot = new Handsontable(document.getElementById('spreadsheet'), {
            data: generateEmptyRows(200),
            colHeaders: headers,
            columns: headers.map((header, index) => {
                if (index === 12 || index === 13 || index === 22) {
                    return {
                        renderer: iconRenderer,
                    };
                } else {
                    return {
                        type: 'text'
                    };
                }
            }),
            columnSorting: true,
            rowHeaders: true,
            width: '100%',
            height: 500,
            stretchH: 'none',
            autoColumnSize: {
                useHeaders: true
            },
            colWidths: function(col) {
                // Override kolom tertentu saja
                if (col === 2 || col === 3) {
                    return 250;
                }

                // Return undefined supaya pakai autoColumnSize
                return 170;
            },
            contextMenu: true,
            manualColumnResize: true,
            manualRowResize: true,
            themeName: 'ht-theme-main',
            licenseKey: 'non-commercial-and-evaluation',
            hiddenColumns: {
                columns: [18, 19, 20, 21],
                indicators: false
            },
            cells: function(row, col) {
                const cellProperties = {};
                const rowData = this.instance.getSourceDataAtRow(row);
                const status = rowData[19];
                if (col === 12 || col === 13 || col === 22) {
                    cellProperties.readOnly = true;
                    return cellProperties;
                }
                if (isProcessing) {
                    cellProperties.readOnly = true;
                    return cellProperties;
                }
                if (status == "1") {
                    cellProperties.readOnly = true;
                } else {
                    const editableCols = [0, 4, 14, 17];
                    cellProperties.readOnly = !editableCols.includes(col);
                }
                return cellProperties;
            }
        });

        // renderer untuk kolom tertentu
        function iconRenderer(instance, td, row, col, prop, value, cellProperties) {
            Handsontable.dom.empty(td);

            const img = document.createElement('img');
            img.className = 'icon';
            img.style.width = '20px';
            img.style.height = '20px';

            if (value === "1" || value === "true" || value === true || value === "Approve") {
                img.src = '{{ asset('/img/icons/check.png') }}'; // ambil dari public/img/icons
                img.alt = 'Yes';
            } else if (value === "0" || value === "false" || value === false || value === "Reject") {
                img.src = '{{ asset('/img/icons/cross.png') }}';
                img.alt = 'No';
            } else {
                td.textContent = '';
                return td;
            }

            td.style.textAlign = 'center';
            td.appendChild(img);
            return td;
        }

        const inputTanggal = document.getElementById('request_date');

        let tanggalSebelumnya = ''; // awal kosong

        inputTanggal.addEventListener('change', function() {
            const tanggalBaru = this.value;
            const pembuat = document.getElementById("request_by").value;

            // Jika tanggal sebelumnya kosong → artinya pertama kali isi, langsung set tanpa konfirmasi
            if (!tanggalSebelumnya) {
                tanggalSebelumnya = tanggalBaru;
                loadDataTgl(pembuat, tanggalBaru);
                return;
            }

            // Kalau sudah ada data → munculkan konfirmasi
            Swal.fire({
                title: 'Ganti Tanggal?',
                text: 'Data yang belum dikirim akan hilang. Lanjutkan?',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Ya, Lanjut',
                cancelButtonText: 'Batal',
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33'
            }).then((result) => {
                if (result.isConfirmed) {
                    loadDataTgl(pembuat, tanggalBaru);
                } else {
                    // Batalkan perubahan, kembalikan tanggal lama
                    inputTanggal.value = tanggalSebelumnya;
                }
            });
        });

        // === AUTO SAVE ===
        function triggerAutoSave() {
            return new Promise((resolve, reject) => {
                if (isFetchingSAP) {
                    console.log("⏸️ AutoSave ditunda — masih ambil data dari SAP");
                    return resolve(); // lanjut saja, tidak perlu tunggu
                }

                if (autoSaveLocked) {
                    console.log("⏸️ AutoSave diabaikan — masih dalam proses sebelumnya");
                    return resolve(); // lanjut juga
                }

                clearTimeout(autoSaveTimeout);
                autoSaveTimeout = setTimeout(() => {
                    autoSaveLocked = true;
                    console.log("💾 AutoSave dijalankan");

                    autoSave()
                        .then(() => {
                            console.log("✅ AutoSave selesai");
                            autoSaveLocked = false;
                            resolve(); // selesai autosave
                        })
                        .catch((err) => {
                            console.error("❌ AutoSave gagal:", err);
                            autoSaveLocked = false;
                            resolve(); // meski gagal, lanjut biar tidak hang
                        });
                }, 500);
            });
        }

        $(document).ready(function() {
            if (localStorage.getItem("nama") !== null) {
                const nama = localStorage.getItem('nama');
                const tgl = localStorage.getItem('tgl');

                document.getElementById('request_date').value = tgl;

                loadDataTgl(nama, tgl);

            }

            // === HOOK AFTERCHANGE ===
            hot.addHook('afterChange', (changes, source) => {
                if (!changes || source === 'loadData' || internalEdit) return;

                const isColumn0Changed = changes.some(([_, col]) => col === 0);
                const isColumn4Changed = changes.some(([_, col]) => col === 4);
                const isColumn14Changed = changes.some(([_, col]) => col === 14);
                const isColumn17Changed = changes.some(([_, col]) => col === 17);

                changes.forEach(([row, col, oldValue, newValue]) => {

                    // === 1️⃣ Perubahan di kolom 0 (Sales Order)
                    if (col === 0) {
                        const fullOrder = hot.getDataAtCell(row, 0);
                        const idDetail = hot.getDataAtCell(row, 18);

                        if (!fullOrder || fullOrder.trim() === '') {
                            if (idDetail) rowsToRemove.push(idDetail);
                            hot.alter('remove_row', row);
                        } else {
                            // Ambil hanya bagian sebelum tanda "-"
                            const [sales_order, item_order] = fullOrder.split('-');
                            if (sales_order && item_order) {
                                const exists = requestRows.find(r => r.row === row);
                                if (!exists) {
                                    requestRows.push({
                                        row,
                                        sales_order: sales_order.trim(),
                                        item_order: item_order.trim()
                                    });
                                }
                            }
                        }
                    }

                    // === 2️⃣ Jika Qty berubah → hitung ulang berat
                    if (col === 4) {
                        const qty = parseFloat(hot.getDataAtCell(row, 4)) || 0;
                        const gsm = parseFloat(hot.getDataAtCell(row, 7)) || 0;
                        const lebar = parseFloat(hot.getDataAtCell(row, 8)) || 0;
                        const panjang = parseFloat(hot.getDataAtCell(row, 9)) || 0;
                        const berat = (gsm * lebar * panjang * qty) / 1000;

                        hot.setDataAtCell(row, 10, parseFloat(berat.toFixed(2)));
                    }
                });

                // === Jalankan batch request SAP (dengan debounce)
                if (isColumn0Changed) {
                    requestTimeout = setTimeout(() => {
                        processRequestRows();
                    }, 500);
                }
            });

            hot.addHook('afterRemoveRow', function(index, amount, physicalRows, source) {
                if (rowsToRemove.length > 0) {
                    $.ajax({
                        url: "{{ URL::to('/') }}/mrkmsj/delete-rows",
                        method: 'POST',
                        contentType: 'application/json',
                        data: JSON.stringify({
                            deletedRowIds: rowsToRemove
                        }),
                        headers: {
                            "X-CSRF-TOKEN": $("meta[name='csrf-token']").attr("content")
                        },
                        success: function(response) {
                            console.log('✅ Data dihapus dari database:', response);
                            rowsToRemove = []; // reset agar tidak dobel kirim
                        },
                        error: function(xhr) {
                            console.error('❌ Gagal hapus data dari DB:', xhr.responseText);
                        }
                    });
                }

            });

            // Event untuk checkbox "check all"
            $('#checkAllSO').on('change', function() {
                const isChecked = $(this).is(':checked');
                $('#table-so tbody input[type="checkbox"]:not(:disabled)').prop('checked', isChecked);
            });

            $('#table-so tbody').on('change', 'input[type="checkbox"]', function() {
                const all = $('#table-so tbody input[type="checkbox"]:not(:disabled)').length;
                const checked = $('#table-so tbody input[type="checkbox"]:not(:disabled):checked')
                    .length;
                $('#checkAllSO').prop('checked', all === checked);
            });

            // Hitung ulang saat input qty-po kehilangan fokus atau diubah
            $(document).on('blur change', '.qty-po', function() {
                calculateTotalQty();
            });

            // Hitung juga saat tekan Enter
            $(document).on('keydown', '.qty-po', function(e) {
                if (e.key === 'Enter') {
                    e.preventDefault(); // Hindari submit form
                    calculateTotalQty();
                }
            });

            // Hitung sekali saat halaman awal dimuat
            calculateTotalQty();
        });

        // === PROSES REQUEST BATCH ===
        function processRequestRows() {
            if (requestRows.length === 0) return;

            console.log("🔁 Memproses requestRows:", requestRows);
            const batch = [...requestRows];
            requestRows = [];
            isFetchingSAP = true; // 🔒 kunci autoSave selama proses SAP
            // Ambil elemen berdasarkan id
            const textLoad = document.getElementById('textLoad');
            const stuffDate = document.getElementById('request_date');

            // Jika ingin menampilkan elemen (karena awalnya hidden)
            textLoad.hidden = false;
            stuffDate.disabled = true;

            document.getElementById('btn_send').disabled = true;
            document.getElementById('btn_send_approve').disabled = true;

            isProcessing = true;
            hot.render();
            // Ubah setiap request menjadi Promise
            const requests = batch.map(r => {
                return new Promise((resolve) => {
                    $.ajax({
                        url: 'https://fiori.spunindo.com/sap/bc/zsr_jsonhd/ZFSOSCHEDULE' +
                            '?sap-client=300&sap-user=JIS-2&sap-password=K35RCI&sap-language=EN' +
                            '&format=json&p_vbeln=0' + encodeURIComponent(r.sales_order),
                        type: 'POST',
                        success: function(res) {
                            const arrResp = res['ET_ZVSOSCHEDULELINE'] || [];
                            const hasil = arrResp.find(item => Number(item.POSNR) === Number(r
                                .item_order));
                            if (!hasil) return resolve();

                            const matnr = hasil.MATNR;
                            const kodeCust = hasil.KODE_CUST;
                            const qtyPo = hasil.BMENG;
                            const length = hasil.ZZLENGTH;

                            // === REQUEST STOCK FG ===
                            $.ajax({
                                url: 'https://fiori.spunindo.com/sap/bc/zsr_jsonhd/ZFMMSTOCKFG' +
                                    '?sap-client=300&sap-user=JIS-2&sap-password=K35RCI&sap-language=EN' +
                                    '&format=json&p_matnr=' + matnr,
                                type: 'POST',
                                success: function(response) {
                                    const arrayResp = response['ET_ZVMB52_FG'] ||
                                [];
                                    const qtyFilter = arrayResp.filter(item => item
                                        .KODECUST == kodeCust);

                                    internalEdit = true;
                                    hot.batch(() => {
                                        hot.setDataAtCell(r.row, 4, qtyPo ??
                                            "");
                                        hot.setDataAtCell(r.row, 5,
                                            qtyFilter.length);
                                        hot.setDataAtCell(r.row, 1, hasil
                                            ?.BSTNK ?? '');
                                        hot.setDataAtCell(r.row, 2, hasil
                                            ?.NAMA_CUST ?? '');
                                        hot.setDataAtCell(r.row, 3, hasil
                                            ?.MATNR ?? '');
                                        hot.setDataAtCell(r.row, 7, hasil
                                            ?.ZZGSM ?? '');
                                        hot.setDataAtCell(r.row, 8, hasil
                                            ?.ZZWIDTHROLL ?? '');
                                        hot.setDataAtCell(r.row, 9,
                                            length ?? '');

                                        const v4 = parseFloat(hot
                                                .getDataAtCell(r.row, 4)) ||
                                            0;
                                        const v7 = parseFloat(hot
                                                .getDataAtCell(r.row, 7)) ||
                                            0;
                                        const v8 = parseFloat(hot
                                                .getDataAtCell(r.row, 8)) ||
                                            0;
                                        const v9 = parseFloat(hot
                                                .getDataAtCell(r.row, 9)) ||
                                            0;
                                        const berat = (v4 * v7 * v8 * v9) /
                                            1000;
                                        hot.setDataAtCell(r.row, 10, berat
                                            .toFixed(2));

                                        hot.setDataAtCell(r.row, 11, hasil
                                            ?.SHIPMENTBY ?? '');
                                        hot.setDataAtCell(r.row, 20,
                                            kodeCust ?? "");
                                    });
                                    internalEdit = false;
                                    resolve(); // ✅ Tandai request selesai
                                },
                                error: function() {
                                    console.error("❌ Error FG:", r.sales_order);
                                    resolve();
                                }
                            });
                        },
                        error: function() {
                            console.error("❌ Error Schedule:", r.sales_order);
                            resolve();
                        }
                    });
                });
            });

            // Tunggu semua request selesai
            Promise.all(requests).then(() => {
                console.log("✅ Semua request SAP selesai diproses");
                isFetchingSAP = false;
                document.getElementById('btn_send').disabled = false;
                document.getElementById('btn_send_approve').disabled = false;
                textLoad.hidden = true;
                stuffDate.disabled = false;
                // triggerAutoSave(); // 💾 Simpan data hanya sekali di akhir
                isProcessing = false;
                hot.render();
            });
        }


        function autoSave() {
            const allData = hot.getSourceData();
            const reqName = document.getElementById('request_by').value;
            const reqDate = document.getElementById('request_date').value;

            const filledRows = allData.filter(row =>
                row.some(cell => cell !== null && cell !== "")
            );

            console.log("hasil save", filledRows);

            // ⚡ return hasil $.ajax agar bisa ditunggu oleh triggerAutoSave()
            return $.ajax({
                    url: "{{ URL::to('/') }}/mrkmsj/autoSave",
                    type: "POST",
                    contentType: "application/json",
                    data: JSON.stringify({
                        rows: filledRows,
                        request_by: reqName,
                        request_date: reqDate
                    }),
                    headers: {
                        "X-CSRF-TOKEN": $("meta[name='csrf-token']").attr("content")
                    }
                })
                .done(function(res) {
                    console.log('✅ AutoSave berhasil:', res);
                })
                .fail(function(xhr) {
                    console.error('❌ AutoSave error:', xhr.responseText);
                    alert("Gagal menyimpan data!");
                })
                .always(function() {
                    document.getElementById('btn_send').disabled = false;
                    document.getElementById('btn_send_approve').disabled = false;
                });
        }

        // function listSO() {
        //     var nomor_so = document.getElementById('nomor_so').value;
        //     $.ajax({
        //         url: 'https://fiori.spunindo.com/sap/bc/zsr_jsonhd/ZFSOSCHEDULE?sap-client=300&sap-user=JIS-2&sap-password=K35RCI&sap-language=EN&format=json&p_eyear=&p_emonth=&p_vbeln=0' +
        //             nomor_so,
        //         type: 'POST',
        //         header: {
        //             'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        //         },
        //         success: function(response) {
        //             // arahkan ke function load data

        //             loadDataToTable(response);
        //         },
        //         error: function(xhr, status, error) {
        //             console.error(error);
        //         }
        //     });

        // }

        // function loadDataToTable(data) {
        //     var tbody = $('#table-so tbody');
        //     tbody.empty();

        //     var listData = data['ET_ZVSOSCHEDULELINE'];

        //     // Tampilkan SweetAlert loading
        //     Swal.fire({
        //         title: 'Memuat data...',
        //         html: 'Silakan tunggu beberapa saat.',
        //         allowOutsideClick: false,
        //         didOpen: () => {
        //             Swal.showLoading();
        //         }
        //     });

        //     var requests = listData.map((item, index) => {
        //         // Request pertama: detail FG
        //         var request1 = $.ajax({
        //             url: 'https://fiori.spunindo.com/sap/bc/zsr_jsonhd/ZFMMSTOCKFG?sap-client=300&sap-user=JIS-2&sap-password=K35RCI&sap-language=EN&format=json&p_matnr=' +
        //                 item.MATNR,
        //             type: 'POST',
        //         });

        //         // Request kedua: ambil detail jadwal untuk DLVQTY_SU
        //         var request2 = $.ajax({
        //             url: 'https://fiori.spunindo.com/sap/bc/zsr_jsonhd/ZFSOSCHEDULEDTL?sap-client=300&sap-user=JIS-2&sap-password=K35RCI&sap-language=EN&format=json&p_vbeln=' +
        //                 item.VBELN + '&p_posnr=' + item.POSNR,
        //             type: 'POST',
        //         });

        //         return Promise.all([request1, request2])
        //             .then(function([response1, response2]) {
        //                 var listItem = response1['ET_ZVMB52_FG'];
        //                 const filtered = listItem.filter(list => list.POSNR === item.POSNR);

        //                 // Hitung total qty order dari DLVQTY_SU
        //                 const detailList = response2['ET_ZVSOSCHEDULEDTL'] || [];
        //                 const totalQtyDlv = detailList
        //                     .filter(d => d.VBELN === item.VBELN && d.POSNR === item.POSNR)
        //                     .reduce((sum, curr) => sum + parseFloat(curr.DLVQTY_SU || 0), 0);

        //                 const totalQtyOrder = detailList
        //                     .filter(d => d.VBELN === item.VBELN && d.POSNR === item.POSNR)
        //                     .reduce((sum, curr) => sum + parseFloat(curr.WMENG || 0), 0);
        //                 const remainQty = totalQtyOrder - totalQtyDlv;
        //                 var warna = "";
        //                 var atr = "";
        //                 if (remainQty > 0) {
        //                     warna = "yellow";
        //                 } else {
        //                     atr = "disabled";
        //                 }
        //                 return `
    //         <tr style="background-color: ${warna};">
    //             <td><input type="checkbox" name="select_so[]" value="${index}" ${atr}></td>
    //             <td>${item.VBELN}</td>
    //             <td>${item.BSTNK}</td>
    //             <td>${item.NAMA_CUST}</td>
    //             <td>${parseInt(item.POSNR, 10)}</td>
    //             <td>${item.MATNR}</td>
    //             <td>${totalQtyOrder}</td>
    //             <td>${remainQty}</td>
    //             <td>${totalQtyDlv}</td>
    //             <td>${filtered.length}</td>
    //             <td>${item.ZZGSM}</td>
    //             <td>${item.ZZWIDTHROLL}</td>
    //             <td>${item.ZZLENGTH}</td>
    //             <td>${item.LMENG}</td>
    //             <td>${item.MEINS}</td>
    //             <td>${item.SHIPMENTBY}</td>
    //         </tr>
    //     `;
        //             })
        //             .catch(function(error) {
        //                 console.error("Error loading data for MATNR: " + item.MATNR, error);
        //                 return '';
        //             });
        //     });

        //     // Tunggu semua AJAX selesai
        //     Promise.all(requests).then(function(rows) {
        //         Swal.close(); // Tutup SweetAlert loading
        //         tbody.append(rows.join('')); // Gabungkan semua baris
        //         $('#searchSOModal').modal('show'); // Tampilkan modal setelah semua data siap
        //     });
        // }

        function saveSelectedSO() {
            $('#table-so tbody input[type="checkbox"]:checked').each(function() {
                var row = $(this).closest('tr');

                var nomorSO = row.find('td:eq(1)').text();
                var nomorPO = row.find('td:eq(2)').text();
                var namaCust = row.find('td:eq(3)').text();
                var item = row.find('td:eq(4)').text();
                var material = row.find('td:eq(5)').text();
                var orderQty = row.find('td:eq(6)').text();
                var stock = row.find('td:eq(9)').text();
                var gsm = row.find('td:eq(10)').text();
                var width = row.find('td:eq(11)').text();
                var length = row.find('td:eq(12)').text();
                var weight = row.find('td:eq(13)').text();
                var uom = row.find('td:eq(14)').text();
                var shipmentby = row.find('td:eq(15)').text();

                var newRow = `
                    <tr>
                        <td><button type="button" class="btn btn-sm btn-danger" onclick="$(this).closest('tr').remove()">X</button></td>
                        <td style="text-align: center;"><input type="hidden" name="nomor_so[]" value="${nomorSO}">${nomorSO}</td>
                        <td style="text-align: center;"><input type="hidden" name="nomor_po[]" value="${nomorPO}">${nomorPO}</td>
                        <td style="text-align: center;"><input type="hidden" name="item[]" value="${item}"><a href="#" onclick="openModalItem(this)" style="text-decoration: underline;">${item}</a></td>
                        <td><input type="hidden" name="customer[]" value="${namaCust}">${namaCust}</td>
                        <td><input type="hidden" name="material[]" value="${material}">${material}</td>
                        <td><input type="number" name="qty_po[]" class="form-control qty-po" placeholder="Order Qty" min="0"></td>
                        <td style="text-align: center;"><input type="hidden" name="current_stock[]" value="${stock}">${stock}</td>
                        <td></td>
                        <td style="text-align: center;"><input type="hidden" name="gsm[]" value="${gsm}">${gsm}</td>
                        <td style="text-align: center;"><input type="hidden" name="width[]" value="${width}">${width}</td>
                        <td style="text-align: center;"><input type="hidden" name="length[]" value="${length}">${length}</td>
                        <td style="text-align: center;"><input type="hidden" name="weight[]" value="${weight}">${weight}</td>
                        <td><input type="hidden" name="shipment_by[]" value="${shipmentby}">${shipmentby}</td>
                        <td><textarea name="note_marketing[]" class="form-control"></textarea></td>
                        <td><textarea name="note_ppic[]" class="form-control" readonly></textarea></td>
                        <td><textarea name="note_shipping[]" class="form-control"></textarea></td>
                        <td><textarea name="other_note[]" class="form-control"></textarea></td>
                    </tr>
                `;

                $('#table-so-detail tbody').append(newRow);
            });

            $('#searchSOModal').modal('hide');
        }

        function calculateTotalQty() {
            let total = 0;
            $('.qty-po').each(function() {
                const value = parseFloat($(this).val());
                if (!isNaN(value)) {
                    total += value;
                }
            });
            $('#total_qty').val(total);
        }

        function openModalItem(el) {
            // el adalah elemen <a> yang diklik
            var row = el.closest('tr'); // ambil baris tempat <a> itu berada
            var cells = row.querySelectorAll('td'); // ambil semua <td> dalam baris itu

            // Ambil nilai dari kolom tertentu
            var noSo = cells[1].textContent;
            var noItem = cells[3].textContent;

            $.ajax({
                url: 'https://fiori.spunindo.com/sap/bc/zsr_jsonhd/ZFSOSCHEDULEDTL?sap-client=300&sap-user=JIS-2&sap-password=K35RCI&sap-language=EN&format=json&p_vbeln=' +
                    noSo + '&p_posnr=' +
                    noItem,
                type: 'POST',
                header: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    var tbody = $('#table-item tbody');
                    tbody.empty();

                    var listDataItem = response['ET_ZVSOSCHEDULEDTL'];


                    listDataItem.forEach(function(item, index) {
                        var row = `
                            <tr>
                                <td>${item.EDATU}</td>
                                <td>${item.WMENG}</td>
                                <td>${item.BMENG}</td>
                                <td>${item.DLVQTY_SU}</td>
                                <td>${item.VRKME}</td>
                            </tr>
                        `;
                        tbody.append(row);
                    });

                    $('#modalItem').modal('show'); // Tampilkan modal setelah semua data siap

                },
                error: function(xhr, status, error) {
                    console.error(error);
                }
            });
        }

        function simpanData() {
            document.getElementById("hot_data").value = JSON.stringify(hot.getData());
            document.getElementById('{{ $dmenu }}-form').submit();
        }

        function postData() {
            var reqBy = document.getElementById('request_by').value;
            var reqDate = document.getElementById('request_date').value;
            Swal.fire({
                title: 'Konfirmasi',
                html: `
                        Yakin ingin mengirim data ini?<br>
                        <small style="color: red;">Pastikan data yang akan dikirim sudah benar. Data yang sudah dikirim tidak bisa diedit.</small>
                    `,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Ya, Kirim',
                cancelButtonText: 'Batal'
            }).then((result) => {
                if (result.isConfirmed) {
                    localStorage.setItem('nama', reqBy);
                    localStorage.setItem('tgl', reqDate);
                    Swal.fire({
                        title: 'Memproses...',
                        allowOutsideClick: false,
                        didOpen: () => {
                            Swal.showLoading();
                        }
                    });
                    // Tunggu triggerAutoSave selesai
                    triggerAutoSave().then(() => {
                        // Setelah autosave selesai, kirim data
                        $.post(`{{ url($url_menu) }}/post`, {
                            _token: '{{ csrf_token() }}',
                            request_by: reqBy,
                            request_date: reqDate
                        }, function(response) {
                            if (response.success) {
                                Swal.fire('Berhasil!', 'Data berhasil dikirim.', 'success').then(
                                    () => {
                                        window.location.href = '{{ url('/mrkmsj/add') }}';
                                    });
                            } else {
                                Swal.fire('Gagal', response.message || 'Terjadi kesalahan.',
                                    'error');
                            }
                        }).fail(() => Swal.fire('Gagal', 'Terjadi kesalahan jaringan atau server.',
                            'error'));
                    });
                }
            });
        }

        async function loadDataTgl(pembuat, tanggal) {
            // Ambil elemen berdasarkan id
            const textLoad = document.getElementById('textLoad');

            // Jika ingin menampilkan elemen (karena awalnya hidden)
            textLoad.hidden = false;

            document.getElementById('btn_send').disabled = true;
            document.getElementById('btn_send_approve').disabled = true;
            $.ajax({
                url: "{{ URL::to('/') }}/cek-date",
                type: "POST",
                data: {
                    _token: $('meta[name="csrf-token"]').attr('content'),
                    tanggal: tanggal,
                    pembuat: pembuat
                },
                success: async function(response) {
                    document.getElementById('textLoad').hidden = false;

                    let maxRows = 200;

                    // 1️⃣ Load data awal tanpa stock
                    let data = response['listData'].map((row, index) => [
                        row.nomor_so ?? "",
                        row.nomor_po ?? "",
                        row.customer ?? "",
                        row.material ?? "",
                        row.qty_order ?? "",
                        row.current_stock ?? "", // stock awal dikosongkan
                        row.actual_qty ?? "",
                        row.gsm ?? "",
                        row.width ?? "",
                        row.length ?? "",
                        row.weight ?? "",
                        row.shipment_by ?? "",
                        row.flag_ppic ?? "",
                        row.send_shipping ?? "",
                        row.note_marketing ?? "",
                        row.note_ppic ?? "",
                        row.note_shipping ?? "",
                        row.other_note ?? "",
                        row.id ?? "",
                        row.flag_mkt ?? "",
                        row.code_customer ?? "",
                        row.incoterm ?? "",
                        row.approve_spv ?? "",
                        row.keterangan ?? ""
                    ]);

                    // Tambahkan baris kosong jika kurang dari maxRows
                    while (data.length < maxRows) {
                        data.push(Array(headers.length).fill(""));
                    }

                    hot.loadData(data); // Load data awal

                    document.getElementById('textLoad').hidden = true;
                    existingRowCount = response['jumlahData'];
                    document.getElementById('btn_send').disabled = false;
                    document.getElementById('btn_send_approve').disabled = false;
                    textLoad.hidden = true;
                },
                error: function(xhr, status, error) {
                    $("#respon").text("Terjadi error: " + error);
                }
            });
        }

        async function fetchCurrentStock(matnr, custCode) {
            try {
                // Memanggil API untuk mendapatkan stok berdasarkan MATNR
                const response = await fetch(
                    `https://fiori.spunindo.com/sap/bc/zsr_jsonhd/ZFMMSTOCKFG?sap-client=300&sap-user=JIS-2&sap-password=K35RCI&sap-language=EN&format=json&p_matnr=${matnr}`
                );

                // Menangani respons API
                if (!response.ok) {
                    throw new Error(`API error: ${response.statusText}`);
                }

                const data = await response.json();

                // Pastikan 'ET_ZVMB52_FG' adalah array sebelum melakukan filter
                const stokData = data['ET_ZVMB52_FG'];

                if (Array.isArray(stokData)) {
                    const stokObj = stokData.filter(item =>
                        item.KODECUST == custCode &&
                        (item.ATWRT_GRADE === 'A' || item.ATWRT_GRADE === 'B')
                    );

                    return stokObj.length; // Mengembalikan jumlah stok sesuai dengan KODECUST
                } else {
                    console.error('ET_ZVMB52_FG bukan array:', stokData);
                    return 0; // Mengembalikan nilai default jika 'ET_ZVMB52_FG' bukan array
                }
            } catch (error) {
                // Menangani kesalahan jaringan atau kesalahan lain
                console.error('Terjadi error:', error);
                return 0; // Mengembalikan nilai default jika terjadi error
            }
        }

        function searchData() {
            const tanggalInput = document.getElementById('request_date');
            const tanggal = tanggalInput.value;

            if (!tanggal) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Oops!',
                    text: 'Silahkan isi Stuffing Date!',
                });
            } else {
                loadDataSearch();
            }
        }

        async function loadDataSearch() {
            const idUser = document.getElementById('id_user').value;
            // Pisahkan bagian sebelum dan setelah tanda "-"
            let parts = idUser.split("-");

            // Ubah bagian pertama menjadi uppercase
            let upperText = parts[0].toUpperCase();

            // Hilangkan leading zero dari bagian kedua (angka)
            let numberPart = parseInt(parts[1], 10); // Mengubah string angka menjadi integer

            // Gabungkan kembali dengan angka setelah tanda "-" (tanpa leading zero)
            let ernam = upperText + "-" + numberPart;

            const sekarang = document.getElementById("request_date").value;

            const tanggal = new Date(sekarang);
            const tahun = tanggal.getFullYear(); // Mengambil tahun
            const bulan = tanggal.getMonth() + 1; // Mengambil bulan (0 = Januari, jadi perlu +1)

            // Menampilkan SweetAlert loading
            Swal.fire({
                title: 'Loading...',
                text: 'Sedang memuat data...',
                allowOutsideClick: false,
                didOpen: () => {
                    Swal.showLoading();
                }
            });

            try {
                const response = await $.ajax({
                    url: "https://fiori.spunindo.com/sap/bc/zsr_jsonhd/ZFSOSCHEDULE?sap-client=300&sap-user=JIS-2&sap-password=K35RCI&sap-language=EN&format=json" +
                        "&p_eyear=" + tahun +
                        "&p_emonth=" + bulan +
                        "&p_vbeln=", // file tujuan di server
                    type: "GET",
                    data: {
                        _token: $('meta[name="csrf-token"]').attr('content'), // penting untuk laravel
                    }
                });

                const hasil = response['ET_ZVSOSCHEDULELINE'];

                const yyyy = tanggal.getFullYear();
                const mm = String(tanggal.getMonth() + 1).padStart(2, '0');
                const dd = String(tanggal.getDate()).padStart(2, '0');
                const todayStr = `${yyyy}-${mm}-${dd}`;

                // 2. Filter data berdasarkan EDATU yang sama dengan hari ini
                const filteredData = hasil
                    .filter(item => item.EDATU === todayStr && item.ERNAM === ernam)
                    .sort((a, b) => {
                        // Urutkan berdasarkan VBELN terlebih dahulu
                        if (a.VBELN < b.VBELN) return -1;
                        if (a.VBELN > b.VBELN) return 1;

                        // Jika VBELN sama, urutkan berdasarkan POSNR
                        if (a.POSNR < b.POSNR) return -1;
                        if (a.POSNR > b.POSNR) return 1;

                        return 0; // Jika kedua nilai sama
                    });

                // Mapping data dari DB ke urutan headers
                // Menggunakan Promise.all untuk menunggu semua response API secara bersamaan
                const data = await Promise.all(
                    filteredData.map(async (row, index) => {
                        const vbelnFormatted = row.VBELN.replace(/^0+/, "");
                        const posnrFormatted = parseInt(row.POSNR, 10);
                        const vbelnPosnrFormatted = `${vbelnFormatted}-${posnrFormatted}`;

                        const bmeng = parseFloat(row.BMENG) || 0;
                        const gsm = parseFloat(row.ZZGSM) || 0;
                        const width = parseFloat(row.ZZWIDTHROLL) || 0;
                        const length = parseFloat(row.ZZLENGTH) || 0;

                        const weight = ((bmeng * gsm * width * length) / 1000).toFixed(2);

                        const checkboxId = `checkbox-${index + 1}`;
                        const checkbox =
                            `<input type="checkbox" id="${checkboxId}" />`;

                        let incoterm = "";
                        if (row.INCO2_L == "") {
                            incoterm = row.INCO1;
                        } else {
                            incoterm = row.INCO1 + " - " + row.INCO2_L;

                        }

                        return [
                            checkbox, // Checkbox dengan id angka
                            vbelnPosnrFormatted,
                            row.BSTNK ?? "",
                            row.NAMA_CUST ?? "",
                            row.MATNR ?? "",
                            row.BMENG ?? "",
                            row.ZZGSM ?? "",
                            row.ZZWIDTHROLL ?? "",
                            row.ZZLENGTH ?? "",
                            weight,
                            row.SHIPMENTBY ?? "",
                            row.KODE_CUST ?? "",
                            incoterm
                        ];
                    })
                );

                const tableBody = document.querySelector("#tblSearch tbody");
                tableBody.innerHTML = "";
                data.forEach((row) => {
                    const tr = document.createElement("tr");

                    row.forEach((cell, index) => {
                        const td = document.createElement("td");
                        td.innerHTML = cell;

                        // Rata tengah khusus untuk kolom pertama (checkbox)
                        if (index === 0) {
                            td.style.textAlign = "center";
                            td.style.verticalAlign = "middle";
                        }

                        tr.appendChild(td);
                    });

                    tableBody.appendChild(tr);
                });

                // Menutup SweetAlert setelah data berhasil dimuat
                Swal.close();
                $('#searchModal').modal('show');
            } catch (error) {
                // Menampilkan pesan error jika terjadi kesalahan pada AJAX atau pengambilan data
                console.error('Terjadi error:', error);
                Swal.close();
                alert('Terjadi error saat memuat data!');
            }
        }

        // Fungsi Check All
        const tableBody = document.querySelector("#tblSearch tbody");
        const checkAllBox = document.getElementById("check-all");
        checkAllBox.addEventListener("change", function() {
            // Ambil semua checkbox di tbody
            const checkboxes = tableBody.querySelectorAll("input[type='checkbox']");
            checkboxes.forEach(cb => {
                cb.checked = checkAllBox.checked;
            });
        });

        document.getElementById("save-selected").addEventListener("click", async () => {
            const selectedData = [];
            const maxRows = 200;

            const rows = document.querySelectorAll("#tblSearch tbody tr");
            // Ambil elemen berdasarkan id
            const textLoad = document.getElementById('textLoad');
            const stuffDate = document.getElementById('request_date');

            // Jika ingin menampilkan elemen (karena awalnya hidden)
            textLoad.hidden = false;
            stuffDate.disabled = true;

            document.getElementById('btn_send').disabled = true;
            document.getElementById('btn_send_approve').disabled = true;

            isProcessing = true;
            hot.render();

            // 1️⃣ Ambil data dari baris yang dicentang
            rows.forEach(row => {
                const checkbox = row.querySelector("td:first-child input[type='checkbox']");
                if (checkbox && checkbox.checked) {
                    const rowData = [];

                    const cells = row.querySelectorAll("td");
                    cells.forEach((cell, index) => {
                        if (index !== 0) { // Skip kolom checkbox
                            rowData.push(cell.textContent.trim());
                        }
                    });

                    // 🔹 Sisipkan kolom kosong di posisi tertentu (seperti kode asli kamu)
                    rowData.splice(5, 0, "");
                    rowData.splice(6, 0, "");
                    rowData.splice(12, 0, "");
                    rowData.splice(13, 0, "");
                    rowData.splice(14, 0, "");
                    rowData.splice(15, 0, "");
                    rowData.splice(16, 0, "");
                    rowData.splice(17, 0, "");
                    rowData.splice(18, 0, "");
                    rowData.splice(19, 0, "");

                    selectedData.push(rowData);
                }
            });

            // 2️⃣ Ambil data lama dari Handsontable
            const existingData = hot.getData().filter(row =>
                row.some(cell => cell !== null && cell !== "")
            );

            // 3️⃣ Gabungkan data lama dan data baru
            const combinedData = existingData.concat(selectedData);

            // 4️⃣ Padding hingga 200 baris jika kurang
            while (combinedData.length < maxRows) {
                combinedData.push(Array(combinedData[0]?.length || 0).fill(""));
            }

            // 5️⃣ Load data ke Handsontable terlebih dahulu
            hot.loadData(combinedData);

            // 6️⃣ Setelah data tampil, baru update current stock
            const totalRows = hot.countRows();

            for (let i = 0; i < totalRows; i++) {
                const material = hot.getDataAtCell(i, 3); // kolom material
                const customerCode = hot.getDataAtCell(i, 20); // kolom customer code

                if (!material || !customerCode) continue;

                try {
                    const currentStock = await fetchCurrentStock(material, customerCode);
                    hot.setDataAtCell(i, 5, currentStock ?? "");
                } catch (error) {
                    console.error(`❌ Error fetching stock for row ${i}:`, error);
                }
            }

            // 7️⃣ Simpan otomatis setelah update stok selesai
            // autoSave();
            textLoad.hidden = true;
            document.getElementById('btn_send').disabled = false;
            document.getElementById('btn_send_approve').disabled = false;
            textLoad.hidden = true;
            stuffDate.disabled = false;
            // triggerAutoSave(); // 💾 Simpan data hanya sekali di akhir
            isProcessing = false;
            hot.render();
            // 8️⃣ Ambil metadata tambahan
            const pembuat = document.getElementById("request_by").value;
            const tanggal = document.getElementById("request_date").value;

        });

        function sendApprove() {
            // Ambil data ioo dan tanggal stuffing
            var tgl = $('input[name="request_date"]').val();
            var users = $('input[name="request_by"]').val();


            $.ajax({
                url: "{{ URL::to('/') }}/cek-date-approve",
                type: "POST",
                data: {
                    _token: $('meta[name="csrf-token"]').attr('content'),
                    tanggal: tgl,
                    pembuat: users
                },
                success: function(response) {
                    var tbody = $("#tblSo tbody");
                    tbody.empty(); // kosongkan dulu tabel biar tidak double

                    if (response.listData.length > 0) {

                        $.each(response.listData, function(index, item) {

                            var checked = item.flag_mkt == 1 ? "checked" : "";

                            var row = `
                                <tr>
                                    <td style="text-align: center;">
                                        <input type="checkbox" class="checkItem" value="${item.id}" ${checked}>
                                    </td>
                                    <td>${item.nomor_so ?? '-'}</td>
                                    <td>${item.salesman ?? '-'}</td>
                                    <td>${item.nomor_po ?? '-'}</td>
                                    <td>${item.customer ?? '-'}</td>
                                    <td>${item.material ?? '-'}</td>
                                    <td>${item.qty_order ?? 0}</td>
                                    <td>${item.current_stock ?? 0}</td>
                                    <td>${item.gsm ?? '-'}</td>
                                    <td>${item.width ?? '-'}</td>
                                    <td>${item.length ?? '-'}</td>
                                    <td>${item.weight ?? '-'}</td>
                                    <td>${item.note_marketing ?? '-'}</td>
                                    <td>${item.note_ppic ?? '-'}</td>
                                    <td>${item.note_shipping ?? '-'}</td>
                                </tr>
                            `;

                            tbody.append(row);
                        });

                    } else {
                        tbody.append(`
                            <tr>
                                <td colspan="14" class="text-center">
                                    Data tidak ditemukan
                                </td>
                            </tr>
                        `);
                    }

                    $('#tblApprove').modal('show');

                    document.getElementById('textLoad').hidden = false;

                    document.getElementById('textLoad').hidden = true;
                    document.getElementById('btn_send').disabled = false;
                    document.getElementById('btn_send_approve').disabled = false;
                    textLoad.hidden = true;
                },
                error: function(xhr, status, error) {
                    $("#respon").text("Terjadi error: " + error);
                }
            });
        }

        function centangAll() {
            var checkboxes = $("#tblSo tbody .checkItem");
            var allChecked = checkboxes.length === checkboxes.filter(":checked").length;

            // Jika semua sudah dicentang → hapus centang, sebaliknya centang semua
            checkboxes.prop("checked", !allChecked);
        }

        document.getElementById("btnKirim").addEventListener("click", function() {

            // Ambil checkbox yang dicentang
            const checkedItems = document.querySelectorAll(".checkItem:checked");

            // Jika tidak ada yang dicentang
            if (checkedItems.length === 0) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Oops...',
                    text: 'Minimal pilih 1 data terlebih dahulu!',
                    confirmButtonColor: '#3085d6'
                });
                return;
            }

            // Ambil semua value yang dicentang
            let selectedIds = [];
            checkedItems.forEach(function(item) {
                selectedIds.push(item.value);
            });

            // Konfirmasi sebelum kirim
            Swal.fire({
                title: 'Yakin kirim data?',
                text: "Total data dipilih: " + selectedIds.length,
                icon: 'question',
                showCancelButton: true,
                confirmButtonColor: '#03A6A8',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Ya, kirim!',
                cancelButtonText: 'Batal'
            }).then((result) => {
                if (result.isConfirmed) {
                    var reqBy = document.getElementById('request_by').value;
                    var reqDate = document.getElementById('request_date').value;

                    let selectedIds = [];

                    $('.checkItem:checked').each(function() {
                        selectedIds.push($(this).val());
                    });



                    $.post(`{{ url($url_menu) }}/postApprove`, {
                        _token: '{{ csrf_token() }}',
                        request_by: reqBy,
                        request_date: reqDate,
                        selected_ids: selectedIds
                    }, function(response) {

                        if (response.success) {
                            Swal.fire('Berhasil!', 'Data berhasil dikirim.', 'success')
                                .then(() => {
                                    window.location.href = '{{ url('/mrkmsj/add') }}';
                                });
                        } else {
                            Swal.fire('Gagal', response.message || 'Terjadi kesalahan.', 'error');
                        }

                    }).fail(() => {
                        Swal.fire('Gagal', 'Terjadi kesalahan jaringan atau server.', 'error');
                    });
                }
            });

        });
    </script>
@endpush