@php
    // Use $user_login from controller (already passed to all views)
    $currentUser = $user_login ?? auth()->user();
    if (!$currentUser && session()->has('username')) {
        $currentUser = \Illuminate\Support\Facades\DB::table('users')
            ->where('username', session('username'))
            ->first();
    }
    $currentUserId = $currentUser ? $currentUser->id : null;
    $currentUserRoles = $currentUser ? (string) ($currentUser->idroles ?? '') : '';
    $normalizedRoles = ',' . str_replace(' ', '', strtolower($currentUserRoles)) . ',';
    $isPetugasOffice = str_contains($normalizedRoles, ',ptgoff,');
    $isPetugasPU = str_contains($normalizedRoles, ',ptgspu,');
    
    // Get all user IDs with ptgoff role for Office filtering
    $officeRoleUserIds = [];
    if ($isPetugasOffice) {
        $officeRoleUserIds = \Illuminate\Support\Facades\DB::table('users')
            ->whereRaw("FIND_IN_SET('ptgoff', REPLACE(idroles, ' ', ''))")
            ->where('isactive', '1')
            ->pluck('id')
            ->toArray();
    }

    $nonPeriodicItems = \Illuminate\Support\Facades\DB::table('tr_non_periodic')
        ->leftJoin('ms_area', 'tr_non_periodic.area_id', '=', 'ms_area.id')
        ->select(
            'tr_non_periodic.id',
            'tr_non_periodic.request_status',
            'tr_non_periodic.job_description',
            'tr_non_periodic.work_type',
            'tr_non_periodic.*',
            'ms_area.nama_area as area_name'
        )
        ->whereIn('tr_non_periodic.request_status', ['pengadaan', 'pengerjaan', 'revisi'])
        ->where('tr_non_periodic.is_active', '1');

    // Apply role-based filter: Petugas Office only sees assigned tasks, Petugas PU sees all
    if ($isPetugasOffice && !empty($officeRoleUserIds)) {
        $nonPeriodicItems->whereIn('tr_non_periodic.worker_id', $officeRoleUserIds);
    }

    $nonPeriodicItems = $nonPeriodicItems->orderBy('tr_non_periodic.created_at', 'desc')->get();

    // Parse attachment files from each item
    $nonPeriodicItems = $nonPeriodicItems->map(function ($item) {
        $attachments = [];
        if (!empty($item->attachment)) {
            $rawAttachment = $item->attachment;
            $decoded = json_decode($rawAttachment, true);
            if (is_array($decoded)) {
                $attachments = $decoded;
            } else {
                $parts = array_map('trim', explode(',', $rawAttachment));
                $attachments = array_filter($parts);
            }
        }

        $revisionAttachments = [];
        if (!empty($item->revision_attachment)) {
            $rawRevisionAttachment = $item->revision_attachment;
            $decodedRevision = json_decode($rawRevisionAttachment, true);
            if (is_array($decodedRevision)) {
                $revisionAttachments = $decodedRevision;
            } else {
                $partsRevision = array_map('trim', explode(',', $rawRevisionAttachment));
                $revisionAttachments = array_filter($partsRevision);
            }
        }
        $item->attachments = array_values($attachments);
        $item->revision_attachments = array_values($revisionAttachments);
        return $item;
    });

    $getPelaksanaLabel = function ($item) {
        $workType = strtolower(trim((string) ($item->work_type ?? '')));
        if ($workType === 'internal') return 'Internal';
        if ($workType === 'vendor') return 'Vendor';
        return '-';
    };

    $getPelaksanaClass = function ($item) {
        $workType = strtolower(trim((string) ($item->work_type ?? '')));
        if ($workType === 'internal') return 'pu-badge-internal';
        if ($workType === 'vendor') return 'pu-badge-vendor';
        return 'pu-badge-muted';
    };
