@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="{{ URL::to($url_menu . '/' . $idencrypt) }}"
                        enctype="multipart/form-data" id="{{ $dmenu }}-form">
                        @csrf
                        @method('PUT')
                        {{-- 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>
                            // Buka modal (tetap sama; perbaikan selector required)
                            function showAgreementModal() {
                                const requiredInputs = document.querySelectorAll('[required]');
                                let isValid = true;
                                requiredInputs.forEach(input => {
                                    const v = String(input.value || '').trim();
                                    if (!v) {
                                        input.classList.add('is-invalid');
                                        isValid = false;
                                    } else {
                                        input.classList.remove('is-invalid');
                                    }
                                });
                                if (!isValid) {
                                    alert('Harap isi semua field yang diperlukan.');
                                    return;
                                }

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

                                new bootstrap.Modal(document.getElementById('agreementModal')).show();
                            }

                            // Enable/disable tombol di modal
                            function toggleAgreeButton() {
                                const agreeButton = document.getElementById('agreeButton');
                                const checked = document.getElementById('readAgreement')?.checked;
                                if (agreeButton) agreeButton.disabled = !checked;
                            }

                            document.addEventListener('DOMContentLoaded', () => {
                                const agreeButton = document.getElementById('agreeButton');
                                const form = agreeButton ? agreeButton.closest('form') : null;
                                if (!agreeButton || !form) return;

                                // Klik "Saya Setuju" -> kirim via fetch agar JS tetap hidup (bisa timeout)
                                // agreeButton.addEventListener('click', (e) => {
                                //     e.preventDefault();

                                //     if (!form.reportValidity()) return;

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

                                //     var controller = new AbortController();
                                //     var timeoutId = setTimeout(function() {
                                //         controller.abort();
                                //         agreeButton.disabled = false;
                                //         agreeButton.innerHTML = 'Saya Setuju';
                                //         if (window.Swal) {
                                //             Swal.fire({
                                //                 icon: 'warning',
                                //                 title: 'Timeout',
                                //                 text: 'Proses menyimpan permit melebihi batas waktu. Silakan klik Saya Setuju untuk mencoba kembali.',
                                //                 confirmButtonColor: '#028284'
                                //             });
                                //         }
                                //     }, 60000); // 1 mnt

                                //     fetch(form.action, {
                                //         method: form.method,
                                //         body: new FormData(form),
                                //         signal: controller.signal,
                                //         headers: {
                                //             'X-Requested-With': 'XMLHttpRequest'
                                //         }
                                //     }).then(function(response) {
                                //         clearTimeout(timeoutId);
                                //         if (response.status === 422) {
                                //             return response.json().then(function(data) {
                                //                 agreeButton.disabled = false;
                                //                 agreeButton.innerHTML = 'Saya Setuju';
                                //                 var msgs = [];
                                //                 if (data.errors) {
                                //                     Object.keys(data.errors).forEach(function(key) {
                                //                         msgs = msgs.concat(data.errors[key]);
                                //                     });
                                //                 }
                                //                 if (window.Swal) {
                                //                     Swal.fire({
                                //                         icon: 'error',
                                //                         title: 'Validasi Gagal',
                                //                         html: msgs.join('<br>'),
                                //                         confirmButtonColor: '#028284'
                                //                     });
                                //                 }
                                //             });
                                //         }
                                //         if (!response.ok) {
                                //             agreeButton.disabled = false;
                                //             agreeButton.innerHTML = 'Saya Setuju';
                                //             if (window.Swal) {
                                //                 Swal.fire({
                                //                     icon: 'error',
                                //                     title: 'Server Error',
                                //                     text: 'Terjadi kesalahan di server. Silakan coba lagi.',
                                //                     confirmButtonColor: '#028284'
                                //                 });
                                //             }
                                //             return;
                                //         }
                                //         window.location.href = response.url;
                                //     }).catch(function(err) {
                                //         clearTimeout(timeoutId);
                                //         if (err.name === 'AbortError') return;
                                //         agreeButton.disabled = false;
                                //         agreeButton.innerHTML = 'Saya Setuju';
                                //         if (window.Swal) {
                                //             Swal.fire({
                                //                 icon: 'error',
                                //                 title: 'Gagal',
                                //                 text: 'Terjadi kesalahan jaringan. Silakan coba lagi.',
                                //                 confirmButtonColor: '#028284'
                                //             });
                                //         }
                                //     });
                                // });

                                agreeButton.addEventListener('click', (e) => {
                                    e.preventDefault();

                                    if (!form.reportValidity()) return;

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

                                    fetch(form.action, {
                                        method: form.method,
                                        body: new FormData(form),
                                        headers: {
                                            'X-Requested-With': 'XMLHttpRequest'
                                        }
                                    }).then(function(response) {
                                        if (response.status === 422) {
                                            return response.json().then(function(data) {
                                                agreeButton.disabled = false;
                                                agreeButton.innerHTML = 'Saya Setuju';

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

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

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

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

                                        window.location.href = response.url;

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

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

                                // Kalau redirect back dengan error, aktifkan tombol lagi
                                @if ($errors->any())
                                    agreeButton.disabled = false;
                                    agreeButton.innerHTML = 'Saya Setuju';
                                @endif
                            });
                        </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>) <br> dan jika ada pilihan yang tidak
                                        sesuai atau tidak ada,
                                        silahkan hubungi Admin K3 PT Multi Spunindo Jaya Tbk, untuk dibantu lebih lanjut.
                                    </p>

                                    <div class="text-center">
                                        <p class="fw-bold text-primary">
                                            <i class="fas fa-calendar-alt me-1"></i>
                                            Tanggal Pengajuan:
                                            {{ optional($list->tgl_mengajukan ? \Carbon\Carbon::parse($list->tgl_mengajukan) : null)->format('d-m-Y') ?? '-' }}
                                        </p>
                                    </div>
                                </div>
                                {{-- Catatan Revisi --}}
                                @if (!empty($list))
                                    <div class="mb-4">
                                        <h5 class="fw-bold text-secondary mb-3">
                                            <i class="fas fa-comment-dots me-2"></i> Status Approval
                                        </h5>
                                        <div class="row g-3">

                                            {{-- === PIC Kerja === --}}
                                            @php
                                                $statusMap = [
                                                    'T' => ['label' => 'Tolak', 'class' => 'bg-danger'],
                                                    'TR' => ['label' => 'Terima', 'class' => 'bg-success'],
                                                    'P' => ['label' => 'Pending', 'class' => 'bg-primary'],
                                                ];
                                                $statusPicKerja = $statusMap[$list->approval_pic_kerja] ?? [
                                                    'label' => 'Tidak Diketahui',
                                                    'class' => 'bg-secondary',
                                                ];
                                                $notesPicKerja = array_filter(
                                                    array_map('trim', explode(';', $list->catatan_picker ?? '')),
                                                );
                                            @endphp
                                            <div class="col-md-4">
                                                <div class="card shadow-sm border-0 h-100">
                                                    <div class="card-header bg-primary text-white py-2">
                                                        <i class="fas fa-user-cog me-1"></i> PIC Kerja
                                                    </div>
                                                    <div class="card-body small">
                                                        <p class="mb-1">
                                                            <strong>Status:</strong>
                                                            <span class="badge {{ $statusPicKerja['class'] }}">
                                                                {{ $statusPicKerja['label'] }}
                                                            </span>
                                                        </p>
                                                        @if ($list->approval_pic_kerja === 'TR' && !empty($list->approve_picker))
                                                            <p class="mb-1"><strong>Tanggal Approve:</strong>
                                                                {{ \Carbon\Carbon::parse($list->approve_picker)->format('d-m-Y H:i') }}
                                                            </p>
                                                        @endif
                                                        @if ($list->approval_pic_kerja === 'T' && !empty($list->reject_picker))
                                                            <p class="mb-1"><strong>Tanggal Reject:</strong>
                                                                {{ \Carbon\Carbon::parse($list->reject_picker)->format('d-m-Y H:i') }}
                                                            </p>
                                                        @endif
                                                        @if (!empty($notesPicKerja))
                                                            <p class="mb-0 mt-2"><strong>Catatan Revisi:</strong></p>
                                                            <ul class="mb-0 ps-3">
                                                                @foreach ($notesPicKerja as $i => $note)
                                                                    <li class="{{ $loop->last ? 'revisi-terakhir' : '' }}">
                                                                        {{ $note }}
                                                                        @if ($loop->last)
                                                                            <span
                                                                                class="badge bg-warning text-white ms-1">Revisi
                                                                                Terakhir</span>
                                                                        @endif
                                                                    </li>
                                                                @endforeach
                                                            </ul>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>

                                            {{-- === PIC Area === --}}
                                            @php
                                                $statusPicArea = $statusMap[$list->approval_pic_area] ?? [
                                                    'label' => 'Tidak Diketahui',
                                                    'class' => 'bg-secondary',
                                                ];
                                                $notesPicArea = array_filter(
                                                    array_map('trim', explode(';', $list->catatan_picare ?? '')),
                                                );
                                            @endphp
                                            <div class="col-md-4">
                                                <div class="card shadow-sm border-0 h-100">
                                                    <div class="card-header bg-primary text-white py-2">
                                                        <i class="fas fa-map-marker-alt me-1"></i> PIC Area
                                                    </div>
                                                    <div class="card-body small">
                                                        <p class="mb-1">
                                                            <strong>Status:</strong>
                                                            <span class="badge {{ $statusPicArea['class'] }}">
                                                                {{ $statusPicArea['label'] }}
                                                            </span>
                                                        </p>
                                                        @if ($list->approval_pic_area === 'TR' && !empty($list->approve_picare))
                                                            <p class="mb-1"><strong>Tanggal Approve:</strong>
                                                                {{ \Carbon\Carbon::parse($list->approve_picare)->format('d-m-Y H:i') }}
                                                            </p>
                                                        @endif
                                                        @if ($list->approval_pic_area === 'T' && !empty($list->reject_picare))
                                                            <p class="mb-1"><strong>Tanggal Reject:</strong>
                                                                {{ \Carbon\Carbon::parse($list->reject_picare)->format('d-m-Y H:i') }}
                                                            </p>
                                                        @endif
                                                        @if (!empty($notesPicArea))
                                                            <p class="mb-0 mt-2"><strong>Catatan Revisi:</strong></p>
                                                            <ul class="mb-0 ps-3">
                                                                @foreach ($notesPicArea as $i => $note)
                                                                    <li class="{{ $loop->last ? 'revisi-terakhir' : '' }}">
                                                                        {{ $note }}
                                                                        @if ($loop->last)
                                                                            <span
                                                                                class="badge bg-warning text-white ms-1">Revisi
                                                                                Terakhir</span>
                                                                        @endif
                                                                    </li>
                                                                @endforeach
                                                            </ul>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>

                                            {{-- === K3 === --}}
                                            @php
                                                $statusK3 = $statusMap[$list->approval_k3] ?? [
                                                    'label' => 'Tidak Diketahui',
                                                    'class' => 'bg-secondary',
                                                ];
                                                $notesK3 = array_filter(
                                                    array_map('trim', explode(';', $list->catatan_k3 ?? '')),
                                                );
                                            @endphp
                                            <div class="col-md-4">
                                                <div class="card shadow-sm border-0 h-100">
                                                    <div class="card-header bg-primary text-white py-2">
                                                        <i class="fas fa-shield-alt me-1"></i> K3
                                                    </div>
                                                    <div class="card-body small">
                                                        <p class="mb-1">
                                                            <strong>Status:</strong>
                                                            <span class="badge {{ $statusK3['class'] }}">
                                                                {{ $statusK3['label'] }}
                                                            </span>
                                                        </p>
                                                        @if ($list->approval_k3 === 'TR' && !empty($list->approve_k3))
                                                            <p class="mb-1"><strong>Tanggal Approve:</strong>
                                                                {{ \Carbon\Carbon::parse($list->approve_k3)->format('d-m-Y H:i') }}
                                                            </p>
                                                        @endif
                                                        @if ($list->approval_k3 === 'T' && !empty($list->reject_k3))
                                                            <p class="mb-1"><strong>Tanggal Reject:</strong>
                                                                {{ \Carbon\Carbon::parse($list->reject_k3)->format('d-m-Y H:i') }}
                                                            </p>
                                                        @endif
                                                        @if (!empty($notesK3))
                                                            <p class="mb-0 mt-2"><strong>Catatan Revisi:</strong></p>
                                                            <ul class="mb-0 ps-3">
                                                                @foreach ($notesK3 as $i => $note)
                                                                    <li
                                                                        class="{{ $loop->last ? 'revisi-terakhir' : '' }}">
                                                                        {{ $note }}
                                                                        @if ($loop->last)
                                                                            <span
                                                                                class="badge bg-warning text-white ms-1">Revisi
                                                                                Terakhir</span>
                                                                        @endif
                                                                    </li>
                                                                @endforeach
                                                            </ul>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                @endif

                                <!-- 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 }}" font-weight: bold;>
                                        <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="{{ $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="masa_berlaku" name="masa_berlaku"
                                            readonly value="Permit Baru">
                                    </div>
                                    @if ($hasRole('veneks'))
                                        <div class="col-md-6">
                                            <label for="nama_vendor" class="form-label">Nama Vendor</label>
                                            <input type="text" class="form-control" id="nama_vendor"
                                                name="nama_vendor"
                                                value="{{ $vendors->firstWhere('idvendor', $users->id_vendor)->nama ?? 'Vendor tidak ditemukan' }}"
                                                readonly>
                                        </div>
                                    @elseif($hasRole('venint'))
                                        <div class="col-md-6">
                                            <label for="nama_vendor" class="form-label">Departemen</label>
                                            <input type="text" class="form-control" id="nama_vendor"
                                                name="nama_vendor"
                                                value="{{ $departement->firstWhere('id', $users->id_departement)->nama_departement ?? 'Departement tidak ditemukan' }}"
                                                readonly>
                                        </div>
                                    @endif
                                </div>
                                <div class="row mb-3">
                                    <div class="col-md-6">
                                        <label for="lokasi" class="form-label">Lokasi <span
                                                style="color:red">*</span></label>
                                        <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
                                        const dbPicArea = @json($list->pic_area); // nilai PIC Area 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 Area saat edit ===
                                        // PENTING: Jika sudah ada nilai dari database, JANGAN override dengan lokasi
                                        // Hanya auto-select berdasarkan lokasi saat CREATE (dbPicArea kosong)
                                        if (picSelect) {
                                            if (oldPic) {
                                                // Jika ada old value dari validation error, gunakan itu
                                                const targetVal = String(oldPic);
                                                ensureOptionExists(picSelect, targetVal, PIC_NAME_MAP[targetVal]);
                                                picSelect.value = targetVal;
                                                picSelect.dispatchEvent(new Event('change'));
                                            } else if (dbPicArea) {
                                                // Jika ada nilai dari database, pertahankan (jangan override)
                                                // Nilai sudah di-set via Blade selected attribute, tidak perlu ubah
                                                console.log('PIC Area dari database dipertahankan:', dbPicArea);
                                            }
                                            // TIDAK ada else untuk auto-select by lokasi saat edit
                                            // Auto-select by lokasi hanya berlaku di halaman ADD (create)
                                        }

                                        // === 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" Lokasi ===
                                        $(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 Area sesuai lokasi yang dipilih
                                            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="{{ $list->firstname }}" readonly>
                                    </div>
                                </div>

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

                                        <div class="col-md-6">
                                            <div id="nomor_po_field"
                                                style="display: {{ $list->no_po != 'menyusul' ? '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="{{ $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>

                                <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', $existingPemeriksaanIds) ? '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', $existingPemeriksaanIds) ? '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', $existingPemeriksaanIds) ? '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', $existingPemeriksaanIds) ? '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', $existingPemeriksaanIds) ? '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>

                                                    @php
                                                        $isPdf =
                                                            !empty($item->file_bpjs) &&
                                                            str_ends_with(strtolower($item->file_bpjs), '.pdf');
                                                        $showWrap =
                                                            !empty($item->file_bpjs) && $item->file_bpjs !== 'menyusul';
                                                    @endphp

                                                    <div id="bpjs_upload_wrapper_{{ $i + 1 }}"
                                                        style="{{ $showWrap ? '' : 'display:none' }}">
                                                        <div class="position-relative d-inline-block">
                                                            {{-- tombol edit yang nge-trigger input file --}}
                                                            <label for="file_upload_{{ $i + 1 }}"
                                                                class="btn btn-sm btn-icon-only bg-gradient-primary position-absolute bottom-0 start-0 m-2"
                                                                title="Pilih file">
                                                                <i class="fa fa-pen"></i>
                                                            </label>

                                                            <span id="preview_wrapper_{{ $i + 1 }}">
                                                                @if ($showWrap)
                                                                    @if ($isPdf)
                                                                        <a href="{{ asset('storage/' . $item->file_bpjs) }}"
                                                                            target="_blank"
                                                                            class="d-flex flex-column align-items-start text-decoration-none">
                                                                            <i class="fas fa-file-lines text-danger"
                                                                                style="font-size:80px"></i>
                                                                            <p class="text-xs mt-1 mb-0">
                                                                                {{ basename($item->file_bpjs) }}
                                                                            </p>
                                                                        </a>
                                                                    @else
                                                                        <img src="{{ asset('storage/' . $item->file_bpjs) }}"
                                                                            id="preview_bpjs_{{ $i + 1 }}"
                                                                            class="w-50 border-radius-lg shadow-sm"
                                                                            style="cursor: zoom-in"
                                                                            onclick="openFullSizeImage('preview_bpjs_{{ $i + 1 }}')">
                                                                    @endif
                                                                @else
                                                                    <img src="{{ asset('storage/noimage.png') }}"
                                                                        id="preview_bpjs_{{ $i + 1 }}"
                                                                        class="w-50 border-radius-lg shadow-sm"
                                                                        style="cursor: zoom-in"
                                                                        onclick="openFullSizeImage('preview_bpjs_{{ $i + 1 }}')">
                                                                @endif
                                                            </span>
                                                        </div>

                                                        {{-- input file (hidden) --}}
                                                        <input type="file" name="file_upload_{{ $i + 1 }}"
                                                            id="file_upload_{{ $i + 1 }}"
                                                            class="d-none form-control"
                                                            accept="image/png,image/jpeg,application/pdf"
                                                            onchange="previewFile(event, {{ $i + 1 }})">

                                                        {{-- info ukuran & format --}}
                                                        <p class="text-primary text-xs pt-2 mb-0">Max size: <b>3072 KB</b>
                                                        </p>
                                                        <p class="text-primary text-xs pt-1">Format: <b>PNG, JPG, JPEG,
                                                                PDF</b></p>
                                                    </div>
                                                @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</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"
                                                                    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>

                                <!-- Bukti Pendukung -->
                                <h4 style="color: #1c8c90; font-weight: bold;">4. Bukti Pendukung</h4>
                                <div style="border-top: 3px solid #1c8c90; margin: 20px 0;"></div>
                                <div class="row">
                                    {{-- <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</label><br>
                                            <!-- klik icon langsung trigger input id yang sama -->
                                            <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')) }}"
                                                    id="image-preview-apd" class="w-30 border-radius-lg shadow-sm"
                                                    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">
                                    </div>

                                    <!-- Upload Image 2: Foto Alat Kerja -->
                                    <div class="col-sm-6">
                                        <div class="position-relative">
                                            <label class="form-label">Foto Alat Kerja</label><br>
                                            <!-- langsung for ke input yang benar -->
                                            <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')) }}"
                                                    id="image-preview-alat-kerja" class="w-30 border-radius-lg shadow-sm"
                                                    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">
                                    </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>
                                        // Function to update image preview when a new file is selected
                                        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
                                                const url = URL.createObjectURL(file);
                                                preview.src = url;
                                                preview.onload = () => URL.revokeObjectURL(url); // bersihin memory
                                            });
                                        }

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

                                        function openFullSizeImage(imageId) {
                                            const imageSrc = document.getElementById(imageId).src;
                                            document.getElementById('full-image').src = imageSrc;
                                            const modal = new bootstrap.Modal(document.getElementById('imageModal'));
                                            modal.show();
                                        }


                                        // 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) {
                                        //     const imageSrc = document.getElementById(imageId).src;
                                        //     document.getElementById('full-image').src = imageSrc;

                                        //     // Buka modal secara manual
                                        //     const modal = new bootstrap.Modal(document.getElementById('imageModal'));
                                        //     modal.show();
                                        // }
                                    </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;">5. Persetujuan</h4>
                                    <div style="border-top: 3px solid #1c8c90; margin: 20px 0;"></div>
                                    <p> Pilih PIC Kerja dan Area sesuai dengan arahan !! </p>

                                    {{-- Informasi Hierarki Approval --}}
                                    <div class="mb-3 p-3"
                                        style="background-color: #e7f3ff; border-left: 4px solid #1c8c90; border-radius: 4px;">
                                        <p class="mb-2" style="color: #1c8c90; font-weight: bold;">
                                            <i class="fas fa-info-circle me-2"></i>Informasi Hierarki Approval:
                                        </p>
                                        <ul class="mb-0" style="font-size: 0.9rem; color: #495057;">
                                            <li class="mb-1"><strong>Hierarki:</strong> Vendor → PIC Kerja → PIC Area →
                                                K3
                                            </li>
                                            <li class="mb-1">Jika Anda mengubah <strong>PIC Kerja</strong>, maka status
                                                approval <strong>PIC Kerja Dan PIC Area</strong> akan kembali ke
                                                <strong>Pending</strong> (proses approval dimulai daria awal).
                                            </li>
                                            <li class="mb-1">Jika Anda mengubah <strong>PIC Area</strong>, maka hanya
                                                status
                                                approval <strong>PIC Area</strong> yang akan kembali ke
                                                <strong>Pending</strong>.
                                            </li>
                                        </ul>
                                    </div>
                                    {{-- 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>
                                    <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>
            </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>

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

        .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">Saya memiliki BPJS</option>
                                    </select>

                                    <div id="bpjs_upload_wrapper_${i}" style="display:none;">
                                    <div class="position-relative d-inline-block">
                                        <label for="file_upload_${i}"
                                            class="btn btn-sm btn-icon-only bg-gradient-primary position-absolute bottom-0 start-0 m-2"
                                            title="Pilih file">
                                        <i class="fa fa-pen"></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="d-none form-control"
                                            name="file_upload_${i}" id="file_upload_${i}"
                                            accept="image/png,image/jpeg,application/pdf"
                                            onchange="previewFile(event, ${i})">

                                    <p class="text-primary text-xs pt-2 mb-0">Max size: <b>3072 KB</b></p>
                                    <p class="text-primary text-xs pt-1">Format: <b>PNG, JPG, JPEG, PDF</b></p>
                                    </div>
                                `;
                } 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);
                const currentCount = countWorkers();

                if (target > maxJumlah) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Warning!',
                        text: `Jumlah tenaga kerja hanya ${maxJumlah}`
                    });
                    target = maxJumlah;
                    inputJumlah.value = maxJumlah;
                }

                // === KONFIRMASI jika MENGURANGI jumlah pekerja ===
                if (target < currentCount) {
                    const diff = currentCount - target;
                    Swal.fire({
                        icon: 'question',
                        title: 'Konfirmasi Pengurangan',
                        html: `Anda akan mengurangi <strong>${diff} anggota</strong> tenaga kerja.<br>` +
                            `Dari <strong>${currentCount}</strong> menjadi <strong>${target}</strong> orang.<br><br>` +
                            `Data anggota yang dihapus tidak dapat dikembalikan. Lanjutkan?`,
                        showCancelButton: true,
                        confirmButtonText: 'Ya, Kurangi',
                        cancelButtonText: 'Batal',
                        confirmButtonColor: '#d33',
                        cancelButtonColor: '#6c757d',
                        reverseButtons: true
                    }).then((result) => {
                        if (result.isConfirmed) {
                            // Lanjutkan pengurangan
                            performUpdateTenagaKerja(target);
                        } else {
                            // Batalkan, kembalikan nilai input
                            inputJumlah.value = currentCount;
                        }
                    });
                } else {
                    // Langsung tambah (tidak perlu konfirmasi)
                    performUpdateTenagaKerja(target);
                }
            };

            // Fungsi helper untuk eksekusi penambahan/pengurangan
            function performUpdateTenagaKerja(target) {
                // 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');
                    });

                    // Pindahkan deleted_id ke bucket jika ada
                    const idInput = last.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);
                    }

                    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>

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

        .revisi-terakhir {
            font-weight: bold;
            color: #d63384;
            /* pink/ungu highlight */
        }
    </style>
@endpush