@extends('layouts.auth')
@section('title', 'Register — School Type')

@section('auth-top')
<div class="auth-right-top">
    <span>Already have an account?</span>
    <a href="{{ route('login') }}" class="btn btn-accent btn-sm">Login</a>
    <a href="mailto:hello@feespay.ng" class="btn btn-ghost btn-sm">
        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none"
            stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
            <circle cx="12" cy="12" r="10"/>
            <path d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/>
        </svg>
        Support
    </a>
</div>
@endsection

@section('content')
<a href="{{ url('/') }}" class="auth-back">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"
        stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
        <line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/>
    </svg>
    Back
</a>

<h1>What type of school do you operate?</h1>
<p class="auth-sub">Select the option that best describes your institution.</p>

@if($errors->any())
<div class="alert alert-error">{{ $errors->first() }}</div>
@endif

<form action="{{ route('register.step1.post') }}" method="POST">
    @csrf
    <input type="hidden" name="school_type" id="school_type_val" value="{{ old('school_type') }}">

    <div class="option-card @if(old('school_type') === 'nursery_primary') selected @endif"
         data-group="school_type" data-target="school_type_val" data-value="nursery_primary">
        <div class="option-icon">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
            </svg>
        </div>
        <div>
            <div class="option-label">Nursery / Primary</div>
            <div class="option-sub">Creche, nursery and primary schools</div>
        </div>
        <div class="option-check"></div>
    </div>

    <div class="option-card @if(old('school_type') === 'secondary') selected @endif"
         data-group="school_type" data-target="school_type_val" data-value="secondary">
        <div class="option-icon">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                <path d="M22 10v6M2 10l10-5 10 5-10 5z"/>
                <path d="M6 12v5c3 3 9 3 12 0v-5"/>
            </svg>
        </div>
        <div>
            <div class="option-label">Secondary</div>
            <div class="option-sub">Junior and senior secondary schools</div>
        </div>
        <div class="option-check"></div>
    </div>

    <div class="option-card @if(old('school_type') === 'tertiary') selected @endif"
         data-group="school_type" data-target="school_type_val" data-value="tertiary">
        <div class="option-icon">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                <path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/>
                <polyline points="9 22 9 12 15 12 15 22"/>
            </svg>
        </div>
        <div>
            <div class="option-label">Tertiary</div>
            <div class="option-sub">Universities, polytechnics and colleges</div>
        </div>
        <div class="option-check"></div>
    </div>

    <button type="submit" class="btn btn-accent btn-full mt-24">Continue</button>

    <p class="text-center mt-16" style="font-size:0.82rem; color:var(--text-light)">
        Started but did not complete verification?
        <a href="{{ route('register.resume') }}" class="text-brand font-bold">Click here</a>
    </p>
</form>
@endsection