{{-- Salin CSS & Sebagian besar JS dari add.blade.php kamu --}}
    <link rel="stylesheet" href="{{ asset('assets/css/trbomj-edit.css') }}">
    <script src="{{ asset('assets/js/excelTable.js') }}?v={{ filemtime(public_path('assets/js/excelTable.js')) }}"></script>
    <script>
        $(document).ready(function() {
            // Helper format angka 3 digit desimal dengan koma (contoh: 1 -> 1,000, 1.7 -> 1,700)
            function format3Decimal(val) {
                if (val === null || val === undefined || val === '') return '';
                const n = parseFloat(String(val).replace(',', '.'));
                return !isNaN(n) ? n.toFixed(3).replace('.', ',') : '';
            }

            @if(isset($bom_header))

            function loadExistingData() {
                const tableIndex = 1;
                const header = @json($bom_header);
                const details = @json($bom_details);
                // Simpan fullAltText - akan di-set ke field setelah strip prefix (single) 
                // atau langsung penuh (multi) di blok masing-masing di bawah
                const fullAltTextFromDb = (details && details.length > 0) ?
                    (details[0].alternative_bom_text || '') :
                    '';

                // 1. Logic Multi-Resource
                if (header.resource && header.resource.includes(',')) {
                    let resArray = header.resource.split(',').map(r => r.trim()).filter(Boolean);
                    let capArray = header.capacity ? header.capacity.split(',').map(c => c.trim()) : [];

                    // BYPASS trigger('change') untuk hindari conflict 150ms timeout di toggle handler.
                    // Langsung set checkbox dan manipulasi DOM secara manual.
                    $(`#multiResourceCheckbox-${tableIndex}`).prop('checked', true);

                    // Sembunyikan single-mode fields
                    $(`#singleResourceInputs-${tableIndex}`).hide();
                    $(`#singleCapacity-${tableIndex}`).hide();
                    $(`#singleMaterial-${tableIndex}`).hide();
                    $(`#singleMatType-${tableIndex}`).hide();
                    $(`#singleWidth-${tableIndex}`).hide();
                    $(`#singleLength-${tableIndex}`).hide();
                    $(`#singleAltBom-${tableIndex}`).hide();

                    // Tampilkan multi-mode wrappers
                    $(`#multiResourceCountWrapper-${tableIndex}`).show();
                    $(`#multiResourceInputs-${tableIndex}`).show();

                    // Set count dan generate slot dengan jumlah resource yang benar
                    $(`#multiResourceCount-${tableIndex}`).val(resArray.length);
                    generateMultiResourceInputs(resArray.length, tableIndex);

                    // Hitung machine code prefix dari resources gabungan
                    let multiMachinePrefix = resArray
                        .map(r => r.length >= 2 ? r.slice(-2) : '')
                        .filter(Boolean)
                        .join(',') + '-';

                    // Strip prefix dari alt_bom_text
                    let strippedAltTextMulti = fullAltTextFromDb;
                    if (fullAltTextFromDb && multiMachinePrefix.length > 1 && fullAltTextFromDb.startsWith(multiMachinePrefix)) {
                        strippedAltTextMulti = fullAltTextFromDb.substring(multiMachinePrefix.length);
                    }

                    // Isi slot setelah DOM generateMultiResourceInputs selesai (setTimeout-nya selesai)
                    setTimeout(() => {
                        // Isi tiap slot Resources dan Capacity
                        resArray.forEach((res, i) => {
                            let idx = i + 1;
                            $(`#resources_multi_${tableIndex}_${idx}`).val(res.trim());
                            $(`#resource_input_multi_${tableIndex}_${idx}`).val(res.trim());
                            let rawCapacity = capArray[i] !== undefined ? capArray[i] : (capArray[0] || '');
                            let formattedCapacity = String(rawCapacity).replace(/\./g, ',');
                            $(`#capacity_multi_${tableIndex}_${idx}`).val(formattedCapacity);
                            // $(`#capacity_multi_${tableIndex}_${idx}`).val(capArray[i] !== undefined ? capArray[i] : (capArray[0] || ''));
                        });

                        // FIX: Isi Material FG/SFG, Mat Type, Width, Length untuk multi mode
                        // Field-field ini sebelumnya tidak pernah diisi saat mode multi, sehingga tampil kosong
                        $(`#material-multi-${tableIndex}`).val(header.material_fg_sfg || '');
                        $(`#mat_type-multi-${tableIndex}`).val(header.mat_type || '');
                        $(`#width-multi-${tableIndex}`).val(header.width ? String(header.width).replace(/\./g, ',') : '');
                        $(`#length-multi-${tableIndex}`).val(header.length ? String(header.length).replace(/\./g, ',') : '');

                        // Update machine code span di multi mode
                        updateAltBomCodeMulti(tableIndex);

                        // Isi alt_bom_text (stripped)
                        $(`#alt_bom_text-multi-${tableIndex}`).val(strippedAltTextMulti);

                        // Trigger sync capacity 2+ dari capacity 1
                        $(`#capacity_multi_${tableIndex}_1`).trigger('input');

                        console.log('[MULTI LOAD] resArray:', resArray);
                        console.log('[MULTI LOAD] capArray:', capArray);
                        console.log('[MULTI LOAD] altBom stripped:', strippedAltTextMulti);
                        console.log('[MULTI LOAD] material:', header.material_fg_sfg, 'mat_type:', header.mat_type, 'width:', header.width, 'length:', header.length);
                    }, 600); // 600ms: cukup untuk generateMultiResourceInputs + initValueRecommendation (200ms) selesai

                } else {
                    // Single Resource - isi resource input via JS
                    $(`#resources-${tableIndex}`).val(header.resource || '');
                    $(`#resource_input_${tableIndex}`).val(header.resource || '');

                    // $(`#capacity-${tableIndex}`).val(header.capacity || '');
                    let formattedSingleCapacity = header.capacity ? String(header.capacity).replace(/\./g, ',') : '';
                    $(`#capacity-${tableIndex}`).val(formattedSingleCapacity);

                    updateCompQTYTarget(header.resource, false, tableIndex);

                    // Set machine-code span dari resource (2 karakter terakhir + '-')
                    let machineCode = (header.resource && header.resource.length >= 2) ?
                        header.resource.slice(-2) + '-' :
                        '';
                    $(`#machine-code-${tableIndex}`).text(machineCode);

                    // Strip prefix machine code dari alt_bom_text input
                    let strippedAltText = fullAltTextFromDb;
                    if (fullAltTextFromDb && machineCode && fullAltTextFromDb.startsWith(machineCode)) {
                        strippedAltText = fullAltTextFromDb.substring(machineCode.length);
                    }
                    $(`#alt_bom_text-${tableIndex}`).val(strippedAltText);
                    console.log(`[SINGLE LOAD] resource:"${header.resource}" machineCode:"${machineCode}"`);
                    console.log(`[ALT BOM] full:"${fullAltTextFromDb}" → stripped:"${strippedAltText}"`);
                }



                // 2. Load Details ke DataTable
                let table = $(`#datatable-bom-${tableIndex}`).DataTable();
                table.clear();

                if (details.length > 0) {
                    details.forEach((item, idx) => {
                        addTableRow(tableIndex, idx + 1, {
                            material_fg_sfg: header.material_fg_sfg,
                            alt_bom_text: item.alternative_bom_text,
                            product_qty: item.product_qty,
                            base_uom_header: item.base_uom_header,
                            item_number: item.item_number,
                            type: item.type,
                            comp_material_code: item.comp_material_code,
                            comp_desc: item.comp_desc,
                            comp_qty: item.comp_qty,
                            uom: item.uom
                        });

                        // Validasi SAP per baris
                        validateComponentMaterialInRow(tableIndex, idx + 1, item.comp_material_code);
                    });
                }
                table.draw();
                calculateTotalCompQty(tableIndex);
                validateMaterialInSAP(header.material_fg_sfg, 1);
            }

            // Panggil Load Data
            loadExistingData();
            @endif
            // ============================================================
            // SECTION 1: INITIALIZATION & CONFIGURATION
            // ============================================================

            // Inisialisasi cache untuk Comp QTY Target
            window.compQtyTargets = {};

            // Default: semua halaman target 100 (bisa berubah saat pilih resource)
            @for($k = 1; $k <= $rows; $k++)
            window.compQtyTargets[{{ $k }}] = 100;
            @endfor

            // Konfigurasi bahasa DataTables
            const msjLanguage = {
                search: "Cari :",
                lengthMenu: "Tampilkan _MENU_ baris",
                zeroRecords: "Maaf - Data tidak ada",
                info: "Data _START_ - _END_ dari _TOTAL_",
                infoEmpty: "Tidak ada data",
                infoFiltered: "(pencarian dari _MAX_ data)"
            };

            // Inisialisasi DataTables untuk modal resource dan component
            $('#resourceTable, #componentTable').DataTable({
                language: {
                    search: "Search:",
                    lengthMenu: "Show _MENU_ entries",
                    zeroRecords: "Maaf - Data tidak ada",
                    info: "Showing _START_ to _END_ of _TOTAL_ entries",
                    infoEmpty: "Showing 0 to 0 of 0 entries",
                    infoFiltered: "(filtered from _MAX_ total entries)",
                    paginate: {
                        first: "First",
                        last: "Last",
                        next: "Next",
                        previous: "Previous"
                    }
                },
                pageLength: 10,
                lengthMenu: [
                    [10, 25, 50, 100],
                    [10, 25, 50, 100]
                ],
                responsive: true
            });

            // Inisialisasi DataTables untuk setiap tabel BOM
            $('.bom-table').each(function() {
                const tableIndex = $(this).data('index');
                $(this).DataTable({
                    destroy: true,
                    language: msjLanguage,
                    pageLength: 10,
                    lengthMenu: [5, 10, 25, 50],
                    responsive: true,
                    dom: 'lrtip',
                    order: [
                        [0, "asc"]
                    ],
                    paging: true,
                    searching: false,
                    info: true,
                    lengthChange: true,
                    autoWidth: false,
                    columnDefs: [{
                            targets: [0],
                            width: "5%",
                            className: "text-center"
                        },
                        {
                            targets: [1, 2],
                            width: "15%"
                        },
                        {
                            targets: [3, 4, 5],
                            width: "8%",
                            className: "text-center"
                        },
                        {
                            targets: [6],
                            width: "5%",
                            className: "text-center"
                        },
                        {
                            targets: [7, 8],
                            width: "15%"
                        },
                        {
                            targets: [9],
                            width: "8%",
                            className: "text-end"
                        },
                        {
                            targets: [10],
                            width: "8%",
                            className: "text-center"
                        },
                        {
                            targets: [11],
                            width: "8%",
                            orderable: false,
                            searchable: false,
                            className: "text-center"
                        }
                    ],
                    responsive: {
                        details: {
                            type: 'column',
                            target: 'tr'
                        }
                    }
                });
            });

            // Hitung total comp qty pada page load
            recalculateAllTotals();

            // ============================================================
            // SECTION 2: MODAL MANAGEMENT
            // ============================================================

            // Variable global untuk modal
            let currentResourceIndex = 0;
            let currentTargetIndex = 0;
            let currentRowIndex = 0;

            // Modal: Pilih jumlah halaman
            $('#confirmAddRows').on('click', function() {
                const jumlahBaris = $('#jumlahBaris').val();
                if (jumlahBaris && jumlahBaris > 0) {
                    window.location = `{{ URL::to($url_menu . '/add') }}?rows=${jumlahBaris}`;
                } else {
                    Swal.fire({
                        title: 'Warning',
                        text: 'Masukkan jumlah baris yang valid!',
                        icon: 'warning'
                    });
                }
            });

            // Modal: Open Resource Selection (Single Mode)
            window.openResourceModal = function(index) {
                currentResourceIndex = index;
                window.currentResourceMultiIndex = undefined;
                window.currentResourceMultiPage = undefined;
                $('#resourceModal').modal('show');
            };

            // Modal: Open Resource Selection (Multi Mode)
            window.openResourceModalMulti = function(index, pageIndex) {
                currentResourceIndex = 0;
                window.currentResourceMultiIndex = index;
                window.currentResourceMultiPage = pageIndex;

                $('#resourceTable tbody tr').removeClass(
                    'table-warning table-danger bg-danger bg-warning bg-target-mismatch');
                $('#resourceTable tbody button').prop('disabled', false)
                    .removeClass('btn-secondary btn-danger')
                    .addClass('btn-primary')
                    .html('<i class="fas fa-check"></i> Select')
                    .removeAttr('title');

                // Deteksi target resource yang sudah dipilih
                let selectedTargets = [];
                let selectedResources = [];

                if ($(`#multiResourceCheckbox-${pageIndex}`).is(':checked')) {
                    let resourceCount = $(`#multiResourceCount-${pageIndex}`).val();

                    // Collect resources yang sudah dipilih dan target mereka
                    for (let i = 1; i <= resourceCount; i++) {
                        let selectedResource = $(`#resources_multi_${pageIndex}_${i}`).val();
                        if (selectedResource) {
                            selectedResources.push(selectedResource);

                            // Cek target resource ini (85 atau 100)
                            $.ajax({
                                url: window.location.href,
                                type: 'GET',
                                async: false, // Synchronous untuk mendapat target sebelum styling
                                data: {
                                    action: 'get_resource_target',
                                    resource: selectedResource
                                },
                                success: function(response) {
                                    if (response.target) {
                                        selectedTargets.push(response.target);
                                    }
                                }
                            });
                        }
                    }
                }

                // Determine target filter (85 atau 100)
                let requiredTarget = null;
                if (selectedTargets.length > 0) {
                    // Ambil target pertama sebagai patokan
                    requiredTarget = selectedTargets[0];
                    console.log(`[Multi Resource Target Validation] Required Target: ${requiredTarget}`);
                }

                // Apply styling ke semua rows berdasarkan target matching
                $('#resourceTable tbody tr').each(function() {
                    let $row = $(this);
                    let resourceInRow = $row.find('td:nth-child(2)').text().trim();
                    let $btn = $row.find('button');

                    // Check apakah resource ini sudah dipilih
                    if (selectedResources.includes(resourceInRow)) {
                        // Resource sudah dipilih → Warna KUNING (warning)
                        $row.addClass('table-warning bg-warning');
                        $btn.prop('disabled', true)
                            .removeClass('btn-primary')
                            .addClass('btn-secondary')
                            .html('<i class="fas fa-check"></i> Dipilih')
                            .attr('title', 'Resource ini sudah dipilih');
                        console.log(`[Already Selected] Resource ${resourceInRow} - Kuning`);
                        return; // Skip ke row berikutnya
                    }

                    // Jika ada target requirement, cek matching
                    if (requiredTarget !== null) {
                        // Get target untuk resource ini
                        $.ajax({
                            url: window.location.href,
                            type: 'GET',
                            async: false,
                            data: {
                                action: 'get_resource_target',
                                resource: resourceInRow
                            },
                            success: function(response) {
                                let resourceTarget = response.target || 100;

                                if (resourceTarget !== requiredTarget) {
                                    // Target BERBEDA → Background KUNING TERANG
                                    $row.addClass('bg-target-mismatch');
                                    $btn.prop('disabled', true)
                                        .removeClass('btn-primary')
                                        .addClass('btn-danger')
                                        .html('<i class="fas fa-ban"></i> Target Berbeda')
                                        .attr('title',
                                            `Target resource ini (${resourceTarget}) berbeda dengan target yang dipilih (${requiredTarget}). Hanya resource dengan target ${requiredTarget} yang dapat dipilih.`
                                        );
                                    console.log(
                                        `[Target Mismatch] Resource ${resourceInRow}: Target ${resourceTarget} ≠ Required ${requiredTarget} - KUNING TERANG`
                                    );
                                } else {
                                    console.log(
                                        `[Target Match] Resource ${resourceInRow}: Target ${resourceTarget} = Required ${requiredTarget} - Normal`
                                    );
                                }
                            }
                        });
                    }
                });

                $('#resourceModal').modal('show');
            };

            // Modal: Reset state saat ditutup
            $('#resourceModal').on('hidden.bs.modal', function() {
                $('#resourceTable tbody tr').removeClass(
                    'table-warning bg-warning bg-target-mismatch bg-danger table-danger');
                $('#resourceTable tbody button').prop('disabled', false)
                    .removeClass('btn-secondary btn-danger')
                    .addClass('btn-primary')
                    .html('<i class="fas fa-check"></i> Select')
                    .removeAttr('title');
            });

            // Modal: Open Component Material Selection
            window.openComponentModal = function(tableIndex, rowIndex) {
                currentTargetIndex = tableIndex;
                currentRowIndex = rowIndex;
                $('#componentModal').modal('show');
            };

            // Modal: Create New Component Material
            $(document).on('click', '#create-new-material', () => {
                $('#componentModal').modal('hide');
                $('#createMaterialModal').modal('show');
                $('#newMaterialCode').val('').focus();
            });

            // Modal: Save new component material
            $(document).on('click', '#saveMaterialBtn', () => {
                const materialCode = $('#newMaterialCode').val().trim();
                if (!materialCode) {
                    return Swal.fire('Warning', 'Material Code tidak boleh kosong!', 'warning');
                }
                saveNewMaterial(materialCode);
            });

            $(document).on('keypress', '#newMaterialCode', e => {
                if (e.which === 13) {
                    e.preventDefault();
                    $('#saveMaterialBtn').click();
                }
            });

            // ============================================================
            // SECTION 3: RESOURCE SELECTION
            // ============================================================

            // Helper: Remove trailing zeros dari angka desimal (1500.00 → 1500, 1500.50 → 1500.5)
            function removeTrailingZeros(value) {
                if (value === null || value === undefined || value === '') return '';
                let numValue = parseFloat(value);
                if (isNaN(numValue)) return value;
                // Gunakan parseFloat untuk otomatis menghilangkan trailing zeros
                return parseFloat(numValue.toString());
            }

            // Select Resource (Single atau Multi)
            // window.selectResource = function(resource, mat_type, width, length, capacity) {
            //     let currentPage = window.currentResourceMultiPage !== undefined ? window
            //         .currentResourceMultiPage : currentResourceIndex;

            //     // Format length: hilangkan trailing zeros (1500.00 → 1500)
            //     let formattedLength = removeTrailingZeros(length);

            //     if ($(`#multiResourceCheckbox-${currentPage}`).is(':checked')) {
            //         console.log("checked")
            //         // Multi Resource Mode
            //         let idx = window.currentResourceMultiIndex;

            //         // Check duplicate resource
            //         let isDuplicate = false;
            //         let duplicateIndex = null;
            //         let resourceCount = $(`#multiResourceCount-${currentPage}`).val();
            //         for (let i = 1; i <= resourceCount; i++) {
            //             if (i !== idx) {
            //                 let existingResource = $(`#resources_multi_${currentPage}_${i}`).val();
            //                 if (existingResource === resource) {
            //                     isDuplicate = true;
            //                     duplicateIndex = i;
            //                     break;
            //                 }
            //             }
            //         }

            //         if (isDuplicate) {
            //             Swal.fire({
            //                 title: 'Resource Sudah Dipilih!',
            //                 text: `Resource "${resource}" sudah dipilih pada Resource ${duplicateIndex}. Silakan pilih resource yang berbeda.`,
            //                 icon: 'warning',
            //                 confirmButtonText: 'OK',
            //                 confirmButtonColor: '#028284'
            //             });
            //             return;
            //         }

            //         // Set resource values
            //         $(`#resources_multi_${currentPage}_${idx}`).val(resource);
            //         $(`#resource_multi_display_${currentPage}_${idx}`).val(resource);

            //         // Capacity dari resource mana pun SELALU masuk ke Capacity 1
            //         // Lalu Capacity 1 akan auto-sync ke Capacity 2-N (via event handler Section 10B)
            //         console.log(
            //             `[JUMBO Multi Resource] Pilih Resource ${idx}: "${resource}" (capacity: ${capacity}) → Set ke Capacity 1`
            //         );
            //         $(`#capacity_multi_${currentPage}_1`).val(capacity).trigger('input');

            //         if (idx == 1) {
            //             $(`#mat_type-multi-${currentPage}`).val(mat_type);
            //             $(`#width-multi-${currentPage}`).val(width).prop('readonly', false);
            //             $(`#length-multi-${currentPage}`).val(formattedLength);
            //             window.resource1Product = resource;
            //             window.resource1Process = resource;
            //             updateProductQTY(resource, true, currentPage);
            //             updateCompQTYTarget(resource, true, currentPage);
            //         }

            //         Swal.fire({
            //             title: 'Berhasil!',
            //             text: `Resource "${resource}" berhasil dipilih untuk Resource ${idx} pada Halaman ${currentPage}`,
            //             icon: 'success',
            //             timer: 1500,
            //             showConfirmButton: false
            //         });

            //         updateAltBomCodeMulti(currentPage);
            //         window.currentResourceMultiIndex = undefined;
            //         window.currentResourceMultiPage = undefined;
            //     } else {
            //         // Single Resource Mode
            //         const index = currentPage;
            //         $(`#resources-${index}`).val(resource);
            //         $(`#resource_display_${index}`).val(resource);
            //         $(`#mat_type-${index}`).val(mat_type);
            //         $(`#width-${index}`).val(width);
            //         $(`#length-${index}`).val(formattedLength);
            //         $(`#capacity-${index}`).val(capacity);

            //         // Set machine code
            //         let machineCode = '';
            //         if (resource) {
            //             let resourceCode = resource.toString();
            //             machineCode = resourceCode.slice(-2) + '-';
            //         }
            //         $(`#machine-code-${index}`).text(machineCode);

            //         updateProductQTY(resource, false, index);
            //         updateCompQTYTarget(resource, false, index);
            //     }

            //     $('#resourceModal').modal('hide');
            // };

            // ============================================================
            // SECTION 3B: selectResource (dipanggil dari modal resource)
            // Auto-fill capacity dari master, tapi tetap bisa diedit manual
            // ============================================================
            window.selectResource = function(resource, mat_type, width, length, capacity) {
                let currentPage = window.currentResourceMultiPage !== undefined ?
                    window.currentResourceMultiPage :
                    currentResourceIndex;

                applyResourceSelection({
                    pageIndex: currentPage,
                    multiIndex: (window.currentResourceMultiIndex !== undefined) ?
                        window.currentResourceMultiIndex :
                        null,
                    isCustom: false,
                    data: {
                        resource,
                        mat_type,
                        width,
                        length,
                        capacity
                    }
                });

                $('#resourceModal').modal('hide');

                // Reset tracker setelah dipilih
                window.currentResourceMultiIndex = undefined;
                window.currentResourceMultiPage = undefined;
            };

            // ============================================================
            // SECTION 4: MATERIAL FG/SFG MANAGEMENT
            // ============================================================

            // Real-time SAP Auto-Validation saat mengetik/paste material di Jumbo
            const debouncedValidateSapJ = debounce(function(material, pageIndex) {
                if (material && material.length >= 5) {
                    validateMaterialInSAP(material, pageIndex);
                }
            }, 350);

            $(document).on('input paste', '.material-search-recommendation', function() {
                const index = $(this).data("index") || (($(this).attr("id") || "").includes("-") ? $(this).attr("id").split("-").pop() : 1);
                const material = $(this).val().trim();
                if (!material) {
                    $(`#material-label-${index}`).find('.sap-badge').remove();
                    return;
                }
                debouncedValidateSapJ(material, index);
            });

            // Apply Material FG/SFG ke semua baris
            $(document).on('change', '.material-search-recommendation', function() {
                const index = $(this).data("index") || (($(this).attr("id") || "").includes("-") ? $(this).attr("id").split("-").pop() : null);
                const isMulti = $(`#multiResourceCheckbox-${index}`).is(':checked');
                const material = isMulti ?
                    $(`#material-multi-${index}`).val() :
                    $(`#material-${index}`).val();

                if (!material) {
                    return;
                }

                // Validasi material di SAP (async, hanya untuk badge status)
                validateMaterialInSAP(material, index);

                // Cek apakah tabel sudah berisi baris data
                const bomTable = $(`#datatable-bom-${index}`).DataTable();
                const hasExistingData = bomTable.rows().count() > 0;

                if (hasExistingData) {
                    // Tabel sudah terisi (data dari DB atau dari paste) →
                    // Hanya update kolom Material FG/SFG per baris, TANPA load ulang
                    // komponen agar comp_material_code tidak ter-reset
                    bomTable.rows().every(function() {
                        $(this.node()).find('.fg-input').val(material);
                    });
                    // Bersihkan paste mode flag jika ada (tidak blocking apapun lagi)
                    if (window._pasteMode) window._pasteMode[index] = false;
                } else {
                    // Tabel masih kosong → load komponen dari DB seperti biasa
                    loadMaterialComponents(material, index);
                }
            });


            // ============================================================
            // SECTION 5: COMPONENT MATERIAL MANAGEMENT
            // ============================================================

            // Select Component dari Modal - Validasi SAP untuk get desc dan uom
            window.selectComponent = function(code, desc, uom) {
                console.log(`[JUMBO] Component selected from modal: ${code}`);

                let targetRow = $(
                    `input[name="bom_data[${currentTargetIndex}][detail][${currentRowIndex}][comp_material_code]"]`
                ).closest('tr');

                // Set comp_material_code
                targetRow.find('input[name*="[comp_material_code]"]').val((code || '').toUpperCase());
                targetRow.find('input[name*="[type]"]').val('L');

                const $validationMessage = targetRow.find('.sap-validation-message');

                if (!code) {
                    $validationMessage.empty();
                    targetRow.find('input[name*="[comp_desc]"]').val('');
                    targetRow.find('input[name*="[uom]"]').val('');
                    $('#componentModal').modal('hide');
                    return;
                }

                // Tampilkan animasi loading di bawah field comp material
                $validationMessage
                    .removeClass('text-success text-danger text-muted')
                    .addClass('text-warning')
                    .html('<i class="fas fa-spinner fa-spin me-1"></i> Memeriksa di SAP...');

                // Call AJAX untuk validasi component material di SAP
                $.ajax({
                    url: window.location.href,
                    method: 'GET',
                    data: {
                        action: 'validate_component_material_sap',
                        material_code: code
                    },
                    success: function(response) {
                        console.log('[JUMBO] SAP Component Validation Response:', response);

                        let targetRow = $(
                            `input[name="bom_data[${currentTargetIndex}][detail][${currentRowIndex}][comp_material_code]"]`
                        ).closest('tr');

                        // Set comp_material_code
                        targetRow.find('input[name*="[comp_material_code]"]').val((code || '').toUpperCase());
                        targetRow.find('input[name*="[type]"]').val('L');

                        // Set comp_desc dan comp_uom dari SAP (bukan dari mst_material)
                        targetRow.find('input[name*="[comp_desc]"]').val(response.comp_desc);
                        let comp_uom_norm = response.comp_uom;
                        if (comp_uom_norm == 'ST') comp_uom_norm = 'PC';
                        if (comp_uom_norm == 'ROL') comp_uom_norm = 'M';
                        targetRow.find('input[name*="[uom]"]').val(comp_uom_norm);

                        // Tampilkan pesan validasi SAP di bawah input
                        const $validationMessage = targetRow.find('.sap-validation-message');

                        if (!response.exists) {
                            // Material tidak ditemukan di SAP
                            $validationMessage
                                .removeClass('text-success text-warning')
                                .addClass('text-danger')
                                .html('<i class="fas fa-times-circle me-1"></i> Value tidak ditemukan di SAP');
                        } else if (response.deleted) {
                            // Material telah dihapus di SAP
                            $validationMessage
                                .removeClass('text-success text-warning')
                                .addClass('text-danger')
                                .html('<i class="fas fa-exclamation-triangle me-1"></i> Value tidak ditemukan di SAP (Deleted)');
                        } else {
                            // Material ditemukan di SAP
                            $validationMessage
                                .removeClass('text-danger text-warning')
                                .addClass('text-success')
                                .html('<i class="fas fa-check-circle me-1"></i> Value ditemukan di SAP');
                        }

                        $('#componentModal').modal('hide');
                    },
                    error: function(xhr, status, error) {
                        console.error('[JUMBO] SAP Component Validation Error:', error);

                        // Jika error, set nilai default '-'
                        let targetRow = $(
                            `input[name="bom_data[${currentTargetIndex}][detail][${currentRowIndex}][comp_material_code]"]`
                        ).closest('tr');
                        targetRow.find('input[name*="[comp_material_code]"]').val((code || '').toUpperCase());
                        targetRow.find('input[name*="[comp_desc]"]').val('-');
                        targetRow.find('input[name*="[type]"]').val('L');
                        targetRow.find('input[name*="[uom]"]').val('-');

                        // Tampilkan pesan error di bawah input
                        const $validationMessage = targetRow.find('.sap-validation-message');
                        $validationMessage
                            .removeClass('text-success text-warning')
                            .addClass('text-danger')
                            .html('<i class="fas fa-times-circle me-1"></i> Value tidak ditemukan di SAP');

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

            // Save New Component Material
            function saveNewMaterial(materialCode) {
                $('#createMaterialModal').modal('hide');
                selectComponent(materialCode, '-', '-');
                Swal.fire({
                    title: 'Berhasil!',
                    text: `Component Material "${materialCode}" berhasil dipilih`,
                    icon: 'success',
                    timer: 2000,
                    showConfirmButton: false
                });
            }

            // ============================================================
            // SECTION 6: ALTERNATIVE BOM TEXT MANAGEMENT
            // ============================================================

            // Apply Alternative BOM Text ke semua baris
            $(document).on('change input', '.alt-bom-input-recommendation', function() {
                let index = $(this).data("index") || (($(this).attr("id") || "").includes("-") ? $(this).attr("id").split("-").pop() : null);
                let customText = '';
                let machineCode = '';

                if ($(`#multiResourceCheckbox-${index}`).is(':checked')) {
                    customText = $(`#alt_bom_text-multi-${index}`).val();
                    machineCode = $(`#machine-code-multi-${index}`).text();
                } else {
                    customText = $(`#alt_bom_text-${index}`).val();
                    machineCode = $(`#machine-code-${index}`).text();
                }

                if (!customText) {
                    return;
                }

                let altBomText = machineCode + customText;

                // Apply to all rows
                let table = $(`#datatable-bom-${index}`).DataTable();
                table.rows().every(function() {
                    let rowNode = this.node();
                    $(rowNode).find('.alt-bom-row').val(altBomText);
                });
            });

            // ============================================================
            // SECTION 7: TABLE ROW MANAGEMENT
            // ============================================================

            //  Fungsi validasi component material di SAP untuk baris tertentu
            function validateComponentMaterialInRow(tableIndex, rowNumber, materialCode) {
                if (!materialCode) return;

                const $row = $(`input[name="bom_data[${tableIndex}][detail][${rowNumber}][comp_material_code]"]`)
                    .closest('tr');
                const $validationMessage = $row.find('.sap-validation-message');

                // Show loading state
                $validationMessage
                    .removeClass('text-success text-danger text-muted')
                    .addClass('text-warning')
                    .html('<i class="fas fa-spinner fa-spin me-1"></i> Memeriksa di SAP...');

                $.ajax({
                    url: window.location.href,
                    method: 'GET',
                    data: {
                        action: 'validate_component_material_sap',
                        material_code: materialCode
                    },
                    success: function(response) {
                        // Set comp_desc dan uom dari SAP
                        $row.find('input[name*="[comp_desc]"]').val(response.comp_desc);
                        $row.find('input[name*="[uom]"]').val(response.comp_uom == 'ST' ? 'PC' : response.comp_uom);

                        // Update validation message
                        if (!response.exists) {
                            $validationMessage
                                .removeClass('text-success text-warning')
                                .addClass('text-danger')
                                .html('<i class="fas fa-times-circle me-1"></i> Value tidak ditemukan di SAP');
                        } else if (response.deleted) {
                            $validationMessage
                                .removeClass('text-success text-warning')
                                .addClass('text-danger')
                                .html('<i class="fas fa-exclamation-triangle me-1"></i> Value tidak ditemukan di SAP (Deleted)');
                        } else {
                            $validationMessage
                                .removeClass('text-danger text-warning')
                                .addClass('text-success')
                                .html('<i class="fas fa-check-circle me-1"></i> Value ditemukan di SAP');
                        }
                    },
                    error: function() {
                        $validationMessage
                            .removeClass('text-success text-warning')
                            .addClass('text-danger')
                            .html('<i class="fas fa-times-circle me-1"></i> Gagal validasi SAP');
                    }
                });
            }

            // Tambah baris data ke tabel
            function addTableRow(tableIndex, rowNumber, data = {}) {
                let itemNumber = (rowNumber * 10).toString().padStart(4, '0');
                let productQty = data.product_qty || 100; // Default 100
                let baseUomHeader = data.base_uom_header || '';
                let productQtyReadonly = true; // Selalu readonly

                let rowData = [
                    rowNumber,
                    `<input type="text" class="form-control form-control-sm fg-input" name="bom_data[${tableIndex}][detail][${rowNumber}][material_fg_sfg]" value="${data.material_fg_sfg || ''}" readonly />`,
                    `<input type="text" class="form-control form-control-sm alt-bom-row" name="bom_data[${tableIndex}][detail][${rowNumber}][alt_bom_text]" value="${data.alt_bom_text || ''}" readonly />`,
                    `<input type="number" class="form-control form-control-sm product-qty" name="bom_data[${tableIndex}][detail][${rowNumber}][product_qty]" value="${productQty}" ${productQtyReadonly ? 'readonly' : ''} />`,
                    `<input type="text" class="form-control form-control-sm" name="bom_data[${tableIndex}][detail][${rowNumber}][base_uom_header]" value="${baseUomHeader}" readonly />`,
                    `<input type="text" class="form-control form-control-sm" name="bom_data[${tableIndex}][detail][${rowNumber}][item_number]" value="${itemNumber}" readonly />`,
                    `<input type="text" class="form-control form-control-sm" name="bom_data[${tableIndex}][detail][${rowNumber}][type]" value="${typeof data.type !== 'undefined' && data.type !== '' ? data.type : 'L'}" readonly />`,
                    `<div class="input-group input-group-sm">
                        <input type="text" class="form-control form-control-sm comp-material-input comp-material-recommendation text-uppercase" style="text-transform: uppercase;" name="bom_data[${tableIndex}][detail][${rowNumber}][comp_material_code]" value="${(data.comp_material_code || '').toUpperCase()}" placeholder="Input Material Code..." data-table="${tableIndex}" data-row="${rowNumber}" />
                    </div>
                    <small class="sap-validation-message"></small>`,
                    `<input type="text" class="form-control form-control-sm comp-desc" name="bom_data[${tableIndex}][detail][${rowNumber}][comp_desc]" value="${data.comp_desc || ''}" readonly />`,
                    `<input type="text" inputmode="decimal" class="form-control form-control-sm comp-qty-input" name="bom_data[${tableIndex}][detail][${rowNumber}][comp_qty]" value="${format3Decimal(data.comp_qty)}" placeholder="0,000" />`,
                    `<input type="text" class="form-control form-control-sm uom" name="bom_data[${tableIndex}][detail][${rowNumber}][uom]" value="${data.uom || ''}" readonly />`,
                    `<button type="button" class="btn btn-sm btn-danger btn-delete-row"><i class="fas fa-trash"></i></button>`
                ];

                let table = $(`#datatable-bom-${tableIndex}`).DataTable();
                table.row.add(rowData).draw();
                calculateTotalCompQty(tableIndex);

                // Init ValueRecommendation untuk input comp material yang baru ditambahkan
                setTimeout(function() {
                    const newInput = $(
                        `input[name="bom_data[${tableIndex}][detail][${rowNumber}][comp_material_code]"]`
                    )[0];
                    if (newInput && !newInput.classList.contains('recommendation-initialized')) {
                        new ValueRecommendation({
                            inputSelector: `input[name="bom_data[${tableIndex}][detail][${rowNumber}][comp_material_code]"]`,
                            apiUrl: "{{ url($url_menu . '/add') }}",
                            type: 'compmaterial',
                            onSelect: function(value, input) {
                                const upperVal = (value || '').toUpperCase();
                                $(input).val(upperVal).attr('value', upperVal).trigger('input').trigger('change');
                            }
                        });
                        newInput.classList.add('recommendation-initialized');
                    }
                }, 100);
            }

            // Event: Tambah baris data
            $(document).on('click', '.btn-add-row', function() {
                const tableIndex = $(this).data('index');
                const table = $(`#datatable-bom-${tableIndex}`).DataTable();
                const rowCount = table.rows().count();
                const newRowNumber = rowCount + 1;

                // Ambil data header & default untuk baris baru (komponen material dikosongkan agar tidak mewarisi data baris sebelumnya)
                let newRowData = {
                    material_fg_sfg: $(`#material-${tableIndex}`).val() || $(`#material-multi-${tableIndex}`).val() || '',
                    alt_bom_text: $(`#alt_bom_text-${tableIndex}`).val() || $(`#alt_bom_text-multi-${tableIndex}`).val() || '',
                    product_qty: 100,
                    base_uom_header: 'KG',
                    type: 'L',
                    comp_material_code: '',
                    comp_desc: '',
                    comp_qty: '',
                    uom: ''
                };
                if (rowCount > 0) {
                    const lastRowNode = table.row(rowCount - 1).node();
                    if (lastRowNode) {
                        const $lastRow = $(lastRowNode);
                        newRowData.material_fg_sfg = $lastRow.find('.fg-input').val() || newRowData.material_fg_sfg;
                        newRowData.alt_bom_text = $lastRow.find('.alt-bom-row').val() || newRowData.alt_bom_text;
                        newRowData.product_qty = $lastRow.find('.product-qty').val() || newRowData.product_qty;
                        newRowData.base_uom_header = $lastRow.find('input[name*="[base_uom_header]"]').val() || newRowData.base_uom_header;
                    }
                }
                addTableRow(tableIndex, newRowNumber, newRowData);
            });

            // Event: Hapus baris data
            $(document).on('click', '.btn-delete-row', function() {
                let row = $(this).closest('tr');
                let table = row.closest('table').DataTable();
                let tableIndex = table.table().node().getAttribute('data-index');

                table.row(row).remove().draw();

                // Renumber rows
                table.rows().every(function(rowIdx) {
                    let rowNode = this.node();
                    let newRowNumber = rowIdx + 1;

                    $(rowNode).find('td:first').text(newRowNumber);

                    $(rowNode).find('input').each(function() {
                        let oldName = $(this).attr('name');
                        if (oldName) {
                            let newName = oldName.replace(/\[detail\]\[\d+\]/,
                                `[detail][${newRowNumber}]`);
                            $(this).attr('name', newName);
                        }
                    });

                    $(rowNode).find('.comp-material-input').each(function() {
                        $(this).attr('data-row', newRowNumber);
                    });
                });

                calculateTotalCompQty(tableIndex);
            });

            // Auto uppercase untuk input Component Material Code
            $(document).on('input', '.comp-material-input', function() {
                this.value = this.value.toUpperCase();
            });

            // ============================================================
            // Event: Validasi Comp Material ke SAP (otomatis saat change)
            // ============================================================
            $(document).on('change', '.comp-material-input', function(e) {
                e.preventDefault();
                e.stopPropagation();

                const tableIndex = $(this).data('table');
                const rowIndex = $(this).data('row');
                const $input = $(this);
                const materialCode = $input.val().trim();
                const $targetRow = $input.closest('tr');
                const $validationMessage = $targetRow.find('.sap-validation-message');

                // Cegah validasi berulang jika nilainya sama dengan yang terakhir divalidasi
                const lastValidated = $input.data('last-validated');
                if (lastValidated === materialCode) {
                    return;
                }
                $input.data('last-validated', materialCode);

                if (!materialCode) {
                    $validationMessage.empty();
                    $targetRow.find('input[name*="[comp_desc]"]').val('');
                    $targetRow.find('input[name*="[uom]"]').val('');
                    return;
                }

                // Tampilkan animasi loading di bawah field comp material
                $validationMessage
                    .removeClass('text-success text-danger text-muted')
                    .addClass('text-warning')
                    .html('<i class="fas fa-spinner fa-spin me-1"></i> Memeriksa di SAP...');

                $.ajax({
                    url: window.location.href,
                    method: 'GET',
                    data: {
                        action: 'validate_component_material_sap',
                        material_code: materialCode
                    },
                    success: function(response) {
                        $targetRow.find('input[name*="[comp_desc]"]').val(response.comp_desc);

                        let uomNorm = response.comp_uom;
                        if (uomNorm === 'ST') uomNorm = 'PC';
                        if (uomNorm === 'ROL') uomNorm = 'M';
                        $targetRow.find('input[name*="[uom]"]').val(uomNorm);

                        if (!response.exists) {
                            $validationMessage
                                .removeClass('text-success text-warning')
                                .addClass('text-danger')
                                .html('<i class="fas fa-times-circle me-1"></i> Value tidak ditemukan di SAP');
                        } else if (response.deleted) {
                            $validationMessage
                                .removeClass('text-success text-warning')
                                .addClass('text-danger')
                                .html('<i class="fas fa-exclamation-triangle me-1"></i> Value tidak ditemukan di SAP (Deleted)');
                        } else {
                            $validationMessage
                                .removeClass('text-danger text-warning')
                                .addClass('text-success')
                                .html('<i class="fas fa-check-circle me-1"></i> Value ditemukan di SAP');
                        }
                    },
                    error: function(xhr, status, error) {
                        $targetRow.find('input[name*="[comp_desc]"]').val('-');
                        $targetRow.find('input[name*="[uom]"]').val('-');
                        $validationMessage
                            .removeClass('text-success text-warning')
                            .addClass('text-danger')
                            .html('<i class="fas fa-times-circle me-1"></i> Value tidak ditemukan di SAP');
                    }
                });
            });

            // Tekan Enter di input comp material = blur untuk memicu change event
            $(document).on('keypress', '.comp-material-input', function(e) {
                if (e.which === 13) {
                    e.preventDefault();
                    $(this).blur(); // Ini akan memicu event change
                }
            });

            // Load Material Components
            function loadMaterialComponents(material, index) {
                // GUARD: Jika sedang dalam mode paste, jangan jalankan AJAX sama sekali
                if (window._pasteMode && window._pasteMode[index]) {
                    console.log(`[JUMBO] loadMaterialComponents dibatalkan — paste mode aktif untuk Form #${index}`);
                    return;
                }

                $.ajax({
                    url: "{{ url($url_menu . '/add') }}",
                    type: 'GET',
                    data: {
                        action: 'get_material_components',
                        material: material
                    },
                    dataType: 'json',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    },
                    success: function(data) {
                        let table = $(`#datatable-bom-${index}`).DataTable();
                        table.clear();

                        // Product QTY selalu 100 dan readonly
                        let currentQty = 100;
                        let currentReadonly = true;

                        if (data.components && data.components.length > 0) {
                            data.components.forEach(function(comp, idx) {
                                addTableRow(index, idx + 1, {
                                    material_fg_sfg: material,
                                    product_qty: currentQty,
                                    product_qty_readonly: currentReadonly,
                                    base_uom_header: data.base_uom_header || '',
                                    comp_material_code: comp.comp_material_code || '',
                                    comp_desc: comp.comp_desc || '',
                                    comp_qty: format3Decimal(comp.comp_qty),
                                    uom: comp.uom || '',
                                    type: comp.type || 'L'
                                });
                            });
                        } else {
                            addTableRow(index, 1, {
                                material_fg_sfg: material,
                                product_qty: currentQty,
                                product_qty_readonly: currentReadonly,
                                base_uom_header: data.base_uom_header || '',
                                type: 'L'
                            });
                        }

                        table.draw();
                        calculateTotalCompQty(index);

                        //  Auto-validasi SAP untuk semua component material code yang ter-generate
                        setTimeout(function() {
                            autoValidateAllComponentMaterialsSAP(index);
                        }, 500);
                    },
                    error: function() {
                        Swal.fire('Error', 'Gagal mengambil data komponen material', 'error');
                    }
                });
            }

            //  Auto-validasi SAP untuk semua component material code dalam satu table
            function autoValidateAllComponentMaterialsSAP(tableIndex) {
                console.log(`[JUMBO] Auto-validating all component materials in table ${tableIndex}...`);

                const table = $(`#datatable-bom-${tableIndex}`).DataTable();
                let validationPromises = [];
                let validatedCount = 0;
                let skippedCount = 0;

                // Iterasi semua baris dalam table
                table.rows().every(function() {
                    const rowNode = this.node();
                    const $row = $(rowNode);
                    const $compMaterialInput = $row.find('input[name*="[comp_material_code]"]');
                    const materialCode = $compMaterialInput.val().trim();

                    // Skip jika material code kosong
                    if (!materialCode) {
                        skippedCount++;
                        return;
                    }

                    console.log(`[JUMBO] Validating: ${materialCode}`);

                    const $validationMessage = $row.find('.sap-validation-message');
                    $validationMessage
                        .removeClass('text-success text-danger text-muted')
                        .addClass('text-warning')
                        .html('<i class="fas fa-spinner fa-spin me-1"></i> Memeriksa di SAP...');

                    // Create validation promise
                    const validationPromise = $.ajax({
                        url: window.location.href,
                        method: 'GET',
                        data: {
                            action: 'validate_component_material_sap',
                            material_code: materialCode
                        }
                    }).then(function(response) {
                        console.log(`[JUMBO] SAP Validation Result for ${materialCode}:`, response);

                        // Update comp_desc dan comp_uom di row ini
                        $row.find('input[name*="[comp_desc]"]').val(response.comp_desc);

                        let uom_normalisasi = '';
                        if (response.comp_uom == 'ST') {
                            uom_normalisasi = 'PC';
                        } else if (response.comp_uom == 'ROL') {
                            uom_normalisasi = 'M';
                        } else {
                            uom_normalisasi = response.comp_uom;
                        }

                        $row.find('input[name*="[uom]"]').val(uom_normalisasi);

                        //  Tampilkan pesan validasi SAP di bawah input
                        if (!response.exists) {
                            // Material tidak ditemukan di SAP
                            $validationMessage
                                .removeClass('text-success text-warning')
                                .addClass('text-danger')
                                .html('<i class="fas fa-times-circle me-1"></i> Value tidak ditemukan di SAP');
                        } else if (response.deleted) {
                            // Material telah dihapus di SAP
                            $validationMessage
                                .removeClass('text-success text-warning')
                                .addClass('text-danger')
                                .html('<i class="fas fa-exclamation-triangle me-1"></i> Value tidak ditemukan di SAP (Deleted)');
                        } else {
                            // Material ditemukan di SAP
                            $validationMessage
                                .removeClass('text-danger text-warning')
                                .addClass('text-success')
                                .html('<i class="fas fa-check-circle me-1"></i> Value ditemukan di SAP');
                        }

                        validatedCount++;

                        // Log hasil validasi
                        if (!response.exists) {
                            console.log(
                                `  ⚠️ ${materialCode}: Belum ada di SAP (comp_desc: ${response.comp_desc}, comp_uom: ${response.comp_uom})`
                            );
                        } else if (response.deleted) {
                            console.log(
                                `  ❌ ${materialCode}: Telah dihapus di SAP (comp_desc: ${response.comp_desc}, comp_uom: ${response.comp_uom})`
                            );
                        } else {
                            console.log(
                                `  ✅ ${materialCode}: Ditemukan di SAP (comp_desc: ${response.comp_desc}, comp_uom: ${response.comp_uom})`
                            );
                        }

                        return response;
                    }).catch(function(error) {
                        console.error(`[JUMBO] Validation Error for ${materialCode}:`, error);

                        // Set default '-' jika error
                        $row.find('input[name*="[comp_desc]"]').val('-');
                        $row.find('input[name*="[uom]"]').val('-');

                        //  Tampilkan pesan error di bawah input
                        $validationMessage
                            .removeClass('text-success text-warning')
                            .addClass('text-danger')
                            .html('<i class="fas fa-times-circle me-1"></i> Value tidak ditemukan di SAP');

                        validatedCount++;
                    });

                    validationPromises.push(validationPromise);
                });

                // Wait for all validations to complete
                Promise.all(validationPromises).then(function(results) {
                    console.log(
                        `[JUMBO] Auto-validation complete: ${validatedCount} validated, ${skippedCount} skipped (empty)`
                    );
                    // Toast notification dihapus - pesan validasi sudah ditampilkan di bawah setiap input
                }).catch(function(error) {
                    console.error('[JUMBO] Auto-validation error:', error);
                });
            }

            // ============================================================
            // SECTION 8: PAGE MANAGEMENT
            // ============================================================

            // Event: Tambah halaman baru
            $('#btnTambahHalaman').on('click', function() {
                addNewPage();
            });

            // Event: Hapus halaman static
            $(document).on('click', '.btn-hapus-halaman', function() {
                var currentRows = parseInt('{{ $rows }}');
                if (currentRows > 1) {
                    var nextRows = currentRows - 1;
                    window.location = "{{ URL::to($url_menu . '/add') }}?rows=" + nextRows;
                }
            });

            // Event: Hapus halaman dynamic
            $(document).on('click', '.btn-hapus-halaman-dynamic', function() {
                let pageIndex = $(this).data('page');
                let $btn = $(this);

                Swal.fire({
                    title: 'Hapus Halaman?',
                    text: `Apakah Anda yakin ingin menghapus Halaman ${pageIndex}? Data yang sudah diisi akan hilang.`,
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#d33',
                    cancelButtonColor: '#3085d6',
                    confirmButtonText: 'Ya, Hapus!',
                    cancelButtonText: 'Batal'
                }).then((result) => {
                    if (result.isConfirmed) {
                        $btn.closest('.col-md-12').remove();

                        if ($.fn.DataTable.isDataTable(`#datatable-bom-${pageIndex}`)) {
                            $(`#datatable-bom-${pageIndex}`).DataTable().destroy();
                        }

                        renumberDynamicPages();

                        Swal.fire({
                            title: 'Berhasil!',
                            text: `Halaman ${pageIndex} berhasil dihapus`,
                            icon: 'success',
                            timer: 1500,
                            showConfirmButton: false
                        });
                    }
                });
            });

            // Tambah halaman baru secara dinamis
            function addNewPage() {
                let currentPages = $('#bom-pages-row > .col-md-12').length;
                let newPageIndex = currentPages + 1;

                let newPageHtml = createNewPageHtml(newPageIndex);
                $('#bom-pages-row').append(newPageHtml);

                setTimeout(() => {
                    initResourceCombobox(
                        `#resource_input_${newPageIndex}`,
                        `#resource_dropdown_${newPageIndex}`
                    );

                    // Initialize default Comp QTY target untuk halaman baru
                    if (!window.compQtyTargets) window.compQtyTargets = {};
                    window.compQtyTargets[newPageIndex] = 100;

                    initializeDataTableForPage(newPageIndex);
                    initializeValueRecommendationForPage(newPageIndex);
                    calculateTotalCompQty(newPageIndex);
                }, 100);

                Swal.fire({
                    title: 'Berhasil!',
                    text: `Halaman ${newPageIndex} berhasil ditambahkan`,
                    icon: 'success',
                    timer: 1500,
                    showConfirmButton: false
                });
            }

            // Generate HTML untuk halaman baru
            function createNewPageHtml(pageIndex) {
                return `
                                                <div class="col-md-12 mb-4">
                                                    <div class="card">
                                                        <div class="card-body">
                                                            <div class="d-flex justify-content-between align-items-center mb-3">
                                                                <h5 class="mb-0">Form Transaksi BOM #${pageIndex}</h5>
                                                                <div class="d-flex align-items-center gap-2">
                                                                    <button type="button" class="btn btn-outline-info btn-sm btn-copy-halaman"
                                                                        onclick="copyBomJ(${pageIndex})" title="Copy Halaman">
                                                                        <i class="fas fa-copy me-1"></i> Copy
                                                                    </button>
                                                                    <button type="button" class="btn btn-outline-success btn-sm btn-paste-halaman"
                                                                        onclick="pasteBomJ(${pageIndex})" title="Paste Halaman">
                                                                        <i class="fas fa-paste me-1"></i> Paste
                                                                    </button>
                                                                    <button type="button" class="btn btn-outline-danger btn-sm btn-hapus-halaman-dynamic"
                                                                        title="Hapus Halaman" data-page="${pageIndex}">
                                                                        <i class="fas fa-times me-1"></i> Hapus
                                                                    </button>
                                                                </div>
                                                            </div>
                                                            <div class="row">
                                                                <div class="mb-3">
                                                                    <div class="form-check form-switch">
                                                                        <input class="form-check-input multiResourceCheckbox" type="checkbox"
                                                                            id="multiResourceCheckbox-${pageIndex}"
                                                                            style="background-color: #f8f9fa; border-color: #028284;">
                                                                        <label class="form-check-label fw-bold text-dark"
                                                                            for="multiResourceCheckbox-${pageIndex}">
                                                                            <i class="fas fa-cogs me-2" style="color: #028284;"></i>
                                                                            Apakah Resource lebih dari satu?
                                                                        </label>
                                                                    </div>
                                                                </div>
                                                                <div id="multiResourceCountWrapper-${pageIndex}" class="mb-3" style="display:none;">
                                                                    <label for="multiResourceCount-${pageIndex}">Jumlah Resource:</label>
                                                                    <input type="number" min="2" max="10"
                                                                        id="multiResourceCount-${pageIndex}"
                                                                        class="form-control multiResourceCount"
                                                                        value="2" data-page="${pageIndex}" />
                                                                </div>
                                                                <div class="col-md-6 mb-3 singleResourceInputs" id="singleResourceInputs-${pageIndex}">
                                                                    <label class="form-control-label">Resources <span class="text-danger">*</span></label>
                                                                    <input type="hidden" name="bom_data[${pageIndex}][resources]"
                                                                        id="resources-${pageIndex}" required>
                                                                    <div class="resource-combobox position-relative">
                                                                        <input type="text" class="form-control resource-input"
                                                                            id="resource_input_${pageIndex}" data-page="${pageIndex}"
                                                                            placeholder="Ketik untuk cari resource / tambah custom...">
                                                                        <div class="resource-dropdown list-group position-absolute w-100 shadow"
                                                                            id="resource_dropdown_${pageIndex}"
                                                                            style="display:none; z-index: 9999; max-height: 260px; overflow:auto;"></div>
                                                                    </div>
                                                                    <small class="text-muted">Pilih dari master atau tambah custom jika tidak ada.</small>
                                                                </div>
                                                                <div class="col-md-12 mb-3 multiResourceInputs"
                                                                    id="multiResourceInputs-${pageIndex}" style="display:none;">
                                                                </div>
                                                                <div class="col-md-6 mb-3 single-material-wrapper" id="singleMaterial-${pageIndex}">
                                                                    <label class="form-control-label" id="material-label-${pageIndex}">Material FG/SFG <span class="text-danger">*</span></label>
                                                                    <div class="input-group">
                                                                        <input type="text" class="form-control material-search-recommendation"
                                                                            name="bom_data[${pageIndex}][material]"
                                                                            id="material-${pageIndex}"
                                                                            autocomplete="off"
                                                                            placeholder="Cari Material...">
                                                                        
                                                                    </div>
                                                                </div>
                                                                <div class="col-md-6 mb-3 single-material-wrapper" id="singleMatType-${pageIndex}">
                                                                    <label class="form-control-label">Mat Type</label>
                                                                    <input type="text" class="form-control mat-type"
                                                                        name="bom_data[${pageIndex}][mat_type]"
                                                                        id="mat_type-${pageIndex}" readonly>
                                                                </div>
                                                                <div class="col-md-3 mb-3 single-material-wrapper" id="singleWidth-${pageIndex}">
                                                                    <label class="form-control-label">Width</label>
                                                                    <input type="text" class="form-control width"
                                                                        name="bom_data[${pageIndex}][width]"
                                                                        id="width-${pageIndex}">
                                                                </div>
                                                                <div class="col-md-3 mb-3 single-material-wrapper" id="singleLength-${pageIndex}">
                                                                    <label class="form-control-label">Length</label>
                                                                    <input type="text" class="form-control length"
                                                                        name="bom_data[${pageIndex}][length]"
                                                                        id="length-${pageIndex}">
                                                                </div>
                                                                <div class="col-md-6 mb-3 single-capacity-wrapper" id="singleCapacity-${pageIndex}">
                                                                    <label class="form-control-label">Capacity <span class="text-danger">*</span></label>
                                                                    <input type="text" inputmode="decimal" class="form-control capacity"
                                                                        name="bom_data[${pageIndex}][capacity]"
                                                                        id="capacity-${pageIndex}"
                                                                        placeholder="0,000">
                                                                </div>
                                                                <div class="col-md-6 mb-3 single-material-wrapper" id="singleAltBom-${pageIndex}">
                                                                    <label class="form-control-label">Alternative BOM Text Custom <span class="text-danger">*</span></label>
                                                                    <div class="input-group">
                                                                        <span class="input-group-text machine-code" id="machine-code-${pageIndex}"></span>
                                                                        <input type="text" class="form-control alt-bom-input-recommendation"
                                                                            name="bom_data[${pageIndex}][alt_bom_text]"
                                                                            id="alt_bom_text-${pageIndex}"
                                                                            placeholder="Input Custom...">
                                                                        
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <hr class="my-4">
                                                            <div class="table-responsive">
                                                                <table id="datatable-bom-${pageIndex}" class="table display bom-table"
                                                                    data-index="${pageIndex}">
                                                                    <thead class="thead-light" style="background-color: #00b7bd4f;">
                                                                        <tr>
                                                                            <th>No</th>
                                                                            <th>Material FG/SFG</th>
                                                                            <th>Alternative BOM Text</th>
                                                                            <th>Product QTY</th>
                                                                            <th>Base UOM Header</th>
                                                                            <th>Item Number</th>
                                                                            <th>Type</th>
                                                                            <th>Comp Material Code (18)</th>
                                                                            <th>Comp Desc (40)</th>
                                                                            <th>Comp QTY</th>
                                                                            <th>UOM</th>
                                                                            <th>Action</th>
                                                                        </tr>
                                                                    </thead>
                                                                    <tbody>
                                                                    </tbody>
                                                                    <tfoot>
                                                                        <tr style="background-color: #f8f9fa; font-weight: bold; border-top: 2px solid #028284;">
                                                                            <td colspan="9" class="text-end" style="padding: 12px; font-size: 14px; color: #028284;">
                                                                                <strong>TOTAL COMP QTY:</strong>
                                                                            </td>
                                                                            <td class="text-center total-comp-qty-cell" style="padding: 12px; font-size: 14px;">
                                                                                <strong><span id="total-comp-qty-${pageIndex}" class="total-comp-qty">0.000</span></strong>
                                                                            </td>
                                                                            <td class="comp-qty-alert-cell" style="padding: 12px; min-width: 180px;">
                                                                                <span class="comp-qty-alert" id="comp-qty-alert-${pageIndex}"></span>
                                                                            </td>
                                                                            <td style="padding: 12px;"></td>
                                                                        </tr>
                                                                    </tfoot>
                                                                </table>
                                                            </div>
                                                            <div class="mt-3">
                                                                <button type="button" class="btn btn-primary btn-add-row" data-index="${pageIndex}">
                                                                    <i class="fas fa-plus"></i> Tambah Baris Data
                                                                </button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                    `;
            }

            // Inisialisasi DataTable untuk halaman baru
            function initializeDataTableForPage(pageIndex) {
                let tableId = `#datatable-bom-${pageIndex}`;
                if ($.fn.DataTable.isDataTable(tableId)) {
                    $(tableId).DataTable().destroy();
                }

                $(`#datatable-bom-${pageIndex}`).DataTable({
                    destroy: true,
                    language: msjLanguage,
                    pageLength: 10,
                    lengthMenu: [5, 10, 25, 50],
                    responsive: true,
                    dom: 'lrtip',
                    order: [
                        [0, "asc"]
                    ],
                    paging: true,
                    searching: false,
                    info: true,
                    lengthChange: true,
                    autoWidth: false,
                    columnDefs: [{
                            targets: [0],
                            width: "5%",
                            className: "text-center"
                        },
                        {
                            targets: [1, 2],
                            width: "15%"
                        },
                        {
                            targets: [3, 4, 5],
                            width: "8%",
                            className: "text-center"
                        },
                        {
                            targets: [6],
                            width: "5%",
                            className: "text-center"
                        },
                        {
                            targets: [7, 8],
                            width: "15%"
                        },
                        {
                            targets: [9],
                            width: "8%",
                            className: "text-end"
                        },
                        {
                            targets: [10],
                            width: "8%",
                            className: "text-center"
                        },
                        {
                            targets: [11],
                            width: "8%",
                            orderable: false,
                            searchable: false,
                            className: "text-center"
                        }
                    ],
                    responsive: {
                        details: {
                            type: 'column',
                            target: 'tr'
                        }
                    }
                });

                $(`#width-${pageIndex}`);
                calculateTotalCompQty(pageIndex);
            }

            // Inisialisasi Value Recommendation untuk halaman baru
            function initializeValueRecommendationForPage(pageIndex) {
                setTimeout(() => {
                    const materialInput = document.querySelector(`#material-${pageIndex}`);
                    if (materialInput && !materialInput.hasAttribute('data-recommendation-initialized')) {
                        new ValueRecommendation({
                            inputSelector: `#material-${pageIndex}`,
                            apiUrl: "{{ url($url_menu . '/add') }}",
                            type: 'material',
                            onSelect: function(value, input) {
                                $(input).trigger('change');
                            }
                        });
                        materialInput.setAttribute('data-recommendation-initialized', 'true');
                    }

                    const altBomInput = document.querySelector(`#alt_bom_text-${pageIndex}`);
                    if (altBomInput && !altBomInput.hasAttribute('data-recommendation-initialized')) {
                        new ValueRecommendation({
                            inputSelector: `#alt_bom_text-${pageIndex}`,
                            apiUrl: "{{ url($url_menu . '/add') }}",
                            type: 'altbom',
                            onSelect: function(value, input) {
                                $(input).val(value);
                                $(input).trigger('change');
                            }
                        });
                        altBomInput.setAttribute('data-recommendation-initialized', 'true');
                    }
                }, 200);
            }

            // Renumber halaman dinamis setelah hapus
            function renumberDynamicPages() {
                let dynamicPages = $('#bom-pages-row > .col-md-12:has(.btn-hapus-halaman-dynamic)');
                let staticPageCount = parseInt('{{ $rows }}');

                dynamicPages.each(function(index) {
                    let newPageIndex = staticPageCount + index + 1;
                    let oldPageIndex = $(this).find('.btn-hapus-halaman-dynamic').attr('data-page') || $(this).find('.btn-hapus-halaman-dynamic').data('page');
                    oldPageIndex = parseInt(oldPageIndex, 10);

                    if (oldPageIndex === newPageIndex) {
                        return;
                    }

                    $(this).find('h5.mb-0').text(`Form Transaksi BOM #${newPageIndex}`);
                    $(this).find('.btn-hapus-halaman-dynamic')
                        .attr('data-page', newPageIndex)
                        .data('page', newPageIndex);

                    updatePageIdentifiers($(this), oldPageIndex, newPageIndex);
                });
            }

            // Update identifiers untuk halaman yang di-renumber
            function updatePageIdentifiers(pageContainer, oldIndex, newIndex) {
                pageContainer.find(`#multiResourceCheckbox-${oldIndex}`).attr('id',
                    `multiResourceCheckbox-${newIndex}`);
                pageContainer.find(`label[for="multiResourceCheckbox-${oldIndex}"]`).attr('for',
                    `multiResourceCheckbox-${newIndex}`);

                pageContainer.find(`#multiResourceCount-${oldIndex}`).attr('id', `multiResourceCount-${newIndex}`)
                    .data('page', newIndex);
                pageContainer.find(`label[for="multiResourceCount-${oldIndex}"]`).attr('for',
                    `multiResourceCount-${newIndex}`);
                pageContainer.find(`#multiResourceCountWrapper-${oldIndex}`).attr('id',
                    `multiResourceCountWrapper-${newIndex}`);

                pageContainer.find(`[name*="bom_data[${oldIndex}]"]`).each(function() {
                    let oldName = $(this).attr('name');
                    if (oldName) {
                        let newName = oldName.replace(`bom_data[${oldIndex}]`, `bom_data[${newIndex}]`);
                        $(this).attr('name', newName);
                    }
                });

                pageContainer.find(`[id*="-${oldIndex}"]`).each(function() {
                    let oldId = $(this).attr('id');
                    if (oldId) {
                        let newId = oldId.replace(`-${oldIndex}`, `-${newIndex}`);
                        $(this).attr('id', newId);
                    }
                });

                let oldTableId = `datatable-bom-${oldIndex}`;
                let newTableId = `datatable-bom-${newIndex}`;

                if ($.fn.DataTable.isDataTable(`#${oldTableId}`)) {
                    $(`#${oldTableId}`).DataTable().destroy();
                }

                pageContainer.find(`#${oldTableId}`).attr('id', newTableId).attr('data-index', newIndex);
                initializeDataTableForPage(newIndex);

                pageContainer.find(`[onclick*="${oldIndex}"]`).each(function() {
                    let oldOnclick = $(this).attr('onclick');
                    if (oldOnclick) {
                        let newOnclick = oldOnclick.replace(new RegExp(oldIndex, 'g'), newIndex);
                        $(this).attr('onclick', newOnclick);
                    }
                });

                pageContainer.find(`[data-index="${oldIndex}"]`).attr('data-index', newIndex);
            }

            // ============================================================
            // SECTION 9: MULTI RESOURCE LOGIC
            // ============================================================

            // Toggle Multi Resource Mode
            $(document).on('change', '.multiResourceCheckbox', function() {
                let pageIndex = $(this).attr('id').split('-')[1];

                if ($(this).is(':checked')) {
                    // FIX: Simpan semua nilai single sebelum disembunyikan (termasuk resource & capacity)
                    let savedResource = $(`#resources-${pageIndex}`).val() || $(`#resource_input_${pageIndex}`).val();
                    let savedCapacity = $(`#capacity-${pageIndex}`).val();
                    let savedMaterial = $(`#material-${pageIndex}`).val();
                    let savedMatType = $(`#mat_type-${pageIndex}`).val();
                    let savedWidth = $(`#width-${pageIndex}`).val();
                    let savedLength = $(`#length-${pageIndex}`).val();
                    let savedAltBomText = $(`#alt_bom_text-${pageIndex}`).val();
                    let savedMachineCode = $(`#machine-code-${pageIndex}`).text();

                    $(`#singleResourceInputs-${pageIndex}`).hide();
                    $(`#multiResourceCountWrapper-${pageIndex}`).show();
                    $(`#multiResourceInputs-${pageIndex}`).show();
                    $(`#singleCapacity-${pageIndex}`).hide();
                    $(`#singleMaterial-${pageIndex}`).hide();
                    $(`#singleMatType-${pageIndex}`).hide();
                    $(`#singleWidth-${pageIndex}`).hide();
                    $(`#singleLength-${pageIndex}`).hide();
                    $(`#singleAltBom-${pageIndex}`).hide();
                    generateMultiResourceInputs($(`#multiResourceCount-${pageIndex}`).val(), pageIndex);

                    // FIX: Copy nilai single (termasuk resource & capacity) ke field multi setelah DOM siap
                    setTimeout(() => {
                        if (savedResource) {
                            // Copy resource ke slot Resource 1 multi
                            $(`#resources_multi_${pageIndex}_1`).val(savedResource);
                            $(`#resource_input_multi_${pageIndex}_1`).val(savedResource);
                            updateAltBomCodeMulti(pageIndex);
                        }
                        // Copy capacity ke Capacity 1, lalu trigger input agar sync ke 2,3,...
                        if (savedCapacity) {
                            $(`#capacity_multi_${pageIndex}_1`).val(savedCapacity).trigger('input');
                        }
                        if (savedMaterial) $(`#material-multi-${pageIndex}`).val(savedMaterial);
                        if (savedMatType) $(`#mat_type-multi-${pageIndex}`).val(savedMatType);
                        if (savedWidth) $(`#width-multi-${pageIndex}`).val(savedWidth);
                        if (savedLength) $(`#length-multi-${pageIndex}`).val(savedLength);
                        if (savedAltBomText) $(`#alt_bom_text-multi-${pageIndex}`).val(savedAltBomText);
                        if (savedMachineCode) $(`#machine-code-multi-${pageIndex}`).text(savedMachineCode);
                    }, 150);
                } else {
                    // FIX: Simpan nilai multi sebelum di-clear agar bisa dikembalikan ke single
                    let savedCapacityMulti = $(`#capacity_multi_${pageIndex}_1`).val();
                    let savedMaterialMulti = $(`#material-multi-${pageIndex}`).val();
                    let savedMatTypeMulti = $(`#mat_type-multi-${pageIndex}`).val();
                    let savedWidthMulti = $(`#width-multi-${pageIndex}`).val();
                    let savedLengthMulti = $(`#length-multi-${pageIndex}`).val();
                    let savedAltBomTextMulti = $(`#alt_bom_text-multi-${pageIndex}`).val();
                    let savedMachineCodeMulti = $(`#machine-code-multi-${pageIndex}`).text();

                    $(`#singleResourceInputs-${pageIndex}`).show();
                    $(`#multiResourceCountWrapper-${pageIndex}`).hide();
                    $(`#multiResourceInputs-${pageIndex}`).hide();
                    $(`#multiResourceInputs-${pageIndex}`).empty();
                    $(`#singleCapacity-${pageIndex}`).show();
                    $(`#singleMaterial-${pageIndex}`).show();
                    $(`#singleMatType-${pageIndex}`).show();
                    $(`#singleWidth-${pageIndex}`).show();
                    $(`#singleLength-${pageIndex}`).show();
                    $(`#singleAltBom-${pageIndex}`).show();

                    // FIX: Kembalikan nilai ke single field (termasuk capacity)
                    if (savedCapacityMulti) $(`#capacity-${pageIndex}`).val(savedCapacityMulti);
                    if (savedMaterialMulti) $(`#material-${pageIndex}`).val(savedMaterialMulti);
                    if (savedMatTypeMulti) $(`#mat_type-${pageIndex}`).val(savedMatTypeMulti);
                    if (savedWidthMulti) $(`#width-${pageIndex}`).val(savedWidthMulti);
                    if (savedLengthMulti) $(`#length-${pageIndex}`).val(savedLengthMulti);
                    if (savedAltBomTextMulti) $(`#alt_bom_text-${pageIndex}`).val(savedAltBomTextMulti);
                    if (savedMachineCodeMulti) $(`#machine-code-${pageIndex}`).text(savedMachineCodeMulti);

                    $(`#width-${pageIndex}`);
                }
            });

            // Change jumlah resource
            $(document).on('input', '.multiResourceCount', function() {
                let pageIndex = $(this).data('page');
                if ($(`#multiResourceCheckbox-${pageIndex}`).is(':checked')) {
                    generateMultiResourceInputs($(this).val(), pageIndex);
                }
            });

            // Generate Multi Resource Inputs
            function generateMultiResourceInputs(count, pageIndex) {
                count = Math.max(2, Math.min(10, parseInt(count) || 2));
                let html = '';

                // 1) build HTML dulu
                for (let i = 1; i <= count; i++) {
                    html += `
                    <div class="row mb-2">
                      <div class="col-md-6">
                        <label>Resource ${i} <span class="text-danger">*</span></label>

                        <input type="hidden" name="bom_data[${pageIndex}][resources_multi][${i}]"
                              id="resources_multi_${pageIndex}_${i}" required>

                        <div class="resource-combobox position-relative">
                          <input type="text"
                            class="form-control resource-input"
                            id="resource_input_multi_${pageIndex}_${i}"
                            data-page="${pageIndex}"
                            data-multi-index="${i}"
                            placeholder="Ketik untuk cari resource / tambah custom...">

                          <div class="resource-dropdown list-group position-absolute w-100 shadow"
                            id="resource_dropdown_multi_${pageIndex}_${i}"
                            style="display:none; z-index: 9999; max-height: 260px; overflow:auto;"></div>
                        </div>
                      </div>

                      <div class="col-md-6">
                        <label>Capacity ${i} ${i == 1 ? '<span class="text-danger">*</span>' : ''}</label>
                        <input type="text" inputmode="decimal" class="form-control capacity-multi"
                          name="bom_data[${pageIndex}][capacity_multi][${i}]"
                          id="capacity_multi_${pageIndex}_${i}"
                          data-page="${pageIndex}"
                          data-index="${i}"
                          ${i == 1 ? 'required' : ''}
                          placeholder="0,000">
                      </div>
                    </div>
                  `;
                }

                // ...lanjutkan html tambahan material/mat_type/width/length/altbom seperti milikmu...
                // Material FG/SFG dan Mat Type
                html += `
                                        <div class="row mb-3">
                                            <div class="col-md-6">
                                                <label class="form-control-label" id="material-label-${pageIndex}">Material FG/SFG <span class="text-danger">*</span></label>
                                                <div class="input-group">
                                                    <input type="text" class="form-control material-search-recommendation" 
                                                        name="bom_data[${pageIndex}][material]" 
                                                        id="material-multi-${pageIndex}" 
                                                        autocomplete="off" 
                                                        placeholder="Cari Material...">
                                                    
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <label class="form-control-label">Mat Type</label>
                                                <input type="text" class="form-control mat-type" 
                                                    name="bom_data[${pageIndex}][mat_type]" 
                                                    id="mat_type-multi-${pageIndex}" readonly>
                                            </div>
                                        </div>
                                    `;

                // Width, Length, dan Alternative BOM Text
                html += `
                                        <div class="row mb-3">
                                            <div class="col-md-3">
                                                <label class="form-control-label">Width</label>
                                                <input type="text" class="form-control width" 
                                                    name="bom_data[${pageIndex}][width]" 
                                                    id="width-multi-${pageIndex}">
                                            </div>
                                            <div class="col-md-3">
                                                <label class="form-control-label">Length</label>
                                                <input type="text" class="form-control length" 
                                                    name="bom_data[${pageIndex}][length]" 
                                                    id="length-multi-${pageIndex}">
                                            </div>
                                            <div class="col-md-6">
                                                <label class="form-control-label">Alternative BOM Text Custom <span class="text-danger">*</span></label>
                                                <div class="input-group">
                                                    <span class="input-group-text machine-code" id="machine-code-multi-${pageIndex}"></span>
                                                    <input type="text" class="form-control alt-bom-input-recommendation" 
                                                        name="bom_data[${pageIndex}][alt_bom_text]" 
                                                        id="alt_bom_text-multi-${pageIndex}" 
                                                        placeholder="Input Custom...">
                                                    
                                                </div>
                                            </div>
                                        </div>
                                    `;

                // 2) baru inject ke DOM
                const $wrap = $(`#multiResourceInputs-${pageIndex}`);
                $wrap.html(html);

                // 3) baru init combobox setelah element ada
                for (let i = 1; i <= count; i++) {
                    initResourceCombobox(
                        `#resource_input_multi_${pageIndex}_${i}`,
                        `#resource_dropdown_multi_${pageIndex}_${i}`
                    );
                }

                // sisanya tetap
                initializeValueRecommendationForMultiResource(pageIndex);
            }


            // Update Alternative BOM Code untuk Multi Resource
            function updateAltBomCodeMulti(pageIndex) {
                console.log("[ANOMALI] Updating Alt BOM Code Multi for Page:", pageIndex);
                let count = $(`#multiResourceCount-${pageIndex}`).val();
                let codes = [];
                for (let i = 1; i <= count; i++) {
                    let resource = $(`#resources_multi_${pageIndex}_${i}`).val();
                    if (resource && resource.length >= 2) {
                        codes.push(resource.slice(-2));
                    }
                }
                console.log("Code : ", codes);
                let codeStr = codes.join(',') + (codes.length > 0 ? '-' : '');
                $(`#machine-code-multi-${pageIndex}`).text(codeStr);
            }

            // Inisialisasi Value Recommendation untuk Multi Resource
            function initializeValueRecommendationForMultiResource(pageIndex) {
                setTimeout(() => {
                    const materialMultiInput = document.querySelector(`#material-multi-${pageIndex}`);
                    if (materialMultiInput) {
                        materialMultiInput.removeAttribute('data-recommendation-initialized');
                        new ValueRecommendation({
                            inputSelector: `#material-multi-${pageIndex}`,
                            apiUrl: "{{ url($url_menu . '/add') }}",
                            type: 'material',
                            onSelect: function(value, input) {
                                $(input).trigger('change');
                            }
                        });
                        materialMultiInput.setAttribute('data-recommendation-initialized', 'true');
                    }

                    const altBomMultiInput = document.querySelector(`#alt_bom_text-multi-${pageIndex}`);
                    if (altBomMultiInput) {
                        altBomMultiInput.removeAttribute('data-recommendation-initialized');
                        new ValueRecommendation({
                            inputSelector: `#alt_bom_text-multi-${pageIndex}`,
                            apiUrl: "{{ url($url_menu . '/add') }}",
                            type: 'altbom',
                            onSelect: function(value, input) {
                                $(input).val(value);
                                $(input).trigger('change');
                            }
                        });
                        altBomMultiInput.setAttribute('data-recommendation-initialized', 'true');
                    }
                }, 300);
            }

            // ============================================================
            // SECTION 10: VALUE RECOMMENDATION INITIALIZATION
            // ============================================================

            // Material FG/SFG Recommendations
            new ValueRecommendation({
                inputSelector: '.material-search-recommendation',
                apiUrl: "{{ url($url_menu . '/add') }}",
                type: 'material',
                onSelect: function(value, input) {
                    $(input).trigger('change');
                }
            });

            // Alternative BOM Text Recommendations
            new ValueRecommendation({
                inputSelector: '.alt-bom-input-recommendation',
                apiUrl: "{{ url($url_menu . '/add') }}",
                type: 'altbom',
                onSelect: function(value, input) {
                    $(input).val(value);
                    $(input).trigger('change');
                }
            });

            // ============================================================
            // SECTION 10A: AUTO-FORMAT INPUT CAPACITY (angka & koma saja)
            // ============================================================
            // Gunakan event 'input' bukan 'keydown' agar tidak memblokir
            // kombinasi keyboard tertentu (numpad, layout non-EN, paste, dll.)
            $(document).on('input', '.capacity, .capacity-multi', function() {
                const $el = $(this);
                let val = $el.val();
                const pos = this.selectionStart; // simpan posisi kursor

                // 1. Ganti semua titik dengan koma (user salah ketik titik)
                val = val.replace(/\./g, ',');

                // 2. Hapus semua karakter selain digit dan koma
                val = val.replace(/[^0-9,]/g, '');

                // 3. Pastikan hanya ada satu koma
                const parts = val.split(',');
                if (parts.length > 2) {
                    val = parts[0] + ',' + parts.slice(1).join('');
                }

                if ($el.val() !== val) {
                    $el.val(val);
                    // Kembalikan posisi kursor agar tidak melompat ke akhir
                    try {
                        this.setSelectionRange(pos, pos);
                    } catch (e) {}
                }
            });

            // ============================================================
            // SECTION 10B: MULTI RESOURCE CAPACITY SYNC (JUMBO)
            // ============================================================

            /**
             * Sync Capacity Multi Resource untuk JUMBO
             * Logic: Capacity 1 editable, Capacity 2-N readonly dan sync dengan Capacity 1
             */
            $(document).on('input', '.capacity-multi', function() {
                const pageIndex = $(this).data('page');
                // FIX: parseInt agar strict equality integer tidak gagal (data() bisa return string)
                const capacityIndex = parseInt($(this).data('index'), 10);

                // Hanya Capacity 1 yang bisa trigger sync
                if (capacityIndex === 1) {
                    const capacity1Value = $(this).val();
                    const resourceCount = parseInt($(`#multiResourceCount-${pageIndex}`).val()) || 2;

                    // Sync ke Capacity 2, 3, ... N
                    for (let i = 2; i <= resourceCount; i++) {
                        $(`#capacity_multi_${pageIndex}_${i}`).val(capacity1Value);
                    }

                    console.log(
                        `[JUMBO Multi Capacity] Synced Capacity 1 (${capacity1Value}) → Capacity 2-${resourceCount} on Page ${pageIndex}`
                    );
                }
            });

            // ============================================================
            // SECTION 11: CALCULATION FUNCTIONS
            // ============================================================

            // Helper: parse nilai desimal yang menggunakan koma sebagai separator
            function parseCompQty(val) {
                if (!val && val !== 0) return NaN;
                return parseFloat(String(val).replace(',', '.'));
            }

            // Hitung Total Comp QTY untuk tabel tertentu
            function calculateTotalCompQty(tableIndex) {
                let total = 0;
                $(`#datatable-bom-${tableIndex} tbody input[name*="[comp_qty]"]`).each(function() {
                    let val = parseCompQty($(this).val());
                    if (!isNaN(val)) total += val;
                });

                const $totalCell = $(`#total-comp-qty-${tableIndex}`);
                $totalCell.text(total.toFixed(3).replace(/\./g, ','));

                const $totalCellParent = $totalCell.closest('td');
                if (total > 0) {
                    $totalCellParent.addClass('has-value');
                } else {
                    $totalCellParent.removeClass('has-value');
                }

                // Get target Comp QTY dari cache (85 atau 100)
                const targetCompQty = window.compQtyTargets?.[tableIndex] || 100;

                // Update alert badge
                const $alertEl = $(`#comp-qty-alert-${tableIndex}`);
                if (parseFloat(total.toFixed(3)) !== parseFloat(targetCompQty.toFixed(3))) {
                    $alertEl
                        .addClass('badge badge-warning')
                        .text(`Total Comp QTY Harus ${targetCompQty.toFixed(3).replace(/\./g, ',')} (Saat ini: ${total.toFixed(3).replace(/\./g, ',')})`);
                } else {
                    $alertEl.removeClass('badge badge-warning').text('');
                }

                // Update state submit button
                updateSubmitButtonState();
            }

            // Recalculate semua total comp qty
            function recalculateAllTotals() {
                $('.bom-table').each(function() {
                    const tableIndex = $(this).data('index');
                    calculateTotalCompQty(tableIndex);
                });

                // Check dan update status submit button
                updateSubmitButtonState();
            }

            // Event handler untuk perubahan Comp QTY
            $(document).on('input change', 'input[name*="[comp_qty]"]', function() {
                let nameAttr = $(this).attr('name');
                let match = nameAttr.match(/bom_data\[(\d+)\]/);
                if (match) {
                    let tableIndex = match[1];
                    calculateTotalCompQty(tableIndex);
                    updateSubmitButtonState();
                }
            });

            // Paksa hanya angka, koma, dan minus yang boleh diketik di input comp_qty
            $(document).on('keypress', '.comp-qty-input', function(e) {
                const char = String.fromCharCode(e.which);
                // Izinkan: angka 0-9, koma (sebagai desimal), minus di awal
                if (!/[0-9,\-]/.test(char)) {
                    e.preventDefault();
                    return;
                }
                // Hanya satu koma diizinkan
                if (char === ',' && $(this).val().includes(',')) {
                    e.preventDefault();
                }
            });

            // Saat paste, bersihkan karakter tidak valid dan ganti titik dengan koma
            $(document).on('paste', '.comp-qty-input', function(e) {
                const pasted = (e.originalEvent.clipboardData || window.clipboardData).getData('text');
                // Jika paste multi-baris / multi-kolom dari Excel (ada newline atau tab), biarkan excelTable.js yang menangani
                if (pasted && (pasted.includes('\n') || pasted.includes('\t'))) {
                    return;
                }
                e.preventDefault();
                // Ganti titik desimal dengan koma, hapus karakter selain angka/koma/minus
                let cleaned = pasted.replace(/\./g, ',').replace(/[^0-9,\-]/g, '');
                $(this).val(cleaned);
                $(this).trigger('input');
            });

            // ── Desimal Koma: blur → standardisasi 3 desimal ─────────────────────────────
            $(document).on('blur', 'input.comp-qty-input', function() {
                let val = $(this).val().trim();
                if (val === '') return;
                $(this).val(format3Decimal(val));
            });

            // Auto-format Width input (ganti titik dengan koma saat blur)
            $(document).on('blur', 'input.width', function() {
                let raw = $(this).val().trim();
                if (raw === '') return;
                // Jika user mengetik titik sebagai desimal, ubah ke koma
                raw = raw.replace(/\./g, ',');
                $(this).val(raw);
            });

            // Auto-format Length input (ganti titik dengan koma, hapus trailing zeros)
            $(document).on('blur', 'input.length', function() {
                let raw = $(this).val().trim().replace(',', '.');
                let value = parseFloat(raw);
                if (!isNaN(value)) {
                    // Format: remove trailing zeros after decimal, lalu ganti titik ke koma
                    $(this).val(parseFloat(value.toFixed(2)).toString().replace(/\./g, ','));
                }
            });

            // Keypress untuk input width & length: hanya angka dan satu koma
            $(document).on('keypress', 'input.width, input.length', function(e) {
                const char = String.fromCharCode(e.which);
                if (!/[0-9,]/.test(char)) {
                    e.preventDefault();
                    return;
                }
                if (char === ',' && $(this).val().includes(',')) {
                    e.preventDefault();
                }
            });

            // Paste untuk input width & length: ganti titik dengan koma
            $(document).on('paste', 'input.width, input.length', function(e) {
                e.preventDefault();
                const pasted = (e.originalEvent.clipboardData || window.clipboardData).getData('text');
                let cleaned = pasted.replace(/\./g, ',').replace(/[^0-9,]/g, '');
                $(this).val(cleaned);
                $(this).trigger('input');
            });

            // Update state submit button berdasarkan validasi Total Comp QTY
            function updateSubmitButtonState() {
                let allValid = true;
                let invalidMessages = [];

                // Check setiap tabel BOM
                $('.bom-table').each(function() {
                    const tableIndex = $(this).data('index');
                    const targetCompQty = window.compQtyTargets?.[tableIndex] || 100;

                    let total = 0;
                    $(`#datatable-bom-${tableIndex} tbody input[name*="[comp_qty]"]`).each(function() {
                        let val = parseCompQty($(this).val());
                        if (!isNaN(val)) total += val;
                    });

                    // Jika total tidak sama dengan target, set allValid = false
                    if (parseFloat(total.toFixed(3)) !== parseFloat(targetCompQty.toFixed(3))) {
                        allValid = false;
                        invalidMessages.push(
                            `Form #${tableIndex}: Total ${total.toFixed(3).replace(/\./g, ',')} (Target: ${targetCompQty.toFixed(3).replace(/\./g, ',')})`
                        );
                    }
                });

                // Update tombol Simpan
                const $submitBtn = $('#btnSimpanBOM');
                const $tooltip = $submitBtn.siblings('.tooltiptext');

                if (allValid) {
                    $submitBtn.prop('disabled', false)
                        .removeClass('bg-danger shadow-danger bg-gradient-danger bg-gradient-primary shadow-primary btn-primary btn-danger')
                        .addClass('btn-success shadow-success')
                        .css('background-color', '')
                        .css('border-color', '')
                        .css('color', 'white');

                    // Hide tooltip saat button enabled
                    if ($tooltip.length) {
                        $tooltip.hide();
                    }
                } else {
                    $submitBtn.prop('disabled', true)
                        .removeClass('btn-primary bg-gradient-success shadow-success btn-success bg-gradient-primary shadow-primary')
                        .css('background-color', '')
                        .css('border-color', '')
                        .css('color', 'white')
                        .addClass('bg-danger shadow-danger');

                    // Update tooltip message dengan detail error
                    if ($tooltip.length) {
                        $tooltip.show();
                        let tooltipText =
                            '<div style="text-align: left;"><i class="fas fa-exclamation-circle"></i> <strong>Button Disabled - Total Comp QTY harus sesuai target</strong></div>';
                        if (invalidMessages.length > 0) {
                            tooltipText += '<div style="text-align: left; margin-top: 5px; font-size: 0.9em; font-weight: normal;">' + invalidMessages.join('<br>') + '</div>';
                        }
                        $tooltip.html(tooltipText);
                    }
                }
            }

            // Update Product QTY berdasarkan Resource (selalu 100, readonly)
            function updateProductQTY(resource, isMultiResource, pageIndex) {

                $.ajax({
                    url: "{{ url($url_menu . '/add') }}",
                    type: 'GET',
                    data: {
                        action: 'get_product_qty',
                        resource: resource,
                        is_multi_resource: isMultiResource
                    },
                    dataType: 'json',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    },
                    success: function(data) {
                        let activeTableIndex = pageIndex || currentResourceIndex || 1;
                        let table = $(`#datatable-bom-${activeTableIndex}`).DataTable();

                        table.rows().every(function() {
                            let rowNode = this.node();
                            let productQtyInput = $(rowNode).find('.product-qty');

                            if (productQtyInput.length > 0) {
                                productQtyInput.val(data.qty); // Selalu 100
                                productQtyInput.prop('readonly', true); // Selalu readonly
                            }
                        });

                        window.currentProductQTY = data.qty;
                        window.currentProductQTYReadonly = true;
                    }
                });
            }

            // Update Comp QTY Target berdasarkan Resource (85 atau 100)
            function updateCompQTYTarget(resource, isMultiResource, pageIndex) {
                $.ajax({
                    url: "{{ url($url_menu . '/add') }}",
                    type: 'GET',
                    data: {
                        action: 'get_comp_qty_target',
                        resource: resource,
                        is_multi_resource: isMultiResource
                    },
                    dataType: 'json',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    },
                    success: function(data) {
                        let activeTableIndex = pageIndex || currentResourceIndex || 1;

                        // Simpan target Comp QTY di cache
                        if (!window.compQtyTargets) window.compQtyTargets = {};
                        window.compQtyTargets[activeTableIndex] = data.target;

                        // Recalculate total untuk update badge warning
                        calculateTotalCompQty(activeTableIndex);
                    }
                });
            }

            // ============================================================
            // SECTION 12: FORM VALIDATION & SUBMIT
            // ============================================================

            // Validasi dan Submit Form
            window.validateAndSubmit = function() {

                let isValid = true;
                let errorMessages = [];
                let allPages = [];
                const materialValue = $('#material-1').val();

                @for($i = 1; $i <= $rows; $i++)
                allPages.push({{ $i }});
                @endfor


                $('.btn-hapus-halaman-dynamic').each((_, el) => {
                    const pageIndex = $(el).data('page');
                    if (pageIndex && !allPages.includes(pageIndex)) allPages.push(pageIndex);
                });

                allPages.forEach(pageIndex => {
                    const isMulti = $(`#multiResourceCheckbox-${pageIndex}`).is(':checked');

                    // Check required fields
                    const requiredFields = isMulti ? [{
                            el: `#resources_multi_${pageIndex}_1`,
                            msg: `Form #${pageIndex}: Resource 1 belum dipilih`
                        },
                        {
                            el: `#material-multi-${pageIndex}`,
                            msg: `Form #${pageIndex}: Material FG/SFG belum dipilih`
                        },
                        {
                            el: `#alt_bom_text-multi-${pageIndex}`,
                            msg: `Form #${pageIndex}: Alternative BOM Text belum diisi`
                        },
                        {
                            el: `#capacity_multi_${pageIndex}_1`,
                            msg: `Form #${pageIndex}: Capacity 1 belum diisi`
                        }
                    ] : [{
                            el: `#resources-${pageIndex}`,
                            msg: `Form #${pageIndex}: Resource belum dipilih`
                        },
                        {
                            el: `#material-${pageIndex}`,
                            msg: `Form #${pageIndex}: Material FG/SFG belum dipilih`
                        },
                        {
                            el: `#alt_bom_text-${pageIndex}`,
                            msg: `Form #${pageIndex}: Alternative BOM Text belum diisi`
                        },
                        {
                            el: `#capacity-${pageIndex}`,
                            msg: `Form #${pageIndex}: Capacity belum diisi`
                        }
                    ];

                    requiredFields.forEach(f => {
                        if (!$(f.el).val()) {
                            errorMessages.push(f.msg);
                            isValid = false;
                        }
                    });

                    // Check duplicate resources untuk multi resource
                    if (isMulti) {
                        const resourceCount = $(`#multiResourceCount-${pageIndex}`).val();
                        const selected = new Set();
                        for (let j = 1; j <= resourceCount; j++) {
                            const val = $(`#resources_multi_${pageIndex}_${j}`).val();
                            if (val) {
                                if (selected.has(val)) {
                                    errorMessages.push(
                                        `Form #${pageIndex}: Resource "${val}" dipilih lebih dari satu kali. Setiap resource harus unik.`
                                    );
                                    isValid = false;
                                }
                                selected.add(val);
                            }
                        }
                    }

                    // Check detail rows
                    const table = $(`#datatable-bom-${pageIndex}`).DataTable();
                    if (table.rows().count() === 0) {
                        errorMessages.push(`Form #${pageIndex}: Belum ada data detail transaksi`);
                        isValid = false;
                    } else {
                        table.rows().every(function() {
                            const row = this.node();
                            const compCode = $(row).find('input[name*="[comp_material_code]"]').val();
                            const compQtyStr = $(row).find('input[name*="[comp_qty]"]').val() || '';
                            let compQtyNum = 0;
                            if (compQtyStr) {
                                compQtyNum = parseFloat(compQtyStr.replace(',', '.'));
                            }

                            if (!compCode) {
                                errorMessages.push(`Form #${pageIndex}: Ada baris yang belum memiliki Comp Material Code`);
                                isValid = false;
                            }
                            if (!compQtyStr || isNaN(compQtyNum) || compQtyNum <= 0) {
                                errorMessages.push(`Form #${pageIndex}: Ada baris yang belum memiliki Comp QTY yang valid`);
                                isValid = false;
                            }
                        });
                    }
                });

                if (!isValid) {
                    Swal.fire({
                        title: 'Validasi Error',
                        html: errorMessages.join('<br>'),
                        icon: 'error',
                        confirmButtonText: 'OK'
                    });
                    return;
                }

                // Remove old hidden inputs
                $('.datatable-hidden-inputs').remove();

                // Add hidden inputs untuk SEMUA halaman (single & multi resource)
                allPages.forEach(pageIndex => {
                    const isMulti = $(`#multiResourceCheckbox-${pageIndex}`).is(':checked');

                    if (isMulti) {
                        // MULTI RESOURCE: ambil resources_multi & capacity_multi
                        const resourceCount = $(`#multiResourceCount-${pageIndex}`).val();
                        for (let i = 1; i <= resourceCount; i++) {
                            const resourceValue = $(`#resources_multi_${pageIndex}_${i}`).val();
                            const capacityValue = String($(`#capacity_multi_${pageIndex}_${i}`).val() || '').replace(/,/g, '.');

                            if (resourceValue) {
                                $('#{{ $dmenu }}-form').append(
                                    `<input type="hidden" name="bom_data[${pageIndex}][resources_multi][${i}]" class="datatable-hidden-inputs" value="${resourceValue}">`
                                );
                            }
                            if (capacityValue) {
                                $('#{{ $dmenu }}-form').append(
                                    `<input type="hidden" name="bom_data[${pageIndex}][capacity_multi][${i}]" class="datatable-hidden-inputs" value="${capacityValue}">`
                                );
                            }
                        }

                        // Add other fields untuk MULTI
                        [{
                                el: `#material-multi-${pageIndex}`,
                                name: 'material'
                            },
                            {
                                el: `#mat_type-multi-${pageIndex}`,
                                name: 'mat_type'
                            },
                            {
                                el: `#width-multi-${pageIndex}`,
                                name: 'width'
                            },
                            {
                                el: `#length-multi-${pageIndex}`,
                                name: 'length'
                            },
                            {
                                el: `#alt_bom_text-multi-${pageIndex}`,
                                name: 'alt_bom_text'
                            }
                        ].forEach(f => {
                            const v = $(f.el).val();
                            if (v) {
                                $('#{{ $dmenu }}-form').append(
                                    `<input type="hidden" name="bom_data[${pageIndex}][${f.name}]" class="datatable-hidden-inputs" value="${v}">`
                                );
                            }
                        });
                    } else {
                        // SINGLE RESOURCE: ambil resources & capacity (FIX BUG!)
                        [{
                                el: `#resources-${pageIndex}`,
                                name: 'resources'
                            },
                            {
                                el: `#material-${pageIndex}`,
                                name: 'material'
                            },
                            {
                                el: `#mat_type-${pageIndex}`,
                                name: 'mat_type'
                            },
                            {
                                el: `#width-${pageIndex}`,
                                name: 'width'
                            },
                            {
                                el: `#length-${pageIndex}`,
                                name: 'length'
                            },
                            {
                                el: `#capacity-${pageIndex}`,
                                name: 'capacity'
                            },
                            {
                                el: `#alt_bom_text-${pageIndex}`,
                                name: 'alt_bom_text'
                            }
                        ].forEach(f => {
                            let v = $(f.el).val();
                            // Normalisasi field angka sebelum submit ke server
                            if (['width', 'length', 'capacity', 'jumbo', 'rewind'].includes(f.name) && v) {
                                if (v.includes('.') && v.includes(',')) {
                                    if (v.lastIndexOf('.') > v.lastIndexOf(',')) {
                                        v = v.replace(/,/g, '');
                                    } else {
                                        v = v.replace(/\./g, '').replace(',', '.');
                                    }
                                } else if (v.includes(',')) {
                                    v = v.replace(',', '.');
                                }
                            }
                            if (v) {
                                $('#{{ $dmenu }}-form').append(
                                    `<input type="hidden" name="bom_data[${pageIndex}][${f.name}]" class="datatable-hidden-inputs" value="${v}">`
                                );
                            }
                        });
                    }
                });

                // Add hidden inputs untuk detail rows
                allPages.forEach(pageIndex => {
                    const table = $(`#datatable-bom-${pageIndex}`).DataTable();
                    const capturedNames = new Set();

                    if (table) {
                        table.$('input, select, textarea').each(function() {
                            const name = $(this).attr('name');
                            let value = $(this).val();
                            if (name && !capturedNames.has(name)) {
                                capturedNames.add(name);
                                if (name.includes('[comp_qty]') || name.includes('[product_qty]')) {
                                    value = String(value).replace(/,/g, '.');
                                }
                                $('#{{ $dmenu }}-form').append(
                                    `<input type="hidden" name="${name}" class="datatable-hidden-inputs" value="${value}">`
                                );
                            }
                        });
                    }

                    $(`#datatable-bom-${pageIndex}`).find('input, select, textarea').each(function() {
                        const name = $(this).attr('name');
                        let value = $(this).val();
                        if (name && !capturedNames.has(name)) {
                            capturedNames.add(name);
                            if (name.includes('[comp_qty]') || name.includes('[product_qty]')) {
                                value = String(value).replace(/,/g, '.');
                            }
                            $('#{{ $dmenu }}-form').append(
                                `<input type="hidden" name="${name}" class="datatable-hidden-inputs" value="${value}">`
                            );
                        }
                    });
                });

                // Normalisasi width & length: handle format ribuan seperti '1,000.00'
                $('input.width, input.length').each(function() {
                    const $inp = $(this);
                    let v = String($inp.val());
                    if (v.includes('.') && v.includes(',')) {
                        if (v.lastIndexOf('.') > v.lastIndexOf(',')) {
                            v = v.replace(/,/g, '');
                        } else {
                            v = v.replace(/\./g, '').replace(',', '.');
                        }
                    } else if (v.includes(',')) {
                        v = v.replace(',', '.');
                    }
                    $inp.val(v);
                });

                // 5. KONFIRMASI DAN SUBMIT (DENGAN PENGECEKAN DUPLIKAT BOM)
                const $form = $(`#{{ $dmenu }}-form`);

                @if(isset($bom_header))
                const titleText = 'Update Data?';
                const confirmMsgText = 'Pastikan semua data Jumbo sudah benar untuk diperbarui.';
                const btnConfirmText = 'Ya, Update Sekarang!';
                @else
                const titleText = 'Simpan Data?';
                const confirmMsgText = 'Pastikan semua data Jumbo sudah benar untuk disimpan.';
                const btnConfirmText = 'Ya, Simpan Sekarang!';
                @endif

                function showDuplicateModal(preview) {
                    let rowsHtml = '';
                    if (preview && preview.details && preview.details.length > 0) {
                        preview.details.forEach(function(d) {
                            rowsHtml += `<tr>
                                <td class="text-start align-middle ps-3 fw-bold text-uppercase" style="font-family: var(--bs-font-monospace, monospace); font-size: 0.8rem;">${(d.comp_material_code || '').toUpperCase()}</td>
                                <td class="text-start align-middle" style="font-size: 0.8rem;">${d.comp_desc}</td>
                                <td class="text-center align-middle font-weight-bold" style="font-size: 0.8rem;">${format3Decimal(d.comp_qty)}</td>
                                <td class="text-center align-middle text-uppercase" style="font-size: 0.75rem;">${(d.comp_uom || '').toUpperCase()}</td>
                            </tr>`;
                        });
                    }

                    const htmlContent = `
                        <div class="mb-3 text-start bg-light rounded-3 border" style="font-size: 0.825rem; padding: 12px 16px;">
                            <div class="row g-2">
                                <div class="col-6"><strong>Material FG/SFG:</strong> <span class="badge bg-dark">${preview.material_fg_sfg}</span></div>
                                <div class="col-6"><strong>Alt BOM Text:</strong> ${preview.alternative_bom_text}</div>
                                <div class="col-6"><strong>Resource:</strong> ${preview.resource}</div>
                                <div class="col-6"><strong>Dimensi:</strong> ${preview.width ? format3Decimal(preview.width) : '0,000'}m × ${preview.length || 0}m</div>
                            </div>
                        </div>
                        <div class="fw-bold mb-2 text-start text-dark" style="font-size: 0.85rem; margin-top: 1.25rem !important;"><i class="fas fa-cubes me-1" style="color:#028284;"></i> Detail Komponen Material:</div>
                        <div class="rounded-3 border text-start" style="max-height: 220px; overflow-y: auto; background-color: #ffffff; border-color: #e2e8f0 !important; scrollbar-width: thin;">
                            <table class="table table-hover table-sm align-middle mb-0" style="font-size: 0.8rem;">
                                <thead style="position: sticky; top: 0; z-index: 10; background-color: #f8fafc; border-bottom: 2px solid #e2e8f0;">
                                    <tr>
                                        <th class="py-2 ps-3 text-start text-uppercase text-muted fw-bold" style="font-size: 0.68rem;">Kode Komponen</th>
                                        <th class="py-2 text-start text-uppercase text-muted fw-bold" style="font-size: 0.68rem;">Deskripsi</th>
                                        <th class="py-2 text-center text-uppercase text-muted fw-bold" style="font-size: 0.68rem;">Qty</th>
                                        <th class="py-2 text-center text-uppercase text-muted fw-bold" style="font-size: 0.68rem;">UOM</th>
                                    </tr>
                                </thead>
                                <tbody>${rowsHtml}</tbody>
                            </table>
                        </div>
                        <div class="text-start d-flex align-items-center gap-2 rounded-3" style="background-color: #fef2f2; border-left: 4px solid #ef4444; color: #991b1b; font-size: 0.825rem; padding: 12px 16px; margin-top: 1.25rem !important;">
                            <i class="fas fa-ban text-danger flex-shrink-0 me-1" style="font-size: 1.1rem;"></i>
                            <div>${preview.intra_form_notice || 'BOM ini <strong>sudah ada</strong> atau pernah dibuat sebelumnya.'}</div>
                        </div>`;

                    Swal.fire({
                        title: '<div class="d-flex align-items-center justify-content-center gap-2 text-danger fw-bold fs-5"><i class="fas fa-exclamation-triangle me-1"></i> BOM Sudah Ada!</div>',
                        html: htmlContent,
                        width: '640px',
                        confirmButtonColor: '#dc2626',
                        confirmButtonText: '<i class="fas fa-times me-1"></i> Tutup',
                        allowOutsideClick: false,
                        customClass: {
                            popup: 'rounded-4 shadow-lg border-0 p-3.5',
                            confirmButton: 'btn btn-sm px-4 py-1.5 fw-bold rounded-2 shadow-sm fs-7'
                        }
                    });
                }

                function doConfirmAndSubmit() {
                    Swal.fire({
                        title: titleText,
                        text: confirmMsgText,
                        icon: 'question',
                        showCancelButton: true,
                        confirmButtonColor: '#028284',
                        confirmButtonText: btnConfirmText
                    }).then((result) => {
                        if (result.isConfirmed) {
                            $('#btnSimpanBOM').prop('disabled', true).html('<i class="fas fa-spinner fa-spin me-1"></i><span class="font-weight-bold">Menyimpan...</span>');
                            Swal.fire({
                                title: 'Menyimpan Data...',
                                text: 'Mohon tunggu, sedang menyimpan data.',
                                allowOutsideClick: false,
                                allowEscapeKey: false,
                                showConfirmButton: false,
                                didOpen: () => {
                                    Swal.showLoading();
                                }
                            });

                            // AJAX submit agar error dari server bisa ditangkap dan ditampilkan
                            const formData = new FormData($form[0]);
                            $.ajax({
                                url: $form.attr('action'),
                                method: 'POST',
                                data: formData,
                                processData: false,
                                contentType: false,
                                success: function(response, status, xhr) {
                                    // Server return JSON (success)
                                    if (response && response.success === true) {
                                        // Sukses → redirect ke list
                                        const redirectUrl = response.redirect || "{{ url($url_menu) }}";
                                        window.location.href = redirectUrl;
                                    } else if (response && response.success === false) {
                                        // Error dari server dalam response JSON (seharusnya tidak terjadi di status 2xx)
                                        Swal.close();
                                        $('#btnSimpanBOM').prop('disabled', false).html('<i class="fas fa-floppy-disk me-1"></i><span class="font-weight-bold">Simpan</span>');
                                        Swal.fire({
                                            title: 'Gagal Menyimpan!',
                                            html: response.message || 'Terjadi kesalahan pada server.',
                                            icon: 'error',
                                            confirmButtonColor: '#f5365c',
                                            confirmButtonText: 'OK'
                                        });
                                    } else {
                                        // Fallback: redirect ke list
                                        window.location.href = "{{ url($url_menu) }}";
                                    }
                                },
                                error: function(xhr) {
                                    Swal.close();

                                    @if(isset($bom_header))
                                    $('#btnSimpanBOM').prop('disabled', false).html('<i class="fas fa-save me-1"></i><span class="font-weight-bold">Update Data</span>');
                                    @else
                                    $('#btnSimpanBOM').prop('disabled', false).html('<i class="fas fa-floppy-disk me-1"></i><span class="font-weight-bold">Simpan</span>');
                                    @endif

                                    let errorMsg = 'Terjadi kesalahan saat menyimpan data.';
                                    let errorDetail = '';

                                    if (xhr.status === 422) {
                                        // Laravel validation error
                                        try {
                                            const errors = JSON.parse(xhr.responseText);
                                            if (errors.message) {
                                                errorMsg = 'Validasi gagal: ' + errors.message;
                                            }
                                            if (errors.errors) {
                                                const errorList = Object.values(errors.errors).flat();
                                                errorDetail = errorList.join('<br>');
                                            }
                                        } catch (e) {
                                            errorMsg = 'Validasi gagal. Periksa kembali data yang diisi.';
                                        }
                                    } else if (xhr.status === 500) {
                                        errorMsg = 'Server error (500).';
                                        // Server return JSON untuk status 500
                                        try {
                                            const errData = JSON.parse(xhr.responseText);
                                            if (errData.message) {
                                                errorMsg = errData.message;
                                            }
                                        } catch (e) {}
                                    } else if (xhr.status === 419) {
                                        errorMsg = 'CSRF Token expired. Silakan refresh halaman dan coba lagi.';
                                    } else {
                                        errorMsg = `Error ${xhr.status}: ${xhr.statusText}`;
                                    }

                                    Swal.fire({
                                        title: 'Gagal Menyimpan!',
                                        html: errorMsg + (errorDetail ? '<br><small class="text-muted">' + errorDetail + '</small>' : ''),
                                        icon: 'error',
                                        confirmButtonColor: '#f5365c',
                                        confirmButtonText: 'OK'
                                    });
                                }
                            });
                        }
                    });
                } // end doConfirmAndSubmit

                // Cek duplikasi BOM via AJAX sebelum simpan (khusus mode create)
                @if(!isset($bom_header))
                Swal.fire({
                    title: 'Memeriksa Duplikasi BOM...',
                    text: 'Sedang mengecek kelengkapan data.',
                    allowOutsideClick: false,
                    allowEscapeKey: false,
                    showConfirmButton: false,
                    didOpen: () => {
                        Swal.showLoading();
                    }
                });

                $.ajax({
                    url: $form.attr('action') || window.location.href,
                    type: 'POST',
                    data: $form.serialize() + '&action=check_duplicate',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(res) {
                        Swal.close();
                        console.log('%c[BOM Duplicate Check Result]', 'color: #028284; font-weight: bold; font-size: 13px;', res);
                        if (res && res.debug_logs && res.debug_logs.length > 0) {
                            console.group('%c🔍 BOM Duplicate Comparison Logs', 'color: #e65100; font-weight: bold;');
                            res.debug_logs.forEach(function(msg) {
                                if (msg.includes('✅')) {
                                    console.log('%c' + msg, 'color: #2e7d32; font-weight: bold;');
                                } else if (msg.includes('❌')) {
                                    console.log('%c' + msg, 'color: #c62828;');
                                } else {
                                    console.log(msg);
                                }
                            });
                            console.groupEnd();
                        }
                        if (res && res.is_duplicate) {
                            showDuplicateModal(res.preview);
                            return;
                        }
                        doConfirmAndSubmit();
                    },
                    error: function() {
                        Swal.close();
                        doConfirmAndSubmit();
                    }
                });
                @else
                doConfirmAndSubmit();
                @endif
            };

            // ============================================================
            // SECTION 12: SAP MATERIAL VALIDATION
            // ============================================================
            function validateMaterialInSAP(materialCode, pageIndex) {
                if (!materialCode || materialCode.trim().length < 5) return;
                const $materialLabel = $(`#material-label-${pageIndex}`);

                $materialLabel.find('.sap-badge').remove();

                const $loadingBadge = $(`<span class="badge bg-secondary shadow-secondary text-center ms-2 sap-badge" style="cursor: pointer;" title="Sedang memeriksa ke SAP... Klik untuk refresh">
                        <i class="fas fa-spinner fa-spin me-1"></i>SAP: Checking...
                    </span>`);
                $materialLabel.append($loadingBadge);

                $.ajax({
                    url: "{{ url($url_menu . '/add') }}",
                    method: 'GET',
                    data: {
                        action: 'validate_material_sap',
                        material_code: materialCode.trim()
                    },
                    timeout: 30000,
                    success: function(response) {
                        const currentVal = ($(`#material-${pageIndex}`).val() || $(`#material-multi-${pageIndex}`).val() || '').trim();
                        if (currentVal && currentVal !== materialCode.trim()) {
                            return;
                        }

                        $materialLabel.find('.sap-badge').remove();

                        if (response.exists) {
                            if (response.deleted === true) {
                                const $deletedBadge = $(`<span class="badge bg-danger shadow-danger text-center ms-2 sap-badge" style="cursor: pointer;" title="Material FG/SFG ${materialCode} yang anda inputkan telah dihapus di SAP, silakan hubungi departemen MIS. Klik untuk refresh.">
                                        <i class="fas fa-trash-alt me-1"></i>SAP: Telah Dihapus
                                    </span>`);
                                $materialLabel.append($deletedBadge);

                                console.warn('[SAP Validation] Material has been deleted in SAP', response);
                            } else {
                                const $successBadge = $(`<span class="badge bg-success shadow-success text-center ms-2 sap-badge" style="cursor: pointer;" title="Material FG/SFG ${materialCode} yang anda inputkan sudah ada di SAP. Klik untuk refresh.">
                                        <i class="fas fa-check-circle me-1"></i>SAP: Ditemukan
                                    </span>`);
                                $materialLabel.append($successBadge);

                                console.log('[SAP Validation] Material found in SAP', response);
                            }
                        } else {
                            // Cek apakah ini memang tidak ditemukan, atau ada error koneksi
                            const isConnectionError = response.message && (
                                response.message.includes('Error connecting') ||
                                response.message.includes('Failed to connect') ||
                                response.message.includes('Error validating')
                            );

                            if (isConnectionError) {
                                const $warnBadge = $(`<span class="badge bg-danger shadow-danger text-center ms-2 sap-badge" style="cursor: pointer;" title="Tidak dapat terhubung ke SAP API. Status material tidak dapat diverifikasi. Klik untuk coba lagi.">
                                    <i class="fas fa-exclamation-triangle me-1"></i>SAP: Connection Error
                                </span>`);
                                $materialLabel.append($warnBadge);
                                console.warn('[SAP Validation] Connection error:', response.message);
                            } else {
                                const $errorBadge = $(`<span class="badge bg-danger shadow-danger text-center ms-2 sap-badge" style="cursor: pointer;" title="Material FG/SFG ${materialCode} yang anda inputkan belum ada di SAP, silakan hubungi departemen MIS. Klik untuk refresh.">
                                        <i class="fas fa-times-circle me-1"></i>SAP: Tidak Ditemukan
                                    </span>`);
                                $materialLabel.append($errorBadge);
                                console.warn('[SAP Validation] Material not found in SAP', materialCode);
                            }
                        }
                    },
                    error: function(xhr, status, error) {
                        $materialLabel.find('.sap-badge').remove();

                        const $warningBadge = $(`<span class="badge bg-warning shadow-warning text-center ms-2 sap-badge" style="cursor: pointer;" title="Tidak dapat terhubung ke SAP API. Klik untuk coba lagi.">
                                <i class="fas fa-exclamation-triangle me-1"></i>SAP: Connection Error
                            </span>`);
                        $materialLabel.append($warningBadge);

                        console.error('[SAP Validation] Error validating material:', error, 'Status:', status);
                    }
                });
            }

            // Klik pada badge SAP untuk reload/re-check manual secara instan
            $(document).on('click', '.sap-badge', function() {
                const $label = $(this).closest('label');
                const pageIndex = $label.attr('id') ? $label.attr('id').split('-').pop() : 1;
                const material = ($(`#material-${pageIndex}`).val() || $(`#material-multi-${pageIndex}`).val() || '').trim();
                if (material) {
                    validateMaterialInSAP(material, pageIndex);
                }
            });

            // ==========================================
            // DELAY PADA SAAT MENGETIK RESOURCE
            // ==========================================
            function debounce(fn, wait = 250) {
                let t;
                return function(...args) {
                    clearTimeout(t);
                    t = setTimeout(() => fn.apply(this, args), wait);
                };
            }

            // Cache hasil pencarian resource agar tidak AJAX ulang untuk query yang sama
            const _resourceSearchCache = new Map();

            // ==========================================
            // RENDER DROPDOWN RESOURCE
            // ==========================================
            function renderResourceDropdown($dd, items, typedValue) {
                $dd.empty();
                if (typedValue && typedValue.trim() !== '' && !items.some(r => (r.resource || '').toLowerCase() ===
                        typedValue
                        .toLowerCase().trim())) {

                    $dd.append(`
                    <button type="button" class="list-group-item list-group-item-action resource-pick"
                            data-custom="1"
                            data-resource="${typedValue.replace(/"/g,'&quot;')}">
                        <div class="fw-bold">Tambah "${typedValue}"</div>
                        <small class="text-muted">Resource tidak ada di master, tambah sebagai custom</small>
                    </button>
                `);
                }
                items.forEach(r => {
                    // Konversi kapasitas dari titik ke koma saat render agar data-capacity sudah siap pakai
                    const capRaw = (r.capacity ?? '').toString();
                    const capDisplay = capRaw.replace(/\./g, ',');

                    $dd.append(`
                      <button type="button" class="list-group-item list-group-item-action resource-pick"
                              data-custom="0"
                              data-resource="${(r.resource ?? '').replace(/"/g,'&quot;')}"
                              data-mat_type="${(r.mat_type ?? '').replace(/"/g,'&quot;')}"
                              data-width="${(r.width ?? '').toString().replace(/\./g,',').replace(/"/g,'&quot;')}"
                              data-length="${(r.length ?? '').toString().replace(/\./g,',').replace(/"/g,'&quot;')}"
                              data-capacity="${capDisplay.replace(/"/g,'&quot;')}">
                          <div class="fw-bold">${r.resource ?? ''}</div>
                          <small class="text-muted">
                          ${(r.mat_type ?? '-')} • W:${(r.width ?? '-')} • L:${(r.length ?? '-')} • Cap:${capDisplay || '-'}
                          </small>
                      </button>
                  `);
                });

                $dd.show();
            }


            function applyResourceSelection({
                pageIndex,
                multiIndex,
                isCustom,
                data
            }) {

                const isMulti = (multiIndex !== null && multiIndex !== undefined);
                const resource = (data.resource || '').trim();
                if (!resource) return;
                if (isMulti) {
                    const count = parseInt($(`#multiResourceCount-${pageIndex}`).val()) || 2;
                    for (let i = 1; i <= count; i++) {
                        if (i === multiIndex) continue;
                        const existing = $(`#resources_multi_${pageIndex}_${i}`).val();
                        if (existing && existing === resource) {
                            Swal.fire({
                                title: 'Resource Sudah Dipilih!',
                                text: `Resource "${resource}" sudah dipilih pada Resource ${i}.`,
                                icon: 'warning',
                                confirmButtonColor: '#028284'
                            });
                            return;
                        }
                    }
                }

                if (isMulti) {
                    $(`#resources_multi_${pageIndex}_${multiIndex}`).val(resource);
                    $(`#resource_input_multi_${pageIndex}_${multiIndex}`).val(resource);
                    if (!isCustom && data.capacity !== null && data.capacity !== undefined && data.capacity !== '') {
                        // Set langsung via native DOM + sync manual ke field lain
                        const capEl = document.getElementById(`capacity_multi_${pageIndex}_1`);
                        console.log('[applyResourceSelection MULTI] setting capacity:', data.capacity, '| el found:', !!capEl);
                        if (capEl) {
                            capEl.removeAttribute('readonly');
                            capEl.value = data.capacity;
                        }
                        // Sync manual ke Capacity 2, 3, ... N
                        const resCount = parseInt($(`#multiResourceCount-${pageIndex}`).val()) || 2;
                        for (let ci = 2; ci <= resCount; ci++) {
                            const el = document.getElementById(`capacity_multi_${pageIndex}_${ci}`);
                            if (el) el.value = data.capacity;
                        }
                    } else if (!isCustom) {
                        $(`#capacity_multi_${pageIndex}_1`).prop('readonly', false);
                    }

                    if (multiIndex === 1) {
                        $(`#mat_type-multi-${pageIndex}`).val(isCustom ? '' : (data.mat_type || 'ZFGD'))
                            .prop('readonly', false);
                        $(`#width-multi-${pageIndex}`).val(isCustom ? '' : (data.width || ''));
                        $(`#length-multi-${pageIndex}`).val(isCustom ? '' : (data.length || ''));
                        updateProductQTY(resource, true, pageIndex);
                        updateCompQTYTarget(resource, true, pageIndex);
                    }
                    updateAltBomCodeMulti(pageIndex);

                } else {
                    $(`#resources-${pageIndex}`).val(resource);
                    $(`#resource_input_${pageIndex}`).val(resource);

                    if (isCustom) {
                        $(`#mat_type-${pageIndex}`).val('ZFGD').prop('readonly', false);
                        $(`#width-${pageIndex}`).val('');
                        $(`#length-${pageIndex}`).val('');
                        $(`#capacity-${pageIndex}`).val('').prop('readonly', false);
                    } else {
                        $(`#mat_type-${pageIndex}`).val(data.mat_type || '');
                        $(`#width-${pageIndex}`).val(data.width || '');
                        $(`#length-${pageIndex}`).val(data.length || '');
                        // Set capacity via native DOM untuk menghindari interferensi event jQuery
                        const capEl = document.getElementById(`capacity-${pageIndex}`);
                        console.log('[applyResourceSelection SINGLE] setting capacity:', data.capacity, '| el found:', !!capEl);
                        if (capEl) {
                            capEl.removeAttribute('readonly');
                            capEl.value = data.capacity;
                        }
                        updateProductQTY(resource, false, pageIndex);
                        updateCompQTYTarget(resource, false, pageIndex);
                    }
                    let machineCode = resource.length >= 2 ? resource.slice(-2) + '-' : '';
                    $(`#machine-code-${pageIndex}`).text(machineCode);
                }
            }

            function initResourceCombobox(resourcesInput, resourcesDropdown) {
                const fieldInput = $(resourcesInput);
                const fieldDropdown = $(resourcesDropdown);

                // Fungsi filter & mapping resource (dipakai oleh doSearch)
                function filterAndRenderResources(originalData, valInput) {
                    let filteredData = originalData.filter(item => {
                        const resName = item.resource;
                        const resWidth = parseFloat(item.width);
                        if (resName === '1B0606') return resWidth === 2.55;
                        if (resName === '1A0101') return resWidth === 3.33;
                        if (resName === '1B0808') return resWidth === 1.8;
                        if (resName === '1B1010') return resWidth === 3.4;
                        if (resName === '1C0707') return resWidth === 3.3;
                        return true;
                    }).map(item => {
                        if (item.resource === '1C0909') return {
                            ...item,
                            width: 3.3
                        };
                        return item;
                    });
                    renderResourceDropdown(fieldDropdown, filteredData, valInput);
                }

                let _lastSearchedVal = null;
                const doSearch = debounce(function() {
                    const valInput = (fieldInput.val() || '').trim();

                    // Jika query sama dengan pencarian sebelumnya dan dropdown sudah tampil, skip
                    if (valInput === _lastSearchedVal && fieldDropdown.is(':visible')) return;

                    // Gunakan cache jika sudah ada hasil untuk query ini
                    if (_resourceSearchCache.has(valInput)) {
                        _lastSearchedVal = valInput;
                        filterAndRenderResources(_resourceSearchCache.get(valInput), valInput);
                        return;
                    }

                    $.ajax({
                        url: "{{ route('resource.search') }}",
                        method: "GET",
                        dataType: "json",
                        data: {
                            valInput: valInput
                        },
                        success: function(res) {
                            const originalData = res.resource || [];
                            _resourceSearchCache.set(valInput, originalData);
                            _lastSearchedVal = valInput;
                            filterAndRenderResources(originalData, valInput);
                        }
                    });
                }, 200);
                fieldInput.on('input focus', doSearch);
                fieldInput.on('keydown', function(e) {
                    if (e.key === 'Enter') {
                        e.preventDefault();
                        const $firstItem = fieldDropdown.find('.resource-pick').first();

                        if ($firstItem.length) {
                            $firstItem.click();
                        } else {
                            Swal.fire({
                                title: 'Resource Tidak Ditemukan',
                                text: 'Tidak ada resource yang cocok dengan input "' + $(this).val() + '"',
                                icon: 'warning',
                                confirmButtonColor: '#028284'
                            });
                        }
                    }
                });

                fieldDropdown.on('click', '.resource-pick', function() {
                    const $btn = $(this);
                    const pageIndex = parseInt(fieldInput.data('page'), 10);
                    const multiIndex = fieldInput.data('multi-index') !== undefined ?
                        parseInt(fieldInput.data('multi-index'), 10) : null;

                    const isCustom = $btn.data('custom') == 1;

                    // Gunakan .attr() bukan .data() agar tidak auto-parse desimal
                    const rawCapacity = $btn.attr('data-capacity') ?? '';

                    console.log('[Resource Pick] rawCapacity from attr:', rawCapacity, '| isCustom:', isCustom);

                    const data = {
                        resource: $btn.attr('data-resource') || '',
                        mat_type: $btn.attr('data-mat_type') || '',
                        width: $btn.attr('data-width') || '',
                        length: $btn.attr('data-length') || '',
                        capacity: rawCapacity
                    };

                    applyResourceSelection({
                        pageIndex,
                        multiIndex,
                        isCustom,
                        data
                    });
                    fieldDropdown.hide();
                });

                $(document).on('click', function(e) {
                    if (!$(e.target).closest('.resource-combobox').length) fieldDropdown.hide();
                });
            }

            // ======================================================
            // INISIALISASI DROPDOWN PERTAMA KALI HALAMAN DIBUKA
            // ======================================================
            $('[id^="resource_input_"]:not([id*="_multi_"])').each(function() {
                const id = $(this).attr('id');
                const page = $(this).data('page');
                initResourceCombobox(`#${id}`, `#resource_dropdown_${page}`);
            });
            $('[id^="resource_input_multi_"]').each(function() {
                const id = $(this).attr('id');
                const page = $(this).data('page');
                const multiIdx = $(this).data('multi-index');
                initResourceCombobox(`#${id}`, `#resource_dropdown_multi_${page}_${multiIdx}`);
            });
            window.copyBomJ = function(pageIndex) {
                const isMulti = $(`#multiResourceCheckbox-${pageIndex}`).is(':checked');
                const getVal = (field) => {
                    const multiVal = $(`#${field}-multi-${pageIndex}`).val();
                    const singleVal = $(`#${field}-${pageIndex}`).val();
                    return (isMulti && multiVal) ? multiVal : (singleVal || multiVal || '');
                };

                const databom = {
                    header: {
                        is_multi: isMulti,
                        material: getVal('material'),
                        mat_type: getVal('mat_type'),
                        width: getVal('width'),
                        length: getVal('length'),
                        alt_bom_text: isMulti ?
                            $(`#alt_bom_text-multi-${pageIndex}`).val() :
                            $(`#alt_bom_text-${pageIndex}`).val(),
                        resources: [],
                        capacities: []
                    },
                    detail: []
                };

                if (isMulti) {
                    const count = parseInt($(`#multiResourceCount-${pageIndex}`).val()) || 2;
                    databom.header.multi_count = count;
                    for (let i = 1; i <= count; i++) {
                        const resVal = $(`#resources_multi_${pageIndex}_${i}`).val() ||
                            $(`#resource_input_multi_${pageIndex}_${i}`).val() ||
                            '';
                        const capVal = $(`#capacity_multi_${pageIndex}_${i}`).val() || '';
                        databom.header.resources.push(resVal);
                        databom.header.capacities.push(capVal);
                    }
                } else {
                    const resVal = $(`#resources-${pageIndex}`).val() || $(`#resource_input_${pageIndex}`).val() || '';
                    const capVal = $(`#capacity-${pageIndex}`).val() || '';
                    databom.header.resources.push(resVal);
                    databom.header.capacities.push(capVal);
                }

                if (!databom.header.material) {
                    databom.header.material = $(`#material-${pageIndex}`).val() ||
                        $(`#material-multi-${pageIndex}`).val() || '';
                }
                if (!databom.header.material) {
                    return Swal.fire('Error', 'Material FG/SFG kosong, tidak ada yang bisa di-copy!', 'error');
                }

                const tableSelector = `#datatable-bom-${pageIndex}`;
                if ($.fn.DataTable && $.fn.DataTable.isDataTable(tableSelector)) {
                    $(tableSelector).DataTable().rows().every(function() {
                        const $row = $(this.node());
                        databom.detail.push({
                            material_fg_sfg: $row.find('.fg-input').val(),
                            alt_bom_text: $row.find('.alt-bom-row').val() || '',
                            product_qty: $row.find('.product-qty').val(),
                            base_uom_header: $row.find('input[name*="[base_uom_header]"]').val(),
                            item_number: $row.find('input[name*="[item_number]"]').val(),
                            type: $row.find('input[name*="[type]"]').val(),
                            comp_material_code: ($row.find('.comp-material-input').val() || '').toUpperCase(),
                            comp_desc: $row.find('.comp-desc').val(),
                            comp_qty: $row.find('input[name*="[comp_qty]"]').val(),
                            uom: $row.find('.uom').val(),
                        });
                    });
                } else {
                    $(`${tableSelector} tbody tr`).each(function() {
                        const $row = $(this);
                        databom.detail.push({
                            material_fg_sfg: $row.find('.fg-input').val(),
                            alt_bom_text: $row.find('.alt-bom-row').val() || '',
                            product_qty: $row.find('.product-qty').val(),
                            base_uom_header: $row.find('input[name*="[base_uom_header]"]').val(),
                            item_number: $row.find('input[name*="[item_number]"]').val(),
                            type: $row.find('input[name*="[type]"]').val(),
                            comp_material_code: ($row.find('.comp-material-input').val() || '').toUpperCase(),
                            comp_desc: $row.find('.comp-desc').val(),
                            comp_qty: $row.find('input[name*="[comp_qty]"]').val(),
                            uom: $row.find('.uom').val(),
                        });
                    });
                }

                localStorage.setItem('copied_bom_jumbo', JSON.stringify(databom));

                Swal.fire({
                    icon: 'success',
                    title: 'Berhasil di-Copy!',
                    text: `BOM Form #${pageIndex} berhasil disalin (${databom.detail.length} baris detail).`,
                    timer: 2000,
                    showConfirmButton: false,
                    toast: true,
                    position: 'top-end'
                });
            }; // end window.copyBomJ

            function checkResourceAndSetCustom(resName, pageIndex, multiIndex = null) {
                if (!resName) return;
                $.ajax({
                    url: "{{ route('resource.search') }}",
                    method: "GET",
                    dataType: "json",
                    data: {
                        valInput: resName
                    },
                    success: function(res) {
                        let originalData = res.resource || [];
                        let match = originalData.find(r => (r.resource || '').toLowerCase() === resName.toLowerCase().trim());

                        if (!match) {
                            if (multiIndex === null || multiIndex === 1) {
                                $(`#mat_type-${pageIndex}`).prop('readonly', false);
                                $(`#width-${pageIndex}`).prop('readonly', false);
                                $(`#length-${pageIndex}`).prop('readonly', false);
                            }
                            if (multiIndex === null) {
                                $(`#capacity-${pageIndex}`).prop('readonly', false);
                            } else {
                                $(`#capacity_multi_${pageIndex}_1`).prop('readonly', false);
                            }

                            // Tampilkan notifikasi kecil bahwa resource adalah custom
                            Swal.fire({
                                icon: 'info',
                                title: 'Resource Custom',
                                text: `Resource "${resName}" tidak ditemukan di master, diset sebagai custom.`,
                                toast: true,
                                position: 'top-end',
                                timer: 3000,
                                showConfirmButton: false
                            });
                        }
                    }
                });
            }

            window.pasteBomJ = function(pageIndex) {
                const raw = localStorage.getItem('copied_bom_jumbo');
                if (!raw) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Belum Ada Data',
                        text: 'Belum ada BOM yang di-copy. Silakan copy terlebih dahulu.',
                        confirmButtonColor: '#028284'
                    });
                    return;
                }

                const dataBom = JSON.parse(raw);
                const h = dataBom.header;

                const isSourceMulti = h.is_multi === true || (Array.isArray(h.resources) && h.resources.length > 1);
                const $targetCheckbox = $(`#multiResourceCheckbox-${pageIndex}`);

                const setField = (selector, val, triggerEvents = false) => {
                    const $el = $(selector);
                    if ($el.length && val !== undefined && val !== null) {
                        $el.val(val);
                        if (triggerEvents) $el.trigger('input').trigger('change');
                    }
                };

                if (!window._pasteMode) window._pasteMode = {};
                window._pasteMode[pageIndex] = true;

                if (isSourceMulti) {
                    $targetCheckbox.prop('checked', true);
                    $(`#singleResourceInputs-${pageIndex}, #singleCapacity-${pageIndex}, #singleMaterial-${pageIndex}, #singleMatType-${pageIndex}, #singleWidth-${pageIndex}, #singleLength-${pageIndex}, #singleAltBom-${pageIndex}`).hide();
                    $(`#multiResourceCountWrapper-${pageIndex}, #multiResourceInputs-${pageIndex}`).show();

                    const resList = Array.isArray(h.resources) ? h.resources : [h.resources];
                    const capList = Array.isArray(h.capacities) ? h.capacities : [h.capacities];
                    const count = Math.max(2, resList.length || h.multi_count || 2);

                    $(`#multiResourceCount-${pageIndex}`).val(count);
                    generateMultiResourceInputs(count, pageIndex);

                    resList.forEach((res, i) => {
                        const idx = i + 1;
                        $(`#resources_multi_${pageIndex}_${idx}`).val(res);
                        $(`#resource_input_multi_${pageIndex}_${idx}`).val(res);
                        if (capList[i] !== undefined && capList[i] !== null && capList[i] !== '') {
                            const capDisplayMulti = String(capList[i]).replace(/\./g, ',');
                            $(`#capacity_multi_${pageIndex}_${idx}`).val(capDisplayMulti);
                        }
                        checkResourceAndSetCustom(res, pageIndex, idx);
                    });

                    setField(`#material-multi-${pageIndex}`, h.material, true);
                    setField(`#mat_type-multi-${pageIndex}`, h.mat_type, true);
                    setField(`#width-multi-${pageIndex}`, h.width, true);
                    setField(`#length-multi-${pageIndex}`, h.length, true);
                    setField(`#alt_bom_text-multi-${pageIndex}`, h.alt_bom_text, true);

                    // Fallback ke single inputs
                    setField(`#material-${pageIndex}`, h.material);
                    setField(`#mat_type-${pageIndex}`, h.mat_type);
                    setField(`#width-${pageIndex}`, h.width);
                    setField(`#length-${pageIndex}`, h.length);
                    setField(`#alt_bom_text-${pageIndex}`, h.alt_bom_text);

                    updateAltBomCodeMulti(pageIndex);
                } else {
                    $targetCheckbox.prop('checked', false);
                    $(`#singleResourceInputs-${pageIndex}, #singleCapacity-${pageIndex}, #singleMaterial-${pageIndex}, #singleMatType-${pageIndex}, #singleWidth-${pageIndex}, #singleLength-${pageIndex}, #singleAltBom-${pageIndex}`).show();
                    $(`#multiResourceCountWrapper-${pageIndex}, #multiResourceInputs-${pageIndex}`).hide();
                    $(`#multiResourceInputs-${pageIndex}`).empty();

                    const resVal = Array.isArray(h.resources) ? (h.resources[0] || '') : (h.resources || '');
                    const capValRaw = Array.isArray(h.capacities) ? (h.capacities[0] || '') : (h.capacities || '');
                    const capVal = String(capValRaw).replace(/\./g, ',');

                    setField(`#resources-${pageIndex}`, resVal);
                    setField(`#resource_input_${pageIndex}`, resVal, true);
                    setField(`#capacity-${pageIndex}`, capVal, true);
                    setField(`#material-${pageIndex}`, h.material, true);
                    setField(`#mat_type-${pageIndex}`, h.mat_type, true);
                    setField(`#width-${pageIndex}`, h.width, true);
                    setField(`#length-${pageIndex}`, h.length, true);
                    setField(`#alt_bom_text-${pageIndex}`, h.alt_bom_text, true);

                    checkResourceAndSetCustom(resVal, pageIndex, null);

                    let machineCode = resVal.length >= 2 ? resVal.slice(-2) + '-' : '';
                    $(`#machine-code-${pageIndex}`).text(machineCode);
                }

                function buildMachineCodeJ(resources, isMulti) {
                    if (isMulti && Array.isArray(resources) && resources.length > 0) {
                        const codes = resources
                            .filter(r => r && r.length >= 2)
                            .map(r => r.slice(-2));
                        return codes.length > 0 ? codes.join(',') + '-' : '';
                    } else {
                        const resVal = Array.isArray(resources) ? (resources[0] || '') : (resources || '');
                        return resVal.length >= 2 ? resVal.slice(-2) + '-' : '';
                    }
                }

                const machineCodeForPaste = buildMachineCodeJ(h.resources, isSourceMulti);
                const spanMachineCode = ($(`#machine-code-${pageIndex}`).text() || $(`#machine-code-multi-${pageIndex}`).text() || '').trim();
                const fullAltBomText = (spanMachineCode || machineCodeForPaste) + (h.alt_bom_text || '');

                let pollAttempts = 0;
                const pollMax = 30;
                const selector = `#datatable-bom-${pageIndex}`;

                const doPaste = function() {
                    try {
                        const isReady = $.fn.DataTable && $.fn.DataTable.isDataTable(selector);
                        if (!isReady) {
                            if (pollAttempts < pollMax) {
                                pollAttempts++;
                                setTimeout(doPaste, 100);
                            } else {
                                Swal.fire({
                                    icon: 'warning',
                                    title: 'Paste Sebagian',
                                    text: `Header Form #${pageIndex} berhasil, tapi tabel belum siap.`,
                                    timer: 3000,
                                    showConfirmButton: false,
                                    toast: true,
                                    position: 'top-end'
                                });
                            }
                            return;
                        }

                        const table = $(selector).DataTable();
                        table.clear();

                        (dataBom.detail || []).forEach((det, i) => {
                            const rowNum = i + 1;
                            addTableRow(pageIndex, rowNum, {
                                material_fg_sfg: det.material_fg_sfg || h.material || '',
                                alt_bom_text: det.alt_bom_text || fullAltBomText,
                                product_qty: det.product_qty || 100,
                                base_uom_header: det.base_uom_header || '',
                                item_number: det.item_number || '',
                                type: det.type || 'L',
                                comp_material_code: (det.comp_material_code || '').toUpperCase(),
                                comp_desc: det.comp_desc || '',
                                comp_qty: format3Decimal(det.comp_qty),
                                uom: det.uom || '',
                            });
                        });

                        table.draw(false);
                        calculateTotalCompQty(pageIndex);
                        setTimeout(function() {
                            if (typeof autoValidateAllComponentMaterialsSAP === 'function') {
                                autoValidateAllComponentMaterialsSAP(pageIndex);
                            }
                            if (window._pasteMode) delete window._pasteMode[pageIndex];

                            const pastedResource = isSourceMulti
                                ? ($(`#resources_multi_${pageIndex}_1`).val() || '')
                                : ($(`#resources-${pageIndex}`).val() || '');
                            if (typeof updateProductQTY === 'function') {
                                updateProductQTY(pastedResource, isSourceMulti, pageIndex);
                            }
                        }, 1200);

                        Swal.fire({
                            icon: 'success',
                            title: 'Berhasil di-Paste!',
                            html: `Data berhasil ditempelkan ke <b>Form #${pageIndex}</b> (${(dataBom.detail||[]).length} baris detail).`,
                            timer: 2500,
                            showConfirmButton: false,
                            toast: true,
                            position: 'top-end'
                        });
                    } catch (err) {
                        console.error('[pasteBomJ edit] Error:', err);
                        if (window._pasteMode) delete window._pasteMode[pageIndex];
                        Swal.fire({
                            icon: 'warning',
                            title: 'Paste Sebagian',
                            text: `Header berhasil ditempel, tabel error: ${err.message}`,
                            timer: 3500,
                            showConfirmButton: false,
                            toast: true,
                            position: 'top-end'
                        });
                    }
                };

                setTimeout(doPaste, 350);
            };
        });
    </script>