@extends('layouts.kesbangpol_stitch')
@section('content')

<div class="max-w-container-max mx-auto space-y-8 pb-12">
<!-- Header Section -->
<div class="mb-8">
<h1 class="text-headline-lg font-headline-lg text-on-background mb-2">Riwayat Pengajuan</h1>
<p class="text-body-md font-body-md text-on-surface-variant">Riwayat seluruh pengajuan magang yang telah selesai diproses.</p>
</div>
<!-- Summary Cards -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-stack-lg">
<!-- Card 1 -->
<div class="bg-surface-container-lowest rounded-xl p-6 shadow-level-1 card-hover border-t-4 border-primary-container flex flex-col justify-between h-[130px]">
    <div class="flex justify-between items-start">
        <p class="text-label-md font-label-md text-on-surface-variant uppercase tracking-wider">Total Riwayat</p>
        <span class="material-symbols-outlined text-primary-container opacity-80" style="font-variation-settings: 'FILL' 1;">receipt_long</span>
    </div>
    <div class="mt-auto">
        <h3 class="text-headline-lg font-headline-lg text-on-surface leading-none">245</h3>
    </div>
</div>
<!-- Card 2 -->
<div class="bg-surface-container-lowest rounded-xl p-6 shadow-level-1 card-hover border-t-4 border-[#10B981] flex flex-col justify-between h-[130px]">
    <div class="flex justify-between items-start">
        <p class="text-label-md font-label-md text-on-surface-variant uppercase tracking-wider">Diterima</p>
        <span class="material-symbols-outlined text-[#10B981] opacity-80" style="font-variation-settings: 'FILL' 1;">check_circle</span>
    </div>
    <div class="mt-auto">
        <h3 class="text-headline-lg font-headline-lg text-on-surface leading-none">180</h3>
    </div>
</div>
<!-- Card 3 -->
<div class="bg-surface-container-lowest rounded-xl p-6 shadow-level-1 card-hover border-t-4 border-error flex flex-col justify-between h-[130px]">
    <div class="flex justify-between items-start">
        <p class="text-label-md font-label-md text-on-surface-variant uppercase tracking-wider">Ditolak</p>
        <span class="material-symbols-outlined text-error opacity-80" style="font-variation-settings: 'FILL' 1;">cancel</span>
    </div>
    <div class="mt-auto">
        <h3 class="text-headline-lg font-headline-lg text-on-surface leading-none">35</h3>
    </div>
</div>
<!-- Card 4 -->
<div class="bg-surface-container-lowest rounded-xl p-6 shadow-level-1 card-hover border-t-4 border-outline flex flex-col justify-between h-[130px]">
    <div class="flex justify-between items-start">
        <p class="text-label-md font-label-md text-on-surface-variant uppercase tracking-wider">Berlaku Habis</p>
        <span class="material-symbols-outlined text-outline opacity-80" style="font-variation-settings: 'FILL' 1;">timer_off</span>
    </div>
    <div class="mt-auto">
        <h3 class="text-headline-lg font-headline-lg text-on-surface leading-none">30</h3>
    </div>
