@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;">Changer le mot de passe</h2>
            <p class="mb-40 text-secondary-light" style="font-size: 1rem; line-height: 1.5; font-weight: 400;">Saisissez votre mot de passe actuel et votre nouveau mot de passe pour le modifier.</p>

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

            @if (session('error'))
                <div class="alert alert-danger mb-32" style="background: #f8d7da; color: #721c24; padding: 12px 16px; border-radius: 8px; border: 1px solid #f5c6cb;">
                    {{ session('error') }}
                </div>
            @endif

            <form method="POST" action="{{ route('change-password.update') }}" class="mx-auto" novalidate id="changePasswordForm">
                @csrf

                <!-- Email -->
                <div class="icon-field mb-24">
                    <span class="icon ">
                        <iconify-icon icon="mage:email"></iconify-icon>
                    </span>
                    <input type="email" 
                           class="form-control h-56-px bg-neutral-50 radius-12 @error('email') is-invalid @enderror" 
                           placeholder="Adresse e-mail" 
                           id="email" 
                           name="email"
                           value="{{ old('email') }}"
                           autocomplete="email"
                           required>
                </div>
                @error('email')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror

                <!-- Mot de passe actuel -->
                <div class="icon-field mb-24">
                    <span class="icon ">
                        <iconify-icon icon="solar:lock-password-bold"></iconify-icon>
                    </span>
                    <input type="password" 
                           class="form-control h-56-px bg-neutral-50 radius-12 @error('current_password') is-invalid @enderror" 
                           placeholder="Mot de passe actuel" 
                           id="current_password" 
                           name="current_password"
                           autocomplete="current-password"
                           required>
                </div>
                @error('current_password')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror

                <!-- Nouveau mot de passe -->
                <div class="icon-field mb-24">
                    <span class="icon ">
                        <iconify-icon icon="solar:lock-password-bold"></iconify-icon>
                    </span>
                    <input type="password" 
                           class="form-control h-56-px bg-neutral-50 radius-12 @error('new_password') is-invalid @enderror" 
                           placeholder="Nouveau mot de passe" 
                           id="new_password" 
                           name="new_password"
                           autocomplete="new-password"
                           required>
                </div>
                @error('new_password')
                    <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>

                <!-- Confirmation du nouveau mot de passe -->
                <div class="icon-field mb-24">
                    <span class="icon ">
                        <iconify-icon icon="solar:lock-password-bold"></iconify-icon>
                    </span>
                    <input type="password" 
                           class="form-control h-56-px bg-neutral-50 radius-12 @error('new_password_confirmation') is-invalid @enderror" 
                           placeholder="Confirmer le nouveau mot de passe" 
                           id="new_password_confirmation" 
                           name="new_password_confirmation"
                           autocomplete="new-password"
                           required>
                </div>
                @error('new_password_confirmation')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror

                <button type="submit" class="btn btn-primary btn-sm w-100 radius-12" style="margin-top: 16px;" id="changePasswordBtn">
                    Changer 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;">
                            ← Retour à la connexion
                        </a>
                    </p>
                </div>
            </form>
        </div>
    </div>
</section>


<script nonce="{{ $cspNonce }}">
document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('changePasswordForm');
    const newPassword = document.getElementById('new_password');
    const confirmPassword = document.getElementById('new_password_confirmation');
    const strengthIndicator = document.getElementById('passwordStrengthIndicator');
    const strengthFill = document.getElementById('strength-fill');
    const strengthText = document.getElementById('strength-text');
    const requirements = document.querySelectorAll('.requirement');
    const changePasswordBtn = document.getElementById('changePasswordBtn');

    // Fonction pour mettre à jour l'indicateur de force (identique à signup)
    function updatePasswordStrength(password) {
        if (!password) {
            return;
        }

        // Calculer la force
        let score = 0;
        let validRequirements = 0;

        // Vérifier les exigences
        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) // N'importe quel caractère spécial
        };

        // Compter les exigences remplies
        Object.values(checks).forEach(check => {
            if (check) validRequirements++;
        });

        // Calculer le score basé sur les exigences remplies
        score = (validRequirements / 5) * 100;

        // Mettre à jour les icônes des exigences
        requirements.forEach(requirement => {
            const requirementType = requirement.dataset.requirement;
            const isValid = checks[requirementType];

            if (isValid) {
                requirement.classList.add('valid');
            } else {
                requirement.classList.remove('valid');
            }
        });

        // Mettre à jour la barre de force
        strengthFill.className = 'strength-fill';

        if (password.length === 0) {
            strengthText.textContent = 'Saisissez un mot de passe';
            strengthFill.style.width = '0%';
        } else if (score < 40) {
            strengthText.textContent = 'Très faible';
            strengthFill.classList.add('weak');
        } else if (score < 60) {
            strengthText.textContent = 'Faible';
            strengthFill.classList.add('fair');
        } else if (score < 80) {
            strengthText.textContent = 'Moyen';
            strengthFill.classList.add('good');
        } else if (score < 100) {
            strengthText.textContent = 'Fort';
            strengthFill.classList.add('strong');
        } else {
            strengthText.textContent = 'Très fort';
            strengthFill.classList.add('very-strong');
        }
    }

    function validatePassword() {
        const password = newPassword.value;
        const confirm = confirmPassword.value;

        // Validation du mot de passe
        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) {
            newPassword.classList.add('is-invalid');
        } else {
            newPassword.classList.remove('is-invalid');
        }

        // Validation de la confirmation
        if (confirm && password !== confirm) {
            confirmPassword.classList.add('is-invalid');
        } else {
            confirmPassword.classList.remove('is-invalid');
        }

        return isValid && password === confirm;
    }

    newPassword.addEventListener('input', function() {
        updatePasswordStrength(this.value);
        validatePassword();
    });

    confirmPassword.addEventListener('input', function() {
        validatePassword();
    });

    // Soumission du formulaire
    form.addEventListener('submit', function(e) {
        e.preventDefault();

        if (!validatePassword()) {
            alert('Veuillez corriger les erreurs dans le formulaire');
            return;
        }

        const formData = new FormData(form);

        // Désactiver le bouton pendant la soumission
        changePasswordBtn.disabled = true;
        changePasswordBtn.textContent = 'Changement en cours...';

        fetch('{{ route("change-password.update") }}', {
            method: 'POST',
            body: formData,
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // Changer le texte du bouton
                changePasswordBtn.textContent = 'Code envoyé !';
                changePasswordBtn.classList.remove('btn-primary');
                changePasswordBtn.classList.add('btn-success');

                // Rediriger directement vers la page 2FA sans alerte
                if (data.redirect) {
                    window.location.href = data.redirect;
                } else {
                    window.location.href = '{{ route("2fa") }}';
                }
            } else {
                alert(data.message);

                // Réactiver le bouton
                changePasswordBtn.disabled = false;
                changePasswordBtn.textContent = 'Changer le mot de passe';
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Erreur lors du changement de mot de passe');

            // Réactiver le bouton
            changePasswordBtn.disabled = false;
            changePasswordBtn.textContent = 'Changer le mot de passe';
        });
    });
});
</script>
@endsection