@extends('layouts.auth')

@section('title', 'Create your applicant account')

@section('content')

    <h1 class="font-display text-3xl tracking-tight text-slate-900">Create your account</h1>
    <p class="mt-2 text-sm text-slate-600">
        One account lets you apply, upload documents, pay and track your application.
    </p>

    @if ($errors->any())
        <x-alert type="danger" title="Please check the form" class="mt-6">
            <ul class="mt-1 list-disc space-y-0.5 pl-4">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </x-alert>
    @endif

    <form method="POST" action="{{ route('register') }}" class="mt-8 space-y-5">
        @csrf

        <div class="grid gap-5 sm:grid-cols-2">
            <x-input name="first_name" label="First name" required
                     :value="old('first_name')" autocomplete="given-name" autofocus />
            <x-input name="last_name" label="Last name" required
                     :value="old('last_name')" autocomplete="family-name" />
        </div>

        <x-input name="middle_name" label="Middle name" :value="old('middle_name')"
                 hint="Optional — as it appears on your documents" autocomplete="additional-name" />

        <x-input name="email" type="email" label="Email address" required
                 :value="old('email')" autocomplete="email"
                 hint="We will send your verification link and all updates here." />

        <x-input name="phone" type="tel" label="Phone number" required
                 :value="old('phone')" autocomplete="tel" placeholder="0771 234 567" />

        <x-input name="password" type="password" label="Password" required
                 autocomplete="new-password"
                 hint="At least 8 characters, including a letter and a number." />

        <x-input name="password_confirmation" type="password" label="Confirm password" required
                 autocomplete="new-password" />

        <label class="flex items-start gap-3 text-sm text-slate-600">
            <input type="checkbox" name="terms" value="1" @checked(old('terms'))
                   class="mt-0.5 h-4 w-4 shrink-0 rounded border-slate-300 text-brand-700 focus:ring-brand-700">
            <span>
                I confirm the information I provide will be true and complete, and I accept
                {{ setting('university_name') }}'s terms for applicants.
            </span>
        </label>

        <x-button type="submit" size="lg" class="w-full">Create Account</x-button>
    </form>

    <p class="mt-6 text-center text-sm text-slate-600">
        Already have an account?
        <a href="{{ route('login') }}" class="font-medium text-brand-700 hover:underline">Sign in</a>
    </p>

@endsection
