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

                        @if (in_array($authorize->idroles, ['admnk3', 'picare', 'picker', 'admins'], true) && ($list->actor ?? null))
                            {{-- button Approval --}}
                            <button type="button" class="btn btn-primary mb-0" onclick="openModal('{{ encrypt($list->id) }}')"
                                title="Pilih Keputusan">
                                <i class="fas fa-check"></i><span class="font-weight-bold"> Pilih Keputusan </span>
                            </button>
                        @endif

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

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

                            <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 class="text-center">
                                    <p class="fw-bold text-primary">
                                        <i class="fas fa-calendar-alt me-1"></i>
                                        Tanggal Pengajuan:
                                        {{ optional($list->tgl_mengajukan ? \Carbon\Carbon::parse($list->tgl_mengajukan) : null)->format('d-m-Y') ?? '-' }}
                                    </p>
                                </div>

                            </div>
                            {{-- Catatan Revisi --}}
                            @if (!empty($list))
                                <div class="mb-4">
                                    <h5 class="fw-bold text-secondary mb-3">
                                        <i class="fas fa-comment-dots me-2"></i> Status Approval
                                    </h5>
                                    <div class="row g-3">

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

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

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

                                    </div>
                                </div>
                            @endif

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

                            <div style="border-top: 3px solid #1c8c90; margin: 20px 0;"></div>
                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label for="nomor_surat" class="form-label">Nomor Surat</label>
                                    <input type="text" class="form-control" id="nomor_surat" name="nomor_surat" readonly
                                        value="{{ $list->id }}">
                                </div>
                                <div class="col-md-6">
                                    <label for="status_permit" class="form-label">Status Permit</label>
                                    <input type="text" class="form-control" id="status_permit" name="status_permit" readonly
                                        value="{{ $list->status }}">
                                    <code>
                                                Ket: <strong>E</strong> = Entri, <strong>P</strong> = Pending,
                                                <strong>B</strong> = Berlaku, <strong>S</strong> = Selesai
                                            </code>
                                </div>
                            </div>

                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label for="mulai_kerja" class="form-label">Mulai Kerja <span
                                            style="color: red;">*</span></label>
                                    <input type="date" class="form-control" id="mulai_kerja" name="mulai_kerja"
                                        value="{{ $list->mulai_kerja }}" readonly>
                                </div>

                                <div class="col-md-6">
                                    <label for="masa_berlaku" class="form-label">Masa Berlaku</label>
                                    <input type="text" class="form-control" id="masa_berlaku" name="masa_berlaku" readonly
                                        value="{{ $list->masa_berlaku ?? 'Otomatis Update Ketika Semua Approved' }}">
                                </div>

                            </div>

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

                                <div class="col-md-6">
                                    <label for="lokasi_detail" class="form-label">Lokasi Detail <span
                                            style="color:red">*</span></label>
                                    <input type="text" class="form-control" id="lokasi_detail" name="lokasi_detail"
                                        value="{{ $list->lokasi_detail ?? '-' }}" readonly>
                                </div>

                            </div>


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

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

                                @if ($list->iddepart === 'DP008')
                                    <div class="col-md-6">
                                        <label for="nama_vendor" class="form-label">Nama Vendor</label>
                                        <input type="text" class="form-control" id="nama_vendor" name="nama_vendor"
                                            value="{{ $vendors->firstWhere('idvendor', $list->idvendor)->nama ?? 'Vendor tidak ditemukan' }}"
                                            readonly>
                                    </div>
                                @elseif($list->idvendor === 'VND0001')
                                    <div class="col-md-6">
                                        <label for="nama_vendor" class="form-label">Departemen</label>
                                        <input type="text" class="form-control" id="nama_vendor" name="nama_vendor"
                                            value="{{ $departement->firstWhere('id', $list->iddepart)->nama_departement ?? 'Departement tidak ditemukan' }}"
                                            readonly>
                                    </div>
                                @endif
                            </div>

                            <div class="row mb-3">
                                {{-- tampilkan field PO jika veneks --}}
                                @if ($list->no_po !== 'Tidak Perlu')
                                    <!-- 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 id="nomor_po_field" class="mt-3"
                                            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>
                                @else
                                    <div class="col-md-6"></div>
                                @endif

                                <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->firstname }}">
                                </div>
                            </div>


                            <!-- Surat Izin Kerja K3 -->
                            <br>
                            <h4 style="color: #1c8c90; font-weight: bold;">2. Surat Izin Kerja K3</h4>
                            <div style="border-top: 3px solid #1c8c90; margin: 20px 0;"></div>
                            <div class="row mb-3">
                                <div class="col-md-12">
                                    <label for="uraian_pekerjaan" class="form-label">Uraian Pekerjaan <span
                                            style="color: red;">*</span></label>
                                    <textarea class="form-control" id="uraian_pekerjaan" name="uraian_pekerjaan"
                                        placeholder="Deskripsikan Pekerjaan Tersebut !"
                                        readonly>{{ $list->uraian_pekerjaan }}</textarea>
                                </div>
                            </div>
                            <div class="row mb-3">
                                <!-- Kolom Kiri (3 Opsi) -->
                                <div class="col-md-6">
                                    <label for="pemeriksaan_sebelum_kerja" class="form-label">Pemeriksaan Sebelum Kerja
                                        <span style="color: red;">*</span></label>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox"
                                            value="Menggunakan Peralatan yang Tepat" id="peralatan_tepat"
                                            name="pemeriksaan_sebelum_kerja[]" {{ in_array('Menggunakan Peralatan yang Tepat', $existingPemeriksaanIds) ? 'checked' : '' }} disabled>
                                        <label class="form-check-label" for="peralatan_tepat">
                                            Menggunakan Peralatan yang Tepat
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox"
                                            value="Peralatan Sudah Dilakukan Inspeksi" id="peralatan_inspeksi"
                                            name="pemeriksaan_sebelum_kerja[]" {{ in_array('Peralatan Sudah Dilakukan Inspeksi', $existingPemeriksaanIds) ? 'checked' : '' }} disabled>
                                        <label class="form-check-label" for="peralatan_inspeksi">
                                            Peralatan Sudah Dilakukan Inspeksi
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox"
                                            value="Pekerja Sesuai dengan Bidangnya" id="pekerjaan_bidang"
                                            name="pemeriksaan_sebelum_kerja[]" {{ in_array('Pekerja Sesuai dengan Bidangnya', $existingPemeriksaanIds) ? 'checked' : '' }} disabled>
                                        <label class="form-check-label" for="pekerjaan_bidang">
                                            Pekerja Sesuai dengan Bidangnya
                                        </label>
                                    </div>
                                </div>

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


                            <hr>



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

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

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

                            <hr>
                            <br>

                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label for="kategori_pekerjaan" class="form-label">Kategori Pekerjaan <span
                                            style="color: red;">*</span></label>
                                    <div class="form-check">
                                        @foreach ($kategori as $item)
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" value="{{ $item->id }}"
                                                    id="kategori_pekerjaan_{{ $item->id }}" name="kategori_pekerjaan[]" {{ in_array($item->id, $existingKategoriIds) ? 'checked' : '' }} disabled>
                                                <label class="form-check-label" for="kategori_pekerjaan_{{ $item->id }}">
                                                    {{ $item->jenis_pekerjaan }}
                                                </label>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>


                                <div class="col-md-6">
                                    <label for="apd" class="form-label">APD <span style="color: red;">*</span></label>
                                    <div class="form-check">
                                        <div class="row">
                                            @foreach ($alat as $item)
                                                <div class="col-md-6">
                                                    <div class="form-check table-cell">
                                                        <input class="form-check-input" type="checkbox" value="{{ $item->id }}"
                                                            id="apd_{{ $item->id }}" name="apd[]" {{ in_array($item->id, $existingApdIds) ? 'checked' : '' }} disabled>
                                                        <label class="form-check-label" for="apd_{{ $item->id }}">
                                                            {{ $item->nama_alat }}
                                                        </label>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>

                            </div>


                            <hr>
                            <div class="row mb-3">
                                <div id="checklist-container" class="row" style="display:none;">
                                    <!-- Checklist akan ditambahkan oleh JavaScript -->
                                </div>
                                <div id="lain-lain-container" class="col-md-6"
                                    style="{{ in_array('KPE0006', $existingKategoriIds ?? []) ? '' : 'display:none;' }}">
                                    <label for="lain_lain_detail" class="form-label">Detail Pekerjaan Lain-Lain</label>
                                    <input type="text" class="form-control" id="lain_lain_detail" name="lain_lain_detail"
                                        placeholder="Jelaskan Kategori Pekerjaan Disini"
                                        value="{{ old('lain_lain_detail', $lainLainDetail) }}" readonly>
                                </div>
                            </div>

                            {{-- Script untuk Modal --}}

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

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

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

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

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

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

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

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

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

                            @if (in_array($authorize->idroles, ['admnk3', 'admins'], true))
                                <div class="mb-3 p-3 border rounded" style="background-color: #f8f9fa; border-color: #dee2e6;">
                                    <p class="mb-2">
                                        <i class="fas fa-info-circle me-2" style="color: #1c8c90;"></i>
                                        <strong style="color: #1c8c90;">Info:</strong> Klik tombol <strong>"Edit JSA"</strong>
                                        untuk mengaktifkan mode edit.
                                        Anda dapat menggeser urutan baris dengan icon <i class="fas fa-arrows-alt-v"></i>.
                                    </p>
                                    <p class="mb-0 text-muted" style="font-size: 0.875rem;">
                                        <i class="fas fa-exclamation-triangle me-1"></i>
                                        Catatan: Baris pertama dan terakhir tidak dapat digeser atau dihapus.
                                    </p>
                                </div>
                            @endif

                            @if (!empty($hasK3EditedJsa) && $hasK3EditedJsa)
                                <div class="mb-3 p-3 border rounded" style="background-color: #d1e7dd; border-color: #198754;">
                                    <p class="mb-0">
                                        <i class="fas fa-check-circle me-2" style="color: #198754;"></i>
                                        <strong style="color: #198754;">Informasi:</strong> Baris dengan <span
                                            class="badge bg-success"><i class="fas fa-user-shield"></i> K3</span> dan <strong
                                            style="background-color: #a3cfbb; padding: 2px 6px; border-radius: 3px;">highlight
                                            hijau</strong> menandakan JSA yang telah diedit/ditambahkan oleh tim K3.
                                    </p>
                                </div>
                            @endif

                            <div class="row mb-3">
                                <div class="col-md-12">
                                    <label for="analisis" class="form-label">Tabel Analisis <span
                                            style="color: red;">*</span></label>

                                    <div class="table-responsive">
                                        <table class="table table-bordered" id="table_analisis_show">
                                            <thead class="bg-primary text-white">
                                                <tr>
                                                    @if (in_array($authorize->idroles, ['admnk3', 'admins'], true))
                                                        <th style="width: 5%" class="text-center">No</th>
                                                    @endif
                                                    <th style="width: 23.75%">Urutan Langkah Tugas</th>
                                                    <th style="width: 23.75%">Potensi Bahaya</th>
                                                    <th style="width: 23.75%">Akibat/Kerugian</th>
                                                    <th style="width: 23.75%">Rekomendasi Pencegahan</th>
                                                    @if (in_array($authorize->idroles, ['admnk3', 'admins'], true))
                                                        <th style="width: 5%" class="text-center">Aksi</th>
                                                    @endif
                                                </tr>
                                            </thead>
                                            <tbody id="tbody_analisis_show">
                                                @foreach ($analisis as $index => $item)
                                                    @php
                                                        // Fixed row: hanya row pertama dan terakhir berdasarkan posisi
                                                        $isFirstRow = $loop->first;
                                                        $isLastRow = $loop->last;
                                                        $isFixed = $isFirstRow || $isLastRow;
                                                        // Cek apakah row ini diedit/ditambah oleh K3
                                                        $isEditedByK3 = isset($item->sts_k3) && $item->sts_k3 === '1';
                                                    @endphp
                                                    <tr class="{{ $isFixed ? 'fixed-row' : '' }} {{ $isEditedByK3 ? 'jsa-edited-by-k3' : '' }}"
                                                        data-fixed="{{ $isFixed ? '1' : '0' }}"
                                                        data-k3-edited="{{ $isEditedByK3 ? '1' : '0' }}"
                                                        data-row-id="{{ $item->id }}" @if($isEditedByK3)
                                                        style="background-color: #d1e7dd;" @endif>
                                                        @if (in_array($authorize->idroles, ['admnk3', 'admins'], true))
                                                            <td class="text-center row-number" style="vertical-align: middle;">
                                                                @if($isEditedByK3)
                                                                    <span class="badge bg-success mb-1" title="Diedit/Ditambah oleh K3">
                                                                        <i class="fas fa-user-shield"></i> K3
                                                                    </span>
                                                                    <br>
                                                                @endif
                                                                @if (!$isFixed)
                                                                    <i class="fas fa-arrows-alt-v text-secondary drag-icon"
                                                                        title="Geser ke atas/bawah"
                                                                        style="cursor: grab; display: none;"></i>
                                                                @endif
                                                                <span class="number-label">{{ $loop->iteration }}</span>
                                                            </td>
                                                        @endif
                                                        <td>
                                                            <textarea class="form-control jsa-field" name="langkah_tugas[]"
                                                                rows="4" readonly>{{ $item->langkah_tugas }}</textarea>
                                                        </td>
                                                        <td>
                                                            <textarea class="form-control jsa-field" name="potensi_bahaya[]"
                                                                rows="4" readonly>{{ $item->potensi_bahaya }}</textarea>
                                                        </td>
                                                        <td>
                                                            <textarea class="form-control jsa-field" name="akibat_kerugian[]"
                                                                rows="4" readonly>{{ $item->akibat }}</textarea>
                                                        </td>
                                                        <td>
                                                            <textarea class="form-control jsa-field"
                                                                name="rekomendasi_pencegahan[]" rows="4"
                                                                readonly>{{ $item->rekomendasi }}</textarea>
                                                        </td>
                                                        @if (in_array($authorize->idroles, ['admnk3', 'admins'], true))
                                                            <td class="text-center" style="vertical-align: middle;">
                                                                @if (!$isFixed)
                                                                    <button type="button" class="btn btn-danger btn-sm btn-delete-row"
                                                                        onclick="deleteRowJSA(this)" style="display: none;"
                                                                        title="Hapus baris">
                                                                        <i class="fas fa-trash"></i>
                                                                    </button>
                                                                @else
                                                                    <span class="badge bg-secondary"
                                                                        title="Baris ini tidak dapat dihapus">Fixed</span>
                                                                @endif
                                                            </td>
                                                        @endif
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>

                                    <div class="d-flex gap-2">
                                        <button type="button" class="btn btn-success" id="btnTambahBaris"
                                            onclick="addRowJSA()" disabled>
                                            <i class="fas fa-plus me-1"></i> Tambah Baris
                                        </button>

                                        @if (in_array($authorize->idroles, ['admnk3', 'admins'], true))
                                            <button type="button" class="btn btn-warning" id="btnEditJSA"
                                                onclick="toggleEditModeJSA()">
                                                <i class="fas fa-edit me-1"></i> Edit JSA
                                            </button>

                                            <button type="button" class="btn btn-primary" id="btnSimpanJSA"
                                                onclick="simpanJSA()" style="display: none;">
                                                <i class="fas fa-save me-1"></i> Simpan JSA
                                            </button>

                                            <button type="button" class="btn btn-secondary" id="btnBatalJSA"
                                                onclick="batalEditJSA()" style="display: none;">
                                                <i class="fas fa-times me-1"></i> Batal
                                            </button>
                                        @endif
                                    </div>
                                </div>
                            </div>


                            <hr>

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


                                <!-- Modal for Full Size Image Preview -->
                                <div class="modal fade" id="imageModal" tabindex="-1" aria-labelledby="imageModalLabel"
                                    aria-hidden="true">
                                    <div class="modal-dialog modal-dialog-centered">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="imageModalLabel">Preview Image</h5>
                                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                    aria-label="Close"></button>
                                            </div>
                                            <div class="modal-body text-center">
                                                <img id="full-image" src="{{ asset('/storage/noimage.png') }}"
                                                    alt="Full size image" class="img-fluid rounded shadow border"
                                                    style="max-height: 400px; object-fit: contain;">
                                            </div>
                                        </div>
                                    </div>
                                </div>

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

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

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

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

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

                                        var myModal = new bootstrap.Modal(document.getElementById('imageModal'));
                                        myModal.show();
                                    }
                                </script>

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

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

                                <div class="row">
                                    <div class="row mb-3">

                                        <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_kerja" name="pic_kerja" disabled>
                                                <option value="{{ $list->pic_kerja }}">{{ $namaPicKerja }}</option>
                                            </select>
                                        </div>

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

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

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

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



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

            {{-- Modal K3 dan PIC --}}

            @php
                // controller harus sudah set $list->actor: 'picker' | 'picare' | 'k3' | null
                $actor = $list->actor ?? null;
            @endphp

            <!-- Modal untuk Konfirmasi -->
            <div class="modal fade" id="confirmationModal" 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 Keputusan</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"
                                onclick="closeModal()"></button>
                        </div>

                        <!-- Body Modal -->
                        <div class="modal-body">
                            <p id="modalSubLabe3" class="mt-2"></p>
                        </div>

                        <!-- Footer Modal -->
                        <div class="modal-footer">
                            {{-- === K3: Revisi | Tolak | Setujui (wajib checklist) === --}}
                            @if ($actor === 'k3')
                                <button type="button" class="btn btn-warning"
                                    onclick="openAlasan('{{ encrypt($list->id) }}','{{ $list->id }}')">
                                    <i class="fa fa-pencil-square-o me-1"></i> Revisi
                                </button>

                                <button type="button" class="btn btn-danger"
                                    onclick="openHardReject('{{ encrypt($list->id) }}','{{ $list->id }}')">
                                    <i class="fa fa-times me-1"></i> Tolak
                                </button>

                                <button type="button" class="btn btn-success"
                                    onclick="openChecklist('{{ encrypt($list->id) }}')">
                                    <i class="fa fa-check me-1"></i> Setujui
                                </button>

                                {{-- === PIC Area / PIC Kerja: Revisi | Setujui (tanpa checklist) === --}}
                            @elseif ($actor === 'picare' || $actor === 'picker')
                                <button type="button" class="btn btn-warning"
                                    onclick="openAlasan('{{ encrypt($list->id) }}','{{ $list->id }}')">
                                    <i class="fa fa-pencil-square-o me-1"></i> Revisi
                                </button>

                                <button type="button" class="btn btn-success"
                                    onclick="submitForm('approve','{{ encrypt($list->id) }}')">
                                    <i class="fa fa-check me-1"></i> Setujui
                                </button>

                                {{-- === Tidak ada aksi untuk user pada permit ini === --}}
                            @else
                                <span class="text-muted">Tidak ada aksi yang tersedia.</span>
                            @endif
                        </div>
                    </div>
                </div>
            </div>

            <!-- Modal untuk Tolak (Batal Kerja / Hard Reject) → tampil hanya untuk actor K3 -->
            @if ($actor === 'k3')
                <div class="modal fade" id="hardRejectConfirm" tabindex="-1" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title">Konfirmasi Penolakan Final</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"
                                    onclick="closeHardReject()"></button>
                            </div>
                            <div class="modal-body">
                                <p>Apakah Anda yakin permit ini <strong>tidak akan dilanjut/tidak jadi kerja</strong>?</p>
                                <small class="text-muted">Tindakan ini akan mengubah status permit menjadi
                                    <b>Tolak</b>.</small>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" onclick="closeHardReject()">Batal</button>
                                <button type="button" class="btn btn-danger"
                                    onclick="submitForm('hardreject','{{ encrypt($list->id) }}')">Ya, Tolak</button>
                            </div>
                        </div>
                    </div>
                </div>
            @endif

            <!-- Modal untuk Konfirmasi Tolak/Revisi (soft) → boleh dipakai semua actor -->
            <div class="modal fade" id="catatanTolak" tabindex="-1" aria-labelledby="confirmationModalLabel"
                aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="modalTitle">Konfirmasi Penolakan</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"
                                onclick="closeModal2()"></button>
                        </div>

                        <div class="modal-body">
                            <label id="modalLabel" class="form-label">Catatan (Wajib Diisi)</label>
                            <p id="modalSubLabe2" class="mt-2"></p>
                            <textarea id="modalNote" class="form-control" rows="3" placeholder="Masukkan catatan..."
                                required></textarea>
                        </div>

                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" onclick="closeModal2()">Batal</button>
                            <button id="btnKirimCatatan" type="button" class="btn btn-success"
                                onclick="submitForm('rejected','{{ encrypt($list->id) }}')" disabled>
                                Kirim Catatan
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <script>
                document.addEventListener("DOMContentLoaded", function () {
                    const noteEl = document.getElementById("modalNote");
                    const btnKirim = document.getElementById("btnKirimCatatan");
                    if (noteEl && btnKirim) {
                        noteEl.addEventListener("input", function () {
                            btnKirim.disabled = noteEl.value.trim() === "";
                        });
                    }
                });
            </script>

            <!-- Modal untuk Konfirmasi Checklist -->
            <div class="modal fade" id="catatanChecklist" tabindex="-1" aria-labelledby="confirmationModalLabel"
                aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered modal-lg">
                    <div class="modal-content">
                        <!-- Header Modal -->
                        <div class="modal-header">
                            <h5 class="modal-title" id="modalTitle">Konfirmasi Final</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"
                                onclick="closeModal3()"></button>
                        </div>

                        <div class="modal-body">
                            <label id="modalLabel" class="form-label">Isi Checklist berikut... (Wajib Diisi)</label>
                            <form id="checklistForm">

                                <!-- Pertanyaan 1 -->
                                <div class="form-group mt-3">
                                    <label>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" required>
                                        <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">
                                        <label class="form-check-label" for="pertanyaan_1_no">Tidak</label>
                                    </div>

                                </div>

                                <!-- Pertanyaan 2 -->
                                <div class="form-group mt-3">
                                    <label>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" required>
                                        <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">
                                        <label class="form-check-label" for="pertanyaan_2_no">Tidak</label>
                                    </div>

                                </div>

                                <!-- Pertanyaan 3 -->
                                <div class="form-group mt-3">
                                    <label>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" required>
                                        <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">
                                        <label class="form-check-label" for="pertanyaan_3_no">Tidak</label>
                                    </div>

                                </div>

                                <!-- Pertanyaan 4 -->
                                <div class="form-group mt-3">
                                    <label>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" required>
                                        <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">
                                        <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">
                                        <label class="form-check-label" for="pertanyaan_4_na">N/A</label>
                                    </div>
                                </div>

                                <!-- Pertanyaan 5 -->
                                <div class="form-group mt-3">
                                    <label>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" required>
                                        <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">
                                        <label class="form-check-label" for="pertanyaan_5_no">Tidak</label>
                                    </div>

                                </div>

                            </form>
                        </div>

                        <!-- Footer Modal -->
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" onclick="closeModal3()">Batal</button>
                            <button type="button" class="btn btn-success" onclick="submitForm('approve')">Setujui</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
        </div>
    </div>
