@extends('layouts.frontend')

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

@section('content')
<style>
    input:-webkit-autofill {
        -webkit-text-fill-color: white !important;
        -webkit-box-shadow: 0 0 0px 1000px #111 inset !important;
    }
    .auth-card {
        background: #111;
        border: 1px solid #222;
        border-radius: 2.5rem;
        max-width: 450px;
        width: 100%;
        margin: auto;
        overflow: hidden;
    }
    .auth-tabs {
        display: flex;
        border-bottom: 1px solid #222;
    }
    .auth-tab {
        flex: 1;
        padding: 1.5rem;
        text-align: center;
        font-weight: bold;
        color: #444;
        transition: all 0.3s;
        text-decoration: none;
    }
    .auth-tab.active {
        color: #d4af37;
        background: #161616;
        border-bottom: 2px solid #d4af37;
    }
    .auth-input {
        background: #161616 !important;
        border: 1px solid #444 !important; /* حدود حادة وواضحة */
        color: white !important;
        border-radius: 50px !important;
        padding: 0.75rem 1.5rem !important;
        font-size: 0.9rem;
        width: 100%;
        outline: none;
        transition: all 0.2s ease;
        -webkit-appearance: none;
        backface-visibility: hidden; /* تحسين حدة الحواف الدائرية */
    }
    .auth-input:focus {
        border-color: #d4af37 !important;
        background: #1a1a1a !important;
    }
    .btn-auth {
        background: linear-gradient(90deg, #d4af37, #f9d976);
        color: #000;
        font-weight: 800;
        border-radius: 3rem;
        padding: 0.9rem !important;
        width: 100%;
        border: none;
        cursor: pointer;
        transition: all 0.3s;
        font-size: 0.95rem;
    }
    .btn-auth:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(212, 175, 55, 0.2);
    }
</style>

<div class="min-h-[85vh] flex items-center justify-center py-20 px-4 bg-[#0a0a0a]">
    <div class="auth-card shadow-2xl">
        <!-- Tabs inspired by the image -->
        <div class="auth-tabs">
            <a href="{{ route('customer.login') }}" class="auth-tab active">تسجيل الدخول</a>
            <a href="{{ route('customer.register') }}" class="auth-tab">حساب جديد</a>
        </div>

        <div class="p-10 px-12">
            @if (session('success'))
                <div style="background: rgba(16, 185, 129, 0.1); border: 1px solid #10b981; color: #10b981; padding: 1rem; border-radius: 1rem; margin-bottom: 2rem; font-size: 0.85rem; text-align: center;">
                    {{ session('success') }}
                </div>
            @endif

            @if (session('error'))
                <div style="background: rgba(239, 68, 68, 0.1); border: 1px solid #ef4444; color: #ef4444; padding: 1rem; border-radius: 1rem; margin-bottom: 2rem; font-size: 0.85rem; text-align: center;">
                    {{ session('error') }}
                </div>
            @endif

            <form action="{{ route('customer.login.post') }}" method="POST" class="space-y-8">
                @csrf
                <div>
                    <label class="block text-xs font-bold text-gray-500 uppercase tracking-widest mb-3 mr-4 text-right">البريد الإلكتروني</label>
                    <input type="email" name="email" value="{{ old('email') }}" required 
                        class="auth-input" 
                        placeholder="example@mail.com">
                    @error('email') <p class="text-red-500 text-[10px] mt-2 mr-4 text-right">{{ $message }}</p> @enderror
                </div>

                <div>
                    <div class="flex justify-between items-center mb-3 px-4">
                        <a href="#" class="text-[#d4af37] text-[10px] hover:underline">نسيت كلمة المرور؟</a>
                        <label class="text-xs font-bold text-gray-500 uppercase tracking-widest">كلمة المرور</label>
                    </div>
                    <input type="password" name="password" required 
                        class="auth-input" 
                        placeholder="••••••••">
                    @error('password') <p class="text-red-500 text-[10px] mt-2 mr-4 text-right">{{ $message }}</p> @enderror
                </div>

                <div class="flex items-center justify-end px-4">
                    <label for="remember" class="mr-2 block text-xs text-gray-500 cursor-pointer">تذكرني</label>
                    <input id="remember" name="remember" type="checkbox" class="h-4 w-4 text-[#d4af37] border-none bg-[#222] rounded cursor-pointer focus:ring-0">
                </div>

                <button type="submit" class="btn-auth shadow-lg active:scale-95">
                    دخول
                </button>
            </form>

            <div class="mt-10 text-center">
                <a href="{{ route('customer.register') }}" class="text-gray-500 text-xs font-medium hover:text-[#d4af37] transition-colors">ليس لديك حساب؟</a>
            </div>
        </div>
    </div>
</div>
@endsection