@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;">
            <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 class="position-absolute bottom-0 start-0 p-5 text-white">
                        
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="p-3 p-md-4">
                    <div class="text-center mb-3">
                        <h2 class="h4 mb-2 fw-bold">تسجيل الدخول</h2>
                        <p class="text-muted small mb-0">الرجاء إدخال بريدك الإلكتروني وكلمة المرور</p>
                    </div>
                    @if(session('success'))
                        <div class="alert alert-success rounded-3 border-0 shadow-sm py-2 mb-3">
                            {{ session('success') }}
                        </div>
                    @endif
                    @if($errors->any())
                        <div class="alert alert-danger rounded-3 border-0 shadow-sm py-2 mb-3">
                            {{ $errors->first() }}
                        </div>
                    @endif
                       <form action="{{ route('admin.login.post') }}" method="POST">
                        @csrf
                        <div class="mb-3">
							<label class="form-label fw-semibold small">البريد الإلكتروني</label>
							<input type="email" name="email" class="form-control rounded-3 shadow-sm" 
								   style="direction: rtl; padding: 0.6rem 0.75rem;" 
								   placeholder="أدخل البريد الإلكتروني" value="{{ old('email') }}" >
							<!-- span pour le message d'erreur -->
							<span class="text-danger small mt-1 d-block" id="error-email"></span>
						</div>

						<div class="mb-3">
							<label class="form-label fw-semibold small">كلمة المرور</label>
							<div class="position-relative">
								<input type="password" id="mdp" name="mdp" class="form-control rounded-3 shadow-sm"
									   style="direction: rtl; padding: 0.6rem 2.5rem 0.6rem 0.75rem;" 
									   placeholder="أدخل كلمة المرور" >
								<span onclick="togglePassword('mdp', this)" 
									  class="position-absolute top-50 end-0 translate-middle-y pe-3" 
									  style="cursor: pointer; font-size: 1.1rem;">
									🔒
								</span>
							</div>
							<!-- span pour le message d'erreur -->
							<span class="text-danger small mt-1 d-block" id="error-mdp"></span>
						</div>

                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" name="remember" id="flexCheckDefault">
                                <label class="form-check-label small" for="flexCheckDefault">
                                    تذكرني
                                </label>
                            </div>
                             <a href="{{ route('admin.password.request') }}" class="text-danger small text-decoration-none">نسيت كلمة المرور؟</a>
                        </div>
                        <div class="d-grid gap-2 mb-3">
                            <button class="btn it-btn-orange rounded-3" type="submit" style="padding: 0.65rem 1rem;">
                                <span class="d-flex align-items-center justify-content-center">
                                    تسجيل الدخول
                                    <svg width="16" height="16" viewBox="0 0 12 13" fill="none" class="ms-2"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <path d="M10.0035 3.90804L1.41153 12.5L0 11.0885L8.59097 2.49651H1.01922V0.5H12V11.4808H10.0035V3.90804Z"
                                            fill="white" />
                                    </svg>
                                </span>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    function togglePassword(id, el) {
        const input = document.getElementById(id);
        if (input.type === "password") {
            input.type = "text";
            el.textContent = "🔓";
        } else {
            input.type = "password";
            el.textContent = "🔒"; 
        }
    }
</script>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const form = document.querySelector('form');
    
    form.addEventListener('submit', function(e) {
        const email = form.querySelector('input[name="email"]');
        const mdp = form.querySelector('input[name="mdp"]');
        const errorEmail = document.getElementById('error-email');
        const errorMdp = document.getElementById('error-mdp');

        // réinitialiser les messages
        errorEmail.textContent = '';
        errorMdp.textContent = '';

        let hasError = false;

        if (!email.value.trim()) {
            errorEmail.textContent = "⚠ الرجاء إدخال البريد الإلكتروني";
            hasError = true;
        }

        if (!mdp.value.trim()) {
            errorMdp.textContent = "⚠ الرجاء إدخال كلمة المرور";
            hasError = true;
        }

        if (hasError) {
            e.preventDefault(); // empêche l'envoi du formulaire
        }
    });
});
</script>

@endsection