@extends('layouts.admin')

@section('title', 'Data Pengajuan Reimbursement')

@section('content')
<div class="space-y-6">
    <!-- Header -->
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
        <div>
            <div class="flex items-center gap-2.5">
                <div class="w-9 h-9 rounded-xl bg-primary-50 text-primary-600 flex items-center justify-center font-bold">
                    <i data-lucide="receipt" class="w-5 h-5"></i>
                </div>
                <div>
                    <h1 class="text-2xl font-bold text-slate-900 tracking-tight">Data Pengajuan Reimbursement</h1>
                    <p class="text-xs text-slate-500 mt-0.5">Pantau klaim pengeluaran karyawan, verifikasi bukti nota, dan kelola alur approval klaim</p>
                </div>
            </div>
        </div>
        <div class="flex items-center gap-2">
            <a href="{{ route('admin.pengaturan-approval.index') }}" class="inline-flex items-center gap-2 px-3.5 py-2 rounded-xl bg-slate-100 hover:bg-slate-200 text-slate-700 text-xs font-semibold transition-colors">
                <i data-lucide="settings-2" class="w-4 h-4 text-slate-500"></i>
                <span>Atur Alur Approval</span>
            </a>
            <a href="{{ route('admin.reimbursement.jenis.index') }}" class="inline-flex items-center gap-2 px-3.5 py-2 rounded-xl bg-teal-50 hover:bg-teal-100 text-teal-700 text-xs font-semibold transition-colors">
                <i data-lucide="sliders" class="w-4 h-4 text-teal-600"></i>
                <span>Jenis & Aturan</span>
            </a>
        </div>
    </div>

    <!-- Alert Flash -->
    @if(session('success'))
    <div class="p-4 rounded-2xl bg-emerald-50 border border-emerald-200 text-emerald-800 text-xs font-semibold flex items-center justify-between shadow-sm">
        <div class="flex items-center gap-2.5">
            <i data-lucide="check-circle-2" class="w-4 h-4 text-emerald-600 shrink-0"></i>
            <span>{{ session('success') }}</span>
        </div>
        <button onclick="this.parentElement.remove()" class="text-emerald-500 hover:text-emerald-700">
            <i data-lucide="x" class="w-4 h-4"></i>
        </button>
    </div>
    @endif

    @if(session('error'))
    <div class="p-4 rounded-2xl bg-rose-50 border border-rose-200 text-rose-800 text-xs font-semibold flex items-center justify-between shadow-sm">
        <div class="flex items-center gap-2.5">
            <i data-lucide="alert-circle" class="w-4 h-4 text-rose-600 shrink-0"></i>
            <span>{{ session('error') }}</span>
        </div>
        <button onclick="this.parentElement.remove()" class="text-rose-500 hover:text-rose-700">
            <i data-lucide="x" class="w-4 h-4"></i>
        </button>
    </div>
    @endif

    <!-- Kartu Statistik Ringkasan -->
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
        <div class="bg-white p-4 rounded-2xl border border-slate-200/80 shadow-sm flex items-center gap-3.5">
            <div class="w-11 h-11 rounded-xl bg-primary-50 text-primary-600 flex items-center justify-center shrink-0">
                <i data-lucide="file-text" class="w-5 h-5"></i>
            </div>
            <div>
                <span class="text-[11px] font-semibold text-slate-400 uppercase tracking-wider block">Total Pengajuan</span>
                <span class="text-lg font-bold text-slate-800 tracking-tight">{{ $stats['total_pengajuan'] }} Klaim</span>
            </div>
        </div>

        <div class="bg-white p-4 rounded-2xl border border-slate-200/80 shadow-sm flex items-center gap-3.5">
            <div class="w-11 h-11 rounded-xl bg-amber-50 text-amber-600 flex items-center justify-center shrink-0">
                <i data-lucide="clock" class="w-5 h-5"></i>
            </div>
            <div>
                <span class="text-[11px] font-semibold text-slate-400 uppercase tracking-wider block">Menunggu Approval</span>
                <span class="text-lg font-bold text-amber-600 tracking-tight">{{ $stats['menunggu'] }} Klaim</span>
            </div>
        </div>

        <div class="bg-white p-4 rounded-2xl border border-slate-200/80 shadow-sm flex items-center gap-3.5">
            <div class="w-11 h-11 rounded-xl bg-emerald-50 text-emerald-600 flex items-center justify-center shrink-0">
                <i data-lucide="check-circle-2" class="w-5 h-5"></i>
            </div>
            <div>
                <span class="text-[11px] font-semibold text-slate-400 uppercase tracking-wider block">Total Disetujui</span>
                <span class="text-sm font-bold text-emerald-600 tracking-tight block">
                    Rp {{ number_format($stats['nominal_disetujui'], 0, ',', '.') }}
                </span>
                <span class="text-[10px] text-slate-400">{{ $stats['disetujui'] }} Klaim Disetujui</span>
            </div>
        </div>

        <div class="bg-white p-4 rounded-2xl border border-slate-200/80 shadow-sm flex items-center gap-3.5">
            <div class="w-11 h-11 rounded-xl bg-indigo-50 text-indigo-600 flex items-center justify-center shrink-0">
                <i data-lucide="banknote" class="w-5 h-5"></i>
            </div>
            <div>
                <span class="text-[11px] font-semibold text-slate-400 uppercase tracking-wider block">Telah Dicairkan</span>
                <span class="text-sm font-bold text-indigo-600 tracking-tight block">
                    Rp {{ number_format($stats['nominal_dicairkan'], 0, ',', '.') }}
                </span>
                <span class="text-[10px] text-slate-400">{{ $stats['dicairkan'] }} Klaim Ditransfer</span>
            </div>
        </div>
    </div>

    <!-- Filter & Pencarian Lanjutan -->
    <div class="bg-white p-5 rounded-2xl border border-slate-200/80 shadow-sm space-y-4">
        <form method="GET" action="{{ route('admin.reimbursement.pengajuan.index') }}" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-3">
            <!-- Pencarian Karyawan / NIP / Nomor -->
            <div class="relative lg:col-span-1">
                <label class="text-[10px] font-bold text-slate-400 uppercase tracking-wider block mb-1">Cari Karyawan / No</label>
                <div class="relative">
                    <i data-lucide="search" class="w-3.5 h-3.5 text-slate-400 absolute left-3 top-1/2 -translate-y-1/2"></i>
                    <input type="text" name="search" value="{{ request('search') }}" placeholder="Nama / NIP / No..." class="w-full pl-8 pr-3 py-2 text-xs rounded-xl border border-slate-200 focus:outline-none focus:border-primary-500">
                </div>
            </div>

            <!-- Filter Status -->
            <div>
                <label class="text-[10px] font-bold text-slate-400 uppercase tracking-wider block mb-1">Status Pengajuan</label>
                <select name="status" class="w-full px-3 py-2 text-xs rounded-xl border border-slate-200 focus:outline-none focus:border-primary-500 bg-white">
                    <option value="">Semua Status</option>
                    <option value="menunggu" {{ request('status') === 'menunggu' ? 'selected' : '' }}>Menunggu Approval</option>
                    <option value="disetujui" {{ request('status') === 'disetujui' ? 'selected' : '' }}>Disetujui</option>
                    <option value="dicairkan" {{ request('status') === 'dicairkan' ? 'selected' : '' }}>Telah Dicairkan</option>
                    <option value="ditolak" {{ request('status') === 'ditolak' ? 'selected' : '' }}>Ditolak</option>
                </select>
            </div>

            <!-- Filter Jenis Reimbursement -->
            <div>
                <label class="text-[10px] font-bold text-slate-400 uppercase tracking-wider block mb-1">Kategori Jenis Klaim</label>
                <select name="reimbursement_jenis_id" class="w-full px-3 py-2 text-xs rounded-xl border border-slate-200 focus:outline-none focus:border-primary-500 bg-white">
                    <option value="">Semua Jenis</option>
                    @foreach($jenisList as $j)
                        <option value="{{ $j->id }}" {{ request('reimbursement_jenis_id') == $j->id ? 'selected' : '' }}>
                            {{ $j->nama_jenis }}
                        </option>
                    @endforeach
                </select>
            </div>

            <!-- Filter Departemen -->
            <div>
                <label class="text-[10px] font-bold text-slate-400 uppercase tracking-wider block mb-1">Departemen</label>
                <select name="departemen_id" class="w-full px-3 py-2 text-xs rounded-xl border border-slate-200 focus:outline-none focus:border-primary-500 bg-white">
                    <option value="">Semua Departemen</option>
                    @foreach($departemenList as $d)
                        <option value="{{ $d->id }}" {{ request('departemen_id') == $d->id ? 'selected' : '' }}>
                            {{ $d->nama_departemen }}
                        </option>
                    @endforeach
                </select>
            </div>

            <!-- Tombol Submit & Reset -->
            <div class="flex items-end gap-2">
                <button type="submit" class="flex-1 py-2 rounded-xl bg-primary-600 hover:bg-primary-700 text-white text-xs font-semibold shadow-sm shadow-primary-600/30 transition-all flex items-center justify-center gap-1.5">
                    <i data-lucide="filter" class="w-3.5 h-3.5"></i>
                    <span>Terapkan</span>
                </button>
                @if(request()->anyFilled(['search', 'status', 'reimbursement_jenis_id', 'departemen_id', 'tanggal_mulai', 'tanggal_selesai']))
                    <a href="{{ route('admin.reimbursement.pengajuan.index') }}" class="px-3 py-2 rounded-xl bg-slate-100 hover:bg-slate-200 text-slate-600 text-xs font-semibold transition-colors" title="Reset Filter">
                        <i data-lucide="rotate-ccw" class="w-3.5 h-3.5"></i>
                    </a>
                @endif
            </div>
        </form>
    </div>

    <!-- Tabel Daftar Pengajuan Reimbursement Karyawan -->
    <div class="bg-white rounded-2xl border border-slate-200/80 shadow-sm overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-left text-xs border-collapse">
                <thead>
                    <tr class="bg-slate-50/80 border-b border-slate-200/80 text-slate-500 font-bold uppercase tracking-wider text-[10px]">
                        <th class="py-3.5 px-4 w-12 text-center">No</th>
                        <th class="py-3.5 px-4">Karyawan Pemohon</th>
                        <th class="py-3.5 px-4">Klaim & Keterangan</th>
                        <th class="py-3.5 px-4">Nominal Biaya</th>
                        <th class="py-3.5 px-4 text-center">Bukti Nota</th>
                        <th class="py-3.5 px-4 text-center">Status & Alur Approval</th>
                        <th class="py-3.5 px-4 text-right">Aksi</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    @forelse($pengajuanList as $index => $item)
                    <tr class="hover:bg-slate-50/60 transition-colors">
                        <td class="py-3.5 px-4 text-center text-slate-400 font-semibold">
                            {{ $pengajuanList->firstItem() + $index }}
                        </td>

                        <!-- Data Karyawan yang mengajukan -->
                        <td class="py-3.5 px-4">
                            <div class="flex items-center gap-3">
                                <div class="w-10 h-10 rounded-xl bg-slate-100 border border-slate-200/80 text-slate-600 font-bold flex items-center justify-center shrink-0 overflow-hidden text-xs">
                                    @if($item->pegawai && $item->pegawai->foto_profil)
                                        <img src="{{ asset('storage/' . $item->pegawai->foto_profil) }}" alt="{{ $item->pegawai->nama_lengkap }}" class="w-full h-full object-cover">
                                    @else
                                        <span>{{ strtoupper(substr($item->pegawai->nama_lengkap ?? 'K', 0, 2)) }}</span>
                                    @endif
                                </div>
                                <div class="min-w-0">
                                    <span class="font-bold text-slate-900 text-sm tracking-tight block truncate">
                                        {{ $item->pegawai->nama_lengkap ?? 'Pegawai Terhapus' }}
                                    </span>
                                    <div class="flex items-center gap-2 text-[11px] text-slate-500">
                                        <span>NIP: {{ $item->pegawai->nip ?? '-' }}</span>
                                        <span>•</span>
                                        <span class="text-slate-400">{{ $item->pegawai->departemen->nama_departemen ?? '-' }}</span>
                                    </div>
                                    @if($item->pegawai && $item->pegawai->nama_bank && $item->pegawai->nomor_rekening)
                                    <div class="text-[10px] text-indigo-600 font-medium flex items-center gap-1 mt-0.5">
                                        <i data-lucide="credit-card" class="w-3 h-3 text-indigo-400 shrink-0"></i>
                                        <span>{{ $item->pegawai->nama_bank }}: {{ $item->pegawai->nomor_rekening }}</span>
                                    </div>
                                    @endif
                                </div>
                            </div>
                        </td>

                        <!-- Kategori Klaim & Keterangan -->
                        <td class="py-3.5 px-4 max-w-xs">
                            <div class="flex items-center gap-2">
                                <span class="px-2 py-0.5 rounded-lg text-[10px] font-bold bg-teal-50 text-teal-700 border border-teal-200/60">
                                    {{ $item->jenis->nama_jenis ?? 'Umum' }}
                                </span>
                                <span class="text-[11px] font-mono text-slate-400">
                                    {{ $item->nomor_pengajuan }}
                                </span>
                            </div>
                            <p class="text-xs text-slate-700 font-medium mt-1 line-clamp-2 leading-relaxed">
                                {{ $item->keterangan }}
                            </p>
                            <div class="flex items-center gap-2 text-[10px] text-slate-400 mt-1">
                                <span>Tgl Kwitansi: {{ $item->tanggal_kuitansi?->format('d/m/Y') }}</span>
                                <span>•</span>
                                <span>Diajukan: {{ $item->tanggal_pengajuan?->format('d/m/Y') }}</span>
                            </div>
                        </td>

                        <!-- Nominal Biaya -->
                        <td class="py-3.5 px-4">
                            <div class="space-y-0.5">
                                <span class="font-extrabold text-slate-900 text-sm block">
                                    {{ $item->formatted_nominal }}
                                </span>
                                @if($item->nominal_disetujui !== null && $item->nominal_disetujui != $item->nominal)
                                    <div class="text-[11px] text-emerald-600 font-semibold flex items-center gap-1">
                                        <span>Disetujui: {{ $item->formatted_nominal_disetujui }}</span>
                                    </div>
                                @endif
                            </div>
                        </td>

                        <!-- Bukti Nota -->
                        <td class="py-3.5 px-4 text-center">
                            @if($item->bukti_nota)
                                <button type="button" 
                                        onclick="previewNota('{{ asset('storage/' . $item->bukti_nota) }}', '{{ basename($item->bukti_nota) }}', '{{ $item->nomor_pengajuan }}')" 
                                        class="inline-flex items-center gap-1.5 px-2.5 py-1.5 rounded-xl bg-slate-100 hover:bg-slate-200 text-slate-700 font-semibold text-[11px] transition-colors shadow-2xs">
                                    <i data-lucide="paperclip" class="w-3.5 h-3.5 text-primary-600"></i>
                                    <span>Lihat Nota</span>
                                </button>
                            @else
                                <span class="text-[11px] text-slate-400 italic">Tanpa Nota</span>
                            @endif
                        </td>

                        <!-- Status & Alur Approval -->
                        <td class="py-3.5 px-4 text-center">
                            <div class="inline-flex flex-col items-center gap-1">
                                @if($item->status === 'menunggu')
                                    @if($item->approval_step_total > 0)
                                        <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full bg-amber-50 text-amber-700 text-[10px] font-bold border border-amber-200">
                                            <span class="w-1.5 h-1.5 rounded-full bg-amber-500 animate-pulse"></span>
                                            Step {{ $item->approval_step_current }}/{{ $item->approval_step_total }}
                                        </span>
                                        <span class="text-[10px] text-slate-400">Approval Bertingkat</span>
                                    @else
                                        <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full bg-amber-50 text-amber-700 text-[10px] font-bold border border-amber-200">
                                            <span class="w-1.5 h-1.5 rounded-full bg-amber-500 animate-pulse"></span>
                                            Menunggu Admin
                                        </span>
                                    @endif
                                @elseif($item->status === 'disetujui')
                                    <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full bg-emerald-50 text-emerald-700 text-[10px] font-bold border border-emerald-200">
                                        <i data-lucide="check" class="w-3 h-3 text-emerald-600"></i>
                                        Disetujui
                                    </span>
                                    <span class="text-[10px] text-slate-400">Siap Dicairkan</span>
                                @elseif($item->status === 'dicairkan')
                                    <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full bg-indigo-50 text-indigo-700 text-[10px] font-bold border border-indigo-200">
                                        <i data-lucide="check-check" class="w-3 h-3 text-indigo-600"></i>
                                        Telah Dicairkan
                                    </span>
                                    @if($item->tanggal_pencairan)
                                        <span class="text-[10px] text-slate-400">{{ $item->tanggal_pencairan->format('d/m/Y') }}</span>
                                    @endif
                                @elseif($item->status === 'ditolak')
                                    <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full bg-rose-50 text-rose-700 text-[10px] font-bold border border-rose-200">
                                        <i data-lucide="x" class="w-3 h-3 text-rose-600"></i>
                                        Ditolak
                                    </span>
                                @endif
                            </div>
                        </td>

                        <!-- Aksi -->
                        <td class="py-3.5 px-4 text-right">
                            <div class="flex items-center justify-end gap-1.5">
                                <!-- Tombol Detail Lengkap -->
                                <button type="button" 
                                        onclick="openDetailModal({{ $item->id }})" 
                                        class="p-1.5 rounded-lg text-slate-500 hover:text-primary-600 hover:bg-primary-50 transition-colors" 
                                        title="Detail Pengajuan & Alur Approval">
                                    <i data-lucide="eye" class="w-4 h-4"></i>
                                </button>

                                <!-- Tombol Persetujuan Cepat Admin (Jika status masih menunggu) -->
                                @if($item->status === 'menunggu')
                                    <button type="button" 
                                            onclick="openApproveModal({{ $item->id }}, '{{ $item->nomor_pengajuan }}', {{ (float)$item->nominal }})" 
                                            class="p-1.5 rounded-lg text-slate-500 hover:text-emerald-600 hover:bg-emerald-50 transition-colors" 
                                            title="Setujui Klaim">
                                        <i data-lucide="check-circle" class="w-4 h-4 text-emerald-600"></i>
                                    </button>

                                    <button type="button" 
                                            onclick="openRejectModal({{ $item->id }}, '{{ $item->nomor_pengajuan }}')" 
                                            class="p-1.5 rounded-lg text-slate-500 hover:text-rose-600 hover:bg-rose-50 transition-colors" 
                                            title="Tolak Klaim">
                                        <i data-lucide="x-circle" class="w-4 h-4 text-rose-600"></i>
                                    </button>
                                @endif

                                <!-- Tombol Pencairan Dana (Jika status disetujui) -->
                                @if($item->status === 'disetujui')
                                    <button type="button" 
                                            onclick="openCairkanModal({{ $item->id }}, '{{ $item->nomor_pengajuan }}', '{{ $item->formatted_nominal_disetujui ?: $item->formatted_nominal }}')" 
                                            class="px-2.5 py-1 rounded-lg bg-indigo-50 hover:bg-indigo-100 text-indigo-700 font-bold text-[11px] transition-colors flex items-center gap-1" 
                                            title="Proses Pencairan Transfer">
                                        <i data-lucide="banknote" class="w-3.5 h-3.5"></i>
                                        <span>Cairkan</span>
                                    </button>
                                @endif

                                <!-- Tombol Hapus -->
                                <form action="{{ route('admin.reimbursement.pengajuan.destroy', $item->id) }}" method="POST" onsubmit="return confirm('Apakah Anda yakin ingin menghapus klaim {{ $item->nomor_pengajuan }}?')" class="inline-block">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="p-1.5 rounded-lg text-slate-400 hover:text-rose-600 hover:bg-rose-50 transition-colors" title="Hapus Data">
                                        <i data-lucide="trash-2" class="w-4 h-4"></i>
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="7" class="py-12 text-center text-slate-400">
                            <div class="flex flex-col items-center justify-center gap-2">
                                <i data-lucide="inbox" class="w-8 h-8 text-slate-300"></i>
                                <span class="font-medium text-xs">Belum ada data pengajuan reimbursement ditemukan.</span>
                            </div>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if($pengajuanList->hasPages())
        <div class="p-4 border-t border-slate-100">
            {{ $pengajuanList->links() }}
        </div>
        @endif
    </div>
