@extends('user.layouts.app')

@section('title', 'تسجيل الدخول')

@section('content')
    <div class="content-wrapper">
        <div class="page-header">
            <x-lucide-log-in 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()->has('ban'))
                    <div class="alert alert-warning"
                        style="background: rgba(255, 193, 7, 0.1); border: 1px solid rgba(255, 193, 7, 0.3); color: #ffc107; padding: 1rem; border-radius: 0.5rem; text-align: center;">
                        {{ session()->get('ban') }}
                    </div>
                @endif

                <form action="{{ route('login') }}" 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>

                    <div class="input-group">
                        <label for="password">كلمة المرور</label>
                        <div class="input-wrapper">
                            <input type="password" id="password" name="password" placeholder="أدخل كلمة المرور" required
                                autocomplete="current-password">
                        </div>
                        @error('password')
                            <span class="error-text">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="input-group" style="flex-direction: row; align-items: center; gap: 0.5rem;">
                        <input type="checkbox" id="remember_me" name="remember_me"
                            style="width: 1.125rem; height: 1.125rem; cursor: pointer;">
                        <label for="remember_me" style="cursor: pointer; margin: 0;">تذكرني</label>
                    </div>

                    <button type="submit" class="submit-btn">
                        <x-lucide-log-in class="me-2" width="18" height="18" />
                        تسجيل الدخول
                    </button>
                </form>

                <div style="display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1rem; text-align: center;">
                    <a href="{{ route('password.request') }}" style="color: var(--color-primary-500);">
                        نسيت كلمة المرور؟
                    </a>
                    <div style="color: var(--color-gray-500);">
                        ليس لديك حساب؟
                        <a href="{{ route('register') }}" style="color: var(--color-primary-500); font-weight: 600;">إنشاء
                            حساب جديد</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection