@extends('layouts.app')

@section('content')
<div class="container-xxl pt-5">
    <div class="container">
        <form method="POST" action="{{ route('password.store') }}" class="form form-reset-password">
            @csrf

            <input type="hidden" name="token" value="{{ $request->route('token') }}">

            <div class="row justify-content-center">
                <div class="col-md-6 wow fadeInUp mb-4" data-wow-delay="0s">
                    <div class="p-4 bg-grey border-radius-10 inscription_panel_left">
                        <div class="text-center wow fadeInUp" data-wow-delay="0s">
                            <div class="my-4 double-circle-gold" style="margin: auto;">
                                <span><i class="fa-regular fa-key text-primary"></i></span>
                            </div>
                            <h2 class="text-primary-or-white">Réinitialiser le mot de passe</h2>
                        </div>
                        <div class="row justify-content-center">
                            <div class="col-md-8 col-sm-12 wow fadeInUp" data-wow-delay="0s">

                                @if ($errors->any())
                                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                        @foreach ($errors->all() as $error)
                                            <p>{{ $error }}</p>
                                        @endforeach
                                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                                    </div>
                                @endif

                                <div class="form-group my-4">
                                    <label class="control-label" for="email">Votre email</label>
                                    <div class="input-group">
                                        <div class="input-group-addon">
                                            <i class="fa-regular fa-envelope text-white-or-primary-color"></i>
                                        </div>
                                        <input type="email"
                                               class="form-control ps-2 @error('email') is-invalid @enderror"
                                               id="email"
                                               name="email"
                                               value="{{ old('email', $request->email) }}"
                                               required
                                               autocomplete="email"
                                               placeholder="Votre email..."
                                               autofocus>
                                    </div>
                                    @error('email')
                                        <span class="text-danger small">{{ $message }}</span>
                                    @enderror
                                </div>

                                <div class="form-group my-4">
                                    <label class="control-label" for="password">Nouveau mot de passe</label>
                                    <div class="input-group">
                                        <div class="input-group-addon">
                                            <i class="fa-regular fa-lock-keyhole text-white-or-primary-color"></i>
                                        </div>
                                        <input type="password"
                                               class="form-control ps-2 @error('password') is-invalid @enderror"
                                               id="password"
                                               name="password"
                                               required
                                               minlength="12"
                                               autocomplete="new-password"
                                               placeholder="Votre nouveau mot de passe...">
                                        <button type="button"
                                                class="btn btn-outline-secondary toggle-password-visibility"
                                                data-target="#password"
                                                aria-label="Afficher ou masquer le mot de passe">
                                            <i class="fa-regular fa-eye"></i>
                                        </button>
                                    </div>
                                    <div class="form-text">
                                        <small class="text-muted">
                                            Le mot de passe doit contenir au moins 12 caractères, une minuscule, une majuscule, un chiffre et un caractère spécial.
                                        </small>
                                    </div>
                                    <div id="password-requirements" class="mt-2 small">
                                        <div id="req-length" class="text-muted">
                                            <i class="fa-regular fa-circle me-1"></i> Au moins 12 caractères
                                        </div>
                                        <div id="req-lowercase" class="text-muted">
                                            <i class="fa-regular fa-circle me-1"></i> Au moins une minuscule
                                        </div>
                                        <div id="req-uppercase" class="text-muted">
                                            <i class="fa-regular fa-circle me-1"></i> Au moins une majuscule
                                        </div>
                                        <div id="req-digit" class="text-muted">
                                            <i class="fa-regular fa-circle me-1"></i> Au moins un chiffre
                                        </div>
                                        <div id="req-special" class="text-muted">
                                            <i class="fa-regular fa-circle me-1"></i> Au moins un caractère spécial
                                        </div>
                                    </div>
                                    <div id="password-error" class="text-danger small mt-2" style="display: none;"></div>
                                    @error('password')
                                        <span class="text-danger small">{{ $message }}</span>
                                    @enderror
                                </div>

                                <div class="form-group my-4">
                                    <label class="control-label" for="password_confirmation">Confirmer le mot de passe</label>
                                    <div class="input-group">
                                        <div class="input-group-addon">
                                            <i class="fa-regular fa-lock text-white-or-primary-color"></i>
                                        </div>
                                        <input type="password"
                                               class="form-control ps-2 @error('password_confirmation') is-invalid @enderror"
                                               id="password_confirmation"
                                               name="password_confirmation"
                                               required
                                               minlength="12"
                                               autocomplete="new-password"
                                               placeholder="Confirmez le mot de passe...">
                                        <button type="button"
                                                class="btn btn-outline-secondary toggle-password-visibility"
                                                data-target="#password_confirmation"
                                                aria-label="Afficher ou masquer la confirmation du mot de passe">
                                            <i class="fa-regular fa-eye"></i>
                                        </button>
                                    </div>
                                    <div id="password-confirmation-error" class="text-danger small mt-2" style="display: none;"></div>
                                    @error('password_confirmation')
                                        <span class="text-danger small">{{ $message }}</span>
                                    @enderror
                                </div>

                                <div class="form-group my-4 d-grid gap-2 d-sd-block">
                                    <button type="submit" class="btn btn-primary py-2 px-4 animated slideInDown">
                                        <i class="fa-regular fa-key me-2"></i>Réinitialiser le mot de passe
                                    </button>
                                    <button type="button" onclick="location.href='{{ route('login') }}'" class="btn text-primary py-2 px-4 animated slideInDown">
                                        <i class="fa-regular fa-arrow-left me-2"></i>Retour à la connexion
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const passwordInput = document.getElementById('password');
        const passwordConfirmationInput = document.getElementById('password_confirmation');
        const form = document.querySelector('.form-reset-password');
        const passwordErrorDiv = document.getElementById('password-error');
        const passwordConfirmationErrorDiv = document.getElementById('password-confirmation-error');
        
        // Flag pour désactiver temporairement la validation pendant le toggle
        let isTogglingPassword = false;
        
        const requirements = {
            length: document.getElementById('req-length'),
            lowercase: document.getElementById('req-lowercase'),
            uppercase: document.getElementById('req-uppercase'),
            digit: document.getElementById('req-digit'),
            special: document.getElementById('req-special')
        };
        
        function validatePassword(password) {
            const checks = {
                length: password.length >= 12,
                lowercase: /[a-z]/.test(password),
                uppercase: /[A-Z]/.test(password),
                digit: /\d/.test(password),
                special: /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/.test(password)
            };
            
            checks.valid = checks.length && checks.lowercase && checks.uppercase && checks.digit && checks.special;
            
            return checks;
        }
        
        function updateRequirementIcon(element, isValid) {
            if (!element) {
                return;
            }
            const icon = element.querySelector('i');
            if (!icon) {
                return;
            }
            if (isValid) {
                icon.classList.remove('fa-circle', 'fa-xmark');
                icon.classList.add('fa-check-circle', 'text-success');
                element.classList.remove('text-muted', 'text-danger');
                element.classList.add('text-success');
            } else {
                icon.classList.remove('fa-check-circle', 'fa-circle');
                icon.classList.add('fa-circle', 'text-muted');
                element.classList.remove('text-success', 'text-danger');
                element.classList.add('text-muted');
            }
        }
        
        function updatePasswordValidation() {
            const password = passwordInput.value.trim();
            const validation = validatePassword(password);
            
            updateRequirementIcon(requirements.length, validation.length);
            updateRequirementIcon(requirements.lowercase, validation.lowercase);
            updateRequirementIcon(requirements.uppercase, validation.uppercase);
            updateRequirementIcon(requirements.digit, validation.digit);
            updateRequirementIcon(requirements.special, validation.special);
            
            if (password.length > 0) {
                if (validation.valid) {
                    passwordInput.classList.remove('is-invalid');
                    passwordInput.classList.add('is-valid');
                    passwordErrorDiv.style.display = 'none';
                } else {
                    passwordInput.classList.remove('is-valid');
                    passwordInput.classList.add('is-invalid');
                    
                    const errors = [];
                    if (!validation.length) {
                        errors.push('Le mot de passe doit contenir au moins 12 caractères.');
                    }
                    if (!validation.lowercase) {
                        errors.push('Le mot de passe doit contenir au moins une lettre minuscule.');
                    }
                    if (!validation.uppercase) {
                        errors.push('Le mot de passe doit contenir au moins une lettre majuscule.');
                    }
                    if (!validation.digit) {
                        errors.push('Le mot de passe doit contenir au moins un chiffre.');
                    }
                    if (!validation.special) {
                        errors.push('Le mot de passe doit contenir au moins un caractère spécial (!@#$%^&*...).');
                    }
                    
                    passwordErrorDiv.textContent = errors.join(' ');
                    passwordErrorDiv.style.display = 'block';
                }
            } else {
                passwordInput.classList.remove('is-valid', 'is-invalid');
                passwordErrorDiv.style.display = 'none';
                Object.values(requirements).forEach(req => {
                    updateRequirementIcon(req, false);
                });
            }
            
            updatePasswordConfirmation();
        }
        
        function updatePasswordConfirmation() {
            // VÉRIFIER EN PREMIER - Ignorer complètement la validation si on est en train de toggle
            // Masquer le message immédiatement et sortir
            if (isTogglingPassword || 
                (passwordConfirmationInput && passwordConfirmationInput.hasAttribute('data-toggling'))) {
                if (passwordConfirmationErrorDiv) {
                    passwordConfirmationErrorDiv.style.display = 'none';
                    passwordConfirmationErrorDiv.textContent = '';
                }
                return;
            }
            
            // Ignorer aussi si la valeur n'a pas vraiment changé (juste le type d'input)
            if (passwordConfirmationInput && passwordConfirmationInput.hasAttribute('data-toggle-value')) {
                const toggleValue = passwordConfirmationInput.getAttribute('data-toggle-value');
                if (passwordConfirmationInput.value === toggleValue) {
                    if (passwordConfirmationErrorDiv) {
                        passwordConfirmationErrorDiv.style.display = 'none';
                    }
                    return;
                }
            }
            
            const password = passwordInput.value.trim();
            const confirmation = passwordConfirmationInput.value.trim();
            
            // Vérifier d'abord si les mots de passe correspondent - masquer l'erreur immédiatement si oui
            // NE JAMAIS AFFICHER LE MESSAGE si les mots de passe correspondent
            if (password === confirmation && password.length > 0) {
                if (passwordConfirmationErrorDiv) {
                    passwordConfirmationErrorDiv.style.display = 'none';
                    passwordConfirmationErrorDiv.textContent = '';
                }
                passwordConfirmationInput.classList.remove('is-invalid');
                passwordConfirmationInput.classList.add('is-valid');
                return;
            }
            
            const passwordValidation = validatePassword(password);
            
            if (confirmation.length > 0) {
                if (!passwordValidation.valid) {
                    passwordConfirmationInput.classList.remove('is-valid', 'is-invalid');
                    passwordConfirmationErrorDiv.style.display = 'none';
                } else if (password === confirmation) {
                    // Double vérification - ne jamais afficher le message si les mots de passe correspondent
                    passwordConfirmationInput.classList.remove('is-invalid');
                    passwordConfirmationInput.classList.add('is-valid');
                    passwordConfirmationErrorDiv.style.display = 'none';
                    passwordConfirmationErrorDiv.textContent = '';
                } else {
                    // NE PAS AFFICHER LE MESSAGE si on est en train de toggle (double vérification)
                    if (isTogglingPassword || 
                        (passwordConfirmationInput && passwordConfirmationInput.hasAttribute('data-toggling'))) {
                        if (passwordConfirmationErrorDiv) {
                            passwordConfirmationErrorDiv.style.display = 'none';
                        }
                        return;
                    }
                    // NE PAS AFFICHER LE MESSAGE si les mots de passe correspondent (triple vérification)
                    if (password === confirmation) {
                        if (passwordConfirmationErrorDiv) {
                            passwordConfirmationErrorDiv.style.display = 'none';
                        }
                        return;
                    }
                    passwordConfirmationInput.classList.remove('is-valid');
                    passwordConfirmationInput.classList.add('is-invalid');
                    passwordConfirmationErrorDiv.textContent = 'Les mots de passe ne correspondent pas.';
                    passwordConfirmationErrorDiv.style.display = 'block';
                }
            } else {
                passwordConfirmationInput.classList.remove('is-valid', 'is-invalid');
                passwordConfirmationErrorDiv.style.display = 'none';
            }
        }
        
        // Gestion de la visibilité des mots de passe (sans toucher à la validation)
        document.querySelectorAll('.toggle-password-visibility').forEach(function (btn) {
            btn.addEventListener('click', function (e) {
                e.preventDefault();
                e.stopPropagation();
                e.stopImmediatePropagation();
                
                const targetSelector = this.getAttribute('data-target');
                if (!targetSelector) {
                    return false;
                }
                const input = document.querySelector(targetSelector);
                if (!input) {
                    return false;
                }

                // Masquer le message SYNCHRONEMENT (pas de requestAnimationFrame)
                if (passwordConfirmationErrorDiv) {
                    passwordConfirmationErrorDiv.style.display = 'none';
                    passwordConfirmationErrorDiv.textContent = '';
                }
                if (input === passwordConfirmationInput) {
                    input.classList.remove('is-invalid');
                }
                
                // Activer le flag global IMMÉDIATEMENT pour désactiver la validation
                isTogglingPassword = true;
                
                // Stocker la valeur actuelle avant le toggle
                const currentValue = input.value;
                
                // Empêcher temporairement les événements de validation AVANT tout changement
                input.setAttribute('data-toggling', 'true');
                input.setAttribute('data-toggle-value', currentValue);
                
                const icon = this.querySelector('i');
                if (input.type === 'password') {
                    input.type = 'text';
                    if (icon) {
                        icon.classList.remove('fa-eye');
                        icon.classList.add('fa-eye-slash');
                    }
                } else {
                    input.type = 'password';
                    if (icon) {
                        icon.classList.remove('fa-eye-slash');
                        icon.classList.add('fa-eye');
                    }
                }
                
                // S'assurer que la valeur n'a pas changé (juste le type)
                if (input.value !== currentValue) {
                    input.value = currentValue;
                }
                
                // Masquer à nouveau le message SYNCHRONEMENT après le changement de type
                if (passwordConfirmationErrorDiv) {
                    passwordConfirmationErrorDiv.style.display = 'none';
                    passwordConfirmationErrorDiv.textContent = '';
                }
                
                // Réactiver après un délai pour laisser le temps aux événements de se terminer
                setTimeout(function() {
                    input.removeAttribute('data-toggling');
                    input.removeAttribute('data-toggle-value');
                    // Attendre encore un peu avant de réactiver la validation
                    setTimeout(function() {
                        isTogglingPassword = false;
                    }, 100);
                }, 300);
                
                return false;
            });
        });

        passwordInput.addEventListener('input', function() {
            if (!isTogglingPassword) {
                updatePasswordValidation();
            }
        });
        passwordConfirmationInput.addEventListener('input', function() {
            if (!isTogglingPassword) {
                updatePasswordValidation();
                updatePasswordConfirmation();
            }
        });
        
        // Empêcher la validation lors du blur si les mots de passe correspondent déjà
        passwordConfirmationInput.addEventListener('blur', function() {
            if (isTogglingPassword) {
                return;
            }
            const password = passwordInput.value.trim();
            const confirmation = passwordConfirmationInput.value.trim();
            // Si les mots de passe correspondent, ne pas déclencher la validation
            if (password === confirmation && password.length > 0) {
                if (passwordConfirmationErrorDiv) {
                    passwordConfirmationErrorDiv.style.display = 'none';
                }
                passwordConfirmationInput.classList.remove('is-invalid');
                passwordConfirmationInput.classList.add('is-valid');
                return;
            }
        });
        
        form.addEventListener('submit', function(e) {
            // Ignorer si on est en train de toggle
            if (isTogglingPassword) {
                e.preventDefault();
                return false;
            }
            
            // Masquer TOUTES les erreurs IMMÉDIATEMENT avant toute validation
            if (passwordConfirmationErrorDiv) {
                passwordConfirmationErrorDiv.style.display = 'none';
                passwordConfirmationErrorDiv.textContent = '';
            }
            if (passwordConfirmationInput) {
                passwordConfirmationInput.classList.remove('is-invalid', 'is-valid');
            }
            if (passwordErrorDiv) {
                passwordErrorDiv.style.display = 'none';
            }
            
            const password = passwordInput ? passwordInput.value.trim() : '';
            const confirmation = passwordConfirmationInput ? passwordConfirmationInput.value.trim() : '';
            const validation = validatePassword(password);
            
            if (!validation.valid) {
                e.preventDefault();
                if (passwordInput) {
                    passwordInput.classList.add('is-invalid');
                }
                // Ne pas appeler updatePasswordValidation() ici car cela déclenche updatePasswordConfirmation()
                // On met juste à jour l'affichage manuellement
                if (passwordErrorDiv) {
                    const errors = [];
                    if (!validation.length) {
                        errors.push('Le mot de passe doit contenir au moins 12 caractères.');
                    }
                    if (!validation.lowercase) {
                        errors.push('Le mot de passe doit contenir au moins une lettre minuscule.');
                    }
                    if (!validation.uppercase) {
                        errors.push('Le mot de passe doit contenir au moins une lettre majuscule.');
                    }
                    if (!validation.digit) {
                        errors.push('Le mot de passe doit contenir au moins un chiffre.');
                    }
                    if (!validation.special) {
                        errors.push('Le mot de passe doit contenir au moins un caractère spécial (!@#$%^&*...).');
                    }
                    passwordErrorDiv.textContent = errors.join(' ');
                    passwordErrorDiv.style.display = 'block';
                }
                if (passwordInput) {
                    passwordInput.focus();
                }
                return false;
            }
            
            // Comparaison stricte avec vérification de longueur
            const passwordsMatch = password === confirmation && password.length === confirmation.length;
            
            if (!passwordsMatch) {
                e.preventDefault();
                if (passwordConfirmationInput) {
                    passwordConfirmationInput.classList.add('is-invalid');
                    passwordConfirmationInput.classList.remove('is-valid');
                    passwordConfirmationInput.focus();
                }
                if (passwordConfirmationErrorDiv) {
                    passwordConfirmationErrorDiv.textContent = 'Les mots de passe ne correspondent pas.';
                    passwordConfirmationErrorDiv.style.display = 'block';
                }
                return false;
            }
            
            // Si tout est OK, masquer les erreurs et permettre la soumission
            if (passwordConfirmationErrorDiv) {
                passwordConfirmationErrorDiv.style.display = 'none';
            }
            if (passwordConfirmationInput) {
                passwordConfirmationInput.classList.remove('is-invalid');
                passwordConfirmationInput.classList.add('is-valid');
            }
            // Le formulaire peut être soumis maintenant
        });
    });
</script>
@endpush
@endsection