</div>

<!-- MODAL DETAIL PENGAJUAN & TIMELINE APPROVAL -->
<div id="detailModal" class="fixed inset-0 z-50 hidden bg-slate-900/60 backdrop-blur-sm flex items-center justify-center p-4 overflow-y-auto">
    <div class="bg-white rounded-2xl max-w-2xl w-full p-6 shadow-2xl relative my-8 animate-in fade-in zoom-in-95 duration-200">
        <div class="flex items-center justify-between pb-4 border-b border-slate-100 mb-5">
            <div class="flex items-center gap-2.5">
                <div class="w-9 h-9 rounded-xl bg-primary-50 text-primary-600 flex items-center justify-center font-bold">
                    <i data-lucide="receipt" class="w-5 h-5"></i>
                </div>
                <div>
                    <h3 id="detailNomorPengajuan" class="text-base font-bold text-slate-900">Detail Pengajuan Reimbursement</h3>
                    <p id="detailTanggalPengajuan" class="text-[11px] text-slate-400">Informasi pengajuan klaim karyawan</p>
                </div>
            </div>
            <button type="button" onclick="closeDetailModal()" class="text-slate-400 hover:text-slate-600">
                <i data-lucide="x" class="w-5 h-5"></i>
            </button>
        </div>

        <div id="detailLoading" class="py-12 text-center text-slate-400">
            <div class="animate-spin w-8 h-8 border-2 border-primary-600 border-t-transparent rounded-full mx-auto mb-2"></div>
            <span class="text-xs">Memuat detail pengajuan...</span>
        </div>

        <div id="detailBody" class="hidden space-y-5">
            <!-- Profil Karyawan & Rekening Bank -->
            <div class="p-4 rounded-xl bg-slate-50 border border-slate-200/80 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
                <div class="flex items-center gap-3">
                    <div id="detailAvatar" class="w-12 h-12 rounded-xl bg-primary-100 text-primary-700 font-bold flex items-center justify-center shrink-0 overflow-hidden text-sm">
                        AD
                    </div>
                    <div>
                        <h4 id="detailNamaPegawai" class="font-bold text-slate-900 text-sm">Nama Karyawan</h4>
                        <p id="detailNipJabatan" class="text-[11px] text-slate-500">NIP • Departemen • Jabatan</p>
                    </div>
                </div>
                <div class="sm:text-right border-t sm:border-t-0 pt-2 sm:pt-0 border-slate-200 w-full sm:w-auto">
                    <span class="text-[10px] font-bold text-slate-400 uppercase tracking-wider block">Rekening Pembayaran</span>
                    <span id="detailRekeningBank" class="text-xs font-bold text-slate-800 block">Bank Mandiri: 1234567890</span>
                    <span id="detailAtasNama" class="text-[10px] text-slate-500">a.n Nama Karyawan</span>
                </div>
            </div>

            <!-- Detail Klaim & Biaya -->
            <div class="grid grid-cols-2 sm:grid-cols-3 gap-3 text-xs">
                <div class="p-3 rounded-xl bg-white border border-slate-200">
                    <span class="text-slate-400 text-[10px] font-semibold block uppercase">Jenis Reimbursement</span>
                    <span id="detailNamaJenis" class="font-bold text-slate-800 text-sm mt-0.5 block">Kesehatan</span>
                </div>
                <div class="p-3 rounded-xl bg-white border border-slate-200">
                    <span class="text-slate-400 text-[10px] font-semibold block uppercase">Tanggal Nota/Kuitansi</span>
                    <span id="detailTanggalKuitansi" class="font-bold text-slate-800 text-sm mt-0.5 block">12/10/2026</span>
                </div>
                <div class="p-3 rounded-xl bg-white border border-slate-200">
                    <span class="text-slate-400 text-[10px] font-semibold block uppercase">Status Saat Ini</span>
                    <span id="detailStatusBadge" class="font-bold text-sm mt-0.5 block">Menunggu</span>
                </div>
                <div class="p-3 rounded-xl bg-white border border-slate-200">
                    <span class="text-slate-400 text-[10px] font-semibold block uppercase">Nominal Diajukan</span>
                    <span id="detailNominal" class="font-extrabold text-slate-900 text-sm mt-0.5 block">Rp 500.000</span>
                </div>
                <div class="p-3 rounded-xl bg-white border border-slate-200">
                    <span class="text-slate-400 text-[10px] font-semibold block uppercase">Nominal Disetujui</span>
                    <span id="detailNominalDisetujui" class="font-extrabold text-emerald-600 text-sm mt-0.5 block">Rp 500.000</span>
                </div>
                <div class="p-3 rounded-xl bg-white border border-slate-200">
                    <span class="text-slate-400 text-[10px] font-semibold block uppercase">Bukti Nota</span>
                    <div id="detailNotaBtn" class="mt-0.5">
                        <span class="text-slate-400 text-[11px] italic">Tidak Ada</span>
                    </div>
                </div>
            </div>

            <!-- Keterangan & Alasan Pengajuan -->
            <div class="space-y-1">
                <label class="text-[11px] font-bold text-slate-400 uppercase tracking-wider block">Keterangan / Rincian Kebutuhan</label>
                <div id="detailKeterangan" class="p-3 rounded-xl bg-slate-50 border border-slate-200/80 text-xs text-slate-700 leading-relaxed">
                    -
                </div>
            </div>

            <!-- Catatan Verifikator / Admin -->
            <div id="detailCatatanAdminBox" class="space-y-1 hidden">
                <label class="text-[11px] font-bold text-slate-400 uppercase tracking-wider block">Catatan Verifikator / Approver</label>
                <div id="detailCatatanAdmin" class="p-3 rounded-xl bg-amber-50 border border-amber-200 text-xs text-amber-900 leading-relaxed">
                    -
                </div>
            </div>

            <!-- Tracking Progres Approval Bertingkat -->
            <div class="space-y-2.5 pt-2 border-t border-slate-100">
                <div class="flex items-center justify-between">
                    <label class="text-xs font-bold text-slate-800 flex items-center gap-1.5">
                        <i data-lucide="git-commit" class="w-4 h-4 text-primary-600"></i>
                        <span>Alur Persetujuan (Approval Tracking)</span>
                    </label>
                    <span id="detailAlurType" class="text-[10px] font-bold px-2 py-0.5 rounded-md bg-slate-100 text-slate-600">
                        Approval Bertingkat
                    </span>
                </div>

                <div id="detailTimelineSteps" class="space-y-2">
                    <!-- Dinamis via JS -->
                </div>
            </div>
        </div>

        <div class="flex items-center justify-end gap-2 pt-4 border-t border-slate-100 mt-5">
            <button type="button" onclick="closeDetailModal()" class="px-4 py-2 rounded-xl bg-slate-100 hover:bg-slate-200 text-slate-700 text-xs font-semibold transition-colors">
                Tutup
            </button>
        </div>
    </div>
