<table class="table table-hover tableForm" id='ligneClause'>
    <thead class="thead-dark">
        <tr>
            <th scope="col" width="7%">{{ 'Ordre' | trad }}</th>
            <th scope="col">{{ 'Clause' | trad }}</th>
            <th scope="col" colspan="2">{{ 'Actions' | trad }}</th>
        </tr>
        <tr id="filter_dynamique" class="recherche">
            <td><input name="filter_ordre" class="filter_ordre form-control form-control-sm " type="text" /></td>
            <td><input name="filter_clause" class="filter_clause form-control form-control-sm " type="text" /></td>
            <td colspan="2"></td>
        </tr>
    </thead>
    
    <tbody>
        {% for ligne in ligneClause %}
            {% include '@DemandeAchat/Creation/clauseNonModifiable.twig' %}
        {% endfor %}

        {% if ligneClause | lengthTable == 0 %}
            {% set open = true %}
            {% set ligne = {'NO_ORDRE' : (ligneClause | lengthTable)+1} %}
            {% include '@DemandeAchat/Creation/clause.twig' %}
        {% endif %}
        <tr class="static">
            <td colspan="3"></td>
            <td class="parametrage" width="40px">
                {{ Button('',1,'', "ajoutClause('"~path('DemandeAchat.ModificationClauseDemandeAchat.ajaxAjoutLigne', {idDA: idDA})~"','"~path('DemandeAchat.ModificationClauseDemandeAchat.validationLigne', {idDA : idDA})~"')", {}, true, 'ajout', '','addLigne', 'padding: 10px 10px 10px 10px;background-position: 4px 3px;margin-left: 5px;') }}
            </td>
        </tr>
    </tbody>
</table>
<script>
$('#form_creationDA #clause tbody').sortable({
    items: 'tr.sortable',
    update: function( event, ui ) {
        var row = $('#'+ui.item.attr("id"));
        var saveID = $(row).attr("data-idLigne");

        /* annuler la modification si un filtre est activé ou si une ligne est en création/modif ou si la ligne est placer entre un TR d'affichage */
        if( $('#ligneClause tbody tr').hasClass('entete_ligne_show') )
        {
            $(this).sortable('cancel');
        }
        else
        {
            activeLoader();
            var moveDown = ui.position.top - ui.originalPosition.top > 0 ? true : false;

            if(moveDown)
            {
                $(row).prevAll().each(function(){
                    
                    if(parseInt($(this).attr('data-idLigne')) < $(row).attr('data-idLigne'))
                    {
                        return;
                    }
                    
                    if($(this).attr('data-idLigne') !== undefined)
                    {
                        var oldID = parseInt($(this).attr('data-idLigne'));
                        var newID = oldID-1;

                        $(this).attr("data-idLigne",newID);
                        $(this).attr("id","CLAUSE"+newID+"NON_MODIF");
                        $(this).find('td:first').html(newID); 
                    }
                });

                var newIDmove = parseInt($(row).prev().attr('data-idLigne'))+1;

            }
            else
            {
                $(row).nextAll().each(function(){

                    if(parseInt($(this).attr('data-idLigne')) > $(row).attr('data-idLigne'))
                    {
                        return false;
                    }
                    
                    if($(this).attr('data-idLigne') !== undefined)
                    {
                        var oldID = parseInt($(this).attr('data-idLigne'));
                        var newID = oldID+1;

                        $(this).attr("data-idLigne",newID);
                        $(this).attr("id","CLAUSE"+newID+"NON_MODIF");
                        $(this).find('td:first').html(newID);
                    }
                });

                var newIDmove = parseInt($(row).next().attr('data-idLigne'))-1;
            }
                                        
            $(row).attr("data-idLigne",newIDmove);
            $(row).attr("id","CLAUSE"+newIDmove+"NON_MODIF");
            $(row).find('td:first').html(newIDmove);
            
            $.ajax({
                dataType : 'html',
                url: '{{ path('DemandeAchat.ModificationClauseDemandeAchat.ajaxModificationOrdre', {idDA : idDA }) }}',
                data: {'newPosition' : newIDmove, 'oldPosition' : saveID},
                type: "POST",
                success: function(result){
                    desactiveLoader();
                }
            });
        }
        /*******/
        
    },
});
</script>
