{% if locataire is defined and locataire.id is not null %}
    {{ form_start(form, {'action': path('admin.acteurs.locataires.edit', {'id': locataire.id}), 'method': 'POST'}) }}
{% else %}
    {{ form_start(form, {'action': path('admin.acteurs.locataires.new'), 'method': 'POST'}) }}
{% endif %}

{{ alert_infos('NB!', 'Tous les champs comportant un (*) sont obligatoires.') }}

<ul class="nav nav-tabs nav-tabs-highlight">
    <li class="nav-item">
        <a href="#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="#adresses" class="nav-link" data-toggle="tab">
            <i class="icon-address-book mr-2"></i> Adresses
        </a>
    </li>
</ul>

<div class="tab-content mt-3">
    <div class="tab-pane fade show active" id="infos">
        <div class="row">
            <div class="col-sm-4">
                {{ form_row(form.civilite) }}
            </div>
            <div class="col-sm-4">
                {{ form_row(form.typeLocataire, {'attr': {'data-typelocataire': 'wraptypelacataite'}}) }}
            </div>
            <div class="col-sm-4">
                {{ form_row(form.name) }}
            </div>
        </div>

        {# Champs liés au type Entreprise #}
        <div class="row wraptypelacataite">
            <div class="col-sm-6">
                {{ form_row(form.raisonSociale) }}
            </div>
            <div class="col-sm-6">
                {{ form_row(form.formeJuridique) }}
            </div>
        </div>
        <div class="row wraptypelacataite">
            <div class="col-sm-6">
                {{ form_row(form.numeroSiren) }}
            </div>
            <div class="col-sm-6">
                {{ form_row(form.numeroRegistreCommerce) }}
            </div>
        </div>

        <div class="row">
            <div class="col-sm-4">
                {{ form_row(form.adresses.phone) }}
            </div>
            <div class="col-sm-4">
                {{ form_row(form.numeroCniPassport) }}
            </div>
            <div class="col-sm-4">
                {{ form_row(form.fonction) }}
            </div>
        </div>

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

    <div class="tab-pane fade" id="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>
    <button type="submit" class="btn btn-sm btn-primary">
        <i class="icon-floppy-disk"></i> {{ button_label|default('Enregistrer') }}
    </button>
</div>

{{ form_end(form) }}

<style>
    /* Champs entreprise masqués par défaut */
    .wraptypelacataite { display: none; }
</style>

<script>
document.addEventListener('DOMContentLoaded', () => {
    // 1️⃣ Champs type locataire
    const typeSelect = document.getElementById('locataires_typeLocataire');
    if(typeSelect) {
        const toggleFields = () => {
            const wrappers = document.querySelectorAll(`.${typeSelect.dataset.typelocataire}`);
            wrappers.forEach(wrapper => {
                wrapper.style.display = (parseInt(typeSelect.value) === 1) ? 'flex' : 'none';
            });
        };
        toggleFields(); // initialisation
        typeSelect.addEventListener('change', toggleFields);
    }

    // 2️⃣ Toggle isActif / isOut
    const isActif = document.getElementById('locataires_isActif');
    const isOut = document.getElementById('locataires_isOut');

    const syncActifOut = () => {
        if(isActif && isOut) {
            if(isActif.checked) isOut.checked = false;
            else if(isOut.checked) isActif.checked = false;
        }
    };

    if(isActif && isOut){
        isActif.addEventListener('change', syncActifOut);
        isOut.addEventListener('change', syncActifOut);
        syncActifOut(); // initialisation
    }
});
</script>
