<!DOCTYPE html>
<html class="light" lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8"/>
    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
    <title>{{ config('app.name', 'Invoice Pro') }} - Login</title>
    @php
        $companySettings = \App\Models\CompanySetting::getSettings();
        $faviconUrl = ($companySettings->company_favicon ?? null) && \Illuminate\Support\Facades\Storage::disk('public')->exists($companySettings->company_favicon)
            ? \Illuminate\Support\Facades\Storage::url($companySettings->company_favicon)
            : asset('favicon.png');
    @endphp
    <link rel="icon" type="image/png" href="{{ $faviconUrl }}">
    <link rel="shortcut icon" type="image/png" href="{{ $faviconUrl }}">
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com" rel="preconnect"/>
    <link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&display=swap" rel="stylesheet"/>
    <!-- Material Symbols -->
    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries" onerror="console.error('Failed to load Tailwind CSS CDN')"></script>
    <!-- Tailwind Configuration -->
    <script id="tailwind-config">
        (function() {
            function configureTailwind() {
                if (typeof tailwind !== 'undefined' && tailwind.config) {
                    tailwind.config = {
                        darkMode: "class",
                        theme: {
                            extend: {
                                colors: {
                                    "primary": "#340080",
                                    "background-light": "#f6f7f8",
                                    "background-dark": "#101922",
                                },
                                fontFamily: {
                                    "display": ["Inter", "sans-serif"]
                                },
                                borderRadius: {
                                    "DEFAULT": "0.25rem",
                                    "lg": "0.5rem",
                                    "xl": "0.75rem",
                                    "2xl": "1rem",
                                    "full": "9999px"
                                },
                            },
                        },
                    };
                } else {
                    // Retry after a short delay if tailwind is not yet loaded
                    setTimeout(configureTailwind, 100);
                }
            }
            
            // Try to configure immediately
            configureTailwind();
            
            // Also try when DOM is ready
            if (document.readyState === 'loading') {
                document.addEventListener('DOMContentLoaded', configureTailwind);
            } else {
                configureTailwind();
            }
        })();
    </script>
    <style>
        /* Custom scrollbar for better aesthetics */
        ::-webkit-scrollbar {
            width: 8px;
        }
        ::-webkit-scrollbar-track {
            background: transparent;
        }
        ::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }
        
        .glass-card {
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.5);
        }
    </style>
