@extends('layouts.school')

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

@section('content')
    <div class="mb-6 flex flex-wrap items-center justify-between gap-3">
        <div class="flex items-center gap-3">
            <a href="{{ route('school.admission.applications.index', request()->route('schoolId')) }}"
               class="text-sm font-medium text-gray-500 hover:text-gray-700">&larr; Applications</a>
            <span class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold {{ $application->status_color }}">{{ $application->status_label }}</span>
        </div>
        <div class="flex flex-wrap gap-2">
            @if ($application->letter)
                <a href="{{ route('school.admission.applications.letter', [request()->route('schoolId'), $application->id]) }}"
                   class="rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50">View Letter</a>
                <a href="{{ route('school.admission.applications.letter.pdf', [request()->route('schoolId'), $application->id]) }}"
                   class="rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50">Letter PDF</a>
            @endif
        </div>
    </div>

    <div class="grid gap-6 lg:grid-cols-3">
        <div class="space-y-6 lg:col-span-2">
            <div class="card">
                <div class="border-b border-gray-200 px-6 py-4">
                    <h3 class="text-lg font-display font-semibold text-gray-900">Applicant Summary</h3>
                </div>
                <div class="grid gap-4 px-6 py-5 sm:grid-cols-2">
                    @foreach ([
                        'Applicant' => $application->full_name,
                        'Email' => $application->email,
                        'Phone' => $application->phone,
                        'Date of Birth' => $application->date_of_birth?->format('M j, Y'),
                        'Gender' => $application->gender,
                        'Programme' => $application->programme?->name,
                        'Class Applying For' => $application->desiredClass?->name,
                        'Parent / Guardian' => $application->parent_name,
                        'Parent Email' => $application->parent_email,
                        'Parent Phone' => $application->parent_phone,
                        'Previous School' => $application->previous_school,
                        'Submitted At' => $application->submitted_at?->format('M j, Y g:i a'),
                    ] as $label => $value)
                        @if ($value)
                            <div>
                                <p class="text-xs font-semibold uppercase tracking-wide text-gray-400">{{ $label }}</p>
                                <p class="mt-1 text-sm text-gray-900">{{ $value }}</p>
                            </div>
                        @endif
                    @endforeach
                </div>
            </div>

            @php $snapshot = $application->form_snapshot ?: ['sections' => []]; @endphp
            @foreach ($snapshot['sections'] ?? [] as $section)
                <div class="card">
                    <div class="border-b border-gray-200 px-6 py-4">
                        <h3 class="text-base font-display font-semibold text-gray-900">{{ $section['title'] }}</h3>
                    </div>
                    <div class="grid gap-4 px-6 py-5 sm:grid-cols-2">
                        @foreach ($section['fields'] ?? [] as $field)
                            @php
                                $value = $application->data[$field['name']] ?? null;
                                $isFile = ($field['type'] ?? '') === 'file';
                                if ($isFile) {
                                    $document = $application->documents->firstWhere('field_name', $field['name']);
                                    $value = $document ? $document->original_name : null;
                                }
                            @endphp
                            @if ($value !== null && $value !== '')
                                <div>
                                    <p class="text-xs font-semibold uppercase tracking-wide text-gray-400">{{ $field['label'] }}</p>
                                    @if ($isFile && isset($document) && $document)
                                        <p class="mt-1 text-sm text-gray-900">
                                            <a href="{{ route('school.admission.applications.documents.download', [request()->route('schoolId'), $application->id, $document->id]) }}" class="text-primary-600 hover:underline">{{ $value }}</a>
                                        </p>
                                    @else
                                        <p class="mt-1 text-sm text-gray-900">{{ $value }}</p>
                                    @endif
                                </div>
                            @endif
                        @endforeach
                    </div>
                </div>
            @endforeach

            @if ($application->admin_notes || $application->correction_notes || $application->decision_notes)
                <div class="card">
                    <div class="border-b border-gray-200 px-6 py-4">
                        <h3 class="text-lg font-display font-semibold text-gray-900">Staff Notes</h3>
                    </div>
                    <div class="space-y-3 px-6 py-5 text-sm text-gray-700">
                        @if ($application->correction_notes)
                            <p><span class="font-semibold text-amber-700">Correction request:</span> {{ $application->correction_notes }}</p>
                        @endif
                        @if ($application->decision_notes)
                            <p><span class="font-semibold">Decision note:</span> {{ $application->decision_notes }}</p>
                        @endif
                        @if ($application->admin_notes)
                            <p><span class="font-semibold">Notes:</span> {{ $application->admin_notes }}</p>
                        @endif
                    </div>
                </div>
            @endif
        </div>

        <div class="space-y-6">
            @if ($application->is_decisionable)
                <div class="card">
                    <div class="border-b border-gray-200 px-6 py-4">
                        <h3 class="text-base font-display font-semibold text-gray-900">Next Steps</h3>
                    </div>
                    <div class="space-y-3 px-6 py-5">
                        @if (! in_array($application->status, ['under_review'], true))
                            <form method="POST" action="{{ route('school.admission.applications.decision', [request()->route('schoolId'), $application->id]) }}">
                                @csrf
                                <input type="hidden" name="action" value="review">
                                <button type="submit" class="w-full rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50">Mark Under Review</button>
                            </form>
                        @endif

                        <form method="POST" action="{{ route('school.admission.applications.decision', [request()->route('schoolId'), $application->id]) }}" class="space-y-2">
                            @csrf
                            <input type="hidden" name="action" value="approve">
                            <button type="submit" class="w-full rounded-lg bg-green-600 px-4 py-2 text-sm font-semibold text-white hover:bg-green-700">Approve &amp; Create Student</button>
                        </form>

                        <form method="POST" action="{{ route('school.admission.applications.decision', [request()->route('schoolId'), $application->id]) }}">
                            @csrf
                            <input type="hidden" name="action" value="correct">
                            <textarea name="note" rows="2" class="input" placeholder="What needs to be corrected?"></textarea>
                            <button type="submit" class="mt-2 w-full rounded-lg border border-amber-300 bg-amber-50 px-4 py-2 text-sm font-medium text-amber-700 hover:bg-amber-100">Request Correction</button>
                        </form>

                        <form method="POST" action="{{ route('school.admission.applications.decision', [request()->route('schoolId'), $application->id]) }}">
                            @csrf
                            <input type="hidden" name="action" value="reject">
                            <textarea name="note" rows="2" class="input" placeholder="Reason (required)"></textarea>
                            <button type="submit" class="mt-2 w-full rounded-lg border border-rose-200 bg-rose-50 px-4 py-2 text-sm font-medium text-rose-700 hover:bg-rose-100">Reject</button>
                        </form>

                        <form method="POST" action="{{ route('school.admission.applications.decision', [request()->route('schoolId'), $application->id]) }}">
                            @csrf
                            <input type="hidden" name="action" value="withdraw">
                            <button type="submit" class="w-full rounded-lg border border-gray-200 bg-gray-50 px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-100">Withdraw</button>
                        </form>
                    </div>
                </div>
            @endif

            @if ($application->documents->isNotEmpty())
                <div class="card">
                    <div class="border-b border-gray-200 px-6 py-4">
                        <h3 class="text-base font-display font-semibold text-gray-900">Documents ({{ $application->documents->count() }})</h3>
                    </div>
                    <ul class="divide-y divide-gray-100 px-6 py-2 text-sm">
                        @foreach ($application->documents as $document)
                            <li class="flex items-center justify-between gap-2 py-2">
                                <div class="min-w-0">
                                    <p class="truncate font-medium text-gray-800">{{ $document->original_name }}</p>
                                    <p class="text-xs text-gray-400">{{ $document->size_label }} · {{ $document->field_name }}</p>
                                </div>
                                <a href="{{ route('school.admission.applications.documents.download', [request()->route('schoolId'), $application->id, $document->id]) }}"
                                   class="shrink-0 text-xs font-medium text-primary-600 hover:text-primary-700">Download</a>
                            </li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <div class="card">
                <div class="border-b border-gray-200 px-6 py-4">
                    <h3 class="text-base font-display font-semibold text-gray-900">History</h3>
                </div>
                <ol class="space-y-3 px-6 py-5">
                    @forelse ($application->history as $event)
                        <li class="flex gap-3">
                            <span class="mt-1.5 h-2 w-2 shrink-0 rounded-full bg-gray-300"></span>
                            <div>
                                <p class="text-sm text-gray-800">
                                    {{ $event->toStatusLabel }} 
                                    @if ($event->from_status && $event->to_status && $event->from_status !== $event->to_status)
                                        <span class="text-gray-400">(was {{ $event->fromStatusLabel }})</span>
                                    @endif
                                </p>
                                @if ($event->note) <p class="text-xs text-gray-500">{{ $event->note }}</p> @endif
                                <p class="text-[11px] text-gray-400">{{ $event->created_at->format('M j, Y g:i a') }} · {{ $event->actor_label }}</p>
                            </div>
                        </li>
                    @empty
                        <li class="text-sm text-gray-500">No history recorded.</li>
                    @endforelse
                </ol>
            </div>
        </div>
    </div>
@endsection