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

<ul class="nav nav-tabs nav-tabs-highlight">
    <li class="nav-item">
        <a href="#vertical-left-infos" class="nav-link active" data-toggle="tab">
            <i class="icon-info22 mr-2"></i> Infos basics
        </a>
    </li>
    <li class="nav-item">
        <a href="#vertical-left-password" class="nav-link" data-toggle="tab">
            <i class="icon-lock2 mr-2"></i> Mot de passe
        </a>
    </li>
    <li class="nav-item">
        <a href="#vertical-left-adresse" class="nav-link" data-toggle="tab">
            <i class="icon-map4 mr-2"></i> Adresse
        </a>
    </li>
    <li class="nav-item">
        <a href="#vertical-left-photo" class="nav-link" data-toggle="tab">
            <i class="icon-images2 mr-2"></i> Photo
        </a>
    </li>
</ul>

<div class="tab-content">
    <!-- Onglet Infos basics -->
    <div class="tab-pane fade show active" id="vertical-left-infos" role="tabpanel">
        {% include 'admin/security/users/commons/_form_tab_general_account.html.twig' with {'user': administrateur} %}
        <div class="row" style="display:flex; justify-content:space-between; align-items:center;">
            <div class="col-md-6">
                <div class="form-group">
                    <label class="form-label">Rôles</label>
                    <div class="custom-control custom-checkbox m-0">
                        {{ form_widget(form.roles) }}
                    </div>
                </div>
            </div>
            <div class="col-md-6" style="text-align:right!important;">
                {{ form_widget(form.user.enabled) }}
            </div>
        </div>

        <div class="text-right mt-3">
            <button type="button" class="btn btn-sm btn-secondary prev-tab" style="display:none;">
                <i class="icon-arrow-left8 mr-1"></i> Précédent
            </button>
            <button type="button" class="btn btn-sm btn-primary next-tab" data-next="#vertical-left-password">
                Suivant <i class="icon-arrow-right14 ml-1"></i>
            </button>
        </div>
    </div>

    <!-- Onglet Mot de passe -->
    <div class="tab-pane fade" id="vertical-left-password" role="tabpanel">
        {% include 'admin/security/users/commons/_form_tab_password_account.html.twig' with {'user': administrateur} %}

        <div class="text-right mt-3">
            <button type="button" class="btn btn-sm btn-secondary prev-tab" data-prev="#vertical-left-infos">
                <i class="icon-arrow-left8 mr-1"></i> Précédent
            </button>
            <button type="button" class="btn btn-sm btn-primary next-tab" data-next="#vertical-left-adresse">
                Suivant <i class="icon-arrow-right14 ml-1"></i>
            </button>
        </div>
    </div>

    <!-- Onglet Adresse -->
    <div class="tab-pane fade" id="vertical-left-adresse" role="tabpanel">
        {% include 'admin/security/users/commons/_form_tab_adresse_account.html.twig' %}

        <div class="text-right mt-3">
            <button type="button" class="btn btn-sm btn-secondary prev-tab" data-prev="#vertical-left-password">
                <i class="icon-arrow-left8 mr-1"></i> Précédent
            </button>
            <button type="button" class="btn btn-sm btn-primary next-tab" data-next="#vertical-left-photo">
                Suivant <i class="icon-arrow-right14 ml-1"></i>
            </button>
        </div>
    </div>

    <!-- Onglet Photo (dernier) -->
    <div class="tab-pane fade" id="vertical-left-photo" role="tabpanel">
        {% include 'admin/security/users/commons/_form_tab_images_account.html.twig' %}

        <div class="text-right mt-3">
            <button type="button" class="btn btn-sm btn-secondary prev-tab" data-prev="#vertical-left-adresse">
                <i class="icon-arrow-left8 mr-1"></i> Précédent
            </button>
           
                    
            <button type="submit" class="btn btn-sm btn-info">
                <a href="{{ path('admin.administrateurs.index') }}"> <span style="color:white">Annuler</span></a>
            </button>

            <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 pour navigation Next / Prev + Annuler ---------- #}
<script>
document.addEventListener('DOMContentLoaded', function () {
    // helper: activate tab by id (href nav and tab-pane)
    function activateTab(tabId) {
        // nav links
        document.querySelectorAll('.nav-tabs .nav-link').forEach(function (el) {
            if (el.getAttribute('href') === tabId) {
                el.classList.add('active');
            } else {
                el.classList.remove('active');
            }
        });
        // tab panes
        document.querySelectorAll('.tab-pane').forEach(function (pane) {
            if ('#' + pane.id === tabId) {
                pane.classList.add('show', 'active');
            } else {
                pane.classList.remove('show', 'active');
            }
        });
    }

    // next buttons
    document.querySelectorAll('.next-tab').forEach(function (btn) {
        btn.addEventListener('click', function () {
            const next = this.getAttribute('data-next');
            if (next) activateTab(next);
            // scroll to top of tab content if needed
            const pane = document.querySelector(next);
            if (pane) pane.scrollIntoView({ behavior: 'smooth', block: 'start' });
        });
    });

    // prev buttons
    document.querySelectorAll('.prev-tab').forEach(function (btn) {
        btn.addEventListener('click', function () {
            const prev = this.getAttribute('data-prev');
            if (prev) activateTab(prev);
        });
    });

    // nav link clicks (keeps behavior consistent if user clicks tabs)
    document.querySelectorAll('.nav-tabs .nav-link').forEach(function (link) {
        link.addEventListener('click', function (e) {
            e.preventDefault();
            const href = this.getAttribute('href');
            activateTab(href);
        });
    });

    // Cancel button: try jQuery/Bootstrap4 then Bootstrap5 then fallback to reset or redirect
    document.querySelectorAll('.cancel-btn').forEach(function(btn) {
        btn.addEventListener('click', function (e) {
            e.preventDefault();
            // 1) if inside a modal, try to close it:
            const modalEl = btn.closest('.modal');
            if (modalEl) {
                // If jQuery + bootstrap 4 available
                if (typeof jQuery !== 'undefined' && typeof jQuery(modalEl).modal === 'function') {
                    jQuery(modalEl).modal('hide');
                    return;
                }
                // If bootstrap 5 available
                if (typeof bootstrap !== 'undefined' && typeof bootstrap.Modal === 'function') {
                    let instance = bootstrap.Modal.getInstance(modalEl);
                    if (!instance) instance = new bootstrap.Modal(modalEl);
                    instance.hide();
                    return;
                }
                // Fallback: hide by removing show and active classes and hide backdrop if exists
                modalEl.classList.remove('show');
                modalEl.style.display = 'none';
                document.body.classList.remove('modal-open');
                const backdrop = document.querySelector('.modal-backdrop');
                if (backdrop) backdrop.remove();
                return;
            }

            // 2) if not a modal: try to reset the form
            const form = btn.closest('form');
            if (form) {
                form.reset();
                // optional: redirect to index page if you have a route, replace below with your own route path if needed
                // window.location.href = "{{ path('admin.administrateurs.index') }}";
                return;
            }

            // 3) last resort: reload page
            window.location.reload();
        });
    });
});
</script>
