{% extends 'agent/agent_base.html.twig' %}

{% block title %}Modifier l'utilisateur : {{ user.nom }} {{ user.prenoms }}{% endblock %}

{% block content %}
    <div class="container-fluid">
        
        {# --- En-tête de la Page --- #}
        <h3 class="mb-4 text-body-emphasis">
            <i class="fas fa-user-edit me-2"></i> 
            Modification de l'utilisateur : 
            <strong class="text-primary">{{ user.nom }} {{ user.prenoms }}</strong>
        </h3>
        
        {# --- Affichage des messages flash (Style uniforme) --- #}
        {% for label, messages in app.flashes %}
            {% for message in messages %}
                <div class="alert alert-{{ label }} alert-dismissible fade show" role="alert">
                    {{ message|raw }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            {% endfor %}
        {% endfor %}

        {# --- Corps du Formulaire dans une Carte Structurée --- #}
        <div class="row">
        <div class="col-md-2"></div>
        <div class="col-md-8">
        <div class="card shadow mb-4">
            <div class="card-body">
                
                {# Ajout de l'ID pour le ciblage JS #}
                {{ form_start(form, {'attr': {'id': 'user-form', 'novalidate': 'novalidate'}}) }}
                
                <div class="">
                    
                    {# COLONNE PRINCIPALE (8/12) : Informations Personnelles et de Sécurité #}
                    <div class="">
                        
                        <h4 class="mb-3 border-bottom pb-2 text-primary"><i class="fas fa-id-card me-2"></i> Informations Personnelles</h4>
                        
                        <div class="row">
                            <div class="col-md-4 mb-3">{{ form_row(form.civilite) }}</div>
                            <div class="col-md-4 mb-3">{{ form_row(form.nom) }}</div>
                            <div class="col-md-4 mb-3">{{ form_row(form.prenoms) }}</div>
                        </div>
                        <div class="mb-3">{{ form_row(form.telephone) }}</div>
                        
                        <h4 class="mb-3 border-bottom pb-2 mt-4 text-primary"><i class="fas fa-lock me-2"></i> Sécurité</h4>
                        
                        <div class="mb-3">{{ form_row(form.email) }}</div>
                        
                        {# Bloc de gestion du changement de mot de passe #}
                        {% if form.changePassword is defined %}
                            <div class="mb-3">{{ form_row(form.changePassword, {'label': 'Changer le mot de passe'}) }}</div>

                            {# Les champs de mot de passe sont affichés ici, ils seront invisibles par défaut #}
                            <div id="passwordFields" style="display: none;"> 
                                <div class="row">
                                    <div class="col-md-6 mb-3">{{ form_row(form.password.first, {'label': 'Nouveau mot de passe'}) }}</div>
                                    <div class="col-md-6 mb-3">{{ form_row(form.password.second, {'label': 'Confirmation'}) }}</div>
                                </div>
                            </div>
                        {% endif %}

                    </div>
                    
                    
                    
                </div>

                <hr class="mt-4">
                
                {# Boutons d'action centrés #}
                <div class="d-flex justify-content-center">
                    
                    <button type="submit" class="btn btn-success me-2">
                        <i class="fas fa-save me-1"></i> Enregistrer les modifications
                    </button>
                    
                    <a href="{{ path('app_agent_compte_index') }}" class="btn btn-secondary me-2">
                        <i class="fas fa-arrow-left me-1"></i> Retour à mon compte
                    </a>

                    
                
                </div>
                
                {# Affiche le token CSRF et tout champ non rendu #}
                {{ form_rest(form) }}
                
                {{ form_end(form) }}
            </div>
        </div>
        </div>
        </div>
    </div>
{% endblock %}

{# ============================================================================== #}
{#                             BLOC JAVASCRIPT                                    #}
{# ============================================================================== #}
{% block javascripts %}
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const form = document.getElementById('user-form');
            if (!form) return;

            // Liste des champs obligatoires, hors mot de passe
            const requiredFields = [
                '{{ form.civilite.vars.id }}',
                '{{ form.nom.vars.id }}',
                '{{ form.prenoms.vars.id }}',
                '{{ form.email.vars.id }}',
                
            ];

            const changePasswordCheckbox = document.getElementById('{{ form.changePassword.vars.id }}');
            const passwordFieldsContainer = document.getElementById('passwordFields');
            const passwordField = document.getElementById('{{ form.password.first.vars.id }}');
            const confirmationField = document.getElementById('{{ form.password.second.vars.id }}');

            // --- Fonctions Utilitaires ---

            const removeError = (field) => {
                field.classList.remove('is-invalid');
                const feedback = field.nextElementSibling;
                if (feedback && feedback.classList.contains('invalid-feedback')) {
                    feedback.remove();
                }
            };

            const displayError = (field, message) => {
                removeError(field); // On retire l'ancienne erreur avant d'afficher la nouvelle
                field.classList.add('is-invalid');
                const feedback = document.createElement('div');
                feedback.classList.add('invalid-feedback');
                feedback.textContent = message;
                field.parentNode.insertBefore(feedback, field.nextSibling);
            };

            // Fonction de validation pour les champs simples
            const validateField = (fieldId) => {
                const field = document.getElementById(fieldId);
                if (!field) return true;

                removeError(field);
                let isValid = true;
                const value = field.value.trim();
                // Tente d'obtenir le label ou utilise le nom du champ comme fallback
                const labelElement = document.querySelector(`label[for="${fieldId}"]`);
                const label = labelElement ? labelElement.textContent.replace('*', '').trim() : field.name;


                // 1. Validation de champ vide (pour TextType, ChoiceType, EntityType)
                if (value === '' || (field.tagName === 'SELECT' && field.value === '')) {
                    displayError(field, `Le champ "${label}" est obligatoire.`);
                    isValid = false;
                } 
                
                // 2. Validation spécifique de l'email
                else if (fieldId === '{{ form.email.vars.id }}' && !/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(value)) {
                     displayError(field, `Veuillez entrer une adresse email valide.`);
                     isValid = false;
                }

                return isValid;
            };

            // Fonction de validation pour les mots de passe
            const validatePasswordFields = () => {
                let isValid = true;

                if (!passwordField || !confirmationField) return true; // Si les champs n'existent pas

                removeError(passwordField);
                removeError(confirmationField);

                const passValue = passwordField.value.trim();
                const confValue = confirmationField.value.trim();
                
                // Si la case à cocher n'est PAS cochée, les champs ne sont pas requis
                if (changePasswordCheckbox && !changePasswordCheckbox.checked) {
                    return true;
                }

                // Validation pour les champs requis (si la case est cochée)
                if (passValue === '' || confValue === '') {
                    if (passValue === '') displayError(passwordField, 'Le nouveau mot de passe est obligatoire.');
                    if (confValue === '') displayError(confirmationField, 'La confirmation est obligatoire.');
                    isValid = false;
                } else if (passValue !== confValue) {
                    displayError(passwordField, 'Les mots de passe ne correspondent pas.');
                    displayError(confirmationField, 'Les mots de passe ne correspondent pas.');
                    isValid = false;
                } else if (passValue.length < 6) { 
                    displayError(passwordField, 'Le mot de passe doit contenir au moins 6 caractères.');
                    isValid = false;
                }

                return isValid;
            };


            // --- Logique d'Affichage du Mot de Passe ---
            if (changePasswordCheckbox && passwordFieldsContainer) {
                const toggleFields = () => {
                    // Afficher/Masquer le conteneur des mots de passe
                    passwordFieldsContainer.style.display = changePasswordCheckbox.checked ? 'block' : 'none';
                    
                    // Optionnel : Retirer les erreurs si on masque les champs
                    if (!changePasswordCheckbox.checked) {
                         removeError(passwordField);
                         removeError(confirmationField);
                         passwordField.value = '';
                         confirmationField.value = '';
                    }
                };
                
                // État initial (le script dans le Twig fait déjà ça, mais on le garde par sécurité)
                toggleFields();
                
                // Écouteur pour la case à cocher
                changePasswordCheckbox.addEventListener('change', toggleFields);
            }
            
            // --- Écouteur de Soumission du Formulaire ---
            form.addEventListener('submit', function(event) {
                let formIsValid = true;
                
                // 1. Validation des champs d'information obligatoires
                requiredFields.forEach(fieldId => {
                    if (!validateField(fieldId)) {
                        formIsValid = false;
                    }
                });

                // 2. Validation conditionnelle des mots de passe
                if (!validatePasswordFields()) {
                    formIsValid = false;
                }
                
                // Empêcher la soumission si la validation échoue
                if (!formIsValid) {
                    event.preventDefault();
                    event.stopPropagation();
                    // Faire défiler vers la première erreur
                    const firstInvalid = form.querySelector('.is-invalid');
                    if (firstInvalid) {
                        firstInvalid.scrollIntoView({ behavior: 'smooth', block: 'center' });
                    }
                }
            }, false);

            // --- Validation en Direct (Live Validation) ---
            
            // Pour les champs simples
            requiredFields.forEach(fieldId => {
                const field = document.getElementById(fieldId);
                if (field) {
                    field.addEventListener('blur', () => validateField(fieldId));
                    field.addEventListener('change', () => validateField(fieldId));
                }
            });

            // Pour les champs de mot de passe (valider les deux à chaque changement)
            if (passwordField && confirmationField) {
                passwordField.addEventListener('blur', validatePasswordFields);
                confirmationField.addEventListener('blur', validatePasswordFields);
                passwordField.addEventListener('input', validatePasswordFields);
                confirmationField.addEventListener('input', validatePasswordFields);
            }
        });
    </script>
{% endblock %}