
{% extends '@ajax-layout/layout.twig' %}

{% block body %}

    <form id="formPlanning" name="formPlanning">
        <div class="informations">
            <p>
                <span class="champs_label">{{ 'Réception automatique ?' | trad }} : </span>
                <span class="resultat">{{ article.ReceptionAuto=='true'? 'Oui' |trad : 'Non' | trad }}</span>
            </p>
            {% if article.ReceptionAuto=='true' %}
                <p>
                    <span class="champs_label">{{ 'Dates contrat' | trad }} : </span>
                    <span class="resultat">{{ article.DteDebContrat |dateTrad }} - {{ article.DteFinContrat |dateTrad }}</span>
                </p>
                <p>
                    <span class="champs_label">{{ 'Périodicité' | trad }} : </span>
                    <span class="resultat">{{ listePeriodicite(article.Periodicite | convertStr) }}</span>
                </p>
                <p>
                    <span class="champs_label">{{ 'Période' | trad }} : </span>
                    <span class="resultat">{{ article.ModeCalculDelai | convertStr == 'D'? 'Début' | trad:'Fin' | trad }}</span>
                </p>
                <p>
                    <span class="champs_label">{{ 'Jour application' | trad }} : </span>
                    <span class="resultat">{{ article.JourApplication | convertInt }}</span>
                </p>
            {% endif %}
        </div>
        <div class="single">
            <input type="hidden" value="{{ article.QteDemande | convertFloat }}" id="qte"/>
            <div class="row">
                {{ inputAdvance('TEXT', {
                    'name' : 'RESTE_A_CAD',
                    'titre' : 'Reste à cadencer' | trad,
                    'value': '0' |qte,
                    'option' : 'readOnly',
                }) }}
            </div>
        </div>
        <hr>


        <table class="table table-hover tabPlanning">
            <thead class="thead-dark">
                <tr>
                    <th scope="col" width="50%">{{ 'Date' | trad }}</th>
                    <th scope="col">{{ 'Quantité' | trad }}</th>
                    <th scope="col" width="75px">{{ 'Actions' | trad }}</th>
                </tr>
            </thead>
            <tbody class="noHover">
                {% for planning in article.ListePlanning.Planning %}
                    {% include '@Panier/Validation/_lignePlanning.twig' with {
                        lignePlanning : loop.index,
                    } 
                    %}
                {% endfor %}
            </tbody>
        </table>

        <div id="messageErreur" class="error"></div>

        <hr>

        <button class="principal btn btn_right pointer" type="button" onClick="validatePlanning()";>{{ 'Enregistrer' |trad}}</button>
        <button class="principal btn btn_right pointer" type="button" style="margin-right:10px" onClick="addLigne();">{{ 'Ajouter' |trad }}</button>
    </form>

    <script>

        function validatePlanning()
        {
            activeLoader();
            $.ajax({
                dataType : 'html',
                url: '{{ path('Panier.validationPanier.ajaxPlanningValidation', {typeDoc :typeDoc,critereRegroup : critereRegroup,idLigne : idLigne,}) }}',
                type: "POST",
                data: $('#formPlanning').serialize(),
                success: function(result){
                    desactiveLoader();
                    desactivePopup();
                    refrechDiv('{{ path('Panier.validationPanier.validation') }}', 'table{{critereRegroup}}');
                }, 
                error: function (data){
                    desactiveLoader();
                    var data = jQuery.parseJSON(data.responseText);
                    $('#messageErreur').html(data.message);
                }
            });	 
        }

        function addLigne() {
            $.ajax({
                dataType : 'html',
                url: '{{ path('Panier.validationPanier.ajaxAddPlanning') }}',
                type: "POST",
                data: {lastId:$(".tabPlanning .listPlanning:last").val()},
                statusCode: {
                    413: function(xhr) {
                        desactiveLoader();
                        desactivePopup();
                        alert('Error - ModSecurity.');
                    }
                },
                success: function(result){
                    $(".tabPlanning > tbody").append(result);
                }
            });	
        }

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

            if (!target.hasAttribute('data-id-planning') ){
                return;
            } 

            var idPlanning = target.getAttribute("data-id-planning");

            $('#planning'+idPlanning).remove();
            calculTotalPlanning();
        });

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

            if (!event.target.classList.contains("qtePlanning")) {
                return;
            } 

            calculTotalPlanning();

        });

        

        function calculTotalPlanning()
        {
            var totalPlanning = 0; 
            var totalLigne = parseFloat($('#qte').val().replace(',', '.').replace(' ', ''));
            $('.qtePlanning').each(function(e) {
                var qte = parseFloat($(this).val().replace(',', '.').replace(' ', ''));
                if(isNaN(qte)) {
                    qte = 0;
                }                
                totalPlanning += qte;
            });

            if(isNaN(totalPlanning)) {
                totalPlanning = 0;
            }

            var diffPlanning = totalLigne-totalPlanning;
            $('#input_RESTE_A_CAD').val(diffPlanning.toFixed({{ getConst('qteDecimal') }}));
            if (diffPlanning != 0) {
                $('#input_RESTE_A_CAD').css("color", "var(--error)");
            } else {
                $('#input_RESTE_A_CAD').css("color", "var(--good)");
            }
        }
    </script>

    <style>
        .tabPlanning .form-control{
            height: 30px;
        }
    </style>

{% endblock %}