{{ form_start(form, {'action': path('admin.utilisateurs.new'), 'method': 'POST'}) }}
{{ alert_infos('NB!', 'Tous les champs comportant un (*) sont obligatoires.') }}

<ul class="nav nav-tabs nav-tabs-highlight">
    <li class="nav-item">
        <a href="#tab-infos" class="nav-link active" data-toggle="tab">Infos basics</a>
    </li>
    <li class="nav-item">
        <a href="#tab-password" class="nav-link" data-toggle="tab">Mot de passe</a>
    </li>
    <li class="nav-item">
        <a href="#tab-adresse" class="nav-link" data-toggle="tab">Adresse</a>
    </li>
    <li class="nav-item">
        <a href="#tab-photo" class="nav-link" data-toggle="tab">Photo</a>
    </li>
</ul>

<div class="tab-content p-3 border border-top-0">
    <!-- TAB INFOS BASICS -->
    <div class="tab-pane fade show active" id="tab-infos">
        {% include 'admin/security/users/commons/_form_tab_general_account.html.twig' with {'user': utilisateur} %}
        <div class="form-group mt-3">
            {{ form_widget(form.user.enabled) }}
        </div>

        <div class="d-flex justify-content-between mt-3">
            <div></div>
            <button type="button" class="btn btn-primary next-tab">Suivant <i class="icon-arrow-right7"></i></button>
        </div>
    </div>

    <!-- TAB MOT DE PASSE -->
    <div class="tab-pane fade" id="tab-password">
        {% include 'admin/security/users/commons/_form_tab_password_account.html.twig' %}
        <div class="d-flex justify-content-between mt-3">
            <button type="button" class="btn btn-secondary prev-tab"><i class="icon-arrow-left7"></i> Précédent</button>
            <button type="button" class="btn btn-primary next-tab">Suivant <i class="icon-arrow-right7"></i></button>
        </div>
    </div>

    <!-- TAB ADRESSE -->
    <div class="tab-pane fade" id="tab-adresse">
        {% include 'admin/security/users/commons/_form_tab_adresse_account.html.twig' %}
        <div class="d-flex justify-content-between mt-3">
            <button type="button" class="btn btn-secondary prev-tab"><i class="icon-arrow-left7"></i> Précédent</button>
            <button type="button" class="btn btn-primary next-tab">Suivant <i class="icon-arrow-right7"></i></button>
        </div>
    </div>

    <!-- TAB PHOTO -->
    <div class="tab-pane fade" id="tab-photo">
        {% include 'admin/security/users/commons/_form_tab_images_account.html.twig' %}
        
         <div class="text-right mt-3">
            <button type="button" class="btn btn-secondary prev-tab"><i class="icon-arrow-left7"></i> Précédent</button>
                <a href="{{ path('admin.utilisateurs.index') }}" class="btn btn-sm btn-info">
                    <i class="icon-cross2"></i> Annuler
                </a>
            <button type="submit" class="btn btn-sm btn-primary">
                <i class="icon-floppy-disk"></i> {{ button_label|default('Enregistrer') }}
            </button>
        </div>
    </div>
</div>

{{ form_end(form) }}

<script>
document.addEventListener('DOMContentLoaded', function () {
    const nextButtons = document.querySelectorAll('.next-tab');
    const prevButtons = document.querySelectorAll('.prev-tab');

    nextButtons.forEach(btn => {
        btn.addEventListener('click', () => {
            const current = document.querySelector('.tab-pane.active');
            const next = current.nextElementSibling;
            if(next && next.classList.contains('tab-pane')) {
                current.classList.remove('show', 'active');
                next.classList.add('show', 'active');
                const nextTabLink = document.querySelector(`a[href="#${next.id}"]`);
                document.querySelectorAll('.nav-link').forEach(link => link.classList.remove('active'));
                nextTabLink.classList.add('active');
            }
        });
    });

    prevButtons.forEach(btn => {
        btn.addEventListener('click', () => {
            const current = document.querySelector('.tab-pane.active');
            const prev = current.previousElementSibling;
            if(prev && prev.classList.contains('tab-pane')) {
                current.classList.remove('show', 'active');
                prev.classList.add('show', 'active');
                const prevTabLink = document.querySelector(`a[href="#${prev.id}"]`);
                document.querySelectorAll('.nav-link').forEach(link => link.classList.remove('active'));
                prevTabLink.classList.add('active');
            }
        });
    });
});
</script>
