@extends('layouts.app')

@section('content')
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-md-6 col-lg-5">
            <!-- Card de login moderne -->
            <div class="card-modern p-4">
                <div class="text-center mb-4">
                    <div class="icon-container bg-success bg-opacity-10 mb-3 mx-auto align-content-center rounded-5" style="width: 80px; height: 80px;">
                        <i class="bi bi-person-circle text-success" style="font-size: 2rem;"></i>
                    </div>
                    <h2 class="fw-bold text-gradient mb-2">Connexion</h2>
                    <p class="text-muted small">Accédez à votre espace administrateur</p>
                </div>

                <form method="POST" action="{{ route('login') }}" id="loginForm">
                    @csrf

                    <!-- Champ Email -->
                    <div class="form-group-modern mb-4">
                        <label for="email" class="form-label-modern">
                            <span class="required-field">Adresse Email</span>
                        </label>
                        <input id="email" type="email" class="form-control-modern @error('email') is-invalid @enderror" 
                               name="email" value="{{ old('email') }}" 
                               required autocomplete="email" autofocus
                               placeholder="votre@email.com">
                        @error('email')
                            <div class="text-danger small mt-1 d-flex align-items-center gap-1">
                                <i class="bi bi-exclamation-circle"></i>
                                {{ $message }}
                            </div>
                        @enderror
                    </div>

                    <!-- Champ Mot de passe -->
                    <div class="form-group-modern mb-4">
                        <label for="password" class="form-label-modern">
                            <span class="required-field">Mot de passe</span>
                        </label>
                        <div class="password-wrapper position-relative">
                            <input id="password" type="password" 
                                   class="form-control-modern @error('password') is-invalid @enderror" 
                                   name="password" required autocomplete="current-password"
                                   placeholder="Votre mot de passe">
                            <button type="button" class="btn btn-link position-absolute end-0 top-50 translate-middle-y me-2" 
                                    id="togglePassword" style="background: none; border: none; color: var(--text-muted);">
                                <i class="bi bi-eye"></i>
                            </button>
                        </div>
                        @error('password')
                            <div class="text-danger small mt-1 d-flex align-items-center gap-1">
                                <i class="bi bi-exclamation-circle"></i>
                                {{ $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" name="remember" 
                                   id="remember" {{ old('remember') ? 'checked' : '' }}
                                   style="width: 1.1em; height: 1.1em;">
                            <label class="form-check-label small ms-2" for="remember">
                                Se souvenir de moi
                            </label>
                        </div>
                        
                        @if (Route::has('password.request'))
                            <a href="{{ route('password.request') }}" class="small text-decoration-none text-primary">
                                Mot de passe oublié ?
                            </a>
                        @endif
                    </div>

                    <!-- Bouton de connexion -->
                    <button type="submit" class="btn btn-primary-modern btn-modern w-100 mb-3">
                        <i class="bi bi-box-arrow-in-right me-2"></i>
                        {{ __('Connexion') }}
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

<style>
    /* Styles spécifiques pour la page de login */
    .password-wrapper {
        position: relative;
    }
    
    #togglePassword {
        background: transparent !important;
        border: none !important;
        color: var(--text-muted) !important;
        padding: 0.5rem;
        cursor: pointer;
        transition: color var(--transition-fast);
    }
    
    #togglePassword:hover {
        color: var(--primary-500) !important;
    }
    
    .card-modern {
        animation: fadeInUp 0.5s ease-out;
    }
    
    .form-check-input:checked {
        background-color: var(--primary-500);
        border-color: var(--primary-500);
    }
    
    .form-check-input:focus {
        border-color: var(--primary-500);
        box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
    }
    
    /* Animation pour les icônes */
    .icon-container {
        animation: float 3s ease-in-out infinite;
    }
    
    @keyframes float {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-10px); }
    }
    
    /* Style pour les liens */
    a.text-primary:hover {
        color: var(--primary-600) !important;
        text-decoration: underline !important;
    }
    
    /* Ajustements responsive */
    @media (max-width: 768px) {
        .container.py-5 {
            padding-top: 2rem !important;
            padding-bottom: 2rem !important;
        }
        
        .card-modern {
            padding: 1.5rem !important;
        }
    }
</style>
    
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Toggle password visibility
    const togglePassword = document.getElementById('togglePassword');
    const passwordInput = document.getElementById('password');
        console.log('ok')
    
    if (togglePassword && passwordInput) {
        togglePassword.addEventListener('click', function() {
            const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
            passwordInput.setAttribute('type', type);
            
            // Changer l'icône
            const icon = this.querySelector('i');
            if (type === 'password') {
                icon.className = 'bi bi-eye';
            } else {
                icon.className = 'bi bi-eye-slash';
            }
        });
    }
    
    // Validation du formulaire
    const loginForm = document.getElementById('loginForm');
    const emailInput = document.getElementById('email');
    
    function validateEmail(email) {
        const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        return re.test(email);
    }
    
    function showValidation(field, isValid) {
        if (isValid) {
            field.classList.remove('is-invalid');
            field.classList.add('is-valid');
        } else {
            field.classList.remove('is-valid');
            field.classList.add('is-invalid');
        }
    }
    
    // Validation en temps réel
    if (emailInput) {
        emailInput.addEventListener('blur', function() {
            const isValid = validateEmail(this.value.trim());
            showValidation(this, isValid);
        });
    }
    
    if (passwordInput) {
        passwordInput.addEventListener('blur', function() {
            const isValid = this.value.trim().length >= 8;
            showValidation(this, isValid);
        });
    }
    
    // Gestion de la soumission
    loginForm.addEventListener('submit', function(e) {
        let isValid = true;
        
        // Validation email
        if (!validateEmail(emailInput.value.trim())) {
            showValidation(emailInput, false);
            isValid = false;
        }
        
        // Validation password
        if (passwordInput.value.trim().length < 8) {
            showValidation(passwordInput, false);
            isValid = false;
        }
        
        if (!isValid) {
            e.preventDefault();
            
            // Afficher un message d'erreur
            Swal.fire({
                icon: 'error',
                title: 'Erreur de validation',
                text: 'Veuillez vérifier les informations saisies',
                background: 'var(--bg-surface)',
                color: 'var(--text-primary)',
                confirmButtonColor: 'var(--primary-500)',
                confirmButtonText: 'Compris'
            });
        } else {
            // Afficher un loader
            const submitBtn = this.querySelector('button[type="submit"]');
            const originalText = submitBtn.innerHTML;
            submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Connexion en cours...';
            submitBtn.disabled = true;
        }
    });
    
    // Effet de focus sur les champs
    document.querySelectorAll('.form-control-modern').forEach(input => {
        input.addEventListener('focus', function() {
            this.parentElement.querySelector('.form-label-modern').style.color = 'var(--primary-500)';
        });
        
        input.addEventListener('blur', function() {
            if (this.value.trim() === '') {
                this.parentElement.querySelector('.form-label-modern').style.color = 'var(--text-secondary)';
            }
        });
    });
    
    // Animation d'entrée pour le formulaire
    const formGroups = document.querySelectorAll('.form-group-modern');
    formGroups.forEach((group, index) => {
        group.style.animationDelay = `${index * 0.1}s`;
    });
});
</script>
@endsection