@extends('layouts.dashboard')

@section('title', 'Changer le mot de passe')
@section('page-title', '')

@section('content')
<div class="container-fluid px-4 py-4">
    <!-- Page Header -->
    <div class="row mb-4">
        <div class="col-12">
            <h1 class="h3 mb-0 text-dark fw-bold">Changer le mot de passe</h1>
            <p class="text-muted mb-0">Modifiez votre mot de passe pour sécuriser votre compte</p>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="card border-0 shadow-sm">
                <div class="card-body p-4">
                    @if (session('success'))
                        <div class="alert alert-success mb-4" 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-4" 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') }}" id="changePasswordForm">
                        @csrf

                        <div class="row">
                            <div class="col-md-8 mx-auto">
                                <!-- Mot de passe actuel -->
                                <div class="mb-3">
                                    <label for="current_password" class="form-label fw-semibold">Mot de passe actuel</label>
                                    <div class="position-relative" style="display: flex; align-items: center;">
                                        <input type="password" 
                                               class="form-control @error('current_password') is-invalid @enderror" 
                                               id="current_password" 
                                               name="current_password"
                                               placeholder="Entrez votre mot de passe actuel"
                                               autocomplete="current-password"
                                               required
                                               style="padding-right: 45px;">
                                        <button type="button" class="btn btn-sm position-absolute end-0" id="toggleCurrentPassword" style="background: none; border: none; color: #6c757d; z-index: 10; cursor: pointer; padding: 0.375rem 0.5rem; pointer-events: auto;">
                                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="eye-icon" style="display: block;">
                                                <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"/>
                                            </svg>
                                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="eye-off-icon" style="display: none;">
                                                <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"></path>
                                                <line x1="1" y1="1" x2="23" y2="23" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></line>
                                            </svg>
                                        </button>
                                    </div>
                                    @error('current_password')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>

                                <!-- Nouveau mot de passe -->
                                <div class="mb-3">
                                    <label for="new_password" class="form-label fw-semibold">Nouveau mot de passe</label>
                                    <div class="position-relative" style="display: flex; align-items: center;">
                                        <input type="password" 
                                               class="form-control @error('new_password') is-invalid @enderror" 
                                               id="new_password" 
                                               name="new_password"
                                               placeholder="Entrez votre nouveau mot de passe"
                                               autocomplete="new-password"
                                               required
                                               style="padding-right: 45px;">
                                        <button type="button" class="btn btn-sm position-absolute end-0" id="toggleNewPassword" style="background: none; border: none; color: #6c757d; z-index: 10; cursor: pointer; padding: 0.375rem 0.5rem; pointer-events: auto;">
                                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="eye-icon" style="display: block;">
                                                <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"/>
                                            </svg>
                                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="eye-off-icon" style="display: none;">
                                                <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"></path>
                                                <line x1="1" y1="1" x2="23" y2="23" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></line>
                                            </svg>
                                        </button>
                                    </div>
                                    @error('new_password')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                    
                                    <!-- Indicateur de force du mot de passe -->
                                    <div class="mt-2">
                                        <div class="password-strength-indicator">
                                            <div class="strength-bar" style="height: 4px; background: #e9ecef; border-radius: 2px; overflow: hidden;">
                                                <div class="strength-fill" id="strength-fill" style="height: 100%; width: 0%; transition: width 0.3s, background-color 0.3s;"></div>
                                            </div>
                                            <div class="strength-text mt-2" id="strength-text" style="font-size: 0.875rem; color: #6c757d;">Saisissez un mot de passe</div>
                                            <div class="strength-requirements mt-3" id="strength-requirements">
                                                <div class="requirement d-flex align-items-center mb-2" data-requirement="length">
                                                    <span class="requirement-icon me-2">
                                                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="check-icon" style="display: none;">
                                                            <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" style="font-size: 0.875rem;">Au moins 12 caractères</span>
                                                </div>
                                                <div class="requirement d-flex align-items-center mb-2" data-requirement="uppercase">
                                                    <span class="requirement-icon me-2">
                                                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="check-icon" style="display: none;">
                                                            <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" style="font-size: 0.875rem;">Une majuscule</span>
                                                </div>
                                                <div class="requirement d-flex align-items-center mb-2" data-requirement="lowercase">
                                                    <span class="requirement-icon me-2">
                                                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="check-icon" style="display: none;">
                                                            <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" style="font-size: 0.875rem;">Une minuscule</span>
                                                </div>
                                                <div class="requirement d-flex align-items-center mb-2" data-requirement="number">
                                                    <span class="requirement-icon me-2">
                                                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="check-icon" style="display: none;">
                                                            <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" style="font-size: 0.875rem;">Un chiffre</span>
                                                </div>
                                                <div class="requirement d-flex align-items-center mb-2" data-requirement="special">
                                                    <span class="requirement-icon me-2">
                                                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="check-icon" style="display: none;">
                                                            <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" style="font-size: 0.875rem;">Un caractère spécial</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Confirmation du nouveau mot de passe -->
                                <div class="mb-4">
                                    <label for="new_password_confirmation" class="form-label fw-semibold">Confirmer le nouveau mot de passe</label>
                                    <div class="position-relative" style="display: flex; align-items: center;">
                                        <input type="password" 
                                               class="form-control @error('new_password_confirmation') is-invalid @enderror" 
                                               id="new_password_confirmation" 
                                               name="new_password_confirmation"
                                               placeholder="Confirmez votre nouveau mot de passe"
                                               autocomplete="new-password"
                                               required
                                               style="padding-right: 45px;">
                                        <button type="button" class="btn btn-sm position-absolute end-0" id="toggleConfirmPassword" style="background: none; border: none; color: #6c757d; z-index: 10; cursor: pointer; padding: 0.375rem 0.5rem; pointer-events: auto;">
                                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="eye-icon" style="display: block;">
                                                <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"/>
                                            </svg>
                                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="eye-off-icon" style="display: none;">
                                                <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"></path>
                                                <line x1="1" y1="1" x2="23" y2="23" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></line>
                                            </svg>
                                        </button>
                                    </div>
                                    @error('new_password_confirmation')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="d-flex gap-2 mt-4">
                                    <button type="submit" class="btn btn-primary" id="changePasswordBtn">Changer le mot de passe</button>
                                    <a href="{{ route('profile') }}" class="btn btn-outline-secondary">Annuler</a>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

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

    // Toggle password visibility
    function setupPasswordToggle(buttonId, inputId) {
        const button = document.getElementById(buttonId);
        const input = document.getElementById(inputId);
        
        console.log('Setup toggle pour:', buttonId, inputId, 'Button:', button, 'Input:', input);
        
        if (button && input) {
            button.addEventListener('click', function(e) {
                e.preventDefault();
                e.stopPropagation();
                
                console.log('Bouton cliqué:', buttonId);
                
                const type = input.getAttribute('type') === 'password' ? 'text' : 'password';
                input.setAttribute('type', type);
                
                const eyeIcon = button.querySelector('svg.eye-icon');
                const eyeOffIcon = button.querySelector('svg.eye-off-icon');
                
                console.log('Eye icons:', eyeIcon, eyeOffIcon, 'Type:', type);
                
                if (type === 'password') {
                    // Masquer le mot de passe : afficher l'icône œil normale
                    if (eyeIcon) eyeIcon.style.display = 'block';
                    if (eyeOffIcon) eyeOffIcon.style.display = 'none';
                } else {
                    // Afficher le mot de passe : afficher l'icône œil barrée
                    if (eyeIcon) eyeIcon.style.display = 'none';
                    if (eyeOffIcon) eyeOffIcon.style.display = 'block';
                }
            });
        } else {
            console.error('Bouton ou input non trouvé:', buttonId, inputId);
        }
    }

    // Initialiser les toggles après un court délai pour s'assurer que le DOM est prêt
    setTimeout(function() {
        setupPasswordToggle('toggleCurrentPassword', 'current_password');
        setupPasswordToggle('toggleNewPassword', 'new_password');
        setupPasswordToggle('toggleConfirmPassword', 'new_password_confirmation');
    }, 100);

    // 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';
        }
    }

    function validatePassword() {
        const password = newPassword.value;
        const confirm = confirmPassword.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 (password && !isValid) {
            newPassword.classList.add('is-invalid');
        } else {
            newPassword.classList.remove('is-invalid');
        }

        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);

        changePasswordBtn.disabled = true;
        const originalText = changePasswordBtn.textContent;
        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'),
                'X-Requested-With': 'XMLHttpRequest',
                'Accept': 'application/json'
            }
        })
        .then(response => {
            if (!response.ok) {
                return response.json().then(data => Promise.reject(data));
            }
            return response.json();
        })
        .then(data => {
            if (data.success) {
                changePasswordBtn.textContent = 'Mot de passe changé !';
                // Garder le style bleu (btn-primary) au lieu de vert

                setTimeout(() => {
                    if (data.redirect) {
                        window.location.href = data.redirect;
                    } else {
                        window.location.href = '{{ route("profile") }}';
                    }
                }, 1500);
            } else {
                alert(data.message || 'Erreur lors du changement de mot de passe');
                changePasswordBtn.disabled = false;
                changePasswordBtn.textContent = originalText;
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert(error.message || 'Erreur lors du changement de mot de passe');
            changePasswordBtn.disabled = false;
            changePasswordBtn.textContent = originalText;
        });
    });
});
</script>
@endpush