</div>

<!-- MODAL PREVIEW NOTA KUITANSI -->
<div id="notaPreviewModal" class="fixed inset-0 z-50 hidden bg-slate-900/70 backdrop-blur-md flex items-center justify-center p-4">
    <div class="bg-white rounded-2xl max-w-2xl w-full p-5 shadow-2xl relative my-8 animate-in fade-in zoom-in-95 duration-200 flex flex-col max-h-[90vh]">
        <div class="flex items-center justify-between pb-3 border-b border-slate-100 mb-3 shrink-0">
            <div>
                <h4 id="previewNotaTitle" class="text-sm font-bold text-slate-900">Bukti Nota Transaksi</h4>
                <p id="previewNotaSubtitle" class="text-[10px] text-slate-400">Lampiran bukti kuitansi resmi</p>
            </div>
            <div class="flex items-center gap-2">
                <a id="previewNotaDownload" href="#" target="_blank" class="p-1.5 rounded-lg text-slate-500 hover:text-primary-600 hover:bg-slate-100 transition-colors" title="Buka di Tab Baru">
                    <i data-lucide="external-link" class="w-4 h-4"></i>
                </a>
                <button type="button" onclick="closeNotaPreview()" class="text-slate-400 hover:text-slate-600">
                    <i data-lucide="x" class="w-5 h-5"></i>
                </button>
            </div>
        </div>

        <div class="flex-1 overflow-auto flex items-center justify-center bg-slate-50 rounded-xl border border-slate-200 p-2 min-h-[300px]">
            <img id="previewNotaImg" src="" alt="Bukti Nota" class="max-w-full max-h-[60vh] object-contain rounded-lg shadow-sm hidden">
            <iframe id="previewNotaPdf" src="" class="w-full h-[60vh] rounded-lg hidden border-0"></iframe>
        </div>
    </div>
