{% form_theme form 'bootstrap_5_layout.html.twig' %}

{{ form_start(form, {'attr': {'class': 'needs-validation', 'novalidate': 'novalidate'}}) }}

    {# Message d'alerte global #}
    {% if not form.vars.valid %}
        <div class="alert alert-danger d-flex align-items-center shadow-sm" role="alert">
            <i class="fas fa-exclamation-circle me-2"></i>
            <div>
                Certains champs sont incorrects. Veuillez vérifier les informations saisies.
            </div>
        </div>
    {% endif %}

    <div class="row g-3">
        {# --- PHOTO DE PROFIL --- #}
        <div class="col-md-12 mb-2">
            <div class="d-flex align-items-center p-3 border rounded bg-light bg-opacity-50">
                <div class="me-4 position-relative">
                    <div class="rounded-circle border border-2 border-white shadow-sm d-flex align-items-center justify-content-center bg-white" 
                         style="width: 90px; height: 90px; overflow: hidden; flex-shrink: 0;">
                        {% if user.photo %}
                            <img src="{{ asset('uploads/users/photo/' ~ user.photo) }}" 
                                 id="preview-img" class="img-fluid w-100 h-100" style="object-fit: cover;">
                            <i id="preview-icon" class="fas fa-user fa-3x text-light d-none"></i>
                        {% else %}
                            <img src="" id="preview-img" class="img-fluid w-100 h-100 d-none" style="object-fit: cover;">
                            <i id="preview-icon" class="fas fa-user fa-3x text-muted"></i>
                        {% endif %}
                    </div>
                </div>
                <div class="flex-grow-1">
                    <label class="fw-bold small text-uppercase text-muted mb-1 text-primary d-block">Photo de profil</label>
                    {{ form_widget(form.photo, {
                        'attr': {
                            'class': 'form-control form-control-sm',
                            'onchange': 'handleImagePreview(this)'
                        }
                    }) }}
                    
                    {# CORRECTION CASE SUPPRIMER PHOTO #}
                    {% if form.delete_photo is defined %}
                        <div class="form-check mt-2">
                            {{ form_widget(form.delete_photo, { 'attr': {'class': 'form-check-input'} }) }}
                            {{ form_label(form.delete_photo, null, { 'label_attr': {'class': 'form-check-label small text-danger fw-bold'} }) }}
                        </div>
                    {% endif %}
                    
                    <div class="invalid-feedback">{{ form_errors(form.photo) }}</div>
                </div>
            </div>
        </div>

        {# --- IDENTITÉ --- #}
        <div class="col-md-2">{{ form_row(form.civilite) }}</div>
        <div class="col-md-5">{{ form_row(form.nom) }}</div>
        <div class="col-md-5">{{ form_row(form.prenoms) }}</div>

        {# --- CONTACT --- #}
        <div class="col-md-6">{{ form_row(form.email) }}</div>
        <div class="col-md-6">{{ form_row(form.telephone) }}</div>

        {# --- INFOS COMPLÉMENTAIRES --- #}
        <div class="col-md-12">{{ form_row(form.adresse) }}</div>

        {# --- SÉCURITÉ (PASSWORD AVEC TOGGLE) --- #}
        <div class="col-md-12 mt-2">
            <div class="p-3 border rounded bg-light shadow-sm">
                <div class="d-flex justify-content-between align-items-center mb-2">
                    <label class="fw-bold small text-muted text-uppercase mb-0">
                        <i class="fas fa-key me-2"></i>Sécurité du compte
                    </label>
                    
                    {# CORRECTION CASE CHANGER MOT DE PASSE (Switch) #}
                    {% if form.change_password is defined %}
                        <div class="form-check form-switch mb-0">
                            {{ form_widget(form.change_password, {
                                'attr': {
                                    'class': 'form-check-input', 
                                    'onchange': 'togglePasswordFields(this)'
                                }
                            }) }}
                            <label class="form-check-label small fw-bold text-primary ms-1" for="{{ form.change_password.vars.id }}">
                                Modifier le mot de passe
                            </label>
                        </div>
                    {% endif %}
                </div>

                {# Correction du style inline initial selon l'état de la checkbox #}
                {% set displayStyle = (form.change_password is defined and not form.change_password.vars.checked) ? 'none' : 'block' %}
                {% if form.change_password is not defined %}{% set displayStyle = 'block' %}{% endif %}

                <div id="password-fields-container" style="display: {{ displayStyle }};">
                    <div class="row">
                        <div class="col-md-6">
                            {{ form_row(form.password.first, {'label': 'Nouveau mot de passe'}) }}
                        </div>
                        <div class="col-md-6">
                            {{ form_row(form.password.second, {'label': 'Confirmer le mot de passe'}) }}
                        </div>
                    </div>
                    <small class="text-muted"><i class="fas fa-info-circle me-1"></i>Le mot de passe doit contenir au moins 6 caractères.</small>
                </div>
                
                {% if form.change_password is not defined %}
                    <small class="text-muted d-block mt-2">Par défaut : Luxim2026</small>
                {% endif %}
            </div>
        </div>

        {# --- ADMINISTRATION --- #}
        {% if form.roles is defined or form.poste is defined %}
            <div class="col-12 mt-3">
                <div class="p-4 border border-primary border-opacity-25 rounded bg-primary bg-opacity-10 shadow-sm">
                    <label class="fw-bold small text-primary mb-3 text-uppercase">
                        <i class="fas fa-user-shield me-2"></i>Administration & Hiérarchie
                    </label>
                    <div class="row g-3">
                        {% if form.poste is defined %}<div class="col-md-6">{{ form_row(form.poste) }}</div>{% endif %}
                        {% if form.responsable is defined %}<div class="col-md-6">{{ form_row(form.responsable) }}</div>{% endif %}
                        {% if form.roles is defined %}<div class="col-md-8">{{ form_row(form.roles) }}</div>{% endif %}
                        {% if form.isActive is defined %}<div class="col-md-4">{{ form_row(form.isActive) }}</div>{% endif %}
                    </div>
                </div>
            </div>
        {% endif %}

        <div class="col-md-6">{{ form_row(form.typePieceIdentite) }}</div>
        <div class="col-md-6">{{ form_row(form.numeroPieceIdentite) }}</div>
    </div>

    <div class="mt-4 pt-3 border-top text-end">
        <button type="button" class="btn btn-outline-secondary px-4 me-2" data-bs-dismiss="modal">Annuler</button>
        <button type="submit" class="btn btn-primary px-5 shadow">
            <i class="fas fa-save me-2"></i>Enregistrer
        </button>
    </div>

    {{ form_rest(form) }}
{{ form_end(form) }}

<script>
/**
 * Aligne l'état visuel du conteneur password au chargement (pour les retours d'erreurs)
 */
document.addEventListener('DOMContentLoaded', function() {
    const cb = document.querySelector('input[id$="_change_password"]');
    if (cb) togglePasswordFields(cb);
});

function togglePasswordFields(checkbox) {
    const container = document.getElementById('password-fields-container');
    if (container) {
        if (checkbox.checked) {
            container.style.display = 'block';
            // On ne focus que si c'est une action utilisateur (pas au chargement)
            if (event && event.type === 'change') {
                const firstInput = container.querySelector('input');
                if(firstInput) firstInput.focus();
            }
        } else {
            container.style.display = 'none';
            // Optionnel : vider les champs si on décoche
            if (event && event.type === 'change') {
                container.querySelectorAll('input').forEach(i => i.value = '');
            }
        }
    }
}

function handleImagePreview(input) {
    if (input.files && input.files[0]) {
        const reader = new FileReader();
        reader.onload = function(e) {
            const previewImg = document.getElementById('preview-img');
            const previewIcon = document.getElementById('preview-icon');
            previewImg.src = e.target.result;
            previewImg.classList.remove('d-none');
            if (previewIcon) previewIcon.classList.add('d-none');
        }
        reader.readAsDataURL(input.files[0]);
    }
}
</script>