@php
$pengajuanRoute = $puRouteBases['truser'] ?? 'user';
$displayItems = $table_detail_d ?? collect();
$sessionUsername = strtolower(trim((string) (session('username') ?? '')));
$modelUsername = strtolower(trim((string) ($currentUser->username ?? '')));
$usernameFromId = $currentUserId
? strtolower((string) (\Illuminate\Support\Facades\DB::table('users')->where('id', $currentUserId)->value('username') ?? ''))
: '';
$currentUsername = $sessionUsername !== '' && !is_numeric($sessionUsername)
? $sessionUsername
: ($modelUsername !== '' && !is_numeric($modelUsername)
? $modelUsername
: $usernameFromId);

$hrdUserIds = \Illuminate\Support\Facades\DB::table('users')
->where(function ($q) {
$q->whereRaw("FIND_IN_SET('hrdxxx', REPLACE(LOWER(idroles), ' ', ''))")
->orWhereRaw("FIND_IN_SET('hrd', REPLACE(LOWER(idroles), ' ', ''))");
})->pluck('id')->map(fn ($id) => (int) $id)->all();

$hrdUsernames = \Illuminate\Support\Facades\DB::table('users')
->where(function ($q) {
$q->whereRaw("FIND_IN_SET('hrdxxx', REPLACE(LOWER(idroles), ' ', ''))")
->orWhereRaw("FIND_IN_SET('hrd', REPLACE(LOWER(idroles), ' ', ''))");
})->pluck('username')->map(fn ($u) => strtolower((string) $u))->all();

$isCurrentViewerHrd = ($currentUserId && in_array((int) $currentUserId, $hrdUserIds, true))
|| ($currentUsername !== '' && in_array($currentUsername, $hrdUsernames, true));
$isCurrentViewerAdmin = $isAdmin;

$isHrdSubmission = function ($item) use ($hrdUserIds, $hrdUsernames) {
$uid = isset($item->user_id) ? (string) $item->user_id : '';
$uidInt = is_numeric($uid) ? (int) $uid : null;
$createdBy = strtolower((string) ($item->user_create ?? ''));
if ($uidInt !== null && in_array($uidInt, $hrdUserIds, true)) return true;
if ($uid !== '' && !is_numeric($uid) && in_array(strtolower($uid), $hrdUsernames, true)) return true;
return $createdBy !== '' && in_array($createdBy, $hrdUsernames, true);
};

$isVisibleForCurrentUser = function ($item) use ($currentUserId, $currentUsername, $isHrdSubmission, $isCurrentViewerHrd, $isCurrentViewerAdmin) {
if ($isCurrentViewerAdmin) return true;
$uid = isset($item->user_id) ? (string) $item->user_id : '';
$createdBy = strtolower((string) ($item->user_create ?? ''));
$isHrd = $isHrdSubmission($item);
$byUserId = $currentUserId && $uid !== '' && is_numeric($uid) && (int) $uid === (int) $currentUserId;
$byLegacyUserId = $currentUsername !== '' && $uid !== '' && !is_numeric($uid) && strtolower($uid) === $currentUsername;
$byUserCreate = $currentUsername !== '' && $createdBy === $currentUsername;
if ($isCurrentViewerHrd && $isHrd && ($byUserId || $byLegacyUserId || $byUserCreate)) return true;
if ($isHrd) return false;
return $byUserId || $byLegacyUserId || $byUserCreate;
};

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

if ($displayItems->isEmpty()) {
$displayItems = \Illuminate\Support\Facades\DB::table('tr_non_periodic')
->leftJoin('ms_area', 'tr_non_periodic.area_id', '=', 'ms_area.id')
->select('tr_non_periodic.*', 'ms_area.nama_area as area_name')
->orderBy('tr_non_periodic.created_at', 'desc')
->get();
}
$areaMap = \Illuminate\Support\Facades\DB::table('ms_area')
->pluck('nama_area', 'id');

$displayItems = $displayItems->filter(fn ($item) => $isVisibleForCurrentUser($item))->map(function ($item) use ($areaMap) {
if (empty($item->area_name) && !empty($item->area_id)) {
$item->area_name = $areaMap->get((int) $item->area_id)
?? $areaMap->get((string) $item->area_id);
}

return $item;
})->values();
$statusField = 'request_status';

