@extends('layouts.auth')

@section('content')
<section class="auth d-flex flex-wrap border-cleeck">
    <!-- Colonne gauche : image -->
    <div class="auth-left">
        <img src="{{ asset('assets/login-visual.png') }}" alt="Login Visual" class="login-visual-image">
    </div>

    <!-- Colonne droite : formulaire -->
    <div class="auth-right d-flex flex-column justify-content-center">
        <div class="max-w-600-px mx-auto w-100">
            <a href="/" class="mb-48 d-inline-block max-w-290-px">
                <img src="/assets/logo.png" alt="Logo" class="w-100">
            </a>

            <h2 class="mb-12 fw-medium" style="color: var(--gray-dark); font-size: 1.75rem; letter-spacing: -0.02em;">Définissez un nouveau mot de passe</h2>
            <p class="mb-40 text-secondary-light" style="font-size: 1rem; line-height: 1.5; font-weight: 400;">Choisissez un mot de passe sécurisé pour votre compte.</p>

            @if($errors->any())
                <div class="alert alert-danger mb-24" style="margin-top: 0; margin-bottom: 24px; padding: 12px 16px; border-radius: 8px; background-color: #f8d7da; border: 1px solid #f5c6cb; color: #721c24;">
                    <ul class="mb-0" style="list-style: none; padding: 0; margin: 0;">
                        @foreach($errors->all() as $error)
                            <li style="margin-bottom: 4px;">{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            @if(session('success'))
                <div class="alert alert-success mb-24" style="margin-top: 0; margin-bottom: 24px; padding: 12px 16px; border-radius: 8px; background-color: #d4edda; border: 1px solid #c3e6cb; color: #155724;">
                    {{ session('success') }}
                </div>
            @endif

            <form method="POST" action="{{ route('reset-password.update') }}" class="mx-auto" novalidate id="resetPasswordForm">
                @csrf
                <input type="hidden" name="token" value="{{ $token }}">
                <input type="hidden" name="email" value="{{ $email }}">

                <div class="position-relative mb-24">
                    <div class="icon-field">
                        <span class="icon ">
                            <iconify-icon icon="solar:lock-password-outline"></iconify-icon>
                        </span>
                        <input type="password" 
                               class="form-control h-56-px bg-neutral-50 radius-12 @error('password') is-invalid @enderror" 
                               placeholder="Nouveau mot de passe" 
                               id="password" 
                               name="password" 
                               autocomplete="new-password"
                               required>
                    </div>
                    <button type="button" 
                            class="toggle-password cursor-pointer position-absolute end-0 top-50 translate-middle-y me-20 text-secondary-light"
                            data-toggle="#password" 
                            aria-label="Afficher/masquer le mot de passe">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="eye-icon">
                            <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            <circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="eye-off-icon">
                            <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            <line x1="1" y1="1" x2="23" y2="23" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </button>
                </div>
                @error('password')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror

                <div class="position-relative mb-24">
                    <div class="icon-field">
                        <span class="icon ">
                            <iconify-icon icon="solar:lock-password-outline"></iconify-icon>
                        </span>
                        <input type="password" 
                               class="form-control h-56-px bg-neutral-50 radius-12 @error('password_confirmation') is-invalid @enderror" 
                               placeholder="Confirmer le mot de passe" 
                               id="password_confirmation" 
                               name="password_confirmation" 
                               autocomplete="new-password"
                               required>
                    </div>
                    <button type="button" 
                            class="toggle-password cursor-pointer position-absolute end-0 top-50 translate-middle-y me-20 text-secondary-light"
                            data-toggle="#password_confirmation" 
                            aria-label="Afficher/masquer le mot de passe">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="eye-icon">
                            <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            <circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="eye-off-icon">
                            <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            <line x1="1" y1="1" x2="23" y2="23" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </button>
                </div>
                @error('password_confirmation')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror

                <!-- Indicateur de force du mot de passe -->
                <div class="mb-24">
                    <div class="password-strength-indicator">
                        <div class="strength-bar">
                            <div class="strength-fill" id="strength-fill"></div>
                        </div>
                        <div class="strength-text" id="strength-text">Saisissez un mot de passe</div>
                        <div class="strength-requirements" id="strength-requirements">
                            <div class="requirement" data-requirement="length">
                                <span class="requirement-icon">
                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="check-icon">
                                        <path d="M9 12l2 2 4-4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
                                    </svg>
                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="cross-icon">
                                        <path d="M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                        <path d="M6 6l12 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                    </svg>
                                </span>
                                <span class="requirement-text">Au moins 12 caractères</span>
                            </div>
                            <div class="requirement" data-requirement="uppercase">
                                <span class="requirement-icon">
                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="check-icon">
                                        <path d="M9 12l2 2 4-4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
                                    </svg>
                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="cross-icon">
                                        <path d="M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                        <path d="M6 6l12 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                    </svg>
                                </span>
                                <span class="requirement-text">Une majuscule</span>
                            </div>
                            <div class="requirement" data-requirement="lowercase">
                                <span class="requirement-icon">
                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="check-icon">
                                        <path d="M9 12l2 2 4-4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
                                    </svg>
                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="cross-icon">
                                        <path d="M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                        <path d="M6 6l12 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                    </svg>
                                </span>
                                <span class="requirement-text">Une minuscule</span>
                            </div>
                            <div class="requirement" data-requirement="number">
                                <span class="requirement-icon">
                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="check-icon">
                                        <path d="M9 12l2 2 4-4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
                                    </svg>
                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="cross-icon">
                                        <path d="M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                        <path d="M6 6l12 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                    </svg>
                                </span>
                                <span class="requirement-text">Un chiffre</span>
                            </div>
                            <div class="requirement" data-requirement="special">
                                <span class="requirement-icon">
                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="check-icon">
                                        <path d="M9 12l2 2 4-4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
                                    </svg>
                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="cross-icon">
                                        <path d="M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                        <path d="M6 6l12 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                    </svg>
                                </span>
                                <span class="requirement-text">Un caractère spécial</span>
                            </div>
                        </div>
                    </div>
                </div>

                <button type="submit" class="btn btn-primary btn-sm w-100 radius-12" style="margin-top: 16px; background-color: #6fb87d; border-color: #6fb87d; color: white;">
                    Réinitialiser le mot de passe
                </button>

                <div class="mt-32 text-center">
                    <p class="mb-0">
                        <a href="{{ route('connexion') }}" class="text-secondary-light fw-medium" style="font-size: 0.875rem; color: #6fb87d !important;">
                            ← Retour à la connexion
                        </a>
                    </p>
                </div>
            </form>
        </div>
    </div>
</section>

<style>
    .btn-primary:hover {
        background-color: #5da66d !important;
        border-color: #5da66d !important;
    }
    
    .btn-primary:focus {
        background-color: #5da66d !important;
        border-color: #5da66d !important;
        box-shadow: 0 0 0 0.2rem rgba(111, 184, 125, 0.25);
    }
    
    a[href*="connexion"]:hover {
        color: #5da66d !important;
    }
    
    .password-strength-indicator {
        margin-top: 0.5rem;
    }
    
    .strength-bar {
        height: 4px;
        background: #e9ecef;
        border-radius: 2px;
        overflow: hidden;
    }
    
    .strength-fill {
        height: 100%;
        width: 0%;
        transition: width 0.3s, background-color 0.3s;
    }
    
    .strength-text {
        font-size: 0.875rem;
        color: #6c757d;
        margin-top: 0.5rem;
    }
    
    .strength-requirements {
        margin-top: 0.75rem;
    }
    
    .requirement {
        display: flex;
        align-items: center;
        margin-bottom: 0.5rem;
    }
    
    .requirement-icon {
        margin-right: 0.5rem;
    }
    
    .requirement-text {
        font-size: 0.875rem;
    }
    
    .check-icon {
        display: none;
        color: #28a745;
    }
    
    .cross-icon {
        display: block;
        color: #dc3545;
    }
    
    .requirement.valid .check-icon {
        display: block;
    }
    
    .requirement.valid .cross-icon {
        display: none;
    }
    
    /* Masquer l'icône eye-off par défaut */
    .eye-off-icon {
        display: none;
    }
    
    .eye-icon {
        display: block;
    }
</style>

<script nonce="{{ $cspNonce }}">
document.addEventListener('DOMContentLoaded', function() {
    const passwordInput = document.querySelector('#password');
    const confirmInput = document.querySelector('#password_confirmation');
    const strengthFill = document.getElementById('strength-fill');
    const strengthText = document.getElementById('strength-text');
    const requirements = document.querySelectorAll('#strength-requirements .requirement');
    
    // Fonction pour mettre à jour l'indicateur de force
    function updatePasswordStrength(password) {
        if (!password) {
            strengthText.textContent = 'Saisissez un mot de passe';
            strengthFill.style.width = '0%';
            strengthFill.style.backgroundColor = '';
            return;
        }

        let score = 0;
        let validRequirements = 0;

        const checks = {
            length: password.length >= 12,
            uppercase: /[A-Z]/.test(password),
            lowercase: /[a-z]/.test(password),
            number: /\d/.test(password),
            special: /[^a-zA-Z0-9]/.test(password)
        };

        Object.values(checks).forEach(check => {
            if (check) validRequirements++;
        });

        score = (validRequirements / 5) * 100;

        // Mettre à jour les icônes des exigences
        requirements.forEach(requirement => {
            const requirementType = requirement.dataset.requirement;
            const isValid = checks[requirementType];
            const checkIcon = requirement.querySelector('.check-icon');
            const crossIcon = requirement.querySelector('.cross-icon');

            if (isValid) {
                requirement.classList.add('valid');
                if (checkIcon) checkIcon.style.display = 'block';
                if (crossIcon) crossIcon.style.display = 'none';
            } else {
                requirement.classList.remove('valid');
                if (checkIcon) checkIcon.style.display = 'none';
                if (crossIcon) crossIcon.style.display = 'block';
            }
        });

        // Mettre à jour la barre de force
        strengthFill.style.width = score + '%';

        if (score < 40) {
            strengthText.textContent = 'Très faible';
            strengthFill.style.backgroundColor = '#dc3545';
        } else if (score < 60) {
            strengthText.textContent = 'Faible';
            strengthFill.style.backgroundColor = '#fd7e14';
        } else if (score < 80) {
            strengthText.textContent = 'Moyen';
            strengthFill.style.backgroundColor = '#ffc107';
        } else if (score < 100) {
            strengthText.textContent = 'Fort';
            strengthFill.style.backgroundColor = '#28a745';
        } else {
            strengthText.textContent = 'Très fort';
            strengthFill.style.backgroundColor = '#28a745';
        }
    }
    
    // Validation en temps réel
    function validatePassword() {
        const password = passwordInput.value;
        const confirm = confirmInput.value;
        
        // Mettre à jour l'indicateur de force
        updatePasswordStrength(password);
        
        // Reset styles
        passwordInput.classList.remove('is-valid', 'is-invalid');
        confirmInput.classList.remove('is-valid', 'is-invalid');
        
        const hasMinLength = password.length >= 12;
        const hasLowercase = /[a-z]/.test(password);
        const hasUppercase = /[A-Z]/.test(password);
        const hasNumber = /\d/.test(password);
        const hasSpecial = /[^a-zA-Z0-9]/.test(password);
        const isValid = hasMinLength && hasLowercase && hasUppercase && hasNumber && hasSpecial;
        
        if (password && !isValid) {
            passwordInput.classList.add('is-invalid');
        } else if (password && isValid) {
            passwordInput.classList.add('is-valid');
        }
        
        if (confirm.length > 0) {
            if (password === confirm && isValid) {
                confirmInput.classList.add('is-valid');
            } else {
                confirmInput.classList.add('is-invalid');
            }
        }
    }
    
    passwordInput.addEventListener('input', validatePassword);
    confirmInput.addEventListener('input', validatePassword);
    
    // Le toggle password est géré par le script dans layouts/auth.blade.php
    // Pas besoin de le dupliquer ici
    
    // S'assurer que le formulaire se soumet correctement
    const form = document.getElementById('resetPasswordForm');
    if (form) {
        form.addEventListener('submit', function(e) {
            // Vérifier que le mot de passe est valide avant de soumettre
            const password = passwordInput.value;
            const confirm = confirmInput.value;
            
            const hasMinLength = password.length >= 12;
            const hasLowercase = /[a-z]/.test(password);
            const hasUppercase = /[A-Z]/.test(password);
            const hasNumber = /\d/.test(password);
            const hasSpecial = /[^a-zA-Z0-9]/.test(password);
            const isValid = hasMinLength && hasLowercase && hasUppercase && hasNumber && hasSpecial;
            
            if (!isValid || password !== confirm) {
                e.preventDefault();
                alert('Veuillez remplir tous les champs correctement. Le mot de passe doit contenir au moins 12 caractères, une majuscule, une minuscule, un chiffre et un caractère spécial.');
                return false;
            }
            
            // Laisser le formulaire se soumettre normalement
            return true;
        });
    }
});
</script>
@endsection