@extends('layouts.auth')
@section('content')
@include('auth._mbrand')
<h1>Create your learner account</h1>
<p class="muted">One account for classes, exams, badges and the career portal. It takes about a minute.</p>

<form method="post" action="{{ route('register.submit') }}" novalidate class="tr-form">
    @csrf
    <div class="field">
        <label class="label" for="f-name">Full name <span class="req">*</span></label>
        <input class="input {{ $errors->has('name') ? 'is-invalid' : '' }}" type="text" id="f-name" name="name" value="{{ old('name') }}" required minlength="2" maxlength="120" autocomplete="name" autofocus>
        <div class="help">As you want it printed on certificates and badges.</div>
        @error('name')<div class="field-error" role="alert">{{ $message }}</div>@enderror
    </div>
    <div class="form-grid">
        <div class="field">
            <label class="label" for="f-email">Email address <span class="req">*</span></label>
            <input class="input {{ $errors->has('email') ? 'is-invalid' : '' }}" type="email" id="f-email" name="email" value="{{ old('email') }}" required maxlength="190" autocomplete="email" inputmode="email">
            @error('email')<div class="field-error" role="alert">{{ $message }}</div>@enderror
        </div>
        <div class="field">
            <label class="label" for="f-phone">Mobile / WhatsApp</label>
            <input class="input {{ $errors->has('phone') ? 'is-invalid' : '' }}" type="tel" id="f-phone" name="phone" value="{{ old('phone') }}" maxlength="40" autocomplete="tel" inputmode="tel" placeholder="+92 3xx xxxxxxx">
            @error('phone')<div class="field-error" role="alert">{{ $message }}</div>@enderror
        </div>
    </div>
    @include('auth._password', ['name' => 'password', 'label' => 'Password', 'autocomplete' => 'new-password', 'strength' => true])
    @include('auth._password', ['name' => 'password_confirmation', 'id' => 'f-password-confirm', 'label' => 'Confirm password', 'autocomplete' => 'new-password'])
    <div class="field">
        <label class="check"><input type="checkbox" name="terms" value="1" required @checked(old('terms'))> <span>I agree to the <a href="{{ route('terms') }}" target="_blank" rel="noopener">Terms of Use</a> and <a href="{{ route('privacy') }}" target="_blank" rel="noopener">Privacy Policy</a>.</span></label>
        @error('terms')<div class="field-error" role="alert">{{ $message }}</div>@enderror
    </div>
    <div class="field">
        <label class="check"><input type="checkbox" name="whatsapp_opt_in" value="1" @checked(old('whatsapp_opt_in', true))> <span>Send me class reminders, fee alerts and new batch updates on WhatsApp (reply STOP any time).</span></label>
    </div>
    @include('partials.form-guard')
    <button class="btn btn-primary btn-block btn-lg" type="submit">Create account <x-icon name="arrow-right" :size="18"/></button>
    <p class="xs muted center mt-2">We email you a 6-digit code to verify your address. Your details are used only for your training, exams and credentials.</p>
</form>
<p class="center small muted mt-3">Already registered? <a class="bold" href="{{ route('login') }}">Log in</a></p>
@endsection
@push('scripts')<script src="{{ asset_v('assets/js/auth.js') }}" defer nonce="{{ csp_nonce() }}"></script>@endpush