</div>

<!-- MODAL SETUJUI KLAIM OLEH ADMIN -->
<div id="approveModal" class="fixed inset-0 z-50 hidden bg-slate-900/60 backdrop-blur-sm flex items-center justify-center p-4">
    <div class="bg-white rounded-2xl max-w-md w-full p-6 shadow-2xl relative animate-in fade-in zoom-in-95 duration-200">
        <div class="flex items-center justify-between pb-3 border-b border-slate-100 mb-4">
            <div class="flex items-center gap-2">
                <div class="w-8 h-8 rounded-xl bg-emerald-50 text-emerald-600 flex items-center justify-center font-bold">
                    <i data-lucide="check" class="w-4 h-4"></i>
                </div>
                <h3 class="text-sm font-bold text-slate-900">Setujui Pengajuan Reimbursement</h3>
            </div>
            <button type="button" onclick="closeApproveModal()" class="text-slate-400 hover:text-slate-600">
                <i data-lucide="x" class="w-4 h-4"></i>
            </button>
        </div>

        <form id="approveForm" method="POST" class="space-y-4">
            @csrf
            <div>
                <p id="approveNomorText" class="text-xs text-slate-600 font-semibold mb-2">Konfirmasi persetujuan klaim:</p>
            </div>

            <div class="space-y-1">
                <label class="text-xs font-semibold text-slate-700">Nominal Disetujui (Rp) <span class="text-rose-500">*</span></label>
                <input type="number" step="0.01" min="1" id="approveNominalInput" name="nominal_disetujui" required class="w-full px-3 py-2 text-xs rounded-xl border border-slate-200 focus:outline-none focus:ring-2 focus:ring-emerald-500/20 focus:border-emerald-500 font-bold text-slate-800">
                <span class="text-[10px] text-slate-400">Anda dapat menyesuaikan nominal disetujui jika ada biaya yang dipotong.</span>
            </div>

            <div class="space-y-1">
                <label class="text-xs font-semibold text-slate-700">Catatan Persetujuan (Opsional)</label>
                <textarea name="catatan_admin" rows="2" placeholder="Catatan verifikasi verifikator..." class="w-full px-3 py-2 text-xs rounded-xl border border-slate-200 focus:outline-none focus:ring-2 focus:ring-emerald-500/20 focus:border-emerald-500"></textarea>
            </div>

            <div class="flex items-center justify-end gap-2 pt-3 border-t border-slate-100">
                <button type="button" onclick="closeApproveModal()" class="px-4 py-2 rounded-xl border border-slate-200 text-slate-600 hover:bg-slate-50 text-xs font-semibold transition-colors">
                    Batal
                </button>
                <button type="submit" class="px-4 py-2 rounded-xl bg-emerald-600 hover:bg-emerald-700 text-white text-xs font-semibold shadow-sm transition-all">
                    Setujui Klaim
                </button>
            </div>
        </form>
    </div>
