@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    @if (($dmenu ?? '') == 'trdper' || ($url_menu ?? '') == 'daftar-periodic-hrd' || request()->is('daftar-periodic-hrd/show/*'))
        @php
            $isPeriodicEditMode = request()->is('daftar-periodic-hrd/edit/*');
        @endphp
        <style>
                .periodic-page-wrap {
                    margin-top: 10px;
                }

                .periodic-card {
                    border-radius: 16px;
                    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
                    overflow: hidden;
                }

                .periodic-header {
                    background: linear-gradient(135deg, #eff6ff 0%, #fdf4ff 45%, #fef9c3 100%);
                    border-bottom: 2px solid #0ea5a5;
                    padding: 18px 20px 16px;
                }

                .periodic-header h4 {
                    margin: 0;
                    line-height: 1.35;
                }

                .periodic-table thead {
                    background: rgba(14, 165, 165, 0.2);
                }

                .periodic-table thead th {
                    font-weight: 600;
                    text-transform: uppercase;
                    font-size: 0.75rem;
                    letter-spacing: 0.06em;
                }

                .periodic-table tbody tr {
                    border-bottom: 1px solid #e2e8f0;
                }

                .btn-delete-row {
                    background: #ef4444;
                    border: none;
                    color: #fff;
                    width: 36px;
                    height: 36px;
                    border-radius: 10px;
                    font-weight: 700;
                }

                .btn-add-row {
                    background: #2563eb;
                    border: none;
                    color: #fff;
                    border-radius: 10px;
                    padding: 8px 16px;
                    font-weight: 600;
                }

                .btn-add-row:hover {
                    background: #1d4ed8;
                }

                .periodic-input {
                    background: #f1f5f9;
                    border: 1px solid #e2e8f0;
                    border-radius: 8px;
                    padding: 6px 10px;
                    font-size: 0.85rem;
                }

                .plan-dates-container {
                    max-height: 200px;
                    overflow-y: auto;
                    min-width: 150px;
                }

                .plan-dates-container .plan-date-input {
                    font-size: 0.85rem;
                }

                .periodic-note {
                    border-left: 4px solid #f59e0b;
                    background: #fffbeb;
                    color: #92400e;
                    border-radius: 10px;
                    padding: 10px 12px;
                    font-size: 0.85rem;
                }
            </style>
        @php
            $selectedYear = (int) $idencrypt;
            $headerRow = \Illuminate\Support\Facades\DB::table('tr_periodic_header')
                ->where('tahun', $selectedYear)
                ->where('is_active', '1')
                ->first();
            $keterangan = $headerRow->keterangan ?? 'Daftar Periodic HRD';
            $headerId = $headerRow->id ?? null;

            $detailRows = collect();
            if ($headerId) {
                $detailRows = \Illuminate\Support\Facades\DB::table('tr_periodic_detail')
                    ->leftJoin('ms_periodic', 'tr_periodic_detail.periodic_id', '=', 'ms_periodic.id')
                    ->leftJoin('ms_area', 'tr_periodic_detail.area_id', '=', 'ms_area.id')
                    ->leftJoin('users', 'tr_periodic_detail.worker_id', '=', 'users.id')
                    ->select(
                        'tr_periodic_detail.id',
                        'tr_periodic_detail.periodic_id',
                        'tr_periodic_detail.area_id',
                        'tr_periodic_detail.worker_id',
                        'tr_periodic_detail.periode',
                        'tr_periodic_detail.cycle',
                        'tr_periodic_detail.start_plan_date',
                        'ms_periodic.job_description',
                        'ms_area.nama_area as area_name',
                        \Illuminate\Support\Facades\DB::raw("CONCAT(users.firstname, ' ', COALESCE(users.lastname, '')) as worker_name")
                    )
                    ->where('tr_periodic_detail.header_id', $headerId)
                    ->where('tr_periodic_detail.is_active', '1')
                    ->orderBy('tr_periodic_detail.id')
                    ->get();
            }

            $periodics = \Illuminate\Support\Facades\DB::table('ms_periodic')
                ->select('ms_periodic.id', 'ms_periodic.job_description')
                ->where('ms_periodic.is_active', '1')
                ->orderBy('ms_periodic.job_description')
                ->get();

            $areas = \Illuminate\Support\Facades\DB::table('ms_area')
                ->orderBy('nama_area')
                ->get();

            // Build workers dropdown from all active roles with ptg prefix
            $petugasRoles = \Illuminate\Support\Facades\DB::table('sys_roles')
                ->where('isactive', '1')
                ->where('idroles', 'like', 'ptg%')
                ->orderBy('idroles')
                ->get(['idroles', 'name']);

            $activeUsers = \Illuminate\Support\Facades\DB::table('users')
                ->where('isactive', '1')
                ->select('id', 'idroles')
                ->orderBy('id')
                ->get();

            $workers = collect([]);
            foreach ($petugasRoles as $role) {
                $roleCode = strtolower(trim((string) $role->idroles));

                $matchedUser = $activeUsers->first(function ($user) use ($roleCode) {
                    $userRoles = array_map('trim', explode(',', strtolower((string) ($user->idroles ?? ''))));
                    return in_array($roleCode, $userRoles, true);
                });

                if ($matchedUser) {
                    $workers->push((object) [
                        'id' => $matchedUser->id,
                        'label' => !empty($role->name) ? $role->name : strtoupper(substr($roleCode, 3)),
                    ]);
                }
            }

            $dateRows = \Illuminate\Support\Facades\DB::table('tr_periodic_items')
                ->join('tr_periodic_detail', 'tr_periodic_items.detail_id', '=', 'tr_periodic_detail.id')
                ->select('tr_periodic_detail.id as detail_id', 'tr_periodic_items.planned_date', 'tr_periodic_items.realization_date')
                ->where('tr_periodic_detail.header_id', $headerId)
                ->where('tr_periodic_detail.is_active', '1')
                ->where('tr_periodic_items.is_active', '1')
                ->whereYear('tr_periodic_items.planned_date', $selectedYear)
                ->orderBy('tr_periodic_items.planned_date')
                ->get();
            $dateMap = [];
            foreach ($dateRows as $row) {
                $realizationDates = [];
                if (!empty($row->realization_date)) {
                    $decoded = json_decode($row->realization_date, true);
                    if (is_array($decoded)) {
                        $realizationDates = $decoded;
                    } else {
                        $realizationDates = [$row->realization_date];
                    }
                }
                $dateMap[$row->detail_id][] = [
                    'plan_date' => $row->planned_date,
                    'realization_date' => $realizationDates,
                ];
            }
        @endphp
        <div class="card shadow-lg mx-4">
            <div class="card-body p-3">
                <div class="row gx-4">
                    <div class="col-lg">
                        <div class="nav-wrapper">
                            {{-- button back --}}
                            <button class="btn btn-secondary mb-0" type="button" id="periodic-back">
                                <i class="fas fa-circle-left me-1"></i><span class="font-weight-bold">Kembali</span>
                            </button>
                            @if ($isPeriodicEditMode)
                                {{-- button save --}}
                                <button class="btn btn-primary mb-0 ms-1" type="button" id="periodic-save">
                                    <i class="fas fa-floppy-disk me-1"></i><span class="font-weight-bold">Simpan</span>
                                </button>
                            @elseif ($authorize->edit == '1')
                                <a class="btn btn-warning mb-0 ms-1" href="{{ URL::to($url_menu . '/edit/' . $selectedYear) }}">
                                    <i class="fas fa-edit me-1"></i><span class="font-weight-bold">Edit Jadwal</span>
                                </a>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="container-fluid py-4 periodic-page-wrap">
            <div class="card periodic-card mb-4">
                <div class="periodic-header">
                    <h4 class="mb-1">Daftar Periodic HRD</h4>
                </div>
                <div class="card-body">
                    <div class="row g-3 mb-4">
                        <div class="col-md-4">
                            <label class="form-label">Tahun</label>
                            <input type="text" class="form-control" id="periodic-year" value="{{ $selectedYear }}" readonly>
                        </div>
                        <div class="col-md-8">
                            <label class="form-label">Keterangan</label>
                            <input type="text" class="form-control" id="periodic-keterangan" value="{{ $keterangan }}" {{ $isPeriodicEditMode ? '' : 'readonly' }}>
                        </div>
                    </div>
                    <div class="periodic-note mb-3">
                        @if ($isPeriodicEditMode)
                            Anda dapat mengubah keterangan dan detail jadwal periodic.
                        @else
                            Gunakan tombol Edit Jadwal untuk mengubah keterangan atau detail jadwal.
                        @endif
                    </div>
                    <div class="table-responsive">
                        <table class="table periodic-table align-items-center mb-0">
                            <thead>
                                <tr>
                                    <th class="text-center" style="width: 90px;">Action</th>
                                    <th>No</th>
                                    <th>Area</th>
                                    <th>Pekerjaan</th>
                                    <th>Periode</th>
                                    <th>Cycle</th>
                                    <th>Start Rencana</th>
                                    <th>Rencana</th>
                                    <th>Realisasi</th>
                                    <th>Petugas</th>
                                </tr>
                            </thead>
                            <tbody id="periodic-detail-body">
                                @forelse ($detailRows as $detail)
                                    <tr data-id="{{ $detail->id }}">
                                        <td class="text-center">
                                            <button type="button" class="btn-delete-row" title="Hapus">
                                                X
                                            </button>
                                        </td>
                                        <td>{{ $loop->iteration }}</td>
                                        <td>
                                            <select class="form-select form-select-sm area-select">
                                                <option value="">Pilih Area</option>
                                                @foreach ($areas as $area)
                                                    <option value="{{ $area->id }}"
                                                        {{ $area->id == $detail->area_id ? 'selected' : '' }}>
                                                        {{ $area->nama_area ?? '-' }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </td>
                                        <td>
                                            <select class="form-select form-select-sm periodic-select">
                                                <option value="">Pilih Pekerjaan</option>
                                                @foreach ($periodics as $periodic)
                                                    <option value="{{ $periodic->id }}"
                                                        {{ $periodic->id == $detail->periodic_id ? 'selected' : '' }}>
                                                        {{ $periodic->job_description }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </td>
                                        <td>
                                            <select class="form-select form-select-sm periode-select">
                                                <option value="">Pilih</option>
                                                <option value="mingguan" {{ $detail->periode === 'mingguan' ? 'selected' : '' }}>Mingguan</option>
                                                <option value="bulanan" {{ $detail->periode === 'bulanan' ? 'selected' : '' }}>Bulanan</option>
                                                <option value="tahunan" {{ $detail->periode === 'tahunan' ? 'selected' : '' }}>Tahunan</option>
                                            </select>
                                        </td>
                                        <td>
                                            <input type="number" min="1" class="form-control form-control-sm cycle-input"
                                                value="{{ $detail->cycle ?? '' }}">
                                        </td>
                                        <td>
                                            <input type="date" class="form-control form-control-sm start-plan-date-input"
                                                value="{{ $detail->start_plan_date ?? '' }}">
                                        </td>
                                        <td>
                                            <button type="button" class="btn btn-sm btn-primary btn-plan-dates"
                                                data-periodic="{{ $detail->periodic_id ?? '' }}"
                                                data-cycle="{{ $detail->cycle ?? 0 }}">
                                                Detail
                                            </button>
                                            @php
                                                $existingDates = \Illuminate\Support\Facades\DB::table('tr_periodic_items')
                                                    ->where('detail_id', $detail->id)
                                                    ->orderBy('planned_date')
                                                    ->pluck('planned_date')
                                                    ->toArray();
                                            @endphp
                                            <input type="hidden" class="plan-dates-data" value="{{ json_encode($existingDates) }}">
                                        </td>
                                        <td>
                                            <button type="button" class="btn btn-sm btn-info btn-date-detail"
                                                data-type="realization" data-detail="{{ $detail->id ?? '' }}">
                                                Detail
                                            </button>
                                        </td>
                                        <td>
                                            <select class="form-select form-select-sm worker-select">
                                                <option value="">Pilih Petugas</option>
                                                @foreach ($workers as $worker)
                                                    <option value="{{ $worker->id }}"
                                                        {{ $worker->id == $detail->worker_id ? 'selected' : '' }}>
                                                        {{ $worker->label }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="10" class="text-center text-muted py-4">
                                            Belum ada jadwal kerja periodic.
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                    @if ($isPeriodicEditMode)
                        <div class="mt-3">
                            <button type="button" class="btn-add-row" id="periodic-add-row">+ Tambah</button>
                        </div>
                    @endif
                </div>
            </div>
        </div>
        <div class="modal fade" id="dateDetailModal" tabindex="-1" aria-labelledby="dateDetailLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="dateDetailLabel">Detail Tanggal</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <table class="table table-sm mb-0">
                            <thead>
                                <tr>
                                    <th>No</th>
                                    <th>Tanggal</th>
                                </tr>
                            </thead>
                            <tbody id="dateDetailBody">
                                <tr>
                                    <td colspan="2" class="text-center text-muted">Tidak ada data.</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- Modal for Plan Dates Input -->
        <div class="modal fade" id="planDatesModal" tabindex="-1" aria-labelledby="planDatesLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="planDatesLabel">Input Tanggal Rencana</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div id="planDatesInputContainer" class="mb-3">
                            <!-- Inputs will be generated here -->
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                        <button type="button" class="btn btn-primary" id="savePlanDates">Simpan</button>
                    </div>
                </div>
            </div>
        </div>

        @push('js')
            <script>
                const dateMap = @json($dateMap);
                const isPeriodicEditMode = @json($isPeriodicEditMode);
                const headerYearInput = document.getElementById('periodic-year');
                const headerDescriptionInput = document.getElementById('periodic-keterangan');
                let isDirty = false;

                const addRowButton = document.getElementById('periodic-add-row');
                const detailBody = document.getElementById('periodic-detail-body');
                const saveButton = document.getElementById('periodic-save');
                const backButton = document.getElementById('periodic-back');
                const periodicShowUrl = @json(url('daftar-periodic-hrd/show/' . $selectedYear));

                // Validation function to check if date year matches selected year
                function validateDateYearMatch(dateString, headerYear) {
                    if (!dateString) return true; // Empty is okay for validation
                    
                    const dateParts = dateString.split('-');
                    if (dateParts.length !== 3) return false;
                    
                    const dateYear = parseInt(dateParts[0], 10);
                    return dateYear === headerYear;
                }

                function validateAndAlertDateYear(dateString, headerYearValue) {
                    if (!dateString) return true;
                    
                    const dateParts = dateString.split('-');
                    if (dateParts.length !== 3) return false;
                    
                    const dateYear = parseInt(dateParts[0], 10);
                    if (dateYear !== headerYearValue) {
                        showAlert({
                            icon: 'warning',
                            title: 'Tanggal Tidak Sesuai',
                            text: `Tanggal harus sesuai dengan tahun jadwal (${headerYearValue}). Anda memasukkan tahun ${dateYear}.`
                        });
                        return false;
                    }
                    return true;
                }

                function reindexDetailRows() {
                    if (!detailBody) {
                        return;
                    }

                    const rows = Array.from(detailBody.querySelectorAll('tr'))
                        .filter((row) => !row.querySelector('td[colspan]'));

                    rows.forEach((row, index) => {
                        const noCell = row.querySelector('td:nth-child(2)');
                        if (noCell) {
                            noCell.textContent = index + 1;
                        }
                    });
                }

                function setDirty(value = true) {
                    isDirty = value;
                }

                function showAlert({
                    icon = 'warning',
                    title = 'Perhatian',
                    text = ''
                }) {
                    if (typeof Swal !== 'undefined') {
                        Swal.fire({
                            icon,
                            title,
                            text,
                            confirmButtonText: 'OK'
                        });
                        return;
                    }

                    alert(text || title);
                }

                function buildSelect(options, className, placeholder, value = '') {
                    const select = document.createElement('select');
                    select.className = `form-select form-select-sm ${className}`;
                    const defaultOption = document.createElement('option');
                    defaultOption.value = '';
                    defaultOption.textContent = placeholder;
                    select.appendChild(defaultOption);
                    options.forEach((opt) => {
                        const option = document.createElement('option');
                        option.value = opt.value;
                        option.textContent = opt.label;
                        if (opt.value === value) {
                            option.selected = true;
                        }
                        select.appendChild(option);
                    });
                    select.addEventListener('change', () => setDirty());
                    return select;
                }

                function buildInput(placeholder, className, type = 'text') {
                    const input = document.createElement('input');
                    input.type = type;
                    input.className = className;
                    input.placeholder = placeholder;
                    input.addEventListener('input', () => setDirty());
                    return input;
                }

                const periodicOptions = @json($periodics->map(fn($item) => ['value' => (string) $item->id, 'label' => $item->job_description]));
                const areaOptions = @json($areas->map(fn($item) => ['value' => (string) $item->id, 'label' => $item->nama_area]));
                const workerOptions = @json($workers->map(fn($item) => ['value' => (string) $item->id, 'label' => $item->label]));

                function updateRowPeriodic(row) {
                    const periodicSelect = row.querySelector('.periodic-select');
                    const buttons = row.querySelectorAll('.btn-date-detail');
                    if (!periodicSelect) {
                        return;
                    }
                    const detailId = row.dataset.id || '';
                    buttons.forEach((btn) => {
                        btn.dataset.detail = detailId;
                    });
                }

                function addDetailRow() {
                    if (!isPeriodicEditMode) {
                        return;
                    }

                    if (!detailBody) {
                        return;
                    }

                    const emptyRow = detailBody.querySelector('td[colspan]')?.closest('tr');
                    if (emptyRow) {
                        emptyRow.remove();
                    }

                    const row = document.createElement('tr');
                    row.innerHTML = `
                        <td class="text-center">
                            <button type="button" class="btn-delete-row" title="Hapus">X</button>
                        </td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    `;

                    const cells = row.querySelectorAll('td');
                    cells[1].textContent = '';

                    const areaSelect = buildSelect(areaOptions, 'area-select', 'Pilih Area');
                    const periodicSelect = buildSelect(periodicOptions, 'periodic-select', 'Pilih Pekerjaan');
                    const periodeSelect = buildSelect(
                        [
                            { value: 'mingguan', label: 'Mingguan' },
                            { value: 'bulanan', label: 'Bulanan' },
                            { value: 'tahunan', label: 'Tahunan' },
                        ],
                        'periode-select',
                        'Pilih'
                    );
                    const cycleInput = buildInput('Cycle', 'form-control form-control-sm cycle-input', 'number');
                    cycleInput.min = 1;
                    const startPlanDateInput = buildInput('', 'form-control form-control-sm start-plan-date-input', 'date');
                    const workerSelect = buildSelect(workerOptions, 'worker-select', 'Pilih Petugas');

                    const planButton = document.createElement('button');
                    planButton.type = 'button';
                    planButton.className = 'btn btn-sm btn-primary btn-plan-dates';
                    planButton.dataset.periodic = '';
                    planButton.dataset.cycle = '0';
                    planButton.textContent = 'Detail';

                    const planDatesHidden = document.createElement('input');
                    planDatesHidden.type = 'hidden';
                    planDatesHidden.className = 'plan-dates-data';
                    planDatesHidden.value = '[]';

                    const realizationButton = document.createElement('button');
                    realizationButton.type = 'button';
                    realizationButton.className = 'btn btn-sm btn-info btn-date-detail';
                    realizationButton.dataset.type = 'realization';
                    realizationButton.dataset.detail = '';
                    realizationButton.textContent = 'Detail';

                    cells[2].appendChild(areaSelect);
                    cells[3].appendChild(periodicSelect);
                    cells[4].appendChild(periodeSelect);
                    cells[5].appendChild(cycleInput);
                    cells[6].appendChild(startPlanDateInput);
                    cells[7].appendChild(planButton);
                    cells[7].appendChild(planDatesHidden);
                    cells[8].appendChild(realizationButton);
                    cells[9].appendChild(workerSelect);

                    const deleteButton = row.querySelector('.btn-delete-row');
                    deleteButton.addEventListener('click', () => handleDeleteRow(deleteButton));

                    periodicSelect.addEventListener('change', () => updateRowPeriodic(row));
                    
                    planButton.addEventListener('click', function() {
                        openPlanDatesModal(this);
                    });

                    attachAutoPlanDateListeners(row);

                    detailBody.appendChild(row);
                    reindexDetailRows();
                    setDirty();
                }

                async function handleDeleteRow(button) {
                    if (!isPeriodicEditMode) {
                        return;
                    }

                    const row = button.closest('tr');
                    if (!row) {
                        return;
                    }

                    const confirmation = typeof Swal !== 'undefined'
                        ? await Swal.fire({
                            title: 'Konfirmasi Hapus',
                            text: 'Yakin ingin menghapus baris ini?',
                            icon: 'warning',
                            showCancelButton: true,
                            confirmButtonText: 'Ya, Hapus',
                            cancelButtonText: 'Batal',
                            reverseButtons: true
                        })
                        : {
                            isConfirmed: confirm('Yakin ingin menghapus baris ini?')
                        };

                    if (!confirmation.isConfirmed) {
                        return;
                    }
                    const detailId = row.dataset.id;
                    if (!detailId) {
                        row.remove();
                        reindexDetailRows();
                        setDirty();
                        return;
                    }

                    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') ||
                        document.querySelector('input[name="_token"]')?.value;

                    fetch('{{ route("periodic-schedule.detail-delete") }}', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': csrfToken
                        },
                        body: JSON.stringify({
                            detail_id: detailId
                        })
                    })
                    .then((response) => response.json())
                    .then((data) => {
                        if (data.success) {
                            row.remove();
                            reindexDetailRows();
                        } else {
                            showAlert({
                                icon: 'error',
                                title: 'Gagal',
                                text: data.message || 'Gagal menghapus data.'
                            });
                        }
                    })
                    .catch((error) => {
                        console.error(error);
                        showAlert({
                            icon: 'error',
                            title: 'Terjadi Kesalahan',
                            text: 'Terjadi kesalahan saat menghapus data.'
                        });
                    });
                }

                function openDateModal(detailId, type) {
                    const modalBody = document.getElementById('dateDetailBody');
                    if (!modalBody) {
                        return;
                    }
                    modalBody.innerHTML = '';
                    const rows = dateMap[detailId] || [];
                    let list = [];

                    if (type === 'plan') {
                        list = rows.map((row) => row.plan_date).filter((date) => !!date);
                    } else {
                        rows.forEach((row) => {
                            if (row.realization_date) {
                                if (Array.isArray(row.realization_date)) {
                                    list.push(...row.realization_date);
                                } else {
                                    list.push(row.realization_date);
                                }
                            }
                        });
                        list = list.filter((date) => !!date);
                    }

                    if (list.length === 0) {
                        modalBody.innerHTML = '<tr><td colspan="2" class="text-center text-muted">Tidak ada data.</td></tr>';
                    } else {
                        list.forEach((date, index) => {
                            const tr = document.createElement('tr');
                            const dateValue = new Date(date);
                            const formatted = isNaN(dateValue) ? date : dateValue.toLocaleDateString('id-ID');
                            tr.innerHTML = `
                                <td>${index + 1}</td>
                                <td>${formatted}</td>
                            `;
                            modalBody.appendChild(tr);
                        });
                    }

                    const modalTitle = document.getElementById('dateDetailLabel');
                    if (modalTitle) {
                        modalTitle.textContent = type === 'plan' ? 'Detail Rencana' : 'Detail Realisasi';
                    }
                    const modalInstance = new bootstrap.Modal(document.getElementById('dateDetailModal'));
                    modalInstance.show();
                }

                let currentPlanDatesRow = null;

                function parseIsoDate(isoDate) {
                    if (!isoDate || typeof isoDate !== 'string') {
                        return null;
                    }
                    const parts = isoDate.split('-').map((part) => parseInt(part, 10));
                    if (parts.length !== 3 || parts.some((part) => Number.isNaN(part))) {
                        return null;
                    }
                    const [year, month, day] = parts;
                    return new Date(year, month - 1, day);
                }

                function formatIsoDate(date) {
                    const year = date.getFullYear();
                    const month = String(date.getMonth() + 1).padStart(2, '0');
                    const day = String(date.getDate()).padStart(2, '0');
                    return `${year}-${month}-${day}`;
                }

                function advanceOnePeriodDate(currentDate, periode) {
                    const nextDate = new Date(currentDate);

                    if (periode === 'mingguan') {
                        nextDate.setDate(nextDate.getDate() + 7);
                        return nextDate;
                    }

                    if (periode === 'bulanan') {
                        nextDate.setMonth(nextDate.getMonth() + 1);
                        return nextDate;
                    }

                    nextDate.setFullYear(nextDate.getFullYear() + 1);
                    return nextDate;
                }

                function generatePlanDatesFromRow(row) {
                    const cycle = parseInt(row.querySelector('.cycle-input')?.value, 10) || 0;
                    const startPlanDate = row.querySelector('.start-plan-date-input')?.value || '';
                    const periode = row.querySelector('.periode-select')?.value || '';

                    if (cycle <= 0 || !startPlanDate || !periode) {
                        return [];
                    }

                    const seedDate = parseIsoDate(startPlanDate);
                    if (!seedDate || Number.isNaN(seedDate.getTime())) {
                        return [];
                    }

                    if (periode === 'tahunan') {
                        const generated = [];
                        const weekOrdinal = Math.ceil(seedDate.getDate() / 7);
                        const dayOfWeek = seedDate.getDay();
                        const scheduleYear = seedDate.getFullYear();
                        const remainingMonths = 12 - seedDate.getMonth();

                        for (let index = 0; index < cycle; index++) {
                            const monthOffset = Math.floor((index * remainingMonths) / cycle);
                            const targetMonth = new Date(scheduleYear, seedDate.getMonth() + monthOffset, 1);

                            if (targetMonth.getFullYear() !== scheduleYear) {
                                break;
                            }

                            const daysUntilSameWeekday = (dayOfWeek - targetMonth.getDay() + 7) % 7;
                            const candidate = new Date(
                                targetMonth.getFullYear(),
                                targetMonth.getMonth(),
                                1 + daysUntilSameWeekday + ((weekOrdinal - 1) * 7)
                            );

                            if (candidate.getMonth() !== targetMonth.getMonth()) {
                                candidate.setDate(candidate.getDate() - 7);
                            }

                            if (candidate >= seedDate) {
                                generated.push(formatIsoDate(candidate));
                            }
                        }

                        return generated;
                    }

                    const currentBlockStart = new Date(seedDate);
                    const blockEnd = new Date(currentBlockStart);

                    // Bulanan harus tetap dalam bulan yang sama, tidak meluber ke bulan berikutnya.
                    if (periode === 'bulanan') {
                        blockEnd.setMonth(blockEnd.getMonth() + 1, 0);
                    } else if (periode === 'tahunan') {
                        blockEnd.setMonth(11, 31);
                    } else {
                        blockEnd.setDate(blockEnd.getDate() + 6);
                    }

                    const diffMs = blockEnd.getTime() - currentBlockStart.getTime();
                    const blockLengthInDays = Math.max(1, Math.floor(diffMs / (1000 * 60 * 60 * 24)) + 1);
                    const generated = [];

                    const dayOfWeek = currentBlockStart.getDay(); // 0: Minggu, 1: Senin, ...
                    const remainingDaysInThisWeek = ((7 - dayOfWeek) % 7) + 1;
                    const shouldKeepSameWeek =
                        periode === 'mingguan' &&
                        cycle <= remainingDaysInThisWeek;

                    // Match backend logic: cycle is frequency within one period window.
                    for (let index = 0; index < cycle; index++) {
                        let offset = 0;
                        if (periode === 'bulanan' && [2, 4].includes(cycle)) {
                            // Cycle 2 berjarak 14 hari; cycle 4 berjarak 7 hari.
                            offset = index * (28 / cycle);
                        } else if (shouldKeepSameWeek) {
                            // Keep dates in the same week and spread them across remaining days.
                            offset = Math.floor((index * remainingDaysInThisWeek) / cycle);
                            if (offset >= remainingDaysInThisWeek) {
                                offset = remainingDaysInThisWeek - 1;
                            }
                        } else {
                            offset = Math.floor((index * blockLengthInDays) / cycle);
                            if (offset >= blockLengthInDays) {
                                offset = blockLengthInDays - 1;
                            }
                        }

                        const candidate = new Date(currentBlockStart);
                        candidate.setDate(candidate.getDate() + offset);
                        if (candidate <= blockEnd) {
                            generated.push(formatIsoDate(candidate));
                        }
                    }

                    return generated;
                }

                function setPlanDatesForRow(row, dates) {
                    const planDatesData = row.querySelector('.plan-dates-data');
                    if (planDatesData) {
                        const nextValue = JSON.stringify(dates);
                        const changed = planDatesData.value !== nextValue;
                        planDatesData.value = nextValue;
                        return changed;
                    }
                    return false;
                }

                function getWeeklyAndYearlyCycleError(periode, cycle, startPlanDate) {
                    const startDate = parseIsoDate(startPlanDate);
                    if (!startDate || cycle <= 0) return null;

                    if (periode === 'mingguan') {
                        const remainingDays = ((7 - startDate.getDay()) % 7) + 1;
                        if (cycle > remainingDays) {
                            return `Cycle ${cycle} tidak muat dari tanggal mulai sampai akhir minggu. Pilih tanggal mulai lebih awal.`;
                        }
                    }

                    if (periode === 'tahunan') {
                        const remainingMonths = 12 - startDate.getMonth();
                        if (cycle > remainingMonths) {
                            const monthNames = [
                                'Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni',
                                'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'
                            ];
                            const latestStartMonth = Math.max(0, 12 - cycle);
                            return `Cycle ${cycle} membutuhkan ${cycle} bulan pelaksanaan, sedangkan dari ${monthNames[startDate.getMonth()]} ${startDate.getFullYear()} sampai Desember hanya tersedia ${remainingMonths} bulan. Kurangi cycle atau pilih Start Rencana paling lambat ${monthNames[latestStartMonth]} ${startDate.getFullYear()}.`;
                        }
                    }

                    return null;
                }

                function syncModalPlanDatesToRow() {
                    if (!currentPlanDatesRow) {
                        return;
                    }
                    const inputs = document.querySelectorAll('.plan-date-input-modal');
                    const dates = Array.from(inputs).map((input) => input.value);
                    const changed = setPlanDatesForRow(currentPlanDatesRow, dates);
                    if (changed) {
                        setDirty();
                    }
                }

                function attachAutoPlanDateListeners(row) {
                    const autoGenerateHandler = (markDirty = false) => {
                        const generated = generatePlanDatesFromRow(row);
                        if (generated.length > 0) {
                            const changed = setPlanDatesForRow(row, generated);
                            if (markDirty && changed) {
                                setDirty();
                            }
                        }
                    };

                    const startDateInput = row.querySelector('.start-plan-date-input');
                    const cycleInput = row.querySelector('.cycle-input');
                    const periodeSelect = row.querySelector('.periode-select');

                    cycleInput?.addEventListener('input', () => autoGenerateHandler(true));
                    startDateInput?.addEventListener('input', () => autoGenerateHandler(true));
                    cycleInput?.addEventListener('change', () => autoGenerateHandler(true));
                    startDateInput?.addEventListener('change', function() {
                        const headerYear = parseInt(headerYearInput.value, 10);
                        validateAndAlertDateYear(this.value, headerYear);
                        autoGenerateHandler(true);
                    });
                    periodeSelect?.addEventListener('change', () => autoGenerateHandler(true));

                    autoGenerateHandler(false);
                }

                function openPlanDatesModal(button) {
                    const row = button.closest('tr');
                    currentPlanDatesRow = row;
                    
                    const cycleInput = row.querySelector('.cycle-input');
                    const cycle = parseInt(cycleInput?.value) || 0;
                    const periode = row.querySelector('.periode-select')?.value || '';
                    
                    if (cycle === 0) {
                        showAlert({
                            icon: 'warning',
                            title: 'Cycle Tidak Valid',
                            text: 'Cycle harus lebih dari 0.'
                        });
                        return;
                    }

                    const capacityError = getWeeklyAndYearlyCycleError(
                        periode,
                        cycle,
                        row.querySelector('.start-plan-date-input')?.value || ''
                    );
                    if (capacityError) {
                        showAlert({ icon: 'warning', title: 'Jadwal Tidak Dapat Dibuat', text: capacityError });
                        return;
                    }

                    const planDatesData = row.querySelector('.plan-dates-data');
                    let existingDates = [];
                    try {
                        existingDates = JSON.parse(planDatesData?.value || '[]');
                    } catch (e) {
                        existingDates = [];
                    }

                    const generatedDates = generatePlanDatesFromRow(row);
                    if (existingDates.length === 0 && generatedDates.length > 0) {
                        existingDates = generatedDates;
                        setPlanDatesForRow(row, generatedDates);
                    }

                    const container = document.getElementById('planDatesInputContainer');
                    container.innerHTML = '';
                    const headerYear = parseInt(headerYearInput.value, 10);

                    const inputCount = cycle;

                    for (let i = 0; i < inputCount; i++) {
                        const formGroup = document.createElement('div');
                        formGroup.className = 'mb-2';
                        
                        const label = document.createElement('label');
                        label.className = 'form-label';
                        label.textContent = `Tanggal ${i + 1}`;
                        
                        const input = document.createElement('input');
                        input.type = 'date';
                        input.className = 'form-control plan-date-input-modal';
                        input.value = existingDates[i] || generatedDates[i] || '';
                        input.addEventListener('input', syncModalPlanDatesToRow);
                        input.addEventListener('change', function() {
                            validateAndAlertDateYear(this.value, headerYear);
                            syncModalPlanDatesToRow();
                        });
                        
                        formGroup.appendChild(label);
                        formGroup.appendChild(input);
                        container.appendChild(formGroup);
                    }

                    const modalInstance = new bootstrap.Modal(document.getElementById('planDatesModal'));
                    modalInstance.show();
                }

                document.getElementById('savePlanDates')?.addEventListener('click', function() {
                    if (!currentPlanDatesRow) return;

                    syncModalPlanDatesToRow();

                    const modalElement = document.getElementById('planDatesModal');
                    const modalInstance = bootstrap.Modal.getInstance(modalElement);
                    modalInstance.hide();
                });

                document.getElementById('planDatesModal')?.addEventListener('hidden.bs.modal', function() {
                    syncModalPlanDatesToRow();
                    currentPlanDatesRow = null;
                });

                function collectDetails() {
                    const rows = Array.from(detailBody.querySelectorAll('tr'))
                        .filter((row) => !row.querySelector('td[colspan]'));
                    return rows.map((row) => {
                        const detailId = row.dataset.id || null;
                        const periodicId = row.querySelector('.periodic-select')?.value || '';
                        const areaId = row.querySelector('.area-select')?.value || '';
                        const workerId = row.querySelector('.worker-select')?.value || null;
                        const periode = row.querySelector('.periode-select')?.value || '';
                        const cycle = row.querySelector('.cycle-input')?.value || '';
                        const startPlanDate = row.querySelector('.start-plan-date-input')?.value || '';
                        
                        const planDatesData = row.querySelector('.plan-dates-data');
                        let planDates = [];
                        try {
                            planDates = JSON.parse(planDatesData?.value || '[]').filter(date => date !== '');
                        } catch (e) {
                            planDates = [];
                        }
                        
                        return {
                            id: detailId,
                            periodic_id: periodicId,
                            area_id: areaId,
                            worker_id: workerId,
                            periode: periode,
                            cycle: cycle,
                            start_plan_date: startPlanDate || null,
                            plan_dates: planDates
                        };
                    });
                }

                function saveDetails() {
                    const details = collectDetails();
                    if (details.length === 0) {
                        showAlert({
                            icon: 'warning',
                            title: 'Data Belum Lengkap',
                            text: 'Detail harus diisi minimal 1 baris.'
                        });
                        return;
                    }

                    const headerYear = headerYearInput ? parseInt(headerYearInput.value, 10) : null;
                    if (!headerYear || Number.isNaN(headerYear)) {
                        showAlert({
                            icon: 'warning',
                            title: 'Tahun Tidak Valid',
                            text: 'Tahun tidak valid.'
                        });
                        return;
                    }

                    // Validate that all start dates match the header year
                    for (const detail of details) {
                        const capacityError = getWeeklyAndYearlyCycleError(
                            detail.periode,
                            parseInt(detail.cycle, 10),
                            detail.start_plan_date
                        );
                        if (capacityError) {
                            showAlert({ icon: 'warning', title: 'Jadwal Tidak Dapat Dibuat', text: capacityError });
                            return;
                        }

                        if (detail.start_plan_date && !validateDateYearMatch(detail.start_plan_date, headerYear)) {
                            const dateParts = detail.start_plan_date.split('-');
                            const dateYear = parseInt(dateParts[0], 10);
                            showAlert({
                                icon: 'warning',
                                title: 'Tanggal Tidak Sesuai',
                                text: `Tanggal start rencana harus sesuai dengan tahun jadwal (${headerYear}). Anda memasukkan tahun ${dateYear}.`
                            });
                            return;
                        }
                        // Validate plan dates too
                        if (detail.plan_dates && Array.isArray(detail.plan_dates)) {
                            for (const planDate of detail.plan_dates) {
                                if (planDate && !validateDateYearMatch(planDate, headerYear)) {
                                    const dateParts = planDate.split('-');
                                    const dateYear = parseInt(dateParts[0], 10);
                                    showAlert({
                                        icon: 'warning',
                                        title: 'Tanggal Tidak Sesuai',
                                        text: `Semua tanggal rencana harus sesuai dengan tahun jadwal (${headerYear}). Anda memasukkan tahun ${dateYear}.`
                                    });
                                    return;
                                }
                            }
                        }
                    }

                    const invalid = details.find((item) => !item.periodic_id || !item.area_id || !item.worker_id || !item.periode || !item.cycle || !item.start_plan_date);
                    if (invalid) {
                        showAlert({
                            icon: 'warning',
                            title: 'Lengkapi Data',
                            text: 'Lengkapi data: Pekerjaan, Area, Petugas, Periode, Cycle, dan Start Rencana.'
                        });
                        return;
                    }

                    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') ||
                        document.querySelector('input[name="_token"]')?.value;

                    const headerDescription = headerDescriptionInput ? headerDescriptionInput.value : '';

                    fetch('{{ route("periodic-schedule.bulk-save") }}', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': csrfToken
                        },
                        body: JSON.stringify({
                            tahun: headerYear,
                            keterangan: headerDescription,
                            details: details
                        })
                    })
                    .then((response) => response.json())
                    .then((data) => {
                        if (data.success) {
                            setDirty(false);
                            if (typeof Swal !== 'undefined') {
                                Swal.fire({
                                    icon: 'success',
                                    title: 'Berhasil',
                                    text: data.message || 'Data berhasil tersimpan.',
                                    confirmButtonText: 'OK'
                                }).then(() => {
                                        window.location.replace(periodicShowUrl);
                                });
                            } else {
                                alert(data.message || 'Data berhasil tersimpan.');
                                    window.location.replace(periodicShowUrl);
                            }
                        } else {
                            showAlert({
                                icon: 'error',
                                title: 'Gagal Menyimpan',
                                text: data.message || 'Gagal menyimpan data.'
                            });
                        }
                    })
                    .catch((error) => {
                        console.error(error);
                        showAlert({
                            icon: 'error',
                            title: 'Terjadi Kesalahan',
                            text: 'Terjadi kesalahan saat menyimpan data.'
                        });
                    });
                }

                function confirmLeave(event) {
                    if (!isDirty) {
                        return true;
                    }
                    const message = 'Perubahan belum disimpan. Tetap keluar?';
                    if (event) {
                        event.preventDefault();
                        event.returnValue = message;
                    }
                    return message;
                }

                if (addRowButton) {
                    addRowButton.addEventListener('click', addDetailRow);
                }

                reindexDetailRows();

                if (!isPeriodicEditMode) {
                    if (headerDescriptionInput) {
                        headerDescriptionInput.setAttribute('readonly', 'readonly');
                    }

                    if (addRowButton) {
                        addRowButton.style.display = 'none';
                    }

                    if (saveButton) {
                        saveButton.style.display = 'none';
                    }

                    if (detailBody) {
                        detailBody.querySelectorAll('input, select, textarea, button').forEach((element) => {
                            if (element.classList.contains('btn-date-detail') || element.classList.contains('btn-plan-dates')) {
                                return;
                            }

                            element.disabled = true;
                        });
                    }
                }

                if (saveButton) {
                    saveButton.addEventListener('click', saveDetails);
                }

                if (backButton) {
                    backButton.addEventListener('click', async (event) => {
                        if (!isDirty) {
                                // Jika edit mode → kembali ke previous page, jika show mode → kembali ke list
                                if (isPeriodicEditMode) {
                                    history.back();
                                } else {
                                    window.location.href = '{{ url($url_menu) }}';
                                }
                                return;
                            }

                        event.preventDefault();

                        const confirmation = typeof Swal !== 'undefined'
                            ? await Swal.fire({
                                title: 'Perubahan Belum Disimpan',
                                text: 'Tetap keluar dari halaman ini?',
                                icon: 'warning',
                                showCancelButton: true,
                                confirmButtonText: 'Ya, Keluar',
                                cancelButtonText: 'Batal',
                                reverseButtons: true
                            })
                            : {
                                isConfirmed: confirm('Perubahan belum disimpan. Tetap keluar?')
                            };

                        if (!confirmation.isConfirmed) {
                            return;
                        }

                        window.removeEventListener('beforeunload', confirmLeave);

                        // Sama seperti di atas
                        if (isPeriodicEditMode) {
                            history.back();
                        } else {
                            window.location.href = '{{ url($url_menu) }}';
                        }
                    });
                }

                window.addEventListener('beforeunload', confirmLeave);

                if (detailBody) {
                    detailBody.querySelectorAll('.btn-delete-row').forEach((button) => {
                        button.addEventListener('click', () => handleDeleteRow(button));
                    });
                    detailBody.querySelectorAll('.periodic-select').forEach((select) => {
                        select.addEventListener('change', (event) => {
                            updateRowPeriodic(event.target.closest('tr'));
                            setDirty();
                        });
                    });
                    detailBody.querySelectorAll('select, input').forEach((input) => {
                        input.addEventListener('change', () => setDirty());
                    });
                    detailBody.querySelectorAll('.btn-date-detail').forEach((button) => {
                        button.addEventListener('click', (event) => {
                            const row = event.target.closest('tr');
                            const detailId = event.target.dataset.detail || row?.dataset?.id;
                            if (!detailId) {
                                showAlert({
                                    icon: 'info',
                                    title: 'Informasi',
                                    text: 'Simpan data terlebih dahulu untuk melihat detail realisasi.'
                                });
                                return;
                            }
                            openDateModal(detailId, event.target.dataset.type);
                        });
                    });
                    detailBody.querySelectorAll('.btn-plan-dates').forEach((button) => {
                        button.addEventListener('click', function(event) {
                            if (!isPeriodicEditMode) {
                                const row = event.target.closest('tr');
                                const detailId = row?.dataset?.id;
                                if (!detailId) {
                                    showAlert({
                                        icon: 'info',
                                        title: 'Informasi',
                                        text: 'Data detail belum tersedia.'
                                    });
                                    return;
                                }
                                openDateModal(detailId, 'plan');
                                return;
                            }

                            openPlanDatesModal(this);
                        });
                    });
                    detailBody.querySelectorAll('tr').forEach((row) => {
                        if (!row.querySelector('td[colspan]')) {
                            attachAutoPlanDateListeners(row);
                        }
                    });
                }
            </script>
        @endpush
    @else
        @php
            $headApprovalStatus = strtolower((string) ($list->request_status ?? $list->status ?? ''));
            if ($headApprovalStatus === 'reject') {
                $headApprovalStatus = 'rejected';
            }
            $detailStatusValue = $headApprovalStatus;
            $isDraftRequest = in_array(($dmenu ?? ''), ['trreq', 'truser'], true) && $headApprovalStatus === 'draft';
            $canHeadProcess = ($dmenu ?? '') === 'trreq'
                && in_array($headApprovalStatus, ['pending', 'review'], true)
                && empty($list->head_approval_date);
            $currentPath = request()->path();
            $isHrdDetailPage = ($dmenu ?? '') === 'trhrd'
                || str_contains($currentPath, 'pengajuan-hrd/show')
                || str_contains($currentPath, 'daftar-pengajuan-hrd/show');
            $canHrdProcess = $isHrdDetailPage
                && in_array($headApprovalStatus, ['pending', 'review'], true)
                && empty($list->hrd_approval_date);
            $canHrdUpdate = $isHrdDetailPage
                && in_array($headApprovalStatus, ['pengadaan', 'pengerjaan', 'revisi'], true);
            $isUserPengajuanDetail = in_array(($dmenu ?? ''), ['trreq', 'truser'], true)
                || str_contains($currentPath, 'pengajuan-pekerjaan-pu/show')
                || str_contains($currentPath, 'daftar-pu/show')
                || str_contains($currentPath, 'user/show');
            $showPuDetailTracking = $isUserPengajuanDetail || $isHrdDetailPage;
            $formatDetailDateInput = function ($value) {
                if (empty($value) || $value === '0000-00-00' || $value === '0000-00-00 00:00:00') {
                    return '';
                }

                return \Illuminate\Support\Carbon::parse($value)->format('Y-m-d');
            };
            $pengadaanEstimatedStartInput = $formatDetailDateInput($list->pengadaan_estimated_started_at ?? null);
            $pengadaanEstimatedEndInput = $formatDetailDateInput($list->pengadaan_estimated_ended_at ?? null);
            $pengerjaanEstimatedStartInput = $formatDetailDateInput($list->pengerjaan_estimated_started_at ?? null);
            $pengerjaanEstimatedEndInput = $formatDetailDateInput($list->pengerjaan_estimated_ended_at ?? null);
        @endphp
        @if ($showPuDetailTracking)
            <style>
                .pu-detail-tracker-wrap {
                    overflow-x: auto;
                    padding: 10px 0 4px;
                }

                .pu-detail-tracker {
                    display: flex;
                    justify-content: space-between;
                    position: relative;
                    width: 100%;
                    min-width: 520px;
                }

                .pu-detail-tracker::before {
                    content: '';
                    position: absolute;
                    top: 15px;
                    left: 42px;
                    right: 42px;
                    height: 3px;
                    background: #e2e8f0;
                    z-index: 1;
                }

                .pu-detail-tracker-step {
                    position: relative;
                    z-index: 2;
                    flex: 1;
                    text-align: center;
                }

                .pu-detail-tracker-step .step-icon {
                    width: 32px;
                    height: 32px;
                    border-radius: 50%;
                    background: #e2e8f0;
                    color: #64748b;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin: 0 auto 7px;
                    font-size: 12px;
                    border: 3px solid #fff;
                }

                .pu-detail-tracker-step.completed .step-icon {
                    background: #10b981;
                    color: #fff;
                }

                .pu-detail-tracker-step.current .step-icon {
                    background: #f59e0b;
                    color: #fff;
                }

                .pu-detail-tracker-step.rejected .step-icon {
                    background: #ef4444;
                    color: #fff;
                }

                .pu-detail-tracker-step .step-label {
                    color: #64748b;
                    font-size: 0.68rem;
                    font-weight: 700;
                    text-transform: uppercase;
                }

                .pu-detail-tracker-step.completed .step-label,
                .pu-detail-tracker-step.current .step-label,
                .pu-detail-tracker-step.rejected .step-label {
                    color: #0f172a;
                }

                .pu-detail-tracker-step .step-date {
                    color: #94a3b8;
                    display: block;
                    font-size: 0.64rem;
                    margin-top: 3px;
                }
            </style>
        @endif
        <div class="card shadow-lg mx-4">
            <div class="card-body p-3">
                <div class="row gx-4">
                    <div class="col-lg">
                        <div class="nav-wrapper">
                            {{-- button back --}}
                            <button class="btn btn-secondary mb-0" onclick="history.back()"><i class="fas fa-circle-left me-1">
                                </i><span class="font-weight-bold">Kembali</button>
                            @if ($canHrdProcess)
                                <button class="btn btn-primary mb-0 ms-1" type="button"
                                    data-bs-toggle="modal" data-bs-target="#hrdApprovalModal"
                                    data-id="{{ $idencrypt }}"
                                    data-status="{{ $headApprovalStatus }}"
                                    data-note="{{ $list->hrd_note ?? '' }}"
                                    data-work-type="{{ $list->work_type ?? '' }}"
                                    data-vendor-name="{{ $list->vendor_name ?? '' }}"
                                    data-pengadaan-estimated-start="{{ $pengadaanEstimatedStartInput }}"
                                    data-pengadaan-estimated-end="{{ $pengadaanEstimatedEndInput }}"
                                    data-pengerjaan-estimated-start="{{ $pengerjaanEstimatedStartInput }}"
                                    data-pengerjaan-estimated-end="{{ $pengerjaanEstimatedEndInput }}">
                                    <i class="fas fa-check me-1"></i><span class="font-weight-bold">Proses</span>
                                </button>
                            @endif
                            @if ($canHrdUpdate)
                                <button class="btn mb-0 ms-1 px-3 text-white ajax-runtime-action" type="button"
                                    style="background-color:#ff6b47;border-color:#ff6b47;border-radius:10px;"
                                    data-bs-toggle="modal" data-bs-target="#hrdActionModal"
                                    data-id="{{ $idencrypt }}"
                                    data-status="{{ $headApprovalStatus }}"
                                    data-note="{{ $list->hrd_note ?? '' }}"
                                    data-work-type="{{ $list->work_type ?? '' }}"
                                    data-vendor-name="{{ $list->vendor_name ?? '' }}"
                                    data-pengadaan-estimated-start="{{ $pengadaanEstimatedStartInput }}"
                                    data-pengadaan-estimated-end="{{ $pengadaanEstimatedEndInput }}"
                                    data-pengerjaan-estimated-start="{{ $pengerjaanEstimatedStartInput }}"
                                    data-pengerjaan-estimated-end="{{ $pengerjaanEstimatedEndInput }}">
                                    <i class="fas fa-pen me-1"></i><span class="font-weight-bold">Update</span>
                                </button>
                            @endif
                            @if ($isDraftRequest)
                                <a class="btn btn-warning mb-0 ms-1" href="{{ URL::to($url_menu . '/edit/' . $idencrypt) }}">
                                    <i class="fas fa-edit me-1"></i><span class="font-weight-bold">Edit Draft</span>
                                </a>
                                <form method="POST" action="{{ route('user.draft.confirm') }}" class="d-inline-block m-0 draft-confirm-form">
                                    @csrf
                                    <input type="hidden" name="id_encrypt" value="{{ $idencrypt }}">
                                    <button type="submit" class="btn btn-success mb-0 ms-1">
                                        <i class="fas fa-check me-1"></i><span class="font-weight-bold">Konfirmasi Draft</span>
                                    </button>
                                </form>
                                <form method="POST" action="{{ route('user.draft.delete') }}" class="d-inline-block m-0 draft-delete-form">
                                    @csrf
                                    <input type="hidden" name="id_encrypt" value="{{ $idencrypt }}">
                                    <button type="submit" class="btn btn-danger mb-0 ms-1">
                                        <i class="fas fa-trash me-1"></i><span class="font-weight-bold">Hapus Draft</span>
                                    </button>
                                </form>
                            @elseif ($canHeadProcess)
                                <form method="POST" action="{{ route('pengajuan-head.update') }}" id="head-approval-form" class="d-inline-block">
                                    @csrf
                                    <input type="hidden" name="id" value="{{ $idencrypt }}">
                                    <input type="hidden" name="return_url" value="{{ request()->headers->get('referer') ?: url($url_menu) }}">
                                    <input type="hidden" name="request_status" id="head-approval-status" value="review">
                                    <input type="hidden" name="head_note" id="head-approval-note" value="">
                                </form>
                                <button class="btn btn-success mb-0" type="button" onclick="submitHeadApproval('review')">
                                    <i class="fas fa-check me-1"></i><span class="font-weight-bold">Setujui</span>
                                </button>
                                <button class="btn btn-danger mb-0 ms-1" type="button" onclick="submitHeadApproval('rejected')">
                                    <i class="fas fa-times me-1"></i><span class="font-weight-bold">Tolak</span>
                                </button>
                            @endif
                            {{-- check authorize edi --}}
                            @if (($authorize->edit ?? '0') == '1' && !in_array(($dmenu ?? ''), ['trhrd', 'trreq'], true))
                                {{-- check status active --}}
                                @if ((int) ($list->is_active ?? $list->isactive ?? 1) == 1)
                                    {{-- button save --}}
                                    <button class="btn btn-primary mb-0" style="display: none;" id="{{ $dmenu }}-save"
                                        onclick="event.preventDefault(); document.getElementById('{{ $dmenu }}-form').submit();"><i
                                            class="fas fa-floppy-disk me-1"> </i><span class="font-weight-bold">Simpan</button>
                                    {{-- button edit --}}
                                    <button class="btn btn-warning mb-0" id="{{ $dmenu }}-edit"><i
                                            class="fas fa-edit me-1"> </i><span class="font-weight-bold">Edit</button>
                                @endif
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="container-fluid py-4">
            @include('components.alert')
            <div class="row">
                <div class="col-md-6">
                    <div class="card">
                        <form role="form" method="POST" action="{{ URL::to($url_menu . '/' . $idencrypt) }}"
                            enctype="multipart/form-data" id="{{ $dmenu }}-form">
                            @csrf
                            @method('PUT')
                            <div class="card-body">
                                <p class="text-uppercase text-sm">View {{ $title_menu }}</p>
                                <hr class="horizontal dark mt-0">
                                <div class="row">
                                    {{-- retrieve table header --}}
                                    @if (isset($table_header) && count($table_header) > 0)
                                        @foreach ($table_header as $header)
                                        @continue($isUserPengajuanDetail && in_array($header->field, ['head_note', 'hrd_note'], true))
                                        @php
                                            $primary = false;
                                            $generateid = false;
                                            foreach ($table_primary as $p) {
                                                $primary == false
                                                    ? ($p->field == $header->field
                                                        ? ($primary = true)
                                                        : ($primary = false))
                                                    : '';
                                                $generateid == false
                                                    ? ($p->generateid == $header->field
                                                        ? ($generateid = true)
                                                        : ($generateid = false))
                                                    : '';
                                            }
                                        @endphp
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                @if ($header->type != 'hidden')
                                                     {{-- display label alias on type field not hidden --}}
                                                     @if ($header->type == 'image' || $header->field == 'attachment')
                                                         <label class="form-control-label text-uppercase text-xs font-weight-bolder text-primary">
                                                             <i class="fas fa-paperclip me-1"></i>{{ $header->alias }}
                                                         </label>
                                                     @else
                                                         <label for="example-text-input"
                                                             class="form-control-label">{{ $header->alias }}</label>
                                                     @endif
                                                 @endif
                                                {{-- field type char and string --}}
                                                @if ($header->type == 'char' || $header->type == 'string')
                                                    <input
                                                        class="form-control {{ $header->primary == '1' ? ' bg-dark text-light' : '' }} {{ $header->class }}"
                                                        type="text" disabled {{ $primary ? ' key=true' : '' }}
                                                        value="{{ $list ? $list->{$header->field} : old($header->field) }}"
                                                        name="{{ $header->field }}" maxlength="{{ $header->length }}">
                                                    @if ($header->note != '')
                                                        <p class='text-secondary text-xs pt-1 px-1'>
                                                            {{ '*) ' . $header->note }}
                                                        </p>
                                                    @endif
                                                    {{-- field type text --}}
                                                @elseif ($header->type == 'text')
                                                    <textarea class="form-control {{ $header->primary == '1' ? ' bg-dark text-light' : '' }} {{ $header->class }}"
                                                        disabled name="{{ $header->field }}" maxlength="{{ $header->length }}">{{ $list ? $list->{$header->field} : old($header->field) }}</textarea>
                                                    @if ($header->note != '')
                                                        <p class='text-secondary text-xs pt-1 px-1'>
                                                            {{ '*) ' . $header->note }}
                                                        </p>
                                                    @endif
                                                    {{-- field type email --}}
                                                @elseif ($header->type == 'email')
                                                    <input
                                                        class="form-control {{ $header->primary == '1' ? ' bg-dark text-light' : '' }} {{ $header->class }}"
                                                        type="email" disabled {{ $primary ? ' key=true' : '' }}
                                                        value="{{ $list ? $list->{$header->field} : old($header->field) }}"
                                                        name="{{ $header->field }}" maxlength="{{ $header->length }}">
                                                    @if ($header->note != '')
                                                        <p class='text-secondary text-xs pt-1 px-1'>
                                                            {{ '*) ' . $header->note }}
                                                        </p>
                                                    @endif
                                                    {{-- field type number --}}
                                                @elseif ($header->type == 'number')
                                                    <input
                                                        class="form-control {{ $header->primary == '1' ? ' bg-dark text-light' : '' }} {{ $header->class }}"
                                                        type="number" disabled {{ $primary ? ' key=true' : '' }}
                                                        value="{{ $list ? $list->{$header->field} : old($header->field) }}"
                                                        name="{{ $header->field }}" max="{{ $header->length }}">
                                                    @if ($header->note != '')
                                                        <p class='text-secondary text-xs pt-1 px-1'>
                                                            {{ '*) ' . $header->note }}
                                                        </p>
                                                    @endif
                                                    {{-- field type currency --}}
                                                @elseif ($header->type == 'currency')
                                                    <input
                                                        class="form-control {{ $header->primary == '1' ? ' bg-dark text-light' : '' }} {{ $header->class }}"
                                                        type="number" disabled {{ $primary ? ' key=true' : '' }}
                                                        value="{{ $list ? $list->{$header->field} : old($header->field) }}"
                                                        name="{{ $header->field }}" max="{{ $header->length }}">
                                                    @if ($header->note != '')
                                                        <p class='text-secondary text-xs pt-1 px-1'>
                                                            {{ '*) ' . $header->note }}
                                                        </p>
                                                    @endif
                                                    {{-- field type search --}}
                                                @elseif ($header->type == 'search')
                                                    <div class="flex flex-col mb-2 input-group">
                                                        <input name="{{ $header->field }}"
                                                            class="form-control {{ $header->primary == '1' ? ' bg-dark text-light' : '' }}  {{ $header->class }}"
                                                            type="text" disabled {{ $primary ? ' key=true' : '' }}
                                                            value="{{ $list ? $list->{$header->field} : old($header->field) }}">
                                                        <span class="input-group-text bg-primary text-light icon-modal-search"
                                                            data-bs-toggle="modal"
                                                            data-bs-target="#searchModal{{ $header->field }}"
                                                            style="border-color:#d2d6da;border-left:3px solid #d2d6da;cursor: pointer;display:none;"><i
                                                                class="fas fa-search"></i></span>
                                                    </div>
                                                    <!-- Modal -->
                                                    <div class="modal fade" id="searchModal{{ $header->field }}" tabindex="-1"
                                                        role="dialog" aria-labelledby="searchModalLabel" aria-hidden="true">
                                                        <div class="modal-dialog modal-dialog-centered" role="document">
                                                            <div class="modal-content">
                                                                <div class="modal-header">
                                                                    <h5 class="modal-title" id="searchModalLabel">
                                                                        List Data
                                                                    </h5>
                                                                    <button type="button" class="btn-close"
                                                                        data-bs-dismiss="modal" aria-label="Close">
                                                                        <span aria-hidden="true">&times;</span>
                                                                    </button>
                                                                </div>
                                                                @if ($header->query != '')
                                                                    @php
                                                                        $table_result = DB::select($header->query);
                                                                    @endphp
                                                                @endif
                                                                <div class="modal-body">
                                                                    <table class="table display" id="list_{{ $dmenu }}">
                                                                        @if ($table_result)
                                                                            <thead class="thead-light"
                                                                                style="background-color: #00b7bd4f;">
                                                                                <tr>
                                                                                    <th width="20px">Action</th>
                                                                                    @foreach ($table_result as $result)
                                                                                        @php
                                                                                            $sAsArray = array_keys(
                                                                                                (array) $result,
                                                                                            );
                                                                                        @endphp
                                                                                    @endforeach
                                                                                    @foreach ($sAsArray as $modal_h)
                                                                                        <th>{{ $modal_h }}</th>
                                                                                    @endforeach
                                                                                </tr>
                                                                            </thead>
                                                                            <tbody>
                                                                                @foreach ($table_result as $modal_d)
                                                                                    <tr>
                                                                                        @foreach ($table_result as $result)
                                                                                            @php
                                                                                                $field = array_keys(
                                                                                                    (array) $result,
                                                                                                );
                                                                                            @endphp
                                                                                        @endforeach
                                                                                        <td width="20px"><span
                                                                                                class="btn badge bg-primary badge-lg"
                                                                                                onclick="select_modal('{{ $modal_d->{$field[0]} }}')"><i
                                                                                                    class="bi bi-check-circle me-1"></i>
                                                                                                Select</span>
                                                                                        </td>
                                                                                        @foreach ($field as $header_field)
                                                                                            @php
                                                                                                $string = $header_field;
                                                                                            @endphp
                                                                                            <td
                                                                                                class="text-sm font-weight-normal">
                                                                                                {{ $modal_d->$string }}
                                                                                            </td>
                                                                                        @endforeach
                                                                                    </tr>
                                                                                @endforeach
                                                                            </tbody>
                                                                        @endif
                                                                    </table>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    @if ($header->note != '')
                                                        <p class='text-secondary text-xs pt-1 px-1'>
                                                            {{ '*) ' . $header->note }}
                                                        </p>
                                                    @endif
                                                    <script>
                                                        function select_modal(id, name) {
                                                            $('input[name="{{ $header->field }}"]').val(id);
                                                            $('#searchModal{{ $header->field }}').modal('hide');
                                                        }
                                                    </script>
                                                    {{-- field type image --}}
                                                @elseif ($header->type == 'image')
                                                    @php
                                                        $imageValue = $list ? $list->{$header->field} : null;
                                                        $imagePaths = [];

                                                        $isValidImgPath = function ($path) {
                                                            $path = trim((string) $path);
                                                            if ($path === '' || $path === '0' || ctype_digit($path)) return false;
                                                            $hasSlash = str_contains($path, '/') || str_contains($path, '\\');
                                                            $hasExt = strlen(pathinfo($path, PATHINFO_EXTENSION)) > 0;
                                                            return $hasSlash || $hasExt;
                                                        };

                                                        $trimmedImgValue = trim((string) ($imageValue ?? ''));
                                                        if (is_string($imageValue) && $trimmedImgValue !== '' && $trimmedImgValue !== '0' && $trimmedImgValue !== 'null' && $trimmedImgValue !== '[]') {
                                                            $decodedImages = json_decode($imageValue, true);

                                                            if (json_last_error() === JSON_ERROR_NONE && is_array($decodedImages)) {
                                                                $imagePaths = array_values(
                                                                    array_filter($decodedImages, fn($path) => is_string($path) && $isValidImgPath($path)),
                                                                );
                                                            } elseif (str_contains($imageValue, ',')) {
                                                                $imagePaths = array_values(
                                                                    array_filter(array_map('trim', explode(',', $imageValue)), fn($path) => $isValidImgPath($path)),
                                                                );
                                                            } elseif ($isValidImgPath($trimmedImgValue)) {
                                                                $imagePaths = [$trimmedImgValue];
                                                            }
                                                        }
                                                    @endphp
                                                    @if (!empty($imagePaths))
                                                        <div class="d-flex flex-wrap gap-2 mt-2">
                                                            @foreach ($imagePaths as $imageIndex => $imagePath)
                                                                @php
                                                                    $ext = strtolower(pathinfo($imagePath, PATHINFO_EXTENSION));
                                                                    $isPdf = $ext === 'pdf';
                                                                    $imageSrc = \Illuminate\Support\Str::startsWith($imagePath, ['http://', 'https://'])
                                                                        ? $imagePath
                                                                        : route('attachment.show', ['path' => ltrim($imagePath, '/')]);
                                                                @endphp
                                                                <div class="mb-2">
                                                                    @if ($isPdf)
                                                                        <a href="{{ $imageSrc }}" target="_blank" rel="noopener noreferrer"
                                                                            class="d-flex flex-column align-items-center justify-content-center border rounded shadow-sm text-decoration-none p-2"
                                                                            style="width: 150px; height: 150px; background: #fff5f5; border-color: #fca5a5 !important;">
                                                                            <i class="fas fa-file-pdf fa-3x text-danger mb-2"></i>
                                                                            <span class="text-danger font-weight-bold text-xs text-center px-1" style="word-break: break-all; max-height: 32px; overflow: hidden; line-height: 1.2;">{{ basename($imagePath) }}</span>
                                                                        </a>
                                                                    @else
                                                                        <a href="{{ $imageSrc }}" target="_blank" rel="noopener noreferrer">
                                                                            <img src="{{ $imageSrc }}"
                                                                                alt="{{ $header->alias }} {{ $imageIndex + 1 }}"
                                                                                class="img-fluid rounded shadow-sm border"
                                                                                style="width: 150px; height: 150px; object-fit: cover;">
                                                                        </a>
                                                                    @endif
                                                                </div>
                                                            @endforeach
                                                        </div>
                                                        <p class="text-primary text-xs pt-1 mb-0">
                                                            <i class="fas fa-info-circle me-1"></i>Klik gambar/file untuk membuka ukuran penuh
                                                        </p>
                                                    @else
                                                        <div class="text-center p-4 bg-light rounded border">
                                                            <i class="fas fa-exclamation-triangle text-warning mb-2" style="font-size: 2.5rem;"></i>
                                                            <p class="text-muted text-sm font-weight-bold mb-2">Belum ada lampiran file / gambar yang terupload</p>
                                                            @php
                                                                $sessionUsername = strtolower(trim((string) (session('username') ?? '')));
                                                                $authUsername    = auth()->user() ? strtolower(trim((string) (auth()->user()->username ?? ''))) : '';
                                                                $currentUsername = $sessionUsername ?: $authUsername;
                                                                $createdBy       = strtolower(trim((string) ($list->user_create ?? '')));
                                                                $isCreator       = ($currentUsername !== '' && $createdBy !== '' && $currentUsername === $createdBy);
                                                            @endphp
                                                            @if (($header->field ?? '') == 'attachment' && $isCreator)
                                                                <button type="button" class="btn btn-warning btn-sm mb-0 mt-1"
                                                                    data-bs-toggle="modal" data-bs-target="#autoUploadAttachmentModal">
                                                                    <i class="fas fa-upload me-1"></i>Upload Lampiran
                                                                </button>
                                                            @endif
                                                        </div>
                                                    @endif
                                                    @if (empty($imagePaths))
                                                        @if (($header->field ?? '') == 'attachment')
                                                             <p class='text-primary text-xs pt-3 mb-0'>Maksimal Size :
                                                                 <b>5120 KB (5 MB)</b>
                                                             </p>
                                                             <p class='text-primary text-xs pt-1'>Format File :
                                                                 <b>JPG, PNG, WEBP, HEIC, PDF (Maks. 5MB/file)</b>
                                                             </p>
                                                         @else
                                                             <p class='text-primary text-xs pt-3 mb-0'>Maksimal Size :
                                                                 <b>{{ $header->length }} KB</b>
                                                             </p>
                                                             @if ($header->note != '')
                                                                 <p class='text-primary text-xs pt-1'>
                                                                     {{ $header->note }}
                                                                 </p>
                                                             @else
                                                                 <p class='text-primary text-xs pt-1'>Format Gambar :
                                                                     <b>JPG, PNG, GIF</b>
                                                                 </p>
                                                             @endif
                                                         @endif
                                                    @endif

                                                    <script>
                                                        {{ $header->field }}.onchange = evt => {
                                                            const [file] = {{ $header->field }}.files
                                                            if (file) {
                                                                {{ $header->field . 'preview' }}.src = URL.createObjectURL(file)
                                                            }
                                                        }
                                                        $('#{{ $header->field }}edit').click(function() {
                                                            $('input[name="{{ $header->field }}"]').click();

                                                        });
                                                    </script>
                                                    {{-- field type password --}}
                                                @elseif ($header->type == 'password')
                                                    <div class="flex flex-col mb-2 input-group pass">
                                                        <input class="form-control {{ $header->class }}" disabled
                                                            {{ $primary ? ' key=true type=hidden' : ($header->filter == '1' ? ' type=password' : ' type=hidden') }}
                                                            value="{{ $list ? '' : $header->default }}"
                                                            name="{{ $header->field }}" max="{{ $header->length }}">
                                                        <span class="input-group-text" id="button-addon"
                                                            style="border-color:#d2d6da;"><i class="fas fa-eye showpass"
                                                                style="cursor: pointer;"></i></span>
                                                    </div>
                                                    <p class='text-primary text-xs pt-1'>Default Password :
                                                        <b>{{ $header->default }}</b>
                                                    </p>
                                                    {{-- field type date --}}
                                                @elseif ($header->type == 'date')
                                                    <input
                                                        class="form-control {{ $header->primary == '1' ? ' bg-dark text-light' : '' }} {{ $header->class }}"
                                                        type="date" disabled {{ $primary ? ' key=true' : '' }}
                                                        value="{{ $list ? $list->{$header->field} : old($header->field) }}"
                                                        name="{{ $header->field }}">
                                                    @if ($header->note != '')
                                                        <p class='text-secondary text-xs pt-1 px-1'>
                                                            {{ '*) ' . $header->note }}
                                                        </p>
                                                    @endif
                                                    {{-- field type hidden --}}
                                                @elseif ($header->type == 'hidden')
                                                    <input class="form-control {{ $header->class }}" type="hidden"
                                                        value="{{ $header->default }}" name="{{ $header->field }}"
                                                        max="{{ $header->length }}">
                                                    {{-- field type enum --}}
                                                @elseif ($header->type == 'enum')
                                                    <select
                                                        class="form-select {{ $header->primary == '1' ? ' bg-dark text-light' : '' }} {{ $header->class }}"
                                                        name="{{ $header->field }}" disabled
                                                        {{ $primary || $generateid ? ' key=true' : '' }}>
                                                        <option value=""></option>
                                                        @if ($header->query != '')
                                                            @php
                                                                $data_query = DB::select($header->query);
                                                            @endphp
                                                            @foreach ($data_query as $q)
                                                                <br />
