@extends('layouts.fullscreen-layout')

@section('content')
<div class="mx-auto w-full max-w-3xl px-4 py-10">
    <div class="mb-8">
        <h1 class="text-3xl font-semibold text-gray-900 dark:text-white">Consulta de pré-matrícula</h1>
        <p class="text-sm text-gray-600 dark:text-gray-400">Informe o protocolo e o CPF do aluno para acompanhar a solicitação.</p>
    </div>

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

    <div class="rounded-2xl border border-gray-200 bg-white p-6 shadow-theme-xs dark:border-gray-800 dark:bg-white/[0.03]">
        <form method="get" action="{{ route('pre-matricula.consulta') }}" class="grid gap-4 md:grid-cols-2">
            <div>
                <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Protocolo *</label>
                <input type="text" name="protocol" value="{{ $protocol }}" required class="h-11 w-full rounded-lg border border-gray-300 px-4 text-sm" />
            </div>
            <div>
                <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">CPF do aluno *</label>
                <input type="text" name="cpf" value="{{ $cpf }}" data-mask="cpf" required class="h-11 w-full rounded-lg border border-gray-300 px-4 text-sm" />
            </div>
            <div class="md:col-span-2">
                <button class="rounded-lg bg-brand-500 px-5 py-2 text-sm font-medium text-white">Consultar</button>
            </div>
        </form>
    </div>

    <div class="mt-6">
        @if ($protocol && $cpf && !$record)
            <div class="rounded-lg border border-error-200 bg-error-50 px-4 py-3 text-sm text-error-700">
                Pré-matrícula não encontrada para o protocolo informado.
            </div>
        @endif

        @if ($record)
            <div class="mt-4 rounded-2xl border border-gray-200 bg-white p-6 shadow-theme-xs dark:border-gray-800 dark:bg-white/[0.03]">
                <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Status: {{ ucfirst(str_replace('_', ' ', $record->status)) }}</h2>
                <div class="mt-4 grid gap-3 md:grid-cols-2">
                    <div>
                        <p class="text-xs text-gray-500">Aluno</p>
                        <p class="text-sm font-medium text-gray-900">{{ $record->student_name }}</p>
                    </div>
                    <div>
                        <p class="text-xs text-gray-500">Escola</p>
                        <p class="text-sm font-medium text-gray-900">{{ $record->school?->name ?? '-' }}</p>
                    </div>
                    <div>
                        <p class="text-xs text-gray-500">Turma</p>
                        <p class="text-sm font-medium text-gray-900">{{ $record->classroom?->name ?? '-' }}</p>
                    </div>
                    <div>
                        <p class="text-xs text-gray-500">Data de envio</p>
                        <p class="text-sm font-medium text-gray-900">{{ $record->submitted_at?->format('d/m/Y H:i') }}</p>
                    </div>
                    <div>
                        <p class="text-xs text-gray-500">Responsável</p>
                        <p class="text-sm font-medium text-gray-900">{{ $record->guardian_name }}</p>
                    </div>
                    <div>
                        <p class="text-xs text-gray-500">Contato</p>
                        <p class="text-sm font-medium text-gray-900">{{ $record->guardian_phone }}</p>
                    </div>
                </div>
            </div>
        @endif
    </div>
</div>
@endsection