@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    @if ($show_expired_warning)
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                Swal.fire({
                    title: 'Permit Expired!',
                    text: 'Anda memiliki permit yang sudah melewati masa berlaku dan belum diselesaikan.',
                    icon: 'warning',
                    confirmButtonText: 'OK'
                });
            });
        </script>
    @endif

    <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 class="btn btn-primary mb-0" onclick="event.preventDefault(); showAgreementModal();">
                                <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">
                    @if ($errors->any())
                        <script>
                            document.addEventListener('DOMContentLoaded', function() {
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Gagal Menyimpan Data!',
                                    html: `{!! implode('<br>', $errors->all()) !!}`
                                });
                            });
                        </script>
                    @endif

                    {{-- Manual custom add new permit --}}
                    <form role="form" method="POST" action="{{ route('permohonan.permit.store') }}"
                        enctype="multipart/form-data">
                        @csrf
                        {{-- Aggrement --}}
                        <!-- Modal Persetujuan Kontrak -->
                        <div class="modal fade" id="agreementModal" tabindex="-1" aria-labelledby="agreementModalLabel"
                            aria-hidden="true">
                            <div class="modal-dialog modal-lg modal-dialog-scrollable">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="agreementModalLabel">Konfirmasi Kesepakatan</h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                                            aria-label="Close"></button>
                                    </div>
                                    <div class="modal-body" id="modalScrollableBody">
                                        <small>
                                            Sebelum menyimpan permit, anda diwajibkan membaca dan mematuhi kesepakan kontrak
                                            dibawah ini:
                                        </small>
                                        <p style="border-top: 1px solid #000; margin: 10px 0; width: 100%;"></p>

                                        <h5 style="text-align: center;">KESEPAKATAN KERJA KONTRAKTOR</h5>
                                        {!! $kontrak !!}
                                        <hr style="border: 1px solid #000; margin: 15px 0; width: 100%;">

                                        <small>
                                            Demikian kesepakatan ini telah kami baca, pahami bersama, dan menyetujui
                                            ketentuan diatas demi terlaksananya pekerjaan dengan aman.
                                        </small>

                                        <hr>
                                        <div class="form-check me-auto">
                                            <input class="form-check-input" type="checkbox" id="readAgreement"
                                                onclick="toggleAgreeButton()">
                                            <label class="form-check-label" for="readAgreement" style="font-weight: bolder">
                                                Saya telah membaca dan mengerti
                                            </label>
                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                        <!-- Checkbox -->
                                        <button type="button" class="btn btn-secondary"
                                            data-bs-dismiss="modal">Batalkan</button>

                                        <button type="submit" id='agreeButton' class="btn btn-primary" disabled>Saya
                                            Setuju</button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <script>
                            function groupHasChecked(selector) {
                                return document.querySelectorAll(selector + ':checked').length > 0;
                            }

                            function showGroupError(which, show) {
                                const box = document.getElementById('group-' + which);
                                const fb = document.getElementById('feedback-' + which);
                                if (!box || !fb) return;
                                if (show) {
                                    box.classList.add('border-invalid');
                                    fb.style.display = 'block';
                                } else {
                                    box.classList.remove('border-invalid');
                                    fb.style.display = 'none';
                                }
                            }

                            function validateBPJSRequired() {
                                const errors = [];
                                let firstEl = null;

                                const selects = document.querySelectorAll("select[name^='bpjs_option_list']");
                                selects.forEach(sel => {
                                    const m = sel.name.match(/\[(\d+)\]/); // ambil index
                                    const idx = m ? parseInt(m[1], 10) : null;
                                    if (idx == null) return;

                                    if (sel.value === 'memiliki') {
                                        const file = document.getElementById(`file_upload_${idx}`);
                                        const fb = document.getElementById(`bpjs_feedback_${idx}`);

                                        // Cek: user upload file BARU?
                                        const hasNewFile = !!(file?.files?.[0]);

                                        // kalau preview bukan NOIMG, kita anggap sudah ada file existing.
                                        const prevImg = document.getElementById(`preview_bpjs_${idx}`);
                                        const hasExisting = prevImg && prevImg.src && !prevImg.src.includes('noimage');

                                        if (!hasNewFile && !hasExisting) {
                                            errors.push(`BPJS - ${idx + 1} wajib upload dokumen`);
                                            if (file) {
                                                file.classList.add('is-invalid');
                                                if (!firstEl) firstEl = file;
                                            }
                                            if (fb) fb.style.display = 'block';
                                        } else {
                                            if (file) file.classList.remove('is-invalid');
                                            if (fb) fb.style.display = 'none';
                                        }
                                    }
                                });

                                return {
                                    ok: errors.length === 0,
                                    errors,
                                    firstEl
                                };
                            }

                            function showAgreementModal() {
                                // ===== validasi wajib lain (punya kamu) =====
                                const requiredInputs = document.querySelectorAll('[required]');
                                let invalidFields = [];
                                requiredInputs.forEach(input => {
                                    const val = (input.type === 'checkbox' || input.type === 'radio') ?
                                        (document.querySelectorAll(`[name="${input.name}"]:checked`).length ? 'x' : '') :
                                        String(input.value || '').trim();
                                    if (!val) {
                                        input.classList.add('is-invalid');
                                        const label = document.querySelector(`label[for="${input.id}"]`);
                                        invalidFields.push(label ? label.innerText : (input.name || 'Field wajib'));
                                    } else {
                                        input.classList.remove('is-invalid');
                                    }
                                });

                                const kategoriOK = groupHasChecked('.kategori-checkbox');
                                const apdOK = groupHasChecked('.apd-checkbox');
                                const periksaOK = groupHasChecked('.pemeriksaan-checkbox');
                                showGroupError('kategori', !kategoriOK);
                                showGroupError('apd', !apdOK);
                                showGroupError('pemeriksaan', !periksaOK);

                                // ===== validasi JSA =====
                                const jsa = validateJSA();
                                // VALIDASI GAMBAR WAJIB
                                const imgV = validateRequiredImages();

                                // VALIDASI BPJS WAJIB
                                const bpjsV = validateBPJSRequired();

                                // ====== VALIDASI LAIN-LAIN WAJIB DIISI JIKA DIPILIH ======
                                const LAINLAIN_ID = 'KPE0006'; // pastikan konsisten dengan kode-mu
                                const lainSelected = Array.from(document.querySelectorAll('input[name="kategori_pekerjaan[]"]:checked'))
                                    .some(cb => String(cb.value).trim() === LAINLAIN_ID);
                                const lainInput = document.getElementById('lain_lain_detail');
                                const lainFeedback = document.getElementById('feedback-lain'); // opsional, kalau ada
                                let lainOK = true;

                                if (lainSelected) {
                                    const val = (lainInput?.value || '').trim();
                                    if (!val) {
                                        lainOK = false;
                                        if (lainInput) lainInput.classList.add('is-invalid');
                                        if (lainFeedback) lainFeedback.style.display = 'block';
                                    } else {
                                        if (lainInput) lainInput.classList.remove('is-invalid');
                                        if (lainFeedback) lainFeedback.style.display = 'none';
                                    }
                                } else {
                                    // kalau tidak dipilih, pastikan status errornya bersih
                                    if (lainInput) lainInput.classList.remove('is-invalid');
                                    if (lainFeedback) lainFeedback.style.display = 'none';
                                }

                                // ===== validasi KOMPETENSI per baris =====
                                const kompInputs = document.querySelectorAll("input[name^='kompetensi_list']");
                                let kompErrors = [];
                                let firstKompEl = null;

                                kompInputs.forEach((inp, idx) => {
                                    const v = (inp.value || '').trim();
                                    if (!v) {
                                        inp.classList.add('is-invalid');
                                        if (!firstKompEl) firstKompEl = inp;
                                        // tampilkan label barisnya biar jelas
                                        kompErrors.push(`Kompetensi - ${idx + 1} belum diisi`);
                                    } else {
                                        inp.classList.remove('is-invalid');
                                    }
                                });



                                // ===== Validasi Nomor PO (khusus veneks) =====
                                let poOK = true;
                                let poErrors = [];
                                const poOption = document.getElementById('po_option');
                                const nomorPO = document.getElementById('nomor_po');
                                if (poOption && poOption.value === 'memiliki') {
                                    if (!nomorPO || !nomorPO.value.trim()) {
                                        poOK = false;
                                        poErrors.push('Nomor PO wajib diisi jika memilih "Memiliki Nomor PO".');
                                        if (nomorPO) nomorPO.classList.add('is-invalid');
                                    } else {
                                        if (nomorPO) nomorPO.classList.remove('is-invalid');
                                    }
                                }

                                // GABUNG ERROR
                                // if (invalidFields.length || !kategoriOK || !apdOK || !periksaOK || !jsa.ok || !imgV.ok || !lainOK || kompErrors
                                if (invalidFields.length || !kategoriOK || !apdOK || !periksaOK || !jsa.ok || !lainOK || kompErrors
                                    .length || !bpjsV.ok || !poOK) {
                                    let msg = '';

                                    // (1) Field input biasa yang kosong
                                    if (invalidFields.length) {
                                        msg += '<b>Field wajib yang belum diisi:</b><ul style="text-align:left;margin-top:6px">';
                                        invalidFields.forEach(f => msg += `<li>${f}</li>`);
                                        msg += '</ul>';
                                    }

                                    // (2) Grup checkbox wajib
                                    if (!kategoriOK || !apdOK || !periksaOK) {
                                        msg += '<b>Checklist wajib:</b><ul style="text-align:left;margin-top:6px">';
                                        if (!kategoriOK) msg += '<li>Kategori Pekerjaan (minimal pilih 1)</li>';
                                        if (!apdOK) msg += '<li>APD (minimal pilih 1)</li>';
                                        if (!periksaOK) msg += '<li>Pemeriksaan Sebelum Kerja (minimal pilih 1)</li>';
                                        msg += '</ul>';
                                    }

                                    // (3) Lain-lain wajib
                                    if (!lainOK) {
                                        msg += '<b>Lain-lain:</b><ul style="text-align:left;margin-top:6px">';
                                        msg += '<li>Detail Pekerjaan Lain-lain wajib diisi ketika kategori "Lain-lain" dipilih.</li>';
                                        msg += '</ul>';
                                    }

                                    // (4) JSA
                                    if (!jsa.ok) {
                                        msg += '<b>Job Safety Analysis:</b><ul style="text-align:left;margin-top:6px">';
                                        (jsa.errors || []).forEach(e => msg += `<li>${e}</li>`);
                                        msg += '</ul>';
                                    }

                                    // (5) GAMBAR
                                    // if (!imgV.ok) {
                                    //     msg += '<b>Upload Gambar:</b><ul style="text-align:left;margin-top:6px">';
                                    //     imgV.errors.forEach(e => msg += `<li>${e}</li>`);
                                    //     msg += '</ul>';
                                    // }

                                    // (5) KOMPETENSI
                                    if (kompErrors.length) {
                                        msg += '<b>Kompetensi:</b><ul style="text-align:left;margin-top:6px">';
                                        kompErrors.forEach(e => msg += `<li>${e}</li>`);
                                        msg += '</ul>';
                                    }

                                    // (6) BPJS
                                    if (!bpjsV.ok) {
                                        msg += '<b>BPJS:</b><ul style="text-align:left;margin-top:6px">';
                                        bpjsV.errors.forEach(e => msg += `<li>${e}</li>`);
                                        msg += '</ul>';
                                    }



                                    // (8) Nomor PO
                                    if (!poOK) {
                                        msg += '<b>Nomor PO:</b><ul style="text-align:left;margin-top:6px">';
                                        poErrors.forEach(e => msg += `<li>${e}</li>`);
                                        msg += '</ul>';
                                    }

                                    if (window.Swal) {
                                        Swal.fire({
                                            icon: 'warning',
                                            title: 'Lengkapi data dulu',
                                            html: msg,
                                            confirmButtonText: 'OK'
                                        });
                                    } else {
                                        alert('Lengkapi data wajib terlebih dahulu.');
                                    }

                                    const firstInvalid =
                                        document.querySelector('.is-invalid') ||
                                        imgV.firstEl || jsa.firstEl;

                                    firstInvalid?.scrollIntoView?.({
                                        behavior: 'smooth',
                                        block: 'center'
                                    });
                                    return;
                                }

                                // lolos semua -> tampilkan modal agreement
                                const m = new bootstrap.Modal(document.getElementById('agreementModal'), {});
                                m.show();
                            }

                            // Fungsi untuk mengaktifkan/menonaktifkan tombol "Saya Setuju"
                            function toggleAgreeButton() {
                                const checkbox = document.getElementById('readAgreement');
                                const agreeButton = document.getElementById('agreeButton');
                                agreeButton.disabled = !checkbox.checked; // Aktifkan jika checkbox dicentang
                            }

                            // document.addEventListener('DOMContentLoaded', () => {
                            //     const form = document.querySelector('form[action="{{ route('permohonan.permit.store') }}"]');
                            //     const agreeButton = document.getElementById('agreeButton');

                            //     if (form && agreeButton) {
                            //         // Intercept submit: kirim via fetch tanpa timeout
                            //         form.addEventListener('submit', function(e) {
                            //             e.preventDefault();

                            //             agreeButton.disabled = true;
                            //             agreeButton.innerHTML =
                            //                 `<span class="spinner-border spinner-border-sm me-1"></span> Proses...`;

                            //             // Loading info agar user tidak klik / tutup halaman
                            //             if (window.Swal) {
                            //                 Swal.fire({
                            //                     title: 'Sedang menyimpan permit',
                            //                     html: 'Mohon tunggu sampai proses selesai.<br>Jangan tutup halaman ini.',
                            //                     allowOutsideClick: false,
                            //                     allowEscapeKey: false,
                            //                     showConfirmButton: false,
                            //                     didOpen: () => {
                            //                         Swal.showLoading();
                            //                     }
                            //                 });
                            //             }

                            //             fetch(form.action, {
                            //                 method: form.method,
                            //                 body: new FormData(form),
                            //                 headers: {
                            //                     'X-Requested-With': 'XMLHttpRequest'
                            //                 }
                            //             }).then(function(response) {

                            //                 if (response.status === 422) {
                            //                     return response.json().then(function(data) {
                            //                         agreeButton.disabled = false;
                            //                         agreeButton.innerHTML = 'Saya Setuju';

                            //                         var msgs = [];
                            //                         if (data.errors) {
                            //                             Object.keys(data.errors).forEach(function(key) {
                            //                                 msgs = msgs.concat(data.errors[key]);
                            //                             });
                            //                         }

                            //                         if (window.Swal) {
                            //                             Swal.fire({
                            //                                 icon: 'error',
                            //                                 title: 'Validasi Gagal',
                            //                                 html: msgs.join('<br>'),
                            //                                 confirmButtonColor: '#028284'
                            //                             });
                            //                         }
                            //                     });
                            //                 }

                            //                 if (!response.ok) {
                            //                     agreeButton.disabled = false;
                            //                     agreeButton.innerHTML = 'Saya Setuju';

                            //                     if (window.Swal) {
                            //                         Swal.fire({
                            //                             icon: 'error',
                            //                             title: 'Server Error',
                            //                             text: 'Terjadi kesalahan di server. Silakan coba lagi.',
                            //                             confirmButtonColor: '#028284'
                            //                         });
                            //                     }
                            //                     return;
                            //                 }

                            //                 // Hapus draft hanya kalau submit berhasil
                            //                 if (typeof window.clearPermitDraft === 'function') {
                            //                     window.clearPermitDraft();
                            //                 }

                            //                 window.location.href = response.url;

                            //             }).catch(function(err) {
                            //                 agreeButton.disabled = false;
                            //                 agreeButton.innerHTML = 'Saya Setuju';

                            //                 if (window.Swal) {
                            //                     Swal.fire({
                            //                         icon: 'error',
                            //                         title: 'Gagal',
                            //                         text: 'Terjadi kesalahan jaringan. Silakan coba lagi.',
                            //                         confirmButtonColor: '#028284'
                            //                     });
                            //                 }
                            //             });
                            //         });

                            //         // Kalau backend return error Laravel redirect back dengan error, tombol aktif lagi
                            //         @if ($errors->any())
                            //             agreeButton.disabled = false;
                            //             agreeButton.innerHTML = "Saya Setuju";
                            //         @endif
                            //     }
                            // });

                            document.addEventListener('DOMContentLoaded', function() {
                                const form = document.querySelector(
                                    'form[action="{{ route('permohonan.permit.store') }}"]'
                                );

                                const agreeButton = document.getElementById(
                                    'agreeButton'
                                );

                                if (!form || !agreeButton) {
                                    console.error(
                                        'Form permit atau tombol persetujuan tidak ditemukan.'
                                    );

                                    return;
                                }

                                let sedangMenyimpan = false;

                                /*
                                |--------------------------------------------------------------------------
                                | Escape HTML untuk pesan error
                                |--------------------------------------------------------------------------
                                */
                                function escapeHtml(value) {
                                    const div = document.createElement('div');
                                    div.textContent = String(value ?? '');
                                    return div.innerHTML;
                                }

                                /*
                                |--------------------------------------------------------------------------
                                | Kembalikan tombol ke keadaan normal
                                |--------------------------------------------------------------------------
                                */
                                function resetSubmitButton() {
                                    sedangMenyimpan = false;

                                    agreeButton.disabled = false;
                                    agreeButton.innerHTML = 'Saya Setuju';
                                }

                                /*
                                |--------------------------------------------------------------------------
                                | Tampilkan validation error
                                |--------------------------------------------------------------------------
                                */
                                function showValidationErrors(data) {
                                    const messages = [];

                                    if (data && data.errors) {
                                        Object.values(data.errors).forEach(
                                            function(errorItems) {
                                                if (Array.isArray(errorItems)) {
                                                    errorItems.forEach(
                                                        function(message) {
                                                            messages.push(message);
                                                        }
                                                    );
                                                } else if (errorItems) {
                                                    messages.push(errorItems);
                                                }
                                            }
                                        );
                                    }

                                    let html = escapeHtml(
                                        data?.message ||
                                        'Data permit belum lengkap.'
                                    );

                                    if (messages.length > 0) {
                                        html = `
                                            <div style="text-align:left;">
                                                <p>${escapeHtml(
                                                    data?.message ||
                                                    'Silakan periksa data berikut:'
                                                )}</p>

                                                <ul style="margin-bottom:0;">
                                                    ${messages.map(function(message) {
                                                        return `
                                                                                    <li>
                                                                                        ${escapeHtml(message)}
                                                                                    </li>
                                                                                `;
                                                    }).join('')}
                                                </ul>
                                            </div>
                                        `;
                                    }

                                    Swal.fire({
                                        icon: 'warning',
                                        title: 'Data belum lengkap',
                                        html: html,
                                        confirmButtonText: 'Periksa kembali',
                                        confirmButtonColor: '#028284',
                                        allowOutsideClick: false
                                    });
                                }

                                /*
                                |--------------------------------------------------------------------------
                                | Submit permit melalui AJAX/fetch
                                |--------------------------------------------------------------------------
                                */
                                form.addEventListener(
                                    'submit',
                                    async function(event) {
                                        event.preventDefault();

                                        if (sedangMenyimpan) {
                                            return;
                                        }

                                        sedangMenyimpan = true;

                                        agreeButton.disabled = true;

                                        agreeButton.innerHTML = `
                                                <span
                                                    class="spinner-border spinner-border-sm me-1"
                                                    role="status"
                                                    aria-hidden="true">
                                                </span>
                                                Proses...
                                            `;

                                        /*
                                        |--------------------------------------------------------------------------
                                        | Tutup modal agreement agar Swal terlihat jelas
                                        |--------------------------------------------------------------------------
                                        */
                                        const agreementModalElement =
                                            document.getElementById(
                                                'agreementModal'
                                            );

                                        if (agreementModalElement) {
                                            const agreementModal =
                                                bootstrap.Modal.getInstance(
                                                    agreementModalElement
                                                );

                                            if (agreementModal) {
                                                agreementModal.hide();
                                            }
                                        }

                                        Swal.fire({
                                            title: 'Sedang menyimpan permit',
                                            html: `
                                                Mohon tunggu sampai proses selesai.
                                                <br>
                                                Jangan tutup halaman ini.
                                            `,
                                            allowOutsideClick: false,
                                            allowEscapeKey: false,
                                            showConfirmButton: false,

                                            didOpen: function() {
                                                Swal.showLoading();
                                            }
                                        });

                                        try {
                                            const response = await fetch(
                                                form.action, {
                                                    method: 'POST',

                                                    body: new FormData(form),

                                                    headers: {
                                                        'X-Requested-With': 'XMLHttpRequest',

                                                        'Accept': 'application/json'
                                                    },
                                                    redirect: 'follow'
                                                }
                                            );

                                            const contentType =
                                                response.headers.get(
                                                    'content-type'
                                                ) || '';

                                            /*
                                            |--------------------------------------------------------------------------
                                            | Respons bukan JSON
                                            |--------------------------------------------------------------------------
                                            */
                                            if (
                                                !contentType.includes(
                                                    'application/json'
                                                )
                                            ) {
                                                const responseText =
                                                    await response.text();

                                                console.error(
                                                    'Respons server bukan JSON:',
                                                    responseText
                                                );

                                                throw new Error(
                                                    'Server mengembalikan halaman HTML. ' +
                                                    'Periksa route, session login, CSRF, atau Laravel log.'
                                                );
                                            }

                                            const data =
                                                await response.json();

                                            /*
                                            |--------------------------------------------------------------------------
                                            | Validasi Laravel gagal
                                            |--------------------------------------------------------------------------
                                            */
                                            if (response.status === 422) {
                                                showValidationErrors(data);
                                                return;
                                            }

                                            /*
                                            |--------------------------------------------------------------------------
                                            | Session habis / belum login
                                            |--------------------------------------------------------------------------
                                            */
                                            if (
                                                response.status === 401 ||
                                                response.status === 403 ||
                                                response.status === 419
                                            ) {
                                                Swal.fire({
                                                    icon: 'error',
                                                    title: 'Sesi bermasalah',
                                                    text: data.message ||
                                                        'Sesi login telah berakhir. Silakan login kembali.',
                                                    confirmButtonColor: '#028284'
                                                });

                                                return;
                                            }

                                            /*
                                            |--------------------------------------------------------------------------
                                            | Error server atau insert gagal
                                            |--------------------------------------------------------------------------
                                            */
                                            if (
                                                !response.ok ||
                                                data.success !== true
                                            ) {
                                                Swal.fire({
                                                    icon: 'error',
                                                    title: 'Gagal menyimpan permit',

                                                    text: data.message ||
                                                        'Terjadi kesalahan saat menyimpan permit.',

                                                    confirmButtonText: 'Tutup',

                                                    confirmButtonColor: '#028284'
                                                });

                                                /*
                                                 * Tidak ada reload.
                                                 * Tidak ada clearPermitDraft().
                                                 */
                                                return;
                                            }

                                            /*
                                            |--------------------------------------------------------------------------
                                            | Benar-benar berhasil
                                            |--------------------------------------------------------------------------
                                            */
                                            await Swal.fire({
                                                icon: 'success',
                                                title: 'Berhasil',

                                                text: data.message ||
                                                    'Permit berhasil disimpan.',

                                                timer: 1500,

                                                timerProgressBar: true,

                                                showConfirmButton: false,

                                                allowOutsideClick: false,
                                                allowEscapeKey: false
                                            });

                                            /*
                                             * Draft hanya dihapus jika insert database
                                             * benar-benar berhasil.
                                             */
                                            if (
                                                typeof window.clearPermitDraft ===
                                                'function'
                                            ) {
                                                window.clearPermitDraft();
                                            }

                                            /*
                                             * Pindah halaman hanya setelah success:true
                                             */
                                            window.location.assign(
                                                data.redirect ||
                                                @json(url('/trnewp'))
                                            );

                                        } catch (error) {
                                            console.error(
                                                'STORE PERMIT ERROR:',
                                                error
                                            );

                                            Swal.fire({
                                                icon: 'error',

                                                title: 'Gagal menyimpan permit',

                                                text: error.message ||
                                                    'Terjadi kesalahan jaringan atau server.',

                                                confirmButtonText: 'Tutup',

                                                confirmButtonColor: '#028284'
                                            });

                                            /*
                                             * Saat catch:
                                             * - tidak refresh
                                             * - tidak pindah halaman
                                             * - draft tidak dihapus
                                             */

                                        } finally {
                                            resetSubmitButton();
                                        }
                                    }
                                );
                            });
                        </script>

                        <div class="card-header">
                            <div class="card-body">
                                <!-- Permit Baru -->
                                <div class="text-center">
                                    <h3>PENGAJUAN PERMIT BARU</h3>
                                </div>

                                <div class="text-center">
                                    <p>
                                        Pengajuan Permit ini wajib diisi seluruh fomulir yang ada tanda (<span
                                            style="color: red;">*</span>) dan jika ada pilihan yang tidak
                                        sesuai atau tidak ada,
                                        silahkan hubungi Admin K3 PT Multi Spunindo Jaya untuk dibantu lebih lanjut.
                                    </p>
                                </div>

                                <!-- Data Administrasi -->
                                <h4 style="color: #1c8c90; font-weight: bold;">1. Data Administrasi</h4>

                                <div style="border-top: 3px solid #1c8c90; margin: 20px 0;"></div>
                                <div class="row mb-3">
                                    <div class="col-md-6">
                                        <label for="nomor_surat" class="form-label">Nomor Surat</label>
                                        <input type="text" class="form-control" id="nomor_surat" name="nomor_surat"
                                            readonly value="{{ old('nomor_surat') }}">
                                    </div>
                                    <div class="col-md-6">
                                        <label for="status_permit" class="form-label">Status Permit</label>
                                        <input type="text" class="form-control" id="status_permit" name="status_permit"
                                            readonly value="{{ old('status_permit') }}">
                                    </div>
                                </div>

                                <div class="row mb-3">
                                    {{-- <div class="col-md-6">
                                        <label for="mulai_kerja" class="form-label">
                                            Mulai Kerja <span style="color: red;">*</span>
                                        </label>
                                        <input type="date" class="form-control" id="mulai_kerja" name="mulai_kerja"
                                            value="{{ old('mulai_kerja') }}" min="{{ date('Y-m-d') }}" required>
                                    </div> --}}

                                    @php
                                        // dari controller kamu sudah kirim $rolesArr (array lowercase)
                                        $isVenint = in_array('venint', $rolesArr ?? [], true);
                                        $today = now()->toDateString();
                                    @endphp

                                    <div class="col-md-6">
                                        <label for="mulai_kerja" class="form-label">
                                            Mulai Kerja <span style="color: red;">*</span>
                                        </label>

                                        <input type="date" class="form-control" id="mulai_kerja" name="mulai_kerja"
                                            value="{{ old('mulai_kerja') }}" {{-- kalau BUKAN venint → kunci minimal hari
                                            ini --}}
                                            @unless ($isVenint) min="{{ $today }}" @endunless
                                            required>
                                    </div>

                                    <div class="col-md-6">
                                        <label for="masa_berlaku" class="form-label">Masa Berlaku</label>
                                        <input type="text" class="form-control" id="masa_berlaku" name="masa_berlaku"
                                            readonly value="{{ old('masa_berlaku') }}">
                                    </div>
                                </div>

                                <div class="row mb-3">
                                    <div class="col-md-6">
                                        <label for="kategori" class="form-label">Kategori<span
                                                style="color: red;">*</span></label>
                                        <input type="text" class="form-control" id="masa_berlaku" name="masa_berlaku"
                                            readonly value="Permit Baru">
                                    </div>

                                    @if ($hasRole('veneks'))
                                        <div class="col-md-6">
                                            <label for="nama_vendor" class="form-label">Nama Vendor<span
                                                    style="color: red;">*</span></label>
                                            <input type="text" class="form-control" id="nama_vendor"
                                                name="nama_vendor"
                                                value="{{ $vendors->firstWhere('idvendor', $users->id_vendor)->nama ?? 'Vendor tidak ditemukan' }}"
                                                readonly>
                                        </div>
                                    @elseif($hasRole('venint'))
                                        <div class="col-md-6">
                                            <label for="nama_vendor" class="form-label">Departemen</label>
                                            <input type="text" class="form-control" id="nama_vendor"
                                                name="nama_vendor"
                                                value="{{ $departement->firstWhere('id', $users->id_departement)->nama_departement ?? 'Departement tidak ditemukan' }}"
                                                readonly>
                                        </div>
                                    @endif
                                </div>

                                <div class="row mb-3">
                                    <div class="col-md-6">
                                        <label for="lokasi" class="form-label">Lokasi <span
                                                style="color:red">*</span></label>

                                        @php
                                            $oldLokasi = old('lokasi');
                                            $oldNamaLokasi = $oldLokasi
                                                ? optional($locations->firstWhere('id', $oldLokasi))->nama_lokasi
                                                : null;
                                        @endphp

                                        <!-- Tombol buka modal -->
                                        <button type="button" class="form-control" id="openLocationModal"
                                            data-bs-toggle="modal" data-bs-target="#locationModal">
                                            {{ $oldNamaLokasi ?? 'Pilih Lokasi' }}
                                        </button>

                                        <!-- Hanya SATU hidden input -->
                                        <input type="hidden" id="lokasi_id" name="lokasi" value="{{ old('lokasi') }}"
                                            required>
                                    </div>

                                    <div class="col-md-6">
                                        <label for="lokasi_detail" class="form-label">Lokasi Detail <span
                                                style="color:red">*</span></label>
                                        <input type="text" class="form-control" id="lokasi_detail"
                                            name="lokasi_detail" value="{{ old('lokasi_detail') }}"
                                            placeholder="Contoh: Lantai 3" required>
                                    </div>
                                </div>
                                <!-- Modal -->
                                <div class="modal fade" id="locationModal" tabindex="-1"
                                    aria-labelledby="locationModalLabel" aria-hidden="true">
                                    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="locationModalLabel">Pilih Lokasi</h5>
                                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                    aria-label="Close"></button>
                                            </div>
                                            <div class="modal-body">
                                                <div class="table-responsive">
                                                    <table id="locationTableBody"
                                                        class="table table-striped table-bordered w-100">
                                                        <thead class="thead-light" style="background-color: #00b7bd4f;">
                                                            <tr>
                                                                <th class="text-center"
                                                                    style="width: 90px; min-width: 90px;">Action</th>
                                                                <th class="text-center"
                                                                    style="width: 60px; min-width: 60px;">ID</th>
                                                                <th class="text-center" style="min-width: 150px;">Nama
                                                                    Lokasi</th>
                                                                <th class="text-center" style="min-width: 140px;">PIC Area
                                                                </th>
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                            @foreach ($locations as $location)
                                                                @php
                                                                    $picArea = $pic_area->firstWhere(
                                                                        'id',
                                                                        $location->pic_area,
                                                                    );
                                                                    $picName = $picArea
                                                                        ? trim(
                                                                            ($picArea->firstname ?? '') .
                                                                                ' ' .
                                                                                ($picArea->lastname ?? ''),
                                                                        )
                                                                        : '-';
                                                                @endphp
                                                                <tr>
                                                                    <td class="text-center">
                                                                        <button type="button"
                                                                            class="btn btn-sm btn-primary select-location"
                                                                            data-id="{{ $location->id }}"
                                                                            data-name="{{ $location->nama_lokasi }}"
                                                                            style="white-space: nowrap;">
                                                                            <i class="fas fa-check"></i> Pilih
                                                                        </button>
                                                                    </td>
                                                                    <td class="text-center">{{ $location->id }}</td>
                                                                    <td>{{ $location->nama_lokasi }}</td>
                                                                    <td>
                                                                        <span class="badge bg-info text-white px-2 py-1"
                                                                            style="font-size: 0.75rem; white-space: nowrap;">
                                                                            <i
                                                                                class="fas fa-user me-1"></i>{{ $picName }}
                                                                        </span>
                                                                    </td>
                                                                </tr>
                                                            @endforeach
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <script>
                                    document.addEventListener('DOMContentLoaded', function() {
                                        const hiddenLokasi = document.getElementById('lokasi_id');
                                        const btnOpen = document.getElementById('openLocationModal');
                                        const modalEl = document.getElementById('locationModal');
                                        const picSelect = document.getElementById('pic_area');

                                        const LOC_MAP = @json($locations->pluck('nama_lokasi', 'id'));
                                        const LOC_PIC_MAP = @json($locPicMap); // { lokasi_id: pic_user_id }
                                        const PIC_NAME_MAP = @json($picNameMap ?? []); // { user_id: "Nama User" }

                                        const oldPic = @json(old('pic_area')); // nilai PIC saat gagal submit (jika ada)
                                        const oldLok = @json(old('lokasi')); // nilai lokasi saat gagal submit (jika ada))

                                        // 1) Restore label tombol lokasi dari old
                                        if (hiddenLokasi && hiddenLokasi.value && LOC_MAP[hiddenLokasi.value]) {
                                            btnOpen.textContent = LOC_MAP[hiddenLokasi.value];
                                        } else if (oldLok && LOC_MAP[oldLok]) {
                                            btnOpen.textContent = LOC_MAP[oldLok];
                                        }

                                        // 2) Restore PIC: UTAMAKAN old('pic_area') jika ada
                                        if (picSelect) {
                                            if (oldPic) {
                                                const targetVal = String(oldPic);
                                                let exists = Array.from(picSelect.options).some(opt => String(opt.value) === targetVal);
                                                if (!exists) {
                                                    // Tambah option sementara supaya value old bisa terpilih
                                                    const label = PIC_NAME_MAP[targetVal] || `User #${targetVal}`;
                                                    picSelect.add(new Option(label, targetVal));
                                                }
                                                picSelect.value = targetVal;
                                                picSelect.dispatchEvent(new Event('change'));
                                            } else if (hiddenLokasi && hiddenLokasi.value) {
                                                // Tidak ada old → auto-set dari master lokasi→PIC
                                                selectPicForLocation(hiddenLokasi.value);
                                            }
                                        }

                                        // 3) Filter tabel lokasi
                                        const searchEl = document.getElementById('searchLocationTable');
                                        if (searchEl) {
                                            searchEl.addEventListener('input', function() {
                                                const filter = this.value.toLowerCase();
                                                document.querySelectorAll('#locationTableBody tr').forEach(row => {
                                                    const locationName = (row.cells[1]?.innerText || '').toLowerCase();
                                                    row.style.display = locationName.includes(filter) ? '' : 'none';
                                                });
                                            });
                                        }

                                        // 4) Klik "Pilih" di modal
                                        const tableBody = document.getElementById('locationTableBody');
                                        if (tableBody) {
                                            tableBody.addEventListener('click', function(e) {
                                                const btn = e.target.closest('.select-location');
                                                if (!btn) return;

                                                const id = String(btn.getAttribute('data-id'));
                                                const name = btn.getAttribute('data-name') || LOC_MAP[id] || 'Pilih Lokasi';

                                                hiddenLokasi.value = id;
                                                btnOpen.textContent = name;

                                                // Trigger change event agar localStorage auto-save terpicu
                                                hiddenLokasi.dispatchEvent(new Event('change', {
                                                    bubbles: true
                                                }));

                                                // HANYA set PIC otomatis kalau user belum memilih sebelumnya (jangan menimpa input manual)
                                                if (!oldPic) {
                                                    selectPicForLocation(id);
                                                }

                                                const modal = bootstrap.Modal.getInstance(modalEl) || new bootstrap.Modal(modalEl);
                                                modal.hide();
                                            });
                                        }

                                        // Helper: set PIC dari master berdasarkan lokasi
                                        // function selectPicForLocation(locId) {
                                        //     if (!picSelect) return;
                                        //     const picId = LOC_PIC_MAP[String(locId)];
                                        //     if (!picId) return;

                                        //     const targetVal = String(picId);
                                        //     let exists = Array.from(picSelect.options).some(opt => String(opt.value) === targetVal);
                                        //     if (!exists) {
                                        //         const label = PIC_NAME_MAP[targetVal] || `User #${targetVal}`;
                                        //         picSelect.add(new Option(label, targetVal));
                                        //     }
                                        //     picSelect.value = targetVal;
                                        //     picSelect.dispatchEvent(new Event('change'));
                                        // }

                                        function selectPicForLocation(locId) {
                                            if (!picSelect) return;

                                            const picId = LOC_PIC_MAP[String(locId)];
                                            if (!picId) return;

                                            const targetVal = String(picId);
                                            const ACTIVE_PIC_IDS = @json($activePicIds);

                                            // Jika PIC nonaktif, jangan pilih apa pun
                                            const isActive = ACTIVE_PIC_IDS.includes(parseInt(targetVal));
                                            if (!isActive) {
                                                // kosongkan select PIC
                                                picSelect.value = '';
                                                picSelect.dispatchEvent(new Event('change'));
                                                return;
                                            }

                                            // Jika aktif, lanjut auto-select
                                            let exists = Array.from(picSelect.options).some(opt => String(opt.value) === targetVal);
                                            if (!exists) {
                                                const label = PIC_NAME_MAP[targetVal] || `User #${targetVal}`;
                                                picSelect.add(new Option(label, targetVal));
                                            }

                                            picSelect.value = targetVal;
                                            picSelect.dispatchEvent(new Event('change'));
                                        }

                                    });
                                </script>


                                <div class="row mb-3">
                                    <div class="col-md-6">
                                        <label for="whatsapp_users" class="form-label">Nomor Whatsapp Users <span
                                                style="color: red;">*</span></label>
                                        <input type="tel" class="form-control" id="whatsapp_users"
                                            name="whatsapp_users" value="{{ old('whatsapp_users') }}"
                                            placeholder="Masukkan nomor WhatsApp" pattern="[0-9]+" inputmode="numeric"
                                            required>
                                    </div>

                                    <div class="col-md-6">
                                        <label for="nama_users" class="form-label">Nama Users<span
                                                style="color: red;">*</span></label>
                                        <input type="text" class="form-control" id="nama_users" name="nama_users"
                                            readonly value="{{ $users->firstname }}">
                                    </div>
                                </div>

                                @if ($hasRole('veneks'))
                                    <div class="row mb-3">
                                        <!-- Status PO -->
                                        <div class="col-md-6">
                                            <label for="po_option" class="form-label">Status PO <span
                                                    style="color: red;">*</span></label>
                                            <select class="form-select" id="po_option" name="po_option"
                                                onchange="toggleNomorPOField()" required>
                                                <option value="menyusul"
                                                    {{ old('po_option') == 'menyusul' ? 'selected' : '' }}>
                                                    Menyusul
                                                </option>
                                                <option value="memiliki"
                                                    {{ old('po_option') == 'memiliki' ? 'selected' : '' }}>
                                                    Memiliki Nomor
                                                    PO</option>
                                            </select>
                                        </div>

                                        <!-- Nomor PO, hanya muncul jika "Memiliki Nomor PO" dipilih -->
                                        <div class="col-md-6" id="nomor_po_field" style="display: none;">
                                            <label for="nomor_po" class="form-label">Nomor PO</label>
                                            <input type="text" class="form-control" id="nomor_po" name="nomor_po"
                                                value="{{ old('nomor_po') }}">
                                        </div>
                                    </div>
                                @endif
                                <!-- Surat Izin Kerja K3 -->
                                <br>
                                <h4 style="color: #1c8c90; font-weight: bold;">2. Surat Izin Kerja K3</h4>
                                <div style="border-top: 3px solid #1c8c90; margin: 20px 0;"></div>
                                <div class="row mb-3">
                                    <div class="col-md-12">
                                        <label for="uraian_pekerjaan" class="form-label">Uraian Pekerjaan <span
                                                style="color: red;">*</span></label>
                                        <textarea class="form-control" id="uraian_pekerjaan" name="uraian_pekerjaan"
                                            placeholder="Deskripsikan Pekerjaan Tersebut !" required>{{ old('uraian_pekerjaan') }}</textarea>
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <div class="col-md-12">
                                        <label class="form-label">
                                            Pemeriksaan Sebelum Kerja <span style="color: red;">*</span>
                                        </label>

                                        <div id="group-pemeriksaan" class="p-2 rounded border">
                                            @php $oldPeriksa = old('pemeriksaan_sebelum_kerja', []); @endphp

                                            <div class="form-check">
                                                <input class="form-check-input pemeriksaan-checkbox" type="checkbox"
                                                    id="peralatan_tepat" name="pemeriksaan_sebelum_kerja[]"
                                                    value="Menggunakan Peralatan yang Tepat" @checked(in_array('Menggunakan Peralatan yang Tepat', $oldPeriksa))>
                                                <label class="form-check-label" for="peralatan_tepat">
                                                    Menggunakan Peralatan yang Tepat
                                                </label>
                                            </div>

                                            <div class="form-check">
                                                <input class="form-check-input pemeriksaan-checkbox" type="checkbox"
                                                    id="peralatan_inspeksi" name="pemeriksaan_sebelum_kerja[]"
                                                    value="Peralatan Sudah Dilakukan Inspeksi"
                                                    @checked(in_array('Peralatan Sudah Dilakukan Inspeksi', $oldPeriksa))>
                                                <label class="form-check-label" for="peralatan_inspeksi">
                                                    Peralatan Sudah Dilakukan Inspeksi
                                                </label>
                                            </div>

                                            <div class="form-check">
                                                <input class="form-check-input pemeriksaan-checkbox" type="checkbox"
                                                    id="pekerjaan_bidang" name="pemeriksaan_sebelum_kerja[]"
                                                    value="Pekerja Sesuai dengan Bidangnya" @checked(in_array('Pekerja Sesuai dengan Bidangnya', $oldPeriksa))>
                                                <label class="form-check-label" for="pekerjaan_bidang">
                                                    Pekerja Sesuai dengan Bidangnya
                                                </label>
                                            </div>

                                            <div class="form-check">
                                                <input class="form-check-input pemeriksaan-checkbox" type="checkbox"
                                                    id="pekerjaan_sehat" name="pemeriksaan_sebelum_kerja[]"
                                                    value="Pekerja dalam Kondisi Sehat" @checked(in_array('Pekerja dalam Kondisi Sehat', $oldPeriksa))>
                                                <label class="form-check-label" for="pekerjaan_sehat">
                                                    Pekerja dalam Kondisi Sehat
                                                </label>
                                            </div>

                                            <div class="form-check">
                                                <input class="form-check-input pemeriksaan-checkbox" type="checkbox"
                                                    id="lain_lain" name="pemeriksaan_sebelum_kerja[]" value="Lain-Lain"
                                                    @checked(in_array('Lain-Lain', $oldPeriksa))>
                                                <label class="form-check-label" for="lain_lain">
                                                    Lain-Lain
                                                </label>
                                            </div>
                                        </div>

                                        <div id="feedback-pemeriksaan" class="invalid-feedback d-block"
                                            style="display:none;">
                                            <code>Minimal pilih 1 pemeriksaan sebelum kerja.</code>
                                        </div>
                                    </div>
                                </div>

                                <hr>
                                <div class="row mb-3">
                                    <div class="col-md-3">
                                        <label for="tenaga_kerja" class="form-label">Jumlah Tenaga Kerja <span
                                                style="color: red;">*</span></label>
                                        <div class="position-relative">
                                            <!-- Input field untuk Jumlah Tenaga Kerja dengan nilai default 0 -->
                                            <input type="number" class="form-control pe-5" id="tenaga_kerja"
                                                name="tenaga_kerja" value="{{ old('tenaga_kerja', 0) }}"
                                                data-max="{{ $maxTenagaKerja }}" onchange="updateTenagaKerja()">

                                            <!-- Tombol "Orang" berada di dalam input -->
                                            <button type="button"
                                                class="btn btn-primary position-absolute top-50 end-0 translate-middle-y"
                                                onclick="updateTenagaKerja()">Orang</button>
                                        </div>
                                    </div>
                                </div>
                                <div id="tenaga_kerja_detail"></div>
                                @php
                                    $OLD_BPJS_OPT = old('bpjs_option_list', []); // ["menyusul"/"memiliki"/"Tidak Perlu", ...]
                                    $OLD_BPJS_TEMP = old('bpjs_temp_list', []); // ["bpjs_xxx.png", null, ...]
                                @endphp
                                <hr>
                                <br>
                                <style>
                                    .table-cell {
                                        /* Menambahkan border */
                                        padding: 5px;
                                        /* Jarak di dalam setiap cell */
                                        margin: 5px;
                                        /* Margin antar cell */
                                        border-radius: 1px;
                                        /* Membuat sudut cell sedikit melengkung */
                                        background-color: #f9f9f9;
                                        /* Warna latar belakang agar lebih rapi */
                                    }

                                    .table-cell input[type="checkbox"] {
                                        margin-right: 8px;
                                        /* Memberikan jarak antara checkbox dan label */
                                    }

                                    .table-cell label {
                                        font-size: 14px;
                                        /* Menyesuaikan ukuran teks label */
                                        line-height: 1.5;
                                        /* Menjaga jarak antara teks jika label panjang */
                                    }
                                </style>
                                <div class="row mb-3">

                                    <!-- KATEGORI PEKERJAAN -->
                                    <div class="col-md-6">
                                        <label class="form-label">Kategori Pekerjaan <span
                                                style="color:red">*</span></label>

                                        <div id="group-kategori" class="p-2 rounded border">
                                            @php $oldKategori = old('kategori_pekerjaan', []); @endphp
                                            @foreach ($kategori as $item)
                                                <div class="form-check">
                                                    <input class="form-check-input kategori-checkbox" type="checkbox"
                                                        value="{{ $item->id }}"
                                                        id="kategori_pekerjaan_{{ $item->id }}"
                                                        name="kategori_pekerjaan[]" onchange="clearGroupError('kategori')"
                                                        @checked(in_array($item->id, $oldKategori, true))>
                                                    <label class="form-check-label"
                                                        for="kategori_pekerjaan_{{ $item->id }}">
                                                        {{ $item->jenis_pekerjaan }}
                                                    </label>
                                                </div>
                                            @endforeach
                                        </div>
                                        <div id="feedback-kategori" class="invalid-feedback d-block"
                                            style="display:none;">
                                            <code>Minimal pilih 1 kategori.</code>
                                        </div>
                                    </div>

                                    <!-- APD -->
                                    <div class="col-md-6">
                                        <label class="form-label">APD <span style="color:red">*</span></label>

                                        <div id="group-apd" class="p-2 rounded border">
                                            @php $oldApd = old('apd', []); @endphp
                                            <div class="row">
                                                @foreach ($alat as $item)
                                                    <div class="col-md-6">
                                                        <div class="form-check table-cell">
                                                            <input class="form-check-input apd-checkbox" type="checkbox"
                                                                value="{{ $item->id }}" id="apd_{{ $item->id }}"
                                                                name="apd[]" onchange="clearGroupError('apd')"
                                                                @checked(in_array($item->id, $oldApd, true))>
                                                            <label class="form-check-label"
                                                                for="apd_{{ $item->id }}">{{ $item->nama_alat }}</label>
                                                        </div>
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                        <div id="feedback-apd" class="invalid-feedback d-block" style="display:none;">
                                            <code>Minimal pilih 1 APD.</code>
                                        </div>
                                    </div>

                                </div>

                                <hr>
                                <div class="row mb-3">
                                    <div id="checklist-container" class="row" style="display:none;">
                                        <!-- Checklist akan ditambahkan oleh JavaScript -->
                                    </div>

                                    <div id="lain-lain-container" class="col-md-6" style="display:none;">
                                        <label for="lain_lain_detail" class="form-label">Detail Pekerjaan
                                            Lain-Lain</label>
                                        <input type="text" class="form-control" id="lain_lain_detail"
                                            name="lain_lain_detail" placeholder="Jelaskan Kategori Pekerjaan Disini"
                                            value="{{ old('lain_lain_detail', '') }}">
                                        <div id="feedback-lain" class="invalid-feedback d-block" style="display:none;">
                                            <code>Wajib diisi bila pilih “Lain-lain”.</code>
                                        </div>
                                    </div>

                                </div>
                                {{-- Script untuk Modal --}}
                                <script>
                                    // ===== CONFIG =====
                                    const LAINLAIN_ID = 'KPE0006';

                                    // ===== MASTER → KD_MAP (sederhana & fleksibel) =====
                                    const KD_RAW = @json($kategoriDetails);
                                    const OLD_KATEGORI = (@json(old('kategori_pekerjaan', [])) || []).map(s => String(s).trim());
                                    const OLD_CHECKLIST = @json(old('checklist', (object) [])) || {};

                                    const pickOptKey = (o) => ['options', 'detail', 'items'].find(k => o && k in o) || null;
                                    const toArray = (v) => Array.isArray(v) ? v : (v && typeof v === 'object') ? Object.values(v) : [];

                                    function normOpt(o) {
                                        if (typeof o === 'string') return {
                                            value: o.trim(),
                                            label: o
                                        };
                                        return {
                                            value: String(o?.value ?? o?.id ?? o?.kode ?? o?.nama ?? o?.label ?? '').trim(),
                                            label: String(o?.label ?? o?.nama ?? o?.value ?? o?.id ?? '')
                                        };
                                    }

                                    function buildKDMap(raw) {
                                        const out = {};
                                        if (!raw) return out;

                                        const handle = (id, node) => {
                                            const key = String(id).trim();
                                            if (!key) return;
                                            const label = String(node?.label ?? node?.nama ?? node?.jenis ?? key);
                                            const arr = toArray(node?.[pickOptKey(node)] ?? []);
                                            out[key] = {
                                                label,
                                                options: arr.map(normOpt).filter(o => o.value)
                                            };
                                        };

                                        if (Array.isArray(raw)) raw.forEach(it => handle(it?.id ?? it?.kode ?? it?.value ?? it?.key ?? '', it));
                                        else Object.entries(raw).forEach(([id, node]) => handle(id, node));

                                        return out;
                                    }

                                    const KD_MAP = buildKDMap(KD_RAW);

                                    // ===== EL =====
                                    const CHECKLIST_CONTAINER = () => document.getElementById('checklist-container');
                                    const LAINLAIN_CONTAINER = () => document.getElementById('lain-lain-container');
                                    const LAINLAIN_INPUT = () => document.getElementById('lain_lain_detail');
                                    const FEEDBACK_KAT = () => document.getElementById('feedback-kategori');
                                    const FEEDBACK_LAIN = () => document.getElementById('feedback-lain');

                                    // ===== HELPERS =====
                                    function clearGroupError(which) {
                                        // sederhana: saat user interaksi, hide pesan invalid
                                        if (which === 'kategori') {
                                            const f = FEEDBACK_KAT();
                                            if (f) f.style.display = 'none';
                                        }
                                    }

                                    function ensureOldKategoriChecked() {
                                        OLD_KATEGORI.forEach(id => {
                                            const el = document.getElementById('kategori_pekerjaan_' + id);
                                            if (el) el.checked = true;
                                        });
                                    }

                                    function selectedKategori() {
                                        return Array.from(document.querySelectorAll('input[name="kategori_pekerjaan[]"]:checked'))
                                            .map(cb => String(cb.value).trim());
                                    }

                                    // Validasi: minimal 1 kategori
                                    function validateKategori(showMsg = true) {
                                        const picked = selectedKategori();
                                        const ok = picked.length > 0;
                                        const fb = FEEDBACK_KAT();
                                        if (!ok && fb && showMsg) fb.style.display = 'block';
                                        if (ok && fb) fb.style.display = 'none';
                                        return ok;
                                    }

                                    function ensureHiddenForLainLain() {
                                        const form = LAINLAIN_INPUT()?.closest('form');
                                        if (!form) return;
                                        const txt = (LAINLAIN_INPUT()?.value || '').trim();
                                        let hidden = document.getElementById('hidden_lain_lain_check');

                                        const pickedLain = selectedKategori().includes(LAINLAIN_ID);

                                        if (pickedLain && txt) {
                                            if (!hidden) {
                                                hidden = document.createElement('input');
                                                hidden.type = 'hidden';
                                                hidden.id = 'hidden_lain_lain_check';
                                                hidden.name = `checklist[${LAINLAIN_ID}][]`;
                                                form.appendChild(hidden);
                                            }
                                            hidden.value = txt;
                                        } else if (hidden) {
                                            hidden.remove();
                                        }
                                    }

                                    function isLainSelected() {
                                        return selectedKategori().includes(LAINLAIN_ID);
                                    }

                                    // Validasi: Lain-lain wajib diisi jika dipilih
                                    function validateLainLain(showMsg = true) {
                                        const input = LAINLAIN_INPUT();
                                        const feedback = FEEDBACK_LAIN();
                                        const selected = isLainSelected();
                                        const val = (input?.value || '').trim();

                                        let ok = true;
                                        if (selected && !val) {
                                            ok = false;
                                            if (input) input.classList.add('is-invalid');
                                            if (feedback && showMsg) feedback.style.display = 'block';
                                        } else {
                                            if (input) input.classList.remove('is-invalid');
                                            if (feedback) feedback.style.display = 'none';
                                        }
                                        return ok;
                                    }

                                    function buildSection(catId, detail, selectedOpts) {
                                        const key = String(catId);
                                        const opts = Array.isArray(detail?.options) ? detail.options : [];
                                        if (!opts.length) return null;

                                        const wrap = document.createElement('div');
                                        wrap.className = 'col-md-6';
                                        wrap.innerHTML = `
                                                <div class="mb-3">
                                                  <label class="form-label" style="font-size:14px;">${detail?.label || key}</label>
                                                  <div class="row">
                                                    ${opts.map(o => {
                                            const val = o.value;
                                            const id = `checklist_${key}_${val}`;
                                            const chk = (selectedOpts || []).includes(val) ? 'checked' : '';
                                            return `
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        <div class="col-md-6">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          <div class="form-check">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            <input class="form-check-input" type="checkbox"
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   id="${id}" value="${val}" ${chk}
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   name="checklist[${key}][]">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            <label class="form-check-label" for="${id}">${o.label}</label>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          </div>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        </div>`;
                                        }).join('')}
                                                  </div>
                                                </div>`;
                                        return wrap;
                                    }

                                    // ===== RENDER =====
                                    function updateChecklist() {
                                        const selected = selectedKategori();
                                        const box = CHECKLIST_CONTAINER();
                                        const lain = LAINLAIN_CONTAINER();
                                        if (!box) return;

                                        box.innerHTML = '';

                                        if (!selected.length) {
                                            box.style.display = 'none';
                                            if (lain) lain.style.display = 'none';
                                            ensureHiddenForLainLain();
                                            return;
                                        }

                                        let showLain = selected.includes(LAINLAIN_ID);
                                        let appended = 0;

                                        selected.forEach(id => {
                                            if (id === LAINLAIN_ID) return; // skip render lainnya
                                            const detail = KD_MAP[id] || {
                                                label: id,
                                                options: []
                                            };
                                            const oldOpt = Array.isArray(OLD_CHECKLIST[id]) ? OLD_CHECKLIST[id].map(String) : [];
                                            const sec = buildSection(id, detail, oldOpt);
                                            if (sec) {
                                                box.appendChild(sec);
                                                appended++;
                                            }
                                        });

                                        box.style.display = appended ? 'flex' : 'none';
                                        if (lain) lain.style.display = showLain ? 'block' : 'none';

                                        ensureHiddenForLainLain(); // pastikan hidden-nya ikut
                                    }

                                    // ===== INIT + EVENTS =====
                                    document.addEventListener('DOMContentLoaded', () => {
                                        ensureOldKategoriChecked();
                                        updateChecklist();

                                        document.addEventListener('change', (e) => {
                                            if (e.target?.name === 'kategori_pekerjaan[]') updateChecklist();
                                        });
                                        document.addEventListener('input', (e) => {
                                            if (e.target?.id === 'lain_lain_detail') ensureHiddenForLainLain();
                                        });

                                        const form = LAINLAIN_INPUT()?.closest('form');
                                        if (form) {
                                            form.addEventListener('submit', (e) => {
                                                ensureHiddenForLainLain();

                                                const okKategori = validateKategori(true);
                                                const okLain = validateLainLain(true);

                                                if (!okKategori || !okLain) {
                                                    e.preventDefault();
                                                    if (!okKategori) {
                                                        // fokuskan ke area kategori
                                                        document.querySelector('.kategori-checkbox')?.focus();
                                                    } else if (!okLain) {
                                                        LAINLAIN_INPUT()?.focus();
                                                    }
                                                    return false;
                                                }
                                            });
                                        }
                                    });
                                </script>

                                <!-- Job Safety Analysis -->
                                <h4 style="color: #1c8c90; font-weight: bold;">3. Job Safety Analysis</h4>
                                <div style="border-top: 3px solid #1c8c90; margin: 20px 0;"></div>
                                <div class="row mb-3">
                                    <div class="col-md-12">
                                        <label for="analisis" class="form-label">Tabel Analisis <span
                                                style="color: red;">*</span></label><br>
                                        <code> Geser <i class="fas fa-arrows-alt-v text-danger"></i> ke atas/ke bawah untuk
                                            mengubah urutan
                                        </code>

                                        <div class="table-responsive">
                                            <table class="table table-bordered" id="table_analisis">
                                                <thead>
                                                    <tr>
                                                        <th style="width: 50px;">No</th>
                                                        <th>Urutan Langkah Tugas</th>
                                                        <th>Potensi Bahaya</th>
                                                        <th>Akibat/Kerugian</th>
                                                        <th>Rekomendasi Pencegahan</th>
                                                        <th>Aksi</th> <!-- Kolom untuk tombol hapus -->
                                                    </tr>
                                                </thead>
                                                @php
                                                    // Ambil old() atau default 3 baris
                                                    $oldLangkah = old('langkah_tugas', [
                                                        'Persiapan Alat Kerja',
                                                        '',
                                                        'Membersihkan Area Kerja',
                                                    ]);
                                                    $oldPotensi = old(
                                                        'potensi_bahaya',
                                                        array_fill(0, count($oldLangkah), ''),
                                                    );
                                                    $oldAkibat = old(
                                                        'akibat_kerugian',
                                                        array_fill(0, count($oldLangkah), ''),
                                                    );
                                                    $oldRekom = old(
                                                        'rekomendasi_pencegahan',
                                                        array_fill(0, count($oldLangkah), ''),
                                                    );

                                                    // Samakan panjang semua array
                                                    $n = max(
                                                        count($oldLangkah),
                                                        count($oldPotensi),
                                                        count($oldAkibat),
                                                        count($oldRekom),
                                                    );
                                                    $oldLangkah = array_pad($oldLangkah, $n, '');
                                                    $oldPotensi = array_pad($oldPotensi, $n, '');
                                                    $oldAkibat = array_pad($oldAkibat, $n, '');
                                                    $oldRekom = array_pad($oldRekom, $n, '');
                                                @endphp
                                                <tbody id="tbody_analisis">
                                                    @for ($i = 0; $i < $n; $i++)
                                                        @php
                                                            $isFirst = $i === 0;
                                                            $isLast = $i === $n - 1;
                                                            $isFixed = $isFirst || $isLast;
                                                            // Tetap jaga default untuk fixed row kalau user tidak mengisi
                                                            $valLangkah = $oldLangkah[$i] ?? '';
                                                            if ($isFirst && $valLangkah === '') {
                                                                $valLangkah = 'Persiapan Alat Kerja';
                                                            }
                                                            if ($isLast && $valLangkah === '') {
                                                                $valLangkah = 'Membersihkan Area Kerja';
                                                            }
                                                        @endphp

                                                        <tr class="{{ $isFixed ? 'fixed-row' : 'dynamic-row' }}">
                                                            <td class="row-number text-center">
                                                                <i class="fas fa-arrows-alt-v me-1 text-secondary drag-icon"
                                                                    title="Geser ke atas/bawah"></i>
                                                                <span class="number-label"></span>
                                                            </td>
                                                            <td>
                                                                <textarea class="form-control" name="langkah_tugas[]" rows="4">{{ $valLangkah }}</textarea>
                                                            </td>
                                                            <td>
                                                                <textarea class="form-control" name="potensi_bahaya[]" rows="4">{{ $oldPotensi[$i] }}</textarea>
                                                            </td>
                                                            <td>
                                                                <textarea class="form-control" name="akibat_kerugian[]" rows="4">{{ $oldAkibat[$i] }}</textarea>
                                                            </td>
                                                            <td>
                                                                <textarea class="form-control" name="rekomendasi_pencegahan[]" rows="4">{{ $oldRekom[$i] }}</textarea>
                                                            </td>
                                                            <td>
                                                                @unless ($isFixed)
                                                                    <button type="button" class="btn btn-danger"
                                                                        onclick="deleteRow(this)">Hapus</button>
                                                                @endunless
                                                            </td>
                                                        </tr>
                                                    @endfor
                                                </tbody>
                                            </table>
                                        </div>
                                        <button type="button" class="btn btn-success" onclick="addRow()">Tambah
                                            Baris</button>
                                    </div>
                                    <div id="feedback-jsa" class="invalid-feedback d-block" style="display:none;">
                                        <code>Lengkapi seluruh kolom JSA (Langkah Tugas, Potensi Bahaya, Akibat, Rekomendasi
                                            Pencegahan). Minimal
                                            ada 1 baris di tengah yang terisi.</code>
                                    </div>
                                    <script>
                                        function validateJSA() {
                                            const fb = document.getElementById('feedback-jsa');
                                            if (fb) fb.style.display = 'none';

                                            const tbody = document.getElementById('tbody_analisis');
                                            if (!tbody) return {
                                                ok: true
                                            };

                                            const rows = Array.from(tbody.querySelectorAll('tr'));
                                            if (rows.length < 2) {
                                                // harusnya selalu ada baris pertama & terakhir
                                                if (fb) fb.style.display = 'block';
                                                return {
                                                    ok: false,
                                                    firstEl: tbody
                                                };
                                            }

                                            // hitung baris dinamis (tengah)
                                            const middleRows = rows.slice(1, -1);
                                            const hasAtLeastOneMiddle = middleRows.length > 0;

                                            let ok = true;
                                            let firstInvalid = null;
                                            const errors = []; // kumpulkan nomor baris dan kolom kosong

                                            // clear state lama
                                            tbody.querySelectorAll('textarea').forEach(t => t.classList.remove('is-invalid'));

                                            rows.forEach((tr, idx) => {
                                                const tds = tr.querySelectorAll('td');
                                                // indeks kolom: 0=No, 1=Langkah, 2=Potensi, 3=Akibat, 4=Rekomendasi
                                                const langkah = tds[1]?.querySelector('textarea');
                                                const potensi = tds[2]?.querySelector('textarea');
                                                const akibat = tds[3]?.querySelector('textarea');
                                                const rekom = tds[4]?.querySelector('textarea');

                                                const emptyCols = [];
                                                if (!langkah || !langkah.value.trim()) {
                                                    emptyCols.push('Langkah');
                                                    langkah?.classList.add('is-invalid');
                                                }
                                                if (!potensi || !potensi.value.trim()) {
                                                    emptyCols.push('Potensi');
                                                    potensi?.classList.add('is-invalid');
                                                }
                                                if (!akibat || !akibat.value.trim()) {
                                                    emptyCols.push('Akibat');
                                                    akibat?.classList.add('is-invalid');
                                                }
                                                if (!rekom || !rekom.value.trim()) {
                                                    emptyCols.push('Rekomendasi');
                                                    rekom?.classList.add('is-invalid');
                                                }

                                                if (emptyCols.length) {
                                                    ok = false;
                                                    const rowNo = tr.querySelector('.number-label')?.textContent || (idx + 1);
                                                    errors.push(`Baris ${rowNo}: ${emptyCols.join(', ')}`);
                                                    if (!firstInvalid) firstInvalid = langkah || potensi || akibat || rekom || tr;
                                                }
                                            });

                                            // wajib minimal 1 baris dinamis
                                            if (!hasAtLeastOneMiddle) {
                                                ok = false;
                                                if (!firstInvalid) firstInvalid = tbody;
                                                errors.unshift('Minimal punya 1 baris JSA di tengah (selain baris pertama & terakhir).');
                                            }

                                            if (!ok && fb) fb.style.display = 'block';

                                            return {
                                                ok,
                                                errors,
                                                firstEl: firstInvalid
                                            };
                                        }
                                    </script>

                                </div>

                                <hr>
                                <!-- Bukti Pendukung -->
                                <h4 style="color: #1c8c90; font-weight: bold;">4. Bukti Pendukung</h4>
                                <div style="border-top: 3px solid #1c8c90; margin: 20px 0;"></div>
                                <div class="row">
                                    <!-- Upload Image 1: Foto APD -->
                                    <div class="col-sm-6">
                                        <div class="position-relative">
                                            <label class="form-label">Foto APD</label><br>
                                            <label for="image-upload-apd"
                                                class="btn btn-xxl btn-icon-only bg-gradient-primary position-absolute bottom-0 mb-n2">
                                                <i class="fa fa-pen" title="Edit Image"></i>
                                            </label>
                                            <span class="h-12 w-12 rounded-full overflow-hidden bg-gray-100">
                                                <img src="{{ asset('/storage/noimage.png') }}" id="image-preview-apd"
                                                    class="w-30 border-radius-lg shadow-sm"
                                                    data-prev-src="{{ asset('/storage/noimage.png') }}"
                                                    data-bs-toggle="modal" data-bs-target="#imageModal"
                                                    onclick="openFullSizeImage('image-preview-apd')">
                                            </span>
                                        </div>
                                        <input type="file" id="image-upload-apd" name="foto_apd" style="display:none"
                                            accept="image/png,image/jpeg">
                                        <p class="text-primary text-xs pt-3 mb-0">Maksimal Size: <b>2048 KB</b></p>
                                        <p class="text-primary text-xs pt-1">Format Image: <b>PNG, JPG, JPEG</b></p>
                                    </div>

                                    <!-- Upload Image 2: Foto Alat Kerja -->
                                    <div class="col-sm-6">
                                        <div class="position-relative">
                                            <label class="form-label">Foto Alat Kerja</label><br>
                                            <label for="image-upload-alat-kerja"
                                                class="btn btn-xxl btn-icon-only bg-gradient-primary position-absolute bottom-0 mb-n2">
                                                <i class="fa fa-pen" title="Edit Image"></i>
                                            </label>
                                            <span class="h-12 w-12 rounded-full overflow-hidden bg-gray-100">
                                                <img src="{{ asset('/storage/noimage.png') }}"
                                                    id="image-preview-alat-kerja" class="w-30 border-radius-lg shadow-sm"
                                                    data-prev-src="{{ asset('/storage/noimage.png') }}"
                                                    data-bs-toggle="modal" data-bs-target="#imageModal"
                                                    onclick="openFullSizeImage('image-preview-alat-kerja')">
                                            </span>
                                        </div>
                                        <input type="file" id="image-upload-alat-kerja" name="foto_alat_kerja"
                                            style="display:none" accept="image/png,image/jpeg">
                                        <p class="text-primary text-xs pt-3 mb-0">Maksimal Size: <b>2048 KB</b></p>
                                        <p class="text-primary text-xs pt-1">Format Image: <b>PNG, JPG, JPEG</b></p>
                                    </div>

                                    <!-- Modal for Full Size Image Preview -->
                                    <div class="modal fade" id="imageModal" tabindex="-1"
                                        aria-labelledby="imageModalLabel" aria-hidden="true">
                                        <div class="modal-dialog modal-dialog-centered">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <h5 class="modal-title" id="imageModalLabel">Full Size Image</h5>
                                                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                        aria-label="Close"></button>
                                                </div>
                                                <div class="modal-body">
                                                    <img id="full-image" src="{{ asset('/storage/noimage.png') }}"
                                                        alt="Full size image" class="img-fluid">
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <script>
                                        function validateRequiredImages() {
                                            const MAX = 2 * 1024 * 1024; // 2MB
                                            const MIME_OK = ['image/png', 'image/jpeg'];
                                            const EXT_OK = ['png', 'jpg', 'jpeg'];

                                            const fields = [{
                                                    inputId: 'image-upload-apd',
                                                    previewId: 'image-preview-apd',
                                                    label: 'Foto APD'
                                                },
                                                {
                                                    inputId: 'image-upload-alat-kerja',
                                                    previewId: 'image-preview-alat-kerja',
                                                    label: 'Foto Alat Kerja'
                                                }
                                            ];

                                            let ok = true;
                                            const errors = [];
                                            let firstEl = null;

                                            fields.forEach(f => {
                                                const input = document.getElementById(f.inputId);
                                                const img = document.getElementById(f.previewId);

                                                // reset state lama
                                                input?.classList.remove('is-invalid');
                                                img?.classList.remove('img-invalid');

                                                const file = input?.files?.[0];

                                                // OPSIONAL: foto tidak wajib saat simpan (wajib saat POST)
                                                if (!file) {
                                                    // Tidak ada file, skip validasi (allowed)
                                                    return;
                                                }

                                                const ext = (file.name.split('.').pop() || '').toLowerCase();
                                                const typeOk = MIME_OK.includes(file.type) || EXT_OK.includes(ext);
                                                if (!typeOk) {
                                                    ok = false;
                                                    errors.push(`${f.label} harus PNG/JPG/JPEG.`);
                                                    input?.classList.add('is-invalid');
                                                    img?.classList.add('img-invalid');
                                                    if (!firstEl) firstEl = input || img;
                                                    return;
                                                }

                                                if (file.size > MAX) {
                                                    ok = false;
                                                    const mb = (file.size / 1048576).toFixed(2);
                                                    errors.push(`${f.label} melebihi 2MB (saat ini ${mb} MB).`);
                                                    input?.classList.add('is-invalid');
                                                    img?.classList.add('img-invalid');
                                                    if (!firstEl) firstEl = input || img;
                                                    return;
                                                }
                                            });

                                            return {
                                                ok,
                                                errors,
                                                firstEl
                                            };
                                        }

                                        document.addEventListener('DOMContentLoaded', () => {
                                            const MAX = 2 * 1024 * 1024; // 2 MB
                                            const MIME_OK = ['image/png', 'image/jpeg'];
                                            const EXT_OK = ['png', 'jpg', 'jpeg'];

                                            const sizeHuman = n => n < 1024 ? n + ' B' : (n < 1048576 ? (n / 1024).toFixed(1) + ' KB' : (n /
                                                1048576).toFixed(2) + ' MB');
                                            const warn = html => Swal.fire({
                                                icon: 'warning',
                                                title: 'File tidak valid',
                                                html,
                                                confirmButtonText: 'OK'
                                            });

                                            function hook(inputId, previewId) {
                                                const input = document.getElementById(inputId);
                                                const img = document.getElementById(previewId);

                                                input.addEventListener('change', () => {
                                                    const f = input.files?.[0];
                                                    if (!f) return;

                                                    const ext = (f.name.split('.').pop() || '').toLowerCase();
                                                    const okType = MIME_OK.includes(f.type) || EXT_OK.includes(ext);

                                                    const errors = [];
                                                    if (!okType) errors.push('Format harus PNG/JPG/JPEG.');
                                                    if (f.size > MAX) errors.push(
                                                        `Ukuran file maksimal 2 MB. File Anda: ${sizeHuman(f.size)}.`);

                                                    if (errors.length) {
                                                        // reset input & kembalikan preview ke versi valid terakhir
                                                        warn(errors.join('<br>'));
                                                        input.value = '';
                                                        img.src = img.dataset.prevSrc || img.src;
                                                        return;
                                                    }

                                                    // valid → revoke blob lama (jika ada), set preview, simpan sebagai prevSrc
                                                    if (img.dataset.blobUrl) URL.revokeObjectURL(img.dataset.blobUrl);
                                                    const url = URL.createObjectURL(f);
                                                    img.src = url;
                                                    img.dataset.blobUrl = url;
                                                    img.dataset.prevSrc = url; // jadikan ini preview valid terakhir
                                                });
                                            }

                                            hook('image-upload-apd', 'image-preview-apd');
                                            hook('image-upload-alat-kerja', 'image-preview-alat-kerja');
                                        });

                                        // Function to update image preview when a new file is selected
                                        document.getElementById('image-upload-apd').onchange = function(evt) {
                                            const [file] = document.getElementById('image-upload-apd').files;
                                            if (file) {
                                                document.getElementById('image-preview-apd').src = URL.createObjectURL(file);
                                            }
                                        };

                                        document.getElementById('image-upload-alat-kerja').onchange = function(evt) {
                                            const [file] = document.getElementById('image-upload-alat-kerja').files;
                                            if (file) {
                                                document.getElementById('image-preview-alat-kerja').src = URL.createObjectURL(file);
                                            }
                                        };

                                        // Trigger file input when edit button is clicked
                                        document.getElementById('image-upload-edit-apd').onclick = function() {
                                            document.getElementById('image-upload-apd').click();
                                        };

                                        document.getElementById('image-upload-edit-alat-kerja').onclick = function() {
                                            document.getElementById('image-upload-alat-kerja').click();
                                        };

                                        // Open Full Size Image in Modal
                                        function openFullSizeImage(imageId) {
                                            var imageSrc = document.getElementById(imageId).src;
                                            document.getElementById('full-image').src = imageSrc;
                                        };
                                    </script>
                                    <hr>
                                    <br>
                                    <!-- Approval -->
                                    <h4 style="color: #1c8c90; font-weight: bold;">5. Persetujuan</h4>
                                    <div style="border-top: 3px solid #1c8c90; margin: 20px 0;"></div>
                                    <p> Pilih PIC Kerja dan Area sesuai dengan arahan !! </p>

                                    <div class="row">

                                        <div class="row mb-3">
                                            <div class="col-md-6">
                                                <label for="pic_lokasi" class="form-label">PIC Kerja <span
                                                        style="color:red">*</span></label>
                                                @php $oldLokasi = old('pic_lokasi'); @endphp
                                                <select class="form-select select2" id="pic_lokasi" name="pic_lokasi"
                                                    required>
                                                    <option value="">-- Pilih PIC Kerja --</option>
                                                    @foreach ($pic_kerja as $kerja)
                                                        <option value="{{ $kerja->id }}" @selected((string) $oldLokasi === (string) $kerja->id)>
                                                            {{ $kerja->firstname }} - {{ $kerja->lastname }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <!-- PIC AREA -->
                                            <div class="col-md-6">
                                                <label for="pic_area" class="form-label">PIC Area <span
                                                        style="color: red;">*</span></label>
                                                @php $oldPic = old('pic_area'); @endphp
                                                <select class="form-select select2" id="pic_area" name="pic_area"
                                                    required>
                                                    <option value="">-- Pilih PIC Area --</option>
                                                    @foreach ($pic_area as $parea)
                                                        <option value="{{ $parea->id }}" @selected((string) $oldPic === (string) $parea->id)>
                                                            {{ $parea->firstname }} - {{ $parea->lastname }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>

                                        </div>
                                        <div class="card-body text-center">
                                            {{-- <button type="submit" class="btn btn-primary">Simpan</button> --}}

                                            <button class="btn btn-primary mb-0"
                                                onclick="event.preventDefault(); showAgreementModal();">
                                                <i class="fas fa-floppy-disk me-1"></i><span class="font-weight-bold">
                                                    Simpan</span>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    {{-- check flag js on dmenu --}}
    @if ($jsmenu == '1')
        @if (view()->exists("js.{$dmenu}"))
            @push('addjs')
                {{-- file js in folder (resources/views/js) --}}
                @include('js.' . $dmenu);
            @endpush
        @else
            @push('addjs')
                <script>
                    Swal.fire({
                        title: 'JS Not Found!!',
                        text: 'Please Create File JS',
                        icon: 'error',
                        confirmButtonColor: '#028284'
                    });
                </script>
            @endpush
        @endif
    @endif
@endsection
@push('js')
    <style>
        #tbody_analisis tr {
            cursor: default;
            /* default tidak bisa drag */
        }

        .drag-icon {
            cursor: grab;
            /* hanya ikon yang bisa drag */
        }

        .drag-icon:active {
            cursor: grabbing;
        }

        .sortable-ghost {
            background: #ffeeba !important;
            opacity: 0.8;
        }

        .select2-results__option--highlighted {
            background-color: #0d6efd !important;
            color: #fff !important;
        }
    </style>

    <script>
        $(document).ready(function() {
            $('#locationTableBody').DataTable({
                paging: true,
                searching: true,
                ordering: true,
                responsive: true,
                lengthMenu: [5, 10, 25],
                pageLength: 10,
                language: {
                    search: "Cari:",
                    lengthMenu: "Tampilkan _MENU_ lokasi",
                    info: "Menampilkan _START_ - _END_ dari _TOTAL_ lokasi",
                    infoEmpty: "Tidak ada data",
                    zeroRecords: "Lokasi tidak ditemukan",
                    paginate: {
                        previous: "Sebelumnya",
                        next: "Berikutnya"
                    }
                }
            });

            // === Inisialisasi Select2 global (semua .select2) ===
            initSelect2();

            // === Global Fix Select2 Focus + Highlight (cukup sekali di seluruh halaman) ===
            if (!window.__select2_focus_fix__) {
                $(document).on('select2:open', () => {
                    setTimeout(() => {
                        // Fokus ke kolom pencarian
                        const el = document.querySelector(
                            '.select2-container--open .select2-search__field');
                        if (el) el.focus();

                        // Highlight hasil pertama (kadang hilang di theme bootstrap)
                        const results = document.querySelectorAll('.select2-results__option');
                        if (results.length > 0) {
                            results.forEach(r => r.classList.remove(
                                'select2-results__option--highlighted'));
                            results[0].classList.add('select2-results__option--highlighted');
                        }
                    }, 50);
                });
                window.__select2_focus_fix__ = true;
            }
        });
        document.addEventListener('DOMContentLoaded', function() {
            const tbody = document.getElementById('tbody_analisis');

            new Sortable(tbody, {
                animation: 150,
                // handle: 'td',
                handle: '.drag-icon', // hanya ikon yg bisa drag
                draggable: 'tr:not(.fixed-row)',
                onEnd: function(evt) {
                    const from = evt.oldIndex;
                    const to = evt.newIndex;

                    const rows = Array.from(tbody.children);
                    const firstFixed = rows[0];
                    const lastFixed = rows[rows.length - 1];

                    // Cegah pindah ke atas pertama atau bawah terakhir
                    if (evt.newIndex === 0 || evt.newIndex === rows.length - 1) {
                        evt.from.insertBefore(evt.item, rows[from < to ? to + 1 : to]);
                    }

                    updateRowNumbers();
                }
            });

            updateRowNumbers();
        });

        // === Fungsi untuk inisialisasi Select2 (biar bisa dipanggil ulang kapanpun) ===
        function initSelect2() {
            $('.select2').select2({
                // theme: 'bootstrap-5',
                width: '100%',
                placeholder: '-- Pilih --',
                allowClear: true
            });
        }

        function addRow() {
            const tbody = document.getElementById('tbody_analisis');
            const rows = tbody.querySelectorAll('tr');
            const lastIndex = rows.length - 1;

            const newRow = document.createElement('tr');

            newRow.innerHTML = `
                    <td class="row-number text-center">
                        <i class="fas fa-arrows-alt-v me-1 text-secondary drag-icon" title="Geser ke atas/bawah"></i>
                        <span class="number-label"></span>
                    </td>
                    <td><textarea class="form-control" name="langkah_tugas[]" rows="4"></textarea></td>
                    <td><textarea class="form-control" name="potensi_bahaya[]" rows="4"></textarea></td>
                    <td><textarea class="form-control" name="akibat_kerugian[]" rows="4"></textarea></td>
                    <td><textarea class="form-control" name="rekomendasi_pencegahan[]" rows="4"></textarea></td>
                    <td><button type="button" class="btn btn-danger" onclick="deleteRow(this)">Hapus</button></td>
                `;

            tbody.insertBefore(newRow, rows[lastIndex]);
            updateRowNumbers();
        }

        function deleteRow(button) {
            const row = button.closest('tr');
            row.remove();
            updateRowNumbers();
        }

        function updateRowNumbers() {
            const rows = document.querySelectorAll('#tbody_analisis tr');
            let num = 1;
            rows.forEach((tr) => {
                const numberSpan = tr.querySelector('.number-label');
                if (numberSpan) {
                    numberSpan.textContent = num++;
                }
            });
        }

        (function() {
            // ====== Data dari server ======
            const ROLES = @json($rolesArr);
            const hasRole = (r) => ROLES.includes(r);
            const OPTIONS = @json($tenaga_kerja);

            // Old values
            const OLD_JUMLAH = @json(old('tenaga_kerja', null));
            const OLD_TK = @json(old('tenaga_kerja_list', []));
            const OLD_KOMP = @json(old('kompetensi_list', []));
            const OLD_BPJS = @json(old('bpjs_option_list', []));
            const OLD_BPJS_TEMP = @json($OLD_BPJS_TEMP ?? []);

            const NOIMG = @json(asset('/storage/noimage.png'));
            const MAX_FILE_SIZE = 3 * 1024 * 1024;
            const ALLOWED_MIME = ['image/jpeg', 'image/png', 'application/pdf'];

            const warn = (msg) => window.Swal ? Swal.fire({
                icon: 'warning',
                title: 'File tidak valid',
                text: msg
            }) : alert(msg);

            // ===== Select2 helper (robust) =====
            function initSelect2One(el) {
                if (!(window.$ && $.fn.select2) || !el) return;
                const $el = $(el);
                if ($el.data('select2')) return; // jangan double init
                $el.select2({
                        // theme: 'bootstrap-5',
                        width: '100%',
                        placeholder: '-- pilih karyawan --',
                        allowClear: true,
                        dropdownParent: $(el).closest('.tk-row') // penting untuk z-index/width
                    })
                    .on('select2:select select2:clear change', () => refreshTKOptions());
            }

            // ===== Ambil semua nilai terpilih (kecuali kosong) =====
            function getPickedValues() {
                const vals = [];
                document.querySelectorAll("select[name^='tenaga_kerja_list']").forEach(sel => {
                    const v = (sel.value || '').trim();
                    if (v) vals.push(v);
                });
                return vals;
            }

            // ===== Disable opsi yang sudah dipakai select lain =====
            function refreshTKOptions() {
                const allSelects = Array.from(document.querySelectorAll("select[name^='tenaga_kerja_list']"));
                const picked = getPickedValues();

                allSelects.forEach(sel => {
                    const myVal = (sel.value || '').trim();

                    // enable dulu semua opsi selain placeholder
                    sel.querySelectorAll('option').forEach(opt => {
                        if (opt.value === '') return;
                        opt.disabled = false;
                    });

                    // disable semua value yang sudah dipakai di select lain
                    picked.forEach(val => {
                        if (!val) return;
                        if (val === myVal) return; // tetap aktif di select yang memilikinya
                        const opt = sel.querySelector(`option[value="${CSS.escape(val)}"]`);
                        if (opt) opt.disabled = true;
                    });

                    // refresh tampilan Select2 (kalau ada)
                    if (window.$ && $.fn.select2) $(sel).trigger('change.select2');
                });
            }

            // ===== Buat 1 baris TK (pakai struktur awalmu) =====
            function createTKRow(i) {
                const row = document.createElement('div');
                row.className = 'row mb-3 tk-row';
                row.dataset.index = i;

                // --- Kolom 1: Tenaga Kerja (STRUKTUR AWAL) ---
                const c1 = document.createElement('div');
                c1.className = 'col-md-4';
                const l1 = document.createElement('label');
                l1.className = 'form-label';
                l1.textContent = 'Tenaga Kerja - ' + (i + 1);

                const sel = document.createElement('select');
                sel.className = 'form-select select2';
                sel.name = `tenaga_kerja_list[${i}]`;

                // placeholder
                const opt0 = document.createElement('option');
                opt0.value = '';
                opt0.textContent = '-- pilih karyawan --';
                sel.appendChild(opt0);

                // opsi dari server
                OPTIONS.forEach(o => {
                    const opt = document.createElement('option');
                    opt.value = String(o.value);
                    opt.textContent = hasRole('venint') ? `${o.label} - ${o.department ?? '-'}` : o.label;
                    // restore (cara awal: flag selected pada option)
                    if (OLD_TK[i] != null && String(OLD_TK[i]) === String(o.value)) opt.selected = true;
                    sel.appendChild(opt);
                });

                c1.appendChild(l1);
                c1.appendChild(sel);

                // --- Kolom 2: Kompetensi ---
                const c2 = document.createElement('div');
                c2.className = 'col-md-4';
                c2.innerHTML = `
              <label class="form-label">Kompetensi - ${i + 1}</label>
              <input type="text" class="form-control" name="kompetensi_list[${i}]" required>
            `;
                if (OLD_KOMP[i] != null) c2.querySelector('input').value = OLD_KOMP[i];

                // --- Kolom 3: BPJS (singkat, sama seperti punyamu) ---
                const c3 = document.createElement('div');
                c3.className = 'col-md-4';
                if (hasRole('veneks')) {
                    c3.innerHTML = `
                <label class="form-label">BPJS - ${i + 1}</label>
                <select name="bpjs_option_list[${i}]" class="form-select mb-2" id="bpjs_option_${i}" onchange="toggleBPJSUpload(${i})">
                  <option value="menyusul">Menyusul</option>
                  <option value="memiliki">Saya memiliki BPJS</option>
                </select>
                <div id="bpjs_upload_wrapper_${i}" style="display:none;">
                  <div class="position-relative">
                    <label for="file_upload_${i}" class="btn btn-sm btn-icon-only bg-gradient-primary position-absolute bottom-0 mb-n2">
                      <i class="fa fa-pen" title="Upload BPJS"></i>
                    </label>
                    <span id="preview_wrapper_${i}">
                      <img src="${NOIMG}" id="preview_bpjs_${i}" class="w-50 border-radius-lg shadow-sm"
                           style="cursor: zoom-in" onclick="openFullSizeImage('preview_bpjs_${i}')">
                    </span>
                  </div>
                  <input type="file" class="form-control d-none" name="file_upload_list[${i}]" id="file_upload_${i}"
                         onchange="previewFile(event, ${i})" accept="image/png,image/jpeg,application/pdf">
                  <div id="bpjs_feedback_${i}" class="invalid-feedback d-block" style="display:none;">
                    <code>Wajib upload dokumen BPJS.</code>
                  </div>
                  <p class="text-primary text-xs pt-2 mb-0">Max size: <b>3072 KB</b></p>
                  <p class="text-primary text-xs pt-1">Format: <b>PNG, JPG, JPEG, PDF</b></p>
                </div>
              `;
                    // restore BPJS
                    const bpSel = c3.querySelector(`#bpjs_option_${i}`);
                    if (OLD_BPJS[i]) bpSel.value = OLD_BPJS[i];
                    if (bpSel.value === 'memiliki') {
                        const wrap = c3.querySelector(`#bpjs_upload_wrapper_${i}`);
                        const file = c3.querySelector(`#file_upload_${i}`);
                        wrap.style.display = 'block';
                        if (file) file.required = true;
                        if (OLD_BPJS_TEMP && OLD_BPJS_TEMP[i]) {
                            const prevWrap = c3.querySelector(`#preview_wrapper_${i}`);
                            const url = OLD_BPJS_TEMP[i];
                            if (String(url).toLowerCase().endsWith('.pdf')) {
                                prevWrap.innerHTML = `<a href="${url}" target="_blank">
                      <i class="fas fa-file-lines text-danger" style="font-size:80px"></i>
                      <p class="text-xs mt-1 mb-0 text-dark">BPJS.pdf</p></a>`;
                            } else {
                                prevWrap.innerHTML = `<img src="${url}" id="preview_bpjs_${i}" class="w-50 border-radius-lg shadow-sm"
                      style="cursor: zoom-in" onclick="openFullSizeImage('preview_bpjs_${i}')">`;
                            }
                        }
                    }
                } else {
                    c3.innerHTML = `
                <label class="form-label">BPJS - ${i + 1}</label>
                <select class="form-select" disabled><option value="Tidak Perlu" selected>Tidak Perlu BPJS</option></select>
                <input type="hidden" name="bpjs_option_list[${i}]" value="Tidak Perlu">
              `;
                }

                row.appendChild(c1);
                row.appendChild(c2);
                row.appendChild(c3);

                // tempel dulu ke DOM (supaya Select2 bisa ukur lebar), lalu init
                // (init di caller setelah append)
                return row;
            }

            // ===== Add/Remove baris TANPA reset yang lama =====
            window.updateTenagaKerja = function(forceCount = null) {
                const input = document.getElementById('tenaga_kerja');
                const container = document.getElementById('tenaga_kerja_detail');
                const max = parseInt(input.getAttribute('data-max')) || 0;

                let jumlah = forceCount ?? (parseInt(input.value) || 0);
                if (jumlah > max) {
                    jumlah = max;
                    input.value = max;
                    if (window.Swal) Swal.fire({
                        icon: 'warning',
                        title: 'Warning!',
                        text: 'Jumlah tenaga kerja yang memiliki Induction Card hanya ' + max + ' orang.'
                    });
                }

                const current = container.querySelectorAll('.tk-row').length;

                // tambah
                if (jumlah > current) {
                    for (let i = current; i < jumlah; i++) {
                        const row = createTKRow(i);
                        container.appendChild(row);
                        const sel = row.querySelector('select.select2');
                        initSelect2One(sel);
                    }
                    refreshTKOptions();
                }

                // hapus dari belakang
                if (jumlah < current) {
                    for (let i = current - 1; i >= jumlah; i--) {
                        const row = container.querySelector(`.tk-row[data-index="${i}"]`);
                        if (row) row.remove();
                    }
                    refreshTKOptions();
                }
            };

            // ===== Toggle BPJS upload =====
            window.toggleBPJSUpload = function(i) {
                const opt = document.getElementById(`bpjs_option_${i}`);
                const wrap = document.getElementById(`bpjs_upload_wrapper_${i}`);
                const file = document.getElementById(`file_upload_${i}`);
                const prev = document.getElementById(`preview_bpjs_${i}`);
                const fb = document.getElementById(`bpjs_feedback_${i}`);
                if (!opt || !wrap) return;

                if (opt.value === 'memiliki') {
                    wrap.style.display = 'block';
                    if (file) file.required = true;
                } else {
                    wrap.style.display = 'none';
                    if (file) {
                        file.required = false;
                        file.value = '';
                        file.classList.remove('is-invalid');
                    }
                    if (prev) prev.src = NOIMG;
                    if (fb) fb.style.display = 'none';
                }
            };

            // ===== Preview file BPJS =====
            window.previewFile = function(e, i) {
                const file = e.target.files[0];
                const previewWrapper = document.getElementById(`preview_wrapper_${i}`);
                if (!file || !previewWrapper) return;

                if (file.type === 'application/pdf') {
                    previewWrapper.innerHTML = `<a href="${URL.createObjectURL(file)}" target="_blank">
                <i class="fas fa-file-lines text-danger" style="font-size:80px"></i>
                <p class="text-xs mt-1 mb-0 text-dark">${file.name}</p></a>`;
                } else {
                    previewWrapper.innerHTML = `<img src="${URL.createObjectURL(file)}" id="preview_bpjs_${i}"
                class="w-50 border-radius-lg shadow-sm" style="cursor: zoom-in"
                onclick="openFullSizeImage('preview_bpjs_${i}')">`;
                }
            };

            // ===== Render awal & validasi submit =====
            document.addEventListener('DOMContentLoaded', function() {
                const jumlahEl = document.getElementById('tenaga_kerja');
                const init = (OLD_JUMLAH !== null && !isNaN(parseInt(OLD_JUMLAH))) ?
                    parseInt(OLD_JUMLAH) : (Array.isArray(OLD_TK) ? OLD_TK.length : 0);

                jumlahEl.value = init;
                updateTenagaKerja(init); // auto-init + refresh disable

                const form = jumlahEl.closest('form');
                if (form) {
                    form.addEventListener('submit', (e) => {
                        // Validasi format/ukuran file (BPJS)
                        const files = form.querySelectorAll("input[name^='file_upload_list']");
                        for (const inp of files) {
                            const f = inp.files?.[0];
                            if (!f) continue;
                            if (!ALLOWED_MIME.includes(f.type) || f.size > MAX_FILE_SIZE) {
                                e.preventDefault();
                                warn(
                                    'Ada file BPJS yang tidak valid (format/ukuran). Mohon diperbaiki terlebih dahulu.'
                                );
                                inp.focus();
                                return;
                            }
                        }
                    });
                }
            });
        })();

        // Function to toggle BPJS upload visibility
        function toggleBPJSUpload(index) {
            let option = document.getElementById('bpjs_option_' + index);
            let wrapper = document.getElementById('bpjs_upload_wrapper_' + index);
            let input = document.getElementById('file_upload_' + index);
            let preview = document.getElementById('preview_bpjs_' + index);

            if (option && wrapper) {
                if (option.value === 'memiliki') {
                    wrapper.style.display = 'block';
                } else {
                    wrapper.style.display = 'none';
                    if (input) input.value = '';
                    if (preview) preview.src = '{{ asset('/storage/noimage.png') }}';
                }
            }
        }

        function toggleNomorPOField() {
            var poOption = document.getElementById('po_option').value;
            var nomorPOField = document.getElementById('nomor_po_field');

            if (poOption === 'memiliki') {
                nomorPOField.style.display = 'block'; // Tampilkan field Nomor PO
            } else {
                nomorPOField.style.display = 'none'; // Sembunyikan field Nomor PO
            }
        };

        // Panggil fungsi ini untuk inisialisasi tampilan saat halaman pertama kali dimuat
        toggleNomorPOField();
    </script>
    <style>
        /* Dropdown item yang disabled (Select2) */
        .select2-container .select2-results__option[aria-disabled="true"],
        .select2-container .select2-results__option--disabled {
            background-color: #e9ecef;
            /* bg-secondary */
            color: #6c757d;
            /* text-secondary */
            cursor: not-allowed;
            opacity: .95;
        }

        /* Saat hover/focus tetap abu-abu */
        .select2-container .select2-results__option[aria-disabled="true"].select2-results__option--highlighted {
            background-color: #e9ecef !important;
            color: #6c757d !important;
        }

        /* Fallback untuk native <select> (kalau Select2 tidak aktif) */
        select.form-select option:disabled {
            background-color: #e9ecef;
            color: #6c757d;
        }

        /* wrapper scroll */
        .table-responsive {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            /* smooth di iOS */
            scrollbar-gutter: stable;
            /* reservasi ruang scrollbar (Chrome/Edge modern) */
            position: relative;
            /* buat hint badge */
        }

        /* paksa tabel punya lebar minimum biar pasti overflow */
        #table_analisis {
            min-width: 900px;
        }

        /* sesuaikan angka ini */

        /* ==== Style scrollbar (WebKit: Chrome/Edge/Safari) ==== */
        .table-responsive::-webkit-scrollbar {
            height: 8px;
        }

        .table-responsive::-webkit-scrollbar-track {
            background: #f1f3f5;
            border-radius: 999px;
        }

        .table-responsive::-webkit-scrollbar-thumb {
            background: #b8c0c8;
            border-radius: 999px;
        }

        .table-responsive:hover::-webkit-scrollbar-thumb {
            background: #8a93a0;
        }

        /* ==== Firefox ==== */
        .table-responsive {
            scrollbar-width: thin;
            scrollbar-color: #8a93a0 #f1f3f5;
        }

        /* ==== Hint di layar kecil: ajak user geser ==== */
        @media (max-width: 575.98px) {
            .table-responsive::after {
                content: 'Geser ke kanan →';
                position: absolute;
                right: .5rem;
                bottom: .25rem;
                padding: .2rem .5rem;
                font-size: .8rem;
                color: #6c757d;
                background: linear-gradient(to right, transparent, rgba(255, 255, 255, .95));
                border-radius: .4rem;
                pointer-events: none;
            }
        }

        .border-invalid {
            border: 1px solid #dc3545 !important;
        }

        .is-invalid {
            border-color: #dc3545 !important;
        }

        .img-invalid {
            outline: 2px solid #dc3545;
            outline-offset: 2px;
            border-radius: .5rem;
        }
    </style>

    {{-- ========== AUTO-SAVE FORM KE LOCAL STORAGE ========== --}}
    <script>
        (function() {
            const LS_KEY = 'permit_form_draft';
            const FORM_SELECTOR = 'form[action="{{ route('permohonan.permit.store') }}"]';

            // Field yang TIDAK perlu disimpan (readonly / auto-generated / file)
            const SKIP_NAMES = ['_token', 'nomor_surat', 'status_permit', 'masa_berlaku', 'nama_vendor', 'nama_users'];

            function getForm() {
                return document.querySelector(FORM_SELECTOR);
            }

            // Helper: cari element by name tanpa CSS selector (aman untuk name dengan bracket)
            function findByName(form, name) {
                return Array.from(form.elements).filter(function(el) {
                    return el.name === name;
                });
            }

            // SAVE: kumpulkan semua data form ke object lalu simpan
            function saveToLS() {
                var form = getForm();
                if (!form) return;

                var data = {};

                // Text, number, date, hidden, tel inputs
                form.querySelectorAll('input[name], textarea[name], select[name]').forEach(function(el) {
                    var name = el.name;
                    if (!name || SKIP_NAMES.indexOf(name) !== -1) return;
                    if (el.type === 'file') return;

                    if (el.type === 'checkbox') {
                        if (!data[name]) data[name] = [];
                        if (el.checked) data[name].push(el.value);
                    } else if (el.type === 'radio') {
                        if (el.checked) data[name] = el.value;
                    } else {
                        if (name.indexOf('[]', name.length - 2) !== -1) {
                            if (!data[name]) data[name] = [];
                            data[name].push(el.value);
                        } else {
                            data[name] = el.value;
                        }
                    }
                });

                // Simpan jumlah baris JSA (dynamic rows)
                data['__jsa_row_count'] = document.querySelectorAll('#tbody_analisis tr').length;

                // Simpan jumlah tenaga kerja
                var tkInput = document.getElementById('tenaga_kerja');
                if (tkInput) data['__tenaga_kerja_count'] = parseInt(tkInput.value) || 0;

                // Simpan label tombol lokasi (nama lokasi yang dipilih)
                var btnLokasi = document.getElementById('openLocationModal');
                if (btnLokasi) data['__lokasi_label'] = btnLokasi.textContent.trim();

                try {
                    localStorage.setItem(LS_KEY, JSON.stringify(data));
                } catch (e) {
                    /* localStorage penuh atau tidak tersedia */
                }
            }

            // RESTORE: isi kembali form dari localStorage
            function restoreFromLS() {
                var raw;
                try {
                    raw = localStorage.getItem(LS_KEY);
                } catch (e) {
                    return;
                }
                if (!raw) return;

                var data;
                try {
                    data = JSON.parse(raw);
                } catch (e) {
                    return;
                }

                var form = getForm();
                if (!form) return;

                // Jika ada old() dari server (Laravel redirect back), jangan timpa
                var hasServerOld = {{ $errors->any() ? 'true' : 'false' }};
                if (hasServerOld) return;

                // -- Restore jumlah tenaga kerja dulu (agar row-nya terbentuk) --
                var tkCount = data['__tenaga_kerja_count'] || 0;
                if (tkCount > 0) {
                    var tkInput = document.getElementById('tenaga_kerja');
                    if (tkInput) {
                        tkInput.value = tkCount;
                        if (typeof updateTenagaKerja === 'function') updateTenagaKerja(tkCount);
                    }
                }

                // -- Restore JSA rows (tambah baris kalau kurang) --
                var jsaTarget = data['__jsa_row_count'] || 0;
                if (jsaTarget > 0) {
                    var currentRows = document.querySelectorAll('#tbody_analisis tr').length;
                    for (var i = currentRows; i < jsaTarget; i++) {
                        if (typeof addRow === 'function') addRow();
                    }
                }

                // Kumpulkan nama-nama checklist detail untuk di-restore nanti
                var checklistKeys = [];

                // == PHASE 1: Restore field-field biasa (input, select, textarea, checkbox) ==
                Object.keys(data).forEach(function(name) {
                    if (name.charAt(0) === '_' && name.charAt(1) === '_') return;
                    if (SKIP_NAMES.indexOf(name) !== -1) return;

                    // Checklist detail → simpan dulu, restore di phase 2
                    if (name.indexOf('checklist[') === 0) {
                        checklistKeys.push(name);
                        return;
                    }

                    var val = data[name];

                    if (Array.isArray(val)) {
                        var els = findByName(form, name);
                        if (els.length === 0) return;

                        if (els[0].type === 'checkbox') {
                            els.forEach(function(el) {
                                el.checked = val.indexOf(el.value) !== -1;
                            });
                        } else {
                            els.forEach(function(el, idx) {
                                if (idx < val.length && val[idx] !== undefined) {
                                    el.value = val[idx];
                                }
                            });
                        }
                    } else {
                        var els2 = findByName(form, name);
                        if (els2.length === 0) return;
                        var el = els2[0];

                        if (el.type === 'radio') {
                            els2.forEach(function(r) {
                                r.checked = (r.value === val);
                            });
                        } else if (el.type === 'checkbox') {
                            el.checked = !!val;
                        } else {
                            el.value = val;
                        }
                    }
                });

                // -- Restore label tombol lokasi --
                if (data['lokasi'] && data['__lokasi_label'] && data['__lokasi_label'] !== 'Pilih Lokasi') {
                    var btnLokasi = document.getElementById('openLocationModal');
                    if (btnLokasi) btnLokasi.textContent = data['__lokasi_label'];
                }

                // Trigger UI updates
                if (typeof toggleNomorPOField === 'function') toggleNomorPOField();

                // == PHASE 2: Rebuild checklist detail + restore checkboxes ==
                if (typeof updateChecklist === 'function') {
                    updateChecklist();
                }

                // Restore checklist detail checkboxes (menggunakan findByName, bukan querySelectorAll)
                checklistKeys.forEach(function(name) {
                    var val = data[name];
                    if (!Array.isArray(val)) return;
                    var els = findByName(form, name);
                    els.forEach(function(el) {
                        if (el.type === 'checkbox') {
                            el.checked = val.indexOf(el.value) !== -1;
                        }
                    });
                });

                // -- Restore lain_lain_detail --
                if (data['lain_lain_detail']) {
                    var lainInput = document.getElementById('lain_lain_detail');
                    if (lainInput) lainInput.value = data['lain_lain_detail'];
                    if (typeof ensureHiddenForLainLain === 'function') ensureHiddenForLainLain();
                }

                // == PHASE 3: Restore Select2 fields (PIC Kerja, PIC Area, Tenaga Kerja) ==
                // Menggunakan jQuery ready untuk menjamin initSelect2() sudah selesai
                function restoreAllSelect2() {
                    // Restore PIC Kerja & PIC Area
                    ['pic_lokasi', 'pic_area'].forEach(function(fieldName) {
                        var val = data[fieldName];
                        if (!val) return;
                        var sel = document.getElementById(fieldName);
                        if (!sel) return;

                        var optExists = Array.from(sel.options).some(function(o) {
                            return String(o.value) === String(val);
                        });
                        if (!optExists) return;

                        sel.value = val;
                        if (window.$ && $.fn.select2 && $(sel).data('select2')) {
                            $(sel).val(val).trigger('change');
                        }
                    });

                    // Restore semua Select2 tenaga kerja yang sudah di-render
                    form.querySelectorAll("select[name^='tenaga_kerja_list']").forEach(function(sel) {
                        var name = sel.name;
                        var val = data[name];
                        if (!val) return;
                        sel.value = val;
                        if (window.$ && $.fn.select2 && $(sel).data('select2')) {
                            $(sel).val(val).trigger('change');
                        }
                    });

                    // Tampilkan notifikasi bahwa data di-restore
                    if (window.Swal) {
                        Swal.fire({
                            icon: 'info',
                            title: 'Data Draft Tersimpan',
                            text: 'Form telah diisi ulang dari data draft sebelumnya.',
                            toast: true,
                            position: 'top-end',
                            showConfirmButton: false,
                            timer: 3000,
                            timerProgressBar: true
                        });
                    }
                }

                // Gunakan jQuery ready agar semua initSelect2() pasti sudah selesai
                if (window.$ && typeof $.fn.ready === 'function') {
                    $(function() {
                        // Satu frame lagi untuk memastikan Select2 benar-benar rendered
                        requestAnimationFrame(function() {
                            restoreAllSelect2();
                        });
                    });
                } else {
                    // Fallback tanpa jQuery: tunggu lebih lama
                    setTimeout(restoreAllSelect2, 1000);
                }
            }

            // ===== CLEAR: hapus draft dari localStorage =====
            window.clearPermitDraft = function() {
                try {
                    localStorage.removeItem(LS_KEY);
                } catch (e) {}
            };

            // ===== EVENT LISTENERS =====
            document.addEventListener('DOMContentLoaded', function() {
                // Restore data saat halaman dimuat
                restoreFromLS();

                var form = getForm();
                if (!form) return;

                // Auto-save setiap ada perubahan input (debounced)
                var saveTimer;

                function debounceSave() {
                    clearTimeout(saveTimer);
                    saveTimer = setTimeout(saveToLS, 500);
                }

                form.addEventListener('input', debounceSave);
                form.addEventListener('change', debounceSave);

                // Select2 fires jQuery events, bukan native DOM events.
                // Native addEventListener('change') tidak menangkap Select2 changes.
                // Harus pakai jQuery .on() agar pic_lokasi, pic_area, tenaga_kerja tersimpan.
                if (window.$ && $.fn.select2) {
                    $(form).on('select2:select select2:clear', function() {
                        debounceSave();
                    });
                }

                // Juga monitor checklist-container untuk perubahan pada dynamic checkboxes
                var checklistContainer = document.getElementById('checklist-container');
                if (checklistContainer) {
                    var observer = new MutationObserver(function() {
                        setTimeout(debounceSave, 100);
                    });
                    observer.observe(checklistContainer, {
                        childList: true,
                        subtree: true
                    });
                }

                // Hapus draft saat form berhasil di-submit
                if (typeof window.clearPermitDraft === 'function') {
                    window.clearPermitDraft();
                }
            });
        })();
    </script>
@endpush