@extends('staff.layouts.app')

@section('content')
<div class="p-4 md:p-6 space-y-5 max-w-7xl mx-auto">
    <!-- Header -->
    <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
        <div>
            <h1 class="text-2xl font-extrabold text-gray-800 tracking-tight">Applications & Requests</h1>
            <p class="text-sm text-gray-500 mt-1">Manage student leave and document requests</p>
        </div>
    </div>

    @if($isAdmin)
 <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
     <a href="{{ route('staff.applications.index', ['slug' => session('staff_school_slug'), 'status' => 'pending']) }}" class="group block p-4 bg-gradient-to-br from-red-50 to-white border border-red-100 rounded-2xl shadow-sm hover:shadow-md active:scale-[0.98] transition-all">
         <div class="flex items-center justify-between">
             <div>
                 <p class="text-[9px] font-black text-red-600 uppercase tracking-wider">Pending</p>
                 <p class="text-xl font-black text-red-700 mt-1">{{ $stats['pending'] ?? 0 }}</p>
             </div>
             <div class="w-5 h-5 bg-red-100 rounded-xl flex items-center justify-center text-red-600">
                 <i class="fa-solid fa-clock text-lg"></i>
             </div>
         </div>
     </a>
     <a href="{{ route('staff.applications.index', ['slug' => session('staff_school_slug'), 'status' => 'active']) }}" class="group block p-4 bg-gradient-to-br from-amber-50 to-white border border-amber-100 rounded-2xl shadow-sm hover:shadow-md active:scale-[0.98] transition-all">
         <div class="flex items-center justify-between">
             <div>
                 <p class="text-[9px] font-black text-amber-600 uppercase tracking-wider">Approved</p>
                 <p class="text-xl font-black text-amber-700 mt-1">{{ $stats['processed'] ?? 0 }}</p>
             </div>
             <div class="w-5 h-5 bg-amber-100 rounded-xl flex items-center justify-center text-amber-600">
                 <i class="fa-solid fa-gear text-lg"></i>
             </div>
         </div>
     </a>
     <a href="{{ route('staff.applications.index', ['slug' => session('staff_school_slug'), 'status' => 'delivered']) }}" class="group block p-4 bg-gradient-to-br from-emerald-50 to-white border border-emerald-100 rounded-2xl shadow-sm hover:shadow-md active:scale-[0.98] transition-all">
         <div class="flex items-center justify-between">
             <div>
                 <p class="text-[9px] font-black text-emerald-600 uppercase tracking-wider">Delivered</p>
                 <p class="text-xl font-black text-emerald-700 mt-1">{{ $stats['delivered'] ?? 0 }}</p>
             </div>
             <div class="w-5 h-5 bg-emerald-100 rounded-xl flex items-center justify-center text-emerald-600">
                 <i class="fa-solid fa-check-circle text-lg"></i>
             </div>
         </div>
     </a>
 </div>
 @endif

    <!-- Filters -->
    <form method="GET" class="bg-white p-4 rounded-2xl shadow-sm border border-gray-100">
        <input type="hidden" name="slug" value="{{ session('staff_school_slug') }}">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div class="relative">
                <label class="block text-[10px] font-black text-gray-400 uppercase mb-1.5">Status</label>
                <select name="status" class="w-full appearance-none px-3 py-2.5 rounded-xl border border-gray-200 bg-gray-50 text-xs font-bold text-gray-700 outline-none focus:ring-2 focus:ring-emerald-500/20 focus:border-emerald-500">
                    <option value="">All Statuses</option>
                    <option value="submitted" {{ request('status')=='submitted'?'selected':'' }}>Submitted</option>
                    <option value="approved" {{ request('status')=='approved'?'selected':'' }}>Approved</option>
                    <option value="rejected" {{ request('status')=='rejected'?'selected':'' }}>Rejected</option>
                    <option value="processed" {{ request('status')=='processed'?'selected':'' }}>Processed</option>
                    <option value="delivered" {{ request('status')=='delivered'?'selected':'' }}>Delivered</option>
                </select>
                <i class="fa-solid fa-chevron-down absolute right-3 top-[34px] text-gray-400 text-[10px] pointer-events-none"></i>
            </div>
            <div class="relative">
                <label class="block text-[10px] font-black text-gray-400 uppercase mb-1.5">Class</label>
                <select name="class_id" id="classFilter" onchange="loadSections()" class="w-full appearance-none px-3 py-2.5 rounded-xl border border-gray-200 bg-gray-50 text-xs font-bold text-gray-700 outline-none focus:ring-2 focus:ring-emerald-500/20 focus:border-emerald-500">
                    <option value="">All Classes</option>
                    @foreach($classes as $class)
                        <option value="{{ $class->id }}" {{ request('class_id')==$class->id?'selected':'' }}>{{ $class->name }}</option>
                    @endforeach
                </select>
                <i class="fa-solid fa-chevron-down absolute right-3 top-[34px] text-gray-400 text-[10px] pointer-events-none"></i>
            </div>
            <div class="relative">
                <label class="block text-[10px] font-black text-gray-400 uppercase mb-1.5">Section</label>
                <select name="section_id" id="sectionFilter" class="w-full appearance-none px-3 py-2.5 rounded-xl border border-gray-200 bg-gray-50 text-xs font-bold text-gray-700 outline-none focus:ring-2 focus:ring-emerald-500/20 focus:border-emerald-500 disabled:opacity-50">
                    <option value="">All Sections</option>
                </select>
                <i class="fa-solid fa-chevron-down absolute right-3 top-[34px] text-gray-400 text-[10px] pointer-events-none"></i>
            </div>
            <div class="col-span-1 md:col-span-3 flex items-end mt-1">
                <button type="submit" class="w-full bg-gray-900 hover:bg-black text-white font-bold py-2.5 rounded-xl shadow-lg active:scale-[0.98] transition-all flex items-center justify-center gap-2 text-xs uppercase">
                    <i class="fa-solid fa-filter"></i> Apply Filters
                </button>
            </div>
        </div>
    </form>

    <!-- Records: premium compact card list. This portal renders as a fixed-width
         phone-shell (~420px) even on desktop browsers, so this layout deliberately
         does NOT use lg:/md: breakpoints - one design serves every screen. -->
    <div class="space-y-2.5">

        @forelse($applications as $app)
             @php
         $statusStyles = [
             'submitted' => 'bg-slate-100 text-slate-700',
             'approved'  => 'bg-emerald-50 text-emerald-700',
             'rejected'  => 'bg-red-50 text-red-700',
         ];
         $statusClass = $statusStyles[$app->status] ?? 'bg-gray-100 text-gray-600';

         // LEAVE ONLY: Notification for submitted (RED) and viewed (BLACK)
         $showNotification = false;
         $notificationColor = '';
         if ($app->status === 'submitted') {
             $showNotification = true;
             $notificationColor = 'bg-red-500';
         } elseif ($app->status === 'viewed') {
             $showNotification = true;
             $notificationColor = 'bg-gray-800';
         }
     @endphp
     <div class="relative bg-white rounded-2xl shadow-sm border border-gray-100 hover:shadow-md hover:border-gray-200 transition-all pl-5 pr-4 py-3.5
                 before:content-[''] before:absolute before:left-0 before:top-3 before:bottom-3 before:w-1 before:rounded-full before:bg-blue-400
                 {{ $showNotification ? 'ring-2 ring-offset-2 ' . ($notificationColor === 'bg-red-500' ? 'ring-red-200' : 'ring-gray-200') : '' }}">
         @if($showNotification)
         <span class="absolute -top-2 -right-2 flex h-6 w-6">
             <span class="animate-ping absolute inline-flex h-full w-full rounded-full {{ $notificationColor }} opacity-75"></span>
             <span class="relative inline-flex rounded-full h-6 w-6 {{ $notificationColor }} items-center justify-center shadow-lg">
                 <i class="fa-solid fa-bell text-[10px] text-white"></i>
             </span>
         </span>
         @endif
         <!-- Top: avatar + name + adm no, status pill pinned right -->
         <div class="flex items-start justify-between gap-2">
             <div class="flex items-center gap-2.5 min-w-0">
                 <div class="flex w-8 h-8 shrink-0 rounded-lg items-center justify-center font-black text-[11px] bg-blue-50 text-blue-600">
                     {{ strtoupper(substr($app->student_name, 0, 1)) }}
                 </div>
                 <div class="min-w-0">
                     <p class="font-black text-gray-900 text-sm leading-tight truncate">{{ $app->student_name }}</p>
                     <p class="text-[10px] font-bold text-gray-400 mt-0.5 truncate">{{ $app->admission_no }} &middot; {{ $app->class_name }}-{{ $app->section_name }}</p>
                 </div>
             </div>
             <span class="shrink-0 px-2 py-1 rounded-lg text-[9px] font-black uppercase tracking-wide {{ $statusClass }}">
                 {{ $app->status }}
             </span>
         </div>
         <!-- Middle: type badge + subject -->
         <div class="flex items-center gap-2 mt-2.5 pl-[42px]">
             <span class="shrink-0 inline-flex items-center gap-1 px-2 py-1 rounded-lg text-[9px] font-black uppercase tracking-wide bg-blue-50 text-blue-700">
                 <i class="fa-solid fa-calendar-day text-[8px]"></i>
                 Leave
             </span>
             <p class="text-xs font-bold text-gray-700 truncate min-w-0" title="{{ $app->subject }}">{{ $app->subject }}</p>
         </div>
         <!-- Bottom: date + actions -->
         <div class="flex items-center justify-between mt-3 pl-[42px] pt-2.5 border-t border-gray-50">
             <p class="text-[10px] font-bold text-gray-400">{{ \Carbon\Carbon::parse($app->created_at)->format('d M Y, h:i A') }}</p>
             <div class="flex items-center gap-1.5">
                 <a href="{{ route('staff.applications.show', ['slug' => session('staff_school_slug'), 'id' => $app->id]) }}"
                    class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-gray-900 hover:bg-black text-white text-[10px] font-black uppercase tracking-wide transition-colors">
                     <i class="fa-solid fa-eye text-[10px]"></i> View
                 </a>
             </div>
         </div>
     </div>
        @empty
        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 px-5 py-14 text-center">
            <i class="fa-regular fa-folder-open text-3xl text-gray-300"></i>
            <p class="mt-3 text-gray-500 font-bold text-sm">No applications found.</p>
        </div>
        @endforelse

        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-4">
            {{ $applications->links() }}
        </div>
    </div>
</div>

@push('scripts')
<script>
const allSections = @json($sections ?? []);
function loadSections() {
    const classId = document.getElementById('classFilter').value;
    const sectionSelect = document.getElementById('sectionFilter');
    const currentSection = '{{ request('section_id') }}';
    sectionSelect.innerHTML = '<option value="">All Sections</option>';
    if (!classId) { sectionSelect.disabled = true; return; }
    const filtered = allSections.filter(s => s.class_id == classId);
    if (filtered.length === 0) {
        sectionSelect.disabled = true;
    } else {
        sectionSelect.disabled = false;
        filtered.forEach(sec => {
            const opt = document.createElement('option');
            opt.value = sec.id;
            opt.textContent = sec.name;
            if (currentSection == sec.id) opt.selected = true;
            sectionSelect.appendChild(opt);
        });
    }
}
document.addEventListener('DOMContentLoaded', loadSections);
</script>
@endpush
@endsection