{% extends 'layout.twig' %}

{% block body %}
    <script type="text/javascript" src="{{ baseUrl('js/Modules/DemandeAchat/ModificationDA.js') }}"></script>
    
    <div class="clearfix contenu"  id="demandeAchat">
        <h1>{{ 'Demandes d\'achat' | trad }}</h1>
        {{ ariane() }}
        
        <h2>
            {{ titreH2 }} 
            {{ Button('Annuler' | trad, 0, path('DemandeAchat.GestionDemandeAchat.index')) }}
            {{ Button('Enregistrer' | trad, 1, '', 'validationDa()') }}
        </h2>
        
        <div class="tab-content padding15">
            <form action="{{ path('DemandeAchat.ModificationDemandeAchat.validationDetail', {idDA : da.NO_DA}) }}" 
                method="post" name="form_creationDA" id="form_creationDA"
                onsubmit="validationDa();return false;">
                <input type="hidden" value="{{ da.NO_DA }}" id="idDA" name="NO_DA"/>
                {% include '@DemandeAchat/Modification/_heading.twig' %}
                <ul class="nav nav-tabs sous_onglet">
                    <li id="tab_items" {% if (onglet == '' or onglet =='items' or onglet =='Article') and (queryParams.onglet != "termesdepaiement" and post.onglet != "termesdepaiement") %}class="active"{% endif %}>
                        <a data-toggle="tab" href="#items">{{ 'Articles' | trad }}
                            {% if ligneDA %}
                                <span id="nb_affectation_ligne" class="nb_affectation">
                                    {{ ligneDA | lengthTable }}
                                </span>                        
                            {% endif %}
                        </a>
                    </li>
                    <li id="onglet_Article" {% if onglet =='detail' %}class="active"{% endif %}>
                        <a data-toggle="tab" href="#detail">{{ 'Détails' | trad }}</a>
                    </li>
                    <li id="onglet_Fournisseur" {% if onglet =='supplier' %}class="active"{% endif %}>
                        <a data-toggle="tab" href="#supplier">{{ 'Fournisseur' | trad }}</a>
                    </li>
                    <li id="onglet_Livraison" {% if onglet =='delivery' %}class="active"{% endif %}>
                        <a data-toggle="tab" href="#delivery">{{ 'Livraison' | trad }}</a>
                    </li>
                    <li id="onglet_CondPart" {% if onglet =='specificConditions' %}class="active"{% endif %}>
                        <a data-toggle="tab" href="#specificConditions">{{ 'Cond. Part.' | trad }}</a>
                    </li>
                    <li id="onglet_Info" {% if onglet =='info' %}class="active"{% endif %}>
                        <a data-toggle="tab" href="#info">{{ 'Infos' | trad }}</a>
                    </li>
                    <li id="onglet_Supp" {% if onglet =='additionalFields' %}class="active"{% endif %}>
                        <a data-toggle="tab" href="#additionalFields">{{ 'Supplémentaires' | trad }}</a>
                    </li>
                    <li id="onglet_clause" {% if onglet =='clause' %}class="active"{% endif %}>
                        <a data-toggle="tab" href="#clause">{{ 'Clauses' | trad }}</a>
                    </li>
                    {% if licenceOxalys.termPaieActive() and (nbrFourn.NombreDeFournisseur ?? 1) == 1 and da.CHIF_EXEC != 'C' %}
                        <li id="onglet_termPaiement" {% if (onglet =='termPaiement') or ((queryParams.onglet == "termesdepaiement") or (post.onglet == "termesdepaiement") ) %}class="active"{% endif %}>
                            <a data-toggle="tab" onclick="activeLoader();addQueryParams('onglet', 'termesdepaiement');">{{ 'Termes de paiement' | trad }}</a>
                        </li>
                    {% endif %}
                    <li id="onglet_DivModulable" style="display:none">
                        <a data-toggle="tab" href="#DivModulable" class="ephemere"></a>
                    </li>
                    <li id="tab_DivModulableCreation" style="display:none">
                        <a data-toggle="tab" href="#DivModulableCreation" class="ephemere"></a>
                    </li>
                    {% if origine == 'modifImput' %}
                        <li id="tab_Imput" class="active">
                            <a data-toggle="tab" href="#tab_Imput">{{ 'Modif. Lignes' | trad }}</a>
                        </li>
                    {% endif %}
                </ul>
                <div class="tab-content">

                    <div id="DivModulable" class="tab-pane fade clearfix box-form">
                    </div>
                    
                    <div id="DivModulableCreation" class="tab-pane fade clearfix box-form">
                    </div>
                    
                    <script>
                        function activeDivModulableCde(result, titre)
                        {
                            $('#onglet_DivModulable').show();
                            $('#onglet_DivModulable').find('a').html(titre);
                            $('#onglet_DivModulable').find('a').trigger('click');
                            $('#DivModulable').html(result);
                        }
                    </script>
                
                    {# ################################################# #}
                    {# ##################### ARTICLE ################### #}
                    {# ################################################# #}
                    
                    <div id="items" class="tab-pane {% if (onglet =='items' or onglet =='' or onglet =='Article') and (queryParams.onglet != "termesdepaiement" and post.onglet != "termesdepaiement") %} active in {% else %} fade {% endif %} clearfix bg_form border_form">
                        {% include '@DemandeAchat/Modification/_items.twig' %}
                    </div>

                    {# ################################################# #}
                    {# ##################### DETAIL ## ################# #}
                    {# ################################################# #}

                    <div id="detail" class="tab-pane fade clearfix box-form">
                        {% include '@DemandeAchat/Modification/_detail.twig' %}
                    </div>

                    {# ################################################# #}
                    {# ################### FOURNISSEUR ################# #}
                    {# ################################################# #}
                    
                    <div id="supplier" class="tab-pane fade clearfix box-form">
                        {% include '@DemandeAchat/Modification/_supplier.twig' %}
                    </div>

                    {# ################################################# #}
                    {# ######################## INFO ################### #}
                    {# ################################################# #}

                    <div id="info" class="tab-pane fade clearfix box-form">
                        {% include '@DemandeAchat/Modification/_info.twig' %}
                    </div>

                    {# ################################################# #}
                    {# ##################### LIVRAISON ################# #}
                    {# ################################################# #}

                    <div id="delivery" class="tab-pane fade clearfix box-form">
                        {% include '@DemandeAchat/Modification/_delivery.twig' %}
                    </div>

                    {# ################################################# #}
                    {# #################### Cond. PART ################# #}
                    {# ################################################# #}

                    <div id="specificConditions" class="tab-pane fade clearfix box-form">
                        {% include '@DemandeAchat/Modification/_specificConditions.twig' %}
                    </div>

                    {# ################################################# #}
                    {# ####################### CS ###################### #}
                    {# ################################################# #}

                    <div id="additionalFields" class="tab-pane fade clearfix box-form">
                        {% include '@DemandeAchat/Modification/_additionalFields.twig' %}
                    </div>

                    {# ################################################# #}
                    {# #################### CLAUSES #################### #}
                    {# ################################################# #}

                    <div id="clause"class="tab-pane fade clearfix box-form">
                        {% include '@DemandeAchat/Modification/_clause.twig' %}
                    </div>
                    {# ################################################# #}
                    {# #################### TERME DE PAIEMENT #################### #}
                    {# ################################################# #}
                    <div id="termPaiement" class="tab-pane {% if (queryParams.onglet == "termesdepaiement") or (post.onglet == "termesdepaiement") %} active in {% else %} fade{% endif %} clearfix box-form">

                        {% include "@TermeDePaiement/TermeDePaiement/_termeDePaiementListe.twig" with {
                            canEdit: true,
                            MODULE: 'DemandeAchat',
                            id: da.NO_DA,
                            critere: '',
                            titre: titreTP
                        } %}

                    </div>
                </div>
            </form>
        </div>
    </div>
    <script>
        function validatePurchaseRequest(path, noCde)
        {
            activeLoader();
            $.ajax({
                url: path,
                type: 'POST',
                dataType: 'html',
                success: function (data) {
                    desactiveLoader();
                    $("#modal-content").addClass("modal_small");
                    $("#modal-body").html(data);
                    $("#modal-title").html('{{ "Validation demande d'achat n°" | trad }} ' + noCde);

                    activePopup();
                },
                error: function (data){
                    var data = jQuery.parseJSON(data.responseText);
                    refrechDiv(window.location.pathname, data.divRefresh, data.formRefresh);
                }
            });
        }
        function addQueryParams(key, value) {
            const url = new URL(window.location.href);
            url.searchParams.set(key, value);
            window.location.href = url.toString();
        }
    </script>
{% endblock %}