</div>

<!-- MODAL TOLAK KLAIM OLEH ADMIN -->
<div id="rejectModal" class="fixed inset-0 z-50 hidden bg-slate-900/60 backdrop-blur-sm flex items-center justify-center p-4">
    <div class="bg-white rounded-2xl max-w-md w-full p-6 shadow-2xl relative animate-in fade-in zoom-in-95 duration-200">
        <div class="flex items-center justify-between pb-3 border-b border-slate-100 mb-4">
            <div class="flex items-center gap-2">
                <div class="w-8 h-8 rounded-xl bg-rose-50 text-rose-600 flex items-center justify-center font-bold">
                    <i data-lucide="x-circle" class="w-4 h-4"></i>
                </div>
                <h3 class="text-sm font-bold text-slate-900">Tolak Pengajuan Reimbursement</h3>
            </div>
            <button type="button" onclick="closeRejectModal()" class="text-slate-400 hover:text-slate-600">
                <i data-lucide="x" class="w-4 h-4"></i>
            </button>
        </div>

        <form id="rejectForm" method="POST" class="space-y-4">
            @csrf
            <div>
                <p id="rejectNomorText" class="text-xs text-slate-600 font-semibold mb-2">Penolakan klaim:</p>
            </div>

            <div class="space-y-1">
                <label class="text-xs font-semibold text-slate-700">Alasan Penolakan <span class="text-rose-500">*</span></label>
                <textarea name="catatan_admin" rows="3" required placeholder="Tuliskan alasan penolakan secara jelas agar diketahui karyawan..." class="w-full px-3 py-2 text-xs rounded-xl border border-slate-200 focus:outline-none focus:ring-2 focus:ring-rose-500/20 focus:border-rose-500"></textarea>
            </div>

            <div class="flex items-center justify-end gap-2 pt-3 border-t border-slate-100">
                <button type="button" onclick="closeRejectModal()" class="px-4 py-2 rounded-xl border border-slate-200 text-slate-600 hover:bg-slate-50 text-xs font-semibold transition-colors">
                    Batal
                </button>
                <button type="submit" class="px-4 py-2 rounded-xl bg-rose-600 hover:bg-rose-700 text-white text-xs font-semibold shadow-sm transition-all">
                    Tolak Pengajuan
                </button>
            </div>
        </form>
    </div>
