@extends('layouts.app')

@section('content')
<section class="bg-white">
    <div class="mx-auto max-w-2xl px-4 py-12 sm:px-6 lg:px-8">
        <h1 class="text-3xl font-bold">Create Student Account</h1>
        <p class="mt-3 text-slate-600">Save GPA records, study plans, college matches, and secure academic support messages.</p>
        <form action="{{ route('register.store') }}" method="post" class="mt-6 grid gap-4 rounded-lg border border-slate-200 bg-slate-50 p-5">
            @csrf
            <div class="grid gap-4 sm:grid-cols-2">
                <label class="grid gap-1 text-sm font-medium">Name
                    <input name="name" required class="rounded-lg border border-slate-300 px-3 py-2" value="{{ old('name') }}">
                </label>
                <label class="grid gap-1 text-sm font-medium">Email
                    <input name="email" type="email" required class="rounded-lg border border-slate-300 px-3 py-2" value="{{ old('email') }}">
                </label>
                <label class="grid gap-1 text-sm font-medium">Phone
                    <input name="phone" class="rounded-lg border border-slate-300 px-3 py-2" value="{{ old('phone') }}">
                </label>
                <label class="grid gap-1 text-sm font-medium">Academic Level
                    <input name="academic_level" placeholder="High school, college, nursing" class="rounded-lg border border-slate-300 px-3 py-2" value="{{ old('academic_level') }}">
                </label>
                <label class="grid gap-1 text-sm font-medium">State
                    <input name="state" class="rounded-lg border border-slate-300 px-3 py-2" value="{{ old('state') }}">
                </label>
                <label class="grid gap-1 text-sm font-medium">City
                    <input name="city" class="rounded-lg border border-slate-300 px-3 py-2" value="{{ old('city') }}">
                </label>
                <label class="grid gap-1 text-sm font-medium">Password
                    <input name="password" type="password" required class="rounded-lg border border-slate-300 px-3 py-2">
                </label>
                <label class="grid gap-1 text-sm font-medium">Confirm Password
                    <input name="password_confirmation" type="password" required class="rounded-lg border border-slate-300 px-3 py-2">
                </label>
            </div>
            @if ($errors->any())
                <div class="rounded-lg border border-rose-200 bg-rose-50 p-3 text-sm text-rose-800">{{ $errors->first() }}</div>
            @endif
            <button class="rounded-lg bg-slate-950 px-4 py-3 text-sm font-semibold text-white">Create Account</button>
        </form>
    </div>
</section>
@endsection