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

@push('css')
<style>
    .bg-danger-light {
        background-color: rgba(220, 53, 69, 0.12) !important;
    }
    @keyframes pulse {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.08); }
    }
    .animate-pulse {
        animation: pulse 2s infinite ease-in-out;
    }
    .border-secondary-soft {
        border-color: rgba(108, 117, 125, 0.2) !important;
    }
</style>
@endpush

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

    @php
        // fallback alias dari controller
        $komposisi = $komposisi ?? ($list ?? null);
        $details = $details ?? ($detail_rows ?? []);

        use Illuminate\Support\Facades\DB;

        // Datalist kategori
        $kategoriList = DB::table('mst_kategori')
            ->orderBy('kategori')
            ->pluck('kategori')
            ->map(fn($v) => trim($v))
            ->unique(fn($v) => mb_strtolower($v))
            ->sort()
            ->values();

        // normalizer
        $norm = fn($s) => mb_strtolower(preg_replace('/\s+/u', ' ', trim((string) $s)));

        // Pastikan $details berupa koleksi object + FILTER FES | SAP Core
        $detailsCol = collect($details)
            ->map(fn($r) => is_array($r) ? (object) $r : $r)
            ->filter(fn($r) => !($norm($r->tipe ?? '') === 'fes' && $norm($r->layer ?? '') === 'sap core'));

        // Urutkan by id ASC bila ada data, jika tidak ada → biarkan kosong (atau fallback sendiri)
        $rowsForEdit = $detailsCol->isNotEmpty()
            ? $detailsCol->sortBy(fn($r) => is_numeric($r->id ?? null) ? (int) $r->id : PHP_INT_MAX)->values()
            : collect([]);

        // ===== Helper display/raw layer =====
        // Simpan (RAW): FES + "Glue (C-Fold)" -> "Glue"
        $rawLayer = function ($tipe, $layer) use ($norm) {
            if ($norm($tipe) === 'fes' && preg_match('/^glue\s*\(?\s*c[-–—]?\s*fold\s*\)?$/iu', (string) $layer)) {
                return 'Glue';
            }
            return (string) ($layer ?? '');
        };
        // Tampil (DISPLAY): FES + "Glue" -> "Glue (C-Fold)"
        $displayLayer = function ($tipe, $layer) use ($norm, $rawLayer) {
            $t = $norm($tipe ?? '');
            $raw = $rawLayer($tipe, $layer);
            if ($t === 'fes' && strcasecmp($raw, 'Glue') === 0) {
                return 'Glue (C-Fold)';
            }
            return (string) ($layer ?? $raw);
        };
    @endphp

    <div class="container-fluid py-4">
        <form role="form" method="POST" action="{{ url($url_menu . '/' . encrypt($komposisi->id)) }}"
            id="{{ $dmenu }}-form">
            @csrf
            @method('PUT')

            {{-- ACTION BAR --}}
            <div class="card shadow-sm mb-4 d-print-none">
                <div class="card-body py-3">
                    <div class="d-flex align-items-center gap-2 flex-wrap mb-0">
                        <button type="button" class="btn btn-secondary d-inline-flex align-items-center mb-0"
                            onclick="history.back()">
                            <i class="fas fa-circle-left me-1"></i>
                            <span class="fw-bold">Kembali</span>
                        </button>

                        <button type="submit" class="btn btn-primary d-inline-flex align-items-center mb-0" id="btnSave"
                            data-shortcut="save confirm">
                            <i class="fas fa-floppy-disk me-1"></i>
                            <span>Update</span>
                        </button>
                    </div>
                </div>
            </div>

            {{-- CARD HEADER --}}
            <div class="card mb-4">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">Header Komposisi</h5>
                </div>
                <div class="card-body">
                    <div class="row">

                        <div class="form-group">
                            <label>Nama Customer</label>
                            <input type="text" class="form-control" name="nama"
                                value="{{ old('nama', $komposisi->nama ?? '') }}" required>
                        </div>

                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Material SAP</label>
                                <input type="text" class="form-control" name="matnr_sap"
                                    value="{{ old('matnr_sap', $komposisi->matnr_sap ?? '') }}">
                            </div>
                            <div class="form-group">
                                <label>Material FES</label>
                                <input type="text" class="form-control" name="matnr_fes"
                                    value="{{ old('matnr_fes', $komposisi->matnr_fes ?? '') }}">
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Width SAP</label>
                                <input type="text" class="form-control" name="width_sap"
                                    value="{{ old('width_sap', $komposisi->width_sap ?? '') }}" required>
                            </div>
                            <div class="form-group">
                                <label>Width FES</label>
                                <input type="text" class="form-control" name="width_fes"
                                    value="{{ old('width_fes', $komposisi->width_fes ?? '') }}" required>
                            </div>
                        </div>

                    </div>

                    <div class="row mt-1">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>GSM SAP</label>
                                <input type="text" class="form-control" name="gsm_sap"
                                    value="{{ old('gsm_sap', $komposisi->gsm_sap ?? '') }}" readonly>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>GSM FES</label>
                                <div class="position-relative">
                                    <input type="text" class="form-control pe-5" name="gsm_fes" id="gsm_fes"
                                        value="{{ old('gsm_fes', $komposisi->gsm_fes ?? '') }}" readonly
                                        style="transition: all 0.2s ease;">
                                    <button class="btn btn-link position-absolute end-0 top-50 translate-middle-y text-danger mb-0 px-3 py-2" 
                                            type="button" id="btn-unlock-gsm-fes" title="Unlock GSM FES" style="border: none; background: ; z-index: 10;">
                                        <i class="fas fa-lock text-sm"></i>
                                    </button>
                                </div>
                                <input type="hidden" name="is_gsm_fes_unlocked" id="is_gsm_fes_unlocked" value="0">
                                <div id="gsm-fes-original-info" class="mt-2 d-none transition-all">
                                    <span class="badge bg-light text-dark border border-secondary-soft py-2 px-3 fw-normal" style="font-size: 0.85rem; border-radius: 6px;">
                                        <i class="fas fa-calculator me-1 text-danger"></i> GSM FES Aktual : <strong class="text-danger" id="gsm-fes-original-val"></strong>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- CARD DETAIL --}}
            <div class="card mb-4">
                <div class="card-header d-flex align-items-center justify-content-between">
                    <h5 class="mb-0">Detail Komposisi</h5>
                    <div class="d-print-none">
                        <button type="button" class="btn btn-outline-primary btn-sm" id="btnAddRow">
                            <i class="fas fa-plus me-1"></i> Tambah Baris
                        </button>
                    </div>
                </div>
                <div class="card-body table-responsive">
                    <datalist id="kategoriOptions">
                        @foreach ($kategoriList as $k)
                            <option value="{{ e($k) }}"></option>
                        @endforeach
                    </datalist>

                    <table class="text-center table table-bordered excel-table" id="detailTable">
                        <thead style="background-color:#b8ecec">
                            <tr>
                                <th style="width:20%">Tipe</th>
                                <th style="width:50%">Kategori</th>
                                <th style="width:20%">GSM</th>
                                <th style="width:10%" class="d-print-none">Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            @php
                                // Kalau ada data existing → render dari DB
                                // Kalau kosong → default 6 baris (4 SAP + 2 FES)
                                $hasRows = $rowsForEdit->isNotEmpty();
                                $defaults = ['sap', 'sap', 'sap', 'sap', 'fes', 'fes'];
                            @endphp

                            @if ($hasRows)
                                @foreach ($rowsForEdit as $row)
                                    <tr>
                                        <td>
                                            <select name="tipe[]" class="form-select tipe-select" required>
                                                <option value="" hidden>Pilih…</option>
                                                <option value="sap"
                                                    {{ strcasecmp($row->tipe ?? '', 'sap') === 0 ? 'selected' : '' }}>SAP
                                                </option>
                                                <option value="fes"
                                                    {{ strcasecmp($row->tipe ?? '', 'fes') === 0 ? 'selected' : '' }}>FES
                                                </option>
                                            </select>
                                            <div class="invalid-feedback">Tipe wajib dipilih.</div>
                                            @if (isset($row->id))
                                                <input type="hidden" name="id_d[]" value="{{ $row->id }}">
                                            @endif
                                        </td>
                                        <td>
                                            <input type="text" class="form-control kategori-input" name="kategori[]"
                                                list="kategoriOptions" placeholder="Ketik / pilih kategori"
                                                value="{{ $row->kategori ?? '' }}" required>
                                            <div class="invalid-feedback"></div>
                                        </td>
                                        <td>
                                            <input type="number" class="form-control gsm-input text-end" name="gsm[]"
                                                step="0.01" min="0"
                                                value="{{ is_numeric($row->gsm ?? null) ? rtrim(rtrim(number_format((float) $row->gsm, 3, '.', ''), '0'), '.') : '' }}"
                                                placeholder="0.00" required>
                                            <div class="invalid-feedback">GSM wajib &ge; 0.</div>
                                        </td>
                                        <td class="d-print-none">
                                            <button type="button" class="btn btn-outline-danger btn-sm btnDelRow">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </td>
                                    </tr>
                                @endforeach
                            @else
                                @foreach ($defaults as $tipeDefault)
                                    <tr>
                                        <td>
                                            <select name="tipe[]" class="form-select tipe-select" required>
                                                <option value="" hidden>Pilih…</option>
                                                <option value="sap" {{ $tipeDefault === 'sap' ? 'selected' : '' }}>SAP
                                                </option>
                                                <option value="fes" {{ $tipeDefault === 'fes' ? 'selected' : '' }}>FES
                                                </option>
                                            </select>
                                            <div class="invalid-feedback">Tipe wajib dipilih.</div>
                                        </td>
                                        <td>
                                            <input type="text" class="form-control kategori-input" name="kategori[]"
                                                list="kategoriOptions" placeholder="Ketik / pilih kategori" required>
                                            <div class="invalid-feedback"></div>
                                        </td>
                                        <td>
                                            <input type="number" class="form-control gsm-input text-end" name="gsm[]"
                                                step="0.01" min="0" placeholder="0.00" required>
                                            <div class="invalid-feedback">GSM wajib &ge; 0.</div>
                                        </td>
                                        <td class="d-print-none">
                                            <button type="button" class="btn btn-outline-danger btn-sm btnDelRow">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </td>
                                    </tr>
                                @endforeach
                            @endif
                        </tbody>
                    </table>

                    <small class="text-muted">
                        Tips: Bisa <kbd>paste</kbd> banyak baris ke kolom kategori / GSM (satu per baris). Gunakan tombol
                        “Tambah Baris” untuk menambah baris kosong.
                    </small>
                </div>
            </div>

        </form>

        {{-- MODAL UNLOCK GSM FES --}}
        <div class="modal fade" id="unlockGsmFesModal" tabindex="-1" aria-labelledby="unlockGsmFesModalLabel" aria-hidden="true" data-bs-backdrop="static">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content border-0 shadow-lg" style="border-radius: 16px; overflow: hidden;">
                    <div class="modal-header border-0 bg-danger py-3 text-white">
                        <h5 class="modal-title text-white fw-bold mb-0" id="unlockGsmFesModalLabel">
                            <i class="fas fa-exclamation-triangle me-2"></i> Informasi Penting
                        </h5>
                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body p-4 text-center">
                        <div class="mb-3">
                            <div class="d-inline-flex align-items-center justify-content-center bg-danger-light text-danger rounded-circle" style="width: 64px; height: 64px;">
                                <i class="fas fa-exclamation-triangle fa-2x animate-pulse"></i>
                            </div>
                        </div>
                        <p class="text-secondary mb-0" style="line-height: 1.6;">
                            Perubahan nilai <strong>GSM FES</strong> secara manual dapat berpengaruh terhadap perhitungan atau penilaian pada report. 
                            Apakah Anda yakin ingin melanjutkan untuk membuka kunci dan mengedit nilai ini?
                        </p>
                    </div>
                    <div class="modal-footer border-0 bg-light px-4 py-3 d-flex justify-content-end gap-2">
                        <button type="button" class="btn btn-link text-secondary fw-semibold mb-0" data-bs-dismiss="modal" style="text-decoration: none;">Batal</button>
                        <button type="button" class="btn btn-primary fw-bold mb-0 px-4" id="btn-confirm-unlock" style="border-radius: 8px;">Ya / Lanjutkan</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script>
        (() => {
            const table = document.getElementById('detailTable');
            const form = table?.closest('form') || document.querySelector('form');
            const btn = form?.querySelector('#btnSave') || form?.querySelector('button[type="submit"]');
            if (!table || !form || !btn) return;

            // ====== Master kategori (dari datalist) ======
            const normalize = s => (s || '').trim().replace(/\s+/g, ' ').toLowerCase();
            const canonMap = new Map(); // lower -> canonical/original
            const allowed = new Set();
            document.querySelectorAll('#kategoriOptions option').forEach(opt => {
                const raw = (opt.value || '').trim().replace(/\s+/g, ' ');
                const low = normalize(raw);
                if (!allowed.has(low)) {
                    allowed.add(low);
                    canonMap.set(low, raw);
                }
            });

            const qAll = (sel, ctx = document) => Array.from(ctx.querySelectorAll(sel));

            // Parser angka robust: buang spasi & pemisah ribuan, koma desimal -> titik
            const toNum = (v) => {
                const s = String(v ?? '').trim()
                    .replace(/\s+/g, '') // hilangkan spasi
                    .replace(/[.](?=\d{3}\b)/g, '') // hapus titik ribuan: 1.234 -> 1234
                    .replace(/,(?=\d+)/g, '.') // koma desimal -> titik: 1,25 -> 1.25
                    .replace(/[^\d.\-]/g, ''); // buang simbol lain
                const n = parseFloat(s);
                return isNaN(n) ? 0 : n;
            };
            const r3 = x => Math.round(x * 1000) / 1000;

            // ====== Row builder (untuk tambah baris) ======
            const makeRow = () => {
                const tr = document.createElement('tr');
                tr.innerHTML = `
            <td>
                <select name="tipe[]" class="form-select tipe-select" required>
                    <option value="" hidden>Pilih…</option>
                    <option value="sap">SAP</option>
                    <option value="fes">FES</option>
                </select>
                <div class="invalid-feedback">Tipe wajib dipilih.</div>
            </td>
            <td>
                <input type="text" class="form-control kategori-input" name="kategori[]" list="kategoriOptions"
                       placeholder="Ketik / pilih kategori" required>
                <div class="invalid-feedback"></div>
            </td>
            <td>
                <input type="number" class="form-control gsm-input text-end" name="gsm[]" step="0.01" min="0" placeholder="0.00" required>
                <div class="invalid-feedback">GSM wajib &ge; 0.</div>
            </td>
            <td class="d-print-none">
                <button type="button" class="btn btn-outline-danger btn-sm btnDelRow">
                    <i class="fas fa-trash"></i>
                </button>
            </td>
        `;
                return tr;
            };

            // ====== Validation ======
            const validateTipe = (el) => {
                const ok = !!el.value;
                el.classList.toggle('is-invalid', !ok);
                el.classList.toggle('is-valid', ok);
                return ok;
            };
            const validateKategori = (inp) => {
                const raw = (inp.value || '').trim().replace(/\s+/g, ' ');
                if (!raw) {
                    const fb = inp.parentElement.querySelector('.invalid-feedback');
                    if (fb) fb.textContent = 'Kategori wajib diisi.';
                    inp.classList.add('is-invalid');
                    inp.classList.remove('is-valid');
                    return false;
                }
                const low = raw.toLowerCase();
                if (!allowed.has(low)) {
                    inp.classList.add('is-invalid');
                    inp.classList.remove('is-valid');
                    const fb = inp.parentElement.querySelector('.invalid-feedback');
                    if (fb) fb.textContent = 'Kategori tidak ditemukan di master.';
                    return false;
                }
                const fixed = canonMap.get(low) || raw;
                if (inp.value !== fixed) inp.value = fixed;
                inp.classList.add('is-valid');
                inp.classList.remove('is-invalid');
                const fb = inp.parentElement.querySelector('.invalid-feedback');
                if (fb) fb.textContent = '';
                return true;
            };
            const validateGsm = (inp) => {
                const v = toNum(inp.value);
                const ok = inp.value !== '' && v >= 0;
                inp.classList.toggle('is-invalid', !ok);
                inp.classList.toggle('is-valid', ok);
                return ok;
            };

            const tableHasInvalid = () => {
                let ok = true;
                qAll('tbody tr', table).forEach(tr => {
                    ok = validateTipe(tr.querySelector('.tipe-select')) && ok;
                    ok = validateKategori(tr.querySelector('.kategori-input')) && ok;
                    ok = validateGsm(tr.querySelector('.gsm-input')) && ok;
                });
                return !ok;
            };
            const invalidOutsideTable = () => {
                for (const el of Array.from(form.elements)) {
                    if (table.contains(el)) continue;
                    if (typeof el.checkValidity === 'function' && el.willValidate && !el.checkValidity())
                    return true;
                }
                return false;
            };

            // ====== Kalkulasi GSM header (RUMUS: ((w_fes/w_sap)*ΣFES) + SAP) ======
            const gsmSapEl = document.querySelector('input[name="gsm_sap"]');
            const gsmFesEl = document.querySelector('input[name="gsm_fes"]');
            const wSapEl = document.querySelector('input[name="width_sap"]');
            const wFesEl = document.querySelector('input[name="width_fes"]');

            const dbGsmFes = toNum(gsmFesEl?.value);
            let userHasModifiedDetails = false;
            let userHasManuallyEditedGsmFes = false;

            gsmFesEl?.addEventListener('input', () => {
                userHasManuallyEditedGsmFes = true;
            });

            // Track user modifications to trigger auto-recalculation when locked
            table.addEventListener('input', () => { userHasModifiedDetails = true; });
            table.addEventListener('click', (e) => {
                if (e.target.closest('.btnDelRow') || e.target.closest('#btnAddRow')) {
                    userHasModifiedDetails = true;
                }
            });
            document.getElementById('btnAddRow')?.addEventListener('click', () => {
                userHasModifiedDetails = true;
            });
            [wSapEl, wFesEl].forEach(el => {
                el?.addEventListener('input', () => { userHasModifiedDetails = true; });
                el?.addEventListener('change', () => { userHasModifiedDetails = true; });
            });

            const recalcTotals = () => {
                let sumSap = 0,
                    sumFes = 0;
                qAll('tbody tr', table).forEach(tr => {
                    const tipe = (tr.querySelector('.tipe-select')?.value || '').toLowerCase();
                    const gsm = toNum(tr.querySelector('.gsm-input')?.value);
                    if (tipe === 'sap') sumSap += gsm;
                    if (tipe === 'fes') sumFes += gsm;
                });

                const wSap = toNum(wSapEl?.value);
                const wFes = toNum(wFesEl?.value);

                // GSM SAP = Σ(gsm SAP)
                if (gsmSapEl) gsmSapEl.value = sumSap ? r3(sumSap) : '';

                // GSM FES = ((w_fes / w_sap) * Σ(gsm FES)) + GSM SAP
                const calculatedFes = wSap > 0 ? r3((wFes / wSap) * sumFes + sumSap) : 0;
                const isGsmFesUnlocked = document.getElementById('is_gsm_fes_unlocked')?.value === '1';

                if (gsmFesEl) {
                    if (isGsmFesUnlocked) {
                        // If unlocked: we auto-recalculate and update the input value as details change,
                        // but only if the user has not manually typed custom values.
                        if (!userHasManuallyEditedGsmFes) {
                            gsmFesEl.value = calculatedFes > 0 ? calculatedFes : '';
                        }
                        if (originalInfo) originalInfo.classList.remove('d-none');
                        const originalInfoVal = document.getElementById('gsm-fes-original-val');
                        if (originalInfoVal) originalInfoVal.textContent = calculatedFes > 0 ? calculatedFes : '-';
                    } else {
                        // If locked:
                        // Show database value on initial load. Once details are modified, it follows the actual calculation.
                        if (!userHasModifiedDetails && dbGsmFes > 0 && Math.abs(dbGsmFes - calculatedFes) > 0.01) {
                            gsmFesEl.value = dbGsmFes;
                            if (originalInfo) originalInfo.classList.remove('d-none');
                            const originalInfoVal = document.getElementById('gsm-fes-original-val');
                            if (originalInfoVal) originalInfoVal.textContent = calculatedFes > 0 ? calculatedFes : '-';
                        } else {
                            gsmFesEl.value = calculatedFes > 0 ? calculatedFes : '';
                            // Hide badge since input field matches calculation
                            if (originalInfo) originalInfo.classList.add('d-none');
                        }
                    }
                }
            };

            const refresh = () => {
                recalcTotals();
                const disable = invalidOutsideTable() || tableHasInvalid();
                btn.disabled = disable;
                btn.setAttribute('aria-disabled', disable ? 'true' : 'false');
            };

            // ====== Events ======
            table.addEventListener('click', (e) => {
                const del = e.target.closest('.btnDelRow');
                if (del) {
                    const tr = del.closest('tr');
                    tr?.remove();
                    if (!table.tBodies[0].querySelectorAll('tr').length) {
                        table.tBodies[0].appendChild(makeRow());
                    }
                    refresh();
                }
            });
            document.getElementById('btnAddRow')?.addEventListener('click', () => {
                table.tBodies[0].appendChild(makeRow());
                refresh();
            });

            table.addEventListener('input', (e) => {
                const el = e.target;
                if (el.classList.contains('tipe-select')) validateTipe(el);
                if (el.classList.contains('kategori-input')) validateKategori(el);
                if (el.classList.contains('gsm-input')) validateGsm(el);
                refresh();
            });

            table.addEventListener('blur', (e) => {
                const el = e.target;
                if (el.classList?.contains('kategori-input')) {
                    const t = el.value.trim().replace(/\s+/g, ' ');
                    if (el.value !== t) el.value = t;
                    validateKategori(el);
                }
                if (el.classList?.contains('gsm-input')) validateGsm(el);
                refresh();
            }, true);

            // Paste multiline ke kolom kategori & gsm (down-fill)
            table.addEventListener('paste', (e) => {
                const target = e.target;
                const isKat = target.classList?.contains('kategori-input');
                const isGsm = target.classList?.contains('gsm-input');
                if (!isKat && !isGsm) return;

                const text = (e.clipboardData || window.clipboardData)?.getData('text');
                if (!text) return;
                const lines = text.split(/\r?\n/).map(s => s.trim()).filter(Boolean);
                if (lines.length <= 1) return;
                e.preventDefault();

                const selector = isKat ? '.kategori-input' : '.gsm-input';
                const inputs = qAll(selector, table.tBodies[0]);
                const start = inputs.indexOf(target);

                // Tambah baris jika kurang
                while ((start + lines.length) > qAll('tbody tr', table).length) {
                    table.tBodies[0].appendChild(makeRow());
                }

                const inputs2 = qAll(selector, table.tBodies[0]);
                lines.forEach((line, i) => {
                    const t = inputs2[start + i];
                    if (!t) return;
                    t.value = line;
                    if (isKat) validateKategori(t);
                    if (isGsm) validateGsm(t);
                });
                refresh();
            });

            // Field di luar tabel
            form.addEventListener('input', e => {
                if (!table.contains(e.target)) refresh();
            });
            form.addEventListener('change', e => {
                if (!table.contains(e.target)) refresh();
            });
            form.addEventListener('blur', e => {
                if (!table.contains(e.target)) refresh();
            }, true);

            // Perubahan width mempengaruhi GSM FES (rumus baru)
            [wSapEl, wFesEl].forEach(el => {
                if (!el) return;
                ['input', 'change', 'blur'].forEach(evt => el.addEventListener(evt, refresh));
            });

            // Hitung ulang tepat sebelum submit (agar yang terkirim pasti terbaru)
            form.addEventListener('submit', (e) => {
                recalcTotals();
                refresh();
                if (btn.disabled) e.preventDefault();
            });

            // Unlock GSM FES logic
            const btnUnlock = document.getElementById('btn-unlock-gsm-fes');
            const hiddenUnlocked = document.getElementById('is_gsm_fes_unlocked');
            const originalInfo = document.getElementById('gsm-fes-original-info');
            const confirmUnlockBtn = document.getElementById('btn-confirm-unlock');
            const modalEl = document.getElementById('unlockGsmFesModal');
            const modalUnlock = modalEl && typeof bootstrap !== 'undefined' ? new bootstrap.Modal(modalEl) : null;

            if (btnUnlock && confirmUnlockBtn && modalUnlock) {
                btnUnlock.addEventListener('click', () => {
                    if (hiddenUnlocked.value === '1') return;
                    modalUnlock.show();
                });

                confirmUnlockBtn.addEventListener('click', () => {
                    hiddenUnlocked.value = '1';
                    userHasManuallyEditedGsmFes = false;
                    if (gsmFesEl) {
                        gsmFesEl.removeAttribute('readonly');
                        gsmFesEl.focus();
                    }
                    if (originalInfo) {
                        originalInfo.classList.remove('d-none');
                    }
                    btnUnlock.innerHTML = '<i class="fas fa-unlock text-sm"></i>';
                    btnUnlock.classList.remove('text-danger');
                    btnUnlock.classList.add('text-success');
                    btnUnlock.style.pointerEvents = 'none'; // prevent hover/click states after unlocked
                    modalUnlock.hide();
                    refresh();
                });
            }

            // Init
            requestAnimationFrame(refresh);
        })();
    </script>
 @endpush