<!-- resources/views/livewire/login.blade.php -->
<div>
    <!-- Theme Toggle -->
    <button class="theme-toggle" 
            id="themeToggle" 
            title="Toggle theme"
            wire:click="toggleTheme"
            wire:loading.attr="disabled"
            wire:loading.class="opacity-50">
        <i class="bi" id="themeIcon"></i>
    </button>

    <!-- Login Card -->
    <div class="dashboard-card">
        <div class="card-header">
            <a href="#" class="login-logo">
                
                    <img src="{{ asset('assets/images/ocpd-logo.png') }}" alt="Logo" width="400">
                    {{-- <i class="bi bi-speedometer2"></i> --}}
                
                {{-- <div>
                    <div class="logo-text">OCPD</div>
                </div> --}}
            </a>
            <div class="logo-subtext">Sign in to access dashboard</div>
        </div>
        
        <div class="card-body">
            <!-- Login Form -->
            <form wire:submit="login">
                <!-- Email field - Fix: Remove wire:keydown that was calling updated() directly -->
                <div class="mb-4">
                    <label for="email" class="form-label">Email address</label>
                    <div class="input-group">
                        <span class="input-group-text"><i class="bi bi-envelope"></i></span>
                        <input type="email" 
                               class="form-control @error('email') is-invalid @enderror" 
                               id="email" 
                               placeholder="admin@example.com" 
                               wire:model="email"
                               {{-- wire:blur="validateEmail"  --}}
                               autofocus>
                    </div>
                    @error('email')
                        <div class="invalid-feedback d-block">{{ $message }}</div>
                    @enderror
                </div>

                <!-- Password field - Fix: Remove wire:keydown -->
                <div class="mb-3">
                    <label for="password" class="form-label">Password</label>
                    <div class="input-group">
                        <span class="input-group-text"><i class="bi bi-lock"></i></span>
                        <input type="password" 
                               class="form-control @error('password') is-invalid @enderror" 
                               id="password" 
                               placeholder="••••••••" 
                               wire:model="password"/>
                               {{-- wire:blur="validatePassword"  --}}
                               {{-- wire:blur="validatePassword"> --}}
                                <!-- Fix: Use blur instead of keydown -->
                        <button class="btn btn-outline-secondary" 
                                type="button" 
                                id="togglePassword" 
                                style="border-left: none; border-radius: 0 12px 12px 0;">
                            <i class="bi bi-eye"></i>
                        </button>
                    </div>
                    @error('password')
                        <div class="invalid-feedback d-block">{{ $message }}</div>
                    @enderror
                </div>

                <!-- Remember me & Forgot password -->
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <div class="form-check">
                        <input class="form-check-input" 
                               type="checkbox" 
                               id="rememberMe" 
                               wire:model="remember" 
                               style="border-color: var(--border-color);">
                        <label class="form-check-label" for="rememberMe" style="color: var(--text-secondary);">
                            Remember me
                        </label>
                    </div>
                    <a href="#" class="forgot-link" wire:click.prevent="forgotPassword">Forgot password?</a>
                </div>

                <!-- Submit button with loading state -->
                <button type="submit" class="btn btn-primary w-100 mb-3" wire:loading.attr="disabled" wire:target="login">
                    <span wire:loading.remove wire:target="login">
                        <i class="bi bi-box-arrow-in-right me-2"></i>Sign in
                    </span>
                    <span wire:loading wire:target="login">
                        <span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
                        Authenticating...
                    </span>
                </button>

                {{-- <!-- Demo credentials hint -->
                <div class="demo-credentials">
                    <i class="bi bi-info-circle me-1"></i>
                    Demo: admin@example.com / password
                </div>

                <!-- Register link -->
                <div class="text-center mt-4">
                    <a href="#" class="register-link" wire:click.prevent="register">
                        Don't have an account? <strong>Create account</strong>
                    </a>
                </div>

                <!-- Divider with alternative login -->
                <div class="divider mt-4">or continue with</div>

                <div class="d-flex gap-2 mt-3">
                    <button class="btn btn-outline-secondary w-100" type="button" wire:click="socialLogin('google')">
                        <i class="bi bi-google"></i> Google
                    </button>
                    <button class="btn btn-outline-secondary w-100" type="button" wire:click="socialLogin('github')">
                        <i class="bi bi-github"></i> GitHub
                    </button>
                </div> --}}
            </form>
        </div>
    </div>

    <!-- Theme initialization and event handling script -->
    <script>
        // Initialize theme on page load
        document.addEventListener('DOMContentLoaded', function() {
            const theme = @json($theme);
            applyTheme(theme);
        });

        // Function to apply theme to body and update icon
        function applyTheme(theme) {
            // Set data-theme attribute on body
            document.body.setAttribute('data-theme', theme);
            
            // Update icon
            const iconElement = document.getElementById('themeIcon');
            if (iconElement) {
                iconElement.className = theme === 'dark' ? 'bi bi-sun' : 'bi bi-moon';
            }
            
            // Save to localStorage as backup
            localStorage.setItem('theme', theme);
        }

        // Listen for Livewire events
        document.addEventListener('livewire:init', function() {
            Livewire.on('themeChanged', (event) => {
                // Handle different event structures
                let theme = null;
                
                if (event && typeof event === 'object') {
                    if (event.theme) {
                        theme = event.theme;
                    } else if (Array.isArray(event) && event.length > 0 && event[0]?.theme) {
                        theme = event[0].theme;
                    } else if (event.detail?.theme) {
                        theme = event.detail.theme;
                    }
                }
                
                if (theme) {
                    applyTheme(theme);
                }
            });
        });

        // Password toggle script
        document.addEventListener('DOMContentLoaded', function() {
            const togglePassword = document.getElementById('togglePassword');
            if (togglePassword) {
                togglePassword.addEventListener('click', function() {
                    const passwordInput = document.getElementById('password');
                    const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
                    passwordInput.setAttribute('type', type);
                    const icon = this.querySelector('i');
                    if (icon) {
                        icon.classList.toggle('bi-eye');
                        icon.classList.toggle('bi-eye-slash');
                    }
                });
            }
        });
    </script>

    <!-- Add validation methods -->
    <script>
        document.addEventListener('livewire:init', function() {
            Livewire.on('validateEmail', () => {
                @this.validateOnly('email');
            });
            
            Livewire.on('validatePassword', () => {
                @this.validateOnly('password');
            });
        });
    </script>
</div>