@extends('components.web.main')

@section('content')
    <div class=" transition-colors duration-500">
        <div class="min-h-screen flex flex-col items-center justify-center p-4">

            <header class="w-full max-w-6xl mx-auto mb-8 text-center">
                <h1
                    class="text-4xl md:text-5xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-teal-500 to-cyan-500 dark:from-teal-400 dark:to-cyan-400">
                    نسيت كلمة المرور؟
                </h1>
            </header>

            <main
                class="w-full max-w-6xl mx-auto bg-white dark:bg-gray-800 rounded-2xl shadow-2xl overflow-hidden grid md:grid-cols-5">

                <div class="md:col-span-3 p-8 md:p-12 order-2 md:order-1">
                    <div class="max-w-md mx-auto">
                        <h2 class="text-3xl font-semibold text-gray-800 dark:text-white mb-2">استعادة كلمة المرور</h2>
                        <p class="text-gray-600 dark:text-gray-400 mb-8">لا تقلق، أدخل بريدك الإلكتروني المسجل لدينا وسنرسل
                            لك رابطًا لإعادة تعيين كلمة مرورك.</p>

                        {{-- في حالة نجاح إرسال الرابط، يمكنك عرض رسالة هنا باستخدام session flash --}}
                        {{-- @if (session('status'))
                            <div class="mb-4 font-medium text-sm text-green-600 dark:text-green-400">
                                {{ session('status') }}
                            </div>
                        @endif --}}

                        <form action="{{ route('resetPassword') }}" method="POST" class="space-y-5">
                            @csrf
                            <div>
                                <label for="email"
                                    class="block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300">البريد
                                    الإلكتروني</label>
                                <input type="email" id="email" name="email"
                                    class="w-full px-4 py-3 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-teal-500 transition"
                                    placeholder="you@example.com" required autofocus>
                            </div>

                            <div class="pt-4">
                                <button type="submit"
                                    class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-lg font-medium text-white bg-gradient-to-r from-teal-600 to-cyan-600 hover:from-teal-700 hover:to-cyan-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500 transform hover:scale-105 transition-transform duration-300">
                                    إرسال رابط الاستعادة
                                </button>
                            </div>
                        </form>

                        <p class="mt-8 text-center text-sm text-gray-600 dark:text-gray-400">
                            تذكرت كلمة المرور؟
                            <a href="{{ route('login') }}"
                                class="font-medium text-teal-500 hover:underline dark:text-teal-400">العودة لتسجيل
                                الدخول</a>
                        </p>
                    </div>
                </div>

                <div
                    class="md:col-span-2 p-8 md:p-12 bg-gradient-to-br from-gray-800 to-gray-900 flex flex-col justify-center md:text-left order-1 md:order-2">
                    <div class="max-w-md mx-auto md:mx-0 text-right">
                        <h2 class="text-4xl font-bold text-white mb-4 leading-tight">
                            استعد الوصول إلى عالمك التعليمي
                        </h2>
                        <p class="text-gray-300 leading-relaxed mb-8">
                            خطوة بسيطة تفصلك عن العودة إلى رحلتك التعليمية. نحن هنا لمساعدتك في كل خطوة على الطريق.
                        </p>
                        <div
                            class="aspect-w-16 aspect-h-9 rounded-xl overflow-hidden shadow-lg transform hover:scale-105 transition-transform duration-300 ease-in-out">
                            <img src="{{ asset('assets/images/bg-1.jpg') }}" alt="Education Platform"
                                class="object-cover w-full h-full">
                        </div>
                    </div>
                </div>

            </main>
        </div>
    </div>
@endsection