<div class="p-base">
    <div class="boutons">
        {{ Button('Ajouter une ligne' | trad, 1,'', "ajoutLigne('"~path('DemandeAchat.ModificationLigneDemandeAchat.ajaxAjoutLigne', {idDA: da.NO_DA})~"', '" ~ path('DemandeAchat.ModificationLigneDemandeAchat.validationLigne', {idDA : da.NO_DA}) ~ "')") }}
        <a class="button secondaire" href="{{ path( 'RechercheArticles.RechercheArticles.recherche', {contexte:'DA', idContexte:da.NO_DA} ) }}">
            {{ 'Rechercher dans les catalogues' | trad }}
        </a>

        
        <button onClick="$('html,body').animate({ scrollTop: $(document).height() },'slow');" type="button" class="button principal button_right buttonDeplacer btn_double_bottom"></button>
        {{ Button('Modif. Lignes' | trad, 0, path('DemandeAchat.ModifierGroupeeLigneDemandeAchat.modificationGroupeeLignes', {'MODULE' : 'DA', 'mode' : 'Modification', 'idDA' : da.NO_DA, 'type' : 'I_F_S_D_T'}), '', '', true, 'button_right') }}
        {{ Button('Modif. prix' | trad, 0, path('DemandeAchat.ModificationPrixLigneDemandeAchat.modificationPrixLignes', {'MODULE' : 'DA', 'mode' : 'Modification', 'idDA' : da.NO_DA}), '', '', true, 'button_right') }}
    </div>
    <table class="table table-hover tableForm" id='ligneCde'>
        <thead class="thead-dark">
            <tr>
                <th scope="col" width="70px">{{ 'Ligne' | trad }}</th>
                <th scope="col">{{ 'Accord-cadre' | trad }}</th>
                <th scope="col">{{ 'Fournisseur' | trad }}</th>
                <th scope="col">{{ 'Article' | trad }}</th>
                <th scope="col">{{ 'Desig. Article' | trad }}</th>
                <th scope="col" class="align-right" width="110px">{{ 'Quantité' | trad }}</th>
                <th scope="col" width="100px">{{ 'Unité' | trad }}</th>
                <th scope="col" class="align-right" width="115px">{{ 'Prix unitaire' | trad }}</th>
                <th scope="col" class="align-right" width="60px">{{ 'Remise (%)' | trad }}</th>
                <th scope="col" class="align-right" width="100px">{{ 'Budget' | trad }}</th>
                <th scope="col" width="130px">{{ 'Date livraison' | trad }}</th>
                <th scope="col" colspan="">{{ 'Actions' | trad }}</th>
            </tr>
            <tr id="filter_dynamique" class="recherche">
                <td><input name="filter_ligne" class="filter_ligne form-control form-control-sm " type="text" /></td>
                <td><input name="filter_ACD" class="filter_ACD form-control form-control-sm " type="text" /></td>
                <td><input name="filter_fourniss" class="filter_fourniss form-control form-control-sm " type="text" /></td>
                <td><input name="filter_article" class="filter_article form-control form-control-sm " type="text" /></td>
                <td><input name="filter_design" class="filter_design form-control form-control-sm " type="text" /></td>
                <td><input name="filter_QTE" class="filter_QTE form-control form-control-sm " type="text" /></td>
                <td><input name="filter_unite" class="filter_unite form-control form-control-sm " type="text" /></td>
                <td><input name="filter_PU" class="filter_PU form-control form-control-sm " type="text" /></td>
                <td><input name="filter_remise" class="filter_remise form-control form-control-sm " type="text" /></td>
                <td><input name="filter_budget" class="filter_budget form-control form-control-sm " type="text" /></td>
                <td><input name="filter_delai" class="filter_delai form-control form-control-sm " type="text" /></td>
                <td colspan=""></td>
            </tr>
        </thead>
        
        <tbody>
            {% for ligne in ligneDA %}
                {% include '@DemandeAchat/Modification/line/non_editable_line.twig' %}
            {% endfor %}

            {% if newLine | lengthTable != 0 %}
                {% set open = true %}
                {# <tr id="LIGNE{{ newLine.NO_PO }}" class="{% if open %}entete_ligne_show{% endif %}"> #}
                    {% include '@DemandeAchat/Modification/line/line.twig' %}
                {# </tr> #}
            {% endif %}
            <tr class="static">
                <td colspan="11"></td>
                <td class="parametrage align-right">
                    {{ Button('',1,'', "ajoutLigne('"~path('DemandeAchat.ModificationLigneDemandeAchat.ajaxAjoutLigne', {idDA: idDA})~"','"~path('DemandeAchat.ModificationLigneDemandeAchat.validationLigne', {idDA : idDA})~"', '" ~ path('TermeDePaiement.TermeDePaiement.deleteAllTermeDePaiement', {MODULE: 'DA_ENTET', id: idDA}) ~ "')", {}, true, 'ajout', '','addLigne', 'padding: 10px 10px 10px 10px;background-position: 4px 3px;margin-left: 5px;') }}
                </td>
            </tr>
        </tbody>
    </table>
    <button onClick="$('html,body').animate({ scrollTop: 0 },'slow');" type="button" class="button principal button_right buttonDeplacer btn_double_top"></button>
    <script>
        $('#form_creationDA #items 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( $('#ligneCde 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","LIGNE"+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","LIGNE"+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","LIGNE"+newIDmove+"NON_MODIF");
                    $(row).find('td:first').html(newIDmove);
                    
                    $.ajax({
                        dataType : 'html',
                        url: '{{ path('DemandeAchat.ModificationLigneDemandeAchat.ajaxModificationOrdre', {idDA : idDA }) }}',
                        data: {'newPosition' : newIDmove, 'oldPosition' : saveID},
                        type: "POST",
                        success: function(result){
                            desactiveLoader();
                        }
                    });
                }
                /*******/
                
            },
        });
    </script>
</div>