@php $lang = session('locale', 'en'); @endphp
<!DOCTYPE html>
<html lang="{{ $lang }}">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ $lang == 'bn' ? 'লগিন' : 'Login' }} - {{ \App\Models\Setting::val('site_name', 'Client Portal') }}</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdn.tailwindcss.com"></script>
    
    @if(\App\Models\Setting::val('enable_captcha') == 'yes')
        <script src="https://www.google.com/recaptcha/api.js" async defer></script>
    @endif

    <script>
        tailwind.config = { darkMode: 'class' }
        if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
            document.documentElement.classList.add('dark')
        } else {
            document.documentElement.classList.remove('dark')
        }
    </script>
    <style>body { font-family: 'Inter', sans-serif; }</style>
</head>
<body class="bg-slate-50 dark:bg-[#020617] text-slate-800 dark:text-slate-300 min-h-screen flex items-center justify-center relative overflow-hidden transition-colors duration-300">

    <div class="absolute top-6 right-6 z-50 flex gap-3">
        <a href="{{ route('lang.switch', $lang == 'bn' ? 'en' : 'bn') }}" class="w-10 h-10 rounded-full bg-white dark:bg-[#1e293b] border border-slate-200 dark:border-[#334155] shadow-sm flex items-center justify-center font-bold text-sm text-slate-600 dark:text-slate-300 hover:text-emerald-500 transition-colors">
            {{ $lang == 'bn' ? 'EN' : 'BN' }}
        </a>
        <button onclick="toggleTheme()" class="w-10 h-10 rounded-full bg-white dark:bg-[#1e293b] border border-slate-200 dark:border-[#334155] shadow-sm flex items-center justify-center text-slate-600 dark:text-slate-300 hover:text-emerald-500 transition-colors">
            <i class="fas fa-moon dark:hidden"></i>
            <i class="fas fa-sun hidden dark:block"></i>
        </button>
    </div>

    <div class="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] bg-emerald-500/20 blur-[120px] rounded-full pointer-events-none"></div>

    <div class="w-full max-w-md p-6 relative z-10">
        
        <div class="text-center mb-8">
            @if(\App\Models\Setting::val('site_logo'))
                <img src="{{ asset(\App\Models\Setting::val('site_logo')) }}" alt="Logo" class="h-12 mx-auto mb-4 object-contain">
            @else
                <div class="inline-flex items-center justify-center w-14 h-14 rounded-2xl bg-gradient-to-br from-emerald-400 to-blue-500 text-white text-3xl mb-4 shadow-lg shadow-emerald-500/30">
                    <i class="fas fa-server"></i>
                </div>
            @endif
            <h2 class="text-2xl font-bold text-slate-800 dark:text-white tracking-tight">{{ $lang == 'bn' ? 'স্বাগতম' : 'Welcome Back' }}</h2>
            <p class="text-sm text-slate-500 dark:text-slate-400 mt-2">{{ $lang == 'bn' ? 'আপনার ডোমেইন এবং হোস্টিং পরিচালনা করতে লগিন করুন।' : 'Sign in to manage your domains and hosting.' }}</p>
        </div>

        @if(session('error'))
            <div class="bg-red-100 dark:bg-red-500/10 border border-red-200 dark:border-red-500/20 text-red-600 dark:text-red-400 px-4 py-3 rounded-xl mb-6 text-sm flex items-center gap-2">
                <i class="fas fa-exclamation-circle"></i> {{ session('error') }}
            </div>
        @endif
        @if(session('success'))
            <div class="bg-emerald-100 dark:bg-emerald-500/10 border border-emerald-200 dark:border-emerald-500/20 text-emerald-600 dark:text-emerald-400 px-4 py-3 rounded-xl mb-6 text-sm flex items-center gap-2">
                <i class="fas fa-check-circle"></i> {{ session('success') }}
            </div>
        @endif

        <div class="bg-white dark:bg-[#0f172a]/80 backdrop-blur-xl border border-slate-200 dark:border-[#1e293b] rounded-2xl p-8 shadow-xl dark:shadow-2xl">
            
            <form action="{{ route('login.post') }}" method="POST">
                @csrf
                <div class="mb-5">
                    <label class="block text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-2">{{ $lang == 'bn' ? 'ইমেইল অথবা ইউজারনেম' : 'Email or Username' }}</label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"><i class="fas fa-user text-slate-400 dark:text-slate-500"></i></div>
                        <input type="text" name="email" value="{{ old('email') }}" class="w-full bg-slate-50 dark:bg-[#1e293b] border border-slate-200 dark:border-[#334155] text-slate-800 dark:text-white text-sm rounded-xl focus:ring-emerald-500 focus:border-emerald-500 block pl-10 p-3 outline-none transition-colors" placeholder="{{ $lang == 'bn' ? 'আপনার আইডি লিখুন' : 'Enter your ID' }}" required>
                    </div>
                </div>

                <div class="mb-5">
                    <div class="flex items-center justify-between mb-2">
                        <label class="block text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider">{{ $lang == 'bn' ? 'পাসওয়ার্ড' : 'Password' }}</label>
                        <a href="{{ route('password.request') }}" class="text-xs text-emerald-500 dark:text-emerald-400 hover:underline font-medium">{{ $lang == 'bn' ? 'পাসওয়ার্ড ভুলে গেছেন?' : 'Forgot Password?' }}</a>
                    </div>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"><i class="fas fa-lock text-slate-400 dark:text-slate-500"></i></div>
                        <input type="password" name="password" class="w-full bg-slate-50 dark:bg-[#1e293b] border border-slate-200 dark:border-[#334155] text-slate-800 dark:text-white text-sm rounded-xl focus:ring-emerald-500 focus:border-emerald-500 block pl-10 p-3 outline-none transition-colors" placeholder="••••••••" required>
                    </div>
                </div>

                @if(\App\Models\Setting::val('enable_captcha') == 'yes')
                <div class="mb-6 flex justify-center">
                    <div class="g-recaptcha" data-sitekey="{{ \App\Models\Setting::val('recaptcha_site_key') }}" data-theme="dark"></div>
                </div>
                @endif

                <div class="flex items-center mb-6">
                    <input id="remember" type="checkbox" name="remember" class="w-4 h-4 rounded border-gray-300 dark:border-gray-600 bg-white dark:bg-[#1e293b] text-emerald-500 focus:ring-emerald-500">
                    <label for="remember" class="ml-2 text-sm font-medium text-slate-600 dark:text-slate-400">{{ $lang == 'bn' ? 'আমাকে মনে রাখুন' : 'Remember me' }}</label>
                </div>

                <button type="submit" class="w-full bg-emerald-500 hover:bg-emerald-600 text-white font-bold py-3 rounded-xl shadow-lg shadow-emerald-500/20 transition-all hover:scale-[1.02]">
                    {{ $lang == 'bn' ? 'লগিন করুন' : 'Sign In' }} <i class="fas fa-arrow-right ml-1"></i>
                </button>
            </form>

            @if(\App\Models\Setting::val('enable_google_login') == 'yes')
                <div class="mt-6 flex items-center">
                    <div class="flex-grow border-t border-slate-200 dark:border-[#334155]"></div>
                    <span class="flex-shrink-0 mx-4 text-slate-400 text-xs uppercase font-bold">{{ $lang == 'bn' ? 'অথবা' : 'Or continue with' }}</span>
                    <div class="flex-grow border-t border-slate-200 dark:border-[#334155]"></div>
                </div>

                <div class="mt-6">
                    <a href="{{ route('google.login') }}" class="w-full bg-slate-50 dark:bg-[#1e293b] hover:bg-slate-100 dark:hover:bg-[#334155] border border-slate-200 dark:border-[#334155] text-slate-700 dark:text-white font-medium py-2.5 rounded-xl transition-colors flex items-center justify-center gap-3">
                        <img src="https://www.svgrepo.com/show/475656/google-color.svg" alt="Google" class="w-5 h-5">
                        {{ $lang == 'bn' ? 'গুগল দিয়ে লগিন করুন' : 'Sign in with Google' }}
                    </a>
                </div>
            @endif
        </div>

        <p class="text-center text-sm text-slate-500 mt-8">
            {{ $lang == 'bn' ? 'একাউন্ট নেই?' : "Don't have an account?" }} <a href="{{ route('register') }}" class="text-emerald-500 dark:text-emerald-400 font-bold hover:underline">{{ $lang == 'bn' ? 'একাউন্ট তৈরি করুন' : 'Create Account' }}</a>
        </p>
    </div>

    <script>
        function toggleTheme() {
            if (document.documentElement.classList.contains('dark')) {
                document.documentElement.classList.remove('dark');
                localStorage.theme = 'light';
            } else {
                document.documentElement.classList.add('dark');
                localStorage.theme = 'dark';
            }
        }
    </script>
</body>
</html>