<b>Warning</b>:  Undefined variable $q in <b>/opt/lampp/htdocs/tsipu/resources/views/transc/auto/show.blade.php</b> on line <b>1916</b><br />
                                                                <option value="{{ $sAsArray[0] }}"
                                                                    {{ $sAsArray[0] == $list->{$header->field} ? 'selected' : '' }}>
                                                                    {{ $sAsArray[1] }}
                                                                </option>
                                                            @endforeach
                                                        @endif
                                                    </select>
                                                    @if ($header->note != '')
                                                        <p class='text-secondary text-xs pt-1 px-1'>
                                                            {{ '*) ' . $header->note }}
                                                        </p>
                                                    @endif
                                                    <script>
                                                        $(this).val('{{ $list->{$header->field} }}')
                                                    </script>
                                                @endif
                                                @error($header->field)
                                                    <p class='text-danger text-xs pt-1'> {{ $message }} </p>
                                                @enderror
                                            </div>
                                        </div>
                                        @endforeach
                                    @else
                                        <div class="col-12">
                                            <div class="alert alert-warning">
                                                <strong>Notice:</strong> Tidak ada konfigurasi field untuk tampilan ini (sys_table kosong untuk menu ini).
                                                @if(isset($list) && $list)
                                                    <div class="mt-2">
                                                        <small class="text-muted">Ringkasan data record:</small>
                                                        <pre class="small bg-light p-2 rounded">{{ json_encode($list, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE) }}</pre>
                                                    </div>
                                                @endif
                                            </div>
                                        </div>
                                    @endif
                                    {{-- ── Lampiran Catatan Revisi & Dokumentasi Pekerjaan ── --}}
                                    @if ($showPuDetailTracking)
                                        @php
                                            $showDocStatus = strtolower((string) ($list->request_status ?? $list->status ?? ''));
                                            $isCompletedForDocs = in_array($showDocStatus, ['completed', 'verifikasi'], true) || $showDocStatus !== 'draft';
                                            $showDocs = isset($show_documentation) ? $show_documentation : collect([]);
                                            $isHrdOrAdminForDocs = ($isHrdDetailPage ?? false) || ($isCurrentViewerHrd ?? false) || ($isCurrentViewerAdmin ?? false);
                                            $showRevFiles = isset($revision_attachment_files) ? $revision_attachment_files : [];
                                        @endphp

                                        {{-- Lampiran Catatan Revisi --}}
                                        <div class="col-12 mt-4">
                                            <label class="form-control-label text-uppercase text-xs font-weight-bolder text-info">
                                                <i class="fas fa-redo me-1"></i>Lampiran Catatan Revisi
                                            </label>
                                            @if (!empty($showRevFiles))
                                                <div class="d-flex flex-wrap gap-2 mt-2">
                                                    @foreach ($showRevFiles as $revFile)
                                                        @php
                                                            $revExt = strtolower(pathinfo($revFile, PATHINFO_EXTENSION));
                                                            $revIsPdf = $revExt === 'pdf';
                                                            $revUrl = route('attachment.show', ['path' => $revFile]);
                                                        @endphp
                                                        <div class="mb-2">
                                                            @if ($revIsPdf)
                                                                <a href="{{ $revUrl }}" target="_blank" rel="noopener noreferrer"
                                                                    class="d-flex flex-column align-items-center justify-content-center border rounded shadow-sm text-decoration-none p-2"
                                                                    style="width: 150px; height: 150px; background: #eff6ff; border-color: #93c5fd !important;">
                                                                    <i class="fas fa-file-pdf fa-3x text-primary mb-2"></i>
                                                                    <span class="text-primary font-weight-bold text-xs text-center px-1" style="word-break: break-all; max-height: 32px; overflow: hidden; line-height: 1.2;">{{ basename($revFile) }}</span>
                                                                </a>
                                                            @else
                                                                <a href="{{ $revUrl }}" target="_blank" rel="noopener noreferrer">
                                                                    <img src="{{ $revUrl }}" alt="Lampiran Revisi"
                                                                        class="img-fluid rounded shadow-sm border"
                                                                        style="width: 150px; height: 150px; object-fit: cover;">
                                                                </a>
                                                            @endif
                                                        </div>
                                                    @endforeach
                                                </div>
                                            @else
                                                <div class="p-2 bg-light rounded mt-2 border text-muted text-xs">
                                                    <i class="fas fa-minus-circle me-1"></i>Belum ada lampiran catatan revisi.
                                                </div>
                                            @endif
                                        </div>

                                        {{-- Dokumentasi Hasil Pekerjaan Petugas --}}
                                        @if ($showDocStatus !== 'draft')
                                            <div class="col-12 mt-4">
                                                <label class="form-control-label text-uppercase text-xs font-weight-bolder text-success">
                                                    <i class="fas fa-camera me-1"></i>Dokumentasi Hasil Pekerjaan Petugas
                                                </label>
                                                @if ($showDocs->count() > 0)
                                                    <div class="d-flex flex-wrap gap-3 mt-2">
                                                        @foreach ($showDocs as $doc)
                                                            @php
                                                                $docPath = $doc->file ?? '';
                                                                $docExt = strtolower(pathinfo($docPath, PATHINFO_EXTENSION));
                                                                $docIsPdf = $docExt === 'pdf';
                                                                $docUrl = route('attachment.show', ['path' => $docPath]);
                                                                $docDate = !empty($doc->created_at) ? \Carbon\Carbon::parse($doc->created_at)->format('d-m-Y H:i') : '';
                                                                $hasRevision = !empty($showRevFiles);
                                                                if ($hasRevision && $showDocs->count() > 1 && $loop->last) {
                                                                    $docLabel = 'Dokumentasi Setelah Revisi';
                                                                } else {
                                                                    $docLabel = 'Dokumentasi Awal';
                                                                }
                                                            @endphp
                                                            <div class="d-flex flex-column align-items-center mb-2">
                                                                <span class="badge bg-gradient-success text-xxs mb-1">{{ $docLabel }}</span>
                                                                @if ($docIsPdf)
                                                                    <a href="{{ $docUrl }}" target="_blank" rel="noopener noreferrer"
                                                                        class="d-flex flex-column align-items-center justify-content-center border rounded shadow-sm text-decoration-none p-2"
                                                                        style="width: 150px; height: 150px; background: #fff5f5; border-color: #fca5a5 !important;">
                                                                        <i class="fas fa-file-pdf fa-3x text-danger mb-2"></i>
                                                                        <span class="text-danger font-weight-bold text-xs text-center px-1" style="word-break: break-all; max-height: 32px; overflow: hidden; line-height: 1.2;">{{ basename($docPath) }}</span>
                                                                    </a>
                                                                @else
                                                                    <a href="{{ $docUrl }}" target="_blank" rel="noopener noreferrer">
                                                                        <img src="{{ $docUrl }}" alt="{{ $docLabel }}"
                                                                            class="img-fluid rounded shadow-sm border"
                                                                            style="width: 150px; height: 150px; object-fit: cover;">
                                                                    </a>
                                                                @endif
                                                                @if ($docDate)
                                                                    <small class="text-muted text-xxs mt-1"><i class="far fa-clock me-1"></i>{{ $docDate }}</small>
                                                                @endif
                                                            </div>
                                                        @endforeach
                                                    </div>
                                                @else
                                                    <div class="p-2 bg-light rounded mt-2 border text-muted text-xs">
                                                        <i class="fas fa-minus-circle me-1"></i>Belum ada dokumentasi pekerjaan.
                                                    </div>
                                                @endif
                                            </div>
                                        @endif
                                    @endif
                                </div>
                                <div class="row px-2 py-2">
                                    <div class="col-lg">
                                        <div class="nav-wrapper"><code>Note : <i aria-hidden="true" style=""
                                                    class="fas fa-circle text-dark"></i> Data primary key</code></div>
                                    </div>
                                </div>
                                <hr class="horizontal dark">
                            </div>
                            <div class="card-footer align-items-center pt-0 pb-2">

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

                {{-- Modal Upload Lampiran Pengajuan (di luar form utama) --}}
                <div class="modal fade" id="autoUploadAttachmentModal" tabindex="-1" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered">
                        <div class="modal-content text-start">
                            <form method="POST" action="{{ route('non-periodic.update-attachment') }}" enctype="multipart/form-data">
                                @csrf
                                <div class="modal-header">
                                    <h5 class="modal-title"><i class="fas fa-upload me-2"></i>Upload Lampiran Pengajuan</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                </div>
                                <div class="modal-body">
                                    <input type="hidden" name="non_periodic_id" value="{{ $list->id }}">
                                    <input type="hidden" name="redirect_back_url" value="{{ url()->current() }}">
                                    <div class="mb-3">
                                        <label class="form-label">File Lampiran <span class="text-danger">*</span></label>
                                        <input class="form-control" type="file" name="attachment[]"
                                            accept=".jpg,.jpeg,.png,.webp,.jfif,.heic,.heif,.pdf" multiple required>
                                        <small class="text-muted">Format: JPG, PNG, WEBP, HEIC, PDF (maks 5MB/file). Bisa pilih lebih dari 1 file.</small>
                                    </div>
                                    <div class="alert alert-warning mb-0">
                                        <small><i class="fas fa-info-circle me-1"></i>File yang diupload akan disimpan sebagai <strong>lampiran pengajuan</strong> ini.</small>
                                    </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">
                                        <i class="fas fa-save me-1"></i>Simpan Lampiran
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

                {{-- Modal Upload Dokumentasi dari halaman detail --}}
                <div class="modal fade" id="showPageUploadDocModal" tabindex="-1" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered">
                        <div class="modal-content">
                            <form method="POST" action="{{ route('non-periodic.update-documentation') }}" enctype="multipart/form-data" id="showPageUploadDocForm">
                                @csrf
                                <div class="modal-header">
                                    <h5 class="modal-title"><i class="fas fa-upload me-2"></i>Upload Dokumentasi Pekerjaan</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                </div>
                                <div class="modal-body">
                                    <input type="hidden" name="non_periodic_id" value="{{ $list->id }}">
                                    <input type="hidden" name="redirect_back_url" value="{{ url()->current() }}">
                                    <div class="mb-3">
                                        <label class="form-label">File Dokumentasi <span class="text-danger">*</span></label>
                                        <input class="form-control" type="file" name="documentation[]" id="showPageDocFiles"
                                            accept=".jpg,.jpeg,.png,.webp,.jfif,.heic,.heif,.pdf" multiple required>
                                        <small class="text-muted">Format: JPG, PNG, WEBP, HEIC, PDF (maks 5MB/file). Bisa pilih lebih dari 1 file.</small>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">Keterangan (opsional)</label>
                                        <textarea class="form-control" name="description" placeholder="Keterangan dokumentasi" rows="3" maxlength="500"></textarea>
                                    </div>
                                    <div class="alert alert-warning mb-0">
                                        <small><i class="fas fa-info-circle me-1"></i>File yang diupload akan <strong>ditambahkan</strong> sebagai dokumentasi pekerjaan ini.</small>
                                    </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" id="showPageDocSubmit">
                                        <i class="fas fa-save me-1"></i>Simpan Dokumentasi
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                @push('js')
                <script>
                    (function() {
                        const form = document.getElementById('showPageUploadDocForm');
                        if (form) {
                            form.addEventListener('submit', function(e) {
                                const filesInput = document.getElementById('showPageDocFiles');
                                if (!filesInput || !filesInput.files || filesInput.files.length === 0) {
                                    e.preventDefault();
                                    if (typeof Swal !== 'undefined') {
                                        Swal.fire({ icon: 'warning', title: 'File Kosong', text: 'Pilih minimal 1 file untuk diupload.' });
                                    } else {
                                        alert('Pilih minimal 1 file untuk diupload.');
                                    }
                                    return;
                                }
                                const submitBtn = document.getElementById('showPageDocSubmit');
                                if (submitBtn) {
                                    submitBtn.disabled = true;
                                    submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Menyimpan...';
                                }
                            });
                        }
                    })();
                </script>
                @endpush
                @if ($showPuDetailTracking)
                    @php
                        $formatTrackingDate = function ($value) {
                            if (empty($value) || $value === '0000-00-00' || $value === '0000-00-00 00:00:00') {
                                return '-';
                            }

                            try {
                                return \Illuminate\Support\Carbon::parse($value)->format('d-m-Y');
                            } catch (\Throwable $e) {
                                return '-';
                            }
                        };
                        $formatDetailDateRange = function ($start, $end) use ($formatTrackingDate) {
                            $startDate = $formatTrackingDate($start);

                            if ($startDate === '-') {
                                return '-';
                            }

                            $endDate = $formatTrackingDate($end);

                            return $startDate . ' s/d ' . $endDate;
                        };

                        $normalizedStatus = strtolower((string) ($list->request_status ?? $list->status ?? ''));
                        if ($normalizedStatus === 'reject') {
                            $normalizedStatus = 'rejected';
                        } elseif (in_array($normalizedStatus, ['canceled', 'cancelled'], true)) {
                            $normalizedStatus = 'cancel';
                        }

                        $headTrackingStatus = '-';
                        if (in_array($normalizedStatus, ['rejected'], true) && !empty($list->head_note)) {
                            $headTrackingStatus = 'Ditolak';
                        } elseif (!empty($list->head_approval_date) || !in_array($normalizedStatus, ['draft', 'pending'], true)) {
                            $headTrackingStatus = 'Selesai';
                        } elseif ($normalizedStatus === 'pending') {
                            $headTrackingStatus = 'Menunggu';
                        }

                        $hrdTrackingStatus = '-';
                        if (in_array($normalizedStatus, ['rejected', 'cancel'], true) && !empty($list->hrd_note)) {
                            $hrdTrackingStatus = ucfirst($normalizedStatus);
                        } elseif (!empty($list->hrd_approval_date) || in_array($normalizedStatus, ['pengadaan', 'pengerjaan', 'revisi', 'verifikasi', 'completed'], true)) {
                            $hrdTrackingStatus = 'Selesai';
                        } elseif (in_array($normalizedStatus, ['review'], true)) {
                            $hrdTrackingStatus = 'Menunggu';
                        }

                        $trackingNoteRows = [
                            [
                                'tahap' => 'Approval Head',
                                'status' => $headTrackingStatus,
                                'tanggal' => $formatTrackingDate($list->head_approval_date ?? null),
                                'catatan' => $list->head_note ?? '-',
                            ],
                            [
                                'tahap' => 'Approval HRD',
                                'status' => $hrdTrackingStatus,
                                'tanggal' => $formatTrackingDate($list->hrd_approval_date ?? null),
                                'catatan' => $list->hrd_note ?? '-',
                            ],
                        ];

                        $datePending = $formatTrackingDate($list->created_at ?? null);
                        $dateReview = $formatTrackingDate($list->head_approval_date ?? null);
                        $datePengadaan = $formatTrackingDate($list->pengadaan_started_at ?? null);
                        $datePengerjaan = $formatTrackingDate($list->pengerjaan_started_at ?? null);
                        $dateComplete = $formatTrackingDate($list->completed_at ?? $list->updated_at ?? null);
                        $estimatedPengadaan = $formatDetailDateRange($list->pengadaan_estimated_started_at ?? null, $list->pengadaan_estimated_ended_at ?? null);
                        $estimatedPengerjaan = $formatDetailDateRange($list->pengerjaan_estimated_started_at ?? null, $list->pengerjaan_estimated_ended_at ?? null);

                        $isRejected = in_array($normalizedStatus, ['rejected', 'cancel'], true);
                        $isPengadaanDone = in_array($normalizedStatus, ['pengadaan', 'pengerjaan', 'revisi', 'verifikasi', 'completed'], true)
                            || !empty($list->pengadaan_started_at);
                        $isPengerjaanDone = in_array($normalizedStatus, ['pengerjaan', 'revisi', 'verifikasi', 'completed'], true)
                            || !empty($list->pengerjaan_started_at);
                        $isCompleteDone = in_array($normalizedStatus, ['verifikasi', 'completed'], true);

                        $currentStep = 'pending';
                        if ($isRejected) {
                            $currentStep = 'rejected';
                        } elseif ($normalizedStatus === 'review' || $normalizedStatus === 'approved') {
                            $currentStep = 'review';
                        } elseif ($normalizedStatus === 'pengadaan') {
                            $currentStep = 'pengadaan';
                        } elseif (in_array($normalizedStatus, ['pengerjaan', 'revisi'], true)) {
                            $currentStep = 'pengerjaan';
                        } elseif (in_array($normalizedStatus, ['verifikasi', 'completed'], true)) {
                            $currentStep = 'complete';
                        }
                    @endphp
                    <div class="col-md-6">
                        <div class="card">
                            <div class="card-body">
                                <p class="text-uppercase text-sm">Tracking Status Pekerjaan</p>
                                <hr class="horizontal dark mt-0">
                                <div class="table-responsive">
                                    <table class="table align-items-center mb-0">
                                        <thead class="thead-light" style="background-color: #00b7bd4f;">
                                            <tr>
                                                <th class="text-xs">Tahap</th>
                                                <th class="text-xs">Status</th>
                                                <th class="text-xs">Tanggal</th>
                                                <th class="text-xs">Catatan</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($trackingNoteRows as $trackingRow)
                                                <tr>
                                                    <td class="text-sm">{{ $trackingRow['tahap'] }}</td>
                                                    <td class="text-sm">{{ $trackingRow['status'] }}</td>
                                                    <td class="text-sm">{{ $trackingRow['tanggal'] }}</td>
                                                    <td class="text-sm">{{ $trackingRow['catatan'] ?: '-' }}</td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                                <p class="text-uppercase text-sm mt-4">Estimasi HRD</p>
                                <hr class="horizontal dark mt-0">
                                <div class="table-responsive">
                                    <table class="table align-items-center mb-0">
                                        <thead class="thead-light" style="background-color: #00b7bd4f;">
                                            <tr>
                                                <th class="text-xs">Tahap</th>
                                                <th class="text-xs">Estimasi</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td class="text-sm">Pengadaan</td>
                                                <td class="text-sm">{{ $estimatedPengadaan }}</td>
                                            </tr>
                                            <tr>
                                                <td class="text-sm">Pengerjaan</td>
                                                <td class="text-sm">{{ $estimatedPengerjaan }}</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <hr class="horizontal dark">
                                @if ($isRejected)
                                    <div class="pu-detail-tracker-wrap">
                                        <div class="pu-detail-tracker">
                                            <div class="pu-detail-tracker-step completed">
                                                <div class="step-icon"><i class="fas fa-check"></i></div>
                                                <div class="step-label">Pending</div>
                                                <span class="step-date">{{ $datePending }}</span>
                                            </div>
                                            <div class="pu-detail-tracker-step rejected">
                                                <div class="step-icon"><i class="fas fa-times"></i></div>
                                                <div class="step-label">{{ $normalizedStatus === 'cancel' ? 'Cancel' : 'Rejected' }}</div>
                                                <span class="step-date">{{ $formatTrackingDate($list->updated_at ?? null) }}</span>
                                            </div>
                                        </div>
                                    </div>
                                @else
                                    <div class="pu-detail-tracker-wrap">
                                        <div class="pu-detail-tracker">
                                            <div class="pu-detail-tracker-step {{ $currentStep == 'pending' ? 'current' : 'completed' }}">
                                                <div class="step-icon"><i class="fas {{ $currentStep == 'pending' ? 'fa-clock' : 'fa-check' }}"></i></div>
                                                <div class="step-label">Pending</div>
                                                <span class="step-date">{{ $datePending }}</span>
                                            </div>
                                            <div class="pu-detail-tracker-step {{ $currentStep == 'review' ? 'current' : ($isPengadaanDone ? 'completed' : '') }}">
                                                <div class="step-icon"><i class="fas {{ $isPengadaanDone ? 'fa-check' : 'fa-clipboard-check' }}"></i></div>
                                                <div class="step-label">Review</div>
                                                <span class="step-date">{{ $dateReview }}</span>
                                            </div>
                                            <div class="pu-detail-tracker-step {{ $currentStep == 'pengadaan' ? 'current' : ($isPengerjaanDone ? 'completed' : '') }}">
                                                <div class="step-icon"><i class="fas {{ $isPengerjaanDone ? 'fa-check' : 'fa-box' }}"></i></div>
                                                <div class="step-label">Pengadaan</div>
                                                <span class="step-date">{{ $datePengadaan !== '-' ? $datePengadaan : ($currentStep == 'pengadaan' ? 'Proses...' : '-') }}</span>
                                            </div>
                                            <div class="pu-detail-tracker-step {{ $currentStep == 'pengerjaan' ? 'current' : ($isCompleteDone ? 'completed' : '') }}">
                                                <div class="step-icon"><i class="fas {{ $isCompleteDone ? 'fa-check' : 'fa-tools' }}"></i></div>
                                                <div class="step-label">Pengerjaan</div>
                                                <span class="step-date">{{ $datePengerjaan !== '-' ? $datePengerjaan : ($currentStep == 'pengerjaan' ? 'Proses...' : '-') }}</span>
                                            </div>
                                            <div class="pu-detail-tracker-step {{ $currentStep == 'complete' ? 'current' : '' }}">
                                                <div class="step-icon"><i class="fas {{ $currentStep == 'complete' ? 'fa-check' : 'fa-flag-checkered' }}"></i></div>
                                                <div class="step-label">Complete</div>
                                                <span class="step-date">{{ $currentStep == 'complete' ? $dateComplete : '-' }}</span>
                                            </div>
                                        </div>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                @endif
            </div>
        </div>

        @if ($canHrdProcess)
            <div class="modal fade" id="hrdApprovalModal" tabindex="-1" aria-labelledby="hrdApprovalLabel"
                aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">
                        <form method="POST" action="{{ url('/pengajuan-hrd/update') }}">
                            @csrf
                            <div class="modal-header">
                                <h5 class="modal-title" id="hrdApprovalLabel">Approval HRD</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                    aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                                <input type="hidden" name="id" id="hrd-approval-id">
                                <div class="mb-3">
                                    <label class="form-label">Status</label>
                                    <select class="form-select" name="request_status" id="hrd-approval-status" required onchange="toggleApprovalWorkerVendorFields()">
                                        <option value="">- Pilih Status -</option>
                                        <option value="pengadaan">Pengadaan</option>
                                        <option value="pengerjaan">Pengerjaan</option>
                                        <option value="rejected">Reject</option>
                                    </select>
                                </div>
                                <div id="pengadaan-approval-estimation-group" style="display: none;">
                                    <div class="row">
                                        <div class="col-md-6 mb-3">
                                            <label class="form-label">Estimasi Mulai</label>
                                            <input type="date" class="form-control" name="pengadaan_estimated_started_at"
                                                id="hrd-approval-pengadaan-estimated-start">
                                        </div>
                                        <div class="col-md-6 mb-3">
                                            <label class="form-label">Estimasi Selesai</label>
                                            <input type="date" class="form-control" name="pengadaan_estimated_ended_at"
                                                id="hrd-approval-pengadaan-estimated-end">
                                        </div>
                                    </div>
                                </div>
                                <div id="pengerjaan-approval-fields-group" style="display: none;">
                                    <div class="row">
                                        <div class="col-md-6 mb-3">
                                            <label class="form-label">Estimasi Mulai</label>
                                            <input type="date" class="form-control" name="pengerjaan_estimated_started_at"
                                                id="hrd-approval-pengerjaan-estimated-start">
                                        </div>
                                        <div class="col-md-6 mb-3">
                                            <label class="form-label">Estimasi Selesai</label>
                                            <input type="date" class="form-control" name="pengerjaan_estimated_ended_at"
                                                id="hrd-approval-pengerjaan-estimated-end">
                                        </div>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">Pelaksana</label>
                                        <select class="form-select" name="work_type" id="hrd-approval-work-type" onchange="toggleApprovalWorkerVendor()">
                                            <option value="">- Pilih Pelaksana -</option>
                                            <option value="internal">Internal</option>
                                            <option value="vendor">Vendor</option>
                                        </select>
                                    </div>
                                    <div class="mb-3" id="hrd-approval-vendor-row" style="display: none;">
                                        <label class="form-label">Nama Vendor</label>
                                        <input type="text" class="form-control" name="vendor_name" id="hrd-approval-vendor-name"
                                            placeholder="Nama vendor">
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label" id="hrd-approval-note-label">Catatan HRD</label>
                                    <textarea class="form-control" name="hrd_note" id="hrd-approval-note" rows="4"
                                        placeholder="Tulis catatan HRD"></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>
        @endif

        @if ($canHrdUpdate)
            <div class="modal fade" id="hrdActionModal" tabindex="-1" aria-labelledby="hrdActionLabel"
                aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">
                        <form method="POST" action="{{ url('/pengajuan-hrd/update') }}">
                            @csrf
                            <div class="modal-header">
                                <h5 class="modal-title" id="hrdActionLabel">Update HRD</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                    aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                                <input type="hidden" name="id" id="hrd-id">
                                <div class="mb-3">
                                    <label class="form-label">Status</label>
                                    <select class="form-select" name="request_status" id="hrd-status" required onchange="toggleWorkerVendorFields()">
                                        <option value="">- Pilih Status -</option>
                                        <option value="pengadaan">Pengadaan</option>
                                        <option value="pengerjaan">Pengerjaan</option>
                                        <option value="cancel">Cancel</option>
                                    </select>
                                </div>
                                <div id="pengadaan-estimation-group" style="display: none;">
                                    <div class="row">
                                        <div class="col-md-6 mb-3">
                                            <label class="form-label">Estimasi Mulai</label>
                                            <input type="date" class="form-control" name="pengadaan_estimated_started_at"
                                                id="hrd-pengadaan-estimated-start">
                                        </div>
                                        <div class="col-md-6 mb-3">
                                            <label class="form-label">Estimasi Selesai</label>
                                            <input type="date" class="form-control" name="pengadaan_estimated_ended_at"
                                                id="hrd-pengadaan-estimated-end">
                                        </div>
                                    </div>
                                </div>
                                <div id="pengerjaan-fields-group" style="display: none;">
                                    <div class="row">
                                        <div class="col-md-6 mb-3">
                                            <label class="form-label">Estimasi Mulai</label>
                                            <input type="date" class="form-control" name="pengerjaan_estimated_started_at"
                                                id="hrd-pengerjaan-estimated-start">
                                        </div>
                                        <div class="col-md-6 mb-3">
                                            <label class="form-label">Estimasi Selesai</label>
                                            <input type="date" class="form-control" name="pengerjaan_estimated_ended_at"
                                                id="hrd-pengerjaan-estimated-end">
                                        </div>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">Pelaksana</label>
                                        <select class="form-select" name="work_type" id="hrd-work-type" onchange="toggleWorkerVendor()">
                                            <option value="">- Pilih Pelaksana -</option>
                                            <option value="internal">Internal</option>
                                            <option value="vendor">Vendor</option>
                                        </select>
                                    </div>
                                    <div class="mb-3" id="hrd-vendor-row" style="display: none;">
                                        <label class="form-label">Nama Vendor</label>
                                        <input type="text" class="form-control" name="vendor_name" id="hrd-vendor-name"
                                            placeholder="Nama vendor">
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">Catatan HRD</label>
                                    <textarea class="form-control" name="hrd_note" id="hrd-note" rows="4"
                                        placeholder="Tulis catatan HRD"></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>
        @endif
        {{-- 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
        @push('js')
            <script>
                function getCsrfToken() {
                    const tokenInput = document.querySelector('meta[name="csrf-token"]');
                    return tokenInput ? tokenInput.getAttribute('content') : '';
                }

                function showAjaxFeedback(message, icon = 'success') {
                    if (typeof Swal !== 'undefined') {
                        Swal.fire({
                            icon: icon,
                            title: icon === 'success' ? 'Berhasil' : 'Gagal',
                            text: message,
                        });
                        return;
                    }

                    window.alert(message);
                }

                function flagListRefresh() {
                    sessionStorage.setItem('puListNeedsReload', '1');
                }

                function updateStatusText(value) {
                    const statusField = document.querySelector('input[value="' + @json($list->request_status ?? '') + '"]');
                    if (statusField) {
                        statusField.value = value;
                    }
                }

                function hideActionButtons() {
                    document.querySelectorAll('.draft-confirm-form, .draft-delete-form, #head-approval-form, #hrdActionModal, #hrdApprovalModal').forEach(function(el) {
                        if (el && el.matches && el.matches('form, .modal')) {
                            el.remove();
                        }
                    });
                    document.querySelectorAll('[data-bs-target="#hrdActionModal"], [data-bs-target="#hrdApprovalModal"], [onclick*="submitHeadApproval"], .draft-confirm-form, .draft-delete-form').forEach(function(el) {
                        if (el && el.remove) {
                            el.remove();
                        }
                    });
                }

                function submitAjaxForm(form, onSuccess) {
                    const formData = new FormData(form);
                    formData.append('_token', getCsrfToken());

                    return fetch(form.action, {
                        method: (form.method || 'POST').toUpperCase(),
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest',
                            'Accept': 'application/json'
                        },
                        body: formData,
                        credentials: 'same-origin'
                    }).then(async function(response) {
                        const payload = await response.json().catch(() => ({}));
                        if (!response.ok || payload.success === false) {
                            throw new Error(payload.message || 'Proses gagal');
                        }
                        if (typeof onSuccess === 'function') {
                            onSuccess(payload);
                        }
                        return payload;
                    });
                }

                function refreshDetailButtons(nextStatus) {
                    const statusInput = document.querySelector('#head-approval-status, #hrd-status, input[name="request_status"]');
                    if (statusInput) {
                        statusInput.value = nextStatus;
                    }

                    const statusDisplay = document.querySelector('input.form-control[type="text"][value="{{ $list->request_status ?? '' }}"]');
                    if (statusDisplay) {
                        statusDisplay.value = nextStatus;
                    }

                    const navWrapper = document.querySelector('.nav-wrapper');
                    if (!navWrapper) return;

                    const backButton = navWrapper.querySelector('button.btn-secondary');
                    if (!backButton) return;

                    const currentButtons = navWrapper.querySelectorAll('.ajax-runtime-action');
                    currentButtons.forEach(function(button) { button.remove(); });

                    const addButton = function(html) {
                        backButton.insertAdjacentHTML('afterend', html);
                    };

                    if (nextStatus === 'draft') {
                        addButton(`<a class="btn btn-warning mb-0 ms-1 ajax-runtime-action" href="{{ URL::to($url_menu . '/edit/' . $idencrypt) }}"><i class="fas fa-edit me-1"></i><span class="font-weight-bold">Edit Draft</span></a>`);
                        addButton(`<form method="POST" action="{{ route('user.draft.confirm') }}" class="d-inline-block m-0 draft-confirm-form ajax-runtime-action"><input type="hidden" name="id_encrypt" value="{{ $idencrypt }}"><button type="submit" class="btn btn-success mb-0 ms-2"><i class="fas fa-check me-1"></i><span class="font-weight-bold">Konfirmasi Draft</span></button></form>`);
                        addButton(`<form method="POST" action="{{ route('user.draft.delete') }}" class="d-inline-block m-0 draft-delete-form ajax-runtime-action"><input type="hidden" name="id_encrypt" value="{{ $idencrypt }}"><button type="submit" class="btn btn-danger mb-0 ms-2"><i class="fas fa-trash me-1"></i><span class="font-weight-bold">Hapus Draft</span></button></form>`);
                    }

                    if (nextStatus === 'review' || nextStatus === 'pending') {
                        addButton(`<button class="btn btn-primary mb-0 ms-2 ajax-runtime-action" type="button" data-bs-toggle="modal" data-bs-target="#hrdApprovalModal" data-id="{{ $idencrypt }}" data-status="${nextStatus}" data-note="{{ $list->hrd_note ?? '' }}" data-work-type="{{ $list->work_type ?? '' }}" data-vendor-name="{{ $list->vendor_name ?? '' }}" data-pengadaan-estimated-start="{{ $pengadaanEstimatedStartInput }}" data-pengadaan-estimated-end="{{ $pengadaanEstimatedEndInput }}" data-pengerjaan-estimated-start="{{ $pengerjaanEstimatedStartInput }}" data-pengerjaan-estimated-end="{{ $pengerjaanEstimatedEndInput }}"><i class="fas fa-check me-1"></i><span class="font-weight-bold">Proses</span></button>`);
                    }

                    if (nextStatus === 'pengadaan' || nextStatus === 'pengerjaan' || nextStatus === 'revisi') {
                        addButton(`<button class="btn mb-0 ms-2 px-3 text-white ajax-runtime-action" type="button" style="background-color:#ff6b47;border-color:#ff6b47;border-radius:10px;" data-bs-toggle="modal" data-bs-target="#hrdActionModal" data-id="{{ $idencrypt }}" data-status="${nextStatus}" data-note="{{ $list->hrd_note ?? '' }}" data-work-type="{{ $list->work_type ?? '' }}" data-vendor-name="{{ $list->vendor_name ?? '' }}" data-pengadaan-estimated-start="{{ $pengadaanEstimatedStartInput }}" data-pengadaan-estimated-end="{{ $pengadaanEstimatedEndInput }}" data-pengerjaan-estimated-start="{{ $pengerjaanEstimatedStartInput }}" data-pengerjaan-estimated-end="{{ $pengerjaanEstimatedEndInput }}"><i class="fas fa-pen me-1"></i><span class="font-weight-bold">Update</span></button>`);
                    }
                }

                function bindAjaxForms() {
                    document.querySelectorAll('.draft-confirm-form').forEach(function(form) {
                        if (form.dataset.ajaxBound === '1') return;
                        form.dataset.ajaxBound = '1';
                        form.addEventListener('submit', function(e) {
                            e.preventDefault();
                            const run = function() {
                                submitAjaxForm(form, function(payload) {
                                    showAjaxFeedback(payload.message || 'Draft berhasil dikonfirmasi.');
                                    flagListRefresh();
                                    refreshDetailButtons(payload.request_status || 'pending');
                                    hideActionButtons();
                                }).catch(function(error) {
                                    showAjaxFeedback(error.message || 'Gagal memproses draft.', 'error');
                                });
                            };
                            if (typeof Swal !== 'undefined') {
                                Swal.fire({ title: 'Konfirmasi Draft?', text: 'Setelah dikonfirmasi, pengajuan akan masuk ke alur approval.', icon: 'question', showCancelButton: true, confirmButtonText: 'Ya, Konfirmasi', cancelButtonText: 'Batal', confirmButtonColor: '#0ea5a5' }).then(function(result) { if (result.isConfirmed) run(); });
                            } else if (window.confirm('Konfirmasi draft?')) {
                                run();
                            }
                        });
                    });

                    document.querySelectorAll('.draft-delete-form').forEach(function(form) {
                        if (form.dataset.ajaxBound === '1') return;
                        form.dataset.ajaxBound = '1';
                        form.addEventListener('submit', function(e) {
                            e.preventDefault();
                            const run = function() {
                                submitAjaxForm(form, function(payload) {
                                    showAjaxFeedback(payload.message || 'Draft berhasil dihapus.');
                                    flagListRefresh();
                                    hideActionButtons();
                                }).catch(function(error) {
                                    showAjaxFeedback(error.message || 'Gagal menghapus draft.', 'error');
                                });
                            };
                            if (typeof Swal !== 'undefined') {
                                Swal.fire({ title: 'Hapus Draft?', text: 'Draft yang dihapus tidak dapat dikembalikan.', icon: 'warning', showCancelButton: true, confirmButtonText: 'Ya, Hapus', cancelButtonText: 'Batal', confirmButtonColor: '#ef4444' }).then(function(result) { if (result.isConfirmed) run(); });
                            } else if (window.confirm('Hapus draft?')) {
                                run();
                            }
                        });
                    });
                }

                function bindModalAjaxSubmit(modalSelector, formSelector, confirmTitle, confirmText, successStatus) {
                    const modal = document.querySelector(modalSelector);
                    if (!modal) return;

                    const form = modal.querySelector(formSelector);
                    if (!form || form.dataset.ajaxBound === '1') return;
                    form.dataset.ajaxBound = '1';
                    const returnUrl = @json(url($url_menu));
                    const shouldReturnAfterSuccess = true;

                    form.addEventListener('submit', function(e) {
                        e.preventDefault();
                        const run = function() {
                            submitAjaxForm(form, function(payload) {
                                showAjaxFeedback(payload.message || 'Data berhasil disimpan.');
                                flagListRefresh();
                                const bootstrapModal = bootstrap.Modal.getInstance(modal);
                                if (bootstrapModal) {
                                    bootstrapModal.hide();
                                }
                                if (shouldReturnAfterSuccess) {
                                    window.setTimeout(function() {
                                        window.location.href = returnUrl;
                                    }, 1500);
                                    return;
                                }
                                refreshDetailButtons(payload.request_status || successStatus);
                            }).catch(function(error) {
                                showAjaxFeedback(error.message || 'Gagal menyimpan data.', 'error');
                            });
                        };

                        if (typeof Swal !== 'undefined') {
                            Swal.fire({ title: confirmTitle, text: confirmText, icon: 'question', showCancelButton: true, confirmButtonText: 'Ya', cancelButtonText: 'Batal', confirmButtonColor: '#0f62fe' }).then(function(result) { if (result.isConfirmed) run(); });
                        } else if (window.confirm(confirmTitle)) {
                            run();
                        }
                    });
                }

                document.addEventListener('DOMContentLoaded', function() {
                    bindAjaxForms();
                    bindModalAjaxSubmit('#hrdApprovalModal', 'form', 'Simpan proses HRD?', 'Data akan diproses tanpa reload.', 'review');
                    bindModalAjaxSubmit('#hrdActionModal', 'form', 'Simpan update HRD?', 'Data akan disimpan tanpa reload.', 'pengadaan');
                });

                const hrdActionModal = document.getElementById('hrdActionModal');
                if (hrdActionModal) {
                    hrdActionModal.addEventListener('show.bs.modal', function(event) {
                        const button = event.relatedTarget;
                        const id = button.getAttribute('data-id') || '';
                        const status = button.getAttribute('data-status') || 'pengadaan';
                        const workType = button.getAttribute('data-work-type') || 'internal';
                        const vendorName = button.getAttribute('data-vendor-name') || '';
                        const note = button.getAttribute('data-note') || '';
                        const pengadaanEstimatedStart = button.getAttribute('data-pengadaan-estimated-start') || '';
                        const pengadaanEstimatedEnd = button.getAttribute('data-pengadaan-estimated-end') || '';
                        const pengerjaanEstimatedStart = button.getAttribute('data-pengerjaan-estimated-start') || '';
                        const pengerjaanEstimatedEnd = button.getAttribute('data-pengerjaan-estimated-end') || '';

                        const inputId = document.getElementById('hrd-id');
                        const inputStatus = document.getElementById('hrd-status');
                        const inputWorkType = document.getElementById('hrd-work-type');
                        const inputVendorName = document.getElementById('hrd-vendor-name');
                        const inputNote = document.getElementById('hrd-note');
                        const inputPengadaanEstimatedStart = document.getElementById('hrd-pengadaan-estimated-start');
                        const inputPengadaanEstimatedEnd = document.getElementById('hrd-pengadaan-estimated-end');
                        const inputPengerjaanEstimatedStart = document.getElementById('hrd-pengerjaan-estimated-start');
                        const inputPengerjaanEstimatedEnd = document.getElementById('hrd-pengerjaan-estimated-end');

                        if (inputId) inputId.value = id;
                        if (inputWorkType) inputWorkType.value = workType || 'internal';
                        if (inputVendorName) inputVendorName.value = vendorName;
                        if (inputNote) inputNote.value = note;
                        if (inputPengadaanEstimatedStart) inputPengadaanEstimatedStart.value = pengadaanEstimatedStart;
                        if (inputPengadaanEstimatedEnd) inputPengadaanEstimatedEnd.value = pengadaanEstimatedEnd;
                        if (inputPengerjaanEstimatedStart) inputPengerjaanEstimatedStart.value = pengerjaanEstimatedStart;
                        if (inputPengerjaanEstimatedEnd) inputPengerjaanEstimatedEnd.value = pengerjaanEstimatedEnd;

                        // ── Filter opsi status berdasarkan status saat ini ──
                        if (inputStatus) {
                            inputStatus.value = status;

                            const optPengadaan  = inputStatus.querySelector('option[value="pengadaan"]');
                            const optPengerjaan = inputStatus.querySelector('option[value="pengerjaan"]');
                            const optCancel     = inputStatus.querySelector('option[value="cancel"]');

                            const currentStatus = (status || '').toLowerCase();

                            if (currentStatus === 'pengadaan') {
                                // Dari pengadaan: bisa update pengadaan, lanjut ke pengerjaan, atau cancel
                                if (optPengadaan)  { optPengadaan.disabled  = false; optPengadaan.style.display  = ''; }
                                if (optPengerjaan) { optPengerjaan.disabled = false; optPengerjaan.style.display = ''; }
                                if (optCancel)     { optCancel.disabled     = false; optCancel.style.display     = ''; }
                            } else if (currentStatus === 'pengerjaan') {
                                // Dari pengerjaan: bisa update pengerjaan atau cancel
                                if (optPengadaan)  { optPengadaan.disabled  = true;  optPengadaan.style.display  = 'none'; }
                                if (optPengerjaan) { optPengerjaan.disabled = false; optPengerjaan.style.display = ''; }
                                if (optCancel)     { optCancel.disabled     = false; optCancel.style.display     = ''; }
                            } else if (currentStatus === 'revisi') {
                                // Dari revisi: bisa ke pengerjaan atau cancel
                                if (optPengadaan)  { optPengadaan.disabled  = true;  optPengadaan.style.display  = 'none'; }
                                if (optPengerjaan) { optPengerjaan.disabled = false; optPengerjaan.style.display = ''; }
                                if (optCancel)     { optCancel.disabled     = false; optCancel.style.display     = ''; }
                                inputStatus.value = '';
                            } else {
                                // Default: tampilkan semua
                                if (optPengadaan)  { optPengadaan.disabled  = false; optPengadaan.style.display  = ''; }
                                if (optPengerjaan) { optPengerjaan.disabled = false; optPengerjaan.style.display = ''; }
                                if (optCancel)     { optCancel.disabled     = false; optCancel.style.display     = ''; }
                            }
                        }

                        toggleWorkerVendorFields();
                        toggleWorkerVendor();
                    });
                }

                function toggleWorkerVendorFields() {
                    const statusSelect = document.getElementById('hrd-status');
                    const pengadaanGroup = document.getElementById('pengadaan-estimation-group');
                    const pengerjaanGroup = document.getElementById('pengerjaan-fields-group');
                    const pengadaanStart = document.getElementById('hrd-pengadaan-estimated-start');
                    const pengadaanEnd = document.getElementById('hrd-pengadaan-estimated-end');
                    const pengerjaanStart = document.getElementById('hrd-pengerjaan-estimated-start');
                    const pengerjaanEnd = document.getElementById('hrd-pengerjaan-estimated-end');

                    if (!statusSelect || !pengerjaanGroup) return;

                    const selectedStatus = (statusSelect.value || '').toLowerCase();
                    if (pengadaanGroup) {
                        pengadaanGroup.style.display = selectedStatus === 'pengadaan' ? 'block' : 'none';
                    }
                    pengerjaanGroup.style.display = selectedStatus === 'pengerjaan' ? 'block' : 'none';
                    if (pengadaanStart) pengadaanStart.required = selectedStatus === 'pengadaan';
                    if (pengadaanEnd) pengadaanEnd.required = selectedStatus === 'pengadaan';
                    if (pengerjaanStart) pengerjaanStart.required = selectedStatus === 'pengerjaan';
                    if (pengerjaanEnd) pengerjaanEnd.required = selectedStatus === 'pengerjaan';
                }

                function toggleWorkerVendor() {
                    const workTypeSelect = document.getElementById('hrd-work-type');
                    const vendorRow = document.getElementById('hrd-vendor-row');

                    if (!workTypeSelect || !vendorRow) return;

                    vendorRow.style.display = workTypeSelect.value === 'vendor' ? 'block' : 'none';
                }

                const hrdApprovalModal = document.getElementById('hrdApprovalModal');
                if (hrdApprovalModal) {
                    hrdApprovalModal.addEventListener('show.bs.modal', function(event) {
                        const button = event.relatedTarget;
                        const id = button.getAttribute('data-id') || '';
                        const status = button.getAttribute('data-status') || '';
                        const normalizedStatus = (status || '').toLowerCase();
                        const workType = button.getAttribute('data-work-type') || 'internal';
                        const vendorName = button.getAttribute('data-vendor-name') || '';
                        const note = button.getAttribute('data-note') || '';
                        const pengadaanEstimatedStart = button.getAttribute('data-pengadaan-estimated-start') || '';
                        const pengadaanEstimatedEnd = button.getAttribute('data-pengadaan-estimated-end') || '';
                        const pengerjaanEstimatedStart = button.getAttribute('data-pengerjaan-estimated-start') || '';
                        const pengerjaanEstimatedEnd = button.getAttribute('data-pengerjaan-estimated-end') || '';

                        const inputId = document.getElementById('hrd-approval-id');
                        const inputStatus = document.getElementById('hrd-approval-status');
                        const inputWorkType = document.getElementById('hrd-approval-work-type');
                        const inputVendorName = document.getElementById('hrd-approval-vendor-name');
                        const inputNote = document.getElementById('hrd-approval-note');
                        const inputPengadaanEstimatedStart = document.getElementById('hrd-approval-pengadaan-estimated-start');
                        const inputPengadaanEstimatedEnd = document.getElementById('hrd-approval-pengadaan-estimated-end');
                        const inputPengerjaanEstimatedStart = document.getElementById('hrd-approval-pengerjaan-estimated-start');
                        const inputPengerjaanEstimatedEnd = document.getElementById('hrd-approval-pengerjaan-estimated-end');

                        if (inputId) inputId.value = id;
                        if (inputStatus) {
                            if (normalizedStatus === 'reject' || normalizedStatus === 'rejected') {
                                inputStatus.value = 'rejected';
                            } else if (normalizedStatus === 'pengadaan' || normalizedStatus === 'pengerjaan') {
                                inputStatus.value = normalizedStatus;
                            } else {
                                inputStatus.value = '';
                            }
                        }
                        if (inputWorkType) inputWorkType.value = workType || 'internal';
                        if (inputVendorName) inputVendorName.value = vendorName;
                        if (inputNote) inputNote.value = note;
                        if (inputPengadaanEstimatedStart) inputPengadaanEstimatedStart.value = pengadaanEstimatedStart;
                        if (inputPengadaanEstimatedEnd) inputPengadaanEstimatedEnd.value = pengadaanEstimatedEnd;
                        if (inputPengerjaanEstimatedStart) inputPengerjaanEstimatedStart.value = pengerjaanEstimatedStart;
                        if (inputPengerjaanEstimatedEnd) inputPengerjaanEstimatedEnd.value = pengerjaanEstimatedEnd;

                        toggleApprovalWorkerVendorFields();
                        toggleApprovalWorkerVendor();
                        toggleApprovalNoteRequired();
                    });
                }

                function toggleApprovalWorkerVendorFields() {
                    const statusSelect = document.getElementById('hrd-approval-status');
                    const pengadaanGroup = document.getElementById('pengadaan-approval-estimation-group');
                    const pengerjaanGroup = document.getElementById('pengerjaan-approval-fields-group');
                    const pengadaanStart = document.getElementById('hrd-approval-pengadaan-estimated-start');
                    const pengadaanEnd = document.getElementById('hrd-approval-pengadaan-estimated-end');
                    const pengerjaanStart = document.getElementById('hrd-approval-pengerjaan-estimated-start');
                    const pengerjaanEnd = document.getElementById('hrd-approval-pengerjaan-estimated-end');

                    if (!statusSelect || !pengerjaanGroup) return;

                    const selectedStatus = (statusSelect.value || '').toLowerCase();
                    if (pengadaanGroup) {
                        pengadaanGroup.style.display = selectedStatus === 'pengadaan' ? 'block' : 'none';
                    }
                    pengerjaanGroup.style.display = selectedStatus === 'pengerjaan' ? 'block' : 'none';
                    if (pengadaanStart) pengadaanStart.required = selectedStatus === 'pengadaan';
                    if (pengadaanEnd) pengadaanEnd.required = selectedStatus === 'pengadaan';
                    if (pengerjaanStart) pengerjaanStart.required = selectedStatus === 'pengerjaan';
                    if (pengerjaanEnd) pengerjaanEnd.required = selectedStatus === 'pengerjaan';

                    toggleApprovalNoteRequired();
                }

                function toggleApprovalNoteRequired() {
                    const statusSelect = document.getElementById('hrd-approval-status');
                    const noteInput = document.getElementById('hrd-approval-note');
                    const noteLabel = document.getElementById('hrd-approval-note-label');

                    if (!statusSelect || !noteInput) return;

                    const selectedStatus = (statusSelect.value || '').toLowerCase();
                    const isRejected = selectedStatus === 'rejected';

                    noteInput.required = isRejected;

                    if (noteLabel) {
                        noteLabel.textContent = isRejected ? 'Catatan HRD (wajib diisi)' : 'Catatan HRD';
                    }
                }

                function toggleApprovalWorkerVendor() {
                    const workTypeSelect = document.getElementById('hrd-approval-work-type');
                    const vendorRow = document.getElementById('hrd-approval-vendor-row');

                    if (!workTypeSelect) return;

                    const isVendor = workTypeSelect.value === 'vendor';

                    if (vendorRow) {
                        vendorRow.style.display = isVendor ? 'block' : 'none';
                    }
                }

                function submitHeadApproval(status) {
                    const form = document.getElementById('head-approval-form');
                    const statusInput = document.getElementById('head-approval-status');
                    const noteInput = document.getElementById('head-approval-note');

                    if (!form || !statusInput || !noteInput) {
                        return;
                    }

                    const submitForm = (note = '') => {
                        statusInput.value = status;
                        noteInput.value = note;
                        form.submit();
                    };

                    if (status === 'rejected') {
                        // Tampilkan modal catatan penolakan
                        const modalHtml = `
                            <div class="modal fade" id="headRejectModal" tabindex="-1" aria-hidden="true">
                                <div class="modal-dialog modal-dialog-centered">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title">Catatan Penolakan</h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                        </div>
                                        <div class="modal-body">
                                            <div class="mb-3">
                                                <label class="form-label">Catatan <span class="text-danger">(wajib diisi)</span></label>
                                                <textarea class="form-control" id="head-reject-note" rows="4" placeholder="Tulis catatan penolakan"></textarea>
                                            </div>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                                            <button type="button" class="btn btn-danger" id="head-reject-submit">Tolak</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        `;

                        // Hapus modal lama jika ada
                        const existingModal = document.getElementById('headRejectModal');
                        if (existingModal) existingModal.remove();

                        document.body.insertAdjacentHTML('beforeend', modalHtml);

                        const modal = new bootstrap.Modal(document.getElementById('headRejectModal'));
                        modal.show();

                        document.getElementById('head-reject-submit').addEventListener('click', function() {
                            const note = document.getElementById('head-reject-note').value.trim();
                            if (!note) {
                                document.getElementById('head-reject-note').classList.add('is-invalid');
                                return;
                            }
                            modal.hide();
                            submitForm(note);
                        });

                        return;
                    }

                    // Setuju — tampilkan modal konfirmasi
                    const modalHtml = `
                        <div class="modal fade" id="headApproveModal" tabindex="-1" aria-hidden="true">
                            <div class="modal-dialog modal-dialog-centered">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title">Catatan Persetujuan</h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                    </div>
                                    <div class="modal-body">
                                        <div class="mb-3">
                                            <label class="form-label">Catatan</label>
                                            <textarea class="form-control" id="head-approve-note" rows="4" placeholder="Tulis catatan"></textarea>
                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                                        <button type="button" class="btn btn-success" id="head-approve-submit">Setujui</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    `;

                    // Hapus modal lama jika ada
                    const existingModal = document.getElementById('headApproveModal');
                    if (existingModal) existingModal.remove();

                    document.body.insertAdjacentHTML('beforeend', modalHtml);

                    const modal = new bootstrap.Modal(document.getElementById('headApproveModal'));
                    modal.show();

                    document.getElementById('head-approve-submit').addEventListener('click', function() {
                        const note = document.getElementById('head-approve-note').value.trim();
                        modal.hide();
                        submitForm(note);
                    });
                }

                document.querySelectorAll('.draft-confirm-form').forEach(function(form) {
                    form.addEventListener('submit', function(e) {
                        e.preventDefault();
                        Swal.fire({
                            title: 'Konfirmasi Draft?',
                            text: 'Setelah dikonfirmasi, pengajuan akan masuk ke alur approval.',
                            icon: 'question',
                            showCancelButton: true,
                            confirmButtonText: 'Ya, Konfirmasi',
                            cancelButtonText: 'Batal',
                            confirmButtonColor: '#0ea5a5'
                        }).then(function(result) {
                            if (result.isConfirmed) {
                                form.submit();
                            }
                        });
                    });
                });

                document.querySelectorAll('.draft-delete-form').forEach(function(form) {
                    form.addEventListener('submit', function(e) {
                        e.preventDefault();
                        Swal.fire({
                            title: 'Hapus Draft?',
                            text: 'Draft yang dihapus tidak dapat dikembalikan.',
                            icon: 'warning',
                            showCancelButton: true,
                            confirmButtonText: 'Ya, Hapus',
                            cancelButtonText: 'Batal',
                            confirmButtonColor: '#ef4444'
                        }).then(function(result) {
                            if (result.isConfirmed) {
                                form.submit();
                            }
                        });
                    });
                });

                $(document).ready(function() {
                    //set disable all input form
                    $('#{{ $dmenu }}-form').find('label').addClass('disabled');
                    $('#{{ $dmenu }}-form').find('input').attr('disabled', 'disabled');
                    $('#{{ $dmenu }}-form').find('select').attr('disabled', 'disabled');
                    $('#{{ $dmenu }}-form').find('textarea').attr('disabled', 'disabled');
                    $('#{{ $dmenu }}-form').find('input[key="true"]').parent('.form-group').css('display',
                        '');
                    $('#{{ $dmenu }}-form').find('select[key="true"]').parent('.form-group').css('display',
                        '');
                    $('.icon-modal-search').css('display', 'none');
                    // function enable input form
                    function enable_text() {
                        $('#{{ $dmenu }}-form').find('label').removeClass('disabled');
                        $('#{{ $dmenu }}-form').find('input').removeAttr('disabled');
                        $('#{{ $dmenu }}-form').find('select').removeAttr('disabled');
                        $('#{{ $dmenu }}-form').find('textarea').removeAttr('disabled');
                        $('#{{ $dmenu }}-form').find('input[key="true"]').parent('.form-group').css('display',
                            'none');
                        $('#{{ $dmenu }}-form').find('select[key="true"]').parent('.form-group').css('display',
                            'none');
                        $('.icon-modal-search').css('display', '');
                    }
                    //event button edit
                    $('#{{ $dmenu }}-edit').click(function() {
                        enable_text();
                        $(this).css('display', 'none');
                        $('#{{ $dmenu }}-save').css('display', '');
                    });
                });
            </script>
        @endpush
    @endif
@endsection