@endphp

    <div class="card pu-table-card">
        <div class="card-header pb-3">
            <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center">
                <h5 class="mb-1">Daftar Pekerjaan</h5>
            </div>
        </div>
        <div class="table-responsive">
            <table id="petugas-pekerjaan-table" class="table pu-table align-items-center mb-0">
                <thead class="thead-light pu-thead-teal">
                    <tr>
                        <th class="text-xs text-center">Aksi</th>
                        <th class="text-xs">Tanggal Pengajuan</th>
                        <th class="text-xs">Area</th>
                        <th class="text-xs">Deskripsi</th>
                        <th class="text-xs">Pelaksana</th>
                        <th class="text-xs">Status</th>
                        <th class="text-xs">Catatan Revisi</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($nonPeriodicItems as $detail)
                        @php
                            $rawStatus = $detail->request_status ?? '';
                            $status = strtolower($rawStatus);
                            if (in_array($status, ['approved'], true)) {
                                $status = 'review';
                            } elseif ($status === 'reject') {
                                $status = 'rejected';
                            } elseif (in_array($status, ['canceled', 'cancelled'], true)) {
                                $status = 'cancel';
                            }
                            $dateValue = $detail->created_at ?? $detail->tanggal ?? $detail->date ?? null;
                            $displayDate = $dateValue
                                ? \Illuminate\Support\Carbon::parse($dateValue)->format('d-m-Y')
                                : '-';
                        @endphp
                        <tr>
                            <td class="text-center">
                                <div class="btn-group" role="group" aria-label="Aksi Pekerjaan">
                                    @php
                                        $fmtEst = fn($v) => $v ? \Illuminate\Support\Carbon::parse($v)->format('d-m-Y') : '-';
                                    @endphp
                                    <button class="btn btn-info btn-sm mb-0 px-3" type="button"
                                        data-bs-toggle="modal" data-bs-target="#petugasDetailModal"
                                        data-tanggal="{{ $displayDate }}"
                                        data-status="{{ $status }}"
                                        data-area="{{ $detail->area_name ?? $detail->area ?? $detail->area_id ?? '-' }}"
                                        data-deskripsi="{{ $detail->job_description ?? $detail->description ?? '-' }}"
                                        data-attachments="{{ json_encode($detail->attachments ?? []) }}"
                                        data-revision-attachments="{{ json_encode($detail->revision_attachments ?? []) }}"
                                        data-catatan="{{ data_get($detail, 'requester_note') ?? '-' }}"
                                        data-pengadaan-start="{{ $fmtEst($detail->pengadaan_estimated_started_at ?? null) }}"
                                        data-pengadaan-end="{{ $fmtEst($detail->pengadaan_estimated_ended_at ?? null) }}"
                                        data-pengerjaan-start="{{ $fmtEst($detail->pengerjaan_estimated_started_at ?? null) }}"
                                        data-pengerjaan-end="{{ $fmtEst($detail->pengerjaan_estimated_ended_at ?? null) }}">
                                        <i class="fas fa-eye"></i><span class="font-weight-bold"> Detail</span>
                                    </button>
                                    @if ($status !== 'pengadaan')
                                        <button class="btn btn-primary btn-sm mb-0 px-3" type="button"
                                            data-bs-toggle="modal" data-bs-target="#petugasCompleteModal"
                                            data-non-periodic-id="{{ $detail->id }}"
                                            data-description="{{ $detail->job_description ?? $detail->description ?? '' }}"
                                            onclick="document.getElementById('petugas-non-periodic-id').value='{{ $detail->id }}'; document.getElementById('petugas-job-description').value='{{ addslashes($detail->job_description ?? $detail->description ?? '') }}';">
                                            <i class="fas fa-check"></i><span class="font-weight-bold"> Selesai</span>
                                        </button>
                                    @else
                                        <button class="btn btn-secondary btn-sm mb-0 px-3" type="button" disabled title="Menunggu pengerjaan">
                                            <i class="fas fa-check"></i><span class="font-weight-bold"> Selesai</span>
                                        </button>
                                    @endif
                                </div>
                            </td>
                            <td class="text-sm">{{ $displayDate }}</td>
                            <td class="text-sm">{{ $detail->area_name ?? $detail->area ?? $detail->area_id ?? '-' }}</td>
                            <td class="text-sm">{{ $detail->job_description ?? $detail->description ?? '-' }}</td>
                            <td class="text-sm">
                                <span class="badge {{ $getPelaksanaClass($detail) }}">
                                    {{ $getPelaksanaLabel($detail) }}
                                </span>
                            </td>
                            <td class="text-sm">
                                @php
                                    $statusNormalized = strtolower(trim($status ?? ''));
                                    $badgeClass = 'status-badge status-' . ($statusNormalized ?: 'pending');
                                    $statusLabel = $statusNormalized ? ucfirst($statusNormalized) : 'Pending';
                                @endphp
                                <span class="{{ $badgeClass }}">{{ $statusLabel }}</span>
                            </td>
                            <td class="text-sm">
                                @php
                                    $requesterNote = data_get($detail, 'requester_note');
                                @endphp
                                @if($status === 'revisi' && !empty($requesterNote))
                                    <small class="text-muted">{{ $requesterNote }}</small>
                                @else
                                    <span class="text-muted">-</span>
                                @endif
                            </td>
                        </tr>
                    @empty
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
@php
    $petugasList = \Illuminate\Support\Facades\DB::table('ms_employee')
        ->where('is_active', '1')
        ->where('role', 'ptgspu')
        ->whereNotNull('nama')
        ->whereRaw("TRIM(nama) <> ''")
        ->orderBy('nama')
        ->pluck('nama')
        ->filter(fn ($nama) => is_string($nama) && trim($nama) !== '')
        ->unique()
        ->values();