$verifikasiItems = $displayItems->filter(fn ($i) => strtolower($i->{$statusField} ?? '') === 'verifikasi');
$verifikasiCount = $verifikasiItems->count();
$pendingCount = $displayItems->filter(fn ($i) => in_array(strtolower($i->{$statusField} ?? ''), ['review','pending','approved']) && empty($i->hrd_approval_date))->count();
$progressCount = $displayItems->filter(function ($i) use ($statusField) {
$s = strtolower($i->{$statusField} ?? '');
return (in_array($s, ['review','approved']) && !empty($i->hrd_approval_date)) || in_array($s, ['pengadaan','pengerjaan','revisi']);
})->count();
$completedCount = $displayItems->where($statusField, 'completed')->count();
$historyItems = $displayItems->filter(function ($item) use ($statusField) {
$statusValue = strtolower($item->{$statusField} ?? '');
// Normalize status
if (in_array($statusValue, ['reject'])) {
$statusValue = 'rejected';
} elseif (in_array($statusValue, ['canceled', 'cancelled'])) {
$statusValue = 'cancel';
}
return in_array($statusValue, ['completed', 'rejected', 'cancel']);
});

$draftItems = $displayItems->filter(function ($item) use ($statusField) {
return strtolower($item->{$statusField} ?? '') === 'draft';
});

$trackingItems = $displayItems->filter(function ($item) use ($statusField) {
$statusValue = strtolower($item->{$statusField} ?? '');
return in_array($statusValue, ['pending', 'review', 'pengadaan', 'pengerjaan', 'revisi', 'verifikasi'])
|| (!empty($item->head_approval_date) && in_array($statusValue, ['approved']));
});
@endphp

{{-- Header + Add Button --}}
<div class="row mb-4">
    <div class="col-12">
        <div class="card">
            <div class="card-body d-flex flex-column flex-md-row align-items-start align-items-md-center justify-content-between gap-3">
                <div>
                    <h6 class="mb-1">Pengajuan Pekerjaan PU</h6>
                </div>
                <div class="d-flex flex-wrap gap-2">
                    <a class="btn btn-primary mb-0" href="{{ URL::to($pengajuanRoute . '/add') }}">
                        <i class="fas fa-plus me-1"></i>Tambah Pengajuan
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- KPI Cards --}}
<div class="row">
    <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
        <div class="card pu-kpi-card">
            <div class="card-body p-3">
                <div class="row">
                    <div class="col-8">
                        <div class="numbers">
                            <p class="text-sm mb-0 text-uppercase font-weight-bold">Total Pengajuan</p>
                            <h5 class="font-weight-bolder">{{ $displayItems->count() }}</h5>
                        </div>
                    </div>
                    <div class="col-4 text-end">
                        <div class="icon icon-shape bg-primary shadow-primary text-center rounded-circle"><i class="ni ni-bullet-list-67 text-lg opacity-10"></i></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
        <div class="card pu-kpi-card">
            <div class="card-body p-3">
                <div class="row">
                    <div class="col-8">
                        <div class="numbers">
                            <p class="text-sm mb-0 text-uppercase font-weight-bold">Menunggu Verifikasi</p>
                            <h5 class="font-weight-bolder">{{ $verifikasiCount }}</h5>
                        </div>
                    </div>
                    <div class="col-4 text-end">
                        <div class="icon icon-shape bg-primary shadow-primary text-center rounded-circle"><i class="fas fa-clipboard-check text-lg opacity-10"></i></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
        <div class="card pu-kpi-card">
            <div class="card-body p-3">
                <div class="row">
                    <div class="col-8">
                        <div class="numbers">
                            <p class="text-sm mb-0 text-uppercase font-weight-bold">Dalam Proses</p>
                            <h5 class="font-weight-bolder">{{ $progressCount }}</h5>
                        </div>
                    </div>
                    <div class="col-4 text-end">
                        <div class="icon icon-shape bg-primary shadow-primary text-center rounded-circle"><i class="ni ni-settings text-lg opacity-10"></i></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-3 col-sm-6">
        <div class="card pu-kpi-card">
            <div class="card-body p-3">
                <div class="row">
                    <div class="col-8">
                        <div class="numbers">
                            <p class="text-sm mb-0 text-uppercase font-weight-bold">Selesai</p>
                            <h5 class="font-weight-bolder">{{ $completedCount }}</h5>
                        </div>
                    </div>
                    <div class="col-4 text-end">
                        <div class="icon icon-shape bg-primary shadow-primary text-center rounded-circle"><i class="ni ni-check-bold text-lg opacity-10"></i></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Alert sudah di-include di parent daftar_pu.blade.php --}}

