{{ form_start(form, {'attr': {'id': 'locataire_form'}}) }}
{{ 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> Informations locataire
        </a>
    </li>
    <li class="nav-item">
        <a href="#vertical-left-adresses" class="nav-link" data-toggle="tab">
            <i class="icon-address-book mr-2"></i> Adresses
        </a>
    </li>
</ul>

<div class="tab-content">
    <!-- Onglet Infos -->
    <div class="tab-pane fade show active" id="vertical-left-infos">
        <div class="row">
            <!-- Tes champs ici ... -->
        </div>

        <div class="text-right mt-3">
            <button type="button" class="btn btn-sm btn-primary next-tab" data-next="#vertical-left-adresses">
                Suivant <i class="icon-arrow-right14 ml-1"></i>
            </button>
        </div>
    </div>

    <!-- Onglet Adresses (dernier) -->
    <div class="tab-pane fade" id="vertical-left-adresses">
        {% include 'admin/acteurs/commons/_address_form.html.twig' with {'form': form} %}

        <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>

            <a href="" class="btn btn-sm btn-info">
                <i class="icon-cross2"></i> Annuler
            </a>

            <button type="submit" id="sendLocataireBtn" 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 () {
    function activateTab(tabId) {
        document.querySelectorAll('.nav-tabs .nav-link').forEach(el => el.classList.toggle('active', el.getAttribute('href') === tabId));
        document.querySelectorAll('.tab-pane').forEach(pane => {
            pane.classList.toggle('show', '#' + pane.id === tabId);
            pane.classList.toggle('active', '#' + pane.id === tabId);
        });
    }

    document.querySelectorAll('.next-tab').forEach(btn => {
        btn.addEventListener('click', function () {
            const next = this.dataset.next;
            if (next) activateTab(next);
        });
    });

    document.querySelectorAll('.prev-tab').forEach(btn => {
        btn.addEventListener('click', function () {
            const prev = this.dataset.prev;
            if (prev) activateTab(prev);
        });
    });

    document.querySelectorAll('.nav-tabs .nav-link').forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            activateTab(this.getAttribute('href'));
        });
    });
});
</script>
