{{-- Modal Header --}}
<div class="px-5 py-4 border-b border-slate-100 flex items-center justify-between bg-slate-50 sticky top-0 z-10">
    <div>
        <h3 class="text-sm font-black text-slate-800">Application Details</h3>
        <p class="text-[10px] text-slate-400 font-semibold">Ref #{{ str_pad($application->id, 6, '0', STR_PAD_LEFT) }}</p>
    </div>
    <button onclick="closeApplicationModal()" class="w-8 h-8 rounded-lg bg-white hover:bg-slate-200 text-slate-500 flex items-center justify-center transition-colors shadow-sm">
        <i class="fa-solid fa-xmark text-xs"></i>
    </button>
</div>

{{-- Modal Body --}}
<div class="p-5 space-y-4">
    <!-- Student Info -->
    <div class="flex items-center gap-3 p-3 bg-indigo-50/50 rounded-xl border border-indigo-100">
        <div class="w-10 h-10 rounded-xl bg-indigo-100 text-indigo-600 flex items-center justify-center font-black text-sm">
            {{ strtoupper(substr($application->student_name, 0, 1)) }}
        </div>
        <div class="flex-1 min-w-0">
            <p class="text-sm font-black text-slate-800 truncate">{{ $application->student_name }}</p>
            <p class="text-[10px] text-slate-500 font-bold">{{ $application->admission_no }} &middot; {{ $application->class_name }} - {{ $application->section_name }}</p>
        </div>
        <span class="px-2 py-1 rounded-lg text-[9px] font-black uppercase tracking-wide 
            {{ $application->status === 'approved' ? 'bg-emerald-100 text-emerald-700' : 
               ($application->status === 'rejected' ? 'bg-red-100 text-red-700' : 'bg-slate-200 text-slate-700') }}">
            {{ $application->status }}
        </span>
    </div>

    <!-- Request Details -->
    <div class="grid grid-cols-2 gap-3">
        <div class="p-3 bg-slate-50 rounded-xl border border-slate-100">
            <p class="text-[9px] font-black text-slate-400 uppercase">Type</p>
            <p class="text-xs font-bold text-slate-800 mt-1 capitalize">{{ $application->application_type }}</p>
        </div>
        @if($application->application_type === 'leave')
            <div class="p-3 bg-slate-50 rounded-xl border border-slate-100">
                <p class="text-[9px] font-black text-slate-400 uppercase">Leave Type</p>
                <p class="text-xs font-bold text-slate-800 mt-1 capitalize">{{ $application->leave_type ?? 'N/A' }}</p>
            </div>
        @else
            <div class="p-3 bg-slate-50 rounded-xl border border-slate-100">
                <p class="text-[9px] font-black text-slate-400 uppercase">Document</p>
                <p class="text-xs font-bold text-slate-800 mt-1 capitalize">{{ $application->document_type ?? 'N/A' }}</p>
            </div>
        @endif
    </div>

    <div>
        <p class="text-[9px] font-black text-slate-400 uppercase mb-1.5">Subject</p>
        <p class="text-xs font-bold text-slate-800 bg-slate-50 p-2.5 rounded-lg border border-slate-100">{{ $application->subject }}</p>
    </div>

    <div>
        <p class="text-[9px] font-black text-slate-400 uppercase mb-1.5">Description</p>
        <p class="text-xs text-slate-600 bg-slate-50 p-2.5 rounded-lg border border-slate-100 leading-relaxed whitespace-pre-line">{{ $application->description }}</p>
    </div>

    <!-- Attachment Popup View -->
    @if($application->attachment)
    <div>
        <p class="text-[9px] font-black text-slate-400 uppercase mb-1.5">Attachment</p>
        <div class="rounded-xl border border-slate-200 overflow-hidden bg-slate-900">
            @php
                $ext = pathinfo($application->attachment, PATHINFO_EXTENSION);
                $filePath = asset('storage/' . $application->attachment);
            @endphp

            @if(in_array($ext, ['jpg', 'jpeg', 'png', 'gif']))
                <img src="{{ $filePath }}" alt="Attachment" class="w-full h-auto max-h-[300px] object-contain bg-black">
            @elseif($ext === 'pdf')
                <iframe src="{{ $filePath }}" class="w-full h-[300px] border-0"></iframe>
            @else
                <div class="p-4 text-center text-white">
                    <i class="fa-solid fa-file text-2xl mb-2"></i>
                    <p class="text-xs">Unsupported file type for preview.</p>
                </div>
            @endif
        </div>
        <a href="{{ $filePath }}" target="_blank" class="mt-2 flex items-center justify-center gap-2 w-full py-2 bg-indigo-600 hover:bg-indigo-700 text-white text-[10px] font-black uppercase rounded-lg transition-colors">
            <i class="fa-solid fa-download"></i> Download / Open Full Size
        </a>
    </div>
    @endif

    <!-- Status History -->
    @if($logs->isNotEmpty())
    <div class="pt-3 border-t border-slate-100">
        <p class="text-[9px] font-black text-slate-400 uppercase mb-2">Status History</p>
        <div class="space-y-2 max-h-[150px] overflow-y-auto pr-1 custom-scrollbar">
            @foreach($logs as $log)
                <div class="flex gap-2 items-start">
                    <div class="w-1.5 h-1.5 rounded-full bg-indigo-500 mt-1.5 flex-shrink-0"></div>
                    <div class="flex-1">
                        <p class="text-[10px] font-bold text-slate-700 capitalize">{{ str_replace('_', ' ', $log->to_status) }}</p>
                        <p class="text-[9px] text-slate-400">{{ \Carbon\Carbon::parse($log->created_at)->format('d M Y, h:i A') }}</p>
                        @if(!empty($log->remarks))
                            <p class="text-[9px] text-slate-500 mt-0.5 bg-slate-50 p-1.5 rounded border border-slate-100">{{ $log->remarks }}</p>
                        @endif
                    </div>
                </div>
            @endforeach
        </div>
    </div>
    @endif
</div>