{{-- Verifikasi Section --}}
@if($verifikasiCount > 0)
<div class="row mt-4">
    <div class="col-12">
        <div class="card pu-attention-card">
            <div class="card-header border-0 pb-3 pu-attention-header">
                <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-3">
                    <div>
                        <h5 class="mb-1 text-dark"><i class="fas fa-clipboard-check text-warning me-2"></i><strong>Verifikasi Pekerjaan</strong></h5>
                        <p class="text-sm mb-0 text-muted">Pekerjaan yang diselesaikan petugas dan memerlukan verifikasi Anda</p>
                    </div>
                    <span class="badge bg-primary text-white px-3 py-2">{{ $verifikasiCount }} Task</span>
                </div>
            </div>
            <div class="card-body pt-3">
                <div class="table-responsive">
                    <table class="table display" id="list_user_verifikasi">
                        <thead class="thead-light pu-thead-teal">
                            <tr>
                                <th>Aksi</th>
                                <th>ID Trans</th>
                                <th>Tanggal Pengajuan</th>
                                <th>Area</th>
                                <th>Deskripsi</th>
                                <th>Pelaksana</th>
                                <th>Dokumentasi</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($verifikasiItems as $detail)
                            @php
                            $primary = isset($detail->id) ? $detail->id : '';
                            $dateValue = $detail->created_at ?? null;
                            $displayDate = $dateValue ? \Illuminate\Support\Carbon::parse($dateValue)->format('d-m-Y') : '-';
                            $allDocs = \Illuminate\Support\Facades\DB::table('tr_documentation')
                            ->where('non_periodic_id', $detail->id)->where('is_active', '1')
                            ->whereNotNull('file')->whereNotIn('file', ['', '0', 'null'])
                            ->orderBy('created_at', 'desc')->get();
                            @endphp
                            <tr>
                                <td>
                                    <div class="d-flex gap-1">
                                        <button class="btn btn-success btn-sm mb-0 px-2" type="button" data-bs-toggle="modal" data-bs-target="#verifyModal" data-action="approve" data-non-periodic-id="{{ $detail->id }}" title="Setujui"><i class="fas fa-check"></i></button>
                                        <button class="btn btn-warning btn-sm mb-0 px-2" type="button" data-bs-toggle="modal" data-bs-target="#verifyModal" data-action="reject" data-non-periodic-id="{{ $detail->id }}" title="Minta Revisi"><i class="fas fa-redo"></i></button>
                                    </div>
                                </td>
                                <td><span class="text-xs font-weight-bold text-primary">{{ $detail->id_trans ?: '-' }}</span></td>
                                <td><span class="text-xs font-weight-bold">{{ $displayDate }}</span></td>
                                <td><span class="text-xs">{{ $detail->area_name ?? $detail->area ?? '-' }}</span></td>
                                <td><span class="text-xs">{{ Str::limit($detail->job_description ?? '-', 50) }}</span></td>
                                <td><span class="text-xs font-weight-bold">{{ $getPelaksanaLabel($detail) }}</span></td>
                                <td class="text-center">
                                    @if($allDocs->count() > 0)
                                    <button type="button" class="btn btn-info btn-sm" data-bs-toggle="modal" data-bs-target="#allDocsModal{{ $detail->id }}">
                                        <i class="fas fa-paperclip me-1"></i>{{ $allDocs->count() }} Lampiran
                                    </button>
                                    @include('transc.auto.partials._docs_modal', ['detail' => $detail, 'allDocs' => $allDocs])
                                    @else
                                    <span class="badge bg-secondary text-xs">Belum ada dokumentasi</span>
                                    @endif
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="6" class="text-center text-secondary py-4">Belum ada pekerjaan yang perlu diverifikasi.</td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endif

{{-- Draft Table --}}
<div class="row mt-4">
    <div class="col-12">
        <div class="card">
            <div class="card-header pb-3">
                <div class="d-flex flex-column flex-md-row align-items-md-center justify-content-between gap-2">
                    <h6 class="mb-0">Draft Pengajuan</h6>
                    <span class="text-muted small">Draft</span>
                </div>
            </div>
            <div class="table-responsive">
                <table class="table display" id="list_user_draft">
                    <thead class="thead-light pu-thead-teal">
                        <tr>
                            <th>Aksi</th>
                            <th>ID Trans</th>
                            <th>Tanggal Pengajuan</th>
                            <th>Area</th>
                            <th>Deskripsi</th>
                            <th>Pelaksana</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($draftItems as $detail)
                        @php
                        $primary = isset($detail->id) ? $detail->id : '';
                        $rawStatus = $detail->{$statusField} ?? '';
                        $status = strtolower($rawStatus);
                        $badgeClass = 'badge bg-secondary text-white';
                        @endphp
                        <tr>
                            <td class="text-center">
                                @if ($primary != '')
                                <div class="btn-group">
                                    <button class="btn btn-primary btn-sm mb-0 px-3" type="button" title="View Data" onclick="window.location='{{ url($pengajuanRoute . '/show/' . encrypt($primary)) }}'">
                                        <i class="fas fa-eye"></i><span class="font-weight-bold"> View</span>
                                    </button>
                                    @if (($authorize->edit ?? '0') == '1')
                                    <button type="button" class="btn btn-sm btn-primary mb-0 px-2 dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"></button>

                                    <ul class="dropdown-menu dropdown-menu-end">
                                        {{-- Edit Draft --}}
                                        <li>
                                            <hr class="dropdown-divider">
                                        </li>
                                        <button type="button"
                                            class="btn btn-sm btn-warning mx-2 mb-0 w-90"
                                            title="Edit Draft"
                                            onclick="window.location='{{ url($pengajuanRoute . '/edit/' . encrypt($primary)) }}'">
                                            <i class="fas fa-edit"></i>
                                            <span class="font-weight-bold"> Edit Draft</span>
                                        </button>

                                        {{-- Konfirmasi Draft --}}
                                        <li>
                                            <hr class="dropdown-divider">
                                        </li>
                                        <form method="POST" action="{{ route('user.draft.confirm') }}" class="m-0 draft-confirm-form" style="display: inline">
                                            @csrf
                                            <input type="hidden" name="id_encrypt" value="{{ encrypt($detail->id ?? $primary) }}">
                                            <button type="submit"
                                                class="btn btn-sm btn-success mx-2 mb-0 w-90"
                                                title="Konfirmasi Draft">
                                                <i class="fas fa-check"></i>
                                                <span class="font-weight-bold"> Konfirmasi Draft</span>
                                            </button>
                                        </form>

                                        {{-- Hapus Draft --}}
                                        <li>
                                            <hr class="dropdown-divider">
                                        </li>
                                        <form method="POST" action="{{ route('user.draft.delete') }}" class="m-0 draft-delete-form" style="display: inline">
                                            @csrf
                                            <input type="hidden" name="id_encrypt" value="{{ encrypt($detail->id ?? $primary) }}">
                                            <button type="submit"
                                                class="btn btn-sm btn-danger mx-2 mb-0 w-90"
                                                title="Hapus Draft">
                                                <i class="fas fa-trash"></i>
                                                <span class="font-weight-bold"> Hapus Draft</span>
                                            </button>
                                        </form>

                                        {{-- Penutup Divider --}}
                                        <li>
                                            <hr class="dropdown-divider">
                                        </li>
                                    </ul>
                                    @endif
                                </div>
                                @endif
                            </td>
                            <td class="text-sm font-weight-bold text-primary">{{ $detail->id_trans ?: '-' }}</td>
                            <td class="text-sm">{{ $detail->created_at ? \Illuminate\Support\Carbon::parse($detail->created_at)->format('d-m-Y') : '-' }}</td>
                            <td class="text-sm">{{ $detail->area_name ?? $detail->area ?? $detail->area_id ?? '-' }}</td>
                            <td class="text-sm">{{ $detail->job_description ?? $detail->description ?? '-' }}</td>
                            <td class="text-sm">{{ $getPelaksanaLabel($detail) }}</td>
                            <td class="text-sm"><span class="{{ $badgeClass }}">{{ $status ?: 'draft' }}</span></td>
                        </tr>
                        @empty
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

{{-- Section User Tracking Items --}}
<div class="row mt-4">
    <div class="col-12">
        <div class="card pu-table-card">
            <div class="card-header border-0 pb-3">
                <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center">
                    <h5 class="mb-1 text-dark"><strong>Tracking Status Pekerjaan</strong></h5>
                    <span class="text-muted small">Pekerjaan yang sedang berjalan</span>
                </div>
            </div>
            <div class="table-responsive">
                <table id="list_user_tracking" class="table pu-table align-items-center mb-0">
                    <thead class="thead-light pu-thead-teal">
                        <tr>
                            <th class="text-xs text-center" style="width: 100px;">Aksi</th>
                            <th class="text-xs" style="width: 150px;">Area</th>
                            <th class="text-xs" style="width: 250px;">Deskripsi</th>
                            <th class="text-xs">Progress</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($trackingItems as $detail)
                        @php
                        $primary = isset($detail->id) ? $detail->id : '';
                        $rawStatus = $detail->{$statusField} ?? '';
                        $status = strtolower($rawStatus);

                        $datePending = $detail->created_at ? \Illuminate\Support\Carbon::parse($detail->created_at)->format('d/m/Y') : '-';
                        $dateReview = $detail->head_approval_date ? \Illuminate\Support\Carbon::parse($detail->head_approval_date)->format('d/m/Y') : '-';
                        $datePengadaan = (!empty($detail->pengadaan_started_at) && $detail->pengadaan_started_at !== '0000-00-00 00:00:00') ? \Illuminate\Support\Carbon::parse($detail->pengadaan_started_at)->format('d/m/Y') : '-';
                        $datePengerjaan = (!empty($detail->pengerjaan_started_at) && $detail->pengerjaan_started_at !== '0000-00-00 00:00:00') ? \Illuminate\Support\Carbon::parse($detail->pengerjaan_started_at)->format('d/m/Y') : '-';

                        $isPendingDone = !in_array($status, ['pending']) && !in_array($status, ['reject', 'rejected', 'cancel', 'canceled', 'cancelled']);
                        $isPengadaanDone = in_array($status, ['pengadaan', 'pengerjaan', 'revisi', 'verifikasi', 'completed']) || (!empty($detail->pengadaan_started_at) && $detail->pengadaan_started_at !== '0000-00-00 00:00:00');
                        $isPengerjaanDone = in_array($status, ['pengerjaan', 'revisi', 'verifikasi', 'completed']) || (!empty($detail->pengerjaan_started_at) && $detail->pengerjaan_started_at !== '0000-00-00 00:00:00');
                        $isCompleteDone = in_array($status, ['verifikasi', 'completed']);
                        $isRejected = in_array($status, ['reject', 'rejected', 'cancel', 'canceled', 'cancelled']);

                        // Determine current status step
                        $currentStep = 'pending';
                        if ($isRejected) $currentStep = 'rejected';
                        elseif ($status === 'review') $currentStep = 'review';
                        elseif (in_array($status, ['pengadaan'])) $currentStep = 'pengadaan';
                        elseif (in_array($status, ['pengerjaan', 'revisi'])) $currentStep = 'pengerjaan';
                        elseif (in_array($status, ['verifikasi', 'completed'])) $currentStep = 'complete';
                        @endphp
                        <tr>
                            <td class="text-center">
                                <button class="btn btn-primary btn-sm mb-0 px-3" type="button"
                                    title="View Data"
                                    onclick="window.location='{{ url($pengajuanRoute . '/show' . '/' . encrypt($primary)) }}'">
                                    <i class="fas fa-eye"></i><span class="font-weight-bold"> View</span>
                                </button>
                            </td>
                            {{-- No column removed per UX request --}}
                            <td class="text-sm">{{ $detail->area_name ?? $detail->area ?? $detail->area_id ?? '-' }}</td>
                            <td class="text-sm">{{ $detail->job_description ?? $detail->description ?? '-' }}</td>
                            <td>
                                @if($isRejected)
                                <span class="badge bg-danger">Ditolak / Dibatalkan</span>
                                @else
                                <div class="tracker-container">
                                    <!-- Step 1: Pending -->
                                    <div class="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="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="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="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="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">-</span>
                                    </div>
                                </div>
                                @endif
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

