@extends('backoffice.authentification.layouts_auth.app_auth')
@section('content')

<div class="min-vh-100 d-flex align-items-center py-5" dir="rtl" style="background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);">
    <div class="container">
        <div class="row g-0 bg-white shadow-lg rounded-4 overflow-hidden" style="max-width: 950px; margin: 0 auto;">
            <!-- Colonne de gauche avec l'image -->
            <div class="col-lg-6 d-none d-lg-block position-relative">
                <div class="h-100" style="background: linear-gradient(rgb(109 130 222 / 15%), rgb(109 130 222 / 15%)), url('{{ asset('assets/img/hero/images.jpg') }}'); background-size: cover; background-position: center; min-height: 550px;">
                </div>
            </div>

            <!-- Colonne de droite avec le formulaire -->
            <div class="col-lg-6">
                <div class="p-3 p-md-4">
                    <!-- Bouton retour -->
               

                    <div class="text-center mb-3">
                        <div class="d-inline-flex align-items-center justify-content-center rounded-circle mb-3" 
                             style="width: 60px; height: 60px; background: #e42125;">
                            <i class="bi bi-key-fill text-white" style="font-size: 1.8rem;"></i>
                        </div>
                        <h2 class="h4 mb-2 fw-bold">استرجاع كلمة المرور</h2>
                        <p class="text-muted small mb-0">أدخل بريدك الإلكتروني لإرسال رابط إعادة التعيين</p>
                    </div>

                    @if(session('status'))
                        <div class="alert alert-success rounded-3 border-0 shadow-sm py-2 mb-3">
                            <i class="bi bi-check-circle-fill me-2"></i>
                            {{ session('status') }}
                        </div>
                    @endif

                    

                    

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

                        <div class="mb-3">
                            <label class="form-label fw-semibold small">البريد الإلكتروني</label>
                            <div class="position-relative">
                                <span class="position-absolute top-50 end-0 translate-middle-y pe-3 text-muted">
                                    <i class="bi bi-envelope"></i>
                                </span>
                                <input type="email" name="email" class="form-control rounded-3 shadow-sm" 
                                    style="direction: rtl; padding: 0.6rem 2.5rem 0.6rem 0.75rem;" 
                                    placeholder="أدخل البريد الإلكتروني" 
                                    value="{{ old('email') }}"  autofocus>
                            </div>
							@error('email')
								<span class="text-danger small mt-1 d-block">{{ $message }}</span>
							@enderror
                        </div>

                        <div class="mb-3">
                            <div class="g-recaptcha" data-sitekey="{{ env('RECAPTCHA_SITE_KEY') }}"></div>
                            <span id="recaptcha-error" class="invalid-feedback d-block text-end" style="display: none !important;">
                                <i class="bi bi-exclamation-triangle me-1"></i>
                                يرجى تأكيد أنك لست روبوتًا
                            </span>
                        </div>

                        <button type="submit" class="btn it-btn-orange w-100 rounded-3 py-2 mb-3">
                            <i class="bi bi-send me-2"></i>
                            إرسال رابط إعادة التعيين
                        </button>
                    </form>

                    <div class="text-center mt-3">
                        <p class="text-muted small mb-0">
                            تذكرت كلمة المرور؟ 
                            <a href="{{ route('login') }}" class="text-danger text-decoration-none fw-semibold">
                                تسجيل الدخول
                            </a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    function validateRecaptcha() {
        const response = grecaptcha.getResponse();
        const errorMessageElement = document.getElementById('recaptcha-error');

        errorMessageElement.style.display = 'none';

        if (!response) {
            errorMessageElement.style.display = 'block';
            return false;
        }
        return true;
    }
</script>

<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">

@endsection