{% extends 'manager/manager_base.html.twig' %}

{% block title %}Créer un nouvel utilisateur{% 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-plus me-2"></i> Création d'un nouvel utilisateur
        </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="card shadow mb-4">
            <div class="card-body">
                
                {# Ajout de l'ID pour le ciblage JS #}
                {{ form_start(form, {'attr': {'id': 'user-form'}}) }}
                
                <div class="row">
                    
                    {# COLONNE PRINCIPALE (8/12) : Informations Personnelles et de Sécurité #}
                    <div class="col-md-8">
                        
                        <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>
                        
                        {# Le RepeatedType a besoin d'être affiché champ par champ ou avec form_row #}
                        <div class="row">
                            <div class="col-md-6 mb-3">{{ form_row(form.password.first, {'label': 'Mot de passe'}) }}</div>
                            <div class="col-md-6 mb-3">{{ form_row(form.password.second, {'label': 'Confirmation du mot de passe'}) }}</div>
                        </div>

                    </div>
                    
                    {# COLONNE LATÉRALE (4/12) : Relations et Statut #}
                    <div class="col-md-4">
                        
                        <h4 class="mb-3 border-bottom pb-2 text-primary"><i class="fas fa-sitemap me-2"></i> Rôles & Structure</h4>
                        
                        {# 1. Carte pour les Relations (Profil et Hiérarchie) #}
                        <div class="card shadow-sm mb-4">
                            <div class="card-header bg-light">
                                <i class="fas fa-user-tag me-2 text-info"></i> Affectation
                            </div>
                            <div class="card-body">
                                <div class="mb-3">{{ form_row(form.profil) }}</div>
                                <div class="mb-3">{{ form_row(form.hierarchique) }}</div>
                            </div>
                        </div>
                        
                        {# 2. Carte pour le Statut du Compte #}
                        <div class="card shadow-sm mb-4">
                            <div class="card-header bg-light">
                                <i class="fas fa-power-off me-2 text-secondary"></i> Statut
                            </div>
                            <div class="card-body">
                                <div class="mb-3">{{ form_row(form.statut) }}</div>
                            </div>
                        </div>
                        
                    </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-user-check me-1"></i> Créer le compte
                    </button>
                    
                    <a href="{{ path('app_manager_user_index') }}" class="btn btn-secondary">
                        <i class="fas fa-arrow-left me-1"></i> Retour à la liste
                    </a>
                
                </div>
                
                {# Affiche le token CSRF et tout champ non rendu #}
                {{ form_rest(form) }}
                
                {{ form_end(form) }}
            </div>
        </div>
    </div>
{% endblock %}

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

            // Liste des champs obligatoires (basée sur UserType)
            const requiredFields = [
                '{{ form.civilite.vars.id }}',
                '{{ form.nom.vars.id }}',
                '{{ form.prenoms.vars.id }}',
                '{{ form.email.vars.id }}',
                '{{ form.password.first.vars.id }}',
                '{{ form.password.second.vars.id }}',
                '{{ form.profil.vars.id }}',
                '{{ form.hierarchique.vars.id }}',
            ];

            // Fonction utilitaire pour retirer les messages d'erreur
            const removeError = (field) => {
                field.classList.remove('is-invalid');
                const feedback = field.nextElementSibling;
                if (feedback && feedback.classList.contains('invalid-feedback')) {
                    feedback.remove();
                }
            };

            // Fonction utilitaire pour afficher un message d'erreur
            const displayError = (field, message) => {
                if (!field.classList.contains('is-invalid')) {
                    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 individuelle
            const validateField = (fieldId) => {
                const field = document.getElementById(fieldId);
                if (!field) return true; // Si le champ n'existe pas (ex: en modification sans changePassword)

                removeError(field);
                let isValid = true;
                const value = field.value.trim();
                const label = field.previousElementSibling ? field.previousElementSibling.textContent.replace('*', '').trim() : field.name;

                // 1. Validation de champ vide (pour TextType, ChoiceType, EntityType)
                if (value === '' || value === '0' || (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;
            };

            // Écouteur de soumission du formulaire
            form.addEventListener('submit', function(event) {
                let formIsValid = true;
                
                // Valider tous les champs requis
                requiredFields.forEach(fieldId => {
                    if (!validateField(fieldId)) {
                        formIsValid = false;
                    }
                });

                // Validation spécifique de l'égalité des mots de passe (RepeatedType)
                const passwordField = document.getElementById('{{ form.password.first.vars.id }}');
                const confirmationField = document.getElementById('{{ form.password.second.vars.id }}');

                if (passwordField && confirmationField) {
                    removeError(passwordField);
                    removeError(confirmationField);

                    const passValue = passwordField.value.trim();
                    const confValue = confirmationField.value.trim();

                    if (passValue === '' || confValue === '') {
                        if (passValue === '') displayError(passwordField, 'Le mot de passe est obligatoire.');
                        if (confValue === '') displayError(confirmationField, 'La confirmation est obligatoire.');
                        formIsValid = false;
                    } else if (passValue !== confValue) {
                        displayError(passwordField, 'Les mots de passe ne correspondent pas.');
                        displayError(confirmationField, 'Les mots de passe ne correspondent pas.');
                        formIsValid = false;
                    } else if (passValue.length < 6) { // Minimum length check, matching the backend suggestion
                        displayError(passwordField, 'Le mot de passe doit contenir au moins 6 caractères.');
                        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);

            // Écouteurs pour la validation en direct (optionnel mais recommandé)
            requiredFields.forEach(fieldId => {
                const field = document.getElementById(fieldId);
                if (field) {
                    field.addEventListener('blur', () => validateField(fieldId));
                    field.addEventListener('change', () => validateField(fieldId));
                }
            });
        });
    </script>
{% endblock %}