<form id="validation">
    <table class="table table-hover" id="tableLigne">
        <thead class="thead-dark">
            <tr>
                <th scope="col" width="100px">{{ 'Ligne' | trad }}</th>
                <th scope="col" width="">{{ 'Opérateur' | trad }}</th>
                <th scope="col" width="">{{ 'Règle comparaison' | trad }}</th>
                <th scope="col" width="">{{ 'Zone 1' | trad }}</th>
                <th scope="col" width="">{{ 'Zone 2' | trad }}</th>
                <th scope="col" width="75px">
                    <a class="ajouter_blanc_v2  white-tooltip"  onClick="ajoutLigne();" style="float: right;">
                        <span class="infos_tooltip left">
                            {{ 'Ajouter une ligne' |trad }}
                        </span>
                    </a>
                </th>
            </tr>
        </thead>
        <tbody>
            {% for validation in listeValidation %}
                {% include '@catalogue/ParametrageFormat/validation/_ligneValidation.twig' with {
                    'random' : random(),
                } %}
            {% else %}
            {% endfor %}
        </tbody>
    </table>
    <div id="divError" class='error'>
    </div>

    <div class="modal-footer">
        <button type="button" class="button secondaire" data-dismiss="modal" onClick="desactivePopup();desactiveLoader();">{{ 'Annuler' | trad}}</button>
        <button type="button" class="button principal" onClick="enregistreValidation();" >{{ 'Enregistrer' | trad}}</button>
    </div>
</form>
<script>
    document.addEventListener('change',(event) => {
        var target = event.target;

        if (!(target instanceof HTMLElement) ) {
            return;
        }

        if (!target.hasAttribute('change-regle')){
            return;
        }

        var idLigne = $(target).data('idligne');

        if ($(target).val() == 'E') {
            $('#input_ZONE2'+idLigne).prop('readonly', false);
        } else {
            $('#input_ZONE2'+idLigne).prop('readonly', true);
        }
    });

    function enregistreValidation() {
        $.ajax({
            url: '{{ path('Catalogue.parametrageFormat.validateValidation', {IdFormat : IdFormat, IdLigne:IdLigne}) }}',
            type: "POST",
            data: $('#validation').serialize(),
            success: function (data) {     
                $.redirect(window.location.href);
            },
            error: function (data){
                var data = jQuery.parseJSON(data.responseText);
                console.log(data);
                $('#divError').html(data.msgError);
                desactiveLoader();
            }
        });
    }

	function ajoutLigne()
	{
		$.ajax({
			dataType : 'html',
			url: '{{ path('Catalogue.parametrageFormat.ajaxAjoutLigneValidation') }}',
			type: "POST",
			success: function(result){
				$('#tableLigne > tbody').append(result);
			}
		});
	}
</script>