{% set listeEtat = {
    'E': 'En cours' | trad,
    'A': 'En Attente' | trad,
    'V': 'Validée' | trad,
    'S': 'Soldée physiquement' | trad,
    'Z': 'Annulée' | trad,
} %}

{% extends 'layout.twig' %}

{% block body %}
<div class="contenu"  id="factures">
    <h1>
        {% if isAcompte %}
            {{ 'Choix des commandes Facture d\'Acompte n°' | trad }} {{ numFact }}
        {% else %}
            {{ 'Choix des commandes Facture n°' | trad }} {{ numFact }}        
        {% endif %}
         - {{ facture.CODE_FOUR|fournisseurTrad }}
         {% if facture.CODE_FOUR !="" %} ({{ facture.CODE_FOUR }}){% endif %}
          - {{ 'Total HT :' | trad }} {{ (facture.TOTAL_HT | prix) }} {{ facture.DEVISE }}
    </h1>

	{{ ariane() }}

	<div class="tab-content">
        <div id="choix_commandes" class="tab-pane fade in active">
        	<form method="post" name="form-main" id="form-main" class="clearfix">
                <input type="hidden" name="societe" id="societe" value="{{ societe }}" />
                <input type="hidden" name='filtresActifs' value="1" />
                <div id="filtre" class="tab-pane active in clearfix box-form form-default">
                    <h4>{{ 'Entête' | trad }}</h4>
                    {% if isAcompte and isTermPaieActive %}
                        <div class="colonne3">
                            <div class="row">
                                {{ inputAdvance('DATE', { 
                                    titre: 'Créée entre le' | trad,
                                    name: 'dateCreationDu',
                                    value: post.dateCreationDu,
                                }) }}   
                            </div>
                        </div>
                        <div class="colonne3">
                            <div class="row">
                                {{ inputAdvance('DATE', { 
                                    titre: 'et le' | trad,
                                    name: 'dateCreationAu',
                                    value: post.dateCreationAu,
                                }) }}
                            </div>
                        </div>
                        <div class="colonne3 last">
                            <div class="row">
                                {{ inputAdvance('SELECT', { 
                                    titre: 'Termes de paiement' | trad,
                                    name: 'tp',
                                    value: post.tp,
                                    listeValue: listeValueTermesDePaiements
                                }) }}
                            </div>
                        </div>
                    {% else %}
                        <div class="colonne2">
                            <div class="row">
                                {{ inputAdvance('DATE', { 
                                    titre: 'Créée entre le' | trad,
                                    name: 'dateCreationDu',
                                    value: post.dateCreationDu,
                                }) }}   
                            </div>
                        </div>
                        <div class="colonne2 last">
                            <div class="row">
                                {{ inputAdvance('DATE', { 
                                    titre: 'et le' | trad,
                                    name: 'dateCreationAu',
                                    value: post.dateCreationAu,
                                }) }}
                            </div>
                        </div>
                    {% endif %}
                    
                    <h4>{{ 'Lignes' | trad }}</h4>
                    <div class="bs-row gutter-x-base">
                        <div class="bs-col">
                            {{ inputAdvance('ZOOMADVANCE', {
                                titre: 'Section d’imputation' | trad,
                                name: 'si',
                                value: post.si,
                                pahtZoom: path('Ajax.liste.si'),
                                paramZoom: "{'si_valide': 'on', 'CODE_STE' : '"~societe~"'}",
                                entity: 'Sectimpu',
                                titleZoom: 'Liste des sections d\'imputation' | trad,
                                pathConvert: path('Ajax.outil.convertLibelle'),
                                myFunction: 'affichageCG',
                                myParams: '["'~path('Facture.ajax.setCG')~'", "input_si", "divCG", "divSCA", "societe"]',
                                codeBDD: 'CODE_SI',
                                libelleBDD: 'LIBELLE',
                                widthPopup: 'modal_large',
                                valueTexteZoom: post.CODE_SI_LIBELLE,
                                paramConvertLibelle: "{'filter_egal_CODE_STE' : '"~societe~"'}",
                            }) }}
                        </div>
                        <div class="bs-col">
                            {{ inputAdvance('TREEVIEW', {
                                'titre': 'Code gestion' | trad,
                                'name' : 'cg',
                                'value' : post.cg,
                                'valueTexteTreeview' : post.libelleCodeGestion,
                                'pathTreeview' : path('Ajax.Treeview.codeGestion'),
                                'paramsTreeview' : "{'CODE_GESTION_PAR_ID' : true,'CODE_STE': '"~societe~"', 'CODE_SI': document.getElementById('input_si').value, 'NUM_LOT': '"~numLot~"', 'AUTHACHAT' : '1', 'cg_valide': 'on', 'inputCG' : 'cg'}",
                                'titleTreeview' : 'Liste des codes gestion' | trad,
                                'entity' : 'Codgest',                                                        
                                'myFunction' : 'convertLibelleCodeGestion',
                                'myParams' : '["'~path('Ajax.outil.convertLibelleCodeGestion')~'", this, "CODE_GES", "CODE_AFF", "input_cg", "text_cg", null, "'~numLot~'", "", "input_si", 1]',
                                'codeBDD' : 'CODE_GES',
                                'libelleBDD' : 'CODE_AFF',
                            }) }}
                        </div>
                        <div class="bs-col">
                            {{ inputAdvance('ZOOMADVANCE', {
                                'titre' : 'Code complémentaire' | trad,
                                'name' : 'cdc',
                                'value' : post.cdc,
                                'pahtZoom' : path('Ajax.liste.cdc'),
                                'paramZoom' : "{'cdc_valide': 'on', 'CODE_STE' : '"~societe~"'}",
                                'entity' : 'Codecomp',
                                'titleZoom' : 'Liste des codes complémentaires' | trad,
                                'pathConvert' : path('Ajax.outil.convertLibelle'),
                                'codeBDD' : 'CODE_CDC',
                                'libelleBDD' : 'LIBELLE',
                                'widthPopup' : 'modal_large',
                                'valueTexteZoom' : post.CODE_CDC_LIBELLE,
                                'paramConvertLibelle' : "{'filter_egal_CODE_STE' : '"~societe~"'}",
                            }) }}
                        </div>
                        <div class="bs-col">
                            {{ inputAdvance('ZOOMADVANCE', {
                                titre: 'Sous compte d’analyse' | trad,
                                name: 'sca',
                                value: post.sca,
                                pahtZoom: path('Ajax.liste.sca'),
                                paramZoom: "{'sca_valide': 'on', 'CODE_STE' : '"~societe~"'}",
                                entity: 'Sscptana',
                                titleZoom: 'Liste des sous comptes d\'analyse' | trad,
                                pathConvert: path('Ajax.outil.convertLibelle'),
                                codeBDD: 'CODE_SCA',
                                libelleBDD: 'LIBELLE',
                                widthPopup: 'modal_large',
                                valueTexteZoom: post.CODE_SCA_LIBELLE,
                                paramConvertLibelle: "{'filter_egal_CODE_STE' : '"~societe~"'}",
                            }) }}
                        </div>
                    </div>
                    <button type="submit" class="principal button btn_filtre last button_right" style="margin-top:2%">{{ 'Filtrer' | trad }}</button>
                </div>

                    
            
                <div class="resultat_filtre ">
                    {{ bullFiltre(post, 'form-main') }}
                </div>
                 
                <h2 style="display: flex; gap: 1em; justify-content: space-between;">
                    <div style="display: flex; justify-content: flex-start; gap: 0.5em;">
                        <span style="width: 11.5em">{{ 'Liste des commandes' | trad }}</span>
                        <button class="secondaire button refresh_v2" style="border: none; height: 2.5em; width: 2.5em" form="form-main"></button>
                    </div>
                    <div style="display: flex; flex-direction: row-reverse; flex-wrap: nowrap; width: 35%">
                        <button type="button" 
                            class="principal button" 
                            onclick="affections();"
                        >{{ 'Valider' | trad }}</button>
                        {% if facture.urlImageFacture != '' and facture.urlImageFacture != ' ' %}
                        <a class="button secondaire" href="{{ facture.urlImageFacture }}" target="_blank" id="btn_afficher_facture">{{ 'Afficher la facture' | trad }}</a>
                        {% endif %}
                        <button type="button" class="secondaire" onClick="redirectJSWithPost('{{ path('Facture.GestionFacture.index') }}', {{ postGestion }});">{{ 'Annuler' | trad }}</button>
                        <button type="button" class="secondaire button" id="cmdNonFacturable">{{ 'Voir commandes non facturables' | trad }}</button>
                        {% if fournisseurHasArticleSansCommande and not isAcompte %}
                            <button type="button" class="secondaire button" onclick="activeLoader();affectionsFactSansCommande();">{{ 'Facture sans commande' | trad }}</button>
                        {% endif %}
                    </div>
                    
                    
                </h2> 
                <section id="section-table-cde"
                    class="{{ facture.urlImageFacture != '' 
                        and facture.urlImageFacture != ' ' ? 'affichageFicLAD' }}" 
                >
                    {% set listSelectionCde = (post.listSelectionCde ?? []) %}
                    {% for selection in listSelectionCde %}
                    <input type="hidden" name="listSelectionCde[]" value="{{ selection | e('html_attr') }}">
                    {% endfor %}
                    <table class="table" id="tab_commande">
                        <thead class="thead-dark">
                            <tr>
                                <th scope="col" width="7%">{{ triTable('NO_CDE',  post.tri_NO_CDE, 'N° de Cde' | trad, '', '', 'form-main') }}</th>
                                <th scope="col" width="10%">{{ triTable('ETAT_CDE',  post.tri_ETAT_CDE, 'Etat' | trad, '', '', 'form-main') }}</th>
                                <th scope="col">{{ 'Objet' | trad }}</th>                                    
                                <th scope="col">{{ triTable('ACH',  post.tri_ACH, 'Acheteur' | trad, '', '', 'form-main') }}</th>
                                <th scope="col">{{ triTable('DEMANDEUR',  post.tri_DEMANDEUR, 'Demandeur' | trad, '', '', 'form-main') }}</th>
                                <th scope="col" width="13%">{{ triTable('TOT_CDEHT',  post.tri_TOT_CDEHT, 'Total HT' | trad, '', '', 'form-main') }}</th>
                                <th scope="col" width="10%" class="white-tooltip" colspan="2">
                                    <span class="infos_tooltip left">
                                        {{ 'Tout sélectionner' | trad }}
                                    </span>
                                    <input type="checkbox" 
                                        data-checkall-input="chackAll" 
                                        class="form-control checkbox"
                                    />
                               	</th>                                    
                            </tr>
                        </thead>
                        <tbody>
                        	<tr class="recherche">
            					<td>{{ filterTable('NO_CDE', post.filter_NO_CDE, '', '', '', 'form-main', '', 'N° de Cde' | trad) }}</td>
            					<td>{{ filterSelect('ETAT_CDE', post.filter_ETAT_CDE, listeEtat, 'form-main','','','','','Etat' | trad) }}</td>
            					<td>{{ filterTable('OBJET_CA', post.filter_OBJET_CA, '', '', '', 'form-main', '', 'Objet' | trad) }}</td>
            					<td>{{ zoomFilter('ACH', post.filter_ACH, '', 'form-main', path('Ajax.liste.acheteurUser'), 'Liste des acheteurs' | trad, '', '', 'Acheteur' | trad) }}</td>
            					<td>{{ zoomFilter('DEMANDEUR', post.filter_DEMANDEUR, '', 'form-main', path('Ajax.liste.demandeur'), 'Liste des demandeurs' | trad, '', '', 'Demandeur' | trad) }}</td>
            					<td>{{ filterTable('TOT_CDEHT', post.filter_TOT_CDEHT, '', '', '', 'form-main', '', 'Total HT' | trad) }}</td>
            					<td colspan="2"></td>
            				</tr>

    		
                        {% for commande in commandes %}
                            <tr id="commande{{ commande.NO_CDE }}">
                                <td class="toggleSlide" onclick="toggleSlide('{{ path('Facture.ajax.detailChoixDesCommandes') }}' , 'commande{{ commande.NO_CDE }}detail', {id : {{ commande.NO_CDE }} } );" id="{{ commande.NO_CDE }}">
                                    <div class="flex items-center gap-2">
                                        <span>{{ commande.NO_CDE }}</span>
                                        {% if commande.termPaie %}
                                            <span class="white-tooltip icosq-mg-termes-de-paiement" style="cursor: pointer;">
                                                <span class="infos_tooltip top-right" style="font-size: smaller !important;">
                                                    {{'Termes de paiement présents sur cette commande.'| trad}}
                                                </span>
                                            </span>
                                        {% endif %}
                                    </div>
								</span>
                                </td>
                                <td>
                                    {{ listeEtat[commande.ETAT_CDE] }}
           			            </td>
                                <td>{{ commande.OBJET_CA | convert_encoding('UTF-8', 'ISO-8859-1') }}</td>
                                <td>{{ commande.ACHNOM }}{% if commande.ACH!='' and commande.ACH!=' ' %} ({{ commande.ACH }}){% endif %}</td>
                                <td>{{ commande.DEMANDEURNOM }}{% if commande.DEMANDEUR!='' and commande.DEMANDEUR!=' ' %} ({{ commande.DEMANDEUR }}){% endif %}</td>
                                <td align="right">{{ commande.TOT_CDEHT | prix }} {{ commande.DEVISE }}</td>
                                <td>
                                    <div style="display: flex; align-items: end;">
                                    <input type="checkbox"
                                        name="listSelectionCde[]"
                                        value="{{ commande.NO_CDE }}" 
                                        class="form-control checkbox" 
                                        data-checkall="chackAll"
                                        {{ commande.NO_CDE in listSelectionCde 
                                            or commande.NO_CDE==numCde 
                                            or commande.NO_CDE==facture.NUM_CDE 
                                            ? 'checked'
                                        }} 
                                    />
                                    
                                    {# affichage icone incident #}
                                    {% if commande.incident>0 %}
                                        <a href="{{ path('GlobalApplication.Incidents.incidents', {'MODULE': 'ChoixCommandeFacture', 'id' : commande.NO_CDE }) }}" class="alerte_orange white-tooltip">
                                        <span class="infos_tooltip top-left">
                                            {{ 'Incident(s) présent(s) sur cette commande' | trad }}
                                        </span>
                                    </a>
                                    </div>
                                    {% endif %}                                   
                                </td>
                                <td>
                                    <div class="parametrage">
                                    	{{ menuContextuel('commande'~commande.NO_CDE, false, commande.menuContextuel, 6) }}
                                    </div>
                                </td>
                            </tr>
                            <tr class="detail_ligne hide_detail" style="display:none" id="commande{{ commande.NO_CDE }}detail" ></tr>
                            {% endfor %}
                        </tbody>
                    </table>
                    {# TODO : factorize pagination #}
                    {# Note : due to listSelectionCde we used a custom pagination #}
                    <nav aria-label="Page navigation">
                        <ul class="pagination" id="pagination"></ul>
                    </nav>
                    <script>
                        ajaxPagination("#pagination", "#section-table-cde", {
                            pageCount: {{ infoPagination.nombreDePage }},
                            page: {{ infoPagination.page }},
                            path: {{ path('Facture.CreationFacture.choixCommande', {
                                action: action,
                                numFact: numFact,
                                fournisseur: fournisseur,
                                societe: societe,
                                numCde: numCde,
                            }) | json }},
                            postKey: 'page',
                        }, function() {
                            return new FormData(document.getElementById('form-main'));
                        });
                    </script>
                    <div style="padding-right: 0px;" class="modal-footer">
                        <a onClick="redirectJSWithPost('{{ path('Facture.GestionFacture.index') }}', {{ postGestion }});"><button type="button" class="secondaire">{{ 'Annuler' | trad }}</button></a>
                        {% if facture.urlImageFacture != '' and facture.urlImageFacture != ' ' %}
                        <a class="button secondaire" href="{{ facture.urlImageFacture }}" target="_blank" id="btn_afficher_facture">{{ 'Afficher la facture' | trad }}</a>
                        {% endif %}
                        <input type="hidden" name="articleSansCommande" id="articleSansCommande" value={{ post.articleSansCommande ?? 0 }}>
                        <input type="hidden" name="TAUX_TVA" id="TAUX_TVA" value={{ post.TAUX_TVA ?? 0 }}>
                        <input type="hidden" name="MNT_TVA" id="MNT_TVA" value={{ post.MNT_TVA ?? 0 }}>
                        <button style="margin-right: 0px;" type="button" id="btnValider"
                            class="principal button" 
                        >{{ 'Valider' | trad }}</button>
                    </div>
                </section>
            	{% if facture.urlImageFacture != '' and facture.urlImageFacture != ' ' %}
                    {% include '@Facture/creation-facture/_iframeFicLad.twig' with {facture: facture} only %}
                {% endif %}
            </form>
            
        </div>
    </div>
</div>

<script>

$('#btnValider').on('click', () => {
    affections();
})

$('#cmdNonFacturable').on('click', () => {
    const valTp = $('#input_tp').val();
    $('#objectFicLad').hide(); 
    ajaxPopup('{{ path('Facture.popup.commandesNonFacturables') }}',
        '{{ (post.tp == "BOTH" or post.tp is null) ? ("Commandes non facturables" | trad) : (post.tp == "AVEC" ? ("Commandes non facturables avec termes de paiement" | trad) : ("Commandes non facturables sans termes de paiement" | trad)) }}',
        '',
        '',
        {'CODE_FOUR' : '{{ facture.CODE_FOUR }}', 'CODE_STE' : '{{ facture.CODE_STE }}'{% if isAcompte %}, 'tp':  '{{ post.tp ?? '' }}'{% endif %} },
         'modal_large'
    );
    $('#myModal .modal-close').on('click', () =>  {
        $('#objectFicLad').show();
    });
});

function affections() {
    activeLoader();
    $.ajax({
        dataType : 'JSON',
        url: {{ path('Facture.CreationFacture.wsdlAffectation', {
            'action': action,
            'numFact': numFact,
            'fournisseur': fournisseur,
            'societe': societe,
            'numCde' : numCde,
            'typeListeAffichee': 'commande',
            'choixLad' : 0,
            'nonAffichageChoixCommande' : 0
        }) | json }},
        data: $('#form-main').serialize(),
        type: 'POST', // la méthode indiquée dans le formulaire (get ou post)
        success: function(data) { // je récupère la réponse du fichier PHP

            if(data.statut == 'enregEnCours'){
                asyncBackground(null, data);
            }
            if(data.statut == 'redirect'){
                redirectJSWithPost({{ path(
                    'Facture.CreationFacture.affectation',
                    {
                        'action': action,
                        'numFact': numFact,
                        'fournisseur': fournisseur,
                        'societe': societe,
                        'numCde' : numCde,
                        'typeListeAffichee': 'commande',
                        'choixLad' : 0,
                        'nonAffichageChoixCommande' : 0
                    }
                ) | json }});
            }
        }, 
        error: function (xhr){
            desactiveLoader();
            activePopupError(
                window.oxaproc.trad['Erreur validation'],
                xhr.responseText,
                'modal_small'
            );
        } 
    }); 

    
}
{% if not isAcompte %}
    function affectionsFactSansCommande() {
        activeLoader();
        $.ajax({
            dataType : 'JSON',
            url: {{ path('Facture.CreationFacture.wsdlAffectation', {
                'action': action,
                'numFact': numFact,
                'fournisseur': fournisseur,
                'societe': societe,
                'numCde' : 'all',
                'typeListeAffichee': 'factsanscommande',
                'choixLad' : 0,
                'nonAffichageChoixCommande' : 0
            }) | json }},
            data: $('#form-main').serialize(),
            type: 'POST', // la méthode indiquée dans le formulaire (get ou post)
            success: function(data) { // je récupère la réponse du fichier PHP

                if(data.statut == 'enregEnCours'){
                    asyncBackground(null, data);
                }
                if(data.statut == 'redirect'){
                    redirectJSWithPost({{ path(
                        'Facture.CreationFacture.affectation',
                        {
                            'action': action,
                            'numFact': numFact,
                            'fournisseur': fournisseur,
                            'societe': societe,
                            'numCde' : numCde,
                            'typeListeAffichee': 'factsanscommande',
                            'choixLad' : 0,
                            'nonAffichageChoixCommande' : 0
                        }
                    ) | json }});
                }
            }, 
            error: function (xhr){
                desactiveLoader();
                activePopupError(
                    window.oxaproc.trad['Erreur validation'],
                    xhr.responseText,
                    'modal_small'
                );
            } 
        }); 
    }
{% endif %}
</script>   

{% if MsgErreur | trim %}
<script>activePopupErreur('{{ path('Ajax.Erreur.popupErreurAlerteEtAvertissement') }}', '', '', '', {'alerte': "{{MsgErreur|raw}}"});</script>
{% endif %}

{% endblock %}

