<hr>
<div style="margin-top:15px;">

    <div id="listeImputation">
        {% for imputation in listeImputation %}
            {% include '@Panier/Panier/_imputation.twig' with {
                'idImputation' : imputation.id_imputation,
                'codeSte' : panier.CODE_STE,
                'centreEmetteur' : panier.CENTRE_EMETTEUR,
                'imputation' : imputation,
            } %}
        {% endfor %}
    </div>

    <div id="divBtnImpu" style="text-align: center;margin-top:10px;">
        <button class="secondaire button" type="button" onClick="ajoutLigne();">{{ 'Ajouter une ligne' | trad  }}</button>
    </div>

    <script>
        init('{{ path("Ajax.Notification.majNotification") }}','{{ baseUrl('IconeV2/Global/deadline-change.svg') }}', '{{ 'dd/mm/yy' | paramDateFormat }}', '{{ path("Ajax.AutoComplete.autocomplete") }}');
        
        function ajoutLigne()
        {
            $.ajax({
                dataType: 'html',
                url: '{{ path('Panier.Panier.ajaxAjoutLigneImputation') }}',
                data: {},
                type: "POST",
                success: function(result){
                    $('#divBtnImpu').before(result);
                    desactiveLoader();

                    hideTabImputation();
                }
            });
        }

        function deleteLigne(path, idImputation)
        {
            $.ajax({
                dataType: 'html',
                url: path,
                data: {},
                type: "POST",
                success: function(result){
                    $('#ligneImputation'+idImputation).remove();
                    desactiveLoader();

                    if ($('.recalculQte').length) {
                        var valueFirst = parseFloat($('.recalculQte:first').val()); 
                        var totalRepartition = 0;
                        $('.recalculQte').each(function(){
                            totalRepartition += parseFloat($(this).val());
                        });

                        valueFirstInput = 100 - totalRepartition + valueFirst; 

                        $('.recalculQte:first').val(formatNombre(valueFirstInput.toFixed(2), ' '));
                    } else {
                        $('.tabImputation').show();
                    }


                }
            });
        }

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

            if (!$(event.target).hasClass('recalculQte')){
                return;
            } 

            if ($(event.target).attr('id') == $('.recalculQte:first').attr('id')) {
                return;
            }
            var idFirstInput = $('.recalculQte:first').attr('id');

            var valueFirst = parseFloat($('.recalculQte:first').val());
            var valueEdit = parseFloat(target.value);

            var totalRepartition = 0;
            $('.recalculQte').each(function(){
                totalRepartition += parseFloat($(this).val());
            });

            totalRepartition = totalRepartition - valueFirst;
            valueFirstInput = 100 - totalRepartition;

            $('.recalculQte:first').val(formatNombre(valueFirstInput.toFixed(2), ' '));

            updateValueBDD($('.recalculQte:first'));
        });
        
    </script>
</div>