@extends('layouts.auth')
@section('title', 'Forgot password')
@section('auth_title', 'Forgot your password?')
@section('auth_subtitle', 'Enter your registered email and we\'ll send you a reset link.')

@section('content')

@if(session('status'))
    <div class="auth-alert auth-alert-success" role="status">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M9 12l2 2 4-4"/></svg>
        <span>{{ session('status') }}</span>
    </div>
@endif

<form method="POST" action="{{ route('password.email') }}" class="auth-form" novalidate>
    @csrf

    <div class="auth-group">
        <label for="email" class="auth-label">Email address</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="M4 4h16v16H4z"/><path d="M22 6l-10 7L2 6"/></svg>
            <input type="email" id="email" name="email" value="{{ old('email') }}"
                   class="auth-input @error('email') is-invalid @enderror"
                   placeholder="name@example.com"
                   required autofocus autocomplete="username">
        </div>
        @error('email')
            <div class="auth-error">
                <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>
                {{ $message }}
            </div>
        @enderror
    </div>

    {{-- ── Anti-bot: math captcha + honeypot ──────────────────────────── --}}
    <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">
                <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>
                {{ $message }}
            </div>
        @enderror
    </div>

    <button type="submit" class="auth-submit">
        Send reset link
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 2L11 13"/><path d="M22 2l-7 20-4-9-9-4 20-7z"/></svg>
    </button>

    <p class="auth-footnote">
        <a href="{{ route('login') }}" class="auth-link">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14" style="vertical-align:-2px; margin-right:4px;"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
            Back to sign in
        </a>
    </p>
</form>

@endsection