{{ form_start(form) }}
<fieldset>
    <legend>Association</legend>
    <div class="row">
        <div class="col-12">
            {{ form_label(form.name) }}
            {{ form_widget(form.name) }}
        </div>
    </div>
    <div class="row">
        <div class="col-3">
            {{ form_label(form.address) }}
            {{ form_widget(form.address) }}
        </div>
        <div class="col-3">
            {{ form_label(form.postal_code) }}
            {{ form_widget(form.postal_code) }}
        </div>
        <div class="col-3">
            {{ form_label(form.city) }}
            {{ form_widget(form.city) }}
        </div>
        <div class="col-3">
            {{ form_label(form.country) }}
            {{ form_widget(form.country) }}
        </div>
    </div>
    <div class="row">
        <div class="col-6">
            {{ form_label(form.identification_number) }}
            {{ form_widget(form.identification_number) }}
        </div>
        <div class="col-6">
            {{ form_label(form.siren) }}
            {{ form_widget(form.siren) }}
        </div>
    </div>
    <div class="row">
        <div class="col-6">
            {{ form_label(form.phone) }}
            {{ form_widget(form.phone) }}
        </div>
        <div class="col-6">
            {{ form_label(form.mail) }}
            {{ form_widget(form.mail) }}
        </div>
    </div>
</fieldset>
<fieldset>
    <legend>Président/Présidente</legend>
    <div class="row">
        <div class="col-2">
            {{ form_label(form.president_sex) }}
            {{ form_widget(form.president_sex) }}
        </div>
        <div class="col-7">
            {{ form_label(form.president_name) }}
            {{ form_widget(form.president_name) }}
        </div>
        <div class="col-3">
            {{ form_label(form.president_same_address) }}
            {{ form_widget(form.president_same_address) }}
        </div>
    </div>
    <div class="row">
        <div class="col-3">
            {{ form_label(form.president_address) }}
            {{ form_widget(form.president_address) }}
        </div>
        <div class="col-3">
            {{ form_label(form.president_postal_code) }}
            {{ form_widget(form.president_postal_code) }}
        </div>
        <div class="col-3">
            {{ form_label(form.president_city) }}
            {{ form_widget(form.president_city) }}
        </div>
        <div class="col-3">
            {{ form_label(form.president_country) }}
            {{ form_widget(form.president_country) }}
        </div>
    </div>
</fieldset>
<div class="d-flex flex-row-reverse bd-highlight mt-2">
    <button class="{{ button_class|default('btn') }} mt-2">{{ button_label|default('Enregistrer') }}</button>
</div>
{{ form_rest(form) }}
{{ form_end(form) }}
<script type="text/javascript">
function togglePresidentAdrressFieldsEvent(event) {
    togglePresidentAdrressFields(1 == event.target.value);
}

function togglePresidentAdrressFields(toggle) {
    var fieldAdress = document.querySelector('#association_informations_address');
    var fieldPostalCode = document.querySelector('#association_informations_postal_code');
    var fieldCity = document.querySelector('#association_informations_city');
    var fieldCountry = document.querySelector('#association_informations_country');

    var fieldPresidentAdress = document.querySelector('#association_informations_president_address');
    var fieldPresidentPostalCode = document.querySelector('#association_informations_president_postal_code');
    var fieldPresidentCity = document.querySelector('#association_informations_president_city');
    var fieldPresidentCountry = document.querySelector('#association_informations_president_country');

    if (toggle) {
        copyAssocitionAddressFullToPresidentAddressFull();
        fieldAdress.addEventListener("change", copyAssocitionAddressToPresidentAddress);
        fieldPostalCode.addEventListener("change", copyAssocitionPostalCodeToPresidentPostalCode);
        fieldCity.addEventListener("change", copyAssocitionCityToPresidentCity);
        fieldCountry.addEventListener("change", copyAssocitionCountryToPresidentCountry);
        fieldPresidentAdress.setAttribute('readonly', true);
        fieldPresidentPostalCode.setAttribute('readonly', true);
        fieldPresidentCity.setAttribute('readonly', true);
        fieldPresidentCountry.setAttribute('readonly', true);

    } else {
        fieldAdress.removeEventListener("change", copyAssocitionAddressToPresidentAddress);
        fieldPostalCode.removeEventListener("change", copyAssocitionPostalCodeToPresidentPostalCode);
        fieldCity.removeEventListener("change", copyAssocitionCityToPresidentCity);
        fieldCountry.removeEventListener("change", copyAssocitionCountryToPresidentCountry);
        fieldPresidentAdress.removeAttribute('readonly');
        fieldPresidentPostalCode.removeAttribute('readonly');
        fieldPresidentCity.removeAttribute('readonly');
        fieldPresidentCountry.removeAttribute('readonly');
    }
}

function copyAssocitionAddressFullToPresidentAddressFull() {
    copyAssocitionAddressToPresidentAddress();
    copyAssocitionPostalCodeToPresidentPostalCode();
    copyAssocitionCityToPresidentCity();
    copyAssocitionCountryToPresidentCountry();
}

function copyAssocitionAddressToPresidentAddress() {
    document
        .querySelector('#association_informations_president_address')
        .value =
        document
        .querySelector('#association_informations_address')
        .value;
}

function copyAssocitionPostalCodeToPresidentPostalCode() {
    document
        .querySelector('#association_informations_president_postal_code')
        .value =
        document
        .querySelector('#association_informations_postal_code')
        .value;

}

function copyAssocitionCityToPresidentCity() {
    document
        .querySelector('#association_informations_president_city')
        .value =
        document
        .querySelector('#association_informations_city')
        .value;
}

function copyAssocitionCountryToPresidentCountry() {
    document
        .querySelector('#association_informations_president_country')
        .value =
        document
        .querySelector('#association_informations_country')
        .value;
}
(function() {
    togglePresidentAdrressFields(1 == document.querySelector('#association_informations_president_same_address').value);
})();
</script>