@extends('student.layouts.app')

@section('content')
<div class="p-4 md:p-6 space-y-5 max-w-5xl mx-auto">
    <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
        <div>
            <h1 class="text-2xl font-extrabold text-gray-800 tracking-tight">My Applications</h1>
            <p class="text-sm text-gray-500 mt-1">Track your requests</p>
        </div>
        <a href="{{ route('student.applications.create', ['slug' => session('student_school_slug')]) }}" class="w-full sm:w-auto bg-gradient-to-r from-emerald-600 to-teal-600 hover:from-emerald-700 hover:to-teal-700 text-white px-5 py-2.5 rounded-xl shadow-lg shadow-emerald-500/20 active:scale-95 transition-all flex items-center justify-center gap-2 font-bold text-sm">
            <i class="fa-solid fa-plus"></i> New
        </a>
    </div>

        <!-- Filter Tabs — Grid Layout, No Scroll -->
    <div class="grid grid-cols-5 gap-2">
        @foreach(['all' => 'All', 'pending' => 'Pending', 'approved' => 'Approved', 'rejected' => 'Rejected', 'delivered' => 'Delivered'] as $key => $label)
            <a href="{{ route('student.applications.index', ['slug' => session('student_school_slug'), 'filter' => $key]) }}" 
               class="px-2 py-2.5 rounded-xl text-[10px] font-black text-center transition-all {{ request('filter') === $key ? 'bg-gray-900 text-white shadow-lg' : 'bg-white text-gray-600 border border-gray-200 hover:bg-gray-50' }}">
                {{ $label }}
            </a>
        @endforeach
    </div>

    <!-- Applications List -->
    <div class="space-y-3">
        @forelse($applications as $app)
            @php $isUnread = in_array($app->id, $unreadIds ?? []); @endphp
            <a href="{{ route('student.applications.show', ['slug' => session('student_school_slug'), 'id' => $app->id]) }}" class="relative block bg-white border border-gray-100 rounded-2xl p-4 shadow-sm hover:shadow-md active:scale-[0.98] transition-all {{ $isUnread ? 'ring-2 ring-emerald-400/40 border-emerald-200' : '' }}">
                @if($isUnread)
                    <span class="absolute -top-1.5 -right-1.5 flex h-5 w-5 z-10" title="Status updated">
                        <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
                        <span class="relative inline-flex rounded-full h-5 w-5 bg-emerald-500 items-center justify-center shadow-md">
                            <i class="fa-solid fa-bell text-[9px] text-white"></i>
                        </span>
                    </span>
                @endif
                <div class="flex justify-between items-start mb-3">
                    <div class="flex items-center gap-3">
                        <div class="w-10 h-10 rounded-xl {{ $app->application_type === 'leave' ? 'bg-blue-50 text-blue-600' : 'bg-purple-50 text-purple-600' }} flex items-center justify-center flex-shrink-0">
                            <i class="fa-solid {{ $app->application_type === 'leave' ? 'fa-calendar' : 'fa-file-lines' }}"></i>
                        </div>
                        <div>
                            <h3 class="font-bold text-gray-800 text-sm">{{ ucfirst($app->subject) }}</h3>
                            <p class="text-[11px] text-gray-500 font-medium">{{ \Carbon\Carbon::parse($app->created_at)->format('d M Y, h:i A') }}</p>
                        </div>
                    </div>
                    @php
                        $statusColors = [
                            'submitted' => 'bg-slate-100 text-slate-700 border border-slate-200',
                            'viewed' => 'bg-blue-50 text-blue-700 border border-blue-100',
                            'approved' => 'bg-emerald-50 text-emerald-700 border border-emerald-100',
                            'rejected' => 'bg-red-50 text-red-700 border border-red-100',
                            'processed' => 'bg-amber-50 text-amber-700 border border-amber-100',
                            'delivered' => 'bg-green-50 text-green-700 border border-green-100',
                        ];
                    @endphp
                    <span class="px-2.5 py-1 rounded-lg text-[10px] font-black uppercase tracking-wide {{ $statusColors[$app->status] ?? 'bg-gray-100 text-gray-600' }}">
                        {{ $app->status }}
                    </span>
                </div>
                
                @if($app->application_type === 'leave')
                    <div class="flex items-center gap-2 text-xs text-gray-600 bg-gray-50 p-2.5 rounded-xl">
                        <i class="fa-regular fa-clock text-gray-400"></i>
                        <span class="font-semibold">{{ $app->leave_from }}</span> to <span class="font-semibold">{{ $app->leave_to }}</span>
                        <span class="text-gray-400">•</span>
                        <span class="capitalize">{{ $app->leave_type }} Leave</span>
                    </div>
                @else
                    <div class="flex items-center gap-2 text-xs text-gray-600 bg-gray-50 p-2.5 rounded-xl">
                        <i class="fa-solid fa-file text-gray-400"></i>
                        <span class="font-semibold capitalize">{{ $app->document_type }} Certificate</span>
                    </div>
                @endif
            </a>
        @empty
            <div class="text-center py-16 bg-white rounded-2xl border border-dashed border-gray-200">
                <div class="w-16 h-16 bg-gray-50 rounded-full flex items-center justify-center mx-auto mb-3">
                    <i class="fa-regular fa-folder-open text-2xl text-gray-400"></i>
                </div>
                <p class="text-gray-500 font-bold">No applications found.</p>
                <p class="text-gray-400 text-xs mt-1">Submit a new request to get started.</p>
            </div>
        @endforelse
    </div>
    
    @if($applications->hasPages())
        <div class="pt-2">{{ $applications->links() }}</div>
    @endif
</div>
@endsection