@endphp
<div class="modal fade" id="petugasCompleteModal" tabindex="-1" aria-labelledby="petugasCompleteLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <form method="POST" action="{{ route('work-schedule.complete') }}" enctype="multipart/form-data">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title" id="petugasCompleteLabel">Konfirmasi Pekerjaan</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    @if ($errors->any())
                        <div class="alert alert-danger">
                            <ul class="mb-0">
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif
                    <input type="hidden" name="non_periodic_id" id="petugas-non-periodic-id">
                    <div class="mb-3">
                        <label class="form-label">Pekerjaan <span style="color:red">*</span></label>
                        <input type="text" class="form-control" id="petugas-job-description" readonly>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Nama Petugas (bisa lebih dari 1) <span style="color:red">*</span></label>
                        <div id="petugas-names-container">
                            <div class="petugas-input-wrapper d-flex gap-2 mb-2">
                                <select class="form-select petugas-name-input" name="petugas_names[]">
                                    <option value="">-- Pilih Petugas --</option>
                                    @foreach($petugasList as $ptg)
                                        <option value="{{ $ptg }}">{{ $ptg }}</option>
                                    @endforeach
                                </select>
                                <button class="btn btn-danger btn-remove-petugas d-none" type="button" style="white-space:nowrap;">
                                    <i class="fas fa-trash-alt"></i>
                                </button>
                            </div>
                        </div>
                        <button type="button" class="btn btn-sm btn-outline-primary" id="btn-add-petugas">
                            <i class="fas fa-plus"></i> Tambah Petugas
                        </button>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Tanggal Selesai Pengerjaan <span style="color:red">*</span></label>
                        <input type="datetime-local" class="form-control" name="pengerjaan_ended_at" id="pengerjaan-ended-at">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Dokumentasi (bisa pilih lebih dari 1 file) <span style="color:red">*</span></label>
                        <input type="file" class="form-control" name="documentation[]" required multiple
                            accept=".jpg,.jpeg,.png,.pdf">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Keterangan</label>
                        <textarea class="form-control" name="description" rows="3"
                            placeholder="Keterangan pekerjaan"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary">Simpan</button>
                </div>
            </form>
        </div>
    </div>
