@php
    $hasLogo = false;
@endphp

<x-filament-panels::page.simple>
    <style>
        /* Hide Filament branding/logo */
        .fi-simple-header {
            display: none !important;
        }

        /* Make the page wrapper full width */
        .fi-simple-page {
            max-width: 100% !important;
            padding: 0 !important;
        }

        .fi-simple-main {
            max-width: 100% !important;
            padding: 0 !important;
        }

        .fi-simple-main-ctn {
            max-width: 100% !important;
            padding: 0 !important;
        }

        /* Floating animation for icons */
        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
        }

        .float-animation {
            animation: float 3s ease-in-out infinite;
        }

        /* Fade in animation */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .fade-in-up {
            animation: fadeInUp 0.6s ease-out forwards;
        }

        /* Gradient animation for background */
        @keyframes gradient {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        .animated-gradient {
            background-size: 200% 200%;
            animation: gradient 15s ease infinite;
        }

        /* Input focus effect */
        .fi-input:focus {
            transform: scale(1.01);
            transition: all 0.2s ease;
        }

        /* Hide loading spinners that are showing on page load */
        /* These spinners should only show when wire:loading is active */
        #form .fi-btn-icon.animate-spin {
            display: none !important;
        }
        
        /* Show spinner only when Livewire wire:loading is active */
        /* Livewire will add inline styles that override the above */
        #form button[wire\:loading] .fi-btn-icon.animate-spin,
        #form .fi-btn-icon.animate-spin[wire\:loading] {
            display: inline-block !important;
        }

        /* Fix checkbox and label alignment */
        #form .fi-checkbox {
            display: flex !important;
            align-items: center !important;
            gap: 0.5rem !important;
        }
        
        #form .fi-checkbox input[type="checkbox"] {
            margin: 0 !important;
            flex-shrink: 0 !important;
        }
        
        #form .fi-checkbox label {
            display: flex !important;
            align-items: center !important;
            margin: 0 !important;
            padding: 0 !important;
            line-height: 1.5 !important;
        }
    </style>

    <div class="min-h-screen w-full" style="display: flex; margin: -2rem;">
        {{-- Left Side - Admin Branding Section (60%) --}}
        <div class="hidden lg:flex lg:w-3/5 relative bg-gradient-to-br from-indigo-600 via-purple-600 to-indigo-800 overflow-hidden animated-gradient">
            <!-- Animated background circles -->
            <div class="absolute inset-0 overflow-hidden">
                <div class="absolute -top-40 -left-40 w-80 h-80 bg-white opacity-10 rounded-full blur-3xl"></div>
                <div class="absolute top-1/2 -right-20 w-96 h-96 bg-purple-400 opacity-10 rounded-full blur-3xl"></div>
                <div class="absolute bottom-0 left-1/3 w-72 h-72 bg-indigo-300 opacity-10 rounded-full blur-3xl"></div>
            </div>

            <!-- Overlay Pattern -->
            <div class="absolute inset-0 bg-black bg-opacity-10">
                <div class="absolute inset-0" style="background-image: url('data:image/svg+xml,%3Csvg width=\'60\' height=\'60\' viewBox=\'0 0 60 60\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'none\' fill-rule=\'evenodd\'%3E%3Cg fill=\'%23ffffff\' fill-opacity=\'0.05\'%3E%3Cpath d=\'M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z\'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');"></div>
            </div>

            <!-- Content -->
            <div class="relative z-10 flex flex-col justify-between p-12 text-white w-full">
                <!-- Logo & Brand -->
                <div class="flex items-center space-x-3 fade-in-up">
                    <div class="w-14 h-14 bg-white rounded-xl flex items-center justify-center shadow-2xl float-animation">
                        <svg class="w-9 h-9 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
                        </svg>
                    </div>
                    <div>
                        <span class="text-3xl font-bold block tracking-tight">{{ config('app.name', 'Play With A Pro') }}</span>
                        <span class="text-sm text-indigo-100 font-medium">Admin Portal</span>
                    </div>
                </div>

                <!-- Main Content -->
                <div class="space-y-8 fade-in-up" style="animation-delay: 0.2s;">
                    <h1 class="text-6xl font-bold leading-tight tracking-tight">
                        Administrative<br>
                        <span class="text-transparent bg-clip-text bg-gradient-to-r from-white to-indigo-200">Control Center</span>
                    </h1>
                    <p class="text-xl text-indigo-100 max-w-lg leading-relaxed">
                        Manage your platform, users, golfer profiles, bookings, and payments with powerful administrative tools.
                    </p>
                </div>

                <!-- Features -->
                <div class="space-y-5 fade-in-up" style="animation-delay: 0.4s;">
                    <div class="flex items-center space-x-4 group cursor-default">
                        <div class="w-12 h-12 bg-white bg-opacity-20 rounded-xl flex items-center justify-center backdrop-blur-sm group-hover:bg-opacity-30 transition-all duration-300 group-hover:scale-110">
                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
                            </svg>
                        </div>
                        <span class="text-lg font-medium">Comprehensive analytics & reports</span>
                    </div>
                    <div class="flex items-center space-x-4 group cursor-default">
                        <div class="w-12 h-12 bg-white bg-opacity-20 rounded-xl flex items-center justify-center backdrop-blur-sm group-hover:bg-opacity-30 transition-all duration-300 group-hover:scale-110">
                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
                            </svg>
                        </div>
                        <span class="text-lg font-medium">User & golfer management</span>
                    </div>
                    <div class="flex items-center space-x-4 group cursor-default">
                        <div class="w-12 h-12 bg-white bg-opacity-20 rounded-xl flex items-center justify-center backdrop-blur-sm group-hover:bg-opacity-30 transition-all duration-300 group-hover:scale-110">
                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                            </svg>
                        </div>
                        <span class="text-lg font-medium">Secure access control</span>
                    </div>
                </div>
            </div>
        </div>

        {{-- Right Side - Login Form (40%) --}}
        <div class="flex-1 flex items-center justify-center px-6 py-12 lg:px-16 bg-gradient-to-br from-gray-50 to-white dark:from-gray-900 dark:to-gray-800">
            <div class="w-full max-w-md">
                {{-- Mobile Logo (shown only on small screens) --}}
                <div class="lg:hidden mb-10 text-center">
                    <div class="inline-flex items-center space-x-3">
                        <div class="w-14 h-14 bg-indigo-600 rounded-xl flex items-center justify-center shadow-xl float-animation">
                            <svg class="w-9 h-9 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
                            </svg>
                        </div>
                        <div>
                            <span class="text-2xl font-bold text-gray-900 dark:text-white block">{{ config('app.name', 'Play With A Pro') }}</span>
                            <span class="text-sm font-semibold text-indigo-600 dark:text-indigo-400">Admin Portal</span>
                        </div>
                    </div>
                </div>

                {{-- Header --}}
                <div class="mb-10 fade-in-up">
                    <h2 class="text-4xl font-bold text-gray-900 dark:text-white tracking-tight">Welcome Back</h2>
                    <p class="mt-3 text-base text-gray-600 dark:text-gray-400">Sign in to access the admin dashboard</p>
                </div>

                {{-- Session Status --}}
                @if (session('status'))
                    <div class="mb-6 p-4 bg-gradient-to-r from-green-50 to-emerald-50 dark:from-green-900/20 dark:to-emerald-900/20 border-l-4 border-green-500 rounded-xl shadow-sm fade-in-up">
                        <div class="flex items-center">
                            <svg class="w-5 h-5 text-green-600 dark:text-green-400 mr-3" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                            </svg>
                            <p class="text-sm font-medium text-green-700 dark:text-green-400">{{ session('status') }}</p>
                        </div>
                    </div>
                @endif

                {{-- Login Form --}}
                <div class="fade-in-up" style="animation-delay: 0.2s;">
                    <x-filament-panels::form id="form" wire:submit="authenticate" class="space-y-6">
                        {{ $this->form }}

                        <x-filament-panels::form.actions
                            :actions="$this->getCachedFormActions()"
                            :full-width="$this->hasFullWidthFormActions()"
                        />
                    </x-filament-panels::form>
                </div>

                <script>
                    // Ensure form is not in processing state on page load
                    document.addEventListener('DOMContentLoaded', function() {
                        const form = document.getElementById('form');
                        if (form) {
                            // Reset form processing state
                            form.dispatchEvent(new CustomEvent('form-processing-finished'));
                        }
                    });
                </script>

                {{-- Security Notice --}}
                <div class="mt-10 pt-6 border-t border-gray-200 dark:border-gray-700 fade-in-up" style="animation-delay: 0.4s;">
                    <div class="flex items-center justify-center space-x-2 text-gray-500 dark:text-gray-400">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                        </svg>
                        <p class="text-xs font-medium">
                            Secure Administrator Login
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</x-filament-panels::page.simple>