<!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', 'ProInvoice') }} - Customer Login</title>
    <!-- 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 -->
    @php
        $manifestPath = public_path('build/manifest.json');
        $cssFile = 'build/assets/app-DZORnZqr.css';
        $jsFile = 'build/assets/app-CJy8ASEk.js';
        
        if (file_exists($manifestPath)) {
            $manifest = json_decode(file_get_contents($manifestPath), true);
            if (isset($manifest['resources/css/app.css']['file'])) {
                $cssFile = 'build/' . $manifest['resources/css/app.css']['file'];
            }
            if (isset($manifest['resources/js/app.js']['file'])) {
                $jsFile = 'build/' . $manifest['resources/js/app.js']['file'];
            }
        }
    @endphp
    <link rel="stylesheet" href="{{ asset($cssFile) }}">
    <script type="module" src="{{ asset($jsFile) }}"></script>
    <!-- Tailwind Configuration -->
    <script>
        (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
                    // Note: If using Vite build, Tailwind is compiled and this may not be needed
                    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>
        ::-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-blue-400/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">
            <div class="text-center">
                <h2 class="text-2xl font-bold text-[#111418] dark:text-white mb-2">Manage Your Invoices</h2>
                <p class="text-[#617589] max-w-sm mx-auto">View invoices, track payments, and manage your account 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 gap-2">
                    <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>
                    <span class="text-xl font-bold tracking-tight text-[#111418] dark:text-white">{{ config('app.name', 'ProInvoice') }}</span>
                </div>
                <div class="flex flex-col gap-2">
                    <h1 class="text-[#111418] dark:text-white text-3xl font-black leading-tight tracking-[-0.033em]">
                        Sign in to your Account
                    </h1>
                    <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 border border-red-200 text-red-800 px-4 py-3 rounded-lg">
                    <ul class="list-disc list-inside">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            @if (session('error'))
                <div class="mb-6 bg-red-50 border border-red-200 text-red-800 px-4 py-3 rounded-lg">
                    {{ session('error') }}
                </div>
            @endif

            <!-- 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]">SIGN IN WITH EMAIL</span>
            </div>
            
            <!-- Form Fields -->
            <form method="POST" action="{{ route('customer.login') }}" class="flex flex-col gap-5">
                @csrf
                
                <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="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
                    />
                    @error('email')
                        <p class="mt-1 text-sm text-red-600">{{ $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>
                        <a class="text-sm font-semibold text-primary hover:text-blue-700 hover:underline" href="#">Forgot Password?</a>
                    </div>
                    <input 
                        class="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
                    />
                    @error('password')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </label>
                
                <!-- Remember Me -->
                <div class="flex items-center">
                    <input 
                        id="remember" 
                        type="checkbox" 
                        name="remember" 
                        class="rounded border-gray-300 text-primary focus:ring-primary"
                    />
                    <label for="remember" class="ml-2 text-sm text-[#617589]">Remember me</label>
                </div>
                
                <!-- 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-blue-600 text-white text-base font-bold leading-normal tracking-[0.015em] transition-colors shadow-md shadow-blue-500/20" type="submit">
                    <span class="truncate">Sign In</span>
                </button>
            </form>
            
            <!-- Footer -->
            <div class="mt-8 text-center">
                <p class="text-[#617589] text-sm">
                    Need help? <a class="font-bold text-primary hover:text-blue-700 hover:underline ml-1" href="#">Contact Support</a>
                </p>
            </div>
        </div>
    </div>
</div>
</body>
</html>