</div>
<div class="modal fade" id="petugasDetailModal" tabindex="-1" aria-labelledby="petugasDetailLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="petugasDetailLabel">Detail Pengajuan</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="mb-2">
                    <label class="form-label text-xs text-uppercase mb-1">Tanggal Pengajuan</label>
                    <input type="text" class="form-control" id="petugas-detail-tanggal" readonly>
                </div>
                <div class="mb-2">
                    <label class="form-label text-xs text-uppercase mb-1">Area</label>
                    <input type="text" class="form-control" id="petugas-detail-area" readonly>
                </div>
                <div class="mb-2">
                    <label class="form-label text-xs text-uppercase mb-1">Deskripsi</label>
                    <textarea class="form-control" id="petugas-detail-deskripsi" rows="3" readonly></textarea>
                </div>
                <div class="mb-2">
                    <label class="form-label text-xs text-uppercase mb-1">Lampiran Pengajuan</label>
                    <div id="petugas-detail-attachments" class="d-flex flex-wrap gap-2" style="max-height: 300px; overflow-y: auto;">
                        <p class="text-muted text-sm mb-0">Belum ada lampiran.</p>
                    </div>
                </div>
                <div class="mb-2">
                    <label class="form-label text-xs text-uppercase mb-1">Lampiran Revisi</label>
                    <div id="petugas-detail-revision-attachments" class="d-flex flex-wrap gap-2" style="max-height: 300px; overflow-y: auto;">
                        <p class="text-muted text-sm mb-0">Belum ada lampiran revisi.</p>
                    </div>
                </div>
                <div class="mb-2 petugas-detail-est-pengadaan" style="display:none;">
                    <label class="form-label text-xs text-uppercase mb-1 text-warning fw-bold">
                        <i class="fas fa-shopping-cart me-1"></i>Estimasi Pengadaan
                    </label>
                    <div class="row g-2">
                        <div class="col-6">
                            <label class="form-label text-xs mb-1">Mulai</label>
                            <input type="text" class="form-control" id="petugas-detail-pengadaan-start" readonly>
                        </div>
                        <div class="col-6">
                            <label class="form-label text-xs mb-1">Selesai</label>
                            <input type="text" class="form-control" id="petugas-detail-pengadaan-end" readonly>
                        </div>
                    </div>
                </div>
                <div class="mb-2 petugas-detail-est-pengerjaan" style="display:none;">
                    <label class="form-label text-xs text-uppercase mb-1 text-primary fw-bold">
                        <i class="fas fa-tools me-1"></i>Estimasi Pengerjaan
                    </label>
                    <div class="row g-2">
                        <div class="col-6">
                            <label class="form-label text-xs mb-1">Mulai</label>
                            <input type="text" class="form-control" id="petugas-detail-pengerjaan-start" readonly>
                        </div>
                        <div class="col-6">
                            <label class="form-label text-xs mb-1">Selesai</label>
                            <input type="text" class="form-control" id="petugas-detail-pengerjaan-end" readonly>
                        </div>
                    </div>
                </div>
                <div class="mb-0">
                    <label class="form-label text-xs text-uppercase mb-1">Catatan Revisi</label>
                    <textarea class="form-control" id="petugas-detail-catatan" rows="3" readonly></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
            </div>
        </div>
    </div>
</div>
<!-- Image Preview Modal -->
<div class="modal fade" id="previewImageModal" tabindex="-1" aria-labelledby="previewImageLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="previewImageLabel">Preview Lampiran</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body text-center" style="background-color: #f8f9fa;">
                <img id="previewImage" src="" alt="Preview" style="max-width: 100%; max-height: 500px; border-radius: 4px;">
            </div>
            <div class="modal-footer">
                <a id="downloadImageBtn" href="" download class="btn btn-primary">
                    <i class="fas fa-download"></i> Download
                </a>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
            </div>
        </div>
    </div>
