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

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.10.0/font/bootstrap-icons.min.css">

    <div class="card shadow-lg mx-4">
        <div class="card-body p-3">
            <div class="row gx-4">
                <div class="col-lg">
                    <div class="nav-wrapper">
                        {{-- button back --}}
                        <button class="btn btn-secondary mb-0" onclick="history.back()"><i class="fas fa-circle-left me-1">
                            </i><span class="font-weight-bold">Kembali</button>
                        {{-- check authorize edi --}}
                       
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    {{-- Manual custom add new permit --}}
                    <form role="form" method="POST" action="{{ route('perpanjang.permit.store') }}">
                        @csrf

                        {{-- Aggrement --}}

                        <!-- Modal Persetujuan Kontrak -->
                        <div class="modal fade" id="agreementModal" tabindex="-1" aria-labelledby="agreementModalLabel"
                            aria-hidden="true">
                            <div class="modal-dialog modal-lg modal-dialog-scrollable">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="agreementModalLabel">Konfirmasi Kesepakatan</h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                                            aria-label="Close"></button>
                                    </div>
                                    <div class="modal-body" id="modalScrollableBody">
                                        <small>
                                            Sebelum menyimpan permit, anda diwajibkan membaca dan mematuhi kesepakan kontrak
                                            dibawah ini:
                                        </small>
                                        <p style="border-top: 1px solid #000; margin: 10px 0; width: 100%;"></p>

                                        <h5 style="text-align: center;">KESEPAKATAN KERJA KONTRAKTOR</h5>
                                        <h5>I. Umum</h5>
                                        <p>
                                            Adanya kesepakatan ini bertujuan untuk memberikan kepastian dan jaminan kepada
                                            kedua belah pihak bahwa pekerjaan dapat selesai tepat waktu dengan aman
                                        </p>
                                        <h5>II. Uraian Pekerjaan</h5>
                                        <ol>
                                            <li><strong>Persiapan Pekerjaan</strong>
                                                <p>Yang termasuk dalam persiapan pekerjaan meliputi:</p>
                                                <ol>
                                                    <li>MOU Safety adalah kesepakatan keselamatan yang harus ditandatangani
                                                        oleh kedua pihak antara kontraktor dengan PT Multi Spunindo Jaya Tbk
                                                        pada setiap item pekerjaan.</li>
                                                    <li>Semua pekerjaan yang dilakukan oleh kontraktor harus memiliki Ijin
                                                        Kerja K3 (Permit To Work). Syarat memperoleh Ijin Kerja K3 adalah
                                                        menyampaikan JSA (Job Safety Analysis), dokumen BPJS
                                                        ketenagakerjaan, pengecekan APD yang dipersyaratkan dan persyaratan
                                                        administratif yang lain.</li>
                                                    <li>Seluruh pekerja kontraktor yang akan melaksanakan pekerjaan wajib
                                                        mengikuti safety induction sebelum pekerjaan dilaksanakan. Pekerja
                                                        yang sudah melakukan induction akan mendapatkan Safety Induction
                                                        Card.</li>
                                                    <li>Pengurusan izin masuk kontraktor ke area PT Multi Spunindo Jaya Tbk
                                                        yang dipersyaratkan yaitu menunjukkan Ijin Kerja K3 (Permit To
                                                        Work), menyerahkan Induction Card dan menggunakan APD standard (
                                                        Safety shoes, Safety helmet dan Rompi kontraktor )</li>
                                                    <li>Penyedian alat kerja, tenaga kerja serta alat keselamatan kerja (APD
                                                        ) yang dipersyaratkan sesuai dengan jenis pekerjaan yang dilakukan
                                                        disediakan oleh pihak kontraktor</li>
                                                    <li>Penyediaan hairnet atau topi produksi yang dipersyaratkan sesuai
                                                        standart PT. Multi Spunindo Jaya Tbk. Hairnet atau topi produksi
                                                        disediakan oleh pihak kontraktor. Pemakaian hairnet atau topi
                                                        produksi digunakan pada saat ada pekerjaan di dalam gedung.</li>
                                                    <li>Kontraktor harus menempatkan tenaga kerja yang menguasai bidang
                                                        keahlian sesuai dengan pekerjaan yang dilakukan. Pekerjaan yang
                                                        menggunakan pesawat angkat dan angkut harus memperkerjakan orang
                                                        yang memiliki Surat Ijin Operator ( SIO )</li>
                                                    <br>
                                                </ol>
                                            </li>
                                            <li><strong>Pelaksanaan Pekerjaan</strong>
                                                <ol>
                                                    <li>Koordinasi kerja (Toolbox Meeting) harus dilakukan sebelum memulai
                                                        pekerjaan terkait dengan pekerjaan yang akan dilaksanakan dan
                                                        kesiapan dalam pemakaian alat keselamatan kerjanya.</li>
                                                    <li>Seluruh pekerja kontraktor harus memperhatikan aspek keselamatan
                                                        kerja saat melaksanakan kegiatannya yaitu keselamatan diri sendiri,
                                                        keselamatan orang lain, alat dan lingkungan sekitarnya.</li>
                                                    <li> Memperhatikan dan menerapkan 5R (Ringkas, Rapi, Resik, Rawat,
                                                        Rajin) sebelum, sesaat dan sesudah pekerjaan berlangsung di area
                                                        kerjanya.</li>
                                                </ol>
                                            </li>
                                        </ol>

                                        <h5>III. Tenaga Kerja</h5>
                                        <ol>
                                            <li>Tenaga kerja yang akan melaksanakan pekerjaan ini harus memiliki asuransi
                                                kerja. Kontraktor harus mendaftarkan dan membayar premi jamsostek kepada PT
                                                jamsostek.</li>
                                            <li>Kontraktor wajib mentaati semua peraturan di PT Multi Spunindo Jaya Tbk.
                                            </li>
                                        </ol>

                                        <h5>IV. Jam Kerja</h5>
                                        <p>
                                            Jam kerja untuk pekerja kontraktor mengikuti jam kerja PT Multi Spunindo Jaya
                                            Tbk. Jika ada tambahan waktu kerja harus berkoordinasi dengan PIC pekerjaan dan
                                            PIC area terkait.
                                        </p>

                                        <h5>V. Kecelakaan Kerja</h5>
                                        <p>
                                            Segala kejadian kecelakaan kerja yang disebabkan oleh pihak kontraktor,
                                            kerugiannya menjadi tanggung jawab pihak kontraktor tersebut sedangkan PT Multi
                                            Spunindo Jaya Tbk hanya membantu dalam proses evakuasi. </p>

                                        <h5>VI. Punishment</h5>
                                        <p>
                                            Segala tindakan pekerja kontrakor dilapangan yang dianggap berbahaya dan tidak
                                            memenuhi ketentuan safety dan 5R yang dipersyaratkan maka tim safety akan
                                            melakukan:
                                        </p>

                                        <ol>
                                            <li>Teguran lisan, diberikan apabila terdapat pelanggaran dalam penerapan K3 dan
                                                5R.</li>
                                            <li>Teguran tertulis, diberikan apabila telah mendapat teguran lisan dan
                                                terdapat temuan berulang dalam penerapan K3 dan 5R
                                            </li>
                                            <li>Sanksi/ denda tiap temuan @ Rp 100.000 dan dipotongkan pada nilai
                                                kontraknya.</li>
                                        </ol>

                                        <h5>VII. Pengawasan</h5>
                                        <p>
                                            Sebagai pengawas langsung dari pekerjaan ini adalah Kepala Projek dan Tim Safety
                                            PT Multi Spunindo Jaya Tbk. Kepala Projek dan Tim Safety berhak menghentikan
                                            pekerjaan apabila ada kegiatan yang dianggap membahayakan diri sendiri, pekerja
                                            lain maupun lingkungan sekitar.
                                        </p>
                                        <hr style="border: 1px solid #000; margin: 15px 0; width: 100%;">

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

                                        <hr>
                                        <div class="form-check me-auto">
                                            <input class="form-check-input" type="checkbox" id="readAgreement"
                                                onclick="toggleAgreeButton()">
                                            <label class="form-check-label" for="readAgreement" style="font-weight: bolder">
                                                Saya telah membaca dan mengerti
                                            </label>
                                        </div>


                                    </div>
                                    <div class="modal-footer">
                                        <!-- Checkbox -->

                                        <button type="button" class="btn btn-secondary"
                                            data-bs-dismiss="modal">Batalkan</button>

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

                                    </div>
                                </div>
                            </div>
                        </div>

                        <script>
                            function showAgreementModal() {
                                // Ambil semua elemen dengan kelas required
                                const requiredInputs = document.querySelectorAll('required');
                                let isValid = true;

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

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

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

                        <div class="card-header">
                            <div class="card-body">
                                <div class="text-center">
                                    <h3>PERPANJANG PERMIT</h3>
                                </div>

                                <div class="text-center">
                                    <p>
                                        Silahkan sesuaikan perpanjang dengan data-data yang lama.
                                        <br>
                                        Jika ada perubahan, silahkan mengubah isi dari form dibawah ini
                                    </p>
                                </div>


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

                                <div style="border-top: 3px solid #1c8c90; margin: 20px 0;"></div>
                                <div class="row mb-3">
                                    <div class="col-md-6">
                                        <label for="nomor_surat" class="form-label">Nomor Surat</label>
                                        <input type="text" class="form-control" id="nomor_surat" name="nomor_surat"
                                            readonly value="{{ $list->id }}">
                                    </div>
                                    <div class="col-md-6">
                                        <label for="status_permit" class="form-label">Status Permit</label>
                                        <input type="text" class="form-control" id="status_permit" name="status_permit"
                                            readonly value="{{ $list->status }}" style="color: red; font-weight: bold;"">
                                    </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->masa_berlaku }}">
                                    </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="{{'Otomatis Update Ketika Atasan 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">
                                            {{ $namaLokasi }}
                                        </button>
                                        <!-- Hidden input untuk menyimpan nilai lokasi terpilih -->
                                        <input type="hidden" id="lokasi" name="lokasi"
                                            value="{{ $list->idlokasi }}">
                                    </div>

                                    @if ($users->idroles === 'veneks')
                                        <div class="col-md-6">
                                            <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>
                                        </div>
                                    @elseif($users->idroles === 'venint')
                                        <div class="col-md-6">
                                            <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>
                                        </div>
                                    @endif


                                </div>


                                <!-- 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>


                                <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 }}"
                                            placeholder="Masukkan nomor WhatsApp" pattern="[0-9]+" inputmode="numeric"
                                            required>
                                    </div>

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



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

                                        <div class="col-md-6">
                                            <div id="nomor_po_field"
                                                style="display: {{ $list->no_po != 'menyusul' ? 'block' : 'none' }};">
                                                <label for="nomor_po" class="form-label">Nomor PO</label>
                                                <input type="text" class="form-control" id="nomor_po"
                                                    name="nomor_po" value="{{ $list->no_po }}">
                                            </div>
                                        </div>
                                    </div>
                                @endif


                                <!-- Surat Izin Kerja K3 -->
                                <br>
                                <h4 style="color: #1c8c90; font-weight: bold;">2. Surat Izin Kerja K3</h4>
                                <div style="border-top: 3px solid #1c8c90; margin: 20px 0;"></div>
                                <div class="row mb-3">
                                    <div class="col-md-12">
                                        <label for="uraian_pekerjaan" class="form-label">Uraian Pekerjaan <span
                                                style="color: red;">*</span></label>
                                        <textarea class="form-control" id="uraian_pekerjaan" name="uraian_pekerjaan"
                                            placeholder="Deskripsikan Pekerjaan Tersebut !">{{ $list->uraian_pekerjaan }}</textarea>
                                    </div>
                                </div>

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

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

                                <hr>



                                <div 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()">

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

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

                                <hr>
                                <br>

                                <style>
                                    .table-cell {
                                        /* Menambahkan border */
                                        padding: 5px;
                                        /* Jarak di dalam setiap cell */
                                        margin: 5px;
                                        /* Margin antar cell */
                                        border-radius: 1px;
                                        /* Membuat sudut cell sedikit melengkung */
                                        background-color: #f9f9f9;
                                        /* Warna latar belakang agar lebih rapi */
                                    }

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

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


                                <div class="row mb-3">
                                    <div class="col-md-6">
                                        <label for="kategori_pekerjaan" class="form-label">Kategori Pekerjaan <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' : '' }}
                                                        onchange="updateChecklist();">
                                                    <label class="form-check-label"
                                                        for="kategori_pekerjaan_{{ $item->id }}">
                                                        {{ $item->jenis_pekerjaan }}
                                                    </label>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>


                                    <div class="col-md-6">
                                        <label for="apd" class="form-label">APD <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' : '' }}>
                                                            <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="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">
                                    </div>
                                </div>


                                <script>
                                    const kategoriDetail = @json($kategoriDetails);
                                    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 = '';

                                        if (selectedCategories.length > 0) {
                                            checklistContainer.style.display = 'flex';
                                            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 class="form-check-input" type="checkbox" value="${option.value}" id="checklist_${categoryId}_${option.value}" name="checklist[${categoryId}][]"
                                                                                                                                                                                                                ${existingPengecheckanIds.includes(option.value) ? 'checked' : ''}>
                                                                                                                                                                                                            <label class="form-check-label" for="checklist_${categoryId}_${option.value}">
                                                                                                                                                                                                                ${option.label}
                                                                                                                                                                                                            </label>
                                                                                                                                                                                                        </div>
                                                                                                                                                                                                    </div>
                                                                                                                                                                                                `).join('')}
                                                            </div>
                                                        </div>
                                                    `;
                                                    checklistContainer.appendChild(colDiv);
                                                }
                                            });

                                            lainLainContainer.style.display = showLainLainField ? 'block' : 'none';
                                        } else {
                                            checklistContainer.style.display = 'none';
                                            lainLainContainer.style.display = 'none';
                                        }
                                    }

                                    document.addEventListener('DOMContentLoaded', function() {
                                        updateChecklist(); // Initialize the checklist view based on existing data
                                    });
                                </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="row mb-3">
                                        <div class="col-md-12">
                                            <label for="analisis" class="form-label">Tabel Analisis <span
                                                    style="color: red;">*</span></label>
                                            <table class="table table-bordered" id="table_analisis">
                                                <thead>
                                                    <tr>
                                                        <th>ID</th>
                                                        <th>Urutan Langkah Tugas</th>
                                                        <th>Potensi Bahaya</th>
                                                        <th>Akibat/Kerugian</th>
                                                        <th>Rekomendasi Pencegahan</th>
                                                        <th>Aksi</th> <!-- Kolom untuk tombol hapus -->

                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @foreach ($analisis as $item)
                                                        <tr>

                                                            <td>
                                                                <number class="form-control" name="id[]"
                                                                    rows="4" readonly>{{ $item->id }}</number>
                                                            </td>

                                                            <td>
                                                                <textarea class="form-control" name="langkah_tugas[]" rows="4">{{ $item->langkah_tugas }}</textarea>
                                                            </td>
                                                            <td>
                                                                <textarea class="form-control" name="potensi_bahaya[]" rows="4">{{ $item->potensi_bahaya }}</textarea>
                                                            </td>
                                                            <td>
                                                                <textarea class="form-control" name="akibat_kerugian[]" rows="4">{{ $item->akibat }}</textarea>
                                                            </td>
                                                            <td>
                                                                <textarea class="form-control" name="rekomendasi_pencegahan[]" rows="4">{{ $item->rekomendasi }}</textarea>
                                                            </td>
                                                            <td>
                                                                <button type="button" class="btn btn-danger"
                                                                    onclick="deleteRow(this)">Hapus</button>
                                                            </td>
                                                        </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>
                                            <button type="button" class="btn btn-success" onclick="addRow()">Tambah
                                                Baris</button>
                                        </div>
                                    </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>
                                @php
                                    $workshopOpsi = old('workshop_kontraktor_opsi', $list->workshop_kontraktor_opsi ?? '');
                                @endphp
                                <div class="row mb-3">
                                    <div class="col-md-6">
                                        <label class="form-label">
                                            Pilih Opsi Workshop <span style="color: red;">*</span>
                                        </label>
                                        <div class="d-flex flex-wrap gap-3">
                                            @foreach (['1' => '1', '2' => '2', '3' => '3', 'Other' => 'Other'] as $val => $label)
                                                <div class="form-check">
                                                    <input class="form-check-input" type="radio" name="workshop_kontraktor_opsi"
                                                        id="workshop_opsi_{{ $val }}" value="{{ $val }}" {{ $workshopOpsi == $val ? 'checked' : '' }} onchange="toggleWorkshopOther()">
                                                    <label class="form-check-label"
                                                        for="workshop_opsi_{{ $val }}">{{ $label }}</label>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>

                                {{-- Free text jika Other --}}
                                <div class="row mb-3" id="workshop-other-container"
                                    style="display: {{ $workshopOpsi == 'Other' ? 'flex' : 'none' }};">
                                    <div class="col-md-6">
                                        <label for="workshop_kontraktor_other" class="form-label">
                                            Keterangan Lainnya <span style="color: red;">*</span>
                                        </label>
                                        <input type="text" class="form-control" id="workshop_kontraktor_other"
                                            name="workshop_kontraktor_other"
                                            value="{{ old('workshop_kontraktor_other', $list->workshop_kontraktor_other ?? '') }}"
                                            placeholder="Jelaskan keterangan workshop lainnya">
                                    </div>
                                </div>

                                <script>
                                    function toggleWorkshopOther() {
                                        const selected = document.querySelector('input[name="workshop_kontraktor_opsi"]:checked');
                                        const otherContainer = document.getElementById('workshop-other-container');
                                        const otherInput = document.getElementById('workshop_kontraktor_other');

                                        if (selected && selected.value === 'Other') {
                                            otherContainer.style.display = 'flex';
                                        } else {
                                            otherContainer.style.display = 'none';
                                            if (otherInput) otherInput.value = '';
                                        }
                                    }

                                    document.addEventListener('DOMContentLoaded', function () {
                                        toggleWorkshopOther();
                                    });
                                </script>

                                <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>
                                                <label for="image-upload-edit-apd" id="image-upload-edit-apd"
                                                    class="btn btn-xxl btn-icon-only bg-gradient-primary position-absolute bottom-0 mb-n2">
                                                    <i class="fa fa-pen top-0" data-bs-toggle="tooltip"
                                                        data-bs-placement="top" title="Edit Image" aria-hidden="true"
                                                        data-bs-original-title="Edit Image" aria-label="Edit Image"></i>
                                                    <span class="sr-only">Edit Image</span>
                                                </label>
                                                <span class="h-12 w-12 rounded-full overflow-hidden bg-gray-100">
                                                    <img src="{{ asset('/storage/noimage.png') }}" id="image-preview-apd"
                                                        alt="image" class="w-30 border-radius-lg shadow-sm"
                                                        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;">
                                        <p class='text-primary text-xs pt-3 mb-0'>Maksimal Size: <b>2048 KB</b></p>
                                        <p class='text-primary text-xs pt-1'>Format Image: <b>PNG, JPG, JPEG</b></p>
                                    </div>

                                    <!-- Upload Image 2: Foto Alat Kerja -->
                                    <div class="col-sm-6">
                                        <div class="position-relative">
                                            <div>
                                                <label for="pic_area" class="form-label">Foto Alat Kerja <span
                                                        style="color: red;">*</span></label>
                                                <br>
                                                <label for="image-upload-edit-alat-kerja"
                                                    id="image-upload-edit-alat-kerja"
                                                    class="btn btn-xxl btn-icon-only bg-gradient-primary position-absolute bottom-0 mb-n2">
                                                    <i class="fa fa-pen top-0" data-bs-toggle="tooltip"
                                                        data-bs-placement="top" title="Edit Image" aria-hidden="true"
                                                        data-bs-original-title="Edit Image" aria-label="Edit Image"></i>
                                                    <span class="sr-only">Edit Image</span>
                                                </label>
                                                <span class="h-12 w-12 rounded-full overflow-hidden bg-gray-100">
                                                    <img src="{{ asset('/storage/noimage.png') }}"
                                                        id="image-preview-alat-kerja" alt="image"
                                                        class="w-30 border-radius-lg shadow-sm" 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;">
                                        <p class='text-primary text-xs pt-3 mb-0'>Maksimal Size: <b>2048 KB</b></p>
                                        <p class='text-primary text-xs pt-1'>Format Image: <b>PNG, JPG, JPEG</b></p>
                                    </div>


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

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

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

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

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

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

                                    <hr>

                                    <br>
                                    <!-- Approval -->
                                    <h4 style="color: #1c8c90; font-weight: bold;">6. Persetujuan</h4>
                                    <div style="border-top: 3px solid #1c8c90; margin: 20px 0;"></div>
                                    <p> Pilih PIC Kerja dan Area sesuai dengan arahan !! </p>

                                    <div class="row">

                                        <div class="row mb-3">
                                            <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">
                                                    <option value="{{ $list->pic_area }}">{{ $namaPicArea }}</option>
                                                </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">
                                                    <option value="{{ $list->pic_kerja }}">{{ $namaPicKerja }}</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>


                                   



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

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


                            </div>
                    </form>
                </div>
            </div>
        </div>
    </div>


    {{-- Modal Hapus Pegawai --}}

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

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

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

  

    {{-- 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 showConfirmationModal() {
            var modal = new bootstrap.Modal(document.getElementById('agreementModal'));
            modal.show();
        };

        function confirmSave() {
            // Prevent default behavior and call the showAgreementModal function
            event.preventDefault();
            var modal = bootstrap.Modal.getInstance(document.getElementById('agreementModal'));
            modal.hide();
            showAgreementModal();
        };

        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); // Insert at the end of the table

            // Insert new cells and textarea fields into the row
            for (var i = 0; i < 5; 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) {
                    // ID field, should be readonly and empty for new rows
                    var input = document.createElement("input");
                    input.type = "number";
                    input.name = "id[]";
                    input.readOnly = true;
                    input.disabled = true;
                    cell.appendChild(input);
                } else if (i == 1) {
                    textarea.name = "langkah_tugas[]";
                } else if (i == 2) {
                    textarea.name = "potensi_bahaya[]";
                } else if (i == 3) {
                    textarea.name = "akibat_kerugian[]";
                } else if (i == 4) {
                    textarea.name = "rekomendasi_pencegahan[]";
                }

                if (i > 0) {
                    cell.appendChild(textarea);
                }
            }

            // Insert the delete button in the last cell of the new row
            var deleteCell = row.insertCell(5);
            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 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 updateTenagaKerja(initialLoad = false) {
            var jumlahTenagaKerja = document.getElementById('tenaga_kerja').value;
            var detailContainer = document.getElementById('tenaga_kerja_detail');

            // Object to store previous values
            var previousValues = {};

            // Store current values before clearing
            for (var i = 1; i <= detailContainer.children.length; i++) {
                var input1 = document.getElementById('tenaga_kerja_' + i);
                var input2 = document.getElementById('kompetensi_' + i);
                var bpjsInput = document.getElementById('bpjs_option_' + i);

                if (input1 && input2 && bpjsInput) {
                    previousValues[i] = {
                        nama: input1.value,
                        kompetensi: input2.value,
                        bpjs: bpjsInput.value
                    };
                }
            }

            // Clear previous details if any
            detailContainer.innerHTML = '';

            // Loop through the number of tenaga kerja
            for (var i = 1; i <= jumlahTenagaKerja; i++) {
                var rowForm = document.createElement('div');
                rowForm.classList.add('row', 'mb-3');
                rowForm.id = 'row_' + i; // Set an ID for each row


                var div1 = document.createElement('div');
                div1.classList.add('col-md-4');

                var label1 = document.createElement('label');
                label1.setAttribute('for', 'tenaga_kerja_' + i);
                label1.classList.add('form-label');
                label1.innerHTML = 'Tenaga Kerja - ' + i;

                // Create select dropdown for "Tenaga Kerja"
                var select = document.createElement('select');
                select.classList.add('form-select');
                select.id = 'tenaga_kerja_' + i;
                select.name = 'tenaga_kerja_' + i;

                // Populate the select options with data from induction
                @if ($users->idroles === 'veneks')
                    @foreach ($induction as $item)
                        var option = document.createElement('option');
                        option.value = '{{ $item->id }}';
                        option.innerHTML = '{{ $item->nama }}';
                        select.appendChild(option);
                    @endforeach
                @elseif ($users->idroles === 'venint')
                    @foreach ($pekerja as $item)
                        var option = document.createElement('option');
                        option.value = '{{ $item->id }}';
                        option.innerHTML = '{{ $item->firstname }}';
                        select.appendChild(option);
                    @endforeach
                @endif

                // Create delete button with icon
                // Create delete button with icon
                var deleteButton = document.createElement('button');
                deleteButton.type = 'button';
                deleteButton.classList.add('btn', 'btn-danger', 'btn-sm', 'w-100'); // Add w-100 for full width
                deleteButton.innerHTML = '<i class="bi bi-trash"></i> Hapus'; // Assuming you're using Bootstrap Icons

                deleteButton.onclick = (function(row, select) {
                    return function() {
                        // Set the selected employee name in the modal
                        document.getElementById('selectedEmployeeName').textContent = select.options[select
                            .selectedIndex].text;

                        // Show modal
                        var confirmDeleteModal = new bootstrap.Modal(document.getElementById(
                            'confirmDeleteModal'));
                        confirmDeleteModal.show();

                        // Set up the confirm button to delete the row
                        document.getElementById('confirmDeleteButton').onclick = function() {
                            row.remove(); // Remove the specific row
                            confirmDeleteModal.hide(); // Hide the modal
                        };
                    };
                })(rowForm, select);

                div1.appendChild(label1);
                div1.appendChild(select);
                div1.appendChild(deleteButton); // Append delete button

                var div2 = document.createElement('div');
                div2.classList.add('col-md-4');

                var label2 = document.createElement('label');
                label2.setAttribute('for', 'kompetensi_' + i);
                label2.classList.add('form-label');
                label2.innerHTML = 'Kompetensi - ' + i;

                var input2 = document.createElement('input');
                input2.type = 'text';
                input2.classList.add('form-control');
                input2.id = 'kompetensi_' + i;
                input2.name = 'kompetensi_' + i;

                div2.appendChild(label2);
                div2.appendChild(input2);

                // BPJS

                // Create div for Upload BPJS field (third column)
                var div3 = document.createElement('div');
                div3.classList.add('col-md-4'); // Third column for Upload BPJS

                @if ($users->idroles === 'veneks')
                    // Create label for "Upload BPJS"
                    var label3 = document.createElement('label');
                    label3.setAttribute('for', 'bpjs_' + i);
                    label3.classList.add('form-label');
                    label3.innerHTML = 'Upload BPJS - ' + i;

                    // Create dropdown for "Menyusul" or "Saya memiliki BPJS"
                    var bpjsOption = document.createElement('select');
                    bpjsOption.classList.add('form-select');
                    bpjsOption.id = 'bpjs_option_' + i;
                    bpjsOption.name = 'bpjs_option_' + i;
                    bpjsOption.innerHTML = `
                <option value="menyusul">Menyusul</option>
                <option value="memiliki">Saya memiliki BPJS</option>
            `;
                    bpjsOption.setAttribute('onchange', 'toggleBPJSUpload(' + i + ')');

                    // Create file input for "Upload BPJS"
                    var fileInput = document.createElement('input');
                    fileInput.type = 'file';
                    fileInput.classList.add('form-control');
                    fileInput.id = 'file_upload_' + i;
                    fileInput.name = 'file_upload_' + i;
                    fileInput.style.display = 'none'; // Hide file input initially

                    // Create a default image (optional) when "Menyusul" is selected
                    var defaultImage = document.createElement('img');
                    defaultImage.id = 'default_bpjs_' + i;
                    defaultImage.src = 'none'; // Set as 'none' or remove this line entirely
                    defaultImage.style.display = 'none'; // Hide default image for "Menyusul"
                    defaultImage.style.width = '100px'; // Set image size as needed

                    // Append the dropdown and image to the div3
                    div3.appendChild(label3);
                    div3.appendChild(bpjsOption);
                    div3.appendChild(fileInput);
                    div3.appendChild(defaultImage);
                @elseif ($users->idroles === 'venint')
                    // Create label for "BPJS"
                    var label3 = document.createElement('label');
                    label3.classList.add('form-label');
                    label3.innerHTML = 'BPJS - ' + i;

                    // Create dropdown for "Menyusul" or "Saya memiliki BPJS"
                    var bpjsOption = document.createElement('select');
                    bpjsOption.classList.add('form-select');
                    bpjsOption.id = 'bpjs_option_' + i;
                    bpjsOption.name = 'bpjs_option_' + i;
                    bpjsOption.innerHTML = `
                <option value="Tidak Perlu">Tidak Perlu BPJS</option>`;
                    // bpjsOption.disabled = true; // Disable the select element

                    bpjsOption.setAttribute('onchange', 'toggleBPJSUpload(' + i + ')');
                    // Append the dropdown and image to the div3
                    div3.appendChild(label3);
                    div3.appendChild(bpjsOption);
                @endif

                // Append all the divs to the rowForm
                rowForm.appendChild(div1);
                rowForm.appendChild(div2);
                rowForm.appendChild(div3);

                detailContainer.appendChild(rowForm);

                // Restore previous values if they exist
                if (previousValues[i]) {
                    select.value = previousValues[i].nama;
                    input2.value = previousValues[i].kompetensi;
                    bpjsInput.value = previousValues[i].bpjs;
                }

                // Set default values if it's the initial load
                @if ($users->idroles === 'veneks')
                    if (initialLoad) {
                        @foreach ($pekerjaDetails as $index => $pekerja)
                            if (i === {{ $index + 1 }}) {
                                select.value = '{{ $pekerja->nama }}';
                                input2.value = '{{ $pekerja->kompetensi }}';

                                // BPJS
                                if ('{{ $pekerja->file_bpjs }}' !== 'menyusul' && '{{ $pekerja->file_bpjs }}' !==
                                    '') {
                                    bpjsOption.value = 'memiliki'; // Set value to "memiliki" if it's a file
                                    fileInput.style.display = 'block'; // Show file input
                                    // Assuming you want to display the file name or path
                                    fileInput.setAttribute('data-file',
                                        '{{ $pekerja->file_bpjs }}'); // Store file path or name
                                } else {
                                    bpjsOption.value =
                                        '{{ $pekerja->file_bpjs }}'; // Otherwise, use the original value
                                }

                                // Call toggleBPJSUpload to update UI
                                toggleBPJSUpload(i);
                            }
                        @endforeach
                    }
                @elseif ($users->idroles === 'venint')
                    if (initialLoad) {
                        @foreach ($workerDetails as $index => $pekerja)
                            if (i === {{ $index + 1 }}) {
                                input1.value = '{{ $pekerja->nama_user }}';
                                input2.value = '{{ $pekerja->kompetensi }}';
                                bpjsOption.value = '{{ $pekerja->file_bpjs }}';
                            }
                        @endforeach
                    }
                @endif
            }
        };


        // Function to toggle BPJS upload visibility
        function toggleBPJSUpload(index) {
            var bpjsOption = document.getElementById('bpjs_option_' + index).value;
            var fileInput = document.getElementById('file_upload_' + index);
            var defaultImage = document.getElementById('default_bpjs_' + index);

            if (bpjsOption === 'memiliki') {
                fileInput.style.display = 'block'; // Show file input
                defaultImage.style.display = 'none'; // Hide default image

                var storedFile = fileInput.getAttribute('data-file');
                if (storedFile) {
                    console.log('Existing file:', storedFile); // For debugging, log the existing file path/name
                    // You may want to display this somewhere in the UI if necessary
                }
            } else {
                fileInput.style.display = 'none'; // Hide file input
                defaultImage.style.display = 'none'; // Hide default image (no need for preview for "Menyusul")
            }
        };

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

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

        // Panggil fungsi ini untuk inisialisasi tampilan saat halaman pertama kali dimuat
        toggleNomorPOField();

        $(document).ready(function() {});
    </script>
@endpush