</head>
<body class="font-display bg-background-light dark:bg-background-dark text-[#111418] dark:text-white antialiased" style="background-color: rgba(0, 0, 0, 1) !important;">
<div class="relative flex min-h-screen w-full flex-row overflow-hidden">
    <!-- LEFT COLUMN: Illustration & Visuals -->
    <div class="relative hidden lg:flex w-1/2 flex-col items-center justify-center bg-[#F0F4FA] dark:bg-[#111c2a] p-10 overflow-hidden">
        <!-- Background Pattern/Gradient -->
        <div class="absolute inset-0 bg-gradient-to-br from-primary/5 via-transparent to-primary/10"></div>
        <div class="absolute -top-20 -left-20 w-96 h-96 bg-primary/20 rounded-full blur-3xl"></div>
        <div class="absolute -bottom-20 -right-20 w-80 h-80 bg-primary/20 rounded-full blur-3xl"></div>
        <!-- Content Container -->
        <div class="relative z-10 flex flex-col items-center gap-10 max-w-lg w-full">
            <!-- Main Dashboard Card Mockup -->
            <div class="w-full glass-card rounded-2xl shadow-2xl shadow-primary/10 p-6 transform transition-transform hover:scale-[1.01] duration-500">
                <!-- Header -->
                <div class="flex items-center justify-between mb-6">
                    <div class="flex items-center gap-3">
                        <div class="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center text-primary">
                            <span class="material-symbols-outlined text-2xl">receipt_long</span>
                        </div>
                        <div>
                            <h3 class="text-lg font-bold text-[#111418]">Recent Invoices</h3>
                            <p class="text-xs text-[#617589]">Last 30 Days</p>
                        </div>
                    </div>
                        <button class="text-sm font-medium text-primary hover:text-primary/80">View All</button>
                </div>
                <!-- List Items -->
                <div class="flex flex-col gap-4">
                    <!-- Item 1 -->
                    <div class="flex items-center justify-between p-3 rounded-xl bg-white border border-slate-100 shadow-sm">
                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 rounded-full bg-green-50 flex items-center justify-center text-green-600">
                                <span class="material-symbols-outlined text-xl">check_circle</span>
                            </div>
                            <div class="flex flex-col">
                                <span class="text-sm font-bold text-[#111418]">Invoice #1024</span>
                                <span class="text-xs text-[#617589]">Acme Corp</span>
                            </div>
                        </div>
                        <div class="text-right">
                            <span class="block text-sm font-bold text-[#111418]">$1,200.00</span>
                            <span class="text-[10px] px-2 py-0.5 rounded-full bg-green-100 text-green-700 font-medium">Paid</span>
                        </div>
                    </div>
                    <!-- Item 2 -->
                    <div class="flex items-center justify-between p-3 rounded-xl bg-white border border-slate-100 shadow-sm">
                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 rounded-full bg-orange-50 flex items-center justify-center text-orange-600">
                                <span class="material-symbols-outlined text-xl">pending</span>
                            </div>
                            <div class="flex flex-col">
                                <span class="text-sm font-bold text-[#111418]">Invoice #1025</span>
                                <span class="text-xs text-[#617589]">Global Tech</span>
                            </div>
                        </div>
                        <div class="text-right">
                            <span class="block text-sm font-bold text-[#111418]">$3,450.00</span>
                            <span class="text-[10px] px-2 py-0.5 rounded-full bg-orange-100 text-orange-700 font-medium">Pending</span>
                        </div>
                    </div>
                    <!-- Graph Area Mockup -->
                    <div class="mt-2 pt-4 border-t border-slate-100">
                        <div class="flex justify-between items-end h-16 gap-2">
                            <div class="w-full bg-primary/20 rounded-t-sm h-[40%]"></div>
                            <div class="w-full bg-primary/30 rounded-t-sm h-[70%]"></div>
                            <div class="w-full bg-primary/40 rounded-t-sm h-[50%]"></div>
                            <div class="w-full bg-primary/60 rounded-t-sm h-[85%]"></div>
                            <div class="w-full bg-primary rounded-t-sm h-[100%]"></div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Floating Stats Card -->
            <div class="absolute -right-12 bottom-20 bg-white p-4 rounded-xl shadow-xl shadow-primary/10 border border-slate-100 w-48 animate-[bounce_3s_infinite]">
                <div class="flex items-center gap-3 mb-2">
                    <div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center text-white">
                        <span class="material-symbols-outlined text-sm">trending_up</span>
                    </div>
                    <span class="text-xs font-medium text-slate-500">Revenue</span>
                </div>
                <p class="text-xl font-black text-[#111418]">$42,500</p>
                <p class="text-xs text-green-600 flex items-center gap-1">
                    <span class="material-symbols-outlined text-xs">arrow_upward</span>
                    +12.5% vs last month
                </p>
            </div>
            <div class="text-center mt-8 relative z-20">
                <h2 class="text-2xl font-bold text-[#111418] mb-2">Manage Finances with Ease</h2>
                <p class="text-[#617589] max-w-sm mx-auto">Track payments, create invoices, and automate your accounting workflow in one place.</p>
            </div>
        </div>
    </div>
    <!-- RIGHT COLUMN: Login Form -->
    <div class="flex w-full lg:w-1/2 flex-col justify-center bg-white dark:bg-background-dark overflow-y-auto">
        <div class="w-full max-w-[560px] mx-auto px-6 py-12 md:px-12 flex flex-col h-full lg:h-auto justify-center">
            <!-- Brand Header -->
            <div class="flex flex-col gap-6 mb-8">
                <div class="flex items-center">
                    @php
                        use Illuminate\Support\Facades\Storage;
                        $logoUrl = null;
                        if (isset($companySettings) && $companySettings->company_logo && Storage::disk('public')->exists($companySettings->company_logo)) {
                            $logoUrl = Storage::url($companySettings->company_logo);
                        }
                    @endphp
                    @if($logoUrl)
                        <img src="{{ $logoUrl }}" alt="{{ $companySettings->company_name ?? config('app.name', 'Invoice Pro') }}" class="h-8 w-auto object-contain">
                    @else
                        <div class="w-8 h-8 bg-primary rounded-lg flex items-center justify-center text-white">
                            <span class="material-symbols-outlined">description</span>
                        </div>
                    @endif
                </div>
                <div class="flex flex-col gap-2">
                    <p class="text-[#617589] text-base font-normal leading-normal">
                        Welcome back! Please enter your details.
                    </p>
                </div>
            </div>

            <!-- Error Messages -->
            @if ($errors->any())
                <div class="mb-6 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 text-red-800 dark:text-red-200 px-4 py-3 rounded-lg">
                    <ul class="list-disc list-inside text-sm">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            @if (session('status'))
                <div class="mb-6 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 text-green-800 dark:text-green-200 px-4 py-3 rounded-lg text-sm">
                    {{ session('status') }}
                </div>
            @endif

            <!-- Social Login Buttons -->
            <div class="flex flex-col sm:flex-row gap-3 mb-6">
                <button type="button" class="flex flex-1 items-center justify-center gap-2 rounded-lg h-12 px-4 bg-[#f0f2f4] dark:bg-slate-800 text-[#111418] dark:text-white text-sm font-bold border border-transparent hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors">
                    <svg class="w-5 h-5" fill="none" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path d="M21.8055 10.0415H21V10H12V14H17.6515C16.827 16.3285 14.6115 18 12 18C8.6865 18 6 15.3135 6 12C6 8.6865 8.6865 6 12 6C13.5295 6 14.921 6.577 15.9805 7.5195L18.809 4.691C17.023 3.0265 14.634 2 12 2C6.4775 2 2 6.4775 2 12C2 17.5225 6.4775 22 12 22C17.5225 22 22 17.5225 22 12C22 11.3295 21.931 10.675 21.8055 10.0415Z" fill="#FFC107"></path>
                        <path d="M3.15295 7.3455L6.4385 9.755C7.3275 7.554 9.4805 6 12 6C13.5295 6 14.921 6.577 15.9805 7.5195L18.809 4.691C17.023 3.0265 14.634 2 12 2C8.159 2 4.828 4.1685 3.15295 7.3455Z" fill="#FF3D00"></path>
                        <path d="M12 22C14.666 22 17.0545 20.9455 18.841 19.294L15.6545 16.691C14.646 17.5025 13.376 18 12 18C9.3735 18 7.1475 16.315 6.3245 13.97L3.0645 16.4825C4.757 19.721 8.1135 22 12 22Z" fill="#4CAF50"></path>
                        <path d="M21.8055 10.0415H21V10H12V14H17.6515C17.257 15.108 16.546 16.0395 15.6545 16.691L18.841 19.294C20.777 17.5085 22 14.9395 22 12C22 11.3295 21.931 10.675 21.8055 10.0415Z" fill="#1976D2"></path>
                    </svg>
                    <span>Sign in with Google</span>
                </button>
                <button type="button" class="flex flex-1 items-center justify-center gap-2 rounded-lg h-12 px-4 bg-[#f0f2f4] dark:bg-slate-800 text-[#111418] dark:text-white text-sm font-bold border border-transparent hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors">
                    <svg class="w-5 h-5 fill-current" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path d="M12 2C6.477 2 2 6.477 2 12C2 17.523 6.477 22 12 22C17.523 22 22 17.523 22 12C22 6.477 17.523 2 12 2ZM15.535 7.828C15.025 7.828 14.604 8.169 14.414 8.604L12.564 12.836L10.748 8.604C10.558 8.169 10.137 7.828 9.627 7.828C8.941 7.828 8.448 8.498 8.686 9.15L11.054 15H10.104C9.418 15 8.925 15.67 9.163 16.322C9.288 16.666 9.615 16.892 9.981 16.892H15.181C15.547 16.892 15.874 16.666 15.999 16.322C16.237 15.67 15.744 15 15.058 15H14.108L16.476 9.15C16.714 8.498 16.221 7.828 15.535 7.828Z"></path>
                    </svg>
                    <span>Sign in with Apple</span>
                </button>
                <button type="button" class="flex flex-1 items-center justify-center gap-2 rounded-lg h-12 px-4 bg-[#f0f2f4] dark:bg-slate-800 text-[#111418] dark:text-white text-sm font-bold border border-transparent hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors">
                    <svg class="w-5 h-5" fill="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
                    </svg>
                    <span>Sign in with Facebook</span>
                </button>
            </div>
            <!-- Divider -->
            <div class="relative flex items-center justify-center mb-6">
                <hr class="w-full border-t border-[#dbe0e6] dark:border-slate-700"/>
                <span class="absolute bg-white dark:bg-background-dark px-3 text-xs font-medium text-[#617589]">OR WITH EMAIL</span>
            </div>
            <!-- Form Fields -->
            <form method="POST" action="{{ route('login') }}" class="flex flex-col gap-5" id="login-form">
                @csrf
                @php
                    $companySettings = \App\Models\CompanySetting::getSettings();
                    $recaptchaEnabled = $companySettings->recaptcha_enabled ?? false;
                    $recaptchaSiteKey = $companySettings->recaptcha_site_key ?? '';
                @endphp
                @if($recaptchaEnabled && $recaptchaSiteKey)
                    <div class="g-recaptcha mb-2" data-sitekey="{{ $recaptchaSiteKey }}"></div>
                    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
                @endif
                <label class="flex flex-col w-full">
                    <p class="text-[#111418] dark:text-gray-200 text-sm font-medium leading-normal pb-2">Email</p>
                    <input 
                        class="form-input flex w-full rounded-lg text-[#111418] dark:text-white dark:bg-slate-800 focus:outline-0 focus:ring-1 focus:ring-primary border border-[#dbe0e6] dark:border-slate-700 bg-white h-12 placeholder:text-[#617589] px-4 text-base font-normal leading-normal transition-all @error('email') border-red-500 @enderror" 
                        placeholder="name@company.com" 
                        type="email"
                        name="email"
                        value="{{ old('email') }}"
                        required
                        autofocus
                        autocomplete="username"
                    />
                    @error('email')
                        <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                    @enderror
                </label>
                <label class="flex flex-col w-full">
                    <div class="flex items-center justify-between pb-2">
                        <p class="text-[#111418] dark:text-gray-200 text-sm font-medium leading-normal">Password</p>
                        @if (Route::has('password.request'))
                            <a class="text-sm font-semibold text-primary hover:text-primary/80 hover:underline" href="{{ route('password.request') }}">Forgot Password?</a>
                        @endif
                    </div>
                    <input 
                        class="form-input flex w-full rounded-lg text-[#111418] dark:text-white dark:bg-slate-800 focus:outline-0 focus:ring-1 focus:ring-primary border border-[#dbe0e6] dark:border-slate-700 bg-white h-12 placeholder:text-[#617589] px-4 text-base font-normal leading-normal transition-all @error('password') border-red-500 @enderror" 
                        placeholder="Enter your password" 
                        type="password"
                        name="password"
                        required
                        autocomplete="current-password"
                    />
                    @error('password')
                        <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                    @enderror
                </label>
                <!-- Sign In Button -->
                <button class="mt-2 flex w-full cursor-pointer items-center justify-center overflow-hidden rounded-lg h-12 px-5 bg-primary hover:bg-primary/90 text-white text-base font-bold leading-normal tracking-[0.015em] transition-colors shadow-md shadow-primary/20" type="submit" id="login-submit-btn">
                    <span class="truncate">Sign In</span>
                </button>
                @if($recaptchaEnabled && $recaptchaSiteKey)
                    <script>
                        document.getElementById('login-form').addEventListener('submit', function(e) {
                            var recaptchaResponse = grecaptcha.getResponse();
                            if (!recaptchaResponse) {
                                e.preventDefault();
                                alert('Please complete the reCAPTCHA verification.');
                                return false;
                            }
                        });
                    </script>
                @endif
            </form>
            <!-- Footer -->
            <div class="mt-8 text-center">
                <p class="text-[#617589] text-sm">
                    Don't have an account? 
                    <a class="font-bold text-primary hover:text-primary/80 hover:underline ml-1" href="{{ route('register') }}">Sign up</a>
                </p>
            </div>
            <!-- Helper links for mobile context or extra info -->
            <div class="mt-8 flex justify-center gap-6 text-xs text-[#9aa8bc]">
                <a class="hover:text-[#617589]" href="#">Privacy Policy</a>
                <a class="hover:text-[#617589]" href="#">Terms of Service</a>
            </div>
        </div>
    </div>
</div>
</body>
</html>
