@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    @php
        $requestStatus = strtolower((string) ($list->request_status ?? ''));
        $isDraftRequest = $requestStatus === 'draft';
    @endphp

    {{-- ===== CSS Tracker (sama persis dengan auto/show.blade.php) ===== --}}
    <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>

    {{-- ===== Navbar aksi ===== --}}
    <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">
                        <a class="btn btn-secondary mb-0" href="{{ $back_url ?? url($url_menu) }}">
                            <i class="fas fa-circle-left me-1"></i>
                            <span class="font-weight-bold">Kembali</span>
                        </a>
                        @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 }}">
                                <input type="hidden" name="return_url" value="{{ $back_url ?? url($url_menu) }}">
                                <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 }}">
                                <input type="hidden" name="return_url" value="{{ $back_url ?? url($url_menu) }}">
                                <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>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- ===== Hitung variabel tracking ===== --}}
    @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 '-';
            }
        };
        $formatDateRange = function ($start, $end) use ($formatTrackingDate) {
            $startDate = $formatTrackingDate($start);

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

            return $startDate . ' s/d ' . $formatTrackingDate($end);
        };

        $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 = $formatDateRange($list->pengadaan_estimated_started_at ?? null, $list->pengadaan_estimated_ended_at ?? null);
        $estimatedPengerjaan = $formatDateRange($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

    {{-- ===== Body: 2 kolom (detail kiri | tracking kanan) ===== --}}
    <div class="container-fluid py-4">
        @include('components.alert')
        <div class="row">

            {{-- ── Kolom kiri: detail pengajuan ── --}}
            <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">

                            @if (!empty($list->id_trans))
                            <div class="row mb-3">
                                <div class="col-12">
                                    <label class="form-control-label">ID Transaksi</label>
                                    <input class="form-control" type="text" value="{{ $list->id_trans }}" disabled>
                                </div>
                            </div>
                            @endif

                            <div class="row">
                                <div class="col-12">
                                    <label class="form-control-label">Area</label>
                                    <input class="form-control" type="text" value="{{ $list->nama_area ?? '' }}" disabled>
                                </div>
                            </div>
                            <div class="row mt-3">
                                <div class="col-12">
                                    <label class="form-control-label">Jenis Pelaksana</label>
                                    <input class="form-control" type="text" value="{{ $list->work_type ?? '' }}" disabled>
                                </div>
                            </div>

                            <div class="row mt-3">
                                <div class="col-12">
                                    <label class="form-control-label">Nama Pemohon</label>
                                    <input class="form-control" type="text" value="{{ $list->requester_name ?? '' }}" disabled>
                                </div>
                            </div>

                            <div class="row mt-3">
                                <div class="col-12">
                                    <label class="form-control-label">Deskripsi Pekerjaan</label>
                                    <textarea class="form-control" rows="4" disabled>{{ $list->job_description ?? '' }}</textarea>
                                </div>
                            </div>

                            <div class="row mt-3">
                                <div class="col-12">
                                    <label class="form-control-label">Nama Vendor</label>
                                    <input class="form-control" type="text" value="{{ $list->vendor_name ?? '' }}" disabled>
                                </div>
                            </div>

                            <div class="row mt-3">
                                <div class="col-12">
                                    <label class="form-control-label">Status</label>
                                    <input class="form-control" type="text" value="{{ $list->request_status ?? '' }}" disabled>
                                </div>
                            </div>

                            {{-- ── 1. Lampiran Awal / Pengajuan ── --}}
                            <div class="row mt-3">
                                <div class="col-12">
                                    <label class="form-control-label text-uppercase text-xs font-weight-bolder text-primary">
                                        <i class="fas fa-paperclip me-1"></i>Lampiran Awal / Pengajuan
                                    </label>
                                    @if (!empty($attachment_files))
                                        <div class="d-flex flex-wrap gap-2 mt-2">
                                            @foreach ($attachment_files as $attachmentFile)
                                                @php
                                                    $ext = strtolower(pathinfo($attachmentFile, PATHINFO_EXTENSION));
                                                    $isPdf = $ext === 'pdf';
                                                    $fileUrl = route('attachment.show', ['path' => $attachmentFile]);
                                                @endphp
                                                <div class="mb-3">
                                                    @if ($isPdf)
                                                        <a href="{{ $fileUrl }}" 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($attachmentFile) }}</span>
                                                        </a>
                                                    @else
                                                        <a href="{{ $fileUrl }}" target="_blank" rel="noopener noreferrer">
                                                            <img src="{{ $fileUrl }}"
                                                                alt="Lampiran Awal"
                                                                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
                                        @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
                                        <div class="p-3 bg-light rounded mt-2 border text-center">
                                            <div class="d-flex flex-column align-items-center gap-2">
                                                <div>
                                                    <i class="fas fa-exclamation-triangle text-warning me-1"></i>
                                                    <span class="text-muted text-sm font-weight-bold">Belum ada lampiran file / gambar yang terupload</span>
                                                </div>
                                                @if ($isCreator)
                                                    <button type="button" class="btn btn-warning btn-sm mb-0 mt-1"
                                                        data-bs-toggle="modal" data-bs-target="#userPageUploadAttachmentModal">
                                                        <i class="fas fa-upload me-1"></i>Upload Lampiran
                                                    </button>
                                                @endif
                                            </div>
                                        </div>
                                    @endif
                                </div>
                            </div>

                            {{-- ── 2. Lampiran Catatan Revisi ── --}}
                            @php
                                $revFiles = isset($revision_attachment_files) ? $revision_attachment_files : [];
                            @endphp
                            <div class="row mt-4">
                                <div class="col-12">
                                    <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($revFiles))
                                        <div class="d-flex flex-wrap gap-2 mt-2">
                                            @foreach ($revFiles as $revFile)
                                                @php
                                                    $revExt = strtolower(pathinfo($revFile, PATHINFO_EXTENSION));
                                                    $revIsPdf = $revExt === 'pdf';
                                                    $revUrl = route('attachment.show', ['path' => $revFile]);
                                                @endphp
                                                <div class="mb-3">
                                                    @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>
                            </div>

                            {{-- ── 3. Dokumentasi Hasil Pekerjaan Petugas ── --}}
                            @php
                                $userShowStatus = strtolower((string) ($list->request_status ?? $list->status ?? ''));
                                $userIsNotDraft = $userShowStatus !== '' && $userShowStatus !== 'draft';
                                $userDocs = isset($show_documentation) ? $show_documentation : collect([]);
                                $authUser = auth()->user();
                                $authRoles = $authUser ? array_map('trim', explode(',', strtolower((string) ($authUser->idroles ?? '')))) : [];
                                $isHrdOrAdminUser = in_array('admins', $authRoles, true) || in_array('admin', $authRoles, true) || in_array('hrd', $authRoles, true);
                            @endphp

                            @if ($userIsNotDraft)
                                <div class="row mt-4">
                                    <div class="col-12">
                                        <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 ($userDocs->count() > 0)
                                            <div class="d-flex flex-wrap gap-3 mt-2">
                                                @foreach ($userDocs as $doc)
                                                    @php
                                                        $docPath = $doc->file ?? $doc->file_path ?? '';
                                                        $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') : '';
                                                        
                                                        // Tentukan label keterangan (Awal vs Setelah Revisi)
                                                        $hasRevision = !empty($revFiles);
                                                        if ($hasRevision && $userDocs->count() > 1 && $loop->last) {
                                                            $docLabel = 'Dokumentasi Setelah Revisi';
                                                        } else {
                                                            $docLabel = 'Dokumentasi Awal';
                                                        }
                                                    @endphp
                                                    <div class="d-flex flex-column align-items-center mb-3">
                                                        <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>
                                </div>
                            @endif

                            <hr class="horizontal dark">
                        </div>
                        <div class="card-footer align-items-center pt-0 pb-2"></div>
                    </form>
                </div>
            </div>

            {{-- ── Kolom kanan: tracking status pekerjaan (sama persis dengan akun head) ── --}}
            <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">

                        {{-- Tabel catatan approval --}}
                        <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">

                        {{-- Progress tracker step-by-step --}}
                        @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">
                                    {{-- Step 1: Pending --}}
                                    <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>
                                    {{-- Step 2: Review --}}
                                    <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>
                                    {{-- Step 3: Pengadaan --}}
                                    <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>
                                    {{-- Step 4: Pengerjaan --}}
                                    <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>
                                    {{-- Step 5: Complete --}}
                                    <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>

    </div>{{-- /container --}}

    {{-- Modal Upload Lampiran Pengajuan (di luar form utama) --}}
    <div class="modal fade" id="userPageUploadAttachmentModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <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 text-start">
                        <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>

    @if (($isHrdOrAdminUser ?? false) && ($userDocs->count() ?? 0) === 0)
        {{-- Modal Upload Dokumentasi dari user show page (di luar form utama) --}}
        <div class="modal fade" id="userPageUploadDocModal" 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="userPageUploadDocForm">
                        @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 text-start">
                            <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="userPageDocFiles"
                                    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="userPageDocSubmit">
                                <i class="fas fa-save me-1"></i>Simpan Dokumentasi
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    @endif

    @if ($jsmenu == '1')
        @if (view()->exists("js.{$dmenu}"))
            @push('addjs')
                @include('js.' . $dmenu);
            @endpush
        @else
            @push('addjs')
                <script>
                    Swal.fire({
                        title: 'JS Not Found!!',
                        text: 'Please Create File JS',
                        icon: 'error',
                        confirmButtonColor: '#028284'
                    });
                </script>
            @endpush
        @endif
    @endif
@endsection

@push('js')
    <script>
        document.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();
                    }
                });
            });
        });
    </script>
@endpush