@extends('layouts.school')

@section('title', 'Application ' . $application->application_no)
@section('header', 'Application Details')

@section('content')
    <div class="mb-6 flex items-center gap-3">
        <a href="{{ route('school.admissions.index', request()->route('schoolId')) }}" class="text-sm text-gray-500 hover:text-gray-700">&larr; Back to Applications</a>
    </div>

    <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
        {{-- Applicant Details --}}
        <div class="lg:col-span-2 space-y-6">
            <div class="rounded-xl bg-white shadow-sm ring-1 ring-gray-900/5 p-6">
                <div class="flex items-start justify-between">
                    <div>
                        <h2 class="text-lg font-bold text-gray-900">{{ $application->full_name }}</h2>
                        <p class="text-sm text-gray-500">{{ $application->application_no }}</p>
                    </div>
                    @php
                        $colors = [
                            'pending' => 'bg-amber-50 text-amber-700 border-amber-200',
                            'under_review' => 'bg-blue-50 text-blue-700 border-blue-200',
                            'accepted' => 'bg-green-50 text-green-700 border-green-200',
                            'rejected' => 'bg-red-50 text-red-700 border-red-200',
                            'waitlisted' => 'bg-orange-50 text-orange-700 border-orange-200',
                            'converted' => 'bg-purple-50 text-purple-700 border-purple-200',
                        ];
                        $labels = [
                            'pending' => 'Pending',
                            'under_review' => 'Under Review',
                            'accepted' => 'Accepted',
                            'rejected' => 'Rejected',
                            'waitlisted' => 'Waitlisted',
                            'converted' => 'Converted to Student',
                        ];
                    @endphp
                    <span class="inline-flex rounded-full border px-3 py-1 text-xs font-semibold {{ $colors[$application->status] ?? 'bg-gray-50 text-gray-700 border-gray-200' }}">
                        {{ $labels[$application->status] ?? $application->status }}
                    </span>
                </div>

                <div class="mt-6 grid grid-cols-1 gap-4 sm:grid-cols-2">
                    <div>
                        <p class="text-xs font-medium text-gray-500 uppercase">Email</p>
                        <p class="mt-1 text-sm text-gray-900">{{ $application->email }}</p>
                    </div>
                    <div>
                        <p class="text-xs font-medium text-gray-500 uppercase">Phone</p>
                        <p class="mt-1 text-sm text-gray-900">{{ $application->phone ?? '—' }}</p>
                    </div>
                    <div>
                        <p class="text-xs font-medium text-gray-500 uppercase">Date of Birth</p>
                        <p class="mt-1 text-sm text-gray-900">{{ $application->date_of_birth?->format('d M Y') ?? '—' }}</p>
                    </div>
                    <div>
                        <p class="text-xs font-medium text-gray-500 uppercase">Gender</p>
                        <p class="mt-1 text-sm text-gray-900">{{ ucfirst($application->gender ?? '—') }}</p>
                    </div>
                    <div>
                        <p class="text-xs font-medium text-gray-500 uppercase">Class Applied For</p>
                        <p class="mt-1 text-sm text-gray-900">{{ $application->classroom?->name ?? '—' }}</p>
                    </div>
                    <div>
                        <p class="text-xs font-medium text-gray-500 uppercase">Previous School</p>
                        <p class="mt-1 text-sm text-gray-900">{{ $application->previous_school ?? '—' }}</p>
                    </div>
                </div>

                @if($application->address)
                    <div class="mt-4">
                        <p class="text-xs font-medium text-gray-500 uppercase">Address</p>
                        <p class="mt-1 text-sm text-gray-900">{{ $application->address }}</p>
                    </div>
                @endif

                <div class="mt-4">
                    <p class="text-xs font-medium text-gray-500 uppercase">Applied On</p>
                    <p class="mt-1 text-sm text-gray-900">{{ $application->created_at->format('d M Y, h:i A') }}</p>
                </div>
            </div>

            {{-- Parent/Guardian --}}
            @if($application->parent_name || $application->parent_email || $application->parent_phone)
                <div class="rounded-xl bg-white shadow-sm ring-1 ring-gray-900/5 p-6">
                    <h3 class="text-sm font-semibold text-gray-900 uppercase tracking-wide mb-4">Parent / Guardian</h3>
                    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                        <div>
                            <p class="text-xs font-medium text-gray-500 uppercase">Name</p>
                            <p class="mt-1 text-sm text-gray-900">{{ $application->parent_name ?? '—' }}</p>
                        </div>
                        <div>
                            <p class="text-xs font-medium text-gray-500 uppercase">Email</p>
                            <p class="mt-1 text-sm text-gray-900">{{ $application->parent_email ?? '—' }}</p>
                        </div>
                        <div>
                            <p class="text-xs font-medium text-gray-500 uppercase">Phone</p>
                            <p class="mt-1 text-sm text-gray-900">{{ $application->parent_phone ?? '—' }}</p>
                        </div>
                        <div>
                            <p class="text-xs font-medium text-gray-500 uppercase">Occupation</p>
                            <p class="mt-1 text-sm text-gray-900">{{ $application->parent_occupation ?? '—' }}</p>
                        </div>
                    </div>
                </div>
            @endif
        </div>

        {{-- Sidebar: Actions --}}
        <div class="space-y-6">
            <div class="rounded-xl bg-white shadow-sm ring-1 ring-gray-900/5 p-6">
                <h3 class="text-sm font-semibold text-gray-900 uppercase tracking-wide mb-4">Review Application</h3>

                @if(session('success'))
                    <div class="mb-4 rounded-lg bg-green-50 border border-green-200 px-4 py-3 text-sm text-green-800">{{ session('success') }}</div>
                @endif
                @if(session('error'))
                    <div class="mb-4 rounded-lg bg-red-50 border border-red-200 px-4 py-3 text-sm text-red-800">{{ session('error') }}</div>
                @endif

                <form method="POST" action="{{ route('school.admissions.update', [request()->route('schoolId'), $application->id]) }}">
                    @csrf
                    @method('PATCH')
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700">Status</label>
                            <select name="status" class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
                                <option value="pending" {{ $application->status === 'pending' ? 'selected' : '' }}>Pending</option>
                                <option value="under_review" {{ $application->status === 'under_review' ? 'selected' : '' }}>Under Review</option>
                                <option value="accepted" {{ $application->status === 'accepted' ? 'selected' : '' }}>Accepted</option>
                                <option value="waitlisted" {{ $application->status === 'waitlisted' ? 'selected' : '' }}>Waitlisted</option>
                                <option value="rejected" {{ $application->status === 'rejected' ? 'selected' : '' }}>Rejected</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700">Admin Notes</label>
                            <textarea name="admin_notes" rows="3" class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500" placeholder="Add review notes...">{{ old('admin_notes', $application->admin_notes) }}</textarea>
                        </div>
                        <button type="submit" class="w-full rounded-lg bg-primary-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-primary-700">Update Status</button>
                    </div>
                </form>
            </div>

            @if($application->status === 'accepted')
                <div class="rounded-xl bg-green-50 shadow-sm ring-1 ring-green-200 p-6">
                    <h3 class="text-sm font-semibold text-green-900 mb-3">Convert to Student</h3>
                    <p class="text-xs text-green-700 mb-4">This will create a new student record and enroll them in the current academic year.</p>
                    <form method="POST" action="{{ route('school.admissions.convert', [request()->route('schoolId'), $application->id]) }}">
                        @csrf
                        <button type="submit" class="w-full rounded-lg bg-green-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-green-700" onclick="return confirm('Convert this applicant to a student?')">
                            Convert to Student
                        </button>
                    </form>
                </div>
            @endif

            @if(in_array($application->status, ['pending', 'under_review', 'rejected']))
                <div class="rounded-xl bg-white shadow-sm ring-1 ring-gray-900/5 p-6">
                    <form method="POST" action="{{ route('school.admissions.destroy', [request()->route('schoolId'), $application->id]) }}">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="w-full rounded-lg border border-red-300 bg-white px-4 py-2 text-sm font-medium text-red-700 hover:bg-red-50" onclick="return confirm('Delete this application?')">
                            Delete Application
                        </button>
                    </form>
                </div>
            @endif
        </div>
    </div>
@endsection