</div>

<!-- MODAL CAIRKAN KLAIM -->
<div id="cairkanModal" class="fixed inset-0 z-50 hidden bg-slate-900/60 backdrop-blur-sm flex items-center justify-center p-4">
    <div class="bg-white rounded-2xl max-w-md w-full p-6 shadow-2xl relative animate-in fade-in zoom-in-95 duration-200">
        <div class="flex items-center justify-between pb-3 border-b border-slate-100 mb-4">
            <div class="flex items-center gap-2">
                <div class="w-8 h-8 rounded-xl bg-indigo-50 text-indigo-600 flex items-center justify-center font-bold">
                    <i data-lucide="banknote" class="w-4 h-4"></i>
                </div>
                <h3 class="text-sm font-bold text-slate-900">Pencairan Dana Reimbursement</h3>
            </div>
            <button type="button" onclick="closeCairkanModal()" class="text-slate-400 hover:text-slate-600">
                <i data-lucide="x" class="w-4 h-4"></i>
            </button>
        </div>

        <form id="cairkanForm" method="POST" class="space-y-4">
            @csrf
            <div>
                <p id="cairkanNomorText" class="text-xs text-slate-600 font-semibold mb-1">Nomor Pengajuan: </p>
                <p id="cairkanNominalText" class="text-sm font-extrabold text-indigo-700">Nominal yang Dicairkan: </p>
            </div>

            <div class="space-y-1">
                <label class="text-xs font-semibold text-slate-700">Tanggal Pencairan / Transfer <span class="text-rose-500">*</span></label>
                <input type="date" name="tanggal_pencairan" value="{{ date('Y-m-d') }}" required class="w-full px-3 py-2 text-xs rounded-xl border border-slate-200 focus:outline-none focus:border-indigo-500">
            </div>

            <div class="space-y-1">
                <label class="text-xs font-semibold text-slate-700">Catatan / No. Referensi Transfer</label>
                <input type="text" name="catatan_pencairan" placeholder="Contoh: Transfer Mandiri Ref #TRX-982182" class="w-full px-3 py-2 text-xs rounded-xl border border-slate-200 focus:outline-none focus:border-indigo-500">
            </div>

            <div class="flex items-center justify-end gap-2 pt-3 border-t border-slate-100">
                <button type="button" onclick="closeCairkanModal()" class="px-4 py-2 rounded-xl border border-slate-200 text-slate-600 hover:bg-slate-50 text-xs font-semibold transition-colors">
                    Batal
                </button>
                <button type="submit" class="px-4 py-2 rounded-xl bg-indigo-600 hover:bg-indigo-700 text-white text-xs font-semibold shadow-sm transition-all">
                    Tandai Telah Dicairkan
                </button>
            </div>
        </form>
    </div>
