@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])

    <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="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>
                        @if ($authorize->edit == '1')
                            {{-- button save --}}
                            {{-- <button class="btn btn-primary mb-0" onclick="showConfirmation();">
                                <i class="fas fa-floppy-disk me-1"></i><span class="font-weight-bold">
                                    Simpan</span>
                            </button> --}}
                            <button type="button" onclick="showConfirmation(event)" class="btn btn-primary mb-0">
                                <i class="fas fa-floppy-disk me-1"></i>
                                <span class="font-weight-bold">Simpan</span>
                            </button>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <form role="form" method="POST" action="{{ route('melengkapi.permit') }}"
                        enctype="multipart/form-data" id="{{ $dmenu }}-form">
                        @csrf
                        {{-- @method('PUT') --}}
                        <div class="card-header">
                            <div class="card-body">
                                <div class="col">
                                    {{-- alert --}}
                                    @include('components.alert')
                                </div>
                                @if (session('swal'))
                                    <script>
                                        document.addEventListener('DOMContentLoaded', () => {
                                            const s = @json(session('swal'));
                                            Swal.fire({
                                                icon: s.icon || 'info',
                                                title: s.title || 'Info',
                                                text: s.text || '',
                                                confirmButtonText: 'OK'
                                            });
                                        });
                                    </script>
                                @endif
                                <!-- Permit Baru -->
                                <div class="text-center">
                                    <h3>MELENGKAPI PERMIT</h3>
                                </div>

                                <div class="text-center">
                                    <p>
                                        Silahkan Lengkapi pada bagian Nomor PO dan BPJS tiap Anggota Pekerjanya
                                    </p>
                                </div>
                                @if (!empty($list->note_melengkapi_reject))
                                    <div id="catatan-detail" class="p-3 mb-3 border-2 rounded bg-light shadow-sm">
                                        <strong class="text-warning">
                                            <i class="fa fa-sticky-note me-1"></i> Catatan Revisi:
                                        </strong>
                                        <div class="mt-2">{!! nl2br(e($list->note_melengkapi_reject)) !!}</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 }}">
                                        <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 <span
                                                style="color: red;">*</span></label>
                                        <input type="date" class="form-control" id="mulai_kerja" name="mulai_kerja"
                                            value="{{ $list->mulai_kerja }}" readonly>
                                    </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 Semua Approved' }}">
                                    </div>

                                </div>

                                <div class="row mb-3">
                                    <div class="col-md-6">
                                        <label for="lokasi" class="form-label">Lokasi <span
                                                style="color: red;">*</span></label>
                                        <!-- Tombol untuk membuka modal -->
                                        <button type="button" class="form-control text-start" id="openLocationModal"
                                            data-bs-toggle="modal" data-bs-target="#locationModal" disabled>
                                            {{ $namaLokasi }}
                                        </button>
                                        <!-- Hidden input untuk menyimpan nilai lokasi terpilih -->
                                        <input type="hidden" id="lokasi" name="lokasi">
                                    </div>

                                    <div class="col-md-6">
                                        @php
                                            $rolesArr = array_filter(
                                                array_map('trim', explode(',', strtolower($users->idroles ?? ''))),
                                            );
                                        @endphp

                                        <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 ?? '-' }}" readonly>


                                    </div>
                                </div>

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

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

                                @if (in_array('veneks', $rolesArr, true))
                                    <div class="row mb-3">
                                        <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 id="nomor_po_field" class="mt-3"
                                                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 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"
                                                readonly value="{{ $users->firstname }}">
                                        </div>
                                    </div>
                                @endif

                                <!-- Modal -->
                                <div class="modal fade" id="locationModal" tabindex="-1"
                                    aria-labelledby="locationModalLabel" aria-hidden="true">
                                    <div class="modal-dialog 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">
                                                <!-- Input untuk filter data -->
                                                <input type="text" id="searchLocationTable" class="form-control mb-3"
                                                    placeholder="Cari Lokasi...">

                                                <!-- Tabel data lokasi -->
                                                <table class="table table-bordered">
                                                    <thead>
                                                        <tr>
                                                            <th>ID</th>
                                                            <th>Nama Lokasi</th>
                                                            <th>Pilih</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody id="locationTableBody">
                                                        @foreach ($locations as $location)
                                                            <tr>
                                                                <td>{{ $location->id }}</td>
                                                                <td>{{ $location->nama_lokasi }}</td>
                                                                <td>
                                                                    <button type="button"
                                                                        class="btn btn-primary select-location"
                                                                        data-id="{{ $location->id }}"
                                                                        data-name="{{ $location->nama_lokasi }}">
                                                                        Pilih
                                                                    </button>
                                                                </td>
                                                            </tr>
                                                        @endforeach
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <script>
                                    // Filter tabel berdasarkan input pencarian
                                    document.getElementById('searchLocationTable').addEventListener('input', function() {
                                        let filter = this.value.toLowerCase();
                                        let rows = document.querySelectorAll('#locationTableBody tr');

                                        rows.forEach(row => {
                                            let locationName = row.cells[1].innerText.toLowerCase();
                                            row.style.display = locationName.includes(filter) ? '' : 'none';
                                        });
                                    });

                                    // Pilih lokasi dan isi form hidden
                                    document.querySelectorAll('.select-location').forEach(button => {
                                        button.addEventListener('click', function() {
                                            let locationId = this.getAttribute('data-id');
                                            let locationName = this.getAttribute('data-name');

                                            // Set nilai input hidden
                                            document.getElementById('lokasi').value = locationId;

                                            // Tampilkan nama lokasi di tombol
                                            document.getElementById('openLocationModal').innerText = locationName;

                                            // Tutup modal
                                            let modal = bootstrap.Modal.getInstance(document.getElementById('locationModal'));
                                            modal.hide();
                                        });
                                    });
                                </script>


                                <!-- 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 !" readonly>{{ $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' : '' }}
                                                disabled>
                                            <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' : '' }}
                                                disabled>
                                            <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' : '' }}
                                                disabled>
                                            <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' : '' }}
                                                disabled>
                                            <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' : '' }}
                                                disabled>
                                            <label class="form-check-label" for="lain_lain">
                                                Lain-Lain
                                            </label>
                                        </div>
                                    </div>
                                </div>

                                <hr>

                                <div class="row mb-3">
                                    <div class="col-md-3">
                                        <label for="tenaga_kerja" class="form-label">Jumlah Tenaga Kerja <span
                                                style="color: red;">*</span></label>
                                        <div class="position-relative">
                                            <input type="number" class="form-control pe-5" id="tenaga_kerja"
                                                name="tenaga_kerja" value="{{ $totalPekerja }}"
                                                onchange="updateTenagaKerja()" readonly>

                                            <button type="button"
                                                class="btn btn-primary position-absolute top-50 end-0 translate-middle-y"
                                                onclick="updateTenagaKerja()" disabled>Orang</button>
                                        </div>
                                    </div>
                                </div>

                                <div id="tenaga_kerja_detail"></div>

                                <hr>
                                <br>

                                <div class="row mb-3">
                                    <div class="col-md-6">
                                        <label for="kategori_pekerjaan" class="form-label">Kategori Pekerjaan <span
                                                style="color: red;">*</span></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' : '' }}
                                                        disabled>
                                                    <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 <span
                                                style="color: red;">*</span></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' : '' }}
                                                                disabled>
                                                            <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) }}" readonly>
                                    </div>
                                </div>


                                {{-- Script untuk Modal --}}

                                <script>
                                    const kategoriDetail = @json($kategoriDetails); // Data from the controller
                                    const existingPengecheckanIds = @json($existingPengecheckanIds); // Existing checks from the controller

                                    function updateChecklist() {
                                        const selectedCategories = Array.from(document.querySelectorAll('input[name="kategori_pekerjaan[]"]:checked'));
                                        const checklistContainer = document.getElementById('checklist-container');
                                        const lainLainContainer = document.getElementById('lain-lain-container');
                                        checklistContainer.innerHTML = ''; // Reset checklist container

                                        // If any category is selected, display the checklist details
                                        if (selectedCategories.length > 0) {
                                            checklistContainer.style.display = 'flex'; // Show checklist container
                                            let showLainLainField = false;

                                            selectedCategories.forEach((checkbox) => {
                                                const categoryId = checkbox.value;
                                                const categoryDetail = kategoriDetail[categoryId];

                                                if (categoryId === 'KPE0006') {
                                                    showLainLainField = true;
                                                }

                                                if (categoryDetail) {
                                                    const colDiv = document.createElement('div');
                                                    colDiv.classList.add('col-md-6');
                                                    colDiv.innerHTML = `
                                                    <div class="mb-3">
                                                        <label class="form-label" style="font-size: 14px;">${categoryDetail.label}</label>
                                                        <div class="row">
                                                            ${categoryDetail.options.map((option) => `
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        <div class="col-md-6">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            <div class="form-check">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                <input  disabled class="form-check-input" type="checkbox" value="${option.value}" id="checklist_${categoryId}_${option.value}" name="checklist[${categoryId}][]"
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    ${existingPengecheckanIds.includes(option.value) ? 'checked disabled' : ''}>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                <label class="form-check-label" for="checklist_${categoryId}_${option.value}">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    ${option.label}
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                </label>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            </div>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        </div>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    `).join('')}
                                                        </div>
                                                    </div>
                                                `;
                                                    checklistContainer.appendChild(colDiv);
                                                }
                                            });

                                            // Show the text field if "lain-lain" category is selected
                                            lainLainContainer.style.display = showLainLainField ? 'block' : 'none';
                                        } else {
                                            checklistContainer.style.display = 'none'; // Hide checklist if no category is selected
                                            lainLainContainer.style.display = 'none'; // Hide "lain-lain" text field
                                        }
                                    }

                                    // Call updateChecklist when the page loads to initialize the view
                                    document.addEventListener('DOMContentLoaded', function() {
                                        updateChecklist();
                                    });
                                </script>

                                <!-- Job Safety Analysis -->
                                <h4 style="color: #1c8c90; font-weight: bold;">3. Job Safety Analysis</h4>
                                <div style="border-top: 3px solid #1c8c90; margin: 20px 0;"></div>
                                <div class="row mb-3">
                                    <div class="col-md-12">
                                        <label for="analisis" class="form-label">Tabel Analisis <span
                                                style="color: red;">*</span></label>
                                        <div class="table-responsive">
                                            <table class="table table-bordered" id="table_analisis">
                                                <thead>
                                                    <tr>
                                                        <th>Urutan Langkah Tugas</th>
                                                        <th>Potensi Bahaya</th>
                                                        <th>Akibat/Kerugian</th>
                                                        <th>Rekomendasi Pencegahan</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @foreach ($analisis as $item)
                                                        <tr>
                                                            <td>
                                                                <textarea class="form-control" name="langkah_tugas[]" rows="4" readonly>{{ $item->langkah_tugas }}</textarea>
                                                            </td>
                                                            <td>
                                                                <textarea class="form-control" name="potensi_bahaya[]" rows="4" readonly>{{ $item->potensi_bahaya }}</textarea>
                                                            </td>
                                                            <td>
                                                                <textarea class="form-control" name="akibat_kerugian[]" rows="4" readonly>{{ $item->akibat }}</textarea>
                                                            </td>
                                                            <td>
                                                                <textarea class="form-control" name="rekomendasi_pencegahan[]" rows="4" readonly>{{ $item->rekomendasi }}</textarea>
                                                            </td>
                                                        </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>
                                        </div>
                                        <button type="button" class="btn btn-success" onclick="addRow()" disabled>Tambah
                                            Baris</button>
                                    </div>
                                </div>

                                <hr>

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

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

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

                                            @if (strtolower($list->workshop_kontraktor_opsi ?? null) === 'wrk0001')
                                                <div class="col-md-3">
                                                    <label class="form-label fw-bold">Keterangan Lainnya</label>
                                                    <p class="mt-1">{{ $list->workshop_kontraktor_other ?? '—' }}</p>
                                                </div>
                                            @endif

                                            <div class="row mt-3 w-100">
                                                <div class="col-md-6">
                                                    <label class="form-label fw-bold">Tanggal Awal Workshop</label>
                                                    <div class="form-control bg-light" style="min-height: 38px;">
                                                        {{ !empty($list->tgl_awal_workshop) ? \Carbon\Carbon::parse($list->tgl_awal_workshop)->format('d-m-Y') : '—' }}
                                                    </div>
                                                </div>

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

                                <hr>

                                <!-- Bukti Pendukung -->
                                <h4 style="color: #1c8c90; font-weight: bold;">5. Bukti Pendukung</h4>
                                <div style="border-top: 3px solid #1c8c90; margin: 20px 0;"></div>
                                <div class="row">
                                    <!-- Upload Image 1: Foto APD -->
                                    <div class="col-sm-6">
                                        <div class="position-relative">
                                            <div>
                                                <label for="pic_area" class="form-label">Foto APD <span
                                                        style="color: red;">*</span></label>
                                                <br>
                                                <span class="h-12 w-12 rounded-full overflow-hidden bg-gray-100">
                                                    <img src="{{ asset('storage/' . ($list->foto_apd ?? 'noimage.png')) }}"
                                                        alt="Foto APD"
                                                        onerror="this.onerror=null;this.src='{{ asset('storage/noimage.png') }}';"
                                                        class="w-30 border-radius-lg shadow-sm" id="image-preview-apd"
                                                        data-bs-toggle="modal" data-bs-target="#imageModal"
                                                        onclick="openFullSizeImage('image-preview-apd')">
                                                </span>
                                            </div>
                                        </div>
                                        <input class="form-control" type="file" id="image-upload-apd"
                                            name="image-upload-apd" style="display: none;" disabled>
                                    </div>

                                    <!-- Upload Image 2: Foto Alat Kerja -->
                                    <div class="col-sm-6">
                                        <div class="position-relative">
                                            <div>
                                                <label for="pic_area" class="form-label">Foto Alat Kerja <span
                                                        style="color: red;">*</span></label>
                                                <br>
                                                <span class="h-12 w-12 rounded-full overflow-hidden bg-gray-100">
                                                    <img src="{{ asset('storage/' . ($list->foto_alat_kerja ?? 'noimage.png')) }}"
                                                        alt="Foto Alat Kerja"
                                                        onerror="this.onerror=null;this.src='{{ asset('storage/noimage.png') }}';"
                                                        class="w-30 border-radius-lg shadow-sm"
                                                        id="image-preview-alat-kerja" data-bs-toggle="modal"
                                                        data-bs-target="#imageModal"
                                                        onclick="openFullSizeImage('image-preview-alat-kerja')">
                                                </span>
                                            </div>
                                        </div>
                                        <input class="form-control" type="file" id="image-upload-alat-kerja"
                                            name="image-upload-alat-kerja" style="display: none;" disabled>
                                    </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
                                        // document.getElementById('image-upload-apd').onchange = function(evt) {
                                        //     const [file] = document.getElementById('image-upload-apd').files;
                                        //     if (file) {
                                        //         document.getElementById('image-preview-apd').src = URL.createObjectURL(file);
                                        //     }
                                        // };

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

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

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

                                        // Open Full Size Image in Modal
                                        function openFullSizeImage(imageId) {
                                            var imageSrc = document.getElementById(imageId).src;
                                            document.getElementById('full-image').src = imageSrc;
                                        };
                                    </script>

                                    <hr style="border: 0; height: 1px; background-color: white;">
                                    <hr style="border: 0; height: 1px; background-color: white;">

                                    <br>
                                    <!-- Approval -->
                                    <h4 style="color: #1c8c90; font-weight: bold;">6. Persetujuan</h4>
                                    <div style="border-top: 3px solid #1c8c90; margin: 20px 0;"></div>

                                    <div class="row">
                                        <div class="row mb-3">
                                            <div class="col-md-6">
                                                <label for="pic_area" class="form-label">PIC Area <span
                                                        style="color: red;">*</span></label>
                                                <select class="form-select" id="pic_area" name="pic_area" disabled>
                                                    <option value="{{ $list->pic_area }}">{{ $namaPicArea }}</option>
                                                    <!-- Looping untuk menampilkan pilihan PIC Area -->
                                                </select>
                                            </div>

                                            <div class="col-md-6">
                                                <label for="pic_lokasi" class="form-label">PIC Kerja <span
                                                        style="color: red;">*</span></label>
                                                <select class="form-select" id="pic_lokasi" name="pic_lokasi" disabled>
                                                    <option value="{{ $list->pic_kerja }}">{{ $namaPicKerja }}</option>
                                                    <!-- Looping untuk menampilkan pilihan PIC Lokasi -->
                                                </select>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="row mb-3">
                                            <div class="col-md-4">
                                                <label for="approval_pic_area" class="form-label">Approval PIC
                                                    Area</label>
                                                <input type="text" class="form-control" id="approval_pic_area"
                                                    name="status_permit" readonly value="{{ $approval_pic_area }}">
                                            </div>

                                            <div class="col-md-4">
                                                <label for="approval_pic_kerja" class="form-label">Approval PIC
                                                    Kerja</label>
                                                <input type="text" class="form-control" id="approval_pic_kerja"
                                                    name="status_permit" readonly value="{{ $approval_pic_kerja }}">
                                            </div>

                                            <div class="col-md-4">
                                                <label for="approval_k3" class="form-label">Approval K3 </label>
                                                <input type="text" class="form-control" id="approval_k3"
                                                    name="status_permit" readonly value="{{ $approval_k3 }}">
                                            </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>

    {{-- 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')
    <script>
        function addRow() {
            var table = document.getElementById("table_analisis");
            var rowCount = table.rows.length;

            // Insert a new row at the end of the table
            var row = table.insertRow(rowCount - 1); // Insert before the last row (button row)

            // Insert new cells and textarea fields into the row
            for (var i = 0; i < 4; i++) {
                var cell = row.insertCell(i);
                var textarea = document.createElement("textarea");
                textarea.classList.add("form-control");
                textarea.rows = 4; // Set the number of rows for the textarea
                if (i == 0) {
                    textarea.name = "langkah_tugas[]";
                } else if (i == 1) {
                    textarea.name = "potensi_bahaya[]";
                } else if (i == 2) {
                    textarea.name = "akibat_kerugian[]";
                } else {
                    textarea.name = "rekomendasi_pencegahan[]";
                }
                cell.appendChild(textarea);
            }

            // Insert the delete button in the last cell of the new row
            var deleteCell = row.insertCell(4);
            var deleteButton = document.createElement("button");
            deleteButton.type = "button";
            deleteButton.classList.add("btn", "btn-danger");
            deleteButton.textContent = "Hapus";
            deleteButton.onclick = function() {
                deleteRow(deleteButton);
            }; // Add the delete function to the button
            deleteCell.appendChild(deleteButton);
        };

        // function showConfirmation() {
        //     var submitButton = event ? (event.target.closest ? event.target.closest('button') : null) : null;

        //     // === 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');
        //             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'
        //             });
        //             return;
        //         } else {
        //             nomorPO.classList.remove('is-invalid');
        //         }
        //     }

        //     Swal.fire({
        //         title: 'Konfirmasi Pengajuan',
        //         text: 'Apakah Anda yakin ingin mengajukan kelengkapan data ini?',
        //         icon: 'question', // Ikon bisa 'warning', 'error', 'success', 'info', atau 'question'
        //         showCancelButton: true,
        //         confirmButtonColor: '#3085d6', // Warna tombol "Ya"
        //         cancelButtonColor: '#d33', // Warna tombol "Tidak"
        //         confirmButtonText: 'Ya, Ajukan!',
        //         cancelButtonText: 'Batal'
        //     }).then((result) => {
        //         if (result.isConfirmed) {
        //             // Jika pengguna mengklik "Ya, Ajukan!", submit form via fetch untuk custom 30s timeout
        //             var form = document.getElementById('{{ $dmenu }}-form');

        //             if (submitButton) {
        //                 submitButton.disabled = true;
        //                 submitButton.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span> <span class="font-weight-bold">Proses...</span>';
        //             }

        //             var controller = new AbortController();
        //             var timeoutId = setTimeout(function() {
        //                 controller.abort();
        //                 if (submitButton) {
        //                     submitButton.disabled = false;
        //                     submitButton.innerHTML = '<i class="fas fa-floppy-disk me-1"></i><span class="font-weight-bold"> Simpan</span>';
        //                 }
        //                 if (window.Swal) {
        //                     Swal.fire({
        //                         icon: 'warning',
        //                         title: 'Timeout',
        //                         text: 'Proses menyimpan permit melebihi batas waktu (30 detik). Silakan coba kembali.',
        //                         confirmButtonColor: '#028284'
        //                     });
        //                 }
        //             }, 30000); // 30 detik

        //             fetch(form.action, {
        //                 method: form.method || 'POST',
        //                 body: new FormData(form),
        //                 signal: controller.signal,
        //                 headers: { 
        //                     'X-Requested-With': 'XMLHttpRequest',
        //                     'Accept': 'application/json'
        //                 }
        //             }).then(function(response) {
        //                 clearTimeout(timeoutId);
        //                 if (response.status === 422) { // Error validasi
        //                     return response.json().then(function(data) {
        //                         if (submitButton) {
        //                             submitButton.disabled = false;
        //                             submitButton.innerHTML = '<i class="fas fa-floppy-disk me-1"></i><span class="font-weight-bold"> Simpan</span>';
        //                         }
        //                         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) {
        //                     if (submitButton) {
        //                         submitButton.disabled = false;
        //                         submitButton.innerHTML = '<i class="fas fa-floppy-disk me-1"></i><span class="font-weight-bold"> Simpan</span>';
        //                     }
        //                     if (window.Swal) {
        //                         Swal.fire({
        //                             icon: 'error',
        //                             title: 'Server Error',
        //                             text: 'Terjadi kesalahan di server. Silakan coba lagi.',
        //                             confirmButtonColor: '#028284'
        //                         });
        //                     }
        //                     return;
        //                 }

        //                 // Sukses -> pindah halaman
        //                 window.location.href = response.url;
        //             }).catch(function(err) {
        //                 clearTimeout(timeoutId);
        //                 if (err.name === 'AbortError') return;

        //                 if (submitButton) {
        //                     submitButton.disabled = false;
        //                     submitButton.innerHTML = '<i class="fas fa-floppy-disk me-1"></i><span class="font-weight-bold"> Simpan</span>';
        //                 }
        //                 if (window.Swal) {
        //                     Swal.fire({
        //                         icon: 'error',
        //                         title: 'Gagal',
        //                         text: 'Terjadi kesalahan jaringan. Silakan coba lagi.',
        //                         confirmButtonColor: '#028284'
        //                     });
        //                 }
        //             });
        //         } else {
        //             // Jika pengguna mengklik "Batal", tidak ada yang terjadi
        //             console.log('Pengajuan dibatalkan.');
        //         }
        //     });
        // }

        function showConfirmation(event) {
            var submitButton = event ?
                (event.target.closest ? event.target.closest('button') : null) :
                null;

            // === 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()) {
                    if (nomorPO) {
                        nomorPO.classList.add('is-invalid');
                    }

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

                    return;
                }

                nomorPO.classList.remove('is-invalid');
            }

            Swal.fire({
                title: 'Konfirmasi Pengajuan',
                text: 'Apakah Anda yakin ingin mengajukan kelengkapan data ini?',
                icon: 'question',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Ya, Ajukan!',
                cancelButtonText: 'Batal'
            }).then(function(result) {
                if (!result.isConfirmed) {
                    return;
                }

                var form = document.getElementById('{{ $dmenu }}-form');

                if (!form) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Form Tidak Ditemukan',
                        text: 'Form pengajuan tidak ditemukan.',
                        confirmButtonColor: '#028284'
                    });

                    return;
                }

                if (submitButton) {
                    submitButton.disabled = true;
                    submitButton.innerHTML =
                        '<span class="spinner-border spinner-border-sm me-1"></span>' +
                        '<span class="font-weight-bold"> Proses...</span>';
                }

                fetch(form.action, {
                        method: form.method || 'POST',
                        body: new FormData(form),
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest',
                            'Accept': 'application/json'
                        }
                    })
                    .then(function(response) {
                        if (response.status === 422) {
                            return response.json().then(function(data) {
                                var msgs = [];

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

                                Swal.fire({
                                    icon: 'error',
                                    title: 'Validasi Gagal',
                                    html: msgs.length ?
                                        msgs.join('<br>') : 'Data yang dikirim belum valid.',
                                    confirmButtonColor: '#028284'
                                });

                                throw new Error('validation_error');
                            });
                        }

                        if (!response.ok) {
                            throw new Error('server_error');
                        }

                        // Redirect mengikuti URL respons terakhir dari Laravel
                        window.location.href = response.url;
                    })
                    .catch(function(err) {
                        if (submitButton) {
                            submitButton.disabled = false;
                            submitButton.innerHTML =
                                '<i class="fas fa-floppy-disk me-1"></i>' +
                                '<span class="font-weight-bold"> Simpan</span>';
                        }

                        // Validasi sudah menampilkan Swal sendiri
                        if (err.message === 'validation_error') {
                            return;
                        }

                        Swal.fire({
                            icon: 'error',
                            title: err.message === 'server_error' ?
                                'Server Error' : 'Gagal',
                            text: err.message === 'server_error' ?
                                'Terjadi kesalahan di server. Silakan coba lagi.' :
                                'Terjadi kesalahan jaringan. Silakan coba lagi.',
                            confirmButtonColor: '#028284'
                        });
                    });
            });
        }


        // Function to delete a row
        function deleteRow(button) {
            var row = button.parentNode.parentNode; // Get the row of the clicked button
            row.parentNode.removeChild(row); // Remove the row from the table
        };

        document.addEventListener('DOMContentLoaded', function() {
            // Initialize the form with existing data
            updateTenagaKerja(true);
        });

        (function() {
            const ROLES_RAW = (@json($users->idroles) || '').toLowerCase();
            const ROLES = ROLES_RAW.split(',').map(s => s.trim()).filter(Boolean);
            const IS_VENEKS = ROLES.includes('veneks');
            const IS_VENINT = ROLES.includes('venint');

            const pekerjaDetails = @json($pekerjaDetails ?? []);
            const workerDetails = @json($workerDetails ?? []);
            const OLD_BPJS = @json(old('bpjs_option_list', []));
            const NOIMG = @json(asset('/storage/noimage.png'));
            const BASE_URL = "{{ asset('storage') }}";

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

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

            function resolveJumlah() {
                const el = document.getElementById('tenaga_kerja');
                let val = el ? parseInt(el.value || '0', 10) : 0;
                if (!val || Number.isNaN(val)) {
                    if (pekerjaDetails.length) return pekerjaDetails.length;
                    if (workerDetails.length) return workerDetails.length;
                    if (OLD_BPJS.length) return OLD_BPJS.length;
                    return 0;
                }
                return val;
            }

            function getDbPreviewPath(rec) {
                if (!rec || !rec.file_bpjs) return null;
                const val = String(rec.file_bpjs).trim();
                if (val === 'menyusul' || val === 'Tidak Perlu') return null;
                return BASE_URL + '/' + val;
            }

            function renderRows(jumlah) {
                const container = document.getElementById('tenaga_kerja_detail');
                container.innerHTML = '';

                for (let i = 1; i <= jumlah; i++) {
                    const row = document.createElement('div');
                    row.className = 'row mb-3';

                    // --- Nama pekerja (display) + hidden id_induction (KEY) ---
                    const c1 = document.createElement('div');
                    c1.className = 'col-md-4';
                    c1.innerHTML = `
                <label class="form-label">Tenaga Kerja - ${i}</label>
                <input type="hidden" id="id_induction_${i}" name="id_induction_${i}">
                <input type="text" class="form-control" id="tenaga_kerja_${i}" name="tenaga_kerja_${i}" readonly>
            `;

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

                    // --- BPJS ---
                    const c3 = document.createElement('div');
                    c3.className = 'col-md-4';
                    const lbl3 = document.createElement('label');
                    lbl3.className = 'form-label d-block';
                    lbl3.textContent = 'BPJS - ' + i;

                    const bpjsSel = document.createElement('select');
                    bpjsSel.className = 'form-select mb-2';
                    bpjsSel.name = `bpjs_option_list[${i - 1}]`;
                    bpjsSel.id = `bpjs_option_${i}`;

                    if (IS_VENEKS) {
                        bpjsSel.innerHTML = `
                    <option value="menyusul">Menyusul</option>
                    <option value="memiliki">Saya memiliki BPJS</option>
                `;
                    } else {
                        bpjsSel.innerHTML = `<option value="Tidak Perlu" selected>Tidak Perlu BPJS</option>`;
                    }

                    c3.appendChild(lbl3);
                    c3.appendChild(bpjsSel);

                    // --- Upload wrapper (Veneks) ---
                    let uploadWrapper = null,
                        fileInput = null,
                        spanPrev = null;
                    if (IS_VENEKS) {
                        uploadWrapper = document.createElement('div');
                        uploadWrapper.id = `bpjs_upload_wrapper_${i}`;
                        uploadWrapper.style.display = 'none';

                        const pos = document.createElement('div');
                        pos.className = 'position-relative';

                        const pickLabel = document.createElement('label');
                        pickLabel.setAttribute('for', `file_upload_${i}`);
                        pickLabel.className =
                            'btn btn-sm btn-icon-only bg-gradient-primary position-absolute bottom-0 mb-n2';
                        pickLabel.innerHTML = `<i class="fa fa-upload" title="Pilih/ubah file" aria-hidden="true"></i>`;

                        spanPrev = document.createElement('span');
                        spanPrev.className = 'h-12 w-12 rounded overflow-hidden bg-gray-100 d-block';
                        spanPrev.innerHTML = `<img src="${NOIMG}" class="w-50 border-radius-lg shadow-sm">`;

                        fileInput = document.createElement('input');
                        fileInput.type = 'file';
                        fileInput.className = 'form-control';
                        fileInput.id = `file_upload_${i}`;
                        fileInput.name = `file_upload_list[${i - 1}]`;
                        fileInput.accept = 'image/png,image/jpeg,application/pdf';
                        fileInput.style.display = 'none';

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

                            if (f.size > MAX_FILE_SIZE) {
                                warn(
                                    `Ukuran file maksimal 3 MB. File Anda: ${(f.size / 1024 / 1024).toFixed(2)} MB`
                                );
                                e.target.value = '';
                                return;
                            }
                            if (!ALLOWED_MIME.includes(f.type)) {
                                warn('Format file tidak valid. Hanya PNG, JPG, JPEG, atau PDF.');
                                e.target.value = '';
                                return;
                            }

                            if (f.type === 'application/pdf') {
                                const pdfUrl = URL.createObjectURL(f);
                                spanPrev.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 text-dark">${f.name}</p>
                            </div>
                        `;
                                spanPrev.querySelector('i').onclick = () => window.open(pdfUrl, '_blank');
                            } else {
                                const r = new FileReader();
                                r.onload = ev => {
                                    spanPrev.innerHTML =
                                        `<img src="${ev.target.result}" class="w-50 border-radius-lg shadow-sm">`;
                                };
                                r.readAsDataURL(f);
                            }
                        });

                        const info1 = document.createElement('p');
                        info1.className = 'text-primary text-xs pt-3 mb-0';
                        info1.innerHTML = 'Maksimal Size: <b>3072 KB</b>';
                        const info2 = document.createElement('p');
                        info2.className = 'text-primary text-xs pt-1';
                        info2.innerHTML = 'Format File: <b>PNG, JPG, JPEG, PDF</b>';

                        pos.appendChild(pickLabel);
                        pos.appendChild(spanPrev);

                        uploadWrapper.appendChild(pos);
                        uploadWrapper.appendChild(fileInput);
                        uploadWrapper.appendChild(info1);
                        uploadWrapper.appendChild(info2);

                        c3.appendChild(uploadWrapper);
                    }

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

                    // --- Prefill dari data ---
                    const namaInput = row.querySelector(`#tenaga_kerja_${i}`);
                    const kompInput = row.querySelector(`#kompetensi_${i}`);
                    const idInput = row.querySelector(`#id_induction_${i}`);
                    const rec = IS_VENEKS ? pekerjaDetails[i - 1] : workerDetails[i - 1];

                    if (rec) {
                        // TAMPILKAN nama_pekerja, tapi KIRIMKAN id induction (rec.nama) via hidden
                        namaInput.value = rec.nama_pekerja ?? rec.nama_user ?? rec.nama ?? '';
                        kompInput.value = rec.kompetensi ?? '';
                        idInput.value = rec.nama ?? rec.id ?? rec.id_induction ?? ''; // ← ID induction
                    }

                    if (IS_VENEKS) {
                        const fromOld = OLD_BPJS[i - 1];
                        if (fromOld) {
                            bpjsSel.value = fromOld;
                        } else if (rec) {
                            const hasFile = getDbPreviewPath(rec);
                            bpjsSel.value = hasFile ? 'memiliki' : (rec.file_bpjs || 'menyusul');
                        }

                        if (bpjsSel.value === 'memiliki' && rec) {
                            const preview = getDbPreviewPath(rec);
                            if (preview && uploadWrapper) {
                                const isPdf = preview.toLowerCase().endsWith('.pdf');
                                spanPrev.innerHTML = isPdf ?
                                    `<a href="${preview}" target="_blank" class="d-flex flex-column align-items-start text-decoration-none" title="Klik untuk membuka PDF">
                                   <i class="fas fa-file-lines text-danger" style="font-size:80px; cursor:pointer;"></i>
                                   <p class="text-xs mt-1 mb-0 text-dark">${rec.file_bpjs.split('/').pop()}</p>
                               </a>` :
                                    `<img src="${preview}" class="w-50 border-radius-lg shadow-sm">`;
                                uploadWrapper.style.display = 'block';
                            }
                        }

                        bpjsSel.addEventListener('change', () => {
                            if (bpjsSel.value === 'memiliki') {
                                uploadWrapper.style.display = 'block';
                            } else {
                                uploadWrapper.style.display = 'none';
                                if (fileInput) fileInput.value = '';
                                if (spanPrev) spanPrev.innerHTML =
                                    `<img src="${NOIMG}" class="w-50 border-radius-lg shadow-sm">`;
                            }
                        });
                    } else {
                        bpjsSel.value = 'Tidak Perlu';
                    }
                }
            }

            document.addEventListener('DOMContentLoaded', function() {
                renderRows(resolveJumlah());
            });

            window.updateTenagaKerja = function() {
                renderRows(resolveJumlah());
            };
        })();

        function toggleBPJSUpload(index) {
            var bpjsOption = document.getElementById('bpjs_option_' + index).value;
            var fileInput = document.getElementById('file_upload_' + index);

            if (bpjsOption === 'memiliki') {
                fileInput.style.display = 'block';
            } else {
                fileInput.style.display = 'none';
            }
        };

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

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

        // Panggil fungsi saat halaman dimuat untuk memastikan tampilan yang benar
        document.addEventListener('DOMContentLoaded', function() {
            toggleNomorPOField();
        });

        // Panggil fungsi ini untuk inisialisasi tampilan saat halaman pertama kali dimuat
        toggleNomorPOField();
    </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;
            }
        }
    </style>
@endpush