﻿<x-guest-layout>
    <!-- Session Status -->
    <x-auth-session-status class="mb-4" :status="session('status')" />

    <div class="mb-6 text-center">
        <h1 class="text-2l font-bold text-primary-700">{{ __('تسجيل الدخول') }}</h1>
        <p class="text-gray-600">{{ __('أدخل بيانات حسابك للوصول إلى لوحة التحكم') }}</p>
    </div>

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

        <!-- Email Address -->
        <div>
            <x-input-label for="email" :value="__('البريد الإلكتروني')" class="text-primary-700 font-medium" />
            <x-text-input id="email" class="block mt-1 w-full form-control" type="email" name="email" :value="old('email')" required autofocus autocomplete="username" />
            <x-input-error :messages="$errors->get('email')" class="mt-2" />
        </div>

        <!-- Password -->
        <div class="mt-4">
            <x-input-label for="password" :value="__('كلمة المرور')" class="text-primary-700 font-medium" />

            <x-text-input id="password" class="block mt-1 w-full form-control"
                            type="password"
                            name="password"
                            required autocomplete="current-password" />

            <x-input-error :messages="$errors->get('password')" class="mt-2" />
        </div>

        <!-- Remember Me -->
        <div class="block mt-4">
            <label for="remember_me" class="inline-flex items-center">
                <input id="remember_me" type="checkbox" class="rounded border-gray-300 text-primary-600 shadow-sm focus:ring-primary-500 focus:ring-opacity-50" name="remember">
                <span class="mr-2 text-sm text-gray-700">{{ __('تذكرني') }}</span>
            </label>
        </div>

        <div class="flex items-center justify-between mt-6">
            @if (Route::has('password.request'))
                <a class="text-sm text-primary-600 hover:text-primary-800 transition-colors duration-200" href="{{ route('password.request') }}">
                    {{ __('نسيت كلمة المرور؟') }}
                </a>
            @endif

            <button type="submit" class="btn-primary p-6 py-3 text-base rounded-lg shadow-md transition duration-300 ease-in-out transform hover:scale-105 flex items-center">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-2" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M3 3a1 1 0 011-1h12a1 1 0 011 1v3a1 1 0 01-.293.707L12 11.414V15a1 1 0 01-.293.707l-2 2A1 1 0 018 17v-5.586L3.293 6.707A1 1 0 013 6V3z" clip-rule="evenodd" />
                </svg>
                {{ __('تسجيل الدخول') }}
            </button>
        </div>
        
        <div class="mt-8 text-center">
            <p class="text-sm text-gray-600">
                {{ __('ليس لديك حساب؟') }} 
                <a href="{{ route('register') }}" class="text-secondary-600 hover:text-secondary-800 font-medium transition-colors duration-200">{{ __('إنشاء حساب جديد') }}</a>
            </p>
        </div>
    </form>
</x-guest-layout>