{{-- History Table --}}
<div class="row mt-4">
    <div class="col-12">
        <div class="card">
            <div class="card-header pb-3">
                <div class="d-flex flex-column flex-md-row align-items-md-center justify-content-between gap-2">
                    <h6 class="mb-0">Riwayat Pengajuan</h6>
                    <div class="d-flex align-items-center gap-2">
                        <label for="user-status-filter" class="text-sm mb-0">Filter Status</label>
                        <select id="user-status-filter" class="form-select form-select-sm pu-filter-select">
                            <option value="">Semua</option>
                            <option value="completed">Completed</option>
                            <option value="rejected">Rejected</option>
                            <option value="cancel">Cancel</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="table-responsive">
                <table class="table display" id="list_user_history">
                    <thead class="thead-light pu-thead-teal">
                        <tr>
                            <th>Aksi</th>
                            <th>ID Trans</th>
                            <th>Tanggal Pengajuan</th>
                            <th>Area</th>
                            <th>Deskripsi</th>
                            <th>Pelaksana</th>
                            <th>Status</th>
                            <th>Dokumentasi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($historyItems as $detail)
                        @php
                        $primary = isset($detail->id) ? $detail->id : '';
                        $rawStatus = $detail->{$statusField} ?? '';
                        $status = strtolower($rawStatus);
                        if (in_array($status, ['approved'])) $status = 'review';
                        elseif ($status === 'reject') $status = 'rejected';
                        elseif (in_array($status, ['canceled','cancelled'])) $status = 'cancel';
                        $badgeClass = 'status-badge status-' . ($status ?: 'pending');
                        $histDocs = \Illuminate\Support\Facades\DB::table('tr_documentation')
                            ->where('non_periodic_id', $detail->id)
                            ->where('is_active', '1')
                            ->whereNotNull('file')->whereNotIn('file', ['', '0', 'null'])
                            ->orderBy('created_at', 'desc')
                            ->get();
                        @endphp
                        <tr data-status="{{ $status }}">
                            <td class="text-center">
                                @if ($primary != '')
                                <div class="btn-group">
                                    <button class="btn btn-primary btn-sm mb-0 px-3" type="button" title="View Data" onclick="window.location='{{ url($pengajuanRoute . '/show/' . encrypt($primary)) }}'">
                                        <i class="fas fa-eye"></i><span class="font-weight-bold"> View</span>
                                    </button>
                                    @if (($authorize->edit ?? '0') == '1')
                                    <button type="button" class="btn btn-sm btn-primary mb-0 px-2 dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown"></button>
                                    <ul class="dropdown-menu dropdown-menu-end">
                                        @if ($status === 'draft')
                                        <li class="px-2"><button type="button" class="dropdown-item d-flex align-items-center gap-2 text-white rounded-2 pu-dropdown-action pu-dropdown-edit" onclick="window.location='{{ url($pengajuanRoute . '/edit/' . encrypt($primary)) }}'"><i class="fas fa-edit me-2 text-white"></i>Edit Draft</button></li>
                                        <li class="px-2 mt-1">
                                            <form method="POST" action="{{ route('user.draft.confirm') }}" class="m-0 draft-confirm-form">@csrf<input type="hidden" name="id_encrypt" value="{{ encrypt($detail->id ?? $primary) }}"><button type="submit" class="dropdown-item d-flex align-items-center gap-2 text-white rounded-2 pu-dropdown-action pu-dropdown-confirm"><i class="fas fa-paper-plane me-2 text-white"></i>Konfirmasi Draft</button></form>
                                        </li>
                                        <li class="px-2 mt-1">
                                            <form method="POST" action="{{ route('user.draft.delete') }}" class="m-0 draft-delete-form">@csrf<input type="hidden" name="id_encrypt" value="{{ encrypt($detail->id ?? $primary) }}"><button type="submit" class="dropdown-item d-flex align-items-center gap-2 text-white rounded-2 pu-dropdown-action pu-dropdown-danger"><i class="fas fa-trash me-2 text-white"></i>Hapus Draft</button></form>
                                        </li>
                                        @endif
                                    </ul>
                                    @endif
                                </div>
                                @endif
                            </td>
                            <td class="text-sm font-weight-bold text-primary">{{ $detail->id_trans ?: '-' }}</td>
                            <td class="text-sm">{{ \Carbon\Carbon::parse($detail->created_at)->format('d-m-Y') ?? '-' }}</td>
                            <td class="text-sm">{{ $detail->area_name ?? $detail->area ?? '-' }}</td>
                            <td class="text-sm">{{ $detail->job_description ?? '-' }}</td>
                            <td class="text-sm">{{ $getPelaksanaLabel($detail) }}</td>
                            <td class="text-sm"><span class="{{ $badgeClass }}">{{ $status ?: '-' }}</span></td>
                            <td class="text-center">
                                @if ($status === 'completed')
                                    @if ($histDocs->count() > 0)
                                        <div class="d-flex flex-column align-items-center gap-1">
                                            <button type="button" class="btn btn-info btn-sm mb-0" data-bs-toggle="modal" data-bs-target="#histDocsModal{{ $detail->id }}">
                                                <i class="fas fa-images me-1"></i>{{ $histDocs->count() }} Foto
                                            </button>
                                        </div>
                                        @include('transc.auto.partials._docs_modal', ['detail' => $detail, 'allDocs' => $histDocs])
                                    @else
                                        <div class="d-flex flex-column align-items-center gap-1">
                                            <span class="badge bg-secondary text-xs">Belum ada</span>
                                            @if (($authorize->edit ?? '0') == '1' || $isCurrentViewerHrd || $isCurrentViewerAdmin)
                                            <button type="button" class="btn btn-danger btn-sm mb-0 px-2"
                                                data-bs-toggle="modal" data-bs-target="#editDocsModal"
                                                data-np-id="{{ $detail->id }}"
                                                data-np-trans="{{ $detail->id_trans ?? '-' }}"
                                                title="Upload Dokumentasi">
                                                <i class="fas fa-upload me-1"></i>Upload
                                            </button>
                                            @endif
                                        </div>
                                    @endif
                                @else
                                    <span class="text-muted text-xs">-</span>
                                @endif
                            </td>
                        </tr>
                        @empty
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

