@extends('school.layouts.app') {{-- Adjust layout name if different --}}

@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">Student Applications</h1>
            <p class="text-sm text-gray-500 mt-1">Monitor all leave and document requests</p>
        </div>
    </div>

    <!-- Filters -->
    <form method="GET" class="bg-white p-4 rounded-2xl shadow-sm border border-gray-100">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-3">
            <div class="md:col-span-2">
                <label class="block text-[10px] font-black text-gray-400 uppercase mb-1.5">Search</label>
                <input type="text" name="search" value="{{ request('search') }}" placeholder="Student name, admission no, or subject..." 
                       class="w-full 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-indigo-500/20 focus:border-indigo-500">
            </div>
            <div>
                <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-indigo-500/20 focus:border-indigo-500">
                    <option value="">All Statuses</option>
                    <option value="submitted" {{ request('status')=='submitted'?'selected':'' }}>Submitted</option>
                    <option value="viewed" {{ request('status')=='viewed'?'selected':'' }}>Viewed</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>
            </div>
            <div>
                <label class="block text-[10px] font-black text-gray-400 uppercase mb-1.5">Type</label>
                <select name="type" 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-indigo-500/20 focus:border-indigo-500">
                    <option value="">All Types</option>
                    <option value="leave" {{ request('type')=='leave'?'selected':'' }}>Leave</option>
                    <option value="document" {{ request('type')=='document'?'selected':'' }}>Document</option>
                </select>
            </div>
            <div class="md:col-span-4 flex items-end mt-1">
                <button type="submit" class="w-full bg-indigo-600 hover:bg-indigo-700 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>

    <!-- Applications List -->
    <div class="space-y-2.5">
        @forelse($applications as $app)
        @php
            $isLeave = $app->application_type === 'leave';
            $statusStyles = [
                'submitted' => 'bg-slate-100 text-slate-700', 'viewed' => 'bg-blue-50 text-blue-700',
                'approved'  => 'bg-emerald-50 text-emerald-700', 'rejected'  => 'bg-red-50 text-red-700',
                'processed' => 'bg-amber-50 text-amber-700', 'delivered' => 'bg-green-50 text-green-700',
            ];
            $statusClass = $statusStyles[$app->status] ?? 'bg-gray-100 text-gray-600';
        @endphp
        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 hover:shadow-md transition-all pl-5 pr-4 py-3.5 relative
                    before:content-[''] before:absolute before:left-0 before:top-3 before:bottom-3 before:w-1 before:rounded-full
                    {{ $isLeave ? 'before:bg-blue-400' : 'before:bg-purple-400' }}">
            
            <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]
                                {{ $isLeave ? 'bg-blue-50 text-blue-600' : 'bg-purple-50 text-purple-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>

            <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
                             {{ $isLeave ? 'bg-blue-50 text-blue-700' : 'bg-purple-50 text-purple-700' }}">
                    <i class="fa-solid {{ $isLeave ? 'fa-calendar-day' : 'fa-file-lines' }} text-[8px]"></i>
                    {{ ucfirst($app->application_type) }}
                </span>
                <p class="text-xs font-bold text-gray-700 truncate min-w-0" title="{{ $app->subject }}">{{ $app->subject }}</p>
            </div>

            <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">
                    <!-- VIEW DETAILS BUTTON (Triggers Modal) -->
                    <button onclick="openApplicationModal({{ $app->id }})" 
                            class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-indigo-50 hover:bg-indigo-100 text-indigo-600 text-[10px] font-black uppercase tracking-wide transition-colors">
                        <i class="fa-solid fa-eye text-[10px]"></i> View Details
                    </button>
                </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

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

<!-- ==========================================
     APPLICATION DETAILS & ATTACHMENT MODAL
=========================================== -->
<div id="appModal" class="fixed inset-0 z-[9999] hidden">
    <!-- Backdrop -->
    <div class="absolute inset-0 bg-slate-900/60 backdrop-blur-sm transition-opacity" onclick="closeApplicationModal()"></div>
    
    <!-- Modal Content (Loaded via AJAX) -->
    <div class="absolute inset-0 flex items-center justify-center p-3 sm:p-4">
        <div id="appModalContent" class="bg-white w-full max-w-2xl rounded-2xl sm:rounded-3xl shadow-2xl transform transition-all relative overflow-hidden max-h-[90vh] flex flex-col">
            <!-- Loader -->
            <div id="modalLoader" class="flex-1 flex items-center justify-center p-10">
                <i class="fa-solid fa-circle-notch fa-spin text-3xl text-indigo-500"></i>
            </div>
            <!-- Actual Content injected here -->
            <div id="modalBody" class="hidden flex-1 overflow-y-auto"></div>
        </div>
    </div>
</div>

<script>
function openApplicationModal(id) {
    const modal = document.getElementById('appModal');
    const loader = document.getElementById('modalLoader');
    const body = document.getElementById('modalBody');
    
    modal.classList.remove('hidden');
    loader.classList.remove('hidden');
    body.classList.add('hidden');
    body.innerHTML = '';

    // Fetch details via AJAX
    fetch(`/school/applications/${id}`, {
        headers: { 'X-Requested-With': 'XMLHttpRequest' }
    })
    .then(response => response.text())
    .then(html => {
        loader.classList.add('hidden');
        body.classList.remove('hidden');
        body.innerHTML = html;
    })
    .catch(err => {
        loader.innerHTML = '<p class="text-red-500 font-bold">Failed to load details.</p>';
    });
}

function closeApplicationModal() {
    document.getElementById('appModal').classList.add('hidden');
}

// Close on Escape key
document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') closeApplicationModal();
});
</script>
@endsection