<form method="post" name="multiMapping" id="multiMapping" >
    <div class="clearfix">
        <h4>{{ 'Caractéristique du mapping' | trad }}</h4>

        <div class="colonne2">
            <div class="row">
                {{ inputAdvance('SELECT', {
                    'titre' : 'Type contenu' | trad,
                    'name' : 'TYPECONTSTR',
                    'listeValue' : listeTypeContenu,
                    'value' : element.TYPECONTSTR,
                }) }}
            </div>
        </div>
        <div class="colonne2 last spliterContenu">
            <div class="colonne2">
                <div class="row">
                    {{ inputAdvance('TEXT', {
                        'titre' : 'Séparateur de liste' | trad,
                        'name' : 'SEPARLST',
                        'value' : (element.TYPECONTSTR == 'L' or element.TYPECONTSTR == 'C')? element.TYPECONTSTR:'',
                        'option' : (element.TYPECONTSTR == 'L' or element.TYPECONTSTR == 'C')? '':'readOnly',

                        'pathValidator' : path('Ajax.validator.isStringSansEspace'),
                        'paramsValidator' : "{'sizeMin' : '0', 'sizeMax' : '1'}",
                    }) }}
                </div>
            </div>
            <div class="colonne2 last">
                <div class="row">
                    {{ inputAdvance('TEXT', {
                        'titre' : 'Séparateur de couple' | trad,
                        'name' : 'SEPARCOUPLE',
                        'value' : (element.TYPECONTSTR == 'C')? element.SEPARLST:'',
                        'option' : (element.TYPECONTSTR == 'C')? '':'readOnly',

                        'pathValidator' : path('Ajax.validator.isStringSansEspace'),
                        'paramsValidator' : "{'sizeMin' : '0', 'sizeMax' : '1'}",
                    }) }}
                </div>
            </div>
        </div>

        <div class="clearfix">

            <p style="font-style: italic">
                {{ 'Veuillez indiquer dans la table ci-dessous la liste des colonnes de votre catalogue source correspondant au type d\'information sélectionné.' | trad }}</p> 
            </p>
            <table class="table table-hover" id="tableLigne">
                <thead class="thead-dark">
                    <tr>
                        <th scope="col" width="100px">{{ 'Position' | trad }}</th>
                        <th scope="col" width="150px">{{ 'Action' | trad }}</th>
                        {% if IdLigne in listeLigneRubrique %}
                            <th scope="col" width="150px">{{ 'Rubrique' | trad }}</th>
                            <th scope="col" width="150px">{{ 'Tranche' | trad }}</th>
                        {% endif %}
                        {% if IdLigne in listeLigneRubrique or IdLigne in listeLigneTab %}
                        {% else %}
                            <th scope="col" width="150px">{{ 'Opérateur' | trad }}</th>
                        {% endif %}
                        <th scope="col">{{ 'Description' | trad }}</th>
                        {% if IdLigne in listeLigneTab or IdLigne in listeLigneRubrique %}
                            <th scope="col" width="150px">{{ 'Contrôle' | trad }}</th>
                        {% endif %}
                        {% if IdLigne in listeLigneTab %}
                            <th scope="col" width="150px">{{ 'Transcodage' | trad }}</th>
                        {% endif %}
                        <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 mapping in listeMultiMapp %}
                        {% include '@catalogue/ParametrageFormat/mappage/_ligneMultiMapping.twig' with {
                            'random' : random(),
                        } %}
                    {% else %}
                        {% include '@catalogue/ParametrageFormat/mappage/_ligneMultiMapping.twig' with {
                            'random' : random(),
                        } %}
                    {% endfor %}
                </tbody>
            </table>
        </div>

        <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="enregistreMultiMapping();" >{{ 'Enregistrer' | trad}}</button>
        </div>


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

        function enregistreMultiMapping() {
            $.ajax({
                url: '{{ path('Catalogue.parametrageFormat.validateMultiMapping', {IdFormat : IdFormat, IdLigne:IdLigne}) }}',
                dataType : 'json',
                type: "POST",
                data: $('#multiMapping').serialize(),
                success : function(data){ 
                    if (data.statut == 'O') {
                        $('#'+data.IDPOSITION).val(data.POSITION);
                        desactivePopup();
                    } else {
                        $('#divError').html(data.error);
                    }
                }
            });
        }

        document.addEventListener('change',(event) => {
            var target = event.target;
            if (!(target instanceof HTMLElement) ) {
                return;
            }

            if ($(target).attr('id') != 'input_TYPECONTSTR'){
                return;
            } 

            $('#input_SEPARLST').prop('readOnly', true);
            $('#input_SEPARCOUPLE').prop('readOnly', true);

            if ($(target).val() == 'L') {
                $('#input_SEPARLST').prop('readOnly', false);
                $('#input_SEPARCOUPLE').val('');
            } else if ($(target).val() == 'C'){
                $('#input_SEPARLST').prop('readOnly', false);
                $('#input_SEPARCOUPLE').prop('readOnly', false);
            } else if ($(target).val() == 'N'){
                $('#input_SEPARLST').val('');
                $('#input_SEPARCOUPLE').val('');
            }
        });
    </script>
</form>