<div class="flex min-h-screen w-full bg-slate-50 dark:bg-slate-950 transition-colors duration-300" x-data="{ darkMode: true, showPassword: false }" :class="darkMode ? 'dark' : ''">
    
    <!-- ===== Right Side: Hero / Brand ===== -->
    <div class="relative hidden lg:flex lg:w-1/2 items-center justify-center overflow-hidden bg-slate-950 border-l border-slate-800">
        @if(setting('login_bg_url'))
            <div class="absolute inset-0 bg-cover bg-center bg-no-repeat" style="background-image: url('{{ setting('login_bg_url') }}')"></div>
            <!-- Overlay to ensure text readability -->
            <div class="absolute inset-0 bg-slate-950/70"></div>
        @else
            <!-- Background Gradient -->
            <div class="absolute inset-0 bg-gradient-to-br from-blue-900 via-slate-900 to-indigo-950"></div>
            <!-- Grid pattern overlay -->
            <div class="absolute inset-0 opacity-20" style="background-image: radial-gradient(circle, #fff 1px, transparent 1px); background-size: 30px 30px;"></div>
        @endif
        
        <!-- Decoration Blur -->
        <div class="absolute -top-32 -right-32 w-96 h-96 bg-blue-500/20 rounded-full blur-[100px]"></div>
        <div class="absolute -bottom-32 -left-32 w-96 h-96 bg-indigo-500/20 rounded-full blur-[100px]"></div>

        <div class="relative z-10 flex flex-col items-center text-center px-12 max-w-lg">
            <div class="w-24 h-24 bg-white/5 border border-white/10 rounded-3xl flex items-center justify-center mb-8 backdrop-blur-xl shadow-2xl relative overflow-hidden">
                @if(setting('logo_url'))
                    <img src="{{ setting('logo_url') }}" alt="Logo" class="w-full h-full object-contain p-2 relative z-10">
                @else
                    <div class="absolute inset-0 bg-gradient-to-tr from-blue-500/20 to-transparent rounded-3xl"></div>
                    <svg class="w-12 h-12 text-blue-400 relative z-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                    </svg>
                @endif
            </div>
            
            <h2 class="text-4xl font-bold text-white mb-4 tracking-tight">{{ setting('site_name', 'نظام Ledger') }}</h2>
            <p class="text-blue-200/80 text-lg leading-relaxed mb-12">
                محرك دفاتر مرن يحفظ العلاقات والحركات المالية بين الأطراف ويحولها إلى كشوف وتقارير قابلة للبحث والتحليل عبر السنوات.
            </p>

            <div class="grid grid-cols-2 gap-4 text-sm text-blue-100 w-full">
                <div class="flex items-center gap-3 bg-slate-900/40 rounded-2xl px-5 py-4 backdrop-blur-md border border-white/5 transition-transform hover:-translate-y-1">
                    <div class="p-2 bg-blue-500/10 rounded-lg text-blue-400">
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
                    </div>
                    كشوف حساب دقيقة
                </div>
                <div class="flex items-center gap-3 bg-slate-900/40 rounded-2xl px-5 py-4 backdrop-blur-md border border-white/5 transition-transform hover:-translate-y-1">
                    <div class="p-2 bg-blue-500/10 rounded-lg text-blue-400">
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
                    </div>
                    قيود مزدوجة آلية
                </div>
                <div class="flex items-center gap-3 bg-slate-900/40 rounded-2xl px-5 py-4 backdrop-blur-md border border-white/5 transition-transform hover:-translate-y-1">
                    <div class="p-2 bg-blue-500/10 rounded-lg text-blue-400">
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
                    </div>
                    أرشفة طويلة الأجل
                </div>
                <div class="flex items-center gap-3 bg-slate-900/40 rounded-2xl px-5 py-4 backdrop-blur-md border border-white/5 transition-transform hover:-translate-y-1">
                    <div class="p-2 bg-blue-500/10 rounded-lg text-blue-400">
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
                    </div>
                    فلاتر وبحث سريع
                </div>
            </div>
        </div>
    </div>

    <!-- ===== Left Side: Login Form ===== -->
    <div class="flex flex-col flex-1 lg:w-1/2 relative bg-white dark:bg-slate-950 transition-colors duration-500">
        
        <!-- Top bar: Dark mode toggle -->
        <div class="absolute top-6 left-8 z-20">
            <button @click="darkMode = !darkMode" class="p-3 rounded-full bg-slate-100 dark:bg-slate-900 text-slate-500 hover:bg-slate-200 dark:text-slate-400 dark:hover:bg-slate-800 transition-colors shadow-sm">
                <svg x-show="!darkMode" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/></svg>
                <svg x-show="darkMode" x-cloak class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
            </button>
        </div>

        <div class="flex flex-col justify-center flex-1 px-8 py-10 max-w-md mx-auto w-full relative z-10">
            <div class="mb-10 text-center lg:text-right">
                <div class="w-14 h-14 bg-gradient-to-br from-blue-600 to-indigo-600 rounded-2xl flex items-center justify-center mb-6 mx-auto lg:mx-0 shadow-lg shadow-blue-600/30 overflow-hidden">
                    @if(setting('icon_url'))
                        <img src="{{ setting('icon_url') }}" alt="Icon" class="w-full h-full object-cover">
                    @else
                        <svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                    @endif
                </div>
                <h1 class="text-3xl font-bold text-slate-900 dark:text-white mb-3">مرحباً بعودتك 👋</h1>
                <p class="text-slate-500 dark:text-slate-400">الرجاء إدخال بيانات الدخول للمتابعة إلى النظام</p>
            </div>

            <form wire:submit="login" class="space-y-6" dir="rtl">
                
                @error('login_identifier') 
                <div class="flex items-start gap-3 rounded-xl border border-red-200 bg-red-50 p-4 dark:border-red-900/30 dark:bg-red-900/20">
                    <svg class="mt-0.5 h-5 w-5 shrink-0 text-red-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/></svg>
                    <p class="text-sm font-medium text-red-700 dark:text-red-400">{{ $message }}</p>
                </div>
                @enderror

                <div>
                    <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">
                        بيانات الدخول <span class="text-red-500">*</span>
                    </label>
                    <div class="relative group">
                        <div class="absolute inset-y-0 right-0 flex items-center pr-4 pointer-events-none transition-colors group-focus-within:text-blue-500 text-slate-400">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207"/></svg>
                        </div>
                        <input wire:model="login_identifier" type="text" 
                               class="w-full h-12 rounded-xl border border-slate-300 bg-slate-50 pr-11 pl-4 text-sm text-slate-900 shadow-sm placeholder:text-slate-400 focus:border-blue-500 focus:bg-white focus:outline-none focus:ring-4 focus:ring-blue-500/10 dark:border-slate-800 dark:bg-slate-900 dark:text-white dark:placeholder:text-slate-500 dark:focus:border-blue-500 dark:focus:bg-slate-900 transition-all"
                               placeholder="البريد، الجوال، أو اسم المستخدم">
                    </div>
                </div>

                <div>
                    <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">
                        كلمة المرور <span class="text-red-500">*</span>
                    </label>
                    <div class="relative group">
                        <input wire:model="password" :type="showPassword ? 'text' : 'password'" 
                               class="w-full h-12 rounded-xl border border-slate-300 bg-slate-50 pr-4 pl-12 text-sm text-slate-900 shadow-sm placeholder:text-slate-400 focus:border-blue-500 focus:bg-white focus:outline-none focus:ring-4 focus:ring-blue-500/10 dark:border-slate-800 dark:bg-slate-900 dark:text-white dark:placeholder:text-slate-500 dark:focus:border-blue-500 dark:focus:bg-slate-900 transition-all"
                               placeholder="••••••••">
                        <button type="button" @click="showPassword = !showPassword" class="absolute inset-y-0 left-0 flex items-center pl-4 text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 transition-colors focus:outline-none">
                            <svg x-show="!showPassword" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
                            <svg x-show="showPassword" x-cloak class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"/></svg>
                        </button>
                    </div>
                </div>

                <div class="flex items-center justify-between pt-2">
                    <label class="flex items-center gap-2 cursor-pointer select-none group">
                        <input wire:model="remember" type="checkbox" class="w-4 h-4 rounded border-slate-300 text-blue-600 focus:ring-blue-500 dark:border-slate-700 dark:bg-slate-900 transition-colors">
                        <span class="text-sm font-medium text-slate-600 dark:text-slate-400 group-hover:text-slate-900 dark:group-hover:text-slate-200 transition-colors">تذكرني</span>
                    </label>
                    <a href="#" class="text-sm text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 transition-colors font-semibold">نسيت كلمة المرور؟</a>
                </div>

                <button type="submit" class="w-full flex items-center justify-center gap-2 h-12 px-4 mt-2 rounded-xl bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500 text-white font-semibold text-sm shadow-lg shadow-blue-600/20 transition-all duration-300 hover:shadow-blue-600/40 hover:-translate-y-0.5 active:translate-y-0">
                    <span wire:loading.remove wire:target="login" class="flex items-center gap-2">
                        تسجيل الدخول
                        <svg class="w-4 h-4 rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"/></svg>
                    </span>
                    <span wire:loading wire:target="login" class="animate-pulse">جاري التحقق...</span>
                </button>
            </form>

            <div class="mt-12 text-center lg:text-right border-t border-slate-200 dark:border-slate-800 pt-6">
                <p class="text-xs text-slate-500 dark:text-slate-500 font-medium">
                    {{ date('Y') }} © {{ setting('site_name', 'نظام Ledger') }} — جميع الحقوق محفوظة
                </p>
            </div>
        </div>
    </div>
</div>