{{-- Image Modal Lightbox --}}
<div id="imageModal" class="image-modal" onclick="closeImageModal()">
    <span class="image-modal-close" onclick="closeImageModal()">&times;</span>
    <img id="imageModalContent" class="image-modal-content" alt="Preview">
    <div id="imageModalCaption" class="image-modal-caption"></div>
</div>

{{-- Modal Edit / Upload Dokumentasi (untuk History completed) --}}
<div class="modal fade" id="editDocsModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form method="POST" action="{{ route('non-periodic.update-documentation') }}" enctype="multipart/form-data" id="editDocsForm">
                @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">
                    <p class="text-sm text-muted mb-3">ID Transaksi: <strong id="editDocsTransId">-</strong></p>
                    <input type="hidden" name="non_periodic_id" id="editDocsNpId">
                    <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="editDocsFiles"
                            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" id="editDocsDescription" 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> ke dokumentasi yang sudah ada (tidak menghapus yang lama).</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="editDocsSubmit">
                        <i class="fas fa-save me-1"></i>Simpan Dokumentasi
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- Modal Verifikasi --}}
<div class="modal fade" id="verifyModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form method="POST" action="{{ route('work-schedule.verify') }}" enctype="multipart/form-data">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title" id="verifyModalLabel">Verifikasi 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" id="verify-non-periodic-id">
                    <input type="hidden" name="decision" id="verify-decision">
                    <div class="mb-3"><label class="form-label" id="verify-notes-label">Catatan</label><textarea class="form-control" name="notes" id="verify-notes" rows="3" placeholder="Tulis catatan jika diperlukan"></textarea></div>
                    <div class="mb-3" id="verify-attachment-wrapper" style="display: none;"><label class="form-label">Lampiran Revisi</label><input class="form-control" type="file" name="revision_attachments[]" id="verify-attachments" accept=".jpg,.jpeg,.png,.webp,.jfif,.heic,.heif,.pdf" multiple><small class="text-muted">Format: JPG, PNG, WEBP, HEIC, PDF (maks 5MB/file)</small></div>
                    <div class="alert alert-info mb-0"><small><strong>Setuju:</strong> Pekerjaan akan ditandai selesai.<br><strong>Revisi:</strong> Pekerjaan akan dikembalikan ke petugas untuk perbaikan.</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="verifySubmit">Setujui</button></div>
            </form>
        </div>
    </div>
