@extends('student.layouts.app')
@section('content')
<div class="flex flex-col h-[calc(100dvh-120px)] bg-gray-50">
    <!-- Header -->
    <div class="bg-white border-b border-gray-100 px-4 py-2 flex items-center gap-3 flex-shrink-0">
        <a href="{{ route('student.applications.index', ['slug' => session('student_school_slug')]) }}" class="w-8 h-8 rounded-lg bg-gray-100 flex items-center justify-center text-gray-600 active:scale-95">
            <i class="fa-solid fa-arrow-left text-xs"></i>
        </a>
        <div class="flex-1">
            <h1 class="text-sm font-extrabold text-gray-800">Application Details</h1>
            <p class="text-[10px] text-gray-500">Track your request status</p>
        </div>
        @if($application->status === 'submitted')
        <form action="{{ route('student.applications.destroy', ['slug' => session('student_school_slug'), 'id' => $application->id]) }}" method="POST" onsubmit="return confirm('Are you sure you want to delete this application?');">
            @csrf
            @method('DELETE')
            <button type="submit" class="w-8 h-8 rounded-lg bg-red-50 text-red-600 flex items-center justify-center active:scale-95">
                <i class="fa-solid fa-trash text-xs"></i>
            </button>
        </form>
        @endif
    </div>

    <!-- Scrollable Content -->
    <div class="flex-1 overflow-y-auto px-3 py-3 space-y-3">
        <!-- Main Info Card -->
        <div class="bg-white rounded-2xl p-4 shadow-sm border border-gray-100">
            <div class="flex justify-between items-start mb-3">
                <div class="flex items-center gap-3">
                    <div class="w-10 h-10 rounded-xl {{ $application->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 {{ $application->application_type === 'leave' ? 'fa-calendar' : 'fa-file-lines' }}"></i>
                    </div>
                    <div>
                        <h3 class="font-bold text-gray-800 text-sm">{{ ucfirst($application->subject) }}</h3>
                        <p class="text-[11px] text-gray-500 font-medium">{{ \Carbon\Carbon::parse($application->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[$application->status] ?? 'bg-gray-100 text-gray-600' }}">
                    {{ $application->status }}
                </span>
            </div>

            @if($application->application_type === 'leave')
                <div class="flex items-center gap-2 text-xs text-gray-600 bg-blue-50/50 p-2.5 rounded-xl mb-3">
                    <i class="fa-regular fa-clock text-blue-400"></i>
                    <span class="font-semibold">{{ \Carbon\Carbon::parse($application->leave_from)->format('d M') }}</span> 
                    <span class="text-gray-400">to</span> 
                    <span class="font-semibold">{{ \Carbon\Carbon::parse($application->leave_to)->format('d M Y') }}</span>
                    <span class="text-gray-400">•</span>
                    <span class="capitalize font-bold text-blue-700">{{ $application->leave_type }} Leave</span>
                </div>
            @elseif($application->application_type === 'document')
                <div class="flex items-center gap-2 text-xs text-gray-600 bg-purple-50/50 p-2.5 rounded-xl mb-3">
                    <i class="fa-solid fa-file text-purple-400"></i>
                    <span class="font-semibold capitalize text-purple-700">{{ $application->document_type }} Certificate</span>
                </div>
            @endif

            <div class="space-y-2">
                <div>
                    <p class="text-[10px] font-black text-gray-400 uppercase tracking-wider mb-1">Reason / Description</p>
                    <p class="text-xs text-gray-700 bg-gray-50 p-3 rounded-xl leading-relaxed">{{ $application->description }}</p>
                </div>

                @if($application->attachment)
                <div>
                    <p class="text-[10px] font-black text-gray-400 uppercase tracking-wider mb-1">Attachment</p>
                    <a href="{{ asset('storage/' . $application->attachment) }}" target="_blank" class="flex items-center gap-2 p-2.5 bg-emerald-50 border border-emerald-100 rounded-xl text-emerald-700 active:scale-95 transition-all">
                        <i class="fa-solid fa-paperclip"></i>
                        <span class="text-xs font-bold">View Attachment</span>
                        <i class="fa-solid fa-arrow-up-right-from-square text-[10px] ml-auto"></i>
                    </a>
                </div>
                @endif
            </div>
        </div>

        <!-- Status Timeline -->
        <div class="bg-white rounded-2xl p-4 shadow-sm border border-gray-100">
            <h4 class="text-[10px] font-black text-gray-400 uppercase tracking-wider mb-3">Status History</h4>
            <div class="space-y-3">
                @forelse($logs as $log)
                    <div class="flex gap-3">
                        <div class="flex flex-col items-center">
                            <div class="w-2.5 h-2.5 rounded-full bg-emerald-500 ring-4 ring-emerald-50"></div>
                            @if(!$loop->last)
                                <div class="w-0.5 flex-1 bg-gray-200 my-1"></div>
                            @endif
                        </div>
                        <div class="pb-3">
                            <p class="text-xs font-bold text-gray-800 capitalize">{{ str_replace('_', ' ', $log->to_status ?? $log->status ?? 'Updated') }}</p>
                            <p class="text-[10px] text-gray-500">{{ \Carbon\Carbon::parse($log->created_at)->format('d M Y, h:i A') }}</p>
                        </div>
                    </div>
                @empty
                    <p class="text-xs text-gray-500 text-center py-2">No status updates yet.</p>
                @endforelse
            </div>
        </div>
    </div>
</div>
@endsection