@extends('layouts.auth')
@section('title', 'Create account')
@section('auth_title', 'Create your candidate account')
@section('auth_subtitle', 'Register to apply for ' . ($appSettings->app_name ?? config('app.name', 'department')) . ' positions.')

@section('content')

@php
    $svgUser = '<svg class="bi-lead" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>';
    $svgMail = '<svg class="bi-lead" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M4 4h16v16H4z"/><path d="M22 6l-10 7L2 6"/></svg>';
    $svgLock = '<svg class="bi-lead" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0110 0v4"/></svg>';
    $svgErr  = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 8v4M12 16h.01"/></svg>';
@endphp

<form method="POST" action="{{ route('register') }}" autocomplete="off" class="auth-form" novalidate>
    @csrf

    <div class="auth-group">
        <label for="name" class="auth-label">Full name</label>
        <div class="auth-input-wrap">
            {!! $svgUser !!}
            <input type="text" id="name" name="name" value="{{ old('name') }}"
                   class="auth-input @error('name') is-invalid @enderror"
                   placeholder="e.g. Muhammad Ali Khan (as on CNIC)"
                   required autofocus>
        </div>
        <div class="auth-hint">Letters, spaces, hyphens, and periods only. Do not enter your CNIC number here.</div>
        @error('name')<div class="auth-error">{!! $svgErr !!}{{ $message }}</div>@enderror
    </div>

    <div class="auth-group">
        <label for="email" class="auth-label">Email address</label>
        <div class="auth-input-wrap">
            {!! $svgMail !!}
            <input type="email" id="email" name="email" value="{{ old('email') }}"
                   class="auth-input @error('email') is-invalid @enderror"
                   placeholder="name@example.com"
                   required autocomplete="username">
        </div>
        @error('email')<div class="auth-error">{!! $svgErr !!}{{ $message }}</div>@enderror
    </div>

    <div class="auth-group">
        <label for="password" class="auth-label">Password</label>
        <div class="auth-input-wrap">
            {!! $svgLock !!}
            <input type="password" id="password" name="password"
                   class="auth-input has-trailing @error('password') is-invalid @enderror"
                   placeholder="At least 8 characters"
                   required autocomplete="new-password">
            <button type="button" class="auth-trailing-btn" id="togglePassword" tabindex="-1" aria-label="Toggle password visibility">
                <svg id="toggleIconOn" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
                <svg id="toggleIconOff" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16" style="display:none;"><path d="M17.94 17.94A10.94 10.94 0 0112 20c-7 0-11-8-11-8a21.77 21.77 0 015.06-5.94M9.9 4.24A10.94 10.94 0 0112 4c7 0 11 8 11 8a21.77 21.77 0 01-3.17 4.25M1 1l22 22"/></svg>
            </button>
        </div>
        <div class="auth-hint">Use 8+ characters with a mix of letters and numbers.</div>
        @error('password')<div class="auth-error">{!! $svgErr !!}{{ $message }}</div>@enderror
    </div>

    <div class="auth-group">
        <label for="password_confirmation" class="auth-label">Confirm password</label>
        <div class="auth-input-wrap">
            {!! $svgLock !!}
            <input type="password" id="password_confirmation" name="password_confirmation"
                   class="auth-input has-trailing"
                   placeholder="Re-enter your password"
                   required autocomplete="new-password">
            <button type="button" class="auth-trailing-btn" id="toggleConfirm" tabindex="-1" aria-label="Toggle password visibility">
                <svg id="toggleConfirmOn" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
                <svg id="toggleConfirmOff" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16" style="display:none;"><path d="M17.94 17.94A10.94 10.94 0 0112 20c-7 0-11-8-11-8a21.77 21.77 0 015.06-5.94M9.9 4.24A10.94 10.94 0 0112 4c7 0 11 8 11 8a21.77 21.77 0 01-3.17 4.25M1 1l22 22"/></svg>
            </button>
        </div>
    </div>

    {{-- ── Anti-bot: math captcha + honeypot ────────────────────────────────
         The honeypot is hidden via inline CSS (off-screen + tab-skip) so
         humans never see or focus it; bots that auto-fill every input WILL
         set it. The math question is server-rendered with a session-stored
         answer. Both are verified by CandidateRegisterRequest::withValidator. --}}
    <div aria-hidden="true" style="position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;">
        <label for="website_url">Leave this blank</label>
        <input type="text" id="website_url" name="{{ \App\Support\SimpleCaptcha::HONEYPOT_NAME }}" tabindex="-1" autocomplete="off">
    </div>

    <div class="auth-group">
        <label for="captcha" class="auth-label">Verification: <strong>{{ $captchaQuestion }}</strong></label>
        <div class="auth-input-wrap">
            <svg class="bi-lead" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
            <input type="text" id="captcha" name="{{ \App\Support\SimpleCaptcha::FIELD_NAME }}"
                   class="auth-input @error(\App\Support\SimpleCaptcha::FIELD_NAME) is-invalid @enderror"
                   inputmode="numeric" pattern="\d+" maxlength="3"
                   placeholder="Type the answer"
                   autocomplete="off" required>
        </div>
        @error(\App\Support\SimpleCaptcha::FIELD_NAME)
            <div class="auth-error">{!! $svgErr !!}{{ $message }}</div>
        @enderror
    </div>

    <label class="auth-check">
        <input type="checkbox" id="agreeTerms" required>
        <span>I certify that all information provided is accurate and complete.</span>
    </label>

    <button type="submit" class="auth-submit">
        Create account
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
    </button>

    <div class="auth-divider">or</div>

    <p class="auth-footnote">
        Already registered? <a href="{{ route('login') }}">Sign in</a>
    </p>
</form>

@endsection

@push('scripts')
<script>
function toggleVis(inputId, onId, offId) {
    var pw = document.getElementById(inputId);
    var on = document.getElementById(onId);
    var off = document.getElementById(offId);
    if (pw.type === 'password') { pw.type = 'text'; on.style.display = 'none'; off.style.display = 'block'; }
    else { pw.type = 'password'; on.style.display = 'block'; off.style.display = 'none'; }
}
document.getElementById('togglePassword').addEventListener('click', function () { toggleVis('password', 'toggleIconOn', 'toggleIconOff'); });
document.getElementById('toggleConfirm').addEventListener('click', function () { toggleVis('password_confirmation', 'toggleConfirmOn', 'toggleConfirmOff'); });
</script>
@endpush