<x-guest-layout>
    <link href="{{ asset('assets/css/login.css') }}" id="new-style" rel="stylesheet" type="text/css" />   
    <!-- Header Section with Logo -->
    <div class="login-card">
        <div class="login-header" style="background-color: transparent;">
        <!-- Logo -->
        <div class="login-logo">
            <img src="{{ asset('assets/images/logo.png') }}" alt="SPGA Logo">
        </div>
        <div class="welcome-title">SPGA DMS</div>
        <div class="welcome-subtitle">Please sign in to your account</div>
    </div>
    
    <!-- Session Status and Messages - Better Styling -->
    <div class="alert-container">
        <!-- Success Messages -->
        <x-auth-session-status class="mb-4" :status="session('status')" />
        @if (session('message'))
            <div class="text-sm text-green-600">
                {{ session('message') }}
            </div>
        @endif
        
        <!-- Error Messages -->
        @if ($errors->any())
            <div class="mb-4 text-red-600 text-sm">
                @if ($errors->count() === 1)
                    <p>{{ $errors->first() }}</p>
                @else
                    <div>
                        <p><strong>Please correct the following errors:</strong></p>
                        <ul>
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif
            </div>
        @endif
    </div>
    
    <div class="login-body" style="background-color: transparent;">
    <form method="POST" action="{{ route('login') }}" id="loginForm">
        @csrf
        
        <!-- Email Address -->
        <div  class="form-group">
            <x-input-label for="email" :value="__('Email Address')" class="required"/>
            <x-text-input id="email" class="block mt-1 w-full form-input " type="email" name="email" :value="old('email')" required autofocus autocomplete="username"/>
        </div>

        

        <!-- Password -->
        <div class="mt-4 form-group">
            <x-input-label for="password" :value="__('Password')" class="required"/>
            <div class="password-container">
                <x-text-input id="password" class="form-input password-input"
                    type="password"
                    name="password"
                    required autocomplete="current-password" />
                <button type="button" class="password-toggle" onclick="togglePassword('password')">
                    <svg class="password-show" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                    </svg>
                </button>
            </div>
            <x-input-error :messages="$errors->get('password')" class="mt-2" />
        </div>

        <!-- Remember Me -->
        <div class="block mt-4">
            <label for="remember_me" class="inline-flex items-center">
                <input id="remember_me" type="checkbox" name="remember">
                <span class="ml-2 text-sm">{{ __('Keep me signed in') }}</span>
            </label>
        </div>

        <!-- Sign In Button - Full Width -->
        <div class="mt-4">
            <x-primary-button class="w-full" id="loginButton">
                {{ __('Sign in') }}
            </x-primary-button>
        </div>

        <!-- Footer Links - Left and Right with Icons -->
        <div class="footer-links">

            
            <!-- Forgot Password - Right Side -->
            @if (Route::has('password.request'))
                <a href="{{ route('password.request') }}">
              
                    {{ __('Forgot Password?') }}
                </a>
            @endif
        </div>

        <!-- Copyright Footer -->
        <div class="copyright-footer">
            © {{ date('Y') }} SPGA. All rights reserved.
        </div>
    </form>
</div>
    <!-- Enhanced JavaScript -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Modern form handling
            const form = document.getElementById('loginForm');
            const loginButton = document.getElementById('loginButton');
            const inputs = form.querySelectorAll('input[type="email"], input[type="password"]');
            
            // Enhanced input validation with blue theme
            inputs.forEach(input => {
                // Real-time validation feedback
                input.addEventListener('input', function() {
                    validateInput(this);
                });
                
                input.addEventListener('blur', function() {
                    validateInput(this);
                });
                
                // Enhanced focus states with blue glow
                input.addEventListener('focus', function() {
                    this.style.transform = 'translateY(-1px)';
                    this.style.boxShadow = '0 0 0 3px rgb(59 130 246 / 0.15), 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 0 20px rgb(59 130 246 / 0.1)';
                });
                
                input.addEventListener('blur', function() {
                    this.style.transform = 'translateY(0)';
                });
            });
            
            // Input validation function
            function validateInput(input) {
                const value = input.value.trim();
                
                if (input.type === 'email') {
                    const isValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
                    updateInputState(input, isValid && value.length > 0);
                } else if (input.type === 'password') {
                    const isValid = value.length >= 6;
                    updateInputState(input, isValid);
                }
            }
            
            // Update input visual state with blue accents
            function updateInputState(input, isValid) {
                if (input.value.length === 0) {
                    // Reset state
                    input.style.borderColor = 'var(--border-color)';
                    input.style.boxShadow = 'none';
                    return;
                }
                
                if (isValid) {
                    input.style.borderColor = 'var(--success-border)';
                    input.style.boxShadow = '0 0 0 3px rgb(16 185 129 / 0.1), 0 0 15px rgb(16 185 129 / 0.05)';
                } else {
                    input.style.borderColor = 'var(--error-border)';
                    input.style.boxShadow = '0 0 0 3px rgb(239 68 68 / 0.1), 0 0 15px rgb(239 68 68 / 0.05)';
                }
            }
            
            // Enhanced form submission
            form.addEventListener('submit', function(e) {
                const email = form.querySelector('#email').value.trim();
                const password = form.querySelector('#password').value;
                
                // Client-side validation
                if (!email || !password) {
                    e.preventDefault();
                    showAlert('Please fill in all fields', 'error');
                    return;
                }
                
                if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
                    e.preventDefault();
                    showAlert('Please enter a valid email address', 'error');
                    return;
                }
                
                // Loading state with blue theme
                loginButton.disabled = true;
                loginButton.innerHTML = `
                    <svg class="animate-spin h-4 w-4 inline-block mr-2" fill="none" viewBox="0 0 24 24">
                        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" class="opacity-25"></circle>
                        <path fill="currentColor" class="opacity-75" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                    </svg>
                    Signing in...
                `;
                
                // Re-enable after timeout (safety)
                setTimeout(() => {
                    loginButton.disabled = false;
                    loginButton.textContent = 'Sign in';
                }, 10000);
            });
            
            // Show alert function
            function showAlert(message, type = 'info') {
                const alertDiv = document.createElement('div');
                alertDiv.className = `text-${type === 'error' ? 'red' : 'green'}-600`;
                alertDiv.textContent = message;
                
                const form = document.getElementById('loginForm');
                form.insertBefore(alertDiv, form.firstChild);
                
                // Auto-remove after 5 seconds
                setTimeout(() => {
                    if (alertDiv.parentNode) {
                        alertDiv.remove();
                    }
                }, 5000);
            }
            
            console.log('🚀 Blue-Themed Login Form Loaded');
            console.log('💙 Beautiful blue background active');
            console.log('✨ Enhanced blue accents applied');
        });
        
        // Add loading spinner CSS
        const spinnerStyle = document.createElement('style');
        spinnerStyle.textContent = `
            @keyframes spin {
                from { transform: rotate(0deg); }
                to { transform: rotate(360deg); }
            }
            .animate-spin {
                animation: spin 1s linear infinite;
            }
        `;
        document.head.appendChild(spinnerStyle);
    </script>

    <script>
    function togglePassword(fieldId) {
        const field = document.getElementById(fieldId);
        if (field.type === 'password') {
            field.type = 'text';
        } else {
            field.type = 'password';
        }
    }
    </script>
</x-guest-layout>