@endsection
@push('js')
    <script>
        function updateTenagaKerja(initialLoad = false) {
            const jumlahTenagaKerja = parseInt(document.getElementById('tenaga_kerja').value || '0', 10);
            const detailContainer = document.getElementById('tenaga_kerja_detail');
            detailContainer.innerHTML = '';

            const ROLE = @json($role_label); // "veneks" | "venint"
            const pekerjaDetails = @json($pekerjaDetails ?? []); // veneks only
            const karyawanDetails = @json($karyawanDetails ?? []); // venint only
            const storageUrl = @json(asset('storage'));
            const NOIMG = @json(asset('storage/noimage.png'));
            const lowerRole = String(ROLE || '').toLowerCase();

            const getSafe = (arr, idx) => (Array.isArray(arr) && arr[idx - 1]) ? arr[idx - 1] : null;

            for (let i = 1; i <= jumlahTenagaKerja; i++) {
                const row = document.createElement('div');
                row.classList.add('row', 'mb-3');

                // kolom 1
                const c1 = document.createElement('div');
                c1.classList.add('col-md-4');
                c1.innerHTML = `
              <label class="form-label">Tenaga Kerja - ${i}</label>
              <input type="text" class="form-control" id="tenaga_kerja_${i}" readonly>
            `;

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

                // kolom 3
                const c3 = document.createElement('div');
                c3.classList.add('col-md-4');

                const lab = document.createElement('label');
                lab.classList.add('form-label');
                lab.textContent = 'BPJS - ' + i;

                const bpjs = document.createElement('select');
                bpjs.classList.add('form-select', 'mb-2');
                bpjs.id = 'bpjs_option_' + i;
                bpjs.disabled = true;

                if (lowerRole === 'veneks') {
                    bpjs.innerHTML = `<option value="menyusul">menyusul</option><option value="memiliki">memiliki</option>`;
                } else {
                    bpjs.innerHTML = `<option value="tidak perlu">tidak perlu</option>`;
                }

                const preview = document.createElement('div');
                preview.id = 'bpjs_upload_wrapper_' + i;

                c3.append(lab, bpjs, preview);
                row.append(c1, c2, c3);
                detailContainer.appendChild(row);

                // set data
                if (!initialLoad) continue;

                if (lowerRole === 'veneks') {
                    const cur = getSafe(pekerjaDetails, i);
                    if (!cur) continue;

                    document.getElementById('tenaga_kerja_' + i).value = cur.nama_pekerja || '';
                    document.getElementById('kompetensi_' + i).value = cur.kompetensi || '';

                    const val = (cur.file_bpjs || '').toLowerCase();
                    if (val && val !== 'menyusul' && val !== 'tidak perlu') {
                        bpjs.value = 'memiliki';
                        const isPdf = val.endsWith('.pdf');
                        const fileUrl = `${storageUrl}/${cur.file_bpjs}`;
                        preview.innerHTML = isPdf ?
                            `<a href="${fileUrl}" target="_blank" class="d-flex flex-column align-items-start text-decoration-none" title="Klik untuk membuka PDF">
                       <i class="fas fa-file-lines text-danger" style="font-size:80px; cursor:pointer;"></i>
                       <p class="text-xs mt-1 mb-0 text-dark">${cur.file_bpjs.split('/').pop()}</p>
                     </a>` :
                            `<img src="${fileUrl}" id="preview_bpjs_${i}"
                          class="w-50 border-radius-lg shadow-sm"
                          style="cursor: zoom-in"
                          onclick="openFullSizeImage('preview_bpjs_${i}')"
                          onerror="this.onerror=null;this.src='${NOIMG}';">`;
                    } else {
                        bpjs.value = val || 'menyusul';
                        preview.innerHTML = '';
                    }
                } else { // venint
                    const cur = getSafe(karyawanDetails, i);
                    if (!cur) continue;

                    document.getElementById('tenaga_kerja_' + i).value = cur.nama_karyawan || '';
                    document.getElementById('kompetensi_' + i).value = cur.kompetensi || '';
                    bpjs.value = 'tidak perlu';
                    preview.innerHTML = '';
                }
            }
        }

        // panggil saat page load agar data tampil
        document.addEventListener('DOMContentLoaded', () => {
            if (typeof updateTenagaKerja === 'function') updateTenagaKerja(true);
        });

        document.addEventListener('DOMContentLoaded', function () {
            updateTenagaKerja(true);
            if (document.getElementById('po_option')) {
                toggleNomorPOField();
            }
        });


        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 poEl = document.getElementById('po_option');
            var nomorPOField = document.getElementById('nomor_po_field');

            if (!poEl || !nomorPOField) {
                // Kalau elemen nggak ada, langsung stop
                return;
            }

            var poOption = poEl.value;

            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();

        // Approval Script

        function openModal(primary) {
            // Set modal title and label content
            document.getElementById('modalTitle').innerText = 'Konfirmasi Keputusan';
            
            // Cek kondisi Nomor PO dan Aktor
            var noPo = {!! json_encode($list->no_po ?? '') !!};
            var actor = {!! json_encode($actor ?? '') !!};
            var setujuBtns = document.querySelectorAll('#confirmationModal .btn-success');
            
            if (actor === 'k3' && (noPo.trim() === '')) {
                document.getElementById('modalSubLabe3').innerHTML = '<span class="text-danger fw-bold"><i class="fas fa-exclamation-triangle"></i> Nomor PO masih kosong!</span><br>Sebagai K3, Anda tidak dapat <b>Menyetujui</b> permit ini sampai vendor melengkapi Nomor PO. Silakan pilih <b>Revisi</b> untuk mengembalikan permit.';
                setujuBtns.forEach(btn => {
                    btn.disabled = true;
                    btn.style.display = 'none'; // Sembunyikan tombol Setuju untuk K3
                });
            } else {
                document.getElementById('modalSubLabe3').innerText = 'Tentukan Keputusan dari Permit ini !';
                setujuBtns.forEach(btn => {
                    btn.disabled = false;
                    btn.style.display = 'inline-block'; // Munculkan tombol Setuju
                });
            }   

            // Store the primary key in a global variable for submission
            window.currentPrimary = primary;

            // Open the modal using Bootstrap
            var modal = new bootstrap.Modal(document.getElementById('confirmationModal'));
            modal.show();
        }

        function openAlasan(primary, id) {
            // Set modal title and label content
            document.getElementById('modalTitle').innerText = 'Konfirmasi Tolak';
            document.getElementById('modalLabel').innerText = 'Catatan (Wajib Di isi)';

            document.getElementById('modalSubLabe2').innerText = `Anda Menolak Permit ${id} dikarenakan...`;


            // Store the primary key in a global variable for submission
            window.currentPrimary = primary;

            // Open the modal using Bootstrap
            var modal = new bootstrap.Modal(document.getElementById('catatanTolak'));
            modal.show();
        }

        function openHardReject(primary, id) {
            window.currentPrimary = primary;
            new bootstrap.Modal(document.getElementById('hardRejectConfirm')).show();
        }

        function closeHardReject() {
            const modalEl = document.getElementById('hardRejectConfirm');
            const modal = bootstrap.Modal.getInstance(modalEl);
            if (modal) modal.hide();
        }


        function openChecklist(primary) {
            // Set modal title and label content
            document.getElementById('modalTitle').innerText = 'Konfirmasi Checklist';
            document.getElementById('modalLabel').innerText = 'Catatan (Wajib Di isi)';

            // Store the primary key in a global variable for submission
            window.currentPrimary = primary;

            // Open the modal using Bootstrap
            var modal = new bootstrap.Modal(document.getElementById('catatanChecklist'));
            modal.show();
        }

        function closeModal() {
            // Close the modal by hiding the Bootstrap modal
            var modalElement = document.getElementById('confirmationModal');
            var modalInstance = bootstrap.Modal.getInstance(modalElement);
            modalInstance.hide();
        }

        function closeModal2() {
            // Close the modal by hiding the Bootstrap modal
            var modalElement = document.getElementById('catatanTolak');
            var modalInstance = bootstrap.Modal.getInstance(modalElement);
            modalInstance.hide();
        }

        function closeModal3() {
            // Close the modal by hiding the Bootstrap modal
            var modalElement = document.getElementById('catatanChecklist');
            var modalInstance = bootstrap.Modal.getInstance(modalElement);
            modalInstance.hide();
        }

        window.baseUrl = "{{ url('') }}";

        function submitForm(type, primaryFromBtn = null) {
            const noteEl = document.getElementById('modalNote');
            let note = noteEl ? noteEl.value.trim() : '';

            let actionType;
            if (type === 'hardreject' || type === 'tolak') actionType = 'tolak';
            else if (type === 'revisi' || type === 'rejected') actionType = 'revisi';
            else if (type === 'approve') actionType = 'approve';
            else return;

            const primary = primaryFromBtn || window.currentPrimary;
            if (!primary) {
                alert("ID permit tidak ditemukan.");
                return;
            }

            // buat card loading
            const loader = document.createElement("div");
            loader.id = "loadingCard";
            loader.style.position = "fixed";
            loader.style.top = "0";
            loader.style.left = "0";
            loader.style.width = "100%";
            loader.style.height = "100%";
            loader.style.background = "rgba(0,0,0,0.4)";
            loader.style.zIndex = "9999";
            loader.style.display = "flex";
            loader.style.alignItems = "center";
            loader.style.justifyContent = "center";
            loader.innerHTML = `
                        <div class="card shadow-lg border-0" style="width: 20rem;">
                            <div class="card-body text-center">
                                <div class="spinner-border text-primary mb-3" role="status" style="width: 3rem; height: 3rem;">
                                <span class="visually-hidden">Loading...</span>
                                </div>
                                <h5 class="fw-bold text-primary">Sedang Memproses</h5>
                                <p class="text-muted mb-0">Mohon tunggu, data Anda sedang dikirim...</p>
                            </div>
                        </div>
                    `;
            document.body.appendChild(loader);

            // disable semua tombol
            document.querySelectorAll("button").forEach(btn => {
                btn.disabled = true;
                btn.classList.add("disabled");
            });

            let url = (actionType === 'approve') ?
                window.baseUrl + '/approves/' + primary :
                window.baseUrl + '/rejects/' + primary;

            // validasi note
            if (actionType === 'revisi' && !note) {
                alert('Catatan wajib diisi untuk revisi.');
                document.getElementById("loadingCard").remove(); // hapus card
                document.querySelectorAll("button").forEach(btn => btn.disabled = false); // aktifkan lagi
                return;
            }
            if (actionType === 'tolak' && !note) {
                note = 'Ditolak final oleh Admin K3';
            }

            // form POST dinamis
            const form = document.createElement('form');
            form.method = 'POST';
            form.action = url;

            const csrf = document.createElement('input');
            csrf.type = 'hidden';
            csrf.name = '_token';
            csrf.value = '{{ csrf_token() }}';
            form.appendChild(csrf);

            const actionInput = document.createElement('input');
            actionInput.type = 'hidden';
            actionInput.name = 'action_type';
            actionInput.value = actionType;
            form.appendChild(actionInput);

            const noteInput = document.createElement('input');
            noteInput.type = 'hidden';
            noteInput.name = 'note';
            noteInput.value = note;
            form.appendChild(noteInput);

            ['pertanyaan_1', 'pertanyaan_2', 'pertanyaan_3', 'pertanyaan_4', 'pertanyaan_5'].forEach(q => {
                const sel = document.querySelector(`input[name="${q}"]:checked`);
                if (sel) {
                    const inp = document.createElement('input');
                    inp.type = 'hidden';
                    inp.name = q;
                    inp.value = sel.value;
                    form.appendChild(inp);
                }
            });

            document.body.appendChild(form);
            form.submit();
        }
    </script>

    <!-- Sortable.js untuk drag & drop -->
    <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>

    <script>
        // ============= JSA Edit Mode & Drag-Drop =============
        let isEditMode = false;
        let sortableInstance = null;
        let originalJSAData = [];
        let draggedRows = new Set(); // Track rows yang benar-benar di-drag oleh K3

        document.addEventListener('DOMContentLoaded', function () {
            @if (in_array($authorize->idroles, ['admnk3', 'admins'], true))
                // Simpan data JSA original untuk fitur batal
                saveOriginalJSAData();

                // Initialize Sortable.js
                initSortable();
            @endif
                });

        function saveOriginalJSAData() {
            originalJSAData = [];
            const rows = document.querySelectorAll('#tbody_analisis_show tr');
            rows.forEach((row, index) => {
                const textareas = row.querySelectorAll('textarea');
                const rowData = {
                    id: row.dataset.rowId || null, // Database row ID
                    langkah: textareas[0]?.value || '',
                    potensi: textareas[1]?.value || '',
                    akibat: textareas[2]?.value || '',
                    rekomendasi: textareas[3]?.value || '',
                    isFixed: row.dataset.fixed === '1',
                    originalOrder: index // Track original order from database
                };
                originalJSAData.push(rowData);
            });
        }

        function initSortable() {
            const tbody = document.getElementById('tbody_analisis_show');
            if (!tbody) return;

            sortableInstance = new Sortable(tbody, {
                animation: 150,
                handle: '.drag-icon',
                draggable: 'tr:not(.fixed-row)',
                disabled: true, // disabled by default, enabled saat edit mode
                ghostClass: 'sortable-ghost',
                onEnd: function (evt) {
                    // Tandai row yang di-drag sebagai "intentionally moved"
                    // Gunakan unique identifier: row_id (database ID) atau generated unique key
                    const draggedRow = evt.item;

                    // Gunakan row ID jika ada, atau generate unique key berdasarkan DOM index
                    let rowIdentifier = draggedRow.dataset.rowId || '';
                    if (!rowIdentifier) {
                        // Row baru tanpa database ID - generate unique key
                        rowIdentifier = 'new_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
                        draggedRow.dataset.dragKey = rowIdentifier;
                    }

                    // Simpan identifier row yang benar-benar di-drag
                    draggedRows.add(rowIdentifier);

                    updateRowNumbers();
                }
            });
        }

        function toggleEditModeJSA() {
            isEditMode = !isEditMode;

            const btnEdit = document.getElementById('btnEditJSA');
            const btnSimpan = document.getElementById('btnSimpanJSA');
            const btnBatal = document.getElementById('btnBatalJSA');
            const btnTambah = document.getElementById('btnTambahBaris');
            const textareas = document.querySelectorAll('.jsa-field');
            const dragIcons = document.querySelectorAll('.drag-icon');
            const deleteButtons = document.querySelectorAll('.btn-delete-row');

            if (isEditMode) {
                // Mode Edit Aktif
                // Reset tracking drag rows
                draggedRows.clear();

                btnEdit.style.display = 'none';
                btnSimpan.style.display = 'inline-block';
                btnBatal.style.display = 'inline-block';
                btnTambah.disabled = false;

                // Enable textareas
                textareas.forEach(ta => {
                    ta.removeAttribute('readonly');
                    ta.style.backgroundColor = '#fff';
                });

                // Show drag icons
                dragIcons.forEach(icon => {
                    icon.style.display = 'inline';
                });

                // Show delete buttons
                deleteButtons.forEach(btn => {
                    btn.style.display = 'inline-block';
                });

                // Enable sortable
                if (sortableInstance) {
                    sortableInstance.option('disabled', false);
                }

                Swal.fire({
                    icon: 'info',
                    title: 'Mode Edit Aktif',
                    text: 'Anda dapat mengedit JSA, menggeser urutan baris, menambah atau menghapus baris.',
                    timer: 2000,
                    showConfirmButton: false
                });
            } else {
                // Mode Edit Nonaktif
                disableEditMode();
            }
        }

        function disableEditMode() {
            isEditMode = false;

            const btnEdit = document.getElementById('btnEditJSA');
            const btnSimpan = document.getElementById('btnSimpanJSA');
            const btnBatal = document.getElementById('btnBatalJSA');
            const btnTambah = document.getElementById('btnTambahBaris');
            const textareas = document.querySelectorAll('.jsa-field');
            const dragIcons = document.querySelectorAll('.drag-icon');
            const deleteButtons = document.querySelectorAll('.btn-delete-row');

            btnEdit.style.display = 'inline-block';
            btnSimpan.style.display = 'none';
            btnBatal.style.display = 'none';
            btnTambah.disabled = true;

            // Disable textareas
            textareas.forEach(ta => {
                ta.setAttribute('readonly', 'readonly');
                ta.style.backgroundColor = '#e9ecef';
            });

            // Hide drag icons
            dragIcons.forEach(icon => {
                icon.style.display = 'none';
            });

            // Hide delete buttons
            deleteButtons.forEach(btn => {
                btn.style.display = 'none';
            });

            // Disable sortable
            if (sortableInstance) {
                sortableInstance.option('disabled', true);
            }
        }

        function batalEditJSA() {
            Swal.fire({
                title: 'Batalkan Edit?',
                text: 'Semua perubahan yang belum disimpan akan hilang.',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Ya, Batalkan',
                cancelButtonText: 'Tidak',
                confirmButtonColor: '#d33',
                cancelButtonColor: '#3085d6'
            }).then((result) => {
                if (result.isConfirmed) {
                    // Restore original data
                    restoreOriginalJSAData();
                    // Reset drag tracking
                    draggedRows.clear();
                    disableEditMode();

                    Swal.fire({
                        icon: 'info',
                        title: 'Dibatalkan',
                        text: 'Perubahan telah dibatalkan.',
                        timer: 1500,
                        showConfirmButton: false
                    });
                }
            });
        }

        function restoreOriginalJSAData() {
            const tbody = document.getElementById('tbody_analisis_show');
            tbody.innerHTML = '';

            originalJSAData.forEach((data, index) => {
                const newRow = createJSARow(data.langkah, data.potensi, data.akibat, data.rekomendasi, data.isFixed, data.id);
                tbody.appendChild(newRow);
            });

            updateRowNumbers();
        }

        function addRowJSA() {
            if (!isEditMode) return;

            const tbody = document.getElementById('tbody_analisis_show');
            const rows = tbody.querySelectorAll('tr');

            // Insert sebelum row terakhir (yang fixed)
            // Row baru harus masuk di posisi sebelum row terakhir
            const insertIndex = rows.length > 0 ? rows.length - 1 : 0;

            const newRow = createJSARow('', '', '', '', false);

            if (insertIndex > 0 && insertIndex < rows.length) {
                // Insert sebelum row terakhir
                tbody.insertBefore(newRow, rows[insertIndex]);
            } else if (rows.length === 0) {
                // Jika tidak ada row sama sekali
                tbody.appendChild(newRow);
            } else {
                // Fallback: insert sebelum row terakhir
                tbody.insertBefore(newRow, rows[rows.length - 1]);
            }

            updateRowNumbers();
        }

        function createJSARow(langkah = '', potensi = '', akibat = '', rekomendasi = '', isFixed = false, rowId = null) {
            const tr = document.createElement('tr');
            if (isFixed) {
                tr.classList.add('fixed-row');
                tr.dataset.fixed = '1';
            } else {
                tr.dataset.fixed = '0';
            }

            // Set row ID (null/empty untuk row baru)
            if (rowId) {
                tr.dataset.rowId = rowId;
            }

            tr.innerHTML = `
                        <td class="text-center row-number" style="vertical-align: middle;">
                            ${!isFixed ? '<i class="fas fa-arrows-alt-v text-secondary drag-icon" title="Geser ke atas/bawah" style="cursor: grab; display: ' + (isEditMode ? 'inline' : 'none') + ';"></i>' : ''}
                            <span class="number-label"></span>
                        </td>
                        <td>
                            <textarea class="form-control jsa-field" name="langkah_tugas[]" rows="4" ${!isEditMode ? 'readonly' : ''}>${langkah}</textarea>
                        </td>
                        <td>
                            <textarea class="form-control jsa-field" name="potensi_bahaya[]" rows="4" ${!isEditMode ? 'readonly' : ''}>${potensi}</textarea>
                        </td>
                        <td>
                            <textarea class="form-control jsa-field" name="akibat_kerugian[]" rows="4" ${!isEditMode ? 'readonly' : ''}>${akibat}</textarea>
                        </td>
                        <td>
                            <textarea class="form-control jsa-field" name="rekomendasi_pencegahan[]" rows="4" ${!isEditMode ? 'readonly' : ''}>${rekomendasi}</textarea>
                        </td>
                        <td class="text-center" style="vertical-align: middle;">
                            ${!isFixed
                    ? '<button type="button" class="btn btn-danger btn-sm btn-delete-row" onclick="deleteRowJSA(this)" style="display: ' + (isEditMode ? 'inline-block' : 'none') + ';" title="Hapus baris"><i class="fas fa-trash"></i></button>'
                    : '<span class="badge bg-secondary" title="Baris ini tidak dapat dihapus">Fixed</span>'}
                        </td>
                    `;

            return tr;
        }

        function deleteRowJSA(button) {
            if (!isEditMode) return;

            const row = button.closest('tr');
            const isFixed = row.dataset.fixed === '1';

            if (isFixed) {
                Swal.fire({
                    icon: 'error',
                    title: 'Tidak Dapat Dihapus',
                    text: 'Baris ini tidak dapat dihapus karena merupakan baris tetap.',
                    timer: 2000
                });
                return;
            }

            const tbody = document.getElementById('tbody_analisis_show');
            const normalRows = tbody.querySelectorAll('tr:not(.fixed-row)');

            if (normalRows.length <= 1) {
                Swal.fire({
                    icon: 'error',
                    title: 'Tidak Dapat Dihapus',
                    text: 'Minimal harus ada 1 baris JSA selain baris tetap!',
                    timer: 2000
                });
                return;
            }

            Swal.fire({
                title: 'Hapus Baris?',
                text: 'Baris JSA ini akan dihapus.',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Ya, Hapus',
                cancelButtonText: 'Batal',
                confirmButtonColor: '#d33'
            }).then((result) => {
                if (result.isConfirmed) {
                    row.remove();
                    updateRowNumbers();
                }
            });
        }

        function updateRowNumbers() {
            const rows = document.querySelectorAll('#tbody_analisis_show tr');
            rows.forEach((tr, index) => {
                const numberSpan = tr.querySelector('.number-label');
                if (numberSpan) {
                    numberSpan.textContent = index + 1;
                }
            });
        }

        function simpanJSA() {
            if (!isEditMode) return;

            // Validasi: semua field harus terisi
            const textareas = document.querySelectorAll('#tbody_analisis_show textarea');
            let isEmpty = false;

            textareas.forEach(ta => {
                if (ta.value.trim() === '') {
                    isEmpty = true;
                    ta.style.borderColor = 'red';
                } else {
                    ta.style.borderColor = '';
                }
            });

            if (isEmpty) {
                Swal.fire({
                    icon: 'error',
                    title: 'Validasi Gagal',
                    text: 'Semua field JSA harus diisi!'
                });
                return;
            }

            // Konfirmasi simpan
            Swal.fire({
                title: 'Simpan Perubahan JSA?',
                text: 'Perubahan JSA akan disimpan ke database.',
                icon: 'question',
                showCancelButton: true,
                confirmButtonText: 'Ya, Simpan',
                cancelButtonText: 'Batal',
                confirmButtonColor: '#28a745'
            }).then((result) => {
                if (result.isConfirmed) {
                    submitJSAData();
                }
            });
        }

        function submitJSAData() {
            const form = document.createElement('form');
            form.method = 'POST';
            form.action = '{{ route('trapro.updateJsa', encrypt($list->id)) }}';

            // CSRF token
            const csrf = document.createElement('input');
            csrf.type = 'hidden';
            csrf.name = '_token';
            csrf.value = '{{ csrf_token() }}';
            form.appendChild(csrf);

            // Collect JSA data & detect INTENTIONAL order changes
            const rows = document.querySelectorAll('#tbody_analisis_show tr');
            rows.forEach((row, currentIndex) => {
                const textareas = row.querySelectorAll('textarea');

                // Ambil row_id dari data attribute (database ID)
                const rowId = row.dataset.rowId || '';

                // Cek apakah row ini benar-benar di-drag oleh K3
                // Gunakan row ID atau dragKey untuk matching
                let orderChanged = '0';
                const rowIdentifier = rowId || row.dataset.dragKey || '';
                if (rowIdentifier && draggedRows.has(rowIdentifier)) {
                    // Row ini di-drag manual oleh K3, set flag
                    orderChanged = '1';
                }

                ['langkah_tugas', 'potensi_bahaya', 'akibat_kerugian', 'rekomendasi_pencegahan'].forEach((name, idx) => {
                    const input = document.createElement('input');
                    input.type = 'hidden';
                    input.name = name + '[]';
                    input.value = textareas[idx]?.value || '';
                    form.appendChild(input);
                });

                // Kirim row_id (database ID) untuk setiap row
                const rowIdInput = document.createElement('input');
                rowIdInput.type = 'hidden';
                rowIdInput.name = 'row_id[]';
                rowIdInput.value = rowId; // Empty string jika row baru
                form.appendChild(rowIdInput);

                // Tambahkan flag order_changed untuk setiap row
                const orderInput = document.createElement('input');
                orderInput.type = 'hidden';
                orderInput.name = 'order_changed[]';
                orderInput.value = orderChanged;
                form.appendChild(orderInput);
            });

            document.body.appendChild(form);
            form.submit();
        }
    </script>

    <style>
        /* Drag & Drop Styles */
        .drag-icon {
            cursor: grab;
        }

        .drag-icon:active {
            cursor: grabbing;
        }

        .sortable-ghost {
            background: #ffeeba !important;
            opacity: 0.8;
        }

        .fixed-row {
            background-color: #f8f9fa !important;
        }

        .jsa-field[readonly] {
            background-color: #e9ecef;
        }
    </style>

    <style>
        /* Scroll wrapper */
        .table-responsive {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            scrollbar-gutter: stable;
            position: relative;
        }

        /* Biar tabel pasti overflow kalau layar kecil */
        #table_analisis_show {
            min-width: 900px;
            /* atau sesuaikan */
        }

        /* ✅ Highlight untuk row yang diedit/ditambah oleh K3 */
        .jsa-edited-by-k3 {
            background-color: #d1e7dd !important;
            /* Bootstrap success light */
            border-left: 4px solid #198754 !important;
            /* Border hijau di kiri */
        }

        /* Pastikan background tetap terlihat saat textarea di-focus */
        .jsa-edited-by-k3 .form-control {
            background-color: rgba(209, 231, 221, 0.5) !important;
            /* Semi-transparent hijau */
        }

        .jsa-edited-by-k3 .form-control:focus {
            background-color: rgba(209, 231, 221, 0.7) !important;
            border-color: #198754 !important;
            box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25) !important;
        }

        /* Badge K3 indicator */
        .jsa-edited-by-k3 .badge {
            font-size: 0.7rem;
        }

        /* Scrollbar (Chrome/Safari/Edge) */
        .table-responsive::-webkit-scrollbar {
            height: 8px;
        }

        .table-responsive::-webkit-scrollbar-track {
            background: #f1f3f5;
            border-radius: 999px;
        }

        .table-responsive::-webkit-scrollbar-thumb {
            background: #b8c0c8;
            border-radius: 999px;
        }

        .table-responsive:hover::-webkit-scrollbar-thumb {
            background: #8a93a0;
        }

        /* Firefox */
        .table-responsive {
            scrollbar-width: thin;
            scrollbar-color: #8a93a0 #f1f3f5;
        }

        /* Hint di layar kecil */
        @media (max-width: 575.98px) {
            .table-responsive::after {
                content: 'Geser ke kanan →';
                position: absolute;
                right: .5rem;
                bottom: .25rem;
                padding: .2rem .5rem;
                font-size: .8rem;
                color: #6c757d;
                background: linear-gradient(to right, transparent, rgba(255, 255, 255, .95));
                border-radius: .4rem;
                pointer-events: none;
            }
        }

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