{{ 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 1 : Informations locataire -->
    <div class="tab-pane fade show active" id="vertical-left-infos">
        <div class="row">
            <div class="col-sm-4">
                <div class="form-group">
                    <label class="form-label">{{ form_label(form.civilite) }}</label>
                    {{ form_widget(form.civilite) }}
                    <a href="javascript:void(0)">{{ form_help(form.civilite) }}</a>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="form-group">
                    <label class="form-label">{{ form_label(form.typeLocataire) }}</label>
                    {{ form_widget(form.typeLocataire) }}
                    <a href="javascript:void(0)">{{ form_help(form.typeLocataire) }}</a>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="form-group">
                    <label class="form-label">{{ form_label(form.name) }}</label>
                    {{ form_widget(form.name) }}
                    <a href="javascript:void(0)">{{ form_help(form.name) }}</a>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-6 wraptypelacataite">
                <div class="form-group">
                    <label class="form-label">{{ form_label(form.raisonSociale) }}</label>
                    {{ form_widget(form.raisonSociale) }}
                    <a href="javascript:void(0)">{{ form_help(form.raisonSociale) }}</a>
                </div>
            </div>
            <div class="col-sm-6 wraptypelacataite">
                <div class="form-group">
                    <label class="form-label">{{ form_label(form.formeJuridique) }}</label>
                    {{ form_widget(form.formeJuridique) }}
                    <a href="javascript:void(0)">{{ form_help(form.formeJuridique) }}</a>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-6 wraptypelacataite">
                <div class="form-group">
                    <label class="form-label">{{ form_label(form.numeroSiren) }}</label>
                    {{ form_widget(form.numeroSiren) }}
                    <a href="javascript:void(0)">{{ form_help(form.numeroSiren) }}</a>
                </div>
            </div>
            <div class="col-sm-6 wraptypelacataite">
                <div class="form-group">
                    <label class="form-label">{{ form_label(form.numeroRegistreCommerce) }}</label>
                    {{ form_widget(form.numeroRegistreCommerce) }}
                    <a href="javascript:void(0)">{{ form_help(form.numeroRegistreCommerce) }}</a>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-4">
                <div class="form-group">
                    <label class="form-label">{{ form_label(form.adresses.phone) }}</label>
                    {{ form_widget(form.adresses.phone) }}
                    <a href="javascript:void(0)">{{ form_help(form.adresses.phone) }}</a>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="form-group">
                    <label class="form-label">{{ form_label(form.numeroCniPassport) }}</label>
                    {{ form_widget(form.numeroCniPassport) }}
                    <a href="javascript:void(0)">{{ form_help(form.numeroCniPassport) }}</a>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="form-group">
                    <label class="form-label">{{ form_label(form.fonction) }}</label>
                    {{ form_widget(form.fonction) }}
                    <a href="javascript:void(0)">{{ form_help(form.fonction) }}</a>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-6">
                {{ form_widget(form.isActif) }}
            </div>
            <div class="col-md-6">
                {{ form_widget(form.isOut) }}
            </div>
        </div>
    </div>

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

<div class="text-right mt-3">
    <button type="reset" class="btn btn-sm btn-default">Annuler</button> &nbsp;
    <button type="button" id="prevTabBtn" class="btn btn-sm btn-secondary d-none">
        <i class="icon-arrow-left"></i> Précédent
    </button>
    <button type="button" id="nextTabBtn" class="btn btn-sm btn-primary">
        <i class="icon-arrow-right"></i> Suivant
    </button>
    <button type="submit" id="sendLocataireBtn" class="btn btn-sm btn-primary d-none">
        <i class="icon-floppy-disk"></i> {{ button_label|default('Enregistrer') }}
    </button>
</div>

{{ form_end(form) }}

<script>
    // Gestion des onglets et boutons
    const tabs = document.querySelectorAll('.nav-link');
    const tabPanes = document.querySelectorAll('.tab-pane');
    const prevBtn = document.getElementById('prevTabBtn');
    const nextBtn = document.getElementById('nextTabBtn');
    const submitBtn = document.getElementById('sendLocataireBtn');

    const showTab = (index) => {
        tabPanes.forEach((pane, i) => {
            pane.classList.toggle('show', i === index);
            pane.classList.toggle('active', i === index);
        });
        tabs.forEach((tab, i) => tab.classList.toggle('active', i === index));

        // Gestion des boutons
        prevBtn.classList.toggle('d-none', index === 0);
        nextBtn.classList.toggle('d-none', index === tabPanes.length - 1);
        submitBtn.classList.toggle('d-none', index !== tabPanes.length - 1);
    }

    let currentIndex = 0;

    nextBtn.addEventListener('click', () => {
        if (currentIndex < tabPanes.length - 1) {
            currentIndex++;
            showTab(currentIndex);
        }
    });

    prevBtn.addEventListener('click', () => {
        if (currentIndex > 0) {
            currentIndex--;
            showTab(currentIndex);
        }
    });

    // Initialisation
    showTab(currentIndex);

    // Ton code existant pour typeLocataire, isActif, isOut...
    const typeLocataire = document.getElementById('locataires_typeLocataire')
    const checkTypeLocataireFields = (event) => {
        let $this = event.currentTarget
        const wrappers = document.querySelectorAll(`.`+$this.dataset.typelacataite)
        if (parseInt($this.value) === 1){
            wrappers.forEach(wrapper => wrapper.style.display = 'inline-block')
        }else{
            wrappers.forEach(wrapper => wrapper.style.display = 'none')
        }
    }
    typeLocataire.addEventListener('change', checkTypeLocataireFields)

    const isActif = document.getElementById('locataires_isActif')
    const isOut = document.getElementById('locataires_isOut')

    const checkIsActif = (event) => { isOut.checked = !event.currentTarget.checked; }
    const checkIsOut = (event) => { isActif.checked = !event.currentTarget.checked; }

    isActif.addEventListener('change', checkIsActif)
    isOut.addEventListener('change', checkIsOut)
</script>
