@extends('layouts.account')

@section('title', 'Create Your School - Review')
@section('content')

<div class="mx-auto max-w-2xl">
    <div class="mb-6">
        <a href="{{ route('account.onboarding.step2') }}" class="text-sm font-medium text-gray-500 hover:text-gray-800">&larr; Back</a>
        <h1 class="mt-2 text-2xl font-display font-bold text-gray-900">Review &amp; Create</h1>
        <p class="mt-1 text-sm text-gray-500">Step 3 of 3 — Confirm the details below, then create your school.</p>
    </div>

    {{-- Progress --}}
    <div class="mb-6 flex items-center gap-2">
        @foreach([1 => 'School Info', 2 => 'Subdomain', 3 => 'Review'] as $num => $label)
            <div class="flex items-center gap-2">
                <span class="flex h-7 w-7 items-center justify-center rounded-full text-xs font-bold
                    {{ $num === 3 ? 'bg-primary-600 text-white' : 'bg-emerald-600 text-white' }}">
                    {{ $num < 3 ? '✓' : $num }}
                </span>
                <span class="hidden text-sm font-medium {{ $num === 3 ? 'text-gray-900' : 'text-gray-500 sm:block' }}">{{ $label }}</span>
                @if(!$loop->last)
                    <span class="h-px w-6 bg-gray-200"></span>
                @endif
            </div>
        @endforeach
    </div>

    <div class="rounded-2xl border border-gray-200 bg-white p-8 shadow-sm">
        <dl class="space-y-4">
            <div class="grid gap-1 sm:grid-cols-3">
                <dt class="text-sm font-medium text-gray-500">School name</dt>
                <dd class="text-sm text-gray-900 sm:col-span-2">{{ $draft['name'] }}</dd>
            </div>
            <div class="grid gap-1 sm:grid-cols-3">
                <dt class="text-sm font-medium text-gray-500">School email</dt>
                <dd class="text-sm text-gray-900 sm:col-span-2">{{ $draft['email'] }}</dd>
            </div>
            <div class="grid gap-1 sm:grid-cols-3">
                <dt class="text-sm font-medium text-gray-500">Phone</dt>
                <dd class="text-sm text-gray-900 sm:col-span-2">{{ $draft['phone'] ?? '—' }}</dd>
            </div>
            <div class="grid gap-1 sm:grid-cols-3">
                <dt class="text-sm font-medium text-gray-500">Country</dt>
                <dd class="text-sm text-gray-900 sm:col-span-2">{{ $draft['country'] ?? 'Nigeria' }}</dd>
            </div>
            @if(!empty($draft['address']) || !empty($draft['city']) || !empty($draft['state']))
            <div class="grid gap-1 sm:grid-cols-3">
                <dt class="text-sm font-medium text-gray-500">Address</dt>
                <dd class="text-sm text-gray-900 sm:col-span-2">
                    {{ implode(', ', array_filter([$draft['address'] ?? null, $draft['city'] ?? null, $draft['state'] ?? null])) }}
                </dd>
            </div>
            @endif

            <div class="grid gap-1 sm:grid-cols-3 border-t border-gray-100 pt-4">
                <dt class="text-sm font-medium text-gray-500">Subdomain</dt>
                <dd class="text-sm font-semibold text-gray-900 sm:col-span-2">{{ $subdomain }}</dd>
            </div>

            <div class="grid gap-1 sm:grid-cols-3 border-t border-gray-100 pt-4">
                <dt class="text-sm font-medium text-gray-500">School admin</dt>
                <dd class="text-sm text-gray-900 sm:col-span-2">
                    {{ $draft['admin_name'] }} &lt;{{ $draft['admin_email'] }}&gt;
                </dd>
            </div>
        </dl>

        <div class="mt-8 rounded-xl bg-primary-50 px-4 py-3 text-sm text-primary-800">
            Your school is created with a <strong>free 14-day trial</strong>. You'll be taken to the school admin login where you can sign in with the admin credentials above.
        </div>

        <div class="mt-6 flex items-center justify-between pt-2">
            <a href="{{ route('account.onboarding.step2') }}" class="text-sm font-medium text-gray-500 hover:text-gray-800">Back</a>
            <form method="POST" action="{{ route('account.schools.store') }}">
                @csrf
                <button type="submit"
                        class="rounded-lg bg-primary-600 px-8 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 transition-colors">
                    Create My School
                </button>
            </form>
        </div>
    </div>
</div>

@endsection