@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="card shadow-lg mx-4">
        <div class="card-body p-3">
            <div class="row gx-4">
                <div class="col-lg">
                    <div class="nav-wrapper">
                        {{-- button back --}}
                        <button class="btn btn-secondary mb-0" onclick="history.back()"><i class="fas fa-circle-left me-1">
                            </i><span class="font-weight-bold">Kembali</button>
                        {{-- check authorize add --}}
                        @if ($authorize->add == '1')
                            {{-- button save --}}
                            <button type="button" class="btn btn-primary mb-0" id="saveButton">
                                <i class="fas fa-floppy-disk me-1"></i>
                                <span class="font-weight-bold">Simpan</span>
                            </button>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <form role="form" method="POST" action="{{ URL::to($url_menu) }}" id="{{ $dmenu }}-form"
                        enctype="multipart/form-data">
                        @csrf
                        <div class="card-body">
                            <p class="text-uppercase text-sm">Insert {{ $title_menu }}</p>
                            <hr class="horizontal dark mt-0">
                            <div class="row">
                                <div class="table-responsive" id="tbl-wrapper" style="max-height:75vh; overflow:auto;">
                                    <input type="number" class="form-control" name="list_material" max="99" hidden>
                                    <table class="table table-hover excel-table" id="list-material">
                                        <thead style="background-color: #00b7bd4f;">
                                            <tr>
                                                <th scope="col" class="freeze-col-action">Action</th>
                                                <th scope="col" class="freeze-col-kode">Kode Baru FG <code>*</code></th>
                                                <th scope="col">ID Material Group <code>*</code></th>
                                                <th scope="col">Customer <code>*</code></th>
                                                <th scope="col">Product Name <code>*</code></th>
                                                <th scope="col">Division <code>*</code></th>
                                                <th scope="col">Mat G1 <code>*</code></th>
                                                <th scope="col">Mat G2 <code>*</code></th>
                                                <th scope="col">Mat G3 <code>*</code></th>
                                                <th scope="col">Length (M) <code>*</code></th>
                                                <th scope="col">UOM <code>*</code></th>
                                                <th scope="col">Width (M)</th>
                                                <th scope="col">Weight (KG)</th>
                                                <th scope="col">Top Load</th>
                                                <th scope="col">Keterangan</th>
                                                {{-- <th scope="col">Status</th> --}}
                                            </tr>
                                        </thead>
                                        <tbody id="table-data">

                                        </tbody>
                                    </table>
                                </div>
                                <div class="mt-3">
                                    <button type="button" class="btn btn-primary" id="list-addMaterial">
                                        Add Item <i class="bi bi-file-earmark-plus"></i>
                                    </button>
                                    {{-- <button type="button" class="btn btn-success" id="list-addMaterial">
                                        <i class="fas fa fa-copy"></i> Copy
                                    </button> --}}
                                    <input type="hidden" id="item_number" value="0" />
                                </div>
                                {{-- <div class="row px-4 py-2">
                                    <div class="col-lg">
                                        <div class="nav-wrapper" id="noted"><code>Note : <i aria-hidden="true"
                                                    style="color: #ffc2cd;" class="fas fa-circle"></i> Temuan memerlukan
                                                proses
                                                pembuatan Surat Peringatan.</code>
                                        </div>
                                    </div>
                                </div> --}}
                            </div>
                            <hr class="horizontal dark">
                        </div>



                    </form>
                    <div class="row px-4 py-2">
                        <div class="col-lg">
                            <div class="nav-wrapper" id="noted"><code>Note : (<code>*</code>) Wajib diisi. Harap isi
                                    Width,
                                    Weight,
                                    dan Top Load ketika memilih UOM BAL/BOX.</code>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


    </div>

    <div class="container-fluid pb-4">
        <div class="row">
            <div class="col-md-12">
                <div class="card shadow-sm border-0">
                    <div class="card-body py-3 px-4">
                        <h6 class="mb-1"><i class="fas fa-info-circle me-1"></i> Attention</h6>
                        <hr class="my-2">

                        @if (empty($attention_list) ||
                                (is_object($attention_list) && $attention_list->isEmpty()) ||
                                (is_array($attention_list) && count($attention_list) === 0))
                            <p class="text-muted text-xs mb-0">Belum ada data.
                                <a href="/msattn" target="_blank">Tambah di Master Attention</a>.
                            </p>
                        @else
                            @php
                                $matGroupNamesMulti = \Illuminate\Support\Facades\DB::table('sys_enum')
                                    ->where('idenum', 'mat_group')
                                    ->pluck('name', 'value');
                                $divisionNamesMulti = \Illuminate\Support\Facades\DB::table('sys_enum')
                                    ->where('idenum', 'division')
                                    ->pluck('name', 'value');
                            @endphp

                            <div class="table-responsive">
                                <table class="table table-sm table-bordered mb-0" style="font-size:12px;">
                                    <thead style="background-color:#00b7bd4f;">
                                        <tr>
                                            <th class="text-center">Kode</th>
                                            <th class="text-center">Mat Group</th>
                                            <th class="text-center">Product Name</th>
                                            <th class="text-center">Division</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($attention_list as $attn)
                                            <tr>
                                                <td><b>{{ is_array($attn) ? $attn['attention_code'] : $attn->attention_code }}</b>
                                                </td>
                                                @php
                                                    $attnMatGroup = is_array($attn)
                                                        ? $attn['id_mat_group']
                                                        : $attn->id_mat_group;
                                                    $attnProduct = is_array($attn)
                                                        ? $attn['product_name']
                                                        : $attn->product_name;
                                                    $attnDivision = is_array($attn)
                                                        ? $attn['division']
                                                        : $attn->division;
                                                @endphp
                                                <td>{{ $attnMatGroup }} -
                                                    {{ $matGroupNamesMulti[$attnMatGroup] ?? $attnMatGroup }}</td>
                                                <td>{{ $attnProduct }}</td>
                                                <td>{{ $attnDivision }} -
                                                    {{ $divisionNamesMulti[$attnDivision] ?? $attnDivision }}</td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        @endif
                        <hr>
                        <p class="text-muted text-xs mb-0"> Note: Mohon menghubungi PIC apabila terdapat ketidaksesuaian
                            data atau diperlukan penambahan data.
                            {{-- <a href="/msattn" target="_blank">Tambah di Master Attention</a>. --}}
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <style>
        #tbl-wrapper {
            overflow: auto;
        }
        #tbl-wrapper table {
            border-collapse: separate !important;
            border-spacing: 0;
        }
        td.freeze-col-action,
        th.freeze-col-action {
            position: sticky !important;
            left: 0 !important;
            z-index: 2;
            background-color: #fff;
            min-width: 120px;
            width: 120px;
            max-width: 120px;
            border-right: 1px solid #dee2e6 !important;
            box-shadow: 2px 0 5px -1px rgba(0,0,0,0.12);
        }
        td.freeze-col-action::before,
        th.freeze-col-action::before {
            content: '';
            position: absolute;
            top: 0;
            right: 100%;      
            width: 9999px;    
            height: 100%;
            background: inherit; 
            z-index: -1;
        }

        td.freeze-col-kode,
        th.freeze-col-kode {
            position: sticky !important;
            left: 120px !important;
            z-index: 2;
            background-color: #fff;
            border-right: 2px solid #dee2e6 !important;
            isolation: isolate;
        }
        thead th.freeze-col-action {
            background-color: #b0e9eb !important;
            z-index: 3 !important;
            box-shadow: 2px 0 5px -1px rgba(0,0,0,0.12) !important;
        }
        thead th.freeze-col-kode {
            background-color: #b0e9eb !important;
            z-index: 3 !important;
        }
        .table-hover tbody tr:hover td.freeze-col-action {
            background-color: #f5f5f5 !important;
            box-shadow: 2px 0 5px -1px rgba(0,0,0,0.12) !important;
        }
        .table-hover tbody tr:hover td.freeze-col-kode {
            background-color: #f5f5f5 !important;
        }

        .loading-message {
            display: none;
            font-size: 12px;
            color: #0d6efd;
            align-items: center;
            gap: 6px;
            margin-top: 4px;
        }

        .loading-message .spinner {
            width: 14px;
            height: 14px;
            border: 2px solid #cfe2ff;
            border-top-color: #0d6efd;
            border-radius: 50%;
            animation: spin .8s linear infinite;
        }

        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }

        .width-edit-btn {
            padding: 2px 6px;
            font-size: 11px;
            line-height: 1;
            flex-shrink: 0;
        }
    </style>


    <script>
        var id_item = 0;
        var jumlah_item = 0;
        var id_mat_groupSelect = @json($idmatgroup);
        var product_nameSelect = @json($product);
        var divisionSelect = @json($division);
        var mat_g1Select = @json($mat_g1);
        var mat_g2Select = @json($mat_g2);
        var mat_g3Select = @json($mat_g3);
        var alt_uomSelect = @json($alt_uom);
        var statusSelect = @json($status_mat);
        var lengthInp = @json($length);
        var _attentionList = @json($attention_list ?? []);
        var tempUom = [];
        var uomReady = [];

        function _getDivisionByMatGroupRow(matGroupValue) {
            if (matGroupValue && matGroupValue.toUpperCase() === 'MB') return '10';
            return '20';
        }

        function _applyAttentionOverrideRow(row, kode) {
            const state = getRowState(row);
            const isCopied = state.isCopiedRow;

            if (!kode) {
                _unlockAttentionFieldsRow(row);
                return;
            }

            let matched = null;
            if (_attentionList && _attentionList.length > 0) {
                const kodeUpper = kode.toUpperCase();
                matched = _attentionList.find(function(attn) {
                    const code = attn.attention_code.toUpperCase();
                    return kodeUpper.startsWith(code, 1) || kodeUpper.includes(code);
                });
            }
            console.log("match", matched);

            if (!matched) {
                // _lockCopiedFieldsRow(row);
                // _unlockAttentionFieldsRow(row);
                _unlockAttentionFieldsRow(row);
                return;
            }

            const idMatGroupEl = row.querySelector('select[name="id_mat_group[]"]');
            const productNameEl = row.querySelector('select[name="product_name[]"]');
            const divisionEl = row.querySelector('select[name="division[]"]');

            if (idMatGroupEl && matched.id_mat_group) {
                const opt = Array.from(idMatGroupEl.options).find(o => o.value === matched.id_mat_group);
                if (!opt) {
                    const newOpt = new Option(matched.id_mat_group, matched.id_mat_group, true, true);
                    $(idMatGroupEl).append(newOpt);
                }
                $(idMatGroupEl).val(matched.id_mat_group).trigger('change');
            }

            if (productNameEl && matched.product_name) {
                const opt = Array.from(productNameEl.options).find(o => o.value === matched.product_name);
                if (!opt) {
                    const newOpt = new Option(matched.product_name, matched.product_name, true, true);
                    $(productNameEl).append(newOpt);
                }
                $(productNameEl).val(matched.product_name).trigger('change');
            }

            const derivedDivision = _getDivisionByMatGroupRow(matched.id_mat_group || '');
            if (divisionEl) {
                const opt = Array.from(divisionEl.options).find(o => o.value === derivedDivision);
                if (!opt) {
                    const newOpt = new Option(derivedDivision, derivedDivision, true, true);
                    $(divisionEl).append(newOpt);
                }
                $(divisionEl).val(derivedDivision).trigger('change');
            }

            _lockAttentionFieldsRow(row);
            _ensureHiddenBackupRow(row, 'id_mat_group[]', idMatGroupEl ? idMatGroupEl.value : (matched.id_mat_group || ''));
            _ensureHiddenBackupRow(row, 'product_name[]', productNameEl ? productNameEl.value : (matched.product_name ||
                ''));
            _ensureHiddenBackupRow(row, 'division[]', derivedDivision);
        }

        function _lockAttentionFieldsRow(row) {
            ['id_mat_group[]', 'product_name[]', 'division[]'].forEach(function(name) {
                const el = row.querySelector('select[name="' + name + '"]');
                if (el) {
                    el.disabled = true;
                    el.style.backgroundColor = '#e9ecef';
                    el.style.cursor = 'not-allowed';
                    el.title = 'Terisi otomatis dari Attention — tidak bisa diubah manual';
                }
            });
        }

        function _lockCopiedFieldsRow(row) {
            ['id_mat_group[]', 'product_name[]', 'division[]'].forEach(function(name) {
                const el = row.querySelector('select[name="' + name + '"]');
                if (el) {
                    el.disabled = true;
                    el.style.backgroundColor = '#e9ecef';
                    el.style.cursor = 'not-allowed';
                    el.title = 'Terisi otomatis dari Master Data — tidak bisa diubah manual';
                    
                    let hidden = row.querySelector('input[data-attention-backup="' + name + '"]');
                    if (!hidden) {
                        hidden = document.createElement('input');
                        hidden.type = 'hidden';
                        hidden.name = name;
                        hidden.setAttribute('data-attention-backup', name);
                        if (el.parentElement) {
                            el.parentElement.appendChild(hidden);
                        }
                    }
                    hidden.value = el.value;
                }
            });
        }

        function _unlockAttentionFieldsRow(row) {
            ['id_mat_group[]', 'product_name[]', 'division[]'].forEach(function(name) {
                const el = row.querySelector('select[name="' + name + '"]');
                if (el) {
                    el.disabled = false;
                    el.style.backgroundColor = '';
                    el.style.cursor = '';
                    el.title = '';
                }
                const hidden = row.querySelector('input[data-attention-backup="' + name + '"]');
                if (hidden) hidden.remove();
            });
        }

        function _ensureHiddenBackupRow(row, fieldName, value) {
            let hidden = row.querySelector('input[data-attention-backup="' + fieldName + '"]');
            if (!hidden) {
                hidden = document.createElement('input');
                hidden.type = 'hidden';
                hidden.name = fieldName;
                hidden.setAttribute('data-attention-backup', fieldName);

                // Tempel di td yang sama dengan select nya agar ikut dikirim
                const sel = row.querySelector('select[name="' + fieldName + '"]');
                if (sel && sel.parentElement) {
                    sel.parentElement.appendChild(hidden);
                }
            }
            hidden.value = value;
        }

        document.addEventListener('change', function(e) {
            const t = e.target;
            if (!t || t.name !== 'id_mat_group[]' || t.disabled) return;
            const row = t.closest('tr');
            if (!row) return;
            const divEl = row.querySelector('select[name="division[]"]');
            if (divEl && !divEl.disabled) {
                const derivedDivision = _getDivisionByMatGroupRow(t.value);
                const opt = Array.from(divEl.options).find(o => o.value === derivedDivision);
                if (!opt) {
                    const newOpt = new Option(derivedDivision, derivedDivision, true, true);
                    $(divEl).append(newOpt);
                }
                $(divEl).val(derivedDivision).trigger('change');
            }
        });
        // ---------------------------------

        function validateCustomerMultiple(inputElement) {
            const value = inputElement.value;
            const maxLength = 20;
            const td = inputElement.closest("td");

            let messageElement = td.querySelector(".customer-error-message");
            if (!messageElement) {
                messageElement = document.createElement('p');
                messageElement.className = 'customer-error-message text-danger text-xs mt-1';
                messageElement.style.display = 'none';
                td.appendChild(messageElement);
            }

            let counterElement = td.querySelector(".customer-counter");
            if (!counterElement) {
                counterElement = document.createElement('small');
                counterElement.className = 'customer-counter';
                counterElement.style.float = 'right';
                counterElement.style.fontSize = '11px';
                counterElement.style.marginTop = '3px';
                counterElement.style.display = 'block';
                td.appendChild(counterElement);
            }

            const saveBtn = document.getElementById("saveButton");

            // Reset styles dulu
            inputElement.classList.remove("is-invalid");
            inputElement.style.borderColor = ""; // Reset ke default
            inputElement.style.borderWidth = "";
            messageElement.style.display = "none";

            counterElement.textContent = `${value.length}/${maxLength}`;

            if (value.length > maxLength) {
                messageElement.textContent = `Customer tidak boleh lebih dari ${maxLength} karakter!`;
                messageElement.style.display = "block";
                inputElement.classList.add("is-invalid");
                inputElement.style.borderColor = "#fd5c70";
                inputElement.style.borderWidth = "1px";
                counterElement.style.color = 'red';

                if (saveBtn) {
                    saveBtn.disabled = true;
                    saveBtn.style.opacity = "0.5";
                }
            } else {
                messageElement.style.display = "none";

                if (value.length >= maxLength - 2) {
                    counterElement.style.color = 'orange';
                } else {
                    counterElement.style.color = '#6c757d';
                    counterElement.style.fontWeight = 'normal';
                }

                if (saveBtn) {
                    const allCustomerInputs = document.querySelectorAll('input[name="customer[]"]');
                    let hasError = false;

                    allCustomerInputs.forEach(inp => {
                        if (inp.value.length > maxLength) hasError = true;
                    });

                    if (!hasError) {
                        saveBtn.disabled = false;
                        saveBtn.style.opacity = "1";
                    }
                }
            }
        }
        // console.log('uom', alt_uomSelect);

        $("#list-addMaterial").click(function() {

            // jumlah item akan bertambah
            jumlah_item++;
            // id_item akan bertambah kelipatan 10
            id_item = id_item + 10;

            // Tambahkan baris baru
            var newRow = $(
                `
                        <tr class="listmaterial-row">
                            <td scope="row" class="freeze-col-action">
                                <button class="btn btn-danger delete-item" type="button">X</button> 
                                <button class="btn btn-info copy-item" type="button" onclick="copyItem(this)"><i class="fas fa fa-copy"></i></button>
                                <input type="hidden" name="item_number[]" value="` + id_item + `">
                            </td>
                                    <td scope="row" class="freeze-col-kode">
                                        <div class="input-group code_material" style="width:265px">
                                            <input type="text" class="form-control upper notspace kode_baru_fg" id="kode_baru_fg[]" name="kode_baru_fg[]" placeholder="Code Material" aria-describedby="code-mat" maxlength="29" oninput="handleMaterialInput(this)">
                                            </div>
                                            <p class="text-danger text-xs mt-1 validation-message" style="display:none;"></p>
                                            <p class="text-success text-xs mt-1 info-message data-info" style="display:none;"></p>
                                           
                                    </td>

                                    <td scope="row">
                                        <select name="id_mat_group[]" class="form-select select2_init" id="id_mat_group[]" style="width: 150px;">
                                        </select>
                                         
                                    </td>

                                    <td scope="row"><input type="text" class="form-control upper" name="customer[]" placeholder="Customer" style="width: 200px; text-transform:uppercase;" id="customer[]" oninput="validateCustomerMultiple(this)"></td>

                                    <td scope="row">
                                        <select name="product_name[]" class="form-select select2_init" id="product_name[]" style="width: 180px;">
                                        </select>
                                    </td>

                                    <td scope="row">
                                        <select name="division[]" class="form-select select2_init" id="division[]" style="width: 150px;">
                                        </select>
                                    </td>
                                    <td scope="row">
                                        <select name="mat_g1[]" class="form-select select2_init" id="mat_g1[]" style="width: 150px;">
                                        </select>
                                    </td>
                                        <td scope="row">
                                        <select name="mat_g2[]" class="form-select select2_init" id="mat_g2[]" style="width: 150px;">
                                        </select>
                                    </td>
                                        <td scope="row">
                                        <select name="mat_g3[]" class="form-select select2_init" id="mat_g3[]" style="width: 150px;">
                                        </select>
                                    </td>

                                    <td scope="row"><input type="text" class="form-control decimal-input" name="length[]"
                                       oninput="handleLengthInput(this)" max="9999999999" style="width: 100px;" required min="0.01">
                                       <p class="text-danger text-xs mt-1 validation-message" style="display:none;"></p>
                                            <p class="text-success text-xs mt-1 info-message data-info" style="display:none;"></p>
                                        </td>

                                    <td scope="row">
                                        <select class="form-select" name="alt_uom[]" id="alt_uom" onchange="uomChecker(this, this.value)" style="width: 100px;">
                                        </select>
                                        <p class="text-danger text-xs pt-1 message-uom" style="display:none;"></p>
                                        <p class="text-success text-xs mt-1 message-info data-info" style="display:none;"></p>

                                    </td>

                                    <td scope="row">
                                        <div class="d-flex align-items-center gap-1">
                                            <input type="text" class="form-control width-formatted-input" name="width[]"
                                                max="9999999999" style="width: 90px;" placeholder="Cth: 0.272"
                                                oninput="handleWidthInput(this)"
                                                onblur="handleWidthBlur(this)"
                                                autocomplete="off" readonly>
                                            <button type="button" class="btn btn-sm btn-outline-warning width-edit-btn" title="Edit Width" onclick="editWidthField(this)">✏️</button>
                                        </div>
                                        <input type="hidden" name="width_modified[]" value="0">
                                        <p class='text-secondary text-xs pt-1' style='font-size:10px;'>*) Satuan Meter.<br>Gunakan (.), cth: 0.272</p>
                                    </td>
                                                                        
                                    <td scope="row"><input type="text" class="form-control decimal-input" name="weight[]"
                                        max="9999999999" style="width: 100px;" required  readonly></td>
                                    
                                    <td scope="row"><input type="top_load" class="form-control" name="top_load[]"
                                        max="9999999999" style="width: 100px;" required  readonly></td>
                                    
                                    <td scope="row"><input type="text" class="form-control" name="keterangan[]" placeholder="Keterangan" style="width: 200px;" id="keterangan[]"></td>

                        </tr>
                        <style>
                            .data-info {
                                max-height: 80px;
                                overflow-y: auto;
                                white-space: pre-wrap;
                                word-break: break-word;
                                background-color: #f7f7f7;
                                padding: 4px 8px;
                                border: 1px dashed #ccc;
                                border-radius: 4px;
                                max-width: 600px;
                            }
                            </style>
                        `);


            // add value dropdown type id_mat_group
            var id_mat_group = newRow.find("select[name='id_mat_group[]']");
            id_mat_groupSelect.forEach(function(type) {
                id_mat_group.append(

                    `<option value="" selected disabled hidden>Pilih opsi</option>
                    <option value="${type.value}">${type.value} - ${type.name}</option>`
                );
            });

            // add value dropdown type product_name
            var product_name = newRow.find("select[name='product_name[]']");
            product_nameSelect.forEach(function(type) {
                product_name.append(
                    `<option value="" selected disabled hidden>Pilih opsi</option>
                    <option value="${type.name}">${type.name}</option>`
                );
            });

            // add value dropdown type division
            var division = newRow.find("select[name='division[]']");
            divisionSelect.forEach(function(type) {
                division.append(
                    `<option value="" selected disabled hidden>Pilih opsi</option>
                    <option value="${type.value}">${type.value} - ${type.name}</option>`
                );
            });

            // add value dropdown type mat_g1
            var mat_g1 = newRow.find("select[name='mat_g1[]']");
            mat_g1Select.forEach(function(type) {
                mat_g1.append(
                    `<option value="" selected disabled hidden>Pilih opsi</option>
                    <option value="${type.value}">${type.value} - ${type.name}</option>`
                );
            });

            // add value dropdown type mat_g2
            var mat_g2 = newRow.find("select[name='mat_g2[]']");
            mat_g2Select.forEach(function(type) {
                mat_g2.append(
                    `<option value="" selected disabled hidden>Pilih opsi</option>
                    <option value="${type.value}">${type.value} - ${type.name}</option>`
                );
            });

            // add value dropdown type mat_g3
            var mat_g3 = newRow.find("select[name='mat_g3[]']");
            mat_g3Select.forEach(function(type) {
                mat_g3.append(
                    `<option value="" selected disabled hidden>Pilih opsi</option>
                    <option value="${type.value}">${type.value} - ${type.name}</option>`
                );
            });

            // add value dropdown type alt_uom
            var alt_uom = newRow.find("select[name='alt_uom[]']");
            alt_uomSelect.forEach(function(type) {
                alt_uom.append(
                    `<option value="" selected disabled hidden>Pilih opsi</option>
                    <option value="${type.value}">${type.name}</option>`
                );
            });

            // add value dropdown type status
            // var status = newRow.find("select[name='status[]']");
            // statusSelect.forEach(function(type) {
            //     status.append(
            //         `<option value="" selected disabled hidden>Pilih opsi</option>
        //         <option value="${type.value}">${type.name}</option>`
            //     );
            // });


            // Fungsi klik untuk tombol hapus
            newRow.find('.delete-item').on('click', function() {
                const btn = $(this); // simpan reference biar bisa dipakai di dalam .then()

                Swal.fire({
                    icon: 'warning',
                    title: 'Hapus Material!',
                    text: 'Harap isi ulang UoM untuk material yang sama jika masih ada di daftar.',
                    showCancelButton: true,
                    confirmButtonText: 'Ya, hapus',
                    cancelButtonText: 'Batal'
                }).then((result) => {
                    if (result.isConfirmed) {
                        // baru lanjut proses di sini
                        btn.closest('tr').remove();
                        jumlah_item--;

                        const kode_hapus = btn.closest('tr').find('input[name="kode_baru_fg[]"]')
                            .val();

                        // tempUom = tempUom.filter(item => item.kodefg !== item_no);
                        tempUom = tempUom.filter(item => item.kodefg !== kode_hapus);

                        $('#list-material input[name="kode_baru_fg[]"]').trigger('input');

                        $('#list-material tbody tr').each(function() {
                            let row = $(this);
                            let inputKode = row.find('input[name="kode_baru_fg[]"]').val();
                            if (inputKode === kode_hapus) {
                                row.find('select[name="alt_uom[]"]').val(
                                    ""); // reset select
                                // row.find('select[name="alt_uom[]"]').trigger('change');
                            }
                        });
                    }
                });
            });


            // Tambahkan baris baru ke dalam tabel
            // $('#table-data').append(newRow);
            $('#list-material tbody').append(newRow);


            reinitAllSelect2();
        });

        document.addEventListener("input", function(e) {
            if (e.target.classList.contains("decimal-input")) {
                let val = e.target.value;

                // ubah koma jadi titik
                val = val.replace(/,/g, ".");

                // hanya izinkan angka + titik
                val = val.replace(/[^0-9.]/g, "");

                // batasi cuma boleh 1 titik
                const parts = val.split(".");
                if (parts.length > 2) {
                    val = parts[0] + "." + parts.slice(1).join("");
                }

                e.target.value = val;
            }
        });



        function reinitAllSelect2() {
            $('.select2_init').each(function() {
                if ($(this).hasClass("select2-hidden-accessible")) {
                    // $(this).select2('destroy');
                }

                $(this).select2({
                    placeholder: 'Pilih opsi',
                    allowClear: true,
                    width: 'resolve'
                });
            });
        }

        function formatWidthRow(num) {
            if (num === null || num === undefined || num === '') return '';
            return (Number(num) / 1000).toFixed(3);
        }

        function extractWidthFromKodeFGRow(kode) {
            if (!kode) return null;
            const parts = kode.split('-');
            if (parts.length === 0) return null;
            const lastPart = parts[parts.length - 1];
            if (lastPart.length < 2) return null;

            const widthStr = lastPart.substring(0, lastPart.length - 1);
            const last4 = widthStr.slice(-4);
            const widthNum = parseInt(last4, 10);
            return isNaN(widthNum) ? null : widthNum;
        }

        function _applyAutofillWidthRow(row, extractedWidth) {
            const state = getRowState(row);
            const widthInput = row.querySelector('input[name="width[]"]');
            const hiddenFlag = row.querySelector('input[name="width_modified[]"]');
            if (!widthInput) return;

            state.autofilledWidthValue = extractedWidth;
            state.widthAutofilled = true;
            state.widthModified = false;
            widthInput.value = formatWidthRow(extractedWidth);
            if (hiddenFlag) hiddenFlag.value = '0';

            if (extractedWidth > 3500) {
                widthInput.removeAttribute('readonly');
                widthInput.style.backgroundColor = '#fff9e6';
                widthInput.style.borderColor = '';
                state.widthModified = true;
                if (hiddenFlag) hiddenFlag.value = '1';
                Swal.fire({
                    icon: 'warning',
                    title: 'Width Melebihi Batas!',
                    html: `Width dari kode FG (<b>${formatWidthRow(extractedWidth)} m</b>) melebihi maksimal <b>3,500 m</b>.<br>Silakan masukkan nilai width yang benar secara manual.`,
                    confirmButtonColor: '#028284',
                    confirmButtonText: 'OK, Saya Edit'
                }).then(() => {
                    widthInput.focus();
                });
            } else {
                widthInput.setAttribute('readonly', true);
                widthInput.style.backgroundColor = '#e9ecef';
            }
        }

        function getRowState(row) {
            if (!row.msjState) {
                row.msjState = {
                    debounceTimer: null,
                    altUomController: null,
                    lastProcessedKode: null,
                    msjRowFetchController: null,
                    widthAutofilled: false,
                    widthModified: false,
                    autofilledWidthValue: null,
                    isCopiedRow: false
                };
            }
            return row.msjState;
        }

        function resetMsjRowFields(row) {
            const state = getRowState(row);

            let fields = ['id_mat_group[]', 'product_name[]', 'customer[]', 'division[]', 'mat_g1[]', 'mat_g2[]', 'mat_g3[]'];
            
            if (state.isCopiedRow) {
                fields = ['id_mat_group[]', 'product_name[]', 'division[]'];
            }

            fields.forEach(function(name) {
                const el = row.querySelector('select[name="' + name + '"], input[name="' + name + '"]');
                if (!el) return;

                if (el.tagName === 'SELECT') {
                    $(el).val('').trigger('change');
                } else {
                    el.value = '';
                }
            });
        }

        function applyRowFields(row, fieldMap) {
            const delayedRowFields = ['division[]', 'mat_g1[]', 'mat_g2[]', 'mat_g3[]'];
            const state = getRowState(row);

            function setRowSelect(name, value) {
                const el = row.querySelector('select[name="' + name + '"], input[name="' + name + '"]');
                if (!el) return;

                if (value) {
                    if (el.tagName === 'SELECT') {
                        const opt = Array.from(el.options).find(o => o.value === value || o.text === value);
                        if (opt) {
                            el.value = opt.value;
                            $(el).val(opt.value).trigger('change');
                        }
                    } else {
                        el.value = value;
                        if (el.name === 'customer[]') {
                            validateCustomerMultiple(el);
                        }
                    }
                }
            }

            for (const [name, value] of Object.entries(fieldMap)) {
                if (delayedRowFields.includes(name)) {
                    setTimeout(() => {
                        setRowSelect(name, value);
                    }, 350);
                } else {
                    setRowSelect(name, value);
                }
            }

            const kodeFGInput = row.querySelector('input[name="kode_baru_fg[]"]');
            const widthInput = row.querySelector('input[name="width[]"]');
            const hiddenFlag = row.querySelector('input[name="width_modified[]"]');
            if (kodeFGInput) {
                const extractedWidth = extractWidthFromKodeFGRow(kodeFGInput.value.trim());
                if (extractedWidth !== null) {
                    _applyAutofillWidthRow(row, extractedWidth);
                } else {
                    state.autofilledWidthValue = null;
                    state.widthAutofilled = false;
                    state.widthModified = false;
                    if (widthInput) widthInput.value = '';
                    if (hiddenFlag) hiddenFlag.value = '0';
                }
            }
        }

        function msjMaterialCheckRow(row, kode_baru_fg) {
            var tableDetail = JSON.parse(`{!! json_encode($table_detail) !!}`);
            const state = getRowState(row);

            resetMsjRowFields(row);

            // Delay 200ms agar select2 selesai re-render setelah reset sebelumnya
            setTimeout(function() {
                // Cek dari tableDetail (list lokal)
                const fromList = tableDetail.find(item => item.kode_baru_fg === kode_baru_fg);
                if (fromList) {
                    const fieldMap = {
                        'id_mat_group[]': fromList.id_mat_group ?? '',
                        'product_name[]': fromList.product_name ?? '',
                        'division[]': fromList.division ?? ''
                    };
                    let overriddenFields = [];

                    if (!state.isCopiedRow) {
                        fieldMap['customer[]'] = fromList.customer ?? '';
                        fieldMap['mat_g1[]'] = fromList.mat_g1 ?? '';
                        fieldMap['mat_g2[]'] = fromList.mat_g2 ?? '';
                        fieldMap['mat_g3[]'] = fromList.mat_g3 ?? '';
                    } else {
                        if (fromList.customer && fromList.customer.trim() !== '') { fieldMap['customer[]'] = fromList.customer; overriddenFields.push('Customer'); }
                        if (fromList.mat_g1 && fromList.mat_g1.trim() !== '') { fieldMap['mat_g1[]'] = fromList.mat_g1; overriddenFields.push('Mat G1'); }
                        if (fromList.mat_g2 && fromList.mat_g2.trim() !== '') { fieldMap['mat_g2[]'] = fromList.mat_g2; overriddenFields.push('Mat G2'); }
                        if (fromList.mat_g3 && fromList.mat_g3.trim() !== '') { fieldMap['mat_g3[]'] = fromList.mat_g3; overriddenFields.push('Mat G3'); }
                    }

                    applyRowFields(row, fieldMap);

                    if (overriddenFields.length > 0) {
                        Swal.fire({
                            toast: true,
                            position: 'top-end',
                            icon: 'info',
                            title: 'Data ' + overriddenFields.join(', ') + ' mengikuti Master Lokal',
                            showConfirmButton: false,
                            timer: 4000
                        });
                    }

                    setTimeout(() => {
                        _applyAttentionOverrideRow(row, kode_baru_fg);
                    }, 400);
                    return;
                }

                // Kalau tidak ada di list, fetch dari SAP
                const msjUrl = @json(env('API_MSJ_MATERIAL')) + kode_baru_fg;

                if (state.msjRowFetchController) {
                    state.msjRowFetchController.abort();
                }
                state.msjRowFetchController = new AbortController();

                fetch(msjUrl, {
                        signal: state.msjRowFetchController.signal
                    })
                    .then(res => {
                        if (!res.ok) throw new Error('API Error');
                        return res.json();
                    })
                    .then(data => {
                        const arr = data.ET_ZVNAMATAPI;
                        if (!arr || arr.length === 0) {
                            if (!state.widthAutofilled && !state.widthModified) {
                                const extractedWidth = extractWidthFromKodeFGRow(kode_baru_fg);
                                if (extractedWidth !== null) {
                                    _applyAutofillWidthRow(row, extractedWidth);
                                }
                            }

                            setTimeout(() => {
                                _applyAttentionOverrideRow(row, kode_baru_fg);
                            }, 100);
                            return;
                        }
                        const mat = arr[0];
                        const fieldMap = {
                            'id_mat_group[]': mat.MATKL ?? '',
                            'product_name[]': mat.ATWRT_PRODUCT ?? mat.MAKTX ?? '',
                            'division[]': mat.SPART ?? ''
                        };
                        let overriddenFields = [];

                        if (!state.isCopiedRow) {
                            fieldMap['customer[]'] = mat.ATWRT_CUSTOMER ?? '';
                            fieldMap['mat_g1[]'] = mat.MVGR1 ?? '';
                            fieldMap['mat_g2[]'] = mat.MVGR2 ?? '';
                            fieldMap['mat_g3[]'] = mat.MVGR3 ?? '';
                        } else {
                            if (mat.ATWRT_CUSTOMER && mat.ATWRT_CUSTOMER.trim() !== '') { fieldMap['customer[]'] = mat.ATWRT_CUSTOMER; overriddenFields.push('Customer'); }
                            if (mat.MVGR1 && mat.MVGR1.trim() !== '') { fieldMap['mat_g1[]'] = mat.MVGR1; overriddenFields.push('Mat G1'); }
                            if (mat.MVGR2 && mat.MVGR2.trim() !== '') { fieldMap['mat_g2[]'] = mat.MVGR2; overriddenFields.push('Mat G2'); }
                            if (mat.MVGR3 && mat.MVGR3.trim() !== '') { fieldMap['mat_g3[]'] = mat.MVGR3; overriddenFields.push('Mat G3'); }
                        }
                        applyRowFields(row, fieldMap);

                        if (overriddenFields.length > 0) {
                            Swal.fire({
                                toast: true,
                                position: 'top-end',
                                icon: 'info',
                                title: 'Data ' + overriddenFields.join(', ') + ' mengikuti Master data SAP',
                                showConfirmButton: false,
                                timer: 4000
                            });
                        }

                        setTimeout(() => {
                            _applyAttentionOverrideRow(row, kode_baru_fg);
                        }, 400);
                    })
                    .catch(err => {
                        if (err.name === 'AbortError') return; // sengaja di-abort, abaikan
                        console.error('MSJ Material API error:', err);
                    });
            }, 200);
        }

        function handleMaterialInput(inputEl) {
            const row = inputEl.closest('tr');
            const state = getRowState(row);

            // Debounce: tunggu 400ms setelah user berhenti mengetik
            clearTimeout(state.debounceTimer);
            state.debounceTimer = setTimeout(() => _doHandleMaterialInput(inputEl), 400);

            // Tetap jalankan validasi & UI feedback segera (tanpa fetch)
            const kode = inputEl.value.trim();
            const messageEl = inputEl.closest("td").querySelector(".validation-message");
            const infoEl = inputEl.closest("td").querySelector(".info-message");
            const lengthEl = row.querySelector('input[name="length[]"]');
            const saveBtn = document.getElementById("saveButton");

            messageEl.style.display = "none";
            infoEl.style.display = "none";
            inputEl.classList.remove("is-invalid");

            let cleanValue = inputEl.value.toUpperCase().replace(/\s/g, '');
            if (inputEl.value !== cleanValue) inputEl.value = cleanValue;

            const isValid = kode.length === 29;
            lengthEl.disabled = !isValid;

            if (kode.length < 29) {
                messageEl.textContent = "Kode minimal 29 karakter";
                messageEl.style.display = "block";
                inputEl.classList.add("is-invalid");
                saveBtn.disabled = true;
                state.lastProcessedKode = null;
                if (kode.length < 22) {
                    state.isCopied = false;
                    resetMsjRowFields(row);
                }
                if (state.altUomController) {
                    state.altUomController.abort();
                    state.altUomController = null;
                }
                if (row._msjRowFetchController) {
                    row._msjRowFetchController.abort();
                }
                return;
            }

            if (kode.length > 29) {
                messageEl.textContent = "Kode maksimal 29 karakter";
                messageEl.style.display = "block";
                inputEl.classList.add("is-invalid");
                saveBtn.disabled = true;
                state.lastProcessedKode = null;
                if (state.altUomController) {
                    state.altUomController.abort();
                    state.altUomController = null;
                }
                if (row._msjRowFetchController) {
                    row._msjRowFetchController.abort();
                }
                return;
            }
        }

        function _doHandleMaterialInput(inputEl) {
            const td = inputEl.closest("td");
            const messageEl = td.querySelector(".validation-message");
            const infoEl = td.querySelector(".info-message");
            const row = inputEl.closest('tr');
            const kode = inputEl.value.trim();
            const lengthEl = row.querySelector('input[name="length[]"]');
            const saveBtn = document.getElementById("saveButton");
            const state = getRowState(row);

            var tableDetail = JSON.parse(`{!! json_encode($table_detail) !!}`);

            let loadingEl = td.querySelector(".loading-message");
            if (!loadingEl) {
                loadingEl = document.createElement('div');
                loadingEl.className = 'loading-message';
                loadingEl.innerHTML = '<span class="spinner"></span><span>Sedang memuat data...</span>';
                td.appendChild(loadingEl);
            }

            // Reset UI
            messageEl.style.display = "none";
            infoEl.style.display = "none";
            inputEl.classList.remove("is-invalid");

            const isValid = kode.length === 29;
            lengthEl.disabled = !isValid;

            let cleanValue = inputEl.value.toUpperCase().replace(/\s/g, '');
            if (inputEl.value !== cleanValue) inputEl.value = cleanValue;

            if (cleanValue.length >= 4) {
                const ptoCheck = cleanValue.substring(1, 4);
                if (ptoCheck === 'PT0') {
                    const idMatGroupSelect = row.querySelector('select[name="id_mat_group[]"]');
                    const productNameSelect = row.querySelector('select[name="product_name[]"]');
                    if (idMatGroupSelect) {
                        const ssOption = Array.from(idMatGroupSelect.options).find(opt =>
                            opt.value === 'SS' || opt.value.startsWith('SS'));
                        if (ssOption) {
                            idMatGroupSelect.value = ssOption.value;
                            $(idMatGroupSelect).trigger('change');
                            idMatGroupSelect.style.borderColor = '#28a745';
                            setTimeout(() => {
                                idMatGroupSelect.style.borderColor = '';
                            }, 2000);
                        }
                    }
                    setTimeout(() => {
                        if (productNameSelect) {
                            const options = Array.from(productNameSelect.options);
                            const sapSheetOption = options.find(opt =>
                                opt.value === 'SAP SHEET' ||
                                opt.value.toUpperCase() === 'SAP SHEET' ||
                                opt.textContent.toUpperCase().includes('SAP SHEET'));
                            if (sapSheetOption) {
                                productNameSelect.value = sapSheetOption.value;
                                $(productNameSelect).trigger('change');
                                productNameSelect.style.borderColor = '#28a745';
                                setTimeout(() => {
                                    productNameSelect.style.borderColor = '';
                                }, 2000);
                            }
                        }
                    }, 400);
                }
            }

            if (!isValid) {
                saveBtn.disabled = true;
                return;
            }

            if (kode !== state.lastProcessedKode) {
                state.lastProcessedKode = kode;

                if (state.isCopied) {
                    state.isCopied = false;

                    const extractedWidth = extractWidthFromKodeFGRow(kode);
                    if (extractedWidth !== null) {
                        _applyAutofillWidthRow(row, extractedWidth);
                    }

                    setTimeout(() => {
                        const currentKode = row.querySelector('input[name="kode_baru_fg[]"]')?.value?.trim();
                        if (currentKode === kode) {
                            _applyAttentionOverrideRow(row, kode);
                        }
                    }, 400);
                } else {
                    state.widthAutofilled = false;
                    state.widthModified = false;
                    state.autofilledWidthValue = null;
                    const widthInputReset = row.querySelector('input[name="width[]"]');
                    const hiddenFlagReset = row.querySelector('input[name="width_modified[]"]');
                    if (widthInputReset) widthInputReset.value = '';
                    if (hiddenFlagReset) hiddenFlagReset.value = '0';

                    // Auto-fill dari MSJ Material (applyRowFields akan isi width juga)
                    msjMaterialCheckRow(row, kode);
                }
            }

            // Abort fetch alt_uom sebelumnya jika masih pending
            if (state.altUomController) {
                state.altUomController.abort();
            }
            state.altUomController = new AbortController();
            const signal = state.altUomController.signal;

            const url = @json(env('API_ALT_UOM')) + kode;

            loadingEl.style.display = "inline-flex";
            saveBtn.disabled = true;

            fetch(url, {
                    signal
                })
                .then(res => {
                    if (!res.ok) throw new Error("API Error");
                    return res.json();
                })
                .then(data => {
                    // Gabungkan data dari API + tableDetail
                    const dataTable = data.ET_MARD.concat(tableDetail.map(item => ({
                        MANDT: '110',
                        MATNR: item.kode_baru_fg,
                        MEINH: item.alt_uom,
                        LAENG: item.length
                    })));

                    const result = dataTable.filter(data => data.MATNR === kode);
                    const tempuom = tempUom.filter(data => data.kodefg === kode);

                    console.log('Result from API + tableDetail:', result);
                    console.log('TempUom:', tempuom);

                    uomReady = result.map(({
                        MATNR,
                        LAENG,
                        MEINH
                    }) => ({
                        MATNR,
                        LAENG,
                        MEINH
                    }));

                    if (result.length > 0 || tempuom.length > 0) {
                        let infoText;
                        if (tempuom.length > 0) {
                            const tempUomFormatted = tempuom.map(item => ({
                                MATNR: item.kodefg,
                                MEINH: item.uom,
                                LAENG: item.length
                            }));
                            console.log('tempuomformatted', tempUomFormatted);
                            const gabungan = [...result, ...tempUomFormatted];
                            infoText = gabungan.map(item => `${item.MEINH}:${item.LAENG}`).join(", ");
                        } else {
                            infoText = result.map(item => `${item.MEINH}:${item.LAENG}`).join(", ");
                        }
                        infoEl.textContent = `UOM Terpakai: (${infoText})`;
                        infoEl.style.display = "block";
                        inputEl.classList.remove("is-invalid");
                    } else {
                        infoEl.innerHTML = `<span style="color:green;">✓ Material baru</span>`;
                        infoEl.style.display = "block";
                        inputEl.classList.remove("is-invalid");
                        if (!state.widthAutofilled && !state.widthModified) {
                            const extractedWidth = extractWidthFromKodeFGRow(kode);
                            if (extractedWidth !== null) {
                                _applyAutofillWidthRow(row, extractedWidth);
                            }
                        }
                    }
                })
                .catch(err => {
                    if (err.name === 'AbortError') return; // sengaja di-abort, abaikan
                    console.error('API Error:', err);
                    messageEl.textContent = "Gagal menghubungi server.";
                    messageEl.style.display = "block";
                    inputEl.classList.add("is-invalid");
                })
                .finally(() => {
                    loadingEl.style.display = "none";
                    saveBtn.disabled = !isValid;
                });
        }

        function handleLengthInput(inputEl) {
            const kode = inputEl.closest('tr').querySelector('input[name="kode_baru_fg[]"]').value.trim();
            const valLength = Number.parseFloat(String(inputEl.value).trim().replace(',', '.'));

            const lengthEl = inputEl.closest("td").querySelector(".info-message");
            const messageEl = inputEl.closest("td").querySelector(".validation-message");

            const tr = inputEl.closest('tr');
            const uomSelect = tr.querySelector('select[name="alt_uom[]"]');
            const messageUOM = tr.querySelector('.message-uom');
            const messageInfoUOM = tr.querySelector('.message-info');

            const rawValue = inputEl.closest('tr').querySelector('select[name="alt_uom[]"]').value.trim();
            const rowIndex = tr.querySelector("input[name='item_number[]']").value.trim();

            const saveBtn = document.getElementById("saveButton");
            lengthEl.style.display = "none";
            messageEl.style.display = "none";

            inputEl.classList.remove("is-invalid");

            if (!kode) {
                messageEl.textContent = "Kode FG masih belum terisi!!";
                messageEl.style.display = "block";
                inputEl.classList.add("is-invalid");
                return;
            }

            const lastKode = kode.slice(-1).toUpperCase();
            const found = lengthInp.find(item => item.kode === lastKode);

            if (isNaN(valLength)) {
                messageEl.textContent = `Length wajib diisi!`;
                messageEl.style.color = "red";
                messageEl.style.display = "block";
                return;
            }

            if (!found) {
                lengthEl.textContent = `Kode akhir '${lastKode}' tidak ditemukan di range`;
                lengthEl.style.color = "red";
                lengthEl.style.display = "block";
                return;
            }

            if (valLength < found.panjang_min || valLength > found.panjang_max) {
                lengthEl.textContent =
                    `Range nilai harus antara ${found.panjang_min} - ${found.panjang_max} untuk kode '${lastKode}'`;
                lengthEl.style.color = "red";
                lengthEl.style.display = "block";
                inputEl.classList.add("is-invalid");
                saveBtn.disabled = true;
                return;
            }

            if (tempUom.length > 0) {
                const existingItem = tempUom.find(item => item.idx === rowIndex);
                if (existingItem) {
                    tempUom = tempUom.filter(item => item.idx !== rowIndex);
                    console.log('Length berubah, hapus dari tempUom untuk idx:', rowIndex);
                    console.log('TempUom setelah dihapus:', tempUom);
                }
            }

            if (uomSelect) {
                uomSelect.value = "";
            }

            if (messageUOM) {
                messageUOM.style.display = "none";
                messageUOM.textContent = "";
            }

            if (messageInfoUOM) {
                messageInfoUOM.style.display = "none";
                messageInfoUOM.textContent = "";
            }

            const isValid = !(valLength < found.panjang_min || valLength > found.panjang_max);
            if (!isValid) {
                saveBtn.disabled = true;
            } else {
                saveBtn.disabled = false;
            }
        }

        function getUomBase(val) {
            val = val.toUpperCase();
            if (/^RL[0-9A-Z]$/.test(val)) return 'ROL';
            if (/^BL[0-9]$/.test(val)) return 'BAL';
            if (/^PL[0-9]$/.test(val)) return 'PAL';
            if (/^CS[0-9]$/.test(val)) return 'CAS';
            if (/^BX[0-9]$/.test(val)) return 'BOX';

            return val;
        }

        function handleWidthInput(inputEl) {
            const row = inputEl.closest('tr');
            const state = getRowState(row);
            if (state.widthAutofilled) {
                state.widthModified = true;
                const hiddenFlag = row.querySelector('input[name="width_modified[]"]');
                if (hiddenFlag) hiddenFlag.value = '1';
            }
            let val = inputEl.value.replace(/[^0-9.]/g, '');
            const parts = val.split('.');
            if (parts.length > 2) {
                val = parts[0] + '.' + parts.slice(1).join('');
            }
            inputEl.value = val;
        }

        function editWidthField(btn) {
            const td = btn.closest('td');
            const widthInput = td.querySelector('input[name="width[]"]');
            const row = btn.closest('tr');

            Swal.fire({
                icon: 'warning',
                title: 'Ubah Width?',
                html: 'Mengubah width secara manual dapat menyebabkan nilai <b>tidak sesuai format standar</b> dari kode material.<br><br>Lanjutkan?',
                showCancelButton: true,
                confirmButtonText: 'Ya, Edit',
                cancelButtonText: 'Batal',
                confirmButtonColor: '#f0ad4e',
                returnFocus: false, // Prevent restoring focus to the clicked Edit button
            }).then((result) => {
                if (result.isConfirmed) {
                    widthInput.removeAttribute('readonly');
                    widthInput.style.backgroundColor = '#fff9e6';
                    const state = getRowState(row);
                    state.widthModified = true;
                    const hiddenFlag = row.querySelector('input[name="width_modified[]"]');
                    if (hiddenFlag) hiddenFlag.value = '1';

                    // Focus with a small timeout to make sure it doesn't get blurred by Swal closing transitions
                    setTimeout(() => {
                        widthInput.focus();
                    }, 50);
                }
            });
        }

        function handleWidthBlur(inputEl) {
            const row = inputEl.closest('tr');
            const state = getRowState(row);
            const val = parseFloat(inputEl.value);

            const isEmpty = inputEl.value.trim() === '';
            const isZeroOrInvalid = !isEmpty && (isNaN(val) || val <= 0);

            if (isEmpty || isZeroOrInvalid) {
                // Kembalikan ke nilai default autofill
                if (state.autofilledWidthValue !== null && state.autofilledWidthValue !== undefined) {
                    inputEl.value = formatWidthRow(state.autofilledWidthValue);
                    if (state.autofilledWidthValue > 3500) {
                        state.widthModified = true;
                        const hiddenFlag = row.querySelector('input[name="width_modified[]"]');
                        if (hiddenFlag) hiddenFlag.value = '1';
                    } else {
                        state.widthModified = false;
                        const hiddenFlag = row.querySelector('input[name="width_modified[]"]');
                        if (hiddenFlag) hiddenFlag.value = '0';
                    }
                } else {
                    inputEl.value = '';
                    state.widthModified = false;
                    const hiddenFlag = row.querySelector('input[name="width_modified[]"]');
                    if (hiddenFlag) hiddenFlag.value = '0';
                }
            }

            const finalVal = parseFloat(inputEl.value);
            if (!isNaN(finalVal) && finalVal > 3.500) {
                inputEl.style.borderColor = 'red';
                Swal.fire({
                    title: 'Width Melebihi Batas!',
                    text: 'Nilai width maksimal 3,500 m.',
                    icon: 'error',
                    confirmButtonColor: '#028284'
                });
            } else {
                inputEl.style.borderColor = '';
            }

            // Kunci kembali setelah selesai edit jika user tidak sedang memodifikasinya
            if (!state.widthModified) {
                inputEl.setAttribute('readonly', true);
                inputEl.style.backgroundColor = '#e9ecef';
            }
        }

        function uomChecker(selectEl, rawValue) {
            var tableDetail = JSON.parse(`{!! json_encode($table_detail) !!}`);
            value = rawValue;
            const tr = selectEl.closest("tr");
            const rowIndex = tr.querySelector("input[name='item_number[]']").value.trim();
            const td = selectEl.closest("td");

            const width = tr.querySelector("input[name='width[]']");
            const weight = tr.querySelector("input[name='weight[]']");
            const topLoad = tr.querySelector("input[name='top_load[]']");
            const inpKode = tr.querySelector('input[name="kode_baru_fg[]"]');
            const saveBtn = document.getElementById("saveButton");

            const state = getRowState(tr);

            if (width) {
                if (state.widthAutofilled && !state.widthModified && state.autofilledWidthValue !== null) {
                    width.value = formatWidthRow(state.autofilledWidthValue);
                } else if (state.autofilledWidthValue !== null && state.autofilledWidthValue > 3500) {
                    width.value = formatWidthRow(state.autofilledWidthValue);
                } else {
                    width.value = '';
                }
                width.style.borderColor = "#d2d6da";
            }
            if (weight) {
                weight.value = '';
                weight.style.borderColor = "#d2d6da";
            }
            if (topLoad) {
                topLoad.value = '';
                topLoad.style.borderColor = "#d2d6da";
            }

            count = 0;
            loop = true;
            kode_baru_fg = tr.querySelector("input[name='kode_baru_fg[]']").value;
            var length = tr.querySelector("input[name='length[]']").value.trim();
            const messageElement = selectEl.nextElementSibling;

            let loadingEl = td.querySelector(".loading-message");
            if (!loadingEl) {
                loadingEl = document.createElement('div');
                loadingEl.className = 'loading-message';
                loadingEl.innerHTML = '<span class="spinner"></span><span>Sedang memuat data...</span>';
                td.appendChild(loadingEl);
            }

            const uomUpper = value.toUpperCase();
            const isEditable = (
                ["BAL", "BOX", "BX", "BL"].includes(uomUpper) ||
                /^BL[0-9A-Z]$/.test(uomUpper) ||
                /^BX[0-9A-Z]$/.test(uomUpper)
            );

            if (width) {
                // Width selalu readonly, edit hanya via tombol ✏️
                width.setAttribute("readonly", true);
                width.style.backgroundColor = '#e9ecef';
                const editBtn = width.closest('td')?.querySelector('.width-edit-btn');
                if (editBtn) editBtn.style.display = '';
            }

            [weight, topLoad].forEach(el => {
                if (el) {
                    if (isEditable) {
                        el.removeAttribute("readonly");
                    } else {
                        el.setAttribute("readonly", true);
                    }
                }
            });

            messageElement.style.display = "none";

            if (kode_baru_fg === undefined || kode_baru_fg === null) {
                messageElement.textContent = "Kode FG masih belum terisi!!";
                messageElement.style.color = "red";
                messageElement.style.display = "block";
                document.getElementById("saveButton").disabled = true;
                return;
            }
            if (length === undefined || length === null || isNaN(parseInt(length, 10))) {
                messageElement.textContent = "Length masih belum terisi!!";
                messageElement.style.color = "red";
                messageElement.style.display = "block";
                document.getElementById("saveButton").disabled = true;
                return;
            }

            if (isBoxOrBalFamily(rawValue)) {
                const isValid = validateBoxBalFieldsForRow(tr);
                if (!isValid) {
                    if (isValid) {
                        saveBtn.disabled = false;
                    }
                } else {
                    saveBtn.disabled = false;
                }
            }

            const url = @json(env('API_ALT_UOM')) + kode_baru_fg;

            loadingEl.style.display = "inline-flex";
            saveBtn.disabled = true;
            let keepSaveDisabled = false;

            fetch(url)
                .then(response => {
                    if (!response.ok) {
                        throw new Error(`HTTP error! status: ${response.status}`);
                    }
                    return response.json();
                })
                .then(data => {
                    const dataTable = data.ET_MARD.concat(tableDetail.map(item => ({
                        MANDT: '110',
                        MATNR: item.kode_baru_fg,
                        MEINH: item.alt_uom,
                        LAENG: item.length
                    })));

                    const combined = dataTable.filter(data => data.MATNR === kode_baru_fg);

                    if ((combined && Array.isArray(combined) && combined.length > 0) || (combined.length == 0 && tempUom
                            .length > 0)) {
                        while (loop) {
                            var result = [];

                            if (tempUom.length > 0) {
                                result = [
                                    ...combined.filter(item => item.MEINH === value && item.MATNR === kode_baru_fg),
                                    ...tempUom.filter(item => item.uom === value && item.kodefg === kode_baru_fg)
                                ];
                            } else {
                                result = combined.filter(item => item.MEINH === value);
                            }

                            var cekTemp = tempUom.find(item => item.idx === rowIndex);
                            if (cekTemp) {
                                tempUom = tempUom.filter(item => item.idx !== rowIndex);
                            }

                            if (result.length < 1) {
                                if (tempUom.length > 0) {
                                    const existingItem = tempUom.find(item => item.idx === rowIndex);
                                    if (existingItem) {
                                        existingItem.uom = value;
                                    } else {
                                        setSelectValue(value, selectEl);
                                        tempUom.push({
                                            'idx': rowIndex,
                                            'kodefg': kode_baru_fg,
                                            'uom': value,
                                            'length': length
                                        });
                                    }
                                } else {
                                    tempUom.push({
                                        'idx': rowIndex,
                                        'kodefg': kode_baru_fg,
                                        'uom': value,
                                        'length': length
                                    });
                                }

                                messageElement.style.display = "none";
                                if (document.getElementById("saveButton").disabled == false)
                                    document.getElementById("saveButton").disabled = false;
                                loop = false;
                                setSelectValue(value, selectEl);
                                return;
                            }

                            if (length == result[0].LAENG || tempUom.find(item => item.length === length && item
                                    .kodefg === kode_baru_fg)) {
                                messageElement.textContent = "Material Sudah ada dengan UOM " + result[0].MEINH;
                                messageElement.style.color = "red";
                                messageElement.style.display = "block";
                                document.getElementById("saveButton").disabled = true;
                                loop = false;
                                setSelectValue(value, selectEl);

                                saveBtn.disabled = true;
                                keepSaveDisabled = true;
                                return;
                            }

                            count++;

                            let suffix;
                            if (count >= 10 && count <= 35) {
                                suffix = String.fromCharCode(65 + (count - 10));
                                value = rawValue.substring(0, 1) + rawValue.substring(rawValue.length - 1) + suffix;
                            } else {
                                value = rawValue.substring(0, 1) + rawValue.substring(rawValue.length - 1) + count;
                            }
                        }
                    } else {
                        var cekTemp = tempUom.find(item => item.idx === rowIndex);
                        if (cekTemp) {
                            tempUom = tempUom.filter(item => item.idx !== rowIndex);
                        }
                        if (tempUom.length > 0) {
                            const existingItem = tempUom.find(item => item.idx === rowIndex);
                            if (existingItem) {
                                existingItem.uom = value;
                            } else {
                                setSelectValue(value, selectEl);
                                tempUom.push({
                                    'idx': rowIndex,
                                    'kodefg': kode_baru_fg,
                                    'uom': value,
                                    'length': length
                                });
                            }
                        } else {
                            tempUom.push({
                                'idx': rowIndex,
                                'kodefg': kode_baru_fg,
                                'uom': value,
                                'length': length
                            });
                        }
                    }
                })
                .catch(error => {
                    console.error('Error fetching data:', error);
                })
                .finally(() => {
                    loadingEl.style.display = "none";
                    if (!keepSaveDisabled) {
                        saveBtn.disabled = false;
                        const sb = document.getElementById("saveButton");
                        if (sb) sb.disabled = false;
                    }
                });

            inpKode.readOnly = true;
        }


        function setSelectValue(value, selectEl) {
            var tr = selectEl.closest("tr");
            var uomSelect = tr.querySelector('select[name="alt_uom[]"]');

            var optionExists = Array.from(uomSelect.options).some(option => option
                .value === value);

            if (!optionExists) {
                const newOption = document.createElement('option');
                newOption.value = value;
                newOption.textContent = value;
                newOption.hidden = true;
                uomSelect.appendChild(newOption);
            }

            uomSelect.value = value;

        }

        function copyItem(button) {
            const oldRow = button.closest('tr');

            const elements = oldRow.querySelectorAll('input, select, textarea');

            const allowedNames = [
                'kode_baru_fg[]',
                'id_mat_group[]',
                'customer[]',
                'product_name[]',
                'division[]',
                'mat_g1[]',
                'mat_g2[]',
                'mat_g3[]',
            ];

            const data = {};

            // Ambil semua value variabel yg berwarna merah
            const fg_kode = oldRow.querySelector('input[name="kode_baru_fg[]"]').value.trim();
            const mat_group = oldRow.querySelector('select[name="id_mat_group[]"]').value;
            const cstmr = oldRow.querySelector('input[name="customer[]"]').value;
            const pd_name = oldRow.querySelector('select[name="product_name[]"]').value;
            const divis = oldRow.querySelector('select[name="division[]"]').value;
            const mg1 = oldRow.querySelector('select[name="mat_g1[]"]').value;
            const mg2 = oldRow.querySelector('select[name="mat_g2[]"]').value;
            const mg3 = oldRow.querySelector('select[name="mat_g3[]"]').value;
            const lgt = oldRow.querySelector('input[name="length[]"]').value;
            const altUom = oldRow.querySelector('select[name="alt_uom[]"]').value;

            elements.forEach(el => {
                const name = el.name;
                if (!name || !allowedNames.includes(name)) return; // hanya field yang diizinkan

                if (el.type === 'checkbox') {
                    data[name] = el.checked;
                } else if (el.type === 'radio') {
                    if (el.checked) data[name] = el.value;
                } else {
                    data[name] = el.value;
                }
            });

            if (fg_kode == "" || mat_group == "" || cstmr == "" || pd_name == "" || divis == "" || mg1 == "" || mg2 == "" ||
                mg3 == "" || lgt == "" || lgt == 0 || altUom == "") {
                Swal.fire({
                    icon: 'warning',
                    title: 'Lengkapi dulu, ya!',
                    text: 'Harap isi semua field yang bertanda merah.',
                    confirmButtonText: 'Oke',
                    showConfirmButton: true,
                });
            } else {
                addCopiedRow(data);
            }

        }

        function addCopiedRow(copiedData) {
            jumlah_item++;
            id_item += 10;

            // Template baris baru (seperti yang sudah kamu buat)
            var newRow = $(
                `
                        <tr class="listmaterial-row">
                            <td scope="row" class="freeze-col-action">
                                <button class="btn btn-danger delete-item" type="button">X</button> 
                                <button class="btn btn-info copy-item" type="button" onclick="copyItem(this)"><i class="fas fa fa-copy"></i></button>
                                <input type="hidden" name="item_number[]" value="` + id_item + `">
                            </td>
                                    <td scope="row" class="freeze-col-kode">
                                        <div class="input-group code_material" style="width:265px">
                                            <input type="text" class="form-control upper notspace kode_baru_fg" id="kode_baru_fg[]" name="kode_baru_fg[]" placeholder="Code Material" aria-describedby="code-mat" maxlength="29" oninput="handleMaterialInput(this)">
                                            </div>
                                            <p class="text-danger text-xs mt-1 validation-message" style="display:none;"></p>
                                            <p class="text-success text-xs mt-1 info-message data-info" style="display:none;"></p>
                                           
                                    </td>

                                    <td scope="row">
                                        <select name="id_mat_group[]" class="form-select select2_init" id="id_mat_group[]" style="width: 150px;">
                                        </select>
                                         
                                    </td>

                                    <td scope="row"><input type="text" class="form-control upper" name="customer[]" placeholder="Customer" style="width: 200px; text-transform:uppercase;" id="customer[]" oninput="validateCustomerMultiple(this)"></td>

                                    <td scope="row">
                                        <select name="product_name[]" class="form-select select2_init" id="product_name[]" style="width: 180px;">
                                        </select>
                                    </td>

                                    <td scope="row">
                                        <select name="division[]" class="form-select select2_init" id="division[]" style="width: 150px;">
                                        </select>
                                    </td>
                                    <td scope="row">
                                        <select name="mat_g1[]" class="form-select select2_init" id="mat_g1[]" style="width: 150px;">
                                        </select>
                                    </td>
                                        <td scope="row">
                                        <select name="mat_g2[]" class="form-select select2_init" id="mat_g2[]" style="width: 150px;">
                                        </select>
                                    </td>
                                        <td scope="row">
                                        <select name="mat_g3[]" class="form-select select2_init" id="mat_g3[]" style="width: 150px;">
                                        </select>
                                    </td>

                                    <td scope="row"><input type="number" class="form-control" name="length[]"
                                        oninput="handleLengthInput(this)" max="9999999999" style="width: 100px;" required min="0.01" step="0.01">
                                       <p class="text-danger text-xs mt-1 validation-message" style="display:none;"></p>
                                            <p class="text-success text-xs mt-1 info-message data-info" style="display:none;"></p>
                                        </td>

                                    <td scope="row">
                                        <select class="form-select" name="alt_uom[]" id="alt_uom" onchange="uomChecker(this, this.value)" style="width: 100px;">
                                        </select>
                                        <p class="text-danger text-xs pt-1 message-uom" style="display:none;"></p>
                                          <p class="text-success text-xs mt-1 message-info data-info" style="display:none;"></p>
                                    </td>

                                    <td scope="row">
                                        <div class="d-flex align-items-center gap-1">
                                            <input type="text" class="form-control decimal-input" name="width[]"
                                                max="9999999999" style="width: 90px;" placeholder="Cth: 0.272" readonly
                                                oninput="handleWidthInput(this)"
                                                onblur="handleWidthBlur(this)">
                                            <button type="button" class="btn btn-sm btn-outline-warning width-edit-btn" title="Edit Width" onclick="editWidthField(this)">✏️</button>
                                        </div>
                                        <input type="hidden" name="width_modified[]" value="0">
                                        <p class='text-secondary text-xs pt-1' style='font-size:10px;'>*) Satuan Meter.<br>Gunakan (.), cth: 0.272</p>
                                    </td>
                                                                        
                                    <td scope="row"><input type="text" class="form-control decimal-input" name="weight[]"
                                        max="9999999999" style="width: 100px;" required  readonly></td>
                                    
                                    <td scope="row"><input type="top_load" class="form-control" name="top_load[]"
                                        max="9999999999" style="width: 100px;" required  readonly></td>
                                    
                                    <td scope="row"><input type="text" class="form-control" name="keterangan[]" placeholder="Keterangan" style="width: 200px;" id="keterangan[]"></td>

                            </tr>
                        <style>
                            .data-info {
                                max-height: 80px;
                                overflow-y: auto;
                                white-space: pre-wrap;
                                word-break: break-word;
                                background-color: #f7f7f7;
                                padding: 4px 8px;
                                border: 1px dashed #ccc;
                                border-radius: 4px;
                                max-width: 600px;
                            }
                            </style>
                        `);
            // Append semua dropdown option seperti biasa
            // add value dropdown type id_mat_group
            var id_mat_group = newRow.find("select[name='id_mat_group[]']");
            id_mat_groupSelect.forEach(function(type) {
                id_mat_group.append(

                    `<option value="" selected disabled hidden>Pilih opsi</option>
                    <option value="${type.value}">${type.value} - ${type.name}</option>`
                );
            });

            // add value dropdown type product_name
            var product_name = newRow.find("select[name='product_name[]']");
            product_nameSelect.forEach(function(type) {
                product_name.append(
                    `<option value="" selected disabled hidden>Pilih opsi</option>
                    <option value="${type.name}">${type.name}</option>`
                );
            });

            // add value dropdown type division
            var division = newRow.find("select[name='division[]']");
            divisionSelect.forEach(function(type) {
                division.append(
                    `<option value="" selected disabled hidden>Pilih opsi</option>
                    <option value="${type.value}">${type.value} - ${type.name}</option>`
                );
            });

            // add value dropdown type mat_g1
            var mat_g1 = newRow.find("select[name='mat_g1[]']");
            mat_g1Select.forEach(function(type) {
                mat_g1.append(
                    `<option value="" selected disabled hidden>Pilih opsi</option>
                    <option value="${type.value}">${type.value} - ${type.name}</option>`
                );
            });

            // add value dropdown type mat_g2
            var mat_g2 = newRow.find("select[name='mat_g2[]']");
            mat_g2Select.forEach(function(type) {
                mat_g2.append(
                    `<option value="" selected disabled hidden>Pilih opsi</option>
                    <option value="${type.value}">${type.value} - ${type.name}</option>`
                );
            });

            // add value dropdown type mat_g3
            var mat_g3 = newRow.find("select[name='mat_g3[]']");
            mat_g3Select.forEach(function(type) {
                mat_g3.append(
                    `<option value="" selected disabled hidden>Pilih opsi</option>
                    <option value="${type.value}">${type.value} - ${type.name}</option>`
                );
            });

            // add value dropdown type alt_uom
            var alt_uom = newRow.find("select[name='alt_uom[]']");
            alt_uomSelect.forEach(function(type) {
                alt_uom.append(
                    `<option value="" selected disabled hidden>Pilih opsi</option>
                    <option value="${type.value}">${type.name}</option>`
                );
            });

            // add value dropdown type status
            var status = newRow.find("select[name='status[]']");
            statusSelect.forEach(function(type) {
                status.append(
                    `<option value="" selected disabled hidden>Pilih opsi</option>
                    <option value="${type.value}">${type.name}</option>`
                );
            });

            // Masukkan value ke dalam input/select di baris baru
            setTimeout(function() {
                const state = getRowState(newRow[0]);
                state.isCopied = true;
                state.isCopiedRow = true;

                Object.keys(copiedData).forEach(function(name) {
                    const selector = `[name="${name}"]`;
                    const input = newRow.find(selector);

                    if (input.length) {
                        if (input.attr('type') === 'checkbox') {
                            input.prop('checked', copiedData[name]);
                        } else {
                            input.val(copiedData[name]);
                        }
                        // Trigger event supaya function seperti handleMaterialInput dijalankan
                        input.trigger('input').trigger('change');

                        // Jika pakai Select2, perlu trigger change
                        // if (input.hasClass('select2_init')) {
                        //     input.trigger('change');
                        // }
                    }
                });
            }, 10); // kasih delay sedikit untuk memastikan dropdown sudah ter-render

            // Fungsi hapus baris
            newRow.find('.delete-item').on('click', function() {
                const $btn = $(this);
                const $row = $btn.closest('tr');
                const item_no = $row.find('input[name="item_number[]"]').val(); // ambil dulu sebelum hapus
                const kode_hapus = $row.find('input[name="kode_baru_fg[]"]')
                    .val(); // ini untuk reset alt_uom baris lain
                Swal.fire({
                    icon: 'warning',
                    title: 'Hapus item?',
                    text: 'Harap isi ulang UoM untuk material yang sama jika masih ada di daftar.',
                    showCancelButton: true,
                    confirmButtonText: 'OK',
                    cancelButtonText: 'Batal'
                }).then((result) => {
                    if (result.isConfirmed) {
                        // kode asli kamu, urutan & variabel tetap sama
                        $row.remove();
                        jumlah_item--;
                        // tempUom = tempUom.filter(item => item.idx !== item_no);
                        tempUom = tempUom.filter(item => item.kodefg !== kode_hapus);
                        $('#list-material input[name="kode_baru_fg[]"]').trigger('input');

                        $('#list-material tbody tr').each(function() {
                            const $r = $(this);
                            const kode_skrg = $r.find('input[name="kode_baru_fg[]"]').val();
                            if (kode_skrg === kode_hapus) {
                                $r.find('select[name="alt_uom[]"]').val(""); // reset select
                                // kalau perlu memicu listener lain:
                                // $r.find('select[name="alt_uom[]"]').trigger('change');
                            }
                        });
                    }
                    // jika batal: tidak melakukan apa-apa
                });
            });

            // Tambahkan baris ke tabel
            $('#table-data').append(newRow);

            // Reinit select2 (asumsinya kamu punya fungsi reinitAllSelect2)
            reinitAllSelect2();
        }

        // Shortcut: Ctrl + S or Cmd + S
        document.addEventListener("keydown", function(e) {
            if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "s") {
                e.preventDefault(); // Mencegah aksi default browser (save page)
                const saveButton = document.getElementById("saveButton");
                if (saveButton) saveButton.click(); // Trigger klik tombol
            }
        });

        $(document).on('input', 'input[name="customer[]"]', function() {
            this.value = this.value.toUpperCase();
            validateCustomerMultiple(this);
        });

        function checkIfAnyRowValid() {
            const rows = document.querySelectorAll("#list-material tbody tr");
            let anyValid = false;

            rows.forEach(tr => {
                const kode = tr.querySelector("input[name='kode_baru_fg[]']");
                const group = tr.querySelector("select[name='id_mat_group[]']");
                const pname = tr.querySelector("input[name='product_name[]']");
                const g1 = tr.querySelector("input[name='mat_g1[]']");
                const g2 = tr.querySelector("input[name='mat_g2[]']");

                // Cek apakah semua field wajib terisi di baris tersebut
                if (
                    kode?.value.trim() &&
                    group?.value.trim() &&
                    pname?.value.trim() &&
                    g1?.value.trim() &&
                    g2?.value.trim()
                ) {
                    anyValid = true;
                }
            });

            // Enable/Disable tombol save
            const saveButton = document.getElementById("saveButton");
            if (saveButton) saveButton.disabled = !anyValid;
        }

        document.addEventListener("DOMContentLoaded", function() {
            checkIfAnyRowValid();

            // Pasang listener ke semua input terkait
            document.querySelectorAll(
                "input[name='kode_baru_fg[]'], select[name='id_mat_group[]'], input[name='product_name[]'], input[name='mat_g1[]'], input[name='mat_g2[]']"
            ).forEach(input => {
                input.addEventListener("input", checkIfAnyRowValid);
                input.addEventListener("change", checkIfAnyRowValid);
            });
        });

        document.getElementById("saveButton").addEventListener("click", function(e) {
            e.preventDefault();

            let isValid = true;
            let errorMessages = [];
            let firstInvalidEl = null;

            const rows = document.querySelectorAll("#list-material tbody tr");

            rows.forEach((tr, index) => {
                // Ambil field
                const kode = tr.querySelector("input[name='kode_baru_fg[]']");
                const group = tr.querySelector("select[name='id_mat_group[]']");
                const pname = tr.querySelector("select[name='product_name[]']");
                const g1 = tr.querySelector("select[name='mat_g1[]']");
                const g2 = tr.querySelector("select[name='mat_g2[]']");
                const g3 = tr.querySelector("select[name='mat_g3[]']");
                const length = tr.querySelector("input[name='length[]']");

                const uom = tr.querySelector("select[name='alt_uom[]']");
                const width = tr.querySelector("input[name='width[]']");
                const weight = tr.querySelector("input[name='weight[]']");
                const topLoad = tr.querySelector("input[name='top_load[]']");

                // Reset warna dulu
                [kode, group, pname, g1, g2, uom, width, weight, topLoad].forEach(el => {
                    if (el) el.classList.remove("is-invalid");
                });

                const missingFields = [];

                // Validasi wajib
                if (!kode || !kode.value.trim()) {
                    isValid = false;
                    missingFields.push("Kode FG");
                    if (kode) kode.classList.add("is-invalid");
                    if (!firstInvalidEl) firstInvalidEl = kode;
                }
                if (!group || !group.value.trim()) {
                    isValid = false;
                    missingFields.push("Group");
                    if (group) group.classList.add("is-invalid");
                    if (!firstInvalidEl) firstInvalidEl = group;
                }
                if (!pname || !pname.value.trim()) {
                    isValid = false;
                    missingFields.push("Product Name");
                    if (pname) pname.classList.add("is-invalid");
                    if (!firstInvalidEl) firstInvalidEl = pname;
                }
                if (!g1 || !g1.value.trim()) {
                    isValid = false;
                    missingFields.push("Material G1");
                    if (g1) g1.classList.add("is-invalid");
                    if (!firstInvalidEl) firstInvalidEl = g1;
                }
                if (!g2 || !g2.value.trim()) {
                    isValid = false;
                    missingFields.push("Material G2");
                    if (g2) g2.classList.add("is-invalid");
                    if (!firstInvalidEl) firstInvalidEl = g2;
                }

                if (!g3 || !g3.value.trim()) {
                    isValid = false;
                    missingFields.push("Material G3");
                    if (g3) g3.classList.add("is-invalid");
                    if (!firstInvalidEl) firstInvalidEl = g3;
                }

                const customer = tr.querySelector("input[name='customer[]']");
                if (!customer || !customer.value.trim()) {
                    isValid = false;
                    missingFields.push("Customer");
                    if (customer) customer.classList.add("is-invalid");
                    if (!firstInvalidEl) firstInvalidEl = customer;
                } else if (customer.value.length > 20) {
                    isValid = false;
                    missingFields.push("Customer (maksimal 20 karakter)");
                    if (customer) customer.classList.add("is-invalid");
                    if (!firstInvalidEl) firstInvalidEl = customer;
                }

                if (!length || !length.value.trim()) {
                    isValid = false;
                    missingFields.push("Length");
                    if (length) length.classList.add("is-invalid");
                    if (!firstInvalidEl) firstInvalidEl = length;
                } else {
                    const valLength = Number.parseFloat(String(length.value).trim().replace(',', '.'));
                    const kodeValue = kode?.value?.trim() || "";

                    if (kodeValue) {
                        const lastKode = kodeValue.slice(-1).toUpperCase();
                        const found = lengthInp.find(item => item.kode === lastKode);

                        if (isNaN(valLength) || valLength < 0.01) {
                            isValid = false;
                            missingFields.push("Length (minimal 0.01 dan tidak boleh 0)");
                            if (length) length.classList.add("is-invalid");
                            if (!firstInvalidEl) firstInvalidEl = length;
                        } else if (!found) {
                            isValid = false;
                            missingFields.push(`Length (kode '${lastKode}' tidak ditemukan di master)`);
                            if (length) length.classList.add("is-invalid");
                            if (!firstInvalidEl) firstInvalidEl = length;
                        } else if (valLength < found.panjang_min || valLength > found.panjang_max) {
                            isValid = false;
                            missingFields.push(
                                `Length (harus ${found.panjang_min}-${found.panjang_max} untuk kode '${lastKode}')`
                            );
                            if (length) length.classList.add("is-invalid");
                            if (!firstInvalidEl) firstInvalidEl = length;
                        }
                    }
                }

                if (!uom || !uom.value.trim()) {
                    isValid = false;
                    missingFields.push("UOM");
                    if (uom) uom.classList.add("is-invalid");
                    if (!firstInvalidEl) firstInvalidEl = uom;
                }

                // Validasi BAL/BOX/BX*/BL*
                const uomVal = uom?.value?.toUpperCase() || "";
                const isSpecialUOM = ["BAL", "BOX", "BX", "BL"].includes(uomVal) || /^BX[0-9A-Z]$/.test(
                    uomVal) || /^BL[0-9A-Z]$/.test(uomVal);

                if (isSpecialUOM) {
                    if (!width || !width.value.trim()) {
                        isValid = false;
                        missingFields.push("Width");
                        if (width) width.classList.add("is-invalid");
                        if (!firstInvalidEl) firstInvalidEl = width;
                    }
                    if (!weight || !weight.value.trim()) {
                        isValid = false;
                        missingFields.push("Weight");
                        if (weight) weight.classList.add("is-invalid");
                        if (!firstInvalidEl) firstInvalidEl = weight;
                    }
                    if (!topLoad || !topLoad.value.trim()) {
                        isValid = false;
                        missingFields.push("Top Load");
                        if (topLoad) topLoad.classList.add("is-invalid");
                        if (!firstInvalidEl) firstInvalidEl = topLoad;
                    }
                }

                if (missingFields.length > 0) {
                    errorMessages.push(`Baris ${index + 1}: ${missingFields.join(", ")}`);
                }
            });

            // Jika tidak valid, tampilkan alert
            if (!isValid) {
                Swal.fire({
                    icon: 'error',
                    title: 'Validasi Gagal!',
                    html: `Mohon lengkapi data berikut:<br><ul style="text-align:left;">` +
                        errorMessages.map(msg => `<li>${msg}</li>`).join('') +
                        `</ul>`
                });

                if (firstInvalidEl) {
                    firstInvalidEl.focus();
                }

                return;
            }

            document.querySelectorAll('input[name="width[]"]').forEach(function(widthEl) {
                if (widthEl.value) {
                    widthEl.value = widthEl.value.replace(/,/g, '.');
                }
            });

            const widthInputs = document.querySelectorAll('input[name="width[]"]');
            for (let i = 0; i < widthInputs.length; i++) {
                const wInput = widthInputs[i];
                if (!wInput.value) continue;
                const parsedW = parseFloat(wInput.value);
                if (!isNaN(parsedW) && parsedW > 3.500) {
                    Swal.fire({
                        title: 'Width Tidak Valid!',
                        text: `Nilai width pada baris ${i + 1} maksimal 3,500 m.`,
                        icon: 'error',
                        confirmButtonColor: '#028284'
                    });
                    wInput.style.borderColor = 'red';
                    wInput.scrollIntoView({ behavior: 'smooth', block: 'center' });
                    return;
                } else {
                    wInput.style.borderColor = '';
                }
            }

            let msg = `
                <div style="font-size: 0.95em; line-height: 1.5; color: #555; text-align: left;">
                    <p style="margin-bottom: 12px; text-align: center;">
                        Item/Material yang telah berhasil ditambahkan <br><strong style="color: #dc3545;">TIDAK DAPAT DIUBAH KEMBALI</strong> pada bagian berikut:
                    </p>
                    <div style="background-color: #fff5f5; border: 1px solid #ffc9c9; border-left: 4px solid #dc3545; padding: 12px 15px; margin-bottom: 15px; border-radius: 4px;">
                        <ul style="margin: 0; padding-left: 20px; color: #dc3545; font-weight: 600; font-size: 0.95em; line-height: 1.6;">
                            <li>Kode FG</li>
                            <li>ID Material Group</li>
                            <li>Product Name</li>
                            <li>Division</li>
                            <li>Length</li>
                            <li>UOM</li>
                        </ul>
                    </div>
                    <p style="margin-bottom: 0; font-weight: 500; color: #333; text-align: center;">
                        Mohon pastikan kembali data yang Anda input sudah benar sebelum menyimpan.
                    </p>
                </div>
            `;

            // Submit form jika valid dan setelah konfirmasi
            Swal.fire({
                title: 'Apakah Anda yakin?',
                html: msg,
                icon: 'question',
                showCancelButton: true,
                confirmButtonText: 'Ya, Lanjutkan',
                cancelButtonText: 'Batal',
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33'
            }).then(result => {
                if (result.isConfirmed) {
                    document.getElementById("{{ $dmenu }}-form").submit();
                }
            });
        });

        function refreshUom() {
            $('#list-material tbody tr').each(function(index) {
                let row = $(this);
                let inputNama = row.find('input[name="kode_baru_fg[]"]');
                inputNama.focus();
                // row.find('select, input').each(function() {
                //     // trigger event onchange agar function-functionnya jalan lagi
                //     $(this).trigger('change');
                // });

                handleMaterialInput(row);
                // handleLengthInput(row);
                // uomChecker(row, row.value);
            });
        }

        function isBoxOrBalFamily(uomValue) {
            if (!uomValue) return false;
            if (uomValue === "BOX" || uomValue === "BAL" || uomValue === "BX" || uomValue === "BL") return true;
            return /^B[LX]\w+$/.test(uomValue);
        }

        function validateBoxBalFieldsForRow(tr) {
            const uomSelect = tr.querySelector('select[name="alt_uom[]"]');
            const topLoadInput = tr.querySelector('input[name="top_load[]"]');
            const widthInput = tr.querySelector('input[name="width[]"]');
            const weightInput = tr.querySelector('input[name="weight[]"]');
            const saveButton = document.getElementById("saveButton");

            if (!uomSelect) return true;

            const uomValue = uomSelect.value;

            if (isBoxOrBalFamily(uomValue)) {
                let isValid = true;
                let errorMessages = [];

                // Validasi Top Load
                if (!topLoadInput || !topLoadInput.value || parseFloat(topLoadInput.value) < 1) {
                    isValid = false;
                    errorMessages.push("Top Load");
                    if (topLoadInput) {
                        topLoadInput.style.borderColor = "red";
                    }
                } else if (topLoadInput) {
                    topLoadInput.style.borderColor = "#d2d6da";
                }

                if (!widthInput || !widthInput.value || parseFloat(widthInput.value) <= 0) {
                    isValid = false;
                    errorMessages.push("Width");
                    if (widthInput) {
                        widthInput.style.borderColor = "red";
                    }
                } else if (widthInput) {
                    widthInput.style.borderColor = "#d2d6da";
                }

                if (!weightInput || !weightInput.value || parseFloat(weightInput.value) <= 0) {
                    isValid = false;
                    errorMessages.push("Weight");
                    if (weightInput) {
                        weightInput.style.borderColor = "red";
                    }
                } else if (weightInput) {
                    weightInput.style.borderColor = "#d2d6da";
                }

                const td = uomSelect.closest('td');
                let errorElement = td.querySelector('.box-bal-error');
                if (!isValid) {
                    if (!errorElement) {
                        errorElement = document.createElement('div');
                        errorElement.className = 'box-bal-error';
                        errorElement.style.color = 'red';
                        errorElement.style.fontSize = '12px';
                        errorElement.style.marginTop = '5px';
                        td.appendChild(errorElement);
                    }
                    errorElement.style.display = 'block';
                } else {
                    if (errorElement) {
                        errorElement.style.display = 'none';
                    }
                }

                return isValid;
            } else {
                if (topLoadInput) topLoadInput.style.borderColor = "#d2d6da";
                if (widthInput) widthInput.style.borderColor = "#d2d6da";
                if (weightInput) weightInput.style.borderColor = "#d2d6da";

                const td = uomSelect.closest('td');
                const errorElement = td?.querySelector('.box-bal-error');
                if (errorElement) {
                    errorElement.style.display = 'none';
                }

                return true;
            }
        }

        $(document).on('input', 'input[name="top_load[]"], input[name="width[]"], input[name="weight[]"]', function() {
            const tr = this.closest('tr');
            const uomSelect = tr.querySelector('select[name="alt_uom[]"]');
            const uomValue = uomSelect?.value;

            if (isBoxOrBalFamily(uomValue)) {
                validateBoxBalFieldsForRow(tr);
            }
        });

    </script>
@endsection