<!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>Create your {{ config('app.name', 'Invoice') }} Account</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;600;700;800;900&family=Noto+Sans:wght@400;500;700&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>
    <!-- Theme Configuration -->
    <script id="tailwind-config">
        (function() {
            function configureTailwind() {
                if (typeof tailwind !== 'undefined' && tailwind.config) {
                    tailwind.config = {
                        darkMode: "class",
                        theme: {
                            extend: {
                                colors: {
                                    "primary": "#340080",
                                    "primary-dark": "#280060",
                                    "background-light": "#f6f7f8",
                                    "background-dark": "#101922",
                                    "text-main": "#111418",
                                    "text-secondary": "#617589",
                                    "border-light": "#dbe0e6",
                                },
                                fontFamily: {
                                    "display": ["Inter", "sans-serif"],
                                    "body": ["Noto Sans", "sans-serif"],
                                },
                                borderRadius: {"DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "full": "9999px"},
                                boxShadow: {
                                    'soft': '0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03)',
                                    'card': '0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.025)',
                                }
                            },
                        },
                    };
                } 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>
</head>
<body class="bg-white font-display text-text-main antialiased selection:bg-primary/20 selection:text-primary" style="background-color: rgba(0, 0, 0, 1) !important;">
<div class="flex min-h-screen w-full flex-col lg:flex-row overflow-hidden">
    <!-- LEFT COLUMN: Form Section -->
    <div class="flex w-full flex-col justify-center bg-white lg:w-1/2 xl:w-[45%]">
        <div class="mx-auto flex w-full max-w-[580px] flex-col px-6 py-10 lg:px-12 xl:px-20">
            <!-- Logo Header -->
            <div class="mb-10 flex items-center gap-3">
                <div class="flex size-10 items-center justify-center rounded-xl bg-primary text-white shadow-soft">
                    <span class="material-symbols-outlined text-[24px]">receipt_long</span>
                </div>
                <span class="text-xl font-bold tracking-tight text-text-main">{{ config('app.name', 'InvoiceApp') }}</span>
            </div>
            <!-- Page Heading -->
            <div class="mb-8 flex flex-col gap-2">
                <h1 class="text-3xl font-black leading-tight tracking-[-0.033em] text-text-main lg:text-4xl">
                    Create your Invoice Account
                </h1>
                <p class="text-base font-normal leading-normal text-text-secondary">
                    Start managing your finances in minutes. No credit card required.
                </p>
            </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

            <!-- Signup Form -->
            <form method="POST" action="{{ route('register') }}" class="flex flex-col gap-5" id="register-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
                <!-- Name Fields Row -->
                <div class="flex flex-col gap-5 sm:flex-row">
                    <label class="flex flex-1 flex-col gap-2">
                        <span class="text-sm font-medium leading-normal text-text-main">First Name</span>
                        <input 
                            class="form-input h-12 w-full rounded-lg border border-border-light bg-white px-4 text-base font-normal text-text-main placeholder:text-text-secondary focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary @error('name') border-red-500 @enderror" 
                            placeholder="John" 
                            type="text"
                            name="name"
                            value="{{ old('name') }}"
                            required
                            autofocus
                            autocomplete="name"
                        />
                        @error('name')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </label>
                    <label class="flex flex-1 flex-col gap-2">
                        <span class="text-sm font-medium leading-normal text-text-main">Last Name</span>
                        <input 
                            class="form-input h-12 w-full rounded-lg border border-border-light bg-white px-4 text-base font-normal text-text-main placeholder:text-text-secondary focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary" 
                            placeholder="Doe" 
                            type="text"
                            name="last_name"
                            value="{{ old('last_name') }}"
                            autocomplete="family-name"
                        />
                    </label>
                </div>
                <!-- Email Field -->
                <label class="flex flex-col gap-2">
                    <span class="text-sm font-medium leading-normal text-text-main">Work Email</span>
                    <input 
                        class="form-input h-12 w-full rounded-lg border border-border-light bg-white px-4 text-base font-normal text-text-main placeholder:text-text-secondary focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary @error('email') border-red-500 @enderror" 
                        placeholder="name@company.com" 
                        type="email"
                        name="email"
                        value="{{ old('email') }}"
                        required
                        autocomplete="username"
                    />
                    @error('email')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </label>
                <!-- Password Field -->
                <label class="flex flex-col gap-2">
                    <span class="text-sm font-medium leading-normal text-text-main">Password</span>
                    <div class="relative flex w-full items-center rounded-lg">
                        <input 
                            id="password"
                            class="form-input h-12 w-full rounded-lg border border-border-light bg-white pl-4 pr-12 text-base font-normal text-text-main placeholder:text-text-secondary focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary @error('password') border-red-500 @enderror" 
                            placeholder="Min. 8 characters" 
                            type="password"
                            name="password"
                            required
                            autocomplete="new-password"
                        />
                        <button 
                            type="button"
                            onclick="togglePassword()"
                            class="absolute right-0 mr-3 flex items-center justify-center text-text-secondary hover:text-text-main focus:outline-none"
                        >
                            <span id="password-icon" class="material-symbols-outlined text-[20px]">visibility</span>
                        </button>
                    </div>
                    @error('password')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </label>
                <!-- Confirm Password Field -->
                <label class="flex flex-col gap-2">
                    <span class="text-sm font-medium leading-normal text-text-main">Confirm Password</span>
                    <div class="relative flex w-full items-center rounded-lg">
                        <input 
                            id="password_confirmation"
                            class="form-input h-12 w-full rounded-lg border border-border-light bg-white pl-4 pr-12 text-base font-normal text-text-main placeholder:text-text-secondary focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary @error('password_confirmation') border-red-500 @enderror" 
                            placeholder="Confirm your password" 
                            type="password"
                            name="password_confirmation"
                            required
                            autocomplete="new-password"
                        />
                        <button 
                            type="button"
                            onclick="togglePasswordConfirmation()"
                            class="absolute right-0 mr-3 flex items-center justify-center text-text-secondary hover:text-text-main focus:outline-none"
                        >
                            <span id="password-confirmation-icon" class="material-symbols-outlined text-[20px]">visibility</span>
                        </button>
                    </div>
                    @error('password_confirmation')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </label>
                <!-- Submit Button -->
                <button class="mt-2 flex h-12 w-full items-center justify-center gap-2 rounded-lg bg-primary px-6 text-base font-bold text-white transition-colors hover:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2" type="submit" id="register-submit-btn">
                    Create Account
                </button>
                @if($recaptchaEnabled && $recaptchaSiteKey)
                    <script>
                        document.getElementById('register-form').addEventListener('submit', function(e) {
                            var recaptchaResponse = grecaptcha.getResponse();
                            if (!recaptchaResponse) {
                                e.preventDefault();
                                alert('Please complete the reCAPTCHA verification.');
                                return false;
                            }
                        });
                    </script>
                @endif
                <!-- Divider -->
                <div class="relative my-2 flex items-center py-2">
                    <div class="grow border-t border-border-light"></div>
                    <span class="mx-4 shrink text-xs font-medium text-text-secondary uppercase tracking-wider">Or continue with</span>
                    <div class="grow border-t border-border-light"></div>
                </div>
                <!-- Social Login -->
                <div class="grid grid-cols-2 gap-4">
                    <button type="button" class="flex h-12 items-center justify-center gap-2 rounded-lg border border-border-light bg-white px-4 text-sm font-medium text-text-main hover:bg-gray-50 transition-colors">
                        <img alt="Google" class="h-5 w-5" src="https://lh3.googleusercontent.com/aida-public/AB6AXuB3kKhSTY7i9KZhhAKr_Bwz1AQTI_8UwsMQH8-WXaJBDy1hp0Qysdvomt1fuuEj3tVYXqWDjazyK-OxvDOa_5ATIDraV6lsd72wdAf6sQ29VIYS3cE-Zp5C477b3-VN2NUnOGt_eRygK6mX-yNhUHAQ090k560HdGbkd9t5JREZYpHqH9DGIJrToud_hdgPl0H44nrbLOp1GZwtW5l8zzVOZEjD-ukm87RRCR8YWX8OmiQMwka3Giwpx5vndqNV__zj9lP41-a3skd4"/>
                        Google
                    </button>
                    <button type="button" class="flex h-12 items-center justify-center gap-2 rounded-lg border border-border-light bg-white px-4 text-sm font-medium text-text-main hover:bg-gray-50 transition-colors">
                        <img alt="Microsoft" class="h-5 w-5" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBptUlUOUGWtJYvSvsvH74AZOOXap8HfFm5cMEq_R-J4c22B9sS7yXIG8evk25l7S1NGvgzQuYFDUb-YNYfOsdHDGNfyUULu31xGb-4p_NIRABeSRtzoh7ysCLBrw6u9QqKZ8VEj_bEcJPs7si6rCWI7hJiMYQooed9jYmtYoeOx5NpItzT1R6ujeGfGxygxKeDU68Fitfj4E7JCQT44Vd7ZH16j6URGsuiz8bc4_GaEtu9FXv5oqyT5pkXa7iWZLlbxVDN8-apB5w-"/>
                        Microsoft
                    </button>
                </div>
                <!-- Footer / Login Link -->
                <p class="mt-4 text-center text-sm text-text-secondary">
                    Already have an account? 
                    <a class="font-semibold text-primary hover:underline" href="{{ route('login') }}">Log in</a>
                </p>
                <!-- Terms -->
                <p class="text-center text-xs text-text-secondary/80 mt-2">
                    By clicking "Create Account", you agree to our <a class="underline hover:text-text-main" href="#">Terms of Service</a> and <a class="underline hover:text-text-main" href="#">Privacy Policy</a>.
                </p>
            </form>
        </div>
    </div>
    <!-- RIGHT COLUMN: Visual/Illustration Section -->
    <div class="hidden lg:flex lg:w-1/2 xl:w-[55%] flex-col items-center justify-center bg-[#F0F7FF] relative overflow-hidden">
        <!-- Decorative Background Elements -->
        <div class="absolute top-[-20%] right-[-10%] h-[500px] w-[500px] rounded-full bg-primary/5 blur-3xl"></div>
        <div class="absolute bottom-[-10%] left-[-10%] h-[600px] w-[600px] rounded-full bg-primary/10 blur-3xl"></div>
        <!-- Central Composition Container -->
        <div class="relative z-10 flex flex-col items-center justify-center p-12">
            <!-- Main Dashboard Card Mockup -->
            <div class="relative w-[480px] rounded-2xl bg-white p-6 shadow-card border border-primary/5">
                <!-- Card Header -->
                <div class="mb-6 flex items-center justify-between border-b border-gray-100 pb-4">
                    <div>
                        <p class="text-xs font-semibold uppercase tracking-wider text-text-secondary">Total Revenue</p>
                        <h3 class="text-2xl font-bold text-text-main">$42,593.00</h3>
                    </div>
                    <div class="flex items-center gap-1 rounded-full bg-green-50 px-2 py-1 text-xs font-medium text-green-700">
                        <span class="material-symbols-outlined text-[16px]">trending_up</span>
                        <span>+12.5%</span>
                    </div>
                </div>
                <!-- Graph Representation -->
                <div class="flex h-40 items-end justify-between gap-2 px-2">
                    <!-- Bars -->
                    <div class="w-full rounded-t bg-primary/10 h-[40%] hover:bg-primary/20 transition-all duration-300"></div>
                    <div class="w-full rounded-t bg-primary/10 h-[60%] hover:bg-primary/20 transition-all duration-300"></div>
                    <div class="w-full rounded-t bg-primary/10 h-[35%] hover:bg-primary/20 transition-all duration-300"></div>
                    <div class="w-full rounded-t bg-primary/10 h-[75%] hover:bg-primary/20 transition-all duration-300"></div>
                    <div class="w-full rounded-t bg-primary h-[90%] shadow-lg shadow-primary/20"></div> <!-- Active/Current Month -->
                    <div class="w-full rounded-t bg-primary/10 h-[50%] hover:bg-primary/20 transition-all duration-300"></div>
                </div>
                <!-- X-Axis Labels -->
                <div class="mt-2 flex justify-between px-2 text-xs text-text-secondary">
                    <span>Jan</span>
                    <span>Feb</span>
                    <span>Mar</span>
                    <span>Apr</span>
                    <span class="font-bold text-primary">May</span>
                    <span>Jun</span>
                </div>
            </div>
            <!-- Floating Elements (Decorations) -->
            <!-- Floating Invoice Card (Top Right) -->
            <div class="absolute -right-12 top-0 animate-[bounce_3s_infinite] shadow-card rounded-xl bg-white p-4 border border-gray-100 max-w-[200px]">
                <div class="flex items-center gap-3 mb-3">
                    <div class="h-8 w-8 rounded-full bg-primary/10 flex items-center justify-center text-primary">
                        <span class="material-symbols-outlined text-[18px]">description</span>
                    </div>
                    <div>
                        <p class="text-xs text-text-secondary">Invoice #1024</p>
                        <p class="text-sm font-bold text-text-main">$1,250.00</p>
                    </div>
                </div>
                <div class="h-1.5 w-full bg-gray-100 rounded-full overflow-hidden">
                    <div class="h-full bg-primary w-2/3 rounded-full"></div>
                </div>
            </div>
            <!-- Floating Success Toast (Bottom Left) -->
            <div class="absolute -left-12 bottom-12 shadow-card rounded-xl bg-white p-3 pr-5 border border-gray-100 flex items-center gap-3">
                <div class="h-10 w-10 rounded-full bg-green-100 flex items-center justify-center text-green-600">
                    <span class="material-symbols-outlined text-[20px]">check</span>
                </div>
                <div>
                    <p class="text-sm font-bold text-text-main">Payment Received</p>
                    <p class="text-xs text-text-secondary">Just now from Acme Corp</p>
                </div>
            </div>
        </div>
        <!-- Value Proposition Text -->
        <div class="relative z-10 mt-12 text-center max-w-md px-4">
            <h2 class="text-2xl font-bold text-text-main mb-3">Automate your billing</h2>
            <p class="text-text-secondary">
                Create professional invoices, track payments, and get paid faster with our automated financial tools.
            </p>
        </div>
    </div>
</div>
<script>
    function togglePassword() {
        const passwordInput = document.getElementById('password');
        const passwordIcon = document.getElementById('password-icon');
        if (passwordInput.type === 'password') {
            passwordInput.type = 'text';
            passwordIcon.textContent = 'visibility_off';
        } else {
            passwordInput.type = 'password';
            passwordIcon.textContent = 'visibility';
        }
    }
    
    function togglePasswordConfirmation() {
        const passwordInput = document.getElementById('password_confirmation');
        const passwordIcon = document.getElementById('password-confirmation-icon');
        if (passwordInput.type === 'password') {
            passwordInput.type = 'text';
            passwordIcon.textContent = 'visibility_off';
        } else {
            passwordInput.type = 'password';
            passwordIcon.textContent = 'visibility';
        }
    }
</script>
</body>
</html>
