@extends('user.layouts.app')

@section('title', 'استعادة كلمة المرور')

@section('content')
    <div class="content-wrapper">
        <div class="page-header">
            <x-lucide-key width="24" height="24" />
            <div class="page-header--title">
                <h1>استعادة كلمة المرور</h1>
            </div>
        </div>

        <div class="container" style="max-width: 480px;">
            <div class="form-container">
                <div class="form-header">
                    <h2>نسيت كلمة المرور؟</h2>
                    <p style="color: var(--color-gray-500); margin: 0;">أدخل بريدك الإلكتروني وسنرسل لك رابط إعادة التعيين
                    </p>
                </div>

                @if ($errors->any())
                    <div class="alert alert-danger"
                        style="background: rgba(220, 53, 69, 0.1); border: 1px solid rgba(220, 53, 69, 0.3); color: #dc3545; padding: 1rem; border-radius: 0.5rem;">
                        <ul style="list-style: none; padding: 0; margin: 0;">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                @if (session('status'))
                    <div class="alert alert-success"
                        style="background: rgba(25, 135, 84, 0.1); border: 1px solid rgba(25, 135, 84, 0.3); color: #198754; padding: 1rem; border-radius: 0.5rem; text-align: center;">
                        {{ session('status') }}
                    </div>
                @endif

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

                    <div class="input-group">
                        <label for="email">البريد الإلكتروني</label>
                        <div class="input-wrapper">
                            <input type="email" id="email" name="email" placeholder="أدخل بريدك الإلكتروني" required
                                autocomplete="email" value="{{ old('email') }}">
                        </div>
                        @error('email')
                            <span class="error-text">{{ $message }}</span>
                        @enderror
                    </div>

                    <button type="submit" class="submit-btn">
                        <x-lucide-mail class="me-2" width="18" height="18" />
                        إرسال رابط الاستعادة
                    </button>
                </form>

                <div style="text-align: center; margin-top: 1rem;">
                    <a href="{{ route('login') }}" style="color: var(--color-primary-500);">
                        <x-lucide-arrow-right class="me-1" width="14" height="14" />
                        العودة إلى تسجيل الدخول
                    </a>
                </div>
            </div>
        </div>
    </div>
@endsection