</div>

<script>
    // 1. Modal Detail
    async function openDetailModal(id) {
        const modal = document.getElementById('detailModal');
        const loading = document.getElementById('detailLoading');
        const body = document.getElementById('detailBody');

        modal.classList.remove('hidden');
        loading.classList.remove('hidden');
        body.classList.add('hidden');

        try {
            const res = await fetch(`/admin/reimbursement/pengajuan/${id}`);
            const json = await res.json();

            if (json.success) {
                const data = json.data;

                document.getElementById('detailNomorPengajuan').innerText = `Klaim: ${data.nomor_pengajuan}`;
                document.getElementById('detailTanggalPengajuan').innerText = `Diajukan pada ${data.tanggal_pengajuan}`;
                
                // Pegawai
                document.getElementById('detailNamaPegawai').innerText = data.pegawai.nama || 'Pegawai';
                document.getElementById('detailNipJabatan').innerText = `NIP: ${data.pegawai.nip || '-'} • ${data.pegawai.departemen} • ${data.pegawai.jabatan}`;
                document.getElementById('detailRekeningBank').innerText = `${data.pegawai.bank_nama}: ${data.pegawai.bank_nomor}`;
                document.getElementById('detailAtasNama').innerText = data.pegawai.bank_atas_nama ? `a.n ${data.pegawai.bank_atas_nama}` : '';

                const avatarEl = document.getElementById('detailAvatar');
                if (data.pegawai.foto) {
                    avatarEl.innerHTML = `<img src="${data.pegawai.foto}" class="w-full h-full object-cover">`;
                } else {
                    avatarEl.innerText = (data.pegawai.nama || 'PG').substring(0, 2).toUpperCase();
                }

                // Data Klaim
                document.getElementById('detailNamaJenis').innerText = data.jenis.nama || '-';
                document.getElementById('detailTanggalKuitansi').innerText = data.tanggal_kuitansi || '-';
                document.getElementById('detailNominal').innerText = data.nominal_format;
                document.getElementById('detailNominalDisetujui').innerText = data.nominal_disetujui_format;

                const statusEl = document.getElementById('detailStatusBadge');
                statusEl.innerText = data.status_label;
                statusEl.className = data.status === 'disetujui' ? 'font-bold text-sm text-emerald-600 block' : (data.status === 'dicairkan' ? 'font-bold text-sm text-indigo-600 block' : (data.status === 'ditolak' ? 'font-bold text-sm text-rose-600 block' : 'font-bold text-sm text-amber-600 block'));

                document.getElementById('detailKeterangan').innerText = data.keterangan || '-';

                // Bukti Nota
                const notaBtnEl = document.getElementById('detailNotaBtn');
                if (data.bukti_nota_url) {
                    notaBtnEl.innerHTML = `
                        <button type="button" onclick="previewNota('${data.bukti_nota_url}', 'Bukti Nota', '${data.nomor_pengajuan}')" class="px-2.5 py-1 rounded-lg bg-primary-50 text-primary-700 font-bold text-[11px] hover:bg-primary-100 transition-colors inline-flex items-center gap-1">
                            <span>Buka Nota</span>
                        </button>
                    `;
                } else {
                    notaBtnEl.innerHTML = `<span class="text-slate-400 text-[11px] italic">Tidak Ada</span>`;
                }

                // Catatan Admin
                const catatanBox = document.getElementById('detailCatatanAdminBox');
                if (data.catatan_admin || data.catatan_pencairan) {
                    catatanBox.classList.remove('hidden');
                    let text = data.catatan_admin ? `Catatan: ${data.catatan_admin}` : '';
                    if (data.catatan_pencairan) {
                        text += `\nPencairan: ${data.catatan_pencairan} (${data.tanggal_pencairan})`;
                    }
                    document.getElementById('detailCatatanAdmin').innerText = text;
                } else {
                    catatanBox.classList.add('hidden');
                }

                // Timeline Alur
                const alurType = document.getElementById('detailAlurType');
                const stepsContainer = document.getElementById('detailTimelineSteps');
                stepsContainer.innerHTML = '';

                if (data.is_bertingkat) {
                    alurType.innerText = `Approval Bertingkat (${data.step_total} Step)`;
                    alurType.className = 'text-[10px] font-bold px-2 py-0.5 rounded-md bg-emerald-50 text-emerald-700 border border-emerald-200';

                    if (data.approval_steps && data.approval_steps.length > 0) {
                        data.approval_steps.forEach(step => {
                            const isDone = step.status === 'disetujui';
                            const isReject = step.status === 'ditolak';
                            const isCurr = step.is_current;

                            let icon = `<span class="w-2.5 h-2.5 rounded-full ${isDone ? 'bg-emerald-500' : (isReject ? 'bg-rose-500' : (isCurr ? 'bg-amber-500 animate-pulse' : 'bg-slate-300'))}"></span>`;
                            let badge = isDone 
                                ? `<span class="px-2 py-0.5 rounded text-[10px] font-bold bg-emerald-50 text-emerald-700">Disetujui</span>`
                                : (isReject 
                                    ? `<span class="px-2 py-0.5 rounded text-[10px] font-bold bg-rose-50 text-rose-700">Ditolak</span>`
                                    : (isCurr 
                                        ? `<span class="px-2 py-0.5 rounded text-[10px] font-bold bg-amber-50 text-amber-700">Menunggu Aksi</span>`
                                        : `<span class="px-2 py-0.5 rounded text-[10px] font-medium bg-slate-100 text-slate-500">Antrean</span>`));

                            stepsContainer.innerHTML += `
                                <div class="p-3 rounded-xl border ${isCurr ? 'border-amber-200 bg-amber-50/30' : 'border-slate-100 bg-slate-50/50'} flex items-center justify-between gap-3 text-xs">
                                    <div class="flex items-center gap-2.5 min-w-0">
                                        <div class="w-6 h-6 rounded-full flex items-center justify-center bg-white border border-slate-200 shrink-0">
                                            ${icon}
                                        </div>
                                        <div class="min-w-0">
                                            <span class="font-bold text-slate-800 block truncate">Step ${step.step_ke}: ${step.label}</span>
                                            <span class="text-[11px] text-slate-500 block truncate">${step.approver_nama} (${step.approver_jabatan})</span>
                                            ${step.catatan ? `<span class="text-[10px] text-slate-600 italic block mt-0.5">"${step.catatan}"</span>` : ''}
                                        </div>
                                    </div>
                                    <div class="text-right shrink-0">
                                        ${badge}
                                        ${step.tanggal_aksi ? `<span class="text-[10px] text-slate-400 block mt-0.5">${step.tanggal_aksi}</span>` : ''}
                                    </div>
                                </div>
                            `;
                        });
                    }
                } else {
                    alurType.innerText = 'Approval Langsung Admin';
                    alurType.className = 'text-[10px] font-bold px-2 py-0.5 rounded-md bg-slate-100 text-slate-700';

                    stepsContainer.innerHTML = `
                        <div class="p-3 rounded-xl border border-slate-100 bg-slate-50 flex items-center justify-between text-xs">
                            <span class="text-slate-600">Persetujuan tunggal dikelola langsung oleh Administrator HR / Finance.</span>
                            <span class="font-bold text-slate-800">${data.disetujui_oleh || 'Admin'}</span>
                        </div>
                    `;
                }

                loading.classList.add('hidden');
                body.classList.remove('hidden');
            }
        } catch (e) {
            console.error(e);
            loading.innerHTML = '<span class="text-xs text-rose-500 font-semibold">Gagal memuat detail pengajuan.</span>';
        }
    }

    function closeDetailModal() {
        document.getElementById('detailModal').classList.add('hidden');
    }

    // 2. Modal Preview Nota
    function previewNota(url, filename, nomor) {
        document.getElementById('previewNotaTitle').innerText = `Nota Bukti: ${nomor}`;
        document.getElementById('previewNotaSubtitle').innerText = filename;
        document.getElementById('previewNotaDownload').href = url;

        const imgEl = document.getElementById('previewNotaImg');
        const pdfEl = document.getElementById('previewNotaPdf');

        const isPdf = url.toLowerCase().endsWith('.pdf');
        if (isPdf) {
            imgEl.classList.add('hidden');
            pdfEl.classList.remove('hidden');
            pdfEl.src = url;
        } else {
            pdfEl.classList.add('hidden');
            imgEl.classList.remove('hidden');
            imgEl.src = url;
        }

        document.getElementById('notaPreviewModal').classList.remove('hidden');
    }

    function closeNotaPreview() {
        document.getElementById('notaPreviewModal').classList.add('hidden');
        document.getElementById('previewNotaPdf').src = '';
        document.getElementById('previewNotaImg').src = '';
    }

    // 3. Modal Approve
    function openApproveModal(id, nomor, nominal) {
        const form = document.getElementById('approveForm');
        form.action = `/admin/reimbursement/pengajuan/${id}/approve`;

        document.getElementById('approveNomorText').innerText = `Setujui klaim: ${nomor}`;
        document.getElementById('approveNominalInput').value = nominal;

        document.getElementById('approveModal').classList.remove('hidden');
    }

    function closeApproveModal() {
        document.getElementById('approveModal').classList.add('hidden');
    }

    // 4. Modal Reject
    function openRejectModal(id, nomor) {
        const form = document.getElementById('rejectForm');
        form.action = `/admin/reimbursement/pengajuan/${id}/reject`;

        document.getElementById('rejectNomorText').innerText = `Tolak klaim: ${nomor}`;
        document.getElementById('rejectModal').classList.remove('hidden');
    }

    function closeRejectModal() {
        document.getElementById('rejectModal').classList.add('hidden');
    }

    // 5. Modal Cairkan
    function openCairkanModal(id, nomor, nominalFormat) {
        const form = document.getElementById('cairkanForm');
        form.action = `/admin/reimbursement/pengajuan/${id}/cairkan`;

        document.getElementById('cairkanNomorText').innerText = `Nomor Pengajuan: ${nomor}`;
        document.getElementById('cairkanNominalText').innerText = `Nominal yang Dicairkan: ${nominalFormat}`;

        document.getElementById('cairkanModal').classList.remove('hidden');
    }

    function closeCairkanModal() {
        document.getElementById('cairkanModal').classList.add('hidden');
    }
</script>
@endsection