@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="card shadow-lg mx-4">
        <div class="card-body p-3">
            <div class="row gx-4">
                <div class="col-lg">
                    <div class="nav-wrapper">
                        {{-- button back --}}
                        <button class="btn btn-secondary mb-0" onclick="history.back()"><i class="fas fa-circle-left me-1">
                            </i><span class="font-weight-bold">Kembali</button>
                        {{-- check authorize edit --}}
                        @if ($authorize->edit == '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">
                    {{-- Manual custom add new permit --}}
                    <form role="form" method="POST" action="{{ route('perpanjang.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 showAgreementModal() {
                                // Ambil semua elemen dengan kelas required
                                const requiredInputs = document.querySelectorAll('required');
                                let isValid = true;

                                requiredInputs.forEach(input => {
                                    if (!input.value.trim()) {
                                        // Jika input kosong, tambahkan kelas is-invalid dan set isValid ke false
                                        input.classList.add('is-invalid');
                                        isValid = false;
                                    } else {
                                        // Hapus kelas is-invalid jika input sudah diisi
                                        input.classList.remove('is-invalid');
                                    }
                                });

                                // === Validasi Nomor PO (khusus veneks) ===
                                var poOption = document.getElementById('po_option');
                                var nomorPO = document.getElementById('nomor_po');
                                if (poOption && poOption.value === 'memiliki') {
                                    if (!nomorPO || !nomorPO.value.trim()) {
                                        nomorPO && nomorPO.classList.add('is-invalid');
                                        isValid = false;
                                        if (window.Swal) {
                                            Swal.fire({
                                                icon: 'warning',
                                                title: 'Nomor PO Wajib Diisi!',
                                                html: 'Anda memilih <b>"Memiliki Nomor PO"</b>, silakan isi nomor PO terlebih dahulu atau ubah status PO menjadi <b>"Menyusul"</b>.',
                                                confirmButtonColor: '#028284'
                                            });
                                        } else {
                                            alert('Anda memilih "Memiliki Nomor PO", silakan isi nomor PO terlebih dahulu.');
                                        }
                                        return;
                                    } else {
                                        nomorPO.classList.remove('is-invalid');
                                    }
                                }

                                if (isValid) {
                                    // Jika semua valid, buka modal
                                    var agreementModal = new bootstrap.Modal(document.getElementById('agreementModal'), {});
                                    agreementModal.show();
                                } else {
                                    alert('Harap isi semua field yang diperlukan.');
                                }
                            };

                            // 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
                            }
                        </script>

                        <div class="card-header">
                            <div class="card-body">
                                <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="{{ $list->id }}">
                                    </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="{{ $list->status }}">
                                        <code>
                                            Ket: <strong>E</strong> = Entri, <strong>P</strong> = Pending,
                                            <strong>B</strong> = Berlaku, <strong>S</strong> = Selesai
                                        </code>
                                    </div>
                                </div>

                                <div class="row mb-3">
                                    <div class="col-md-6">
                                        <label for="mulai_kerja" class="form-label">Mulai Kerja </label>
                                        <input type="date" class="form-control" id="mulai_kerja" name="mulai_kerja"
                                            value="{{ old('mulai_kerja', $list->mulai_kerja) }}">
                                    </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="{{ $list->masa_berlaku ?? 'Otomatis Update Ketika Atasan Approved' }}">
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <div class="col-md-6">
                                        <label for="kategori" class="form-label">Kategori</label>
                                        <input type="text" class="form-control" id="kategori" name="kategori"
                                            readonly value="Perpanjang">
                                    </div>
                                    @if ($users->idroles === 'veneks')
                                        <div class="col-md-6">
                                            <label for="nama_vendor" class="form-label">Nama Vendor</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($users->idroles === '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>
                                        <div class="input-group mb-3">
                                            <input type="text" class="form-control" placeholder="Lokasi"
                                                value="{{ $namaLokasi }}" id="lokasi_display" readonly required>
                                            <span class="input-group-text bg-primary btn-search text-light"
                                                data-bs-toggle="modal" data-bs-target="#locationModal"
                                                style="cursor:pointer; margin-right:5px;">
                                                <i class="fas fa-search"></i>
                                            </span>
                                        </div>
                                        <input type="hidden" id="lokasi" name="lokasi"
                                            value="{{ $list->idlokasi ?? '' }}">
                                    </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="{{ $list->lokasi_detail }}"
                                            placeholder="Contoh: Lantai 3 ">
                                    </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="locationTable"
                                                        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).ready(function() {
                                        const hiddenLokasi = document.getElementById('lokasi');
                                        const lokasiDisplay = document.getElementById('lokasi_display');
                                        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);
                                        const PIC_NAME_MAP = @json($picNameMap ?? []);
                                        const ACTIVE_PIC_IDS = @json($activePicIds);

                                        const oldPic = @json(old('pic_area'));
                                        const oldLok = @json(old('lokasi'));
                                        const currentLok = hiddenLokasi?.value;
                                        const originalPic = picSelect?.value; // simpan PIC asli dari database

                                        // === 1) Restore nama lokasi saat form edit ===
                                        // if (currentLok && LOC_MAP[currentLok]) {
                                        //     lokasiDisplay.value = LOC_MAP[currentLok];
                                        // } else if (oldLok && LOC_MAP[oldLok]) {
                                        //     lokasiDisplay.value = LOC_MAP[oldLok];
                                        // }

                                        // === 2) Atur PIC otomatis saat edit ===
                                        if (picSelect) {
                                            if (oldPic) {
                                                // const targetVal = String(oldPic);
                                                // ensureOptionExists(picSelect, targetVal, PIC_NAME_MAP[targetVal]);
                                                // picSelect.value = targetVal;
                                                // picSelect.dispatchEvent(new Event('change'));
                                            } else if (!originalPic && currentLok) {
                                                selectPicForLocation(currentLok);
                                            }
                                        }

                                        // === 3) Inisialisasi DataTables ===
                                        const table = $('#locationTable').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"
                                                }
                                            }
                                        });

                                        // === 4) Klik tombol "Pilih" ===
                                        $(document).on('click', '.select-location', function() {
                                            const id = String($(this).data('id'));
                                            const name = $(this).data('name') || LOC_MAP[id] || 'Pilih Lokasi';
                                            
                                            // Simpan PIC sebelumnya untuk perbandingan
                                            const previousPic = picSelect?.value;
                                            const newPicId = LOC_PIC_MAP[id];

                                            hiddenLokasi.value = id;
                                            lokasiDisplay.value = name;

                                            // Auto set PIC kalau aktif
                                            selectPicForLocation(id);
                                            
                                            // Tampilkan warning jika PIC Area berubah
                                            const currentPic = picSelect?.value;
                                            if (previousPic && currentPic && previousPic !== currentPic) {
                                                showPicAreaWarning();
                                            }

                                            const modal = bootstrap.Modal.getInstance(modalEl);
                                            modal.hide();
                                        });
                                        
                                        // === Helper: Tampilkan warning PIC Area berubah ===
                                        function showPicAreaWarning() {
                                            // Hapus warning lama jika ada
                                            const existingWarning = document.getElementById('pic_area_warning');
                                            if (existingWarning) existingWarning.remove();
                                            
                                            // Buat warning baru dengan styling Bootstrap warning yang bagus
                                            const warningDiv = document.createElement('div');
                                            warningDiv.id = 'pic_area_warning';
                                            warningDiv.className = 'alert alert-warning alert-dismissible mt-2 shadow-sm';
                                            warningDiv.role = 'alert';
                                            warningDiv.style.cssText = `
                                                background: linear-gradient(135deg, #fff3cd 0%, #ffe69c 100%);
                                                border-left: 4px solid #ff9800;
                                                border-radius: 8px;
                                                color: #664d03;
                                                font-size: 13px;
                                                padding: 12px 15px;
                                                display: block !important;
                                                opacity: 1 !important;
                                                animation: slideDown 0.3s ease-out;
                                            `;
                                            warningDiv.innerHTML = `
                                                <i class="fas fa-exclamation-triangle me-2" style="color: #ff9800;"></i>
                                                <strong>Perhatian!</strong> PIC Area lokasi yang Anda pilih berbeda dengan PIC Area sebelumnya. Pastikan PIC Area yang baru sudah sesuai.
                                                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close" style="font-size: 11px;"></button>
                                            `;
                                            
                                            // Sisipkan warning di dalam kolom lokasi (bukan setelah row)
                                            const lokasiCol = document.getElementById('lokasi_display')?.closest('.col-md-6');
                                            if (lokasiCol) {
                                                lokasiCol.appendChild(warningDiv);
                                                // Force browser repaint untuk memastikan warning terlihat
                                                warningDiv.offsetHeight;
                                            }
                                        }

                                        // === Helper: Tambahkan option ke PIC jika belum ada ===
                                        function ensureOptionExists(selectEl, val, label) {
                                            if (!val) return;
                                            let exists = Array.from(selectEl.options).some(opt => String(opt.value) === String(val));
                                            if (!exists) selectEl.add(new Option(label || `User #${val}`, val));
                                        }

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

                                            const targetVal = String(picId);
                                            const isActive = ACTIVE_PIC_IDS.includes(parseInt(targetVal));

                                            // Kalau PIC nonaktif → tetap pakai PIC lama (jangan kosongkan)
                                            if (!isActive) {
                                                console.warn(`PIC ${targetVal} nonaktif — tetap pakai PIC sebelumnya`);
                                                if (originalPic) {
                                                    ensureOptionExists(picSelect, originalPic, PIC_NAME_MAP[originalPic]);
                                                    picSelect.value = originalPic;
                                                    picSelect.dispatchEvent(new Event('change'));
                                                }
                                                return;
                                            }

                                            // Kalau aktif → isi otomatis
                                            ensureOptionExists(picSelect, targetVal, PIC_NAME_MAP[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 </label>
                                        <input type="tel" class="form-control" id="whatsapp_users"
                                            name="whatsapp_users" value="{{ $list->kontak }}"
                                            placeholder="Masukkan nomor WhatsApp" pattern="[0-9]+" inputmode="numeric">
                                    </div>

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

                                @if ($users->idroles === '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()">
                                                <option value="menyusul"
                                                    {{ old('po_option', $list->no_po == 'menyusul' ? 'menyusul' : 'memiliki') == 'menyusul' ? 'selected' : '' }}>
                                                    Menyusul
                                                </option>
                                                <option value="memiliki"
                                                    {{ old('po_option', $list->no_po == 'menyusul' ? 'menyusul' : 'memiliki') == 'memiliki' ? 'selected' : '' }}>
                                                    Memiliki Nomor PO
                                                </option>
                                            </select>
                                        </div>

                                        <div class="col-md-6">
                                            <div id="nomor_po_field"
                                                style="display: {{ old('po_option', $list->no_po == 'menyusul' ? 'menyusul' : 'memiliki') == 'memiliki' ? 'block' : 'none' }};">
                                                <label for="nomor_po" class="form-label">Nomor PO <span
                                                        style="color: red;">*</span></label>
                                                <input type="text" class="form-control" id="nomor_po"
                                                    name="nomor_po"
                                                    value="{{ old('nomor_po', $list->no_po != 'menyusul' ? $list->no_po : '') }}">
                                            </div>
                                        </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 !">{{ $list->uraian_pekerjaan }}</textarea>
                                    </div>
                                </div>

                                @php
                                    // Pakai old() kalau ada, kalau tidak fallback ke existing dari DB
                                    $selectedPemeriksaan = old(
                                        'pemeriksaan_sebelum_kerja',
                                        $existingPemeriksaanIds ?? [],
                                    );
                                @endphp

                                <div class="row mb-3">
                                    <!-- Kolom Kiri (3 Opsi) -->
                                    <div class="col-md-6">
                                        <label for="pemeriksaan_sebelum_kerja" class="form-label">
                                            Pemeriksaan Sebelum Kerja <span style="color: red;">*</span>
                                        </label>
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox"
                                                value="Menggunakan Peralatan yang Tepat" id="peralatan_tepat"
                                                name="pemeriksaan_sebelum_kerja[]"
                                                {{ in_array('Menggunakan Peralatan yang Tepat', $selectedPemeriksaan) ? 'checked' : '' }}>
                                            <label class="form-check-label" for="peralatan_tepat">
                                                Menggunakan Peralatan yang Tepat
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox"
                                                value="Peralatan Sudah Dilakukan Inspeksi" id="peralatan_inspeksi"
                                                name="pemeriksaan_sebelum_kerja[]"
                                                {{ in_array('Peralatan Sudah Dilakukan Inspeksi', $selectedPemeriksaan) ? 'checked' : '' }}>
                                            <label class="form-check-label" for="peralatan_inspeksi">
                                                Peralatan Sudah Dilakukan Inspeksi
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox"
                                                value="Pekerja Sesuai dengan Bidangnya" id="pekerjaan_bidang"
                                                name="pemeriksaan_sebelum_kerja[]"
                                                {{ in_array('Pekerja Sesuai dengan Bidangnya', $selectedPemeriksaan) ? 'checked' : '' }}>
                                            <label class="form-check-label" for="pekerjaan_bidang">
                                                Pekerja Sesuai dengan Bidangnya
                                            </label>
                                        </div>
                                    </div>

                                    <!-- Kolom Kanan (2 Opsi) -->
                                    <div class="col-md-6" style="margin-top: 30px;">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox"
                                                value="Pekerja dalam Kondisi Sehat" id="pekerjaan_sehat"
                                                name="pemeriksaan_sebelum_kerja[]"
                                                {{ in_array('Pekerja dalam Kondisi Sehat', $selectedPemeriksaan) ? 'checked' : '' }}>
                                            <label class="form-check-label" for="pekerjaan_sehat">
                                                Pekerja dalam Kondisi Sehat
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" value="Lain-Lain"
                                                id="lain_lain" name="pemeriksaan_sebelum_kerja[]"
                                                {{ in_array('Lain-Lain', $selectedPemeriksaan) ? 'checked' : '' }}>
                                            <label class="form-check-label" for="lain_lain">
                                                Lain-Lain
                                            </label>
                                        </div>
                                    </div>
                                </div>

                                <hr>
                                <div id="deleted-bucket"></div>
                                <div class="row mb-3">
                                    <div class="col-md-3">
                                        <label for="tenaga_kerja" class="form-label">Jumlah Tenaga Kerja <span
                                                class="text-danger">*</span></label>
                                        <div class="position-relative">
                                            <input type="number" class="form-control pe-5" id="tenaga_kerja"
                                                name="tenaga_kerja" value="{{ old('tenaga_kerja', $totalPekerja ?? 0) }}"
                                                data-max="{{ $maxTenagaKerja ?? 0 }}" onchange="updateTenagaKerja()">
                                            <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">
                                    <input type="hidden" name="tenaga_kerja_existing"
                                        value="{{ count($detailRows ?? []) }}">

                                    @foreach ($detailRows as $i => $item)
                                        <div class="row mb-3 worker-row">
                                            {{-- Kolom 1 --}}
                                            <div class="col-md-4">
                                                <label class="form-label">Tenaga Kerja - {{ $i + 1 }}</label>

                                                {{-- Semua role (veneks/venint/internal) pakai dropdown dari $tenaga_kerja --}}
                                                <select name="tenaga_kerja_{{ $i + 1 }}"
                                                    class="form-select select2">
                                                    @foreach ($tenaga_kerja as $opt)
                                                        <option value="{{ $opt->value }}"
                                                            {{ (string) ($item->nama ?? '') === (string) $opt->value ? 'selected' : '' }}>
                                                            {{ $opt->label }}@if (!empty($opt->department))
                                                                — {{ $opt->department }}
                                                            @endif
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>

                                            {{-- Kolom 2 --}}
                                            <div class="col-md-4">
                                                <label class="form-label">Kompetensi - {{ $i + 1 }}</label>
                                                <input type="text" class="form-control"
                                                    name="kompetensi_{{ $i + 1 }}"
                                                    value="{{ $item->kompetensi ?? '' }}">
                                            </div>

                                            {{-- Kolom 3 --}}
                                            <div class="col-md-4">
                                                <label class="form-label">BPJS - {{ $i + 1 }}</label>

                                                @if ($hasRole('veneks'))
                                                    <select name="bpjs_option_{{ $i + 1 }}"
                                                        class="form-select mb-2" id="bpjs_option_{{ $i + 1 }}"
                                                        onchange="toggleBPJSUpload({{ $i + 1 }})">
                                                        <option value="menyusul"
                                                            {{ ($item->file_bpjs ?? '') === 'menyusul' ? 'selected' : '' }}>
                                                            Menyusul</option>
                                                        <option value="memiliki"
                                                            {{ !empty($item->file_bpjs) && $item->file_bpjs !== 'menyusul' ? 'selected' : '' }}>
                                                            Saya memiliki BPJS</option>
                                                    </select>

                                                    <div id="bpjs_upload_wrapper_{{ $i + 1 }}"
                                                        style="{{ !empty($item->file_bpjs) && $item->file_bpjs !== 'menyusul' ? '' : 'display:none' }}">
                                                        @php
                                                            $isPdf =
                                                                !empty($item->file_bpjs) &&
                                                                str_ends_with(strtolower($item->file_bpjs), '.pdf');
                                                        @endphp

                                                        @if (!empty($item->file_bpjs) && $item->file_bpjs !== 'menyusul')
                                                            @if ($isPdf)
                                                                <a href="{{ asset('storage/' . $item->file_bpjs) }}"
                                                                    target="_blank" class="d-block text-decoration-none">
                                                                    <i class="fas fa-file-lines text-danger"
                                                                        style="font-size:80px"></i>
                                                                    <p class="text-xs mt-1">
                                                                        {{ basename($item->file_bpjs) }}</p>
                                                                </a>
                                                            @else
                                                                <img src="{{ asset('storage/' . $item->file_bpjs) }}"
                                                                    class="w-50 border-radius-lg shadow-sm"
                                                                    id="preview_bpjs_{{ $i + 1 }}"
                                                                    style="cursor: zoom-in"
                                                                    onclick="openFullSizeImage('preview_bpjs_{{ $i + 1 }}')">
                                                            @endif
                                                        @else
                                                            <img src="{{ asset('storage/noimage.png') }}"
                                                                class="w-50 border-radius-lg shadow-sm"
                                                                id="preview_bpjs_{{ $i + 1 }}"
                                                                style="cursor: zoom-in"
                                                                onclick="openFullSizeImage('preview_bpjs_{{ $i + 1 }}')">
                                                        @endif
                                                        <input type="file" name="file_upload_{{ $i + 1 }}"
                                                            class="d-none form-control"
                                                            id="file_upload_{{ $i + 1 }}"
                                                            accept="image/png,image/jpeg,application/pdf"
                                                            onchange="previewFile(event, {{ $i + 1 }})">
                                                    </div>
                                                @else
                                                    <select name="bpjs_option_{{ $i + 1 }}" class="form-select"
                                                        disabled>
                                                        <option value="Tidak Perlu">Tidak Perlu BPJS</option>
                                                    </select>
                                                @endif
                                            </div>

                                            <input type="hidden" name="pekerja_id_{{ $i + 1 }}"
                                                value="{{ $item->id }}">

                                            {{-- Tombol Hapus --}}
                                            <div class="col-md-12 text-end mt-2">
                                                <!-- taruh di dalam <form> -->
                                                <input type="hidden" value="{{ $item->id }}"
                                                    class="deleted-id-input" disabled>
                                                <button type="button" class="btn btn-danger btn-sm"
                                                    onclick="hapusPekerja(this)">
                                                    <i class="fa fa-trash"></i> Hapus
                                                </button>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>

                                <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">
                                    <div class="col-md-6">
                                        <label for="kategori_pekerjaan" class="form-label">Kategori Pekerjaan </label>
                                        <div class="form-check">
                                            @foreach ($kategori as $item)
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox"
                                                        value="{{ $item->id }}"
                                                        id="kategori_pekerjaan_{{ $item->id }}"
                                                        name="kategori_pekerjaan[]"
                                                        {{ in_array($item->id, $existingKategoriIds) ? 'checked' : '' }}
                                                        onchange="updateChecklist();">
                                                    <label class="form-check-label"
                                                        for="kategori_pekerjaan_{{ $item->id }}">
                                                        {{ $item->jenis_pekerjaan }}
                                                    </label>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <label for="apd" class="form-label">APD </label>
                                        <div class="form-check">
                                            <div class="row">
                                                @foreach ($alat as $item)
                                                    <div class="col-md-6">
                                                        <div class="form-check table-cell">
                                                            <input class="form-check-input" type="checkbox"
                                                                value="{{ $item->id }}" id="apd_{{ $item->id }}"
                                                                name="apd[]"
                                                                {{ in_array($item->id, $existingApdIds) ? 'checked' : '' }}>
                                                            <label class="form-check-label"
                                                                for="apd_{{ $item->id }}">
                                                                {{ $item->nama_alat }}
                                                            </label>
                                                        </div>
                                                    </div>
                                                @endforeach
                                            </div>
                                        </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="{{ in_array('KPE0006', $existingKategoriIds ?? []) ? '' : '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', $lainLainDetail) }}">
                                    </div>
                                </div>

                                <script>
                                    const kategoriDetail = @json($kategoriDetails);
                                    const existingChecks = @json($existingPengecheckanIds); // dipakai untuk centang read-only

                                    // ambil kategori yang sedang terpilih SAAT INI
                                    function getSelectedCats() {
                                        return Array.from(document.querySelectorAll('input[name="kategori_pekerjaan[]"]:checked'))
                                            .map(cb => cb.value);
                                    }

                                    function updateChecklist() {
                                        const selectedCats = getSelectedCats(); // <-- pindah ke sini!
                                        const box = document.getElementById('checklist-container');
                                        const lain = document.getElementById('lain-lain-container');
                                        box.innerHTML = '';

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

                                        let appended = 0;
                                        selectedCats.forEach(catId => {
                                            if (catId === 'KPE0006') return; // Lain-Lain: gak render opsi, cuma input teks

                                            const det = kategoriDetail[catId];
                                            const opts = Array.isArray(det?.options) ? det.options : [];
                                            if (!det || !opts.length) return;

                                            const col = document.createElement('div');
                                            col.className = 'col-md-6';
                                            col.innerHTML = `
                                          <div class="mb-3">
                                            <label class="form-label" style="font-size:14px;">${det.label}</label>
                                            <div class="row">
                                              ${opts.map(o => `
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                <div class="col-md-6">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  <div class="form-check">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    <input class="form-check-input" type="checkbox"
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           id="checklist_${catId}_${o.value}"
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           value="${o.value}" name="checklist[${catId}][]"
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           ${existingChecks.includes(o.value) ? 'checked' : ''}>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    <label class="form-check-label" for="checklist_${catId}_${o.value}">${o.label}</label>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  </div>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                </div>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              `).join('')}
                                            </div>
                                          </div>`;
                                            box.appendChild(col);
                                            appended++;
                                        });

                                        box.style.display = appended ? 'flex' : 'none';
                                        if (lain) {
                                            const showLain = selectedCats.includes('KPE0006');
                                            lain.style.display = showLain ? 'block' : 'none';
                                        }
                                    }

                                    document.addEventListener('DOMContentLoaded', () => {
                                        updateChecklist();
                                        // kamu sudah pasang onchange di input, tapi gak apa-apa kita tambahkan listener global juga
                                        document.addEventListener('change', (e) => {
                                            if (e.target && e.target.name === 'kategori_pekerjaan[]') {
                                                updateChecklist();
                                            }
                                        });
                                    });
                                </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>
                                                    </tr>
                                                </thead>
                                                <tbody id="tbody_analisis">
                                                    @foreach ($analisis as $index => $item)
                                                        @php
                                                            $isFixed = $index === 0 || $index === count($analisis) - 1;
                                                        @endphp
                                                        <tr class="dynamic-row {{ $isFixed ? 'fixed-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">{{ $item->langkah_tugas }}</textarea>
                                                            </td>
                                                            <td>
                                                                <textarea class="form-control" name="potensi_bahaya[]" rows="4">{{ $item->potensi_bahaya }}</textarea>
                                                            </td>
                                                            <td>
                                                                <textarea class="form-control" name="akibat_kerugian[]" rows="4">{{ $item->akibat }}</textarea>
                                                            </td>
                                                            <td>
                                                                <textarea class="form-control" name="rekomendasi_pencegahan[]" rows="4">{{ $item->rekomendasi }}</textarea>
                                                            </td>
                                                            <td>
                                                                @if (!$isFixed)
                                                                    <button type="button" class="btn btn-danger"
                                                                        onclick="deleteRow(this)">Hapus</button>
                                                                @endif
                                                            </td>
                                                        </tr>
                                                    @endforeach

                                                </tbody>
                                            </table>
                                        </div>
                                        <button type="button" class="btn btn-success" onclick="addRow()">Tambah
                                            Baris</button>
                                    </div>
                                </div>

                                <hr>

                                <!-- Keterangan Pemakaian Workshop Kontraktor -->
                            <h4 style="color: #1c8c90; font-weight: bold;">4. Keterangan Pemakaian Workshop Kontraktor</h4>
                            <div style="border-top: 3px solid #1c8c90; margin: 20px 0;"></div>
                            <div class="row mb-3">
                                @if(isset($is_edit_workshop) && $is_edit_workshop)
                                    <div class="col-md-12">
                                        <form action="{{ url($url_menu . '/input-workshop') }}" method="POST">
                                            @csrf
                                            <input type="hidden" name="idencrypt" value="{{ encrypt($list->id) }}">
                                            <label class="form-label">Pilih Opsi Workshop <span style="color: red;">*</span></label>
                                            <div class="d-flex flex-wrap gap-3 mb-3">
                                                @if(isset($mst_workshops) && $mst_workshops->count() > 0)
                                                    @foreach ($mst_workshops->sortBy(function($ws) { return strtolower((string) $ws->id) === 'wrk0001' ? 1 : 0; }) as $ws)
                                                        <div class="form-check">
                                                            <input class="form-check-input" type="radio" name="workshop_kontraktor_opsi"
                                                                id="ws_opsi_{{ $ws->id }}" value="{{ $ws->id }}" 
                                                                {{ strtolower($list->workshop_kontraktor_opsi ?? '') == strtolower($ws->id) ? 'checked' : '' }}
                                                                onchange="toggleWsOther()">
                                                            <label class="form-check-label" for="ws_opsi_{{ $ws->id }}">{{ $ws->nama }}</label>
                                                        </div>
                                                    @endforeach
                                                @endif
                                            </div>
                                            <div class="mb-3" id="ws-other-container" style="display: {{ strtolower($list->workshop_kontraktor_opsi ?? '') == 'wrk0001' ? 'block' : 'none' }};">
                                                <label for="ws_other" class="form-label">Keterangan Lainnya <span style="color: red;">*</span></label>
                                                <input type="text" class="form-control" id="ws_other" name="workshop_kontraktor_other" 
                                                    placeholder="Jelaskan keterangan workshop lainnya" value="{{ $list->workshop_kontraktor_other ?? '' }}">
                                            </div>
                                            @if (!empty($list->tgl_awal_workshop))
                                                <div class="mb-3">
                                                    <label class="form-label">Tanggal Awal Workshop</label>
                                                    <input type="text" class="form-control" readonly value="{{ \Carbon\Carbon::parse($list->tgl_awal_workshop)->format('d-m-Y H:i') }}">
                                                </div>
                                            @endif
                                            @if (!empty($list->tgl_selesai_workshop))
                                                <div class="mb-3">
                                                    <label class="form-label">Tanggal Selesai Workshop</label>
                                                    <input type="text" class="form-control" readonly value="{{ \Carbon\Carbon::parse($list->tgl_selesai_workshop)->format('d-m-Y H:i') }}">
                                                </div>
                                            @endif
                                            <div class="d-flex flex-wrap gap-2 mt-2">
                                                <button type="submit" name="action_type" value="simpan" class="btn btn-primary"
                                                    {{ !empty($list->tgl_selesai_workshop) ? 'disabled' : '' }}>
                                                    <i class="fas fa-save me-1"></i> Simpan Workshop
                                                </button>
                                                <button type="button" class="btn btn-success btn-selesaikan-workshop"
                                                    onclick="confirmSelesaikanWorkshop(this)"
                                                    {{ !empty($list->tgl_selesai_workshop) ? 'disabled' : '' }}>
                                                    <i class="fas fa-check-circle me-1"></i> Selesaikan Workshop
                                                </button>
                                            </div>
                                            @if (!empty($list->tgl_selesai_workshop))
                                                <small class="text-success d-block mt-2">
                                                    Workshop sudah diselesaikan pada {{ \Carbon\Carbon::parse($list->tgl_selesai_workshop)->format('d-m-Y H:i') }}.
                                                </small>
                                            @endif
                                        </form>
                                    </div>
                                    <script>
                                        function toggleWsOther() {
                                            const selected = document.querySelector('input[name="workshop_kontraktor_opsi"]:checked');
                                            const otherContainer = document.getElementById('ws-other-container');
                                            const otherInput = document.getElementById('ws_other');
                                            if (selected && selected.value.toLowerCase() === 'wrk0001') {
                                                otherContainer.style.display = 'block';
                                            } else {
                                                otherContainer.style.display = 'none';
                                                if (otherInput) otherInput.value = '';
                                            }
                                        }

                                        function confirmSelesaikanWorkshop(btn) {
                                            Swal.fire({
                                                title: 'Selesaikan Workshop?',
                                                text: 'Setelah diselesaikan, data workshop tidak dapat diubah kembali.',
                                                icon: 'warning',
                                                showCancelButton: true,
                                                confirmButtonText: 'Ya, Selesaikan',
                                                cancelButtonText: 'Batal',
                                                confirmButtonColor: '#28a745',
                                                cancelButtonColor: '#6c757d'
                                            }).then((result) => {
                                                if (result.isConfirmed) {
                                                    const form = btn.closest('form');
                                                    const hidden = document.createElement('input');
                                                    hidden.type = 'hidden';
                                                    hidden.name = 'action_type';
                                                    hidden.value = 'selesaikan';
                                                    form.appendChild(hidden);
                                                    form.submit();
                                                }
                                            });
                                        }
                                    </script>
                                @else
                                    <div class="col-md-6">
                                        <label class="form-label fw-bold">Menggunakan Workshop Kontraktor?</label>
                                        <p class="mb-1 ms-1">
                                            @if (($list->workshop_kontraktor ?? null) === 'Ya')
                                                <span class="badge bg-success">Ya</span>
                                            @elseif (($list->workshop_kontraktor ?? null) === 'Tidak')
                                                <span class="badge bg-secondary">Tidak</span>
                                            @else
                                                <span class="text-muted">—</span>
                                            @endif
                                        </p>
                                    </div>

                                    @if (($list->workshop_kontraktor ?? null) === 'Ya')
                                        <div class="col-md-3">
                                            <label class="form-label fw-bold">Opsi Workshop</label>
                                            <p class="ms-1">
                                                @php
                                                    $opsiDisplay = $list->workshop_kontraktor_opsi ?? '—';
                                                    if ($opsiDisplay !== 'Other' && $opsiDisplay !== '—' && isset($mst_workshops)) {
                                                        $matchedWs = $mst_workshops->firstWhere('id', $opsiDisplay);
                                                        if ($matchedWs) {
                                                            $opsiDisplay = $matchedWs->nama;
                                                        }
                                                    }
                                                @endphp
                                                {{ $opsiDisplay }}
                                            </p>
                                        </div>

                                        @if (strtolower($list->workshop_kontraktor_opsi ?? null) === 'wrk0001')
                                            <div class="col-md-3">
                                                <label class="form-label fw-bold">Keterangan Lainnya</label>
                                                <p class="mt-1">{{ $list->workshop_kontraktor_other ?? '—' }}</p>
                                            </div>
                                        @endif
                                        
                                        <div class="row mt-3 w-100">
                                            <div class="col-md-6">
                                                <label class="form-label fw-bold">Tanggal Awal Workshop</label>
                                                <div class="form-control bg-light" style="min-height: 38px;">
                                                    {{ !empty($list->tgl_awal_workshop) ? \Carbon\Carbon::parse($list->tgl_awal_workshop)->format('d-m-Y H:i') : '—' }}
                                                </div>
                                            </div>

                                            <div class="col-md-6">
                                                <label class="form-label fw-bold">Tanggal Selesai Workshop</label>
                                                <div class="form-control bg-light" style="min-height: 38px;">
                                                    {{ !empty($list->tgl_selesai_workshop) ? \Carbon\Carbon::parse($list->tgl_selesai_workshop)->format('d-m-Y H:i') : '—' }}
                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                @endif
                            </div>

                            <hr>

                                <!-- Bukti Pendukung -->
                                <h4 style="color: #1c8c90; font-weight: bold;">5. Bukti Pendukung</h4>
                                <div style="border-top: 3px solid #1c8c90; margin: 20px 0;"></div>
                                <div class="row">
                                    {{-- <input class="form-control" type="file" id="image-upload-apd" name="foto_apd"
                                        style="display: none;">
                                    <input class="form-control" type="file" id="image-upload-alat-kerja"
                                        name="foto_alat_kerja" style="display: none;"> --}}
                                    <!-- Upload Image 1: Foto APD -->
                                    <div class="col-sm-6">
                                        <div class="position-relative">
                                            <label class="form-label">Foto APD <span
                                                    style="color:red">*</span></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/' . ($list->foto_apd ?? 'noimage.png')) }}"
                                                    alt="Foto APD"
                                                    onerror="this.onerror=null;this.src='{{ asset('storage/noimage.png') }}';"
                                                    class="w-30 border-radius-lg shadow-sm" id="image-preview-apd"
                                                    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 <span
                                                    style="color:red">*</span></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/' . ($list->foto_alat_kerja ?? 'noimage.png')) }}"
                                                    alt="Foto Alat Kerja"
                                                    onerror="this.onerror=null;this.src='{{ asset('storage/noimage.png') }}';"
                                                    class="w-30 border-radius-lg shadow-sm" id="image-preview-alat-kerja"
                                                    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">Preview Image</h5>
                                                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                        aria-label="Close"></button>
                                                </div>
                                                <div class="modal-body text-center">
                                                    <img id="full-image" src="{{ asset('/storage/noimage.png') }}"
                                                        alt="Full size image" class="img-fluid rounded shadow border"
                                                        style="max-height: 400px; object-fit: contain;">
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <script>
                                        const MAX_SIZE = 2 * 1024 * 1024; // 2 MB
                                        const ALLOWED_TYPES = ['image/png', 'image/jpeg'];

                                        function setupImageUpload(inputId, previewId) {
                                            const input = document.getElementById(inputId);
                                            const preview = document.getElementById(previewId);

                                            if (!input || !preview) return;

                                            input.addEventListener('change', function(event) {
                                                const file = event.target.files[0];
                                                if (!file) return;

                                                if (!ALLOWED_TYPES.includes(file.type)) {
                                                    Swal.fire({
                                                        icon: 'error',
                                                        title: 'Format tidak valid',
                                                        text: 'File harus berupa gambar PNG atau JPG!',
                                                    });
                                                    input.value = '';
                                                    return;
                                                }

                                                if (file.size > MAX_SIZE) {
                                                    const mb = (file.size / 1024 / 1024).toFixed(2);
                                                    Swal.fire({
                                                        icon: 'warning',
                                                        title: 'Ukuran terlalu besar',
                                                        text: `Maksimal 2 MB. File anda: ${mb} MB`,
                                                    });
                                                    input.value = '';
                                                    return;
                                                }

                                                // update preview
                                                preview.src = URL.createObjectURL(file);
                                            });
                                        }

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


                                        // 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 style="border: 0; height: 1px; background-color: white;">
                                    <hr style="border: 0; height: 1px; background-color: white;">

                                    <br>
                                    <!-- Approval -->
                                    <h4 style="color: #1c8c90; font-weight: bold;">6. 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">

                                            {{-- PIC Kerja --}}
                                            <div class="col-md-6">
                                                <label for="pic_kerja" class="form-label">PIC Kerja <span
                                                        class="text-danger">*</span></label>
                                                <select class="form-select select2" id="pic_kerja" name="pic_kerja"
                                                    required>
                                                    <option value="">— Pilih PIC Kerja —</option>
                                                    @foreach ($pic_kerja as $u)
                                                        <option value="{{ $u->id }}"
                                                            {{ old('pic_kerja', $list->pic_kerja) == $u->id ? 'selected' : '' }}>
                                                            {{ $u->username }} - {{ $u->firstname }}
                                                        </option>
                                                    @endforeach

                                                    {{-- fallback jika nilai existing tidak ada di daftar --}}
                                                    @if ($list->pic_kerja && !$pic_kerja->contains('id', $list->pic_kerja))
                                                        <option value="{{ $list->pic_kerja }}" selected>
                                                            {{ $namaPicKerja }} (tidak ada di daftar)
                                                        </option>
                                                    @endif
                                                </select>
                                            </div>

                                            {{-- PIC Area --}}
                                            <div class="col-md-6">
                                                <label for="pic_area" class="form-label">PIC Area <span
                                                        class="text-danger">*</span></label>
                                                <select class="form-select select2" id="pic_area" name="pic_area"
                                                    required>
                                                    <option value="">— Pilih PIC Area —</option>
                                                    @foreach ($pic_area as $u)
                                                        <option value="{{ $u->id }}"
                                                            {{ old('pic_area', $list->pic_area) == $u->id ? 'selected' : '' }}>
                                                            {{ $u->username }} - {{ $u->firstname }}
                                                        </option>
                                                    @endforeach

                                                    {{-- fallback jika nilai existing tidak ada di daftar (user nonaktif/akun pindah role) --}}
                                                    @if ($list->pic_area && !$pic_area->contains('id', $list->pic_area))
                                                        <option value="{{ $list->pic_area }}" selected>
                                                            {{ $namaPicArea }} (tidak ada di daftar)
                                                        </option>
                                                    @endif
                                                </select>
                                            </div>

                                            
                                        </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>
                    </form>
                </div>
            </div>
        </div>
    </div>

    {{-- Modal Hapus Pegawai --}}

    <div class="modal fade" id="confirmDeleteModal" tabindex="-1" aria-labelledby="confirmationModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <!-- Header Modal -->
                <div class="modal-header">
                    <h5 class="modal-title" id="modalTitle">Konfirmasi Penghapusan</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <!-- Body Modal -->
                <div class="modal-body">
                    <p>Apakah anda yakin ingin menghapus tenaga kerja: <strong id="selectedEmployeeName"></strong>?</p>
                </div>

                <!-- Footer Modal -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="button" class="btn btn-danger" id="confirmDeleteButton">Hapus</button>
                </div>
            </div>
        </div>
    </div>

    {{-- !-- Modal HTML --> --}}
    <div class="modal fade" id="KonfirmasiUlang" tabindex="-1" aria-labelledby="KonfirmasiUlangLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="KonfirmasiUlangLabel">Konfirmasi</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body text-center">
                    <i class="fas fa-exclamation-triangle fa-3x text-warning mb-3"></i>
                    <p>Apakah anda yakin ingin menyimpan perubahan ini? Setelah disimpan, data langsung akan dikirim ke
                        atasan dan akan diproses. Pastikan sudah sesuai ! </p>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batalkan</button>
                    <button type="button" class="btn btn-primary" onclick="confirmSave()">Iya, saya yakin</button>
                </div>
            </div>
        </div>
    </div>

    {{-- check flag js on dmenu --}}
    @if ($jsmenu == '1')
        @if (view()->exists("js.{$dmenu}"))
            @push('addjs')
                {{-- file js in folder (resources/views/js) --}}
                @include('js.' . $dmenu);
            @endpush
        @else
            @push('addjs')
                <script>
                    Swal.fire({
                        title: 'JS Not Found!!',
                        text: 'Please Create File JS',
                        icon: 'error',
                        confirmButtonColor: '#028284'
                    });
                </script>
            @endpush
        @endif
    @endif
@endsection
@push('js')
    <style>
        /* Animation untuk warning lokasi */
        @keyframes slideDown {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        #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;
        }

        /* 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;
        }

        .select2-results__option--highlighted {
            background-color: #0d6efd !important;
            color: #fff !important;
        }
    </style>
    <script>
        function initSelect2(parent = document) {
            $(parent).find('.select2').each(function() {
                const $el = $(this);
                if ($el.data('select2')) $el.select2('destroy'); // re-init safe
                const $modal = $el.closest('.modal');
                $el.select2({
                    // theme: 'bootstrap-5',
                    width: '100%',
                    placeholder: $el.attr('data-placeholder') || '-- Pilih --',
                    allowClear: true,
                    dropdownParent: $modal.length ? $modal : $(document.body),
                });
            });
        }

        // === 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;
        }

        // panggil saat halaman siap
        $(function() {
            initSelect2(); // inisialisasi semua .select2 yang sudah ada
        });
        /* ====== CONSTANTS dari Blade (aman dari kutip/backtick) ====== */
        const ROLE = @json($role_label); // "veneks" | "venint" | "internal"
        const OPTIONS = @json($tenaga_kerja); // [{value,label,department?}, ...]
        const NOIMG = @json(asset('storage/noimage.png')); // fallback image

        (function() {
            /* ====== ELEMENTS ====== */
            const inputJumlah = document.getElementById('tenaga_kerja');
            const container = document.getElementById('tenaga_kerja_detail');
            const maxJumlah = parseInt(inputJumlah?.dataset?.max || '0', 10);
            const bucket = document.getElementById('deleted-bucket');

            /* ====== RISK ASSESSMENT TABLE (drag + numbering) ====== */
            window.updateRowNumbers = function() {
                const rows = document.querySelectorAll('#tbody_analisis tr');
                let number = 1;
                rows.forEach(row => {
                    const numberSpan = row.querySelector('.number-label');
                    if (numberSpan) numberSpan.textContent = number++;
                });
            };

            window.addRow = function() {
                const tbody = document.getElementById("tbody_analisis");
                const newRow = document.createElement('tr');
                newRow.classList.add('dynamic-row');
                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>
        `;
                const rows = tbody.querySelectorAll('tr');
                const lastRow = rows[rows.length - 1];
                tbody.insertBefore(newRow, lastRow);
                updateRowNumbers();
            };

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

            /* ====== MODAL KONFIRMASI ====== */
            window.confirmSave = function(event) {
                event?.preventDefault();
                const m = bootstrap.Modal.getInstance(document.getElementById('KonfirmasiUlang'));
                if (m) m.hide();
                if (typeof showAgreementModal === 'function') showAgreementModal();
            };

            /* ====== UTIL ====== */
            function countWorkers() {
                return container.querySelectorAll('.worker-row').length;
            }

            function syncJumlahFromDOM() {
                const count = countWorkers();
                if (count > 0) inputJumlah.value = count;
            }

            const lowerRole = String(ROLE || '').toLowerCase();

            /* ====== BUILDER ROW TENAGA KERJA ====== */
            function createNewWorkerRow(i) {
                const row = document.createElement('div');
                row.className = 'row mb-3 worker-row dynamic-row';

                // Kolom 1: dropdown dari OPTIONS (semua role)
                const col1 = document.createElement('div');
                col1.className = 'col-md-4';

                const opts = (OPTIONS || []).map(o => {
                    const dept = (o?.department ?? o?.dept ?? '');
                    const text = dept ? `${o.label} — ${dept}` : o.label;
                    return `<option value="${o.value}">${text}</option>`;
                }).join('');

                col1.innerHTML = `
                    <label class="form-label">Tenaga Kerja - ${i}</label>
                    <select name="tenaga_kerja_${i}" class="form-select select2" data-placeholder="— Pilih Tenaga Kerja —">
                        <option value=""></option>   
                        ${opts}
                    </select>
                    `;

                // Kolom 2: Kompetensi
                const col2 = document.createElement('div');
                col2.className = 'col-md-4';
                col2.innerHTML = `
                    <label class="form-label">Kompetensi - ${i}</label>
                    <input type="text" class="form-control" name="kompetensi_${i}">
                    `;

                // Kolom 3: BPJS
                const col3 = document.createElement('div');
                col3.className = 'col-md-4';
                if (String(ROLE).toLowerCase() === 'veneks') {
                    col3.innerHTML = `
                        <label class="form-label">BPJS - ${i}</label>
                        <select name="bpjs_option_${i}" class="form-select mb-2" id="bpjs_option_${i}" onchange="toggleBPJSUpload(${i})">
                        <option value="menyusul">menyusul</option>
                        <option value="memiliki">memiliki</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="Edit File"></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}')"
                                onerror="this.onerror=null;this.src='${NOIMG}';">
                            </span>
                        </div>
                        <input type="file" class="form-control d-none" name="file_upload_${i}" id="file_upload_${i}"
                                accept="image/png,image/jpeg,application/pdf" onchange="previewFile(event, ${i})">
                        </div>
                    `;
                } else {
                    col3.innerHTML = `
                        <label class="form-label">BPJS - ${i}</label>
                        <select name="bpjs_option_${i}" class="form-select" disabled>
                        <option value="tidak perlu">tidak perlu</option>
                        </select>
                    `;
                }

                // Kolom 4: tombol hapus
                const col4 = document.createElement('div');
                col4.className = 'col-md-12 text-end mt-2';
                col4.innerHTML = `
                    <button type="button" class="btn btn-danger btn-sm" onclick="hapusPekerja(this)">
                        <i class="fa fa-trash"></i> Hapus
                    </button>
                    `;

                row.append(col1, col2, col3, col4);
                return row;
            }

            /* ====== AKSI: TAMBAH/HAPUS PEKERJA ====== */
            window.updateTenagaKerja = function() {
                let target = parseInt(inputJumlah.value || '0', 10);
                if (target > maxJumlah) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Warning!',
                        text: `Jumlah tenaga kerja hanya ${maxJumlah}`
                    });
                    target = maxJumlah;
                    inputJumlah.value = maxJumlah;
                }

                // kurangi
                while (countWorkers() > target) {
                    const last = container.querySelector('.worker-row:last-of-type');
                    if (!last) break;
                    $(last).find('.select2').each(function() {
                        const $el = $(this);
                        if ($el.data('select2')) $el.select2('destroy');
                    });
                    last.remove();
                }

                // tambah
                const startIndex = countWorkers() + 1;
                for (let i = startIndex; i <= target; i++) {
                    const newRow = createNewWorkerRow(i);
                    container.appendChild(newRow);
                    initSelect2(newRow);

                    $(newRow).find(`[name="tenaga_kerja_${i}"]`).val(null).trigger('change');
                }

                syncJumlahFromDOM();
            };

            window.hapusPekerja = function(btn) {
                const row = btn.closest('.worker-row');
                if (!row) return;

                // Destroy Select2 di dalam row
                $(row).find('.select2').each(function() {
                    const $el = $(this);
                    if ($el.data('select2')) $el.select2('destroy');
                });

                // keranjang delete id (jika ada)
                const idInput = row.querySelector('.deleted-id-input');
                if (idInput && idInput.value) {
                    const hid = document.createElement('input');
                    hid.type = 'hidden';
                    hid.name = 'deleted_ids[]';
                    hid.value = idInput.value;
                    bucket.appendChild(hid);
                }

                row.remove();
                syncJumlahFromDOM();
            };

            /* ====== PREVIEW FILE BPJS ====== */
            const MAX_FILE_SIZE = 3 * 1024 * 1024;
            const ALLOWED_MIME = ['image/png', 'image/jpeg', 'application/pdf'];

            window.previewFile = function(e, i) {
                const f = e.target.files?.[0];
                const wrapper = document.getElementById(`preview_wrapper_${i}`);
                if (!f || !wrapper) return;

                if (!ALLOWED_MIME.includes(f.type)) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Format tidak valid',
                        text: 'Harus PNG, JPG, JPEG, atau PDF'
                    });
                    e.target.value = '';
                    return;
                }
                if (f.size > MAX_FILE_SIZE) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Ukuran terlalu besar',
                        text: `Maksimal 3 MB (file kamu ${(f.size/1024/1024).toFixed(2)} MB)`
                    });
                    e.target.value = '';
                    return;
                }

                wrapper.innerHTML = '';
                if (f.type === 'application/pdf') {
                    wrapper.innerHTML = `
            <div class="d-flex flex-column align-items-start">
              <i class="fas fa-file-lines text-danger" style="font-size:80px;cursor:pointer;"></i>
              <p class="text-xs mt-1 mb-0">${f.name}</p>
            </div>`;
                    const icon = wrapper.querySelector('i');
                    if (icon) icon.onclick = () => window.open(URL.createObjectURL(f), '_blank');
                } else {
                    const img = document.createElement('img');
                    img.id = `preview_bpjs_${i}`;
                    img.className = 'w-50 border-radius-lg shadow-sm';
                    img.style.cursor = 'zoom-in';
                    img.onclick = () => openFullSizeImage(`preview_bpjs_${i}`);
                    img.onerror = function() {
                        this.onerror = null;
                        this.src = NOIMG;
                    };
                    wrapper.appendChild(img);

                    const r = new FileReader();
                    r.onload = ev => img.src = ev.target.result;
                    r.readAsDataURL(f);
                }
            };

            /* ====== TOGGLE BPJS (VENeks) ====== */
            window.toggleBPJSUpload = function(index) {
                const option = document.getElementById('bpjs_option_' + index);
                const wrapper = document.getElementById('bpjs_upload_wrapper_' + index);
                const fileInput = document.getElementById('file_upload_' + index);
                const preview = document.getElementById('preview_bpjs_' + index);

                if (option && option.value === 'memiliki') {
                    if (wrapper) wrapper.style.display = 'block';
                    if (fileInput) fileInput.style.display = 'block';
                } else {
                    if (wrapper) wrapper.style.display = 'none';
                    if (fileInput) fileInput.value = '';
                    if (preview) preview.src = NOIMG;
                }
            };

            /* ====== NOMOR PO TOGGLER ====== */
            window.toggleNomorPOField = function() {
                const sel = document.getElementById('po_option');
                const nomorPOField = document.getElementById('nomor_po_field');
                if (!sel || !nomorPOField) return;
                nomorPOField.style.display = (sel.value === 'memiliki') ? 'block' : 'none';
            };

            /* ====== INIT ====== */
            document.addEventListener('DOMContentLoaded', function() {
                // drag rows (risk assessment)
                const tbody = document.getElementById('tbody_analisis');
                if (tbody && typeof Sortable !== 'undefined') {
                    new Sortable(tbody, {
                        animation: 150,
                        handle: '.drag-icon',
                        draggable: 'tr:not(.fixed-row)',
                        onEnd: updateRowNumbers
                    });
                }
                updateRowNumbers();
                syncJumlahFromDOM();
                toggleNomorPOField();
                initSelect2();
            });

        })(); // IIFE untuk menghindari global leakage
    </script>
@endpush