</div>
@push('js')
    <script>
        const petugasCompleteModal = document.getElementById('petugasCompleteModal');
        if (petugasCompleteModal) {
            petugasCompleteModal.addEventListener('show.bs.modal', function(event) {
                const button = event.relatedTarget;
                const nonPeriodicId = button.getAttribute('data-non-periodic-id') || '';
                const description = button.getAttribute('data-description') || '';

                const inputNonPeriodic = document.getElementById('petugas-non-periodic-id');
                const inputDesc = document.getElementById('petugas-job-description');

                if (inputNonPeriodic) inputNonPeriodic.value = nonPeriodicId;
                if (inputDesc) inputDesc.value = description;
            });
        }

        const petugasDetailModal = document.getElementById('petugasDetailModal');
        if (petugasDetailModal) {
            petugasDetailModal.addEventListener('show.bs.modal', function(event) {
                const button = event.relatedTarget;
                const tanggal = button.getAttribute('data-tanggal') || '-';
                const status = (button.getAttribute('data-status') || '').toLowerCase().trim();
                const area = button.getAttribute('data-area') || '-';
                const deskripsi = button.getAttribute('data-deskripsi') || '-';
                const attachmentsJson = button.getAttribute('data-attachments') || '[]';
                const revisionAttachmentsJson = button.getAttribute('data-revision-attachments') || '[]';
                const catatan = button.getAttribute('data-catatan') || '-';
                const pengadaanStart = button.getAttribute('data-pengadaan-start') || '-';
                const pengadaanEnd   = button.getAttribute('data-pengadaan-end')   || '-';
                const pengerjaanStart = button.getAttribute('data-pengerjaan-start') || '-';
                const pengerjaanEnd   = button.getAttribute('data-pengerjaan-end')   || '-';

                const inputTanggal = document.getElementById('petugas-detail-tanggal');
                const inputArea = document.getElementById('petugas-detail-area');
                const inputDeskripsi = document.getElementById('petugas-detail-deskripsi');
                const inputAttachments = document.getElementById('petugas-detail-attachments');
                const inputRevisionAttachments = document.getElementById('petugas-detail-revision-attachments');
                const inputCatatan = document.getElementById('petugas-detail-catatan');

                // Estimated date sections
                const estPengadaanSection  = document.querySelector('.petugas-detail-est-pengadaan');
                const estPengerjaanSection = document.querySelector('.petugas-detail-est-pengerjaan');
                const inputPengadaanStart  = document.getElementById('petugas-detail-pengadaan-start');
                const inputPengadaanEnd    = document.getElementById('petugas-detail-pengadaan-end');
                const inputPengerjaanStart = document.getElementById('petugas-detail-pengerjaan-start');
                const inputPengerjaanEnd   = document.getElementById('petugas-detail-pengerjaan-end');

                // Hide both first, then show the relevant one
                if (estPengadaanSection)  estPengadaanSection.style.display  = 'none';
                if (estPengerjaanSection) estPengerjaanSection.style.display = 'none';

                if (status === 'pengadaan') {
                    if (estPengadaanSection) estPengadaanSection.style.display = '';
                    if (inputPengadaanStart) inputPengadaanStart.value = pengadaanStart;
                    if (inputPengadaanEnd)   inputPengadaanEnd.value   = pengadaanEnd;
                } else if (status === 'pengerjaan') {
                    if (estPengerjaanSection) estPengerjaanSection.style.display = '';
                    if (inputPengerjaanStart) inputPengerjaanStart.value = pengerjaanStart;
                    if (inputPengerjaanEnd)   inputPengerjaanEnd.value   = pengerjaanEnd;
                }

                if (inputTanggal) inputTanggal.value = tanggal;
                if (inputArea) inputArea.value = area;
                if (inputDeskripsi) inputDeskripsi.value = deskripsi;
                if (inputCatatan) inputCatatan.value = catatan;

                const renderAttachmentFiles = function(container, filesJson, emptyMessage) {
                    if (!container) {
                        return;
                    }
                    try {
                        const files = JSON.parse(filesJson || '[]');
                        container.innerHTML = '';

                        if (files.length === 0) {
                            container.innerHTML = '<p class="text-muted text-sm mb-0">' + emptyMessage + '</p>';
                        } else {
                            files.forEach(function(file) {
                                const fileUrl = @json(url('/attachment-file')) + '/' + String(file)
                                    .split('/')
                                    .map(encodeURIComponent)
                                    .join('/');
                                const isImage = /\.(jpg|jpeg|png|gif|webp|jfif|heic|heif)$/i.test(file);
                                const isPdf = /\.pdf$/i.test(file);

                                const thumbWrapper = document.createElement('div');
                                thumbWrapper.style.cssText = 'display:inline-flex;flex-direction:column;align-items:center;justify-content:center;width:150px;height:150px;border-radius:6px;border:1px solid #e9ecef;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.08);flex-shrink:0;';

                                if (isImage) {
                                    thumbWrapper.style.cursor = 'pointer';
                                    const img = document.createElement('img');
                                    img.src = fileUrl;
                                    img.alt = 'Lampiran';
                                    img.style.cssText = 'width:150px;height:150px;object-fit:cover;display:block;';
                                    thumbWrapper.appendChild(img);
                                    thumbWrapper.onclick = function() {
                                        const previewImg = document.getElementById('previewImage');
                                        const downloadBtn = document.getElementById('downloadImageBtn');
                                        if (previewImg) previewImg.src = fileUrl;
                                        if (downloadBtn) {
                                            downloadBtn.href = fileUrl;
                                            downloadBtn.download = file.split('/').pop();
                                        }
                                        const previewModal = new bootstrap.Modal(document.getElementById('previewImageModal'));
                                        previewModal.show();
                                    };
                                } else if (isPdf) {
                                    thumbWrapper.style.cssText += 'background:#fff5f5;border-color:#fca5a5;text-decoration:none;padding:8px;';
                                    const icon = document.createElement('i');
                                    icon.className = 'fas fa-file-pdf fa-3x text-danger mb-2';
                                    const label = document.createElement('span');
                                    label.style.cssText = 'word-break:break-all;max-height:32px;overflow:hidden;line-height:1.2;font-size:0.7rem;color:#dc3545;font-weight:600;text-align:center;padding:0 4px;';
                                    label.textContent = file.split('/').pop();
                                    thumbWrapper.appendChild(icon);
                                    thumbWrapper.appendChild(label);
                                    thumbWrapper.style.cursor = 'pointer';
                                    thumbWrapper.onclick = function() { window.open(fileUrl, '_blank'); };
                                }
                                container.appendChild(thumbWrapper);
                            });
                        }
                    } catch (e) {
                        container.innerHTML = '<p class="text-muted text-sm mb-0">' + emptyMessage + '</p>';
                    }
                };

                renderAttachmentFiles(inputAttachments, attachmentsJson, 'Belum ada lampiran.');
                renderAttachmentFiles(inputRevisionAttachments, revisionAttachmentsJson, 'Belum ada lampiran revisi.');
            });
        }

        // Handle adding and removing petugas names
        const btnAddPetugas = document.getElementById('btn-add-petugas');
        const petugasNamesContainer = document.getElementById('petugas-names-container');

        // Sync: disable already-selected values in all other dropdowns
        function syncPetugasDropdowns() {
            const allSelects = petugasNamesContainer.querySelectorAll('.petugas-name-input');
            const selectedValues = [];
            allSelects.forEach(function(sel) {
                if (sel.value) selectedValues.push(sel.value);
            });

            allSelects.forEach(function(sel) {
                const currentVal = sel.value;
                Array.from(sel.options).forEach(function(opt) {
                    if (opt.value === '') return; // skip placeholder
                    // Disable if selected by another dropdown
                    opt.disabled = selectedValues.includes(opt.value) && opt.value !== currentVal;
                });
            });

            // Hide "Tambah Petugas" button if all petugas already selected
            const totalPetugas = {{ count($petugasList) }};
            const usedCount = allSelects.length;
            if (btnAddPetugas) {
                btnAddPetugas.style.display = usedCount >= totalPetugas ? 'none' : '';
            }
        }

        function createPetugasSelect() {
            const newRow = document.createElement('div');
            newRow.className = 'petugas-input-wrapper d-flex gap-2 mb-2';
            newRow.innerHTML = `
                <select class="form-select petugas-name-input" name="petugas_names[]">
                    <option value="">-- Pilih Petugas --</option>
                    @foreach($petugasList as $ptg)
                        <option value="{{ $ptg }}">{{ $ptg }}</option>
                    @endforeach
                </select>
                <button class="btn btn-danger btn-remove-petugas" type="button" style="white-space:nowrap;">
                    <i class="fas fa-trash-alt"></i>
                </button>
            `;

            petugasNamesContainer.appendChild(newRow);

            const sel = newRow.querySelector('.petugas-name-input');
            const removeBtn = newRow.querySelector('.btn-remove-petugas');

            sel.addEventListener('change', function() {
                syncPetugasDropdowns();
            });

            removeBtn.addEventListener('click', function() {
                newRow.remove();
                updateRemoveButtonsVisibility();
                syncPetugasDropdowns();
            });

            updateRemoveButtonsVisibility();
            syncPetugasDropdowns();
        }

        if (btnAddPetugas) {
            btnAddPetugas.addEventListener('click', function() {
                createPetugasSelect();
            });
        }

        // Attach change + remove handlers to the initial (first) dropdown
        const firstSelect = petugasNamesContainer ? petugasNamesContainer.querySelector('.petugas-name-input') : null;
        if (firstSelect) {
            firstSelect.addEventListener('change', function() {
                syncPetugasDropdowns();
            });
        }
        const firstRemoveBtn = petugasNamesContainer ? petugasNamesContainer.querySelector('.btn-remove-petugas') : null;
        if (firstRemoveBtn) {
            firstRemoveBtn.addEventListener('click', function() {
                firstRemoveBtn.closest('.petugas-input-wrapper').remove();
                updateRemoveButtonsVisibility();
                syncPetugasDropdowns();
            });
        }

        // Function to update remove buttons visibility
        function updateRemoveButtonsVisibility() {
            const removeButtons = petugasNamesContainer ? petugasNamesContainer.querySelectorAll('.btn-remove-petugas') : [];
            removeButtons.forEach(function(btn) {
                btn.classList.toggle('d-none', removeButtons.length <= 1);
            });
        }

        // Reset modal state when it opens
        const petugasCompleteModalEl = document.getElementById('petugasCompleteModal');
        if (petugasCompleteModalEl) {
            petugasCompleteModalEl.addEventListener('show.bs.modal', function() {
                // Reset container to only one empty select
                if (petugasNamesContainer) {
                    petugasNamesContainer.innerHTML = `
                        <div class="petugas-input-wrapper d-flex gap-2 mb-2">
                            <select class="form-select petugas-name-input" name="petugas_names[]">
                                <option value="">-- Pilih Petugas --</option>
                                @foreach($petugasList as $ptg)
                                    <option value="{{ $ptg }}">{{ $ptg }}</option>
                                @endforeach
                            </select>
                            <button class="btn btn-danger btn-remove-petugas d-none" type="button" style="white-space:nowrap;">
                                <i class="fas fa-trash-alt"></i>
                            </button>
                        </div>
                    `;
                    // Re-attach handlers to fresh first row
                    const sel = petugasNamesContainer.querySelector('.petugas-name-input');
                    if (sel) sel.addEventListener('change', syncPetugasDropdowns);
                    const rmBtn = petugasNamesContainer.querySelector('.btn-remove-petugas');
                    if (rmBtn) rmBtn.addEventListener('click', function() {
                        rmBtn.closest('.petugas-input-wrapper').remove();
                        updateRemoveButtonsVisibility();
                        syncPetugasDropdowns();
                    });
                    if (btnAddPetugas) btnAddPetugas.style.display = '';
                }
            });
        }

        // Update remove buttons visibility on page load
        updateRemoveButtonsVisibility();
    </script>
    <script>
        if ($.fn.DataTable && !$.fn.DataTable.isDataTable('#petugas-pekerjaan-table')) {
            $('#petugas-pekerjaan-table').DataTable({
                pageLength: 10,
                ordering: true,
                info: true,
                searching: true,
                order: [[1, 'desc']],
                language: {
                    emptyTable: 'Belum ada pekerjaan non-periodic.'
                },
                columnDefs: [{
                    targets: 0,
                    orderable: false,
                    searchable: false
                }]
            });
        }
    </script>
@endpush