@extends('layouts.school')

@section('title', 'Application Forms')
@section('header', 'Application Forms')

@section('content')
    <div class="mb-6">
        <p class="mb-3 text-sm text-gray-600">Each programme uses a published application form to collect online applications.</p>

        <form method="POST" action="{{ route('school.admission.forms.store', request()->route('schoolId')) }}" class="card max-w-3xl">
            @csrf
            <div class="border-b border-gray-200 px-6 py-4">
                <h3 class="text-lg font-display font-semibold text-gray-900">New Application Form</h3>
            </div>
            <div class="grid gap-4 px-6 py-5 sm:grid-cols-2">
                <div>
                    <label class="label">Programme</label>
                    <select name="programme_id" class="input" required>
                        <option value="">— Select programme —</option>
                        @foreach (\App\Models\AdmissionProgramme::where('school_id', request()->route('schoolId'))->orderBy('name')->get() as $programme)
                            <option value="{{ $programme->id }}" {{ old('programme_id') == $programme->id ? 'selected' : '' }}>{{ $programme->name }}</option>
                        @endforeach
                    </select>
                    @error('programme_id') <p class="mt-1 text-xs text-rose-600">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="label">Form Title</label>
                    <input type="text" name="title" value="{{ old('title') }}" required class="input" placeholder="Application Form — 2026/2027">
                    @error('title') <p class="mt-1 text-xs text-rose-600">{{ $message }}</p> @enderror
                </div>
            </div>
            <div class="flex justify-end gap-2 border-t border-gray-200 bg-gray-50 px-6 py-4">
                <button type="submit" class="rounded-lg bg-primary-600 px-4 py-2 text-sm font-medium text-white hover:bg-primary-700">Create Form</button>
            </div>
        </form>
    </div>

    <div class="card">
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wide text-gray-500">Form</th>
                        <th class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wide text-gray-500">Programme</th>
                        <th class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wide text-gray-500">Fields</th>
                        <th class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wide text-gray-500">Applications</th>
                        <th class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wide text-gray-500">Status</th>
                        <th class="px-6 py-3 text-right text-xs font-semibold uppercase tracking-wide text-gray-500">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100 bg-white">
                    @forelse ($forms as $form)
                        <tr class="hover:bg-gray-50">
                            <td class="px-6 py-3">
                                <a href="{{ route('school.admission.forms.show', [request()->route('schoolId'), $form->id]) }}" class="font-medium text-gray-900 hover:text-primary-600">{{ $form->title }}</a>
                                <p class="text-xs text-gray-500">v{{ $form->version }}</p>
                            </td>
                            <td class="px-6 py-3 text-sm text-gray-600">{{ $form->programme?->name ?? '—' }}</td>
                            <td class="px-6 py-3 text-sm text-gray-600">{{ $form->fields_count }}</td>
                            <td class="px-6 py-3 text-sm text-gray-600">{{ $form->applications_count }}</td>
                            <td class="px-6 py-3">
                                <span class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold {{ match ($form->status) {
                                    'published' => 'bg-green-50 text-green-700',
                                    'archived' => 'bg-gray-100 text-gray-400',
                                    default => 'bg-blue-50 text-blue-700',
                                } }}">{{ $form->status_label }}</span>
                            </td>
                            <td class="px-6 py-3 text-right">
                                <a href="{{ route('school.admission.forms.show', [request()->route('schoolId'), $form->id]) }}"
                                   class="text-sm font-medium text-primary-600 hover:text-primary-700">Builder</a>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="px-6 py-12 text-center text-sm text-gray-500">No forms yet. Create one to start collecting applications.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        <div class="border-t border-gray-200 px-6 py-4">
            {{ $forms->links() }}
        </div>
    </div>
@endsection