@extends('layouts.auth')

@section('content')
<section class="auth d-flex flex-wrap border-cleeck">
    <!-- Colonne gauche : image -->
    <div class="auth-left">
        <img src="{{ asset('assets/login-visual.png') }}" alt="Login Visual" class="login-visual-image">
    </div>

    <!-- Colonne droite : formulaire -->
    <div class="auth-right d-flex flex-column justify-content-center">
        <div class="max-w-600-px mx-auto w-100">
            <a href="/" class="mb-48 d-inline-block max-w-290-px">
                <img src="/assets/logo.png" alt="Logo" class="w-100">
            </a>

            <h2 class="mb-12 fw-medium" style="color: var(--gray-dark); font-size: 1.75rem; letter-spacing: -0.02em;">Mot de passe oublié</h2>
            <p class="mb-40 text-secondary-light" style="font-size: 1rem; line-height: 1.5; font-weight: 400;">Saisissez votre adresse e-mail pour recevoir un lien de réinitialisation.</p>

            @if (session('success'))
                <div class="alert alert-success mb-32" style="background: #d4edda; color: #155724; padding: 12px 16px; border-radius: 8px; border: 1px solid #c3e6cb;">
                    {{ session('success') }}
                </div>
            @endif

            <form method="POST" action="{{ route('forgot-password.send') }}" class="mx-auto" novalidate>
                @csrf

                <div class="icon-field">
                    <span class="icon ">
                        <iconify-icon icon="mage:email"></iconify-icon>
                    </span>
                    <input type="email" 
                           class="form-control h-56-px bg-neutral-50 radius-12 @error('email') is-invalid @enderror" 
                           placeholder="Adresse e-mail" 
                           id="email" 
                           name="email" 
                           value="{{ old('email') }}"
                           autocomplete="email"
                           required>
                </div>
                @error('email')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror

                <button type="submit" class="btn btn-primary btn-sm w-100 radius-12" style="margin-top: 16px; background-color: #6fb87d; border-color: #6fb87d;">
                    Envoyer le lien
                </button>

                <div class="mt-32 text-center">
                    <p class="mb-0">
                        <a href="{{ route('connexion') }}" class="text-secondary-light fw-medium" style="font-size: 0.875rem; color: #6fb87d;">
                            ← Retour à la connexion
                        </a>
                    </p>
                </div>
            </form>
        </div>
    </div>
</section>
@endsection