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

    <!-- Select2 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />

    <!-- jQuery (untuk Select2) -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <!-- Select2 JS -->
    <script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>


    <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>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <div class="card-body">
                            <!-- Permit Baru -->
                            <div class="text-center">
                                <h3>DETAIL PENGAJUAN PERMIT</h3>
                            </div>

                            @if ($list->status === 'Proses Perpanjang')
                                <div class="text-center">
                                    <p>
                                        Permit ini tidak bisa diselesaikan karena masih ada masa perpanjang.
                                        <br>
                                        Jika anda ingin menyelesaikan permit ini, silahkan selesaikan yang versi
                                        perpanjangnya
                                    </p>
                                </div>
                            @else
                                <div class="text-center">
                                    <p>
                                        Pengajuan Permit ini tidak bisa di edit, kecuali ada revisi dari atasan.
                                        <br>
                                        Jika ada kesalahan penulisan atau data, silahkan hubungi Admin K3.
                                    </p>
                                </div>
                            @endif

                            @if ($list->status === 'Menunggu PIC')
                                <h4 style="color: #1c8c90; font-weight: bold;">Proses Status Selesai</h4>

                                <div style="border-top: 3px solid #1c8c90; margin: 20px 0;"></div>
                                <div class="row mb-3">
                                    <div class="col-md-6">
                                        <label for="status_pic" class="form-label"> {{ $namaPicKerja }} (PIC Kerja)</label>
                                        <input type="text" class="form-control" id="status_pic" name="status_pic"
                                            readonly value="{{ $pic_setuju_selesai }}">
                                        <span style="color: red; font-size: small;">*Silahkan Kontak PIC Kerja Anda untuk
                                            Meminta Perubahan Status</span>
                                    </div>
                                    <div class="col-md-6">
                                        <label for="status_k3" class="form-label">K3: </label>
                                        <input type="text" class="form-control" id="status_k3" name="status_k3" readonly
                                            value="{{ $k3_setuju_selesai }}">
                                    </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 }}">
                                </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>

                                @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 }}" readonly 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="{{ $users->firstname }}">
                                </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()" disabled>
                                            <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 }}" readonly>
                                        </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 !" 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="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 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>
                                    <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>
                                    <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">
                                <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
                                                $opsiLabel = [
                                                    '1' => '1',
                                                    '2' => '2',
                                                    '3' => '3',
                                                    'Other' => 'Other',
                                                ];
                                            @endphp
                                            {{ $opsiLabel[$list->workshop_kontraktor_opsi] ?? $list->workshop_kontraktor_opsi ?? '—' }}
                                        </p>
                                    </div>

                                    @if (($list->workshop_kontraktor_opsi ?? null) === 'Other')
                                        <div class="col-md-3">
                                            <label class="form-label fw-bold">Keterangan Lainnya</label>
                                            <p class="ms-1">{{ $list->workshop_kontraktor_other ?? '—' }}</p>
                                        </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>
                                            {{-- <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/hiu.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;" disabled>
                                    {{-- <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/hiu.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;" disabled>
                                    {{-- <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 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_kerja }}">{{ $namaPicKerja }}</option>
                                                <!-- Looping untuk menampilkan pilihan PIC Area -->
                                            </select>
                                        </div>

                                        <div class="col-md-6">
                                            <label for="pic_lokasi" class="form-label">PIC Lokasi <span
                                                    style="color: red;">*</span></label>
                                            <select class="form-select" id="pic_lokasi" name="pic_lokasi" disabled>
                                                <option value="{{ $list->pic_area }}">{{ $namaPicArea }}</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>

                                {{-- Hasil Checklist --}}

                                <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. Hasil Checklist K3</h4>
                                <div style="border-top: 3px solid #1c8c90; margin: 20px 0;"></div>

                                <div class="row">
                                    <link href="https://stackpath.bootstrapcdn.com/bootstrap/5.3.0/css/bootstrap.min.css"
                                        rel="stylesheet">

                                    <p>Telah Disetejui dan diperiksa oleh K3, pada: {{ $list->formatted_date }}</label>
                                    <form id="checklistForm" class="row">

                                        <!-- Kolom Kiri -->
                                        <div class="col-md-6">
                                            <!-- Pertanyaan 1 -->
                                            <div class="form-group mt-3">
                                                <label class="form-label">1. Apakah rencana kerja sudah diperiksa atau
                                                    sudah
                                                    memiliki Job Safety Analysis (JSA)?</label>
                                                <div class="form-check">
                                                    <input class="form-check-input" type="radio" name="pertanyaan_1"
                                                        id="pertanyaan_1_yes" value="Iya"
                                                        {{ $list->pertanyaan_1 === 'Iya' ? 'checked' : '' }} disabled>
                                                    <label class="form-check-label" for="pertanyaan_1_yes">Iya</label>
                                                </div>
                                                <div class="form-check">
                                                    <input class="form-check-input" type="radio" name="pertanyaan_1"
                                                        id="pertanyaan_1_no" value="Tidak"
                                                        {{ $list->pertanyaan_1 === 'Tidak' ? 'checked' : '' }} disabled>
                                                    <label class="form-check-label" for="pertanyaan_1_no">Tidak</label>
                                                </div>
                                            </div>

                                            <!-- Pertanyaan 2 -->
                                            <div class="form-group mt-3">
                                                <label class="form-label">2. Apakah Pekerja sudah mendapat safety
                                                    induction?</label>
                                                <div class="form-check">
                                                    <input class="form-check-input" type="radio" name="pertanyaan_2"
                                                        id="pertanyaan_2_yes" value="Iya"
                                                        {{ $list->pertanyaan_2 === 'Iya' ? 'checked' : '' }} disabled>
                                                    <label class="form-check-label" for="pertanyaan_2_yes">Iya</label>
                                                </div>
                                                <div class="form-check">
                                                    <input class="form-check-input" type="radio" name="pertanyaan_2"
                                                        id="pertanyaan_2_no" value="Tidak"
                                                        {{ $list->pertanyaan_2 === 'Tidak' ? 'checked' : '' }} disabled>
                                                    <label class="form-check-label" for="pertanyaan_2_no">Tidak</label>
                                                </div>
                                            </div>

                                            <!-- Pertanyaan 3 -->
                                            <div class="form-group mt-3">
                                                <label class="form-label">3. Apakah sudah dilakukan pengecheckan terhadap
                                                    APD
                                                    yang digunakan?</label>
                                                <div class="form-check">
                                                    <input class="form-check-input" type="radio" name="pertanyaan_3"
                                                        id="pertanyaan_3_yes" value="Iya"
                                                        {{ $list->pertanyaan_3 === 'Iya' ? 'checked' : '' }} disabled>
                                                    <label class="form-check-label" for="pertanyaan_3_yes">Iya</label>
                                                </div>
                                                <div class="form-check">
                                                    <input class="form-check-input" type="radio" name="pertanyaan_3"
                                                        id="pertanyaan_3_no" value="Tidak"
                                                        {{ $list->pertanyaan_3 === 'Tidak' ? 'checked' : '' }} disabled>
                                                    <label class="form-check-label" for="pertanyaan_3_no">Tidak</label>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- Kolom Kanan -->
                                        <div class="col-md-6">
                                            <!-- Pertanyaan 4 -->
                                            <div class="form-group mt-3">
                                                <label class="form-label">4. Apakah sudah dilakukan pengecheckan scafolding
                                                    terhadap pekerjaan di ketinggian?</label>
                                                <div class="form-check">
                                                    <input class="form-check-input" type="radio" name="pertanyaan_4"
                                                        id="pertanyaan_4_yes" value="Iya"
                                                        {{ $list->pertanyaan_4 === 'Iya' ? 'checked' : '' }} disabled>
                                                    <label class="form-check-label" for="pertanyaan_4_yes">Iya</label>
                                                </div>
                                                <div class="form-check">
                                                    <input class="form-check-input" type="radio" name="pertanyaan_4"
                                                        id="pertanyaan_4_no" value="Tidak"
                                                        {{ $list->pertanyaan_4 === 'Tidak' ? 'checked' : '' }} disabled>
                                                    <label class="form-check-label" for="pertanyaan_4_no">Tidak</label>
                                                </div>
                                                <div class="form-check">
                                                    <input class="form-check-input" type="radio" name="pertanyaan_4"
                                                        id="pertanyaan_4_na" value="N/A"
                                                        {{ $list->pertanyaan_4 === 'N/A' ? 'checked' : '' }} disabled>
                                                    <label class="form-check-label" for="pertanyaan_4_na">N/A</label>
                                                </div>
                                            </div>

                                            <!-- Pertanyaan 5 -->
                                            <div class="form-group mt-3">
                                                <label class="form-label">5. Apakah pekerja sudah memiliki asuransi
                                                    ketenagakerjaan?</label>
                                                <div class="form-check">
                                                    <input class="form-check-input" type="radio" name="pertanyaan_5"
                                                        id="pertanyaan_5_yes" value="Iya"
                                                        {{ $list->pertanyaan_5 === 'Iya' ? 'checked' : '' }} disabled>
                                                    <label class="form-check-label" for="pertanyaan_5_yes">Iya</label>
                                                </div>
                                                <div class="form-check">
                                                    <input class="form-check-input" type="radio" name="pertanyaan_5"
                                                        id="pertanyaan_5_no" value="Tidak"
                                                        {{ $list->pertanyaan_5 === 'Tidak' ? 'checked' : '' }} disabled>
                                                    <label class="form-check-label" for="pertanyaan_5_no">Tidak</label>
                                                </div>
                                            </div>
                                        </div>

                                    </form>

                                </div>

                                {{-- Penilaian K3 --}}

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

                                <br>

                                @if ($list->status_nilai === 'S')
                                    
                                <!-- Approval -->
                                <h4 style="color: #1c8c90; font-weight: bold;">7. Penilaian Permit (Oleh K3)
                                </h4>
                                <div style="border-top: 3px solid #1c8c90; margin: 20px 0;"></div>

                                <div class="row mb-4">
                                    <div class="col">
                                        <label for="penilaian_kontraktor" class="form-label">Penilaian
                                            Kontraktor</label>

                                        <div class="mt-2">
                                            <select id="sanksi_kontraktor" name="sanksi_kontraktor" class="form-select"
                                                style="width: 400px;" disabled>
                                                <option value="">[Pilih Sanksi Untuk Kontraktor]</option>
                                                <option value="teguran_lisan"
                                                    {{ $hasil->sanksi_kontraktor == 'teguran_lisan' ? 'selected' : '' }}>
                                                    Sanksi Teguran (Lisan)</option>
                                                <option value="tertulis"
                                                    {{ $hasil->sanksi_kontraktor == 'tertulis' ? 'selected' : '' }}>Sanksi
                                                    Tertulis (Form Unsafe Action)</option>
                                                <option value="administratif"
                                                    {{ $hasil->sanksi_kontraktor == 'administratif' ? 'selected' : '' }}>
                                                    Sanksi Administratif (Denda): Rp. 100.000 per temuan</option>
                                            </select>
                                        </div>

                                    </div>
                                </div>

                                <div class="container mt-4">
                                    <div class="row mb-3">
                                        <div class="col">
                                            <label for="penilaian_kontraktor" class="form-label"
                                                style="color: #1c8c90;">Kualifikasi Penilaian</label>

                                            @foreach ($mst_feedback_criteria as $index => $criteria)
                                                <div class="row mt-3 align-items-center"
                                                    style="border-bottom: 1px solid #1c8c90; margin-bottom: 10px;">
                                                    <div class="col-md-6">
                                                        <label style="color: #1c8c90;">{{ $index + 1 }}.
                                                            {{ $criteria->nama_kualifikasi }}</label>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <select class="form-select score-select"
                                                            name="score_{{ $criteria->id }}" disabled>
                                                            <option value="0"
                                                                {{ isset($penilaianDetails[$criteria->id]) && $penilaianDetails[$criteria->id] == '0' ? 'selected' : '' }}>
                                                                N/A</option>
                                                            <option value="3"
                                                                {{ isset($penilaianDetails[$criteria->id]) && $penilaianDetails[$criteria->id] == '3' ? 'selected' : '' }}>
                                                                Baik</option>
                                                            <option value="2"
                                                                {{ isset($penilaianDetails[$criteria->id]) && $penilaianDetails[$criteria->id] == '2' ? 'selected' : '' }}>
                                                                Sedang</option>
                                                            <option value="1"
                                                                {{ isset($penilaianDetails[$criteria->id]) && $penilaianDetails[$criteria->id] == '1' ? 'selected' : '' }}>
                                                                Kurang</option>
                                                        </select>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>



                                <!-- Input hidden untuk total dan rata-rata -->
                                <input type="hidden" id="total_value" name="total_value">
                                <input type="hidden" id="average_value" name="average_value">
                                <input type="hidden" id="indikator_value" name="indikator_value">

                                <!-- Display the total and average in a non-editable form -->
                                <div class="row mt-4">
                                    <div class="col">
                                        <div class="form-group">
                                            <label for="total_penilaian" class="form-label text-lg-center"
                                                style="color: #1c8c90;">Hasil Penilaian</label>
                                            <input type="text" id="total_penilaian" class="form-control" readonly
                                                style="background-color: #f8f9fa; border: 1px solid #1c8c90;"
                                                value="Rata-Rata: {{ $hasil->average }} ||  Kualitas {{ $hasil->akreditasi }}">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <hr>

                            <div class="row mb-4">
                                <div class="col">
                                    <label for="kecelakaan_kerja_info" class="form-label">Insiden Kerja</label>
                                    <br><small>Apakah ada Insiden Kerja di Permit ini?</small>
                                    <div class="mt-2">
                                        <select id="kecelakaan_kerja" name="kecelakaan_kerja" class="form-select"
                                            style="width: 400px;" disabled>
                                            <option value="">[Pilih Opsi]</option>
                                            <option value="1" {{ $hasil->ada_kecelakaan == '1' ? 'selected' : '' }}>
                                                Iya</option>
                                            <option value="0" {{ $hasil->ada_kecelakaan == '0' ? 'selected' : '' }}>
                                                Tidak ada</option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="row mb-4" id="additionalFields" style="display: none;">
                                <div class="col-md-4">
                                    <label for="total_pekerja_terdampak" class="form-label">Total Pekerja
                                        Terdampak</label>
                                    <input type="text" id="total_pekerja_terdampak" name="total_pekerja_terdampak"
                                        class="form-control" placeholder="Tulis Angka Jumlah Terdampak" value="{{ $hasil->total_pekerja_terdampak }}" disabled>
                                </div>
                                <div class="col-md-4">
                                    <label for="pekerja_luka_ringan" class="form-label">Pekerja Luka Ringan</label>
                                    <input type="text" id="pekerja_luka_ringan" name="pekerja_luka_ringan"
                                        class="form-control" placeholder="Tulis Angka Jumlah Pekerja Luka Ringan" value="{{ $hasil->pekerja_luka_ringan }}" disabled>
                                </div>
                                <div class="col-md-4">
                                    <label for="pekerja_luka_berat" class="form-label">Pekerja Luka Berat</label>
                                    <input type="text" id="pekerja_luka_berat" name="pekerja_luka_berat"
                                        class="form-control" placeholder="Tulis Angka Jumlah Pekerja Luka Berat" value="{{ $hasil->pekerja_luka_serius }}" disabled>
                                </div>
                            </div>


                            <hr>

                            <div class="row">
                                <!-- Upload Image 1: Bukti 1 -->
                                <div class="col-sm-4">
                                    <div class="position-relative">
                                        <div>
                                            <label for="pic_area" class="form-label">Foto Pendukung 1</label>
                                            <br>
                                           
                                            <span class="h-12 w-12 rounded-full overflow-hidden bg-gray-100">
                                                <img src="{{ asset('/storage/APD.jpg') }}" 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-bukti-1')">
                                            </span>
                                        </div>
                                    </div>
                                    <input class="form-control" type="file" id="image_upload-bukti_1" name="image_upload-bukti_1" 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: Bukti 2 -->
                                <div class="col-sm-4">
                                    <div class="position-relative">
                                        <div>
                                            <label for="pic_area" class="form-label">Foto Pendukung 2</label>
                                            <br>
                                           
                                            <span class="h-12 w-12 rounded-full overflow-hidden bg-gray-100">
                                                <img src="{{ asset('/storage/' . $hasil->foto_pendukung_3) }}" id="image-preview-bukti-3"
                                                    alt="image" class="w-30 border-radius-lg shadow-sm" data-bs-toggle="modal"
                                                    data-bs-target="#imageModal" onclick="openFullSizeImage('image-preview-bukti-2')">
                                            </span>
                                        </div>
                                    </div>
                                    <input class="form-control" type="file" id="image_upload_bukti_2" name="image_upload_bukti_2" 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 3: Bukti 3 -->
                                <div class="col-sm-4">
                                    <div class="position-relative">
                                        <div>
                                            <label for="pic_area" class="form-label">Foto Pendukung 3 <span style="color: red;">*</span></label>
                                            <br>
                                            
                                            <span class="h-12 w-12 rounded-full overflow-hidden bg-gray-100">
                                                <img src="{{ asset('/storage/' . $hasil->foto_pendukung_3) }}" id="image-preview-bukti-3"
                                                    alt="image" class="w-30 border-radius-lg shadow-sm" data-bs-toggle="modal"
                                                    data-bs-target="#imageModal" onclick="openFullSizeImage('image-preview-bukti-3')">
                                            </span>
                                        </div>
                                    </div>
                                    <input class="form-control" type="file" id="image_upload_bukti_3" name="image_upload_bukti_3" 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>
                            </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/APD.jpg') }}"
                                                alt="Full size image" class="img-fluid">
                                        </div>
                                    </div>
                                </div>
                            </div>

                        @endif

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

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

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

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

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

            document.getElementById('image-upload-edit-bukti-2').onclick = function() {
                document.getElementById('image_upload_bukti_2').click();
            };

            document.getElementById('image-upload-edit-bukti-3').onclick = function() {
                document.getElementById('image_upload_bukti_3').click();
            };

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

            document.addEventListener('DOMContentLoaded', function() {
                const kecelakaanKerjaSelect = document.getElementById('kecelakaan_kerja');
                const additionalFields = document.getElementById('additionalFields');

                // Fungsi untuk mengatur tampilan elemen tambahan
                function toggleAdditionalFields() {
                    if (kecelakaanKerjaSelect.value === '1') {
                        additionalFields.style.display = 'flex';
                    } else {
                        additionalFields.style.display = 'none';
                    }
                }

                // Panggil fungsi saat halaman dimuat untuk mengatur tampilan awal
                toggleAdditionalFields();

                // Tambahkan event listener untuk mengubah tampilan saat nilai berubah
                kecelakaanKerjaSelect.addEventListener('change', toggleAdditionalFields);
            });
        </script>


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

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

                    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 input field for Tenaga Kerja
                    var input1 = document.createElement('input');
                    input1.type = 'text';
                    input1.classList.add('form-control', 'readonly');
                    input1.id = 'tenaga_kerja_' + i;
                    input1.name = 'tenaga_kerja_' + i;

                    div1.appendChild(label1);
                    div1.appendChild(input1);

                    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', 'readonly');
                    input2.id = 'kompetensi_' + i;
                    input2.name = 'kompetensi_' + i;

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

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

                    var label3 = document.createElement('label');
                    label3.setAttribute('for', 'bpjs_' + i);
                    label3.classList.add('form-label');
                    label3.innerHTML = 'BPJS - ' + i;

                    // Create input field for BPJS status
                    var bpjsInput = document.createElement('input');
                    bpjsInput.type = 'text';
                    bpjsInput.classList = 'readonly';
                    bpjsInput.classList.add('form-control');
                    bpjsInput.id = 'bpjs_option_' + i;
                    bpjsInput.name = 'bpjs_option_' + i;

                    div3.appendChild(label3);
                    div3.appendChild(bpjsInput);

                    rowForm.appendChild(div1);
                    rowForm.appendChild(div2);
                    rowForm.appendChild(div3);

                    detailContainer.appendChild(rowForm);

                    // Set default values if it's the initial load
                    @if ($users->idroles === 'veneks')
                        if (initialLoad) {
                            @foreach ($pekerjaDetails as $index => $pekerja)
                                if (i === {{ $index + 1 }}) {
                                    input1.value = '{{ $pekerja->nama_pekerja }}'; // Set the value for the input field
                                    input2.value = '{{ $pekerja->kompetensi }}'; // Assuming there's a 'kompetensi' field
                                    bpjsInput.value = '{{ $pekerja->file_bpjs }}'; // Assuming there's a 'bpjs_status' field
                                }
                            @endforeach
                        }
                    @elseif ($users->idroles === 'venint')
                        if (initialLoad) {
                            @foreach ($workerDetails as $index => $pekerja)
                                if (i === {{ $index + 1 }}) {
                                    input1.value = '{{ $pekerja->nama_user }}'; // Set the value for the input field
                                    input2.value = '{{ $pekerja->kompetensi }}'; // Assuming there's a 'kompetensi' field
                                    bpjsInput.value = '{{ $pekerja->file_bpjs }}'; // Assuming there's a 'bpjs_status' field
                                }
                            @endforeach
                        }
                    @endif

                }
            };



            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>
    @endpush