</div>
</div>
<!-- Main Data Canvas -->
<div class="bg-surface-container-lowest rounded-xl shadow-[0px_4px_20px_rgba(0,0,0,0.05)] overflow-hidden">
<!-- Filters Bar -->
<div class="p-6 border-b border-outline-variant/30 bg-surface-bright flex flex-wrap gap-4 items-end">
<div class="flex-1 min-w-[250px] flex flex-col gap-stack-sm">
<label class="text-label-md font-label-md text-on-surface-variant">Pencarian</label>
<div class="relative">
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-on-surface-variant">search</span>
<input class="w-full bg-surface border border-outline-variant rounded-lg pl-10 pr-4 py-2.5 text-body-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-all" placeholder="Cari nama peserta atau instansi..." type="text"/>
</div>
</div>
<div class="flex flex-col gap-stack-sm w-[160px]">
<label class="text-label-md font-label-md text-on-surface-variant">Status</label>
<select class="w-full bg-surface border border-outline-variant rounded-lg px-3 py-2.5 text-body-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent appearance-none">
<option>Semua Status</option>
<option>Diterima</option>
<option>Ditolak</option>
</select>
</div>
<div class="flex flex-col gap-stack-sm w-[200px]">
<label class="text-label-md font-label-md text-on-surface-variant">Rentang Tanggal</label>
<input class="w-full bg-surface border border-outline-variant rounded-lg px-3 py-2.5 text-body-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent text-on-surface-variant" type="date"/>
</div>
</div>
<!-- Table -->
<div class="overflow-x-auto">
<table class="w-full text-left border-collapse">
<thead>
<tr class="bg-[#F1F5F9] border-b border-outline-variant/30">
<th class="px-6 py-4 text-label-md font-label-md text-on-surface-variant uppercase tracking-wider">Nama Peserta</th>
<th class="px-6 py-4 text-label-md font-label-md text-on-surface-variant uppercase tracking-wider">Asal Instansi</th>
<th class="px-6 py-4 text-label-md font-label-md text-on-surface-variant uppercase tracking-wider">Jenis Layanan</th>
<th class="px-6 py-4 text-label-md font-label-md text-on-surface-variant uppercase tracking-wider">Tgl. Selesai</th>
<th class="px-6 py-4 text-label-md font-label-md text-on-surface-variant uppercase tracking-wider text-center">Status</th>
<th class="px-6 py-4 text-label-md font-label-md text-on-surface-variant uppercase tracking-wider text-right">Aksi</th>
</tr>
</thead>
<tbody class="divide-y divide-[#E2E8F0]">
                                @forelse($applications as $app)
                                <tr class="hover:bg-surface-bright/50 transition-colors group">
                                    <td class="py-4 px-6">
                                        <div class="flex items-center gap-3">
                                            <div class="h-10 w-10 rounded-full bg-secondary-container/20 flex items-center justify-center text-secondary font-bold shrink-0">
                                                {{ strtoupper(substr($app->nama_lengkap, 0, 2)) }}
                                            </div>
                                            <div>
                                                <p class="text-body-md font-body-md font-medium text-on-surface">{{ $app->nama_lengkap }}</p>
                                                <p class="text-caption font-caption text-on-surface-variant">NIK: {{ $app->nik }}</p>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="py-4 px-6 text-body-md font-body-md text-on-surface-variant">{{ $app->instansi_asal }}</td>
                                    <td class="py-4 px-6 text-body-md font-body-md text-on-surface-variant max-w-[200px] truncate" title="{{ $app->jenis_layanan }}">
                                        {{ $app->jenis_layanan }}
                                    </td>
                                    <td class="py-4 px-6 text-body-md font-body-md text-on-surface-variant">{{ \Carbon\Carbon::parse($app->updated_at)->format('d M Y') }}</td>
                                    <td class="py-4 px-6">
                                        @if($app->status === 'approved')
                                            <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-caption font-caption font-medium bg-[#D4EDDA] text-[#155724]">
                                                <span class="w-1.5 h-1.5 rounded-full bg-[#28A745]"></span> Disetujui
                                            </span>
                                        @elseif($app->status === 'rejected')
                                            <span class="inline-flex items-center px-2.5 py-1 rounded-md text-caption font-caption font-medium bg-[#F8D7DA] text-[#721C24] border border-[#F5C6CB]">
                                                Ditolak
                                            </span>
                                        @endif
                                    </td>
                                    <td class="py-4 px-6 text-center">
                                        <div class="flex justify-center gap-2 opacity-100 md:opacity-0 md:group-hover:opacity-100 transition-opacity">
                                            <a href="{{ route('kesbangpol.history.show', $app->id) }}" aria-label="Lihat Riwayat" class="p-2 text-on-surface-variant hover:bg-surface-container hover:text-primary transition-colors rounded-lg" title="Lihat Riwayat">
                                                <span class="material-symbols-outlined">visibility</span>
                                            </a>
                                        </div>
                                    </td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="6" class="py-8 text-center text-on-surface-variant">Belum ada riwayat pengajuan.</td>
                                </tr>
                                @endforelse
                            </tbody>
</table>
</div>
<!-- Footer / Pagination -->
<div class="p-4 border-t border-outline-variant/30 bg-surface-bright flex items-center justify-between">
<p class="text-caption font-caption text-on-surface-variant">Menampilkan 1-10 dari 245 pengajuan</p>
<div class="flex items-center gap-2">
<button class="p-1 rounded-md text-on-surface-variant hover:bg-surface-container-high disabled:opacity-50" disabled="">
<span class="material-symbols-outlined text-xl">chevron_left</span>
</button>
<button class="w-8 h-8 rounded-md bg-primary text-white text-label-md font-medium flex items-center justify-center">1</button>
<button class="w-8 h-8 rounded-md bg-transparent text-on-surface hover:bg-surface-container-high text-label-md font-medium flex items-center justify-center transition-colors">2</button>
<button class="w-8 h-8 rounded-md bg-transparent text-on-surface hover:bg-surface-container-high text-label-md font-medium flex items-center justify-center transition-colors">3</button>
<span class="text-on-surface-variant">...</span>
<button class="p-1 rounded-md text-on-surface-variant hover:bg-surface-container-high transition-colors">
<span class="material-symbols-outlined text-xl">chevron_right</span>
</button>
</div>
</div>
</div>
</div>

@endsection
