

{% 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="#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">
    <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.type_locataire) }}</label>
                    {{ form_widget(form.type_locataire) }}
                    <a href="javascript:void(0)">{{ form_help(form.type_locataire) }}</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>

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

<script>
    const typeLocataire = document.getElementById('locataires_type_locataire')
    const checkTypeLocataireFields = (event) => {
        let $this = event.currentTarget
        const wrappers = document.querySelectorAll(`.`+$this.dataset.typelacataite)
        if (parseInt($this.value) === 1){
            wrappers.forEach(wrapper => {
                //wrapper.querySelector('input').setAttribute('required', 'required')
                wrapper.style.display = 'inline-block'
            })
        }else{
            wrappers.forEach(wrapper => {
                //wrapper.querySelector('input').removeAttribute('required')
                wrapper.style.display = 'none'
            })
        }
    }
    typeLocataire.addEventListener('change', checkTypeLocataireFields)

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

    const checkIsActif = (event) => {
        let $this = event.currentTarget
        isOut.checked = !$this.checked;
    }
    isActif.addEventListener('change', checkIsActif)

    const checkIsOut = (event) => {
        let $this = event.currentTarget
        isActif.checked = !$this.checked;
    }
    isOut.addEventListener('change', checkIsOut)

</script>