</div>

@push('js')
<script>
    (function() {
        // Image Modal Functions
        window.openImageModal = function(imageUrl, caption) {
            const modal = document.getElementById('imageModal');
            const modalImg = document.getElementById('imageModalContent');
            const modalCaption = document.getElementById('imageModalCaption');
            if (modal) {
                modal.classList.add('active');
                document.body.style.overflow = 'hidden';
            }
            if (modalImg) modalImg.src = imageUrl;
            if (modalCaption) modalCaption.textContent = caption;
        };
        window.closeImageModal = function() {
            const modal = document.getElementById('imageModal');
            if (modal) modal.classList.remove('active');
            document.body.style.overflow = 'auto';
        };
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape') closeImageModal();
        });

        // Status filter
        const statusFilter = document.getElementById('user-status-filter');
        if (statusFilter) {
            statusFilter.addEventListener('change', function() {
                const value = this.value.toLowerCase();
                document.querySelectorAll('#list_user_history tbody tr[data-status]').forEach(function(row) {
                    row.style.display = value === '' || row.getAttribute('data-status') === value ? '' : 'none';
                });
            });
        }

        // Verify modal handler
        const verifyModal = document.getElementById('verifyModal');
        if (verifyModal) {
            verifyModal.addEventListener('show.bs.modal', function(event) {
                const button = event.relatedTarget;
                const action = button.getAttribute('data-action') || 'approve';
                const nonPeriodicId = button.getAttribute('data-non-periodic-id') || '';
                const modalTitle = document.getElementById('verifyModalLabel');
                const submitBtn = document.getElementById('verifySubmit');
                const decisionInput = document.getElementById('verify-decision');
                const nonPeriodicIdInput = document.getElementById('verify-non-periodic-id');
                const notesInput = document.getElementById('verify-notes');
                const notesLabel = document.getElementById('verify-notes-label');
                const revisionWrapper = document.getElementById('verify-attachment-wrapper');

                if (action === 'approve') {
                    if (modalTitle) modalTitle.textContent = 'Setujui Pekerjaan';
                    if (submitBtn) {
                        submitBtn.textContent = 'Setujui';
                        submitBtn.className = 'btn btn-success';
                    }
                    if (decisionInput) decisionInput.value = 'approve';
                    if (notesLabel) notesLabel.textContent = 'Catatan';
                    if (notesInput) notesInput.required = false;
                    if (revisionWrapper) revisionWrapper.style.display = 'none';
                } else {
                    if (modalTitle) modalTitle.textContent = 'Minta Revisi';
                    if (submitBtn) {
                        submitBtn.textContent = 'Minta Revisi';
                        submitBtn.className = 'btn btn-warning';
                    }
                    if (decisionInput) decisionInput.value = 'reject';
                    if (notesLabel) notesLabel.textContent = 'Catatan (wajib diisi)';
                    if (notesInput) notesInput.required = true;
                    if (revisionWrapper) revisionWrapper.style.display = '';
                }
                if (nonPeriodicIdInput) nonPeriodicIdInput.value = nonPeriodicId;
                if (notesInput) notesInput.value = '';
            });
        }

        // Edit Docs modal handler
        const editDocsModal = document.getElementById('editDocsModal');
        if (editDocsModal) {
            editDocsModal.addEventListener('show.bs.modal', function(event) {
                const btn = event.relatedTarget;
                const npId = btn ? btn.getAttribute('data-np-id') : '';
                const npTrans = btn ? btn.getAttribute('data-np-trans') : '-';
                const npIdInput = document.getElementById('editDocsNpId');
                const transIdEl = document.getElementById('editDocsTransId');
                const filesInput = document.getElementById('editDocsFiles');
                const descInput = document.getElementById('editDocsDescription');
                if (npIdInput) npIdInput.value = npId || '';
                if (transIdEl) transIdEl.textContent = npTrans || '-';
                if (filesInput) filesInput.value = '';
                if (descInput) descInput.value = '';
            });
        }
        // Submit handler for editDocsForm
        const editDocsForm = document.getElementById('editDocsForm');
        if (editDocsForm) {
            editDocsForm.addEventListener('submit', function(e) {
                const filesInput = document.getElementById('editDocsFiles');
                if (!filesInput || !filesInput.files || filesInput.files.length === 0) {
                    e.preventDefault();
                    Swal.fire({ icon: 'warning', title: 'File Kosong', text: 'Pilih minimal 1 file untuk diupload.' });
                    return;
                }
                const submitBtn = document.getElementById('editDocsSubmit');
                if (submitBtn) {
                    submitBtn.disabled = true;
                    submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Menyimpan...';
                }
            });
        }

        // Draft confirm/delete
        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();
                });
            });
        });

        // Add custom search filter for status column BEFORE initializing DataTables
        $.fn.dataTable.ext.search.push(
            function(settings, data, dataIndex) {
                // Only apply to list_user_history table
                if (!settings.nTable || settings.nTable.id !== 'list_user_history') {
                    return true;
                }

                const filterValue = document.getElementById('user-status-filter')?.value?.toLowerCase().trim() || '';

                if (filterValue === '') {
                    return true;
                }

                // Get the row element
                if (!settings.aoData || !settings.aoData[dataIndex]) {
                    return true;
                }

                const rowData = settings.aoData[dataIndex];
                const rowNode = rowData.nTr;
                if (!rowNode) {
                    return true;
                }

                const rowStatus = (rowNode.getAttribute('data-status') || '').toLowerCase().trim();
                return rowStatus === filterValue;
            }
        );

        // Init DataTables for this tab
        if ($.fn.DataTable && !$.fn.DataTable.isDataTable('#list_user_verifikasi')) {
            $('#list_user_verifikasi').DataTable({
                pageLength: 10,
                ordering: true,
                info: true,
                searching: true,
                order: [
                    [1, 'desc']
                ],
                columnDefs: [{
                    targets: 0,
                    orderable: false,
                    searchable: false
                }]
            });
        }
        if ($.fn.DataTable && !$.fn.DataTable.isDataTable('#list_user_history')) {
            $('#list_user_history').DataTable({
                pageLength: 10,
                info: false,
                searching: true,
                responsive: true,
                language: {
                    search: "Cari :",
                    lengthMenu: "Tampilkan _MENU_ baris",
                    zeroRecords: "Maaf - Data tidak ada",
                    info: "Data _START_ - _END_ dari _TOTAL_",
                    infoEmpty: "Tidak ada data",
                    infoFiltered: "(pencarian dari _MAX_ data)"
                },
                responsive: true,
            });
        }
        if ($.fn.DataTable && !$.fn.DataTable.isDataTable('#list_user_draft')) {
            $('#list_user_draft').DataTable({
                pageLength: 10,
                info: false,
                searching: true,
                responsive: true,
                language: {
                    search: "Cari :",
                    lengthMenu: "Tampilkan _MENU_ baris",
                    zeroRecords: "Maaf - Data tidak ada",
                    info: "Data _START_ - _END_ dari _TOTAL_",
                    infoEmpty: "Tidak ada data",
                    infoFiltered: "(pencarian dari _MAX_ data)"
                },
                responsive: true,
            });
        }
        if ($.fn.DataTable && !$.fn.DataTable.isDataTable('#list_user_tracking')) {
            $('#list_user_tracking').DataTable({
                pageLength: 10,
                info: false,
                searching: true,
                responsive: true,
                language: {
                    search: "Cari :",
                    lengthMenu: "Tampilkan _MENU_ baris",
                    zeroRecords: "Maaf - Data tidak ada",
                    info: "Data _START_ - _END_ dari _TOTAL_",
                    infoEmpty: "Tidak ada data",
                    infoFiltered: "(pencarian dari _MAX_ data)"
                },
                responsive: true,
            });
        }

        if (statusFilter) {
            const requestedStatus = new URLSearchParams(window.location.search).get('status');
            if (requestedStatus) {
                const normalizedRequestedStatus = requestedStatus.toLowerCase();
                const optionExists = Array.from(statusFilter.options).some(function(option) {
                    return option.value.toLowerCase() === normalizedRequestedStatus;
                });

                if (optionExists) {
                    statusFilter.value = normalizedRequestedStatus;
                    statusFilter.dispatchEvent(new Event('change'));

                    if ($.fn.DataTable && $.fn.DataTable.isDataTable('#list_user_history')) {
                        $('#list_user_history').DataTable().draw();
                    }
                }
            }
        }
    })();
</script>
@endpush