@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 {
            padding: 5px;
            margin: 5px;
            border-radius: 1px;
            background-color: #f9f9f9;
        }

        .table-cell input[type="checkbox"] {
            margin-right: 8px;
        }

        .table-cell label {
            font-size: 14px;
            line-height: 1.5;
        }
        
        /* Highlight untuk baris JSA yang di-edit oleh K3 */
        .k3-edited-row {
            background-color: #d4edda !important;
        }
        
        .k3-edited-row td {
            background-color: #d4edda !important;
            border-left: 3px solid #28a745;
        }
        
        .k3-edited-row:hover {
            background-color: #c3e6cb !important;
        }
    </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 d-flex gap-2">
                        {{-- tombol kembali --}}
                        <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</span>
                        </button>

                        {{-- tombol selesai (jika memenuhi syarat) --}}
                        @if ($authorize->edit == '1' && $list->status == 'B' && $list->ajukan_selesai === '0')
                            @php
                                // tentukan penolak terakhir + catatan terakhir
                                $lastBy = '-';
                                $lastNote = '';

                                if (!empty($list->note_selesai_reject_picker)) {
                                    $lastBy = 'PIC Kerja';
                                    $notes = array_filter(
                                        array_map('trim', explode(';', $list->note_selesai_reject_picker)),
                                    );
                                    $lastNote = end($notes) ?: '';
                                }
                                if (!empty($list->note_selesai_reject_picare)) {
                                    $lastBy = 'PIC Area';
                                    $notes = array_filter(
                                        array_map('trim', explode(';', $list->note_selesai_reject_picare)),
                                    );
                                    $lastNote = end($notes) ?: '';
                                }
                                if (!empty($list->note_selesai_reject_k3)) {
                                    $lastBy = 'K3';
                                    $notes = array_filter(
                                        array_map('trim', explode(';', $list->note_selesai_reject_k3)),
                                    );
                                    $lastNote = end($notes) ?: '';
                                }
                            @endphp

                            <button type="button" class="btn btn-info mb-0 btn-selesai" data-id="{{ encrypt($list->id) }}"
                                data-note="{{ e($lastNote) }}" data-rejected-by="{{ e($lastBy) }}">
                                <i class="fas fa-check me-1"></i> Selesai
                            </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 PERMIT</h3>
                            </div>
                            <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>

                            {{-- === STATUS APPROVAL (PENGAJUAN) === --}}
                            @php
                                if (!function_exists('splitNotes')) {
                                    function splitNotes($raw)
                                    {
                                        $arr = array_filter(array_map('trim', explode(';', (string) $raw)));
                                        return array_values($arr);
                                    }
                                }
                                if (!function_exists('fmtDT')) {
                                    function fmtDT($v)
                                    {
                                        return $v ? \Carbon\Carbon::parse($v)->format('d-m-Y H:i') : null;
                                    }
                                }

                                $statusMap = [
                                    'T' => ['label' => 'Tolak', 'class' => 'bg-danger'],
                                    'TR' => ['label' => 'Terima', 'class' => 'bg-success'],
                                    'P' => ['label' => 'Pending', 'class' => 'bg-primary'],
                                ];

                                $cardsPengajuan = [
                                    [
                                        'icon' => 'fas fa-user-cog',
                                        'title' => 'PIC Kerja',
                                        'status' => $list->approval_pic_kerja ?? 'P',
                                        'notes' => splitNotes($list->catatan_picker ?? ''),
                                        'appr' => fmtDT($list->approve_picker ?? null),
                                        'rej' => fmtDT($list->reject_picker ?? null),
                                    ],
                                    [
                                        'icon' => 'fas fa-map-marker-alt',
                                        'title' => 'PIC Area',
                                        'status' => $list->approval_pic_area ?? 'P',
                                        'notes' => splitNotes($list->catatan_picare ?? ''),
                                        'appr' => fmtDT($list->approve_picare ?? null),
                                        'rej' => fmtDT($list->reject_picare ?? null),
                                    ],
                                    [
                                        'icon' => 'fas fa-shield-alt',
                                        'title' => 'K3',
                                        'status' => $list->approval_k3 ?? 'P',
                                        'notes' => splitNotes($list->catatan_k3 ?? ''),
                                        'appr' => fmtDT($list->approve_k3 ?? null),
                                        'rej' => fmtDT($list->reject_k3 ?? null),
                                    ],
                                ];
                            @endphp

                            <div class="mb-4">
                                <h5 class="fw-bold text-secondary mb-2">
                                    <i class="fas fa-comment-dots me-2"></i> Status Approval (Pengajuan Baru)
                                </h5>

                                <div class="row g-3">
                                    @foreach ($cardsPengajuan as $c)
                                        @php $sm = $statusMap[$c['status']] ?? ['label'=>'—','class'=>'bg-secondary']; @endphp
                                        <div class="col-md-4">
                                            @php
                                                // Cek apakah ini card K3 dan ada revisi langsung dari K3
                                                $isK3Card = $c['title'] === 'K3';
                                                $showK3Highlight = $isK3Card && ($hasK3Revision ?? false);
                                            @endphp
                                            <div class="card shadow-sm border-0 h-100 {{ $showK3Highlight ? 'border-success' : '' }}" 
                                                 style="{{ $showK3Highlight ? 'border: 2px solid #28a745 !important; background-color: #f0fff4;' : '' }}">
                                                <div
                                                    class="card-header bg-primary text-white py-2 d-flex align-items-center gap-2">
                                                    <i class="{{ $c['icon'] }}"></i>
                                                    <span>{{ $c['title'] }}</span>
                                                    @if($showK3Highlight)
                                                        <span class="badge bg-success ms-auto">
                                                            <i class="fas fa-check-circle me-1"></i>Revisi JSA Langsung dari K3
                                                        </span>
                                                    @endif
                                                </div>
                                                <div class="card-body small">
                                                    @if($showK3Highlight)
                                                        <div class="alert alert-success py-2 px-3 mb-2" style="font-size: 0.85rem;">
                                                            <i class="fas fa-info-circle me-1"></i>
                                                            <strong>JSA telah direvisi langsung oleh K3</strong>
                                                        </div>
                                                    @endif
                                                    <p class="mb-1">
                                                        <strong>Status:</strong>
                                                        <span
                                                            class="badge rounded-pill {{ $sm['class'] }}">{{ $sm['label'] }}</span>
                                                    </p>
                                                    @if ($c['status'] === 'TR' && $c['appr'])
                                                        <p class="mb-1"><strong>Tgl Approve:</strong>
                                                            {{ $c['appr'] }}</p>
                                                    @endif
                                                    @if ($c['rej'])
                                                        <p class="mb-1"><strong>Tgl Reject:</strong>
                                                            {{ $c['rej'] }}</p>
                                                    @endif

                                                    @if (!empty($c['notes']))
                                                        <p class="mb-0 mt-2"><strong>Catatan Revisi:</strong></p>
                                                        <ul class="mb-0 ps-3">
                                                            @foreach ($c['notes'] as $note)
                                                                <li class="{{ $loop->last ? 'fw-bold text-danger' : '' }}">
                                                                    {{ $note }}
                                                                    @if ($loop->last)
                                                                        <span
                                                                            class="badge bg-warning text-white ms-1">Revisi
                                                                            Terakhir</span>
                                                                    @endif
                                                                </li>
                                                            @endforeach
                                                        </ul>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>

                            @if (!empty($list))
                                <div class="mb-4">
                                    <h5 class="fw-bold text-secondary mb-3">
                                        <i class="fas fa-clipboard-check me-2"></i> Status Approval (Permohonan Selesai)
                                    </h5>
                                    <div class="row g-3">
                                        @php
                                            $statusMap = [
                                                'T' => ['label' => 'Tolak', 'class' => 'bg-danger'],
                                                'TR' => ['label' => 'Terima', 'class' => 'bg-success'],
                                                'P' => ['label' => 'Pending', 'class' => 'bg-primary'],
                                            ];
                                        @endphp

                                        {{-- === PIC Kerja === --}}
                                        @php
                                            $statusPicker = $statusMap[$list->picker_setuju_selesai ?? 'P'] ?? [
                                                'label' => '-',
                                                'class' => 'bg-secondary',
                                            ];
                                            $notesPicker = array_filter(
                                                array_map(
                                                    'trim',
                                                    explode(';', $list->note_selesai_reject_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 {{ $statusPicker['class'] }}">{{ $statusPicker['label'] }}</span>
                                                    </p>
                                                    @if (!empty($notesPicker))
                                                        <p class="mb-0 mt-2"><strong>Catatan Revisi:</strong></p>
                                                        <ul class="mb-0 ps-3">
                                                            @foreach ($notesPicker 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
                                            $statusPicare = $statusMap[$list->picare_setuju_selesai ?? 'P'] ?? [
                                                'label' => '-',
                                                'class' => 'bg-secondary',
                                            ];
                                            $notesPicare = array_filter(
                                                array_map(
                                                    'trim',
                                                    explode(';', $list->note_selesai_reject_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 {{ $statusPicare['class'] }}">{{ $statusPicare['label'] }}</span>
                                                    </p>
                                                    @if (!empty($notesPicare))
                                                        <p class="mb-0 mt-2"><strong>Catatan:</strong></p>
                                                        <ul class="mb-0 ps-3">
                                                            @foreach ($notesPicare 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->k3_setuju_selesai ?? 'P'] ?? [
                                                'label' => '-',
                                                'class' => 'bg-secondary',
                                            ];
                                            $notesK3 = array_filter(
                                                array_map('trim', explode(';', $list->note_selesai_reject_k3 ?? '')),
                                            );
                                        @endphp
                                        <div class="col-md-4">
                                            <div class="card shadow-sm border-0 h-100">
                                                <div class="card-header bg-primary text-white py-2">
                                                    <i class="fas fa-shield-alt me-1"></i> K3
                                                </div>
                                                <div class="card-body small">
                                                    <p class="mb-1"><strong>Status:</strong>
                                                        <span
                                                            class="badge {{ $statusK3['class'] }}">{{ $statusK3['label'] }}</span>
                                                    </p>
                                                    @if (!empty($notesK3))
                                                        <p class="mb-0 mt-2"><strong>Catatan:</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>

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

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

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

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

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

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

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

                                <div class="col-md-6">
                                    @if ($list->iddepart === 'DP008')
                                        <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>
                                    @elseif($list->idvendor === 'VND0001')
                                        <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>
                                    @endif
                                </div>

                            </div>

                            <div class="row mb-3">
                                @if ($role_label === 'veneks')
                                    <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" {{ strtolower((string) $list->no_po) == 'menyusul' ? 'selected' : '' }}>
                                                Menyusul</option>
                                            <option value="memiliki" {{ strtolower((string) $list->no_po) != 'menyusul' ? 'selected' : '' }}>
                                                Memiliki Nomor PO</option>
                                        </select>

                                        @php
                                            $roleArray = is_string($user_login->idroles ?? '') ? array_map('trim', explode(',', strtolower($user_login->idroles))) : [];
                                            $isAdminOrK3 = count(array_intersect($roleArray, ['admins', 'admmis', 'admnk3'])) > 0;
                                            $isPoEmpty = empty(trim((string)$list->no_po));
                                            $hasStatusPO = strtolower((string) $list->no_po) != 'menyusul';
                                            $canEditPO = $isAdminOrK3 && $isPoEmpty && $hasStatusPO && $list->status === 'B';
                                        @endphp
                                        <div id="nomor_po_field" class="mt-3"
                                            style="display: {{ $hasStatusPO ? 'block' : 'none' }};">
                                            <label for="nomor_po" class="form-label">Nomor PO</label>
                                            @if($canEditPO)
                                                <div class="input-group">
                                                    <input type="text" class="form-control" id="nomor_po" name="nomor_po"
                                                        value="{{ $list->no_po }}" placeholder="Masukkan Nomor PO">
                                                    <button class="btn btn-warning mb-0" type="button" onclick="updateInlinePo('{{ encrypt($list->id) }}')">
                                                        <i class="fas fa-save"></i> Simpan
                                                    </button>
                                                </div>
                                                <script>
                                                    function updateInlinePo(idEncrypt) {
                                                        const noPo = document.getElementById('nomor_po').value.trim();
                                                        if (!noPo) {
                                                            Swal.fire('Peringatan', 'Nomor PO tidak boleh kosong!', 'warning');
                                                            return;
                                                        }

                                                        Swal.fire({
                                                            title: 'Menyimpan...',
                                                            allowOutsideClick: false,
                                                            didOpen: () => Swal.showLoading()
                                                        });

                                                        $.post("{{ url('permit/update-po') }}", {
                                                            _token: '{{ csrf_token() }}',
                                                            idencrypt: idEncrypt,
                                                            no_po: noPo
                                                        }).done(res => {
                                                            if (res.success) {
                                                                Swal.fire({
                                                                    title: 'Berhasil!',
                                                                    text: res.message,
                                                                    icon: 'success',
                                                                    timer: 1500,
                                                                    showConfirmButton: false
                                                                }).then(() => {
                                                                    location.reload();
                                                                });
                                                            } else {
                                                                Swal.fire('Gagal!', res.message || 'Permintaan gagal.', 'error');
                                                            }
                                                        }).fail(() => {
                                                            Swal.fire('Gagal!', 'Terjadi kesalahan server.', 'error');
                                                        });
                                                    }
                                                </script>
                                            @else
                                                <input type="text" class="form-control" id="nomor_po" name="nomor_po"
                                                    value="{{ $list->no_po }}" readonly>
                                            @endif
                                        </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);
                                const existingChecks = @json($existingPengecheckanIds);
                                const selectedCats = Array.from(document.querySelectorAll('input[name="kategori_pekerjaan[]"]:checked'))
                                    .map(cb => cb.value);

                                function updateChecklist() {
                                    const box = document.getElementById('checklist-container');
                                    const lain = document.getElementById('lain-lain-container');
                                    box.innerHTML = '';

                                    if (!selectedCats.length) {
                                        box.style.display = 'none';
                                        if (lain) lain.style.display = 'none';
                                        return;
                                    }

                                    let appended = 0;
                                    selectedCats.forEach(catId => {
                                        if (catId === 'KPE0006') return; // Lain-Lain: tidak render opsi

                                        const det = kategoriDetail[catId];
                                        const opts = Array.isArray(det?.options) ? det.options : [];
                                        if (!det || !opts.length) return;

                                        const col = document.createElement('div');
                                        col.className = 'col-md-6';
                                        col.innerHTML = `
                                      <div class="mb-3">
                                        <label class="form-label" style="font-size:14px;">${det.label}</label>
                                        <div class="row">
                                          ${opts.map(o => `
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    <div class="col-md-6">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      <div class="form-check">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        <input class="form-check-input" type="checkbox"
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               id="checklist_${catId}_${o.value}"
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               value="${o.value}" name="checklist[${catId}][]"
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               ${existingChecks.includes(o.value) ? 'checked' : ''} disabled>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        <label class="form-check-label" for="checklist_${catId}_${o.value}">${o.label}</label>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      </div>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    </div>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  `).join('')}
                                        </div>
                                      </div>`;
                                        box.appendChild(col);
                                        appended++;
                                    });

                                    box.style.display = appended ? 'flex' : 'none';

                                    // tampilkan input Lain-Lain bila dipilih
                                    if (lain) {
                                        const showLain = selectedCats.includes('KPE0006');
                                        lain.style.display = showLain ? 'block' : 'none';
                                    }
                                }

                                document.addEventListener('DOMContentLoaded', 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 (!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">
                                            <thead>
                                                <tr>
                                                    <th style="width: 5%;">No</th>
                                                    <th>Urutan Langkah Tugas</th>
                                                    <th>Potensi Bahaya</th>
                                                    <th>Akibat/Kerugian</th>
                                                    <th>Rekomendasi Pencegahan</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($analisis as $index =>$item)
                                                    @php
                                                        $isK3Edited = isset($item->sts_k3) && $item->sts_k3 === '1';
                                                    @endphp
                                                    <tr class="{{ $isK3Edited ? 'k3-edited-row' : '' }}">
                                                    <td class="text-center" style="vertical-align: middle;">
                                                        {{ $index + 1 }}
                                                        @if($isK3Edited)
                                                            <br>
                                                            <span class="badge bg-success mt-1" style="font-size: 0.7rem;" title="Dimodifikasi oleh K3">
                                                                <i class="fas fa-user-shield"></i> K3
                                                            </span>
                                                        @endif
                                                        <td>
                                                            <textarea class="form-control" name="langkah_tugas[]" rows="4" readonly>{{ $item->langkah_tugas }}</textarea>
                                                        </td>
                                                        <td>
                                                            <textarea class="form-control" name="potensi_bahaya[]" rows="4" readonly>{{ $item->potensi_bahaya }}</textarea>
                                                        </td>
                                                        <td>
                                                            <textarea class="form-control" name="akibat_kerugian[]" rows="4" readonly>{{ $item->akibat }}</textarea>
                                                        </td>
                                                        <td>
                                                            <textarea class="form-control" name="rekomendasi_pencegahan[]" rows="4" readonly>{{ $item->rekomendasi }}</textarea>
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                    <div class="d-flex justify-content">
                                        <button type="button" class="btn btn-success" onclick="addRow()" disabled>Tambah Baris</button>
                                            @if($showK3Highlight)
                                                <span class="badge bg-primary text-white ms-auto d-flex align-items-center py-1 px-2" style="font-size: 14px;">
                                                    <i class="fas fa-warning me-1"></i>
                                                    Highlight hijau JSA : Update dari K3.
                                                </span>
                                            @endif
                                        </div>
                                    </div>
                            </div>

                            <hr>

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

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

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

                                        @if (strtolower($list->workshop_kontraktor_opsi ?? null) === 'wrk0001')
                                            <div class="col-md-3">
                                                <label class="form-label fw-bold">Keterangan Lainnya</label>
                                                <p class="mt-1">{{ $list->workshop_kontraktor_other ?? '—' }}</p>
                                            </div>
                                        @endif
                                        
                                        <div class="row mt-3 w-100">
                                            <div class="col-md-6">
                                                <label class="form-label fw-bold">Tanggal Awal Workshop</label>
                                                <div class="form-control bg-light" style="min-height: 38px;">
                                                    {{ !empty($list->tgl_awal_workshop) ? \Carbon\Carbon::parse($list->tgl_awal_workshop)->format('d-m-Y H:i') : '—' }}
                                                </div>
                                            </div>

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

                            <hr>

                            <!-- Bukti Pendukung -->
                            <h4 style="color: #1c8c90; font-weight: bold;">5. Bukti Pendukung</h4>
                            <div style="border-top: 3px solid #1c8c90; margin: 20px 0;"></div>
                            <div class="row">
                                <!-- Upload Image 1: Foto APD -->
                                <div class="col-sm-6">
                                    <div class="position-relative">
                                        <div>
                                            <label for="pic_area" class="form-label">Foto APD</label>
                                            <br>
                                            <span class="overflow-hidden bg-gray-100 d-inline-block"
                                                style="max-width: 250px; border-radius:8px; box-shadow:0 2px 6px rgba(0,0,0,0.15);">
                                                <img src="{{ asset('storage/' . ($list->foto_apd ?? 'noimage.png')) }}"
                                                    alt="Foto APD" id="image-preview-apd"
                                                    onclick="openFullSizeImage('image-preview-apd')"
                                                    style="width:100%; height:auto; object-fit:contain; display:block; cursor:zoom-in;">
                                            </span>
                                        </div>

                                    </div>
                                    <input class="form-control" type="file" id="image-upload-apd"
                                        name="image-upload-apd" style="display: none;" disabled>
                                </div>

                                <!-- Upload Image 2: Foto Alat Kerja -->
                                <div class="col-sm-6">
                                    <div class="position-relative">
                                        <div>
                                            <label class="form-label">Foto Alat Kerja</label>
                                            <br>
                                            <span class="d-inline-block overflow-hidden bg-gray-100 rounded shadow-sm"
                                                style="max-width: 250px; border-radius: 12px; cursor: zoom-in;">
                                                <img src="{{ asset('storage/' . ($list->foto_alat_kerja ?? 'noimage.png')) }}"
                                                    alt="Foto Alat Kerja"
                                                    onerror="this.onerror=null;this.src='{{ asset('storage/noimage.png') }}';"
                                                    id="image-preview-alat-kerja"
                                                    style="width: 100%; height: auto; object-fit: contain; display:block; 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) {
                                        const imgEl = document.getElementById(imageId);
                                        if (!imgEl) return;

                                        document.getElementById('full-image').src = imgEl.src;
                                        document.getElementById('imageModalLabel').textContent =
                                            imgEl.getAttribute("alt") || "Preview Image";

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

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

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

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

                                        <div class="col-md-6">
                                            <label for="pic_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>

        </div>
    </div>

    {{-- check flag js on dmenu --}}
    @if ($jsmenu == '1')
        @if (view()->exists("js.{$dmenu}"))
            @push('addjs')
                {{-- file js in folder (resources/views/js) --}}
                @include('js.' . $dmenu);
            @endpush
        @else
            @push('addjs')
                <script>
                    Swal.fire({
                        title: 'JS Not Found!!',
                        text: 'Please Create File JS',
                        icon: 'error',
                        confirmButtonColor: '#028284'
                    });
                </script>
            @endpush
        @endif
    @endif
@endsection
@push('js')
    <script>
        $(document).on('click', '.btn-selesai', function() {
            const id = $(this).data('id');
            const prevNote = (($(this).data('note') || '') + '').trim();
            const rejectedBy = (($(this).data('rejected-by') || '') + '').trim();

            const esc = s => (s || '').replace(/[&<>"']/g, c => ({
                '&': '&amp;',
                '<': '&lt;',
                '>': '&gt;',
                '"': '&quot;',
                "'": '&#039;'
            } [c]));

            let html;
            if (prevNote) {
                html = `
          <div style="text-align:left">
            <div style="font-size:12px;color:#6b7280;margin-bottom:6px">Ditolak oleh:</div>
            <span class="badge bg-danger" style="font-size:12px;">${esc(rejectedBy)}</span>
            <div style="font-size:12px;color:#6b7280;margin-top:8px;margin-bottom:6px">Catatan sebelumnya:</div>
            <span style="display:inline-block;background:#fee2e2;color:#b91c1c;border:1px solid #fecaca;border-radius:8px;padding:6px 12px;font-size:12px;white-space:normal;word-break:break-word;">
              ${esc(prevNote)}
            </span>
            <hr style="margin:10px 0">
            <div>Apakah kamu yakin mengajukan permit selesai?</div>
          </div>`;
            } else {
                html = 'Apakah kamu yakin mengajukan permit selesai?';
            }

            Swal.fire({
                title: 'Ajukan Selesai?',
                icon: prevNote ? 'info' : 'warning',
                html: html,
                showCancelButton: true,
                confirmButtonText: 'Ya, ajukan',
                cancelButtonText: 'Batal',
                confirmButtonColor: '#3b82f6',
                cancelButtonColor: '#6c757d',
            }).then((r) => {
                if (!r.isConfirmed) return;

                $.post("{{ url($url_menu . '/ajukan-selesai') }}", {
                    _token: '{{ csrf_token() }}',
                    idencrypt: id
                }).done(res => {
                    if (res.success) {
                        Swal.fire('Berhasil!', res.message, 'success')
                            .then(() => location.reload());
                    } else {
                        Swal.fire('Gagal!', res.message || 'Permintaan gagal.', 'error');
                    }
                }).fail(() => {
                    Swal.fire('Gagal!', 'Terjadi kesalahan server.', 'error');
                });
            });
        });

        function addRow() {
            var table = document.getElementById("table_analisis");
            var rowCount = table.rows.length;

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

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

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

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

        function updateTenagaKerja(initialLoad = false) {
            const jumlahTenagaKerja = parseInt(document.getElementById('tenaga_kerja').value || '0', 10);
            const detailContainer = document.getElementById('tenaga_kerja_detail');
            detailContainer.innerHTML = '';

            // Data dari controller
            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);

                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 halaman tampil pertama kali
        document.addEventListener('DOMContentLoaded', function() {
            if (typeof updateTenagaKerja === 'function') updateTenagaKerja(true);
        });

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

            var poOption = poOptionEl.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();
        });
    </script>
    <style>
        /* wrapper scroll */
        .table-responsive {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            /* smooth di iOS */
            scrollbar-gutter: stable;
            /* reservasi ruang scrollbar (Chrome/Edge modern) */
            position: relative;
            /* buat hint badge */
        }

        /* paksa tabel punya lebar minimum biar pasti overflow */
        #table_analisis {
            min-width: 900px;
        }

        /* sesuaikan angka ini */

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

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

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

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

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

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

        .revisi-terakhir {
            font-weight: bold;
            color: #d63384;
            /* pink/ungu highlight */
        }

        .card.h-100 ul {
            max-height: 150px;
            overflow: auto;
        }

        .card-header i {
            opacity: .9;
        }

        .badge.rounded-pill {
            border-radius: 999px !important;
        }

        .card.h-100:hover {
            transform: translateY(-2px);
            transition: 0.2s;
        }
    </style>
@endpush