{% extends 'layout.twig' %}

{% block body %}
    <div class="clearfix titre_div"  id="Commande">
        <h1>{{ 'Commande' | trad }}</h1>
        {{ ariane() }}
        
        <h2>
            {{  'Création d\'un entête de commande' | trad  }} : 
            
            {{ Button(
                'Annuler' | trad,
                0,
                typeCde == 'DA' ? path('DemandeAchat.GestionDemandeAchat.index') :path('Commande.GestionCommande.index')
            ) }}
            {{ Button('Création' | trad, 1,'', "validationEnteteCommande()") }}
        </h2>
        
    <script>
        function validationEnteteCommande(confirm)
        {
            let form = document.getElementById('form_creationCde');
            let formData = new FormData(form);
            if ( confirm ) {
                formData.append('confirm','1');
            }

            activeLoader();
            $.ajax({
                url: {{ path('Commande.CreationCommande.validation', {mode: MODE}) | json }},
                type: 'POST',
                data: formData,
                contentType: false,
                processData: false,
                success: function (data) {
                    window.location.href = data.path;
                },
                error: function (xhr){
                    desactiveLoader();

                    // Case: require confirmation
                    if (xhr.getResponseHeader('Content-Type') == 'application/json') {
                        let response = JSON.parse(xhr.responseText);

                        if (response.type != 'confirm') throw 'Invalid type';

                        activePopup(
                            {{ 'Confirmez-vous la création de la commande ?' | trad | json }},
                            response.popupHtml,
                            'modal_small'
                        );
                        document.querySelector('[data-popupwarning-cancel]')
                            .addEventListener('click', function () {
                                desactivePopup();
                            });
                        document.querySelector('[data-popupwarning-continue]')
                            .addEventListener('click', function () {
                                // Resend form with confirm
                                validationEnteteCommande(true);
                                desactivePopup();
                            });
                        return;
                    }

                    // Simple error
                    activePopupError(
                        {{ 'Erreur lors de la validation du formulaire' | trad | json }},
                        xhr.responseText,
                        "modal_small"
                    );
                }
            });
        };
    </script>

        <div class="contenu tab-content">
            <form action="" method="post" name="form_creationCde" id="form_creationCde" class="padding15" >
                <div id="contentFixe" class="clearfix bg_form padding_form border_form {% if typeElement != '' %}colonne2{% endif %}">
                    {% if param.MODELE_ACTIF %}
                        <div class="clearfix">
                            <div class="row single">
                                {{ inputAdvance('ZOOMADVANCE', {
                                    'titre' : 'Modèle de commande' | trad,
                                    'name' : 'modeleCde',
                                    'entity' : 'Mca',
                                    'pahtZoom' : path('Ajax.liste.commandeModele'),
                                    'pathConvert' : path('Ajax.outil.convertLibelle'),
                                    'convertLibelle' : 'convertLibelleGlobal',
                                    'pathValidator' : path('Ajax.validator.zoom'),
                                    'paramsValidator' : "{'entity' : 'Mca','nomChamp' : '"~'Modèle de commande' | trad~"', 'null' : "~(param.OBLI_MODELE? 'false':'true')~"}",
                                    'entity' : 'Mca',
                                    'titleZoom' : 'Liste des modèles de commande' | trad,
                                    'option' : param.LOCK_MODELE? 'readOnly':'',
                                    'value' : cde.modeleCde,
                                    'obligatoire' : param.OBLI_MODELE? true:false,
                                }) }}
                            </div>
                        </div>
                        <script>
                            $("#input_modeleCde").change(function(){
                                activeLoader();
                                $.ajax({
                                    dataType : 'html',
                                    url: window.location.pathname,
                                    data: $('#form_creationCde').serialize() + "&MODE=ChangeMODELE", 
                                    type: "POST",
                                    success: function(result){            
                                        refreshFonction('contentFixe', result);
                                        /*refreshFonction('initialisation', result);
                                        refreshFonction('fournisseur', result);
                                        refreshFonction('reception', result);*/
                                        
                                        desactiveLoader();
                                    }
                                });
                            });
                        </script>
                    {% endif %}
                    <div class="clearfix ">
                        <div class="colonne2">
                            <div class="row">
                                {{ inputAdvance('ZOOMADVANCE', {
                                    'titre' : 'Acheteur' | trad,
                                    'name' : 'ACH',
                                    'obligatoire' : true,
                                    'pahtZoom' : path('Ajax.liste.acheteur'),
                                    'paramZoom' : "{'filter_egal_CODE_STE' : $('#input_CODE_STE').val() }",
                                    'entity' : 'HASTUTIL',
                                    'titleZoom' : 'Liste des acheteurs' | trad,
                                    'pathConvert' : path('Ajax.outil.convertLibelle'),
                                    'convertLibelle' : 'convertLibelleGlobal',
                                    'pathValidator' : path('Ajax.validator.acheteur'),
                                    'paramsValidator' : "{'nomChamp' : '"~'Acheteur' | trad~"', 'null' : false, 'post' : {'filter_egal_CODE_STE' : $('#input_CODE_STE').val(),'VALIDE' : 1}}",
                                    'value' : cde.ACH
                                }) }}
                            </div>
                        </div>
                        <div class="colonne2 last">
                            <div class="row">
                            {{ inputAdvance('ZOOMADVANCE', {
                                'titre' : 'Société' | trad,
                                'name' : 'CODE_STE',
                                'pahtZoom' : path('Ajax.liste.societe'),
                                'paramZoom' : "{"~param.filter_SOC~"}",
                                'entity' : 'Societe',
                                'titleZoom' : 'Liste des sociétés' | trad,
                                'pathConvert' : path('Ajax.outil.convertLibelle'),
                                'convertLibelle' : 'convertLibelleGlobal',
                                'pathValidator' : path('Ajax.validator.zoom'),
                                'paramsValidator' : "{'entity' : 'Societe','nomChamp' : '"~'Société' | trad~"', 'null' : false}",
                                'option' : param.LOCK_SOC? 'readOnly':'',
                                'obligatoire' : true,
                                'value' : cde.CODE_STE
                            }) }}
                            </div>
                        </div>
                    </div>
                    <fieldset class="scheduler-border">
                            <legend class="scheduler-border">{{ 'Commande' | trad }}</legend>
                        <div class="colonne2">
                            <div class="row" id="numCde">
                                {{ inputAdvance('TEXTE', {
                                    'titre' : 'Numéro' | trad,
                                    'name' : 'NO_CDE',
                                    'pathValidator' : path('Ajax.validator.integer'),
                                    'paramsValidator' : "{'sizeMin' : '0', 'sizeMax' : '9'}",
                                    'value' : cde.NO_CDE,
                                    'option' : paramNum == 'M' ? '':'readOnly',
                                    'obligatoire' : paramNum == 'M' ? true:false,
                                }) }}
                            </div>
                            <div class="row">
                                {{ inputAdvance('DATE', {
                                    'titre' : 'Date période' | trad,
                                    'name' : 'DATE_PER',
                                    'pathValidator' : path('Ajax.validator.isDateOuverte'),
                                    'paramsValidator' : "{'societe': $('#input_CODE_STE').val(), 'typeDoc' : 'CDE', 'bloquant' : false}",
                                    'obligatoire' : true,
                                    'value' : cde.DATE_PER
                                }) }}
                            </div>
                        </div>
                        <div class="colonne2 last">
                            <div class="row">
                                {{ inputAdvance('ZOOMADVANCE', {
                                    'titre' : 'Type de commande' | trad,
                                    'name' : 'TYP_DOC',
                                    'pahtZoom' : path('Ajax.liste.typeDoc'),
                                    'paramZoom' : "{'valide':true, 'oxaproc' : 1}",
                                    'entity' : 'typeDoc',
                                    'titleZoom' : 'Liste des types de documents' |trad,
                                    'pathConvert' : path('Ajax.outil.convertLibelle'),
                                    'convertLibelle' : 'convertLibelleGlobal',
                                    'pathValidator' : path('Ajax.validator.zoom'),
                                    'paramsValidator' : "{'entity' : 'typeDoc','nomChamp' : '"~'Type de commande' | trad~"', 'null' : false}",
                                    'value' : cde.TYPEDOC,
                                    'obligatoire' : true,
                                    'option' : param.LOCK_TYP? 'readOnly':'',
                                }) }}
                            </div>
                            {% if param.AFF_TMP %}
                                <div class="row">
                                    {{ inputAdvance('SELECT', {
                                        'titre' : 'Type de marché public' | trad,
                                        'name' : 'TYPNMP',
                                        'listeValue' : {
                                            'C': 'Continu' | trad,
                                            'R': 'Récurrent' | trad,
                                            'U': 'Unique' | trad
                                        },
                                        'obligatoire' : true,
                                        'value' : cde.TYPNMP??'',
                                        'option' : param.LOCK_TYPNMP? 'readOnly':'',
                                    }) }}
                                </div>
                            {% endif %}
                        </div>
                    </fieldset>
                    
                    
                    
                    
                    <fieldset class="scheduler-border">
                        <legend class="scheduler-border">{{ 'Initialisation' | trad }}</legend>

                        <div class="colonne2">
                            <div class="row">
                                {{ inputAdvance('SELECT', {
                                    'titre' : 'Origine' | trad,
                                    'name' : 'origineCde',
                                    'listeValue': {
                                        '': 'Rien' | trad,
                                        'DA': 'Depuis une demande d\'achat' | trad,
                                        'AO': 'Depuis une consultation' | trad
                                    },
                                    'value' : cde.origineCde??'',
                                    'option' : cde.origineCde? 'readOnly':'',
                                }) }}
                            </div>
                        </div>
                        
                        <div id="DA" {% if cde.origineCde != 'DA' %} style="display:none" {% endif %}>
                            <div class="colonne2">
                                <div class="row">
                                    {{ inputAdvance('ZOOM', {
                                        'titre' : 'DA' | trad,
                                        'name' : 'DA',
                                        'pahtZoom' : path('Commande.popupCreationCde.popupListeDA'),
                                        'paramZoom' : "{'filter_egal_CODE_STE' : $('#input_CODE_STE').val(), 'tri_NO_DA' : 'asc'}",
                                        'titleZoom' : 'Liste des DA' | trad,
                                        'widthPopup' : 'large',
                                        'pathValidator' : path('Commande.AjaxCreationCommande.validatorDA'),
                                        'paramsValidator' : "{'null' : true, 'post' : {'codeSte' : $('#input_CODE_STE').val() }}",
                                        'value' : cde.DA,
                                        'option' : param.LOCK_DA? 'readOnly':'',
                                    }) }}
                                </div>                         
                            </div>
                            <div class="colonne2 last">
                                <center><a id="showDAImport" class="button principal showImport" style="display:none;">{{ 'Voir détail' | trad }}</a></center>
                            </div>
                        </div>
                        
                        
                        <div id="AO" {%  if cde.origineCde != 'AO' %}style="display:none" {% endif %}>
                            <div class="colonne2">
                                <div class="row">
                                {{ inputAdvance('ZOOM', {
                                    'titre' : 'Consultation' | trad,
                                    'name' : 'AO',
                                    'pahtZoom' : path('Commande.popupCreationCde.popupListeAO'),
                                    'paramZoom' : "{'code_ste' : $('#input_CODE_STE').val(), 'tri_NO_AO' : 'asc'}",
                                    'titleZoom' : 'Liste des consultations' | trad,
                                    'widthPopup' : 'large',
                                    'pathValidator' : path('Commande.AjaxCreationCommande.validatorAO'),
                                    'paramsValidator' : "{'null' : true, 'post' : {'codeSte' : $('#input_CODE_STE').val()} }",
                                    'value' : cde.AO,
                                    'option' : param.LOCK_AO? 'readOnly':'',
                                }) }}
                                </div>                         
                            </div>
                            <div class="colonne2 last">
                                <center><a id="showImport" class="button principal showImport" style="display:none;">{{ 'Voir détail' | trad }}</a></center>
                            </div>
                        </div>

                        <div class="clearfix separator-top" id="initialisation">
                            <div class="colonne2">
                                <div class="row">
                                    {{ inputAdvance('ZOOMADVANCE', {
                                        'titre' : 'Demandeur' | trad,
                                        'name' : 'DEMANDEUR',
                                        'pahtZoom' : path('Ajax.liste.demandeur'),
                                        'entity' : 'HASTUTIL',
                                        'titleZoom' : 'Liste des demandeurs' | trad,
                                        'pathConvert' : path('Ajax.outil.convertLibelle'),
                                        'paramZoom' : "{}",
                                        'convertLibelle' : 'convertLibelleGlobal',
                                        'pathValidator' : path('Ajax.validator.zoom'),
                                        'paramsValidator' : "{'entity' : 'HASTUTIL','nomChamp' : '"~'Demandeur' | trad~"', 'null' : false, 'post' : {/*'filter_egal_CODE_STE' : $('#input_CODE_STE').val(), */ 'filter_DEMAND' : 'T'}}",
                                        'value' : cde.DEMANDEUR,
                                    }) }}
                                </div>
                                <div class="row">
                                    {{ inputAdvance('ZOOMADVANCE', {
                                        'titre' : 'Centre émetteur' | trad,
                                        'name' : 'CTR_EMETT',
                                        'pahtZoom' : path('Ajax.liste.centreEmetteur'),
                                        'paramZoom' : "{'code_ste' : $('#input_CODE_STE').val() }",
                                        'entity' : 'Centre',
                                        'titleZoom' : 'Liste des centres' | trad,
                                        'pathConvert' : path('Ajax.outil.convertLibelle'),
                                        'convertLibelle' : 'convertLibelleGlobal',
                                        'pathValidator' : path('Ajax.validator.zoom'),
                                        'paramsValidator' : "{'entity' : 'Centre','nomChamp' : '"~'Centre émetteur' | trad~"', 'null' : false, 'post' : {'filter_EMISSION' : 'T', 'filter_CODE_STE' : ''}}",
                                        'value' : cde.CTR_EMETT,
                                        'obligatoire' : true,
                                        'option' : param.LOCK_CTR_EMET? 'readOnly':''
                                    }) }}
                                </div>
                                <div class="row">
                                    {{ inputAdvance('ZOOMADVANCE', {
                                        'titre' : 'Centre de livraison' | trad,
                                        'name' : 'CTR_LIV',
                                        'pahtZoom' : path('Ajax.liste.centreLivraison'),
                                        'paramZoom' : "{'code_ste' : $('#input_CODE_STE').val() }",
                                        'entity' : 'Centre',
                                        'titleZoom' : 'Liste des centres' | trad,
                                        'pathConvert' : path('Ajax.outil.convertLibelle'),
                                        'convertLibelle' : 'convertLibelleGlobal',
                                        'pathValidator' : path('Ajax.validator.zoom'),
                                        'paramsValidator' : "{'entity' : 'Centre','nomChamp' : '"~'Centre de livraison' | trad~"', 'null' : false, 'post' : {'filter_LIVRAISON' : 'T', 'filter_CODE_STE' : ''}}",
                                        'value' : cde.CTR_LIV,
                                        'obligatoire' : true,
                                        'option' : param.LOCK_CTR_LIV? 'readOnly':''
                                    }) }}
                                </div>
                                <SCRIPT>
                                    $('#input_CTR_LIV').change(function(){
                                        $.ajax({
                                            dataType : 'html',
                                            url: window.location.pathname,
                                            data: $('#form_creationCde').serialize() + "&MODE=ChangeCtrLiv", 
                                            type: "POST",
                                            success: function(result){            	  		
                                                refreshFonction('modeTransportDiv', result);
                                                refreshFonction('recapAutoStep2', result);
                                            }
                                        });
                                    });
                                </SCRIPT>
                                
                                {% if param.expeditionActif %}
                                    <div id="modeTransportDiv">
                                        <div class="row" {% if param.MODIF_MODTRANS %}{% else %}style="display:none;"{% endif %}>
                                            {{ inputAdvance('SELECT', {
                                                'titre' : 'Mode de transport' | trad,
                                                'name' : 'MOD_TRANS',
                                                'listeValue' : tabTransport,
                                                'value' : cde.MOD_TRANS??'',
                                            }) }}
                                        </div>
                                    </div>
                                {% endif %}
                            </div>
                            <div class="colonne2 last">
                                {% if impConfig.SectImp.isActive %}
                                    <div class="row">
                                        {{ inputAdvance('ZOOMADVANCE', {
                                            'titre' : 'Section d\'imp.' | trad,
                                            'name' : 'SECTIMP',
                                            'pahtZoom' : path('Ajax.liste.si'),
                                            'paramZoom' : "{'si_valide': 'on', 'CODE_STE' : $('#input_CODE_STE').val() }",
                                            'entity' : 'Sectimpu',
                                            'codeSte' : cde.CODE_STE,
                                            'widthPopup' : 'modal_large',
                                            'titleZoom' : 'Liste des sections d\'imputation' | trad,
                                            'pathConvert' : path('Ajax.outil.convertLibelle'),
                                            'convertLibelle' : 'convertLibelleGlobal',
                                            'pathValidator' : path('Ajax.validator.zoom'),
                                            'paramsValidator' : "{'entity' : 'Sectimpu','nomChamp' : '"~('Section d\'imp.' | trad |e('js')|raw)~"', 'null' : true, 'post' : {'filter_egal_CODE_STE' : "~(param.SI_SECTO? "$('#input_CODE_STE').val()":"''")~"} }",
                                            'value' : cde.SECTIMP,
                                            'option' : param.LOCK_SI? 'readOnly':'',
                                            'codeSte' : cde.CODE_STE,
                                            'faceAttr' : {
                                                'data-stelink' : 'input_CODE_STE',
                                            },
                                        }) }}
                                    </div>
                                    <div class="row">
                                        {{ inputAdvance('TREEVIEW', {
                                            'titre' : 'Code gestion' | trad,
                                            'name' : 'CODGES',
                                            'pathTreeview' : path('Ajax.Treeview.codeGestion'),
                                            'paramsTreeview' : "{'CODE_SI': $('#input_SECTIMP').val(), 'cg_valide': 'on', 'inputCG' : 'CODGES', 'CODE_STE': $('#input_CODE_STE').val(), 'affichageLibelle' : 1}",
                                            'titleTreeview' : 'liste des codes gestion' | trad,
                                            'value' : cde.CODGES,
                                            'convertLibelle' : 'cgTrad',
                                            'sectimpu' : cde.SECTIMP,
                                            'codeSteCG' : cde.CODE_STE,
                                            'pathValidator' : path('Ajax.validator.codeGestion'),
                                            'paramsValidator' : "{'nomChamp' : '"~ ('Code gestion' | trad |e('js')|raw)~"', 'null' : true, 'CODE_SI': $('#input_SECTIMP').val(), 'CODE_STE': $('#input_CODE_STE').val()}",
                                            '_pathConvert' : path('Ajax.outil.convertLibelle'),
                                            'entity' : 'Codgest',
                                            'codeBDD' : 'CODE_GES',
                                            'libelleBDD' : 'CODE_AFF',
                                            'option' : param.MODIF_CODGES ? '' : 'readOnly',
                                            'siLink': 'input_SECTIMP',
                                            'codeSte' : '$(\'#input_CODE_STE\').val()',

                                            'myFunction' : 'convertLibelleCodeGestion',
                                            'myParams' : '["'~path('Ajax.outil.convertLibelleCodeGestion')~'", this, "CODE_GES", "CODE_AFF", "input_CODGES", "text_CODGES", null, "1", "", "input_si", 1, ]',
                                        }) }}          
                                    </div>
                                {% endif %}
                                {% if impConfig.CodeCompl.isActive %}                                
                                    <div class="row">
                                        {{ inputAdvance('ZOOMADVANCE', {
                                            'titre' : 'Code compl.' | trad,
                                            'name' : 'CODECOMP',
                                            'pahtZoom' : path('Ajax.liste.cdc'),
                                            'paramZoom' : "{'CODE_STE' : $('#input_CODE_STE').val(), 'cdc_valide':'1' }",
                                            'entity' : 'codeComp',
                                            'codeSte' : cde.CODE_STE,
                                            'widthPopup' : 'modal_large',
                                            'titleZoom' : 'Liste des codes complémentaires' | trad,
                                            'pathConvert' : path('Ajax.outil.convertLibelle'),
                                            'convertLibelle' : 'convertLibelleGlobal',
                                            'pathValidator' : path('Ajax.validator.zoom'),
                                            'paramsValidator' : "{'entity' : 'codeComp','nomChamp' : '"~'Code compl.' | trad~"', 'null' : true, 'post' : {'filter_egal_CODE_STE' : "~(param.CDC_SECTO? "$('#input_CODE_STE').val()":"''")~"}}",
                                            'value' : cde.CODECOMP,
                                            'option' : param.LOCK_CDC? 'readOnly':'',
                                            'codeSte' : cde.CODE_STE,
                                            'faceAttr' : {
                                                'data-stelink' : 'input_CODE_STE',
                                            },
                                        }) }}
                                    </div>
                                {% endif %}
                                {% if impConfig.SousCompteAna.isActive %}
                                    <div class="row">
                                        {{ inputAdvance('ZOOMADVANCE', {
                                            'titre' : 'SsCptAna' | trad,
                                            'name' : 'SSCPTEANA',
                                            'pahtZoom' : path('Ajax.liste.sca'),
                                            'paramZoom' : "{'filter_egal_CODE_STE' : $('#input_CODE_STE').val(),'sca_valide' :1 }",
                                            'entity' : 'Sscptana',
                                            'codeSte' : cde.CODE_STE,
                                            'titleZoom' : 'Liste des sous-comptes d\'analyse' | trad,
                                            'pathConvert' : path('Ajax.outil.convertLibelle'),
                                            'convertLibelle' : 'convertLibelleGlobal',
                                            'pathValidator' : path('Ajax.validator.zoom'),
                                            'paramsValidator' : "{'entity' : 'Sscptana','nomChamp' : '"~'SsCptAna' | trad~"', 'null' : true, 'post' : {'filter_egal_CODE_STE' : "~(param.SCA_SECTO? "$('#input_CODE_STE').val()":"''")~"}}",
                                            'value' : cde.SSCPTEANA,
                                            'option' : param.LOCK_SCA? 'readOnly':'',
                                            'codeSte' : cde.CODE_STE,
                                            'faceAttr' : {
                                                'data-stelink' : 'input_CODE_STE',
                                            },
                                        }) }}
                                    </div>
                                {% endif %}
                                <div class="row">
                                    {{ inputAdvance('DATE', {
                                        'titre' : 'Date de livraison' | trad,
                                        'name' : 'DTE_LIV',
                                        'pathValidator' : path('Ajax.validator.date'), 
                                        'paramsValidator' : '{}',
                                        'value' : commande.DTE_LIV | dateTrad,
                                    }) }}
                                </div>
                                <div class="row">
                                    {{ inputAdvance('SELECT', {
                                        'titre' : 'Présentation date de livraison' | trad,
                                        'name' : 'TYPDATE',
                                        'listeValue' : {
                                            'D': 'Date' | trad,
                                            'S': 'Semaine' | trad,
                                            'M': 'Mois' | trad,
                                        },
                                        'value' : commande.TYPDATE??'D',
                                    }) }}
                                </div>
                            </div>
                            <script>
                                $(function() {
                                    $( ".datepicker" ).datepicker({
                                        showOn: "button",
                                        buttonImage: "{{ baseUrl('IconeV2/Global/deadline-change.svg') }}",
                                        buttonImageOnly: true,
                                /* 		minDate: "-3M",
                                        maxDate: "+1M", */
                                        showAnim: "fade",
                                        dateFormat: "{{ 'dd/mm/yy' | paramDateFormat }}"
                                    });
                                });
                            </script>
                        </div>
                        
                        <script>
                            /* Permet l'affichage de la ligne DA ou AO */
                            $("#input_origineCde").change(function(){
                                var origine = $("#input_origineCde").val();
                                $("#contentDynamique").html('');
                                $( ".showImport" ).hide();
    
                                $('#input_DA').val('');
                                $('#input_AO').val('');
                                
                                if(origine=="AO")
                                {                	
                                    $("#AO").show();
                                    $("#DA").hide();
        
                                    $("#contentDynamique").hide();
                                    $("#contentFixe").removeClass('colonne2');
                                }
                                else if(origine=="DA")
                                {
                                    $("#AO").hide();
                                    $("#DA").show();
                                    
                                    $("#contentDynamique").hide();
                                    $("#contentFixe").removeClass('colonne2');
                                }
                                else
                                {
                                    $("#contentDynamique").hide();
                                    $("#contentFixe").removeClass('colonne2');
                                    $("#DA").hide();
                                    $("#AO").hide();
                                }
                            });
    
                            /* Affiche le menu de droite des éléments de l'ao/da selectionné */
                            $( ".showImport" ).click(function() {
                                $("#contentFixe").addClass('colonne2');
                                $("#contentDynamique").show();
                                $(".showImport").hide();
                            });
    
                            /* fonction charge le content du menu droit des elements ao/da selectionné avec l'affichage auto */
                            function loaderDonnerAODA(typeElement)
                            {
                                activeLoader();
                                $.ajax({
                                    dataType : 'html',
                                    url: window.location.pathname,
                                    data: $('#form_creationCde').serialize() + "&MODE=Change"+typeElement, 
                                    type: "POST",
                                    success: function(result){            	  		
                                        refreshFonction('initialisation', result);
                                        refreshFonction('fournisseur', result);
                                        
                                        refreshFonction('contentDynamique', result);
                                        $("#contentFixe").addClass('colonne2');
                                        $("#contentDynamique").show();
                                        
                                        desactiveLoader();
                                    }
                                });
                            }
                            
                            /* Charge le formulaire d'importe d'une DA  */
                            $('#input_DA').change(function(){
                                loaderDonnerAODA('DA');
                            });
                    
                            /* Charge le formulaire d'importe d'une DA  */
                            $('#input_AO').change(function(){
                                loaderDonnerAODA('AO');
                            });
                        </script>    
                        
                    </fieldset>
                    
                    
                    
                    
                    
                    
                    
                    
                    <fieldset class="scheduler-border" id="fournisseur">
                        <legend class="scheduler-border">{{  'Fournisseur' | trad }}</legend>
                        
                        <div class="colonne2">
                            <div class="row">
                                {{ inputAdvance('ZOOMADVANCE', {
                                    'titre' : 'Fournisseur' | trad,
                                    'name' : 'CODE_FOU',
                                    'pahtZoom' : path('Ajax.liste.fournisseur'),
                                    'paramZoom' : "{'filter_PROSPECT' : 'F', 'AO_RETENU' : $('#input_AO').val() }",
                                    'entity' : 'Fourniss',
                                    'titleZoom' : 'Liste des fournisseurs' | trad,
                                    'pathConvert' : path('Ajax.outil.convertLibelle'),
                                    'convertLibelle' : 'convertLibelleGlobal',
                                    'pathValidator' : path('Commande.AjaxCreationCommande.validatorFrs'),
                                    'paramsValidator' : "{'entity' : 'Fourniss','nomChamp' : '"~'Fournisseur' | trad~"', 'null' : false, post : {'filter_PROSPECT' : 'F', 'AO_RETENU' : $('#input_AO').val()} }",
                                    'value' : cde.CODE_FOU,
                                    'obligatoire' : true,
                                    'option' : param.LOCK_FOU? 'readOnly':''
                                }) }}
                            </div>

                            <div class="row">
                                {{ inputAdvance('ZOOMADVANCE', {
                                    'titre' : 'Devise' | trad,
                                    'name' : 'DEVISE',
                                    'pahtZoom' : path('Ajax.liste.devise'),
                                    'paramZoom' : "{}",
                                    'entity' : 'Devise',
                                    'titleZoom' : 'Liste des devises' | trad,
                                    'pathConvert' : path('Ajax.outil.convertLibelle'),
                                    'convertLibelle' : 'convertLibelleGlobal',
                                    'pathValidator' : path('Ajax.validator.zoom'),
                                    'paramsValidator' : "{'entity' : 'Devise','nomChamp' : '"~'Devise' | trad~"', 'null' : false}",
                                    'value' : cde.DEVISE,
                                    'obligatoire' : true,
                                }) }}
                                <input type="hidden" id="deviseFournisseur" value="{{ cde.DEVISE }}" />
                            </div>
                            {% if param.LANGUE_ACTIF %}
                                <div class="row">
                                    {{ inputAdvance('SELECT', {
                                        'titre' : 'Langue de la commande' | trad,
                                        'name' : 'COD_LNG',
                                        'obligatoire' : true,
                                        'listeValue' : tabLangues,
                                        'value': cde.COD_LNG,
                                    }) }}
                                </div>
                            {% endif %}
                        </div>
                        <div class="colonne2 last">
                            {% if param.TYPEACHAT_ACTIF %}
                                <div class="row">
                                        {{ inputAdvance('ZOOMADVANCE', {
                                            'titre' : 'Type d\'achat' | trad,
                                            'name' : 'COD_TAC',
                                            'pahtZoom' : path('Ajax.liste.typeAchatFournis'),
                                            'paramZoom' : "{'filter_egal_TACFOFOU' : $('#input_CODE_FOU').val() }",
                                            'entity' : 'TypeAchat',
                                            'titleZoom' : 'Liste des types d\'achat' |trad,
                                            'pathConvert' : path('Ajax.outil.convertLibelle'),
                                            'convertLibelle' : 'convertLibelleGlobal',
                                            'pathValidator' : path('Ajax.validator.zoom'),
                                            'paramsValidator' : "{'entity' : 'TypeAchat','nomChamp' : '"~('types d\'achat' | trad |e('js')|raw)~"', 'null' : false}",
                                            'value' : cde.COD_TAC,
                                            'option' : cde.CODE_FOU? '':'readOnly',
                                        }) }}
                                </div>
                                {% if cde.CODE_FOU=='' or param.LOCK_confirmationAchat %}
                                    {% set LOCK_confirmationAchat = 'disabled' %}
                                    <input type='hidden' name='confirmationAchat' id="Post_confirmationAchat" value='{{ cde.confirmationAchat }}'>
                                {% endif %}
                                
                                    <div class="row">
                                        {{ inputAdvance('SWITCH', {
                                            'titre' : 'Confirmez-vous le type d\'achat ?' | trad,
                                            'name' : 'confirmationAchat',
                                            'value' : cde.confirmationAchat,
                                            'option' : LOCK_confirmationAchat,
                                        }) }}
                                    </div>
                            {% endif %}
                        </div>
                        
                        <script>
                            /* autoComplete value fournisseur */
                            $( "#input_CODE_FOU" ).change(function() {
                                activeLoader();
                                $.ajax({
                                    dataType : 'html',
                                    url: window.location.pathname,
                                    data: $('#form_creationCde').serialize() + "&MODE=ChangeFournisseur", 
                                    type: "POST",
                                    success: function(result){        	  		
                                        refreshFonction('fournisseur', result);   
                                        refreshFonction('reception', result);                    	    			
                                        desactiveLoader();
                                    }
                                });
                            });

                            $( "#input_COD_TAC" ).change(function() {
                                changeValueSwitch('confirmationAchat', true);
                            });
                            
                        </script>
                        
                    </fieldset>
                    
                    <fieldset class="scheduler-border" id="reception">
                        <legend class="scheduler-border">{{ 'Réception' | trad }}</legend>
                        <div class="colonne2">
                            <div class="row">
                                {{ inputAdvance('SWITCH', {
                                    'titre' : 'Saisie de Réception ?' | trad,
                                    'name' : 'SAISIEREC',
                                    'value' : cde.SAISIEREC,
                                    'option' : param.LOCK_SAISIEREC? 'disabled':''
                                }) }}
                                {% if param.LOCK_SAISIEREC and cde.SAISIEREC %}
                                    <input type="hidden" name='SAISIEREC' value='1'>
                                {% endif %}
                            </div>
                        </div>
                        <div class="colonne2 last">
                            <div class="row recapAutoStep2" id="recapAutoStep2" {{ cde.SAISIEREC? '':"style='display:none;'" }}>
                                {{ inputAdvance('SWITCH', {
                                    'titre' : 'Réception automatique ?' | trad,
                                    'name' : 'RECEP_AUTO',
                                    'value' : cde.RECEP_AUTO,
                                    'option' : (param.MODIF_MODTRANS or param.LOCK_SAISIEREC)? 'disabled':''
                                }) }}
                            </div>
                                {% if (param.MODIF_MODTRANS or param.LOCK_SAISIEREC) and cde.RECEP_AUTO %}
                                    <input type="hidden" name='RECEP_AUTO' value='1'>
                                {% endif %}
                        </div>
                        <div class="clearfix recapAutoStep3" {{ cde.RECEP_AUTO==false ? "style='display:none;'":'' }}>
                            <div class="colonne2">
                                <div class="row">
                                    {{ inputAdvance('DATE', {
                                        'titre' : 'Début contrat' | trad,
                                        'name' : 'DATEDEBCONT',
                                        'pathValidator' : path('Ajax.validator.date'),
                                        'paramsValidator' : '{}',
                                        'value' : cde.DATEDEBCONT |dateTrad,
                                        'obligatoire' : true,
                                    }) }}
                                </div>
                                <div class="row">
                                    {{ inputAdvance('SELECT', {
                                        'titre' : 'Périodicité du contrat' | trad,
                                        'name' : 'CONTRAT_PERIOD',
                                        'listeValue' : {
                                            'M': 'Mensuelle' | trad,
                                            'T': 'Trimestrielle' | trad,
                                            'S': 'Semestrielle' | trad,
                                            'A': 'Annuelle' | trad,
                                        },
                                        'value' : cde.CONTRAT_PERIOD??'M',
                                    }) }}
                                </div>
                                <div class="row">
                                    {{ inputAdvance('SELECT', {
                                        'titre' : 'Jour d\'Application' | trad,
                                        'name' : 'CAEN_RECEPAUTO_JOUR',
                                        'listeValue' : tabJoursAppli,
                                        'value' : cde.CAEN_RECEPAUTO_JOUR??31,
                                    }) }}
                                    
                                </div>
                            </div>
                            <div class="colonne2 last">	
                                <div class="row">
                                    {{ inputAdvance('DATE', {
                                        'titre' : 'Fin contrat' | trad,
                                        'name' : 'DATEFINCONT',
                                        'pathValidator' : path('Ajax.validator.date'),
                                        'paramsValidator' : '{}',
                                        'value' : cde.DATEFINCONT |dateTrad,
                                        'obligatoire' : true,
                                    }) }}
                                </div>
                                <div class="row">
                                    {{ inputAdvance('SELECT', {
                                        'titre' : 'Type de période' | trad,
                                        'name' : 'FIN_DEB_PER',
                                        'listeValue' : {
                                            'D': 'Début de période' | trad,
                                            'F': 'Fin de période' | trad,
                                        },
                                        'value' : cde.FIN_DEB_PER??'F',
                                    }) }}
                                </div>
                            </div>
                            <script>
                                $(function() {
                                    $( ".datepicker" ).datepicker({
                                        showOn: "button",
                                        buttonImage: "{{ baseUrl('IconeV2/Global/deadline-change.svg') }}",
                                        buttonImageOnly: true,
                                /* 		minDate: "-3M",
                                        maxDate: "+1M", */
                                        showAnim: "fade",
                                        dateFormat: "{{ 'dd/mm/yy' | paramDateFormat }}"
                                    });
                                });
                            </script>
                        </div>
                        
                        <script>

                            /* Recepetion */
                            $( "#input_SAISIEREC" ).change(function()
                            {
                                if($('#input_SAISIEREC').is(':checked')) 
                                {
                                    $('.recapAutoStep2').show();
                                }
                                else
                                {
                                    changeValueSwitch('RECEP_AUTO', false);
                                    $('.recapAutoStep2').hide();
                                    $('.recapAutoStep3').hide();
                                }
                            });
                            
    
                            $( "#input_RECEP_AUTO" ).change(function()
                            {
                                if($('#input_RECEP_AUTO').is(':checked')) 
                                {
                                    $('.recapAutoStep3').show();
                                }
                                else
                                {
                                    $('.recapAutoStep3').hide();
                                }
                            });
                            
                            $( "#input_FIN_DEB_PER" ).change(function()
                            {
                                if($(this).val()=='D')
                                {
                                    $('#input_CAEN_RECEPAUTO_JOUR').val(1).change();
                                }
                                else if($(this).val()=='F')
                                {
                                    $('#input_CAEN_RECEPAUTO_JOUR').val(31).change();
                                }
                            });
                        </script>
                        
                    </fieldset>  	   							
                </div>
                
                
                
                
                
                
                
                
                
                
                
                
                

                <div id="contentDynamique" class="colonne2 last  bg_form border_form" {% if numElement == '' %}style="display:none;" {% endif %}>
                
                    <div class="padding15">
                        <h2>
                            {% if typeElement == 'AO' %}
                                {{ 'Eléments de la consultation N°' | trad }}{{ numElement }}
                            {% else %}
                                {{ 'Eléments de la DA N°' | trad }}{{ numElement }}
                            {% endif %}
                            <a class="button secondaire fermer">{{  'Fermer' | trad }}</a>
                        </h2>
                            <fieldset class="scheduler-border">
                                <legend class="scheduler-border">
                                    <div class="row">
                                        <legend class="scheduler-border">
                                            {{ 'Titre' | trad }}
                                            <input type="checkbox" checked class="form-control checkbox right" id="checkbox_Titre" name="Titre"/>
                                        </legend>
                                    </div>
                                </legend>
                                <textarea name="textarea" rows="3" cols="50" class="form-control form-control-sm" id="content_titre" name="content_titre" readOnly>{{ titre }}</textarea>
                            </fieldset>
                        {% if listeLigne %}
                            <fieldset class="scheduler-border">
                                <legend class="scheduler-border">{{ 'Lignes' | trad }}</legend>
                            <table class="table" id='tabble_ligne'>
                                <thead>
                                    <tr>
                                        <th scope="col" width="100px">{{ 'Ligne' |trad }}</th>
                                        <th scope="col" width="100px">{{ 'Code Article' | trad }}</th>
                                        <th scope="col">{{ 'Désignation' | trad }}</th>
                                        <th scope="col" width="15%">
                                            <input type="checkbox" name="allLigne" 
                                                data-checkall-input="allLigne" 
                                                class="form-control checkbox" 
                                                checked
                                            >
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>                                
                                    {% for ligne in listeLigne %}
                                        <tr>
                                            <td>{{ ligne.NO_PO }}</td>
                                            <td>{{ ligne.CODE_ART }}</td>
                                            <td>
                                                {{ ligne.DES }}
                                                {% if ligne.DES_COMPL %}
                                                    <span class="icon-infos white-tooltip">
                                                        <span class="infos_tooltip top-left">
                                                            {{ ligne.DES_COMPL }}
                                                        </span>
                                                    </span>
                                                {% endif %}
                                            </td>
                                            <td class="no_parametrage">
                                                <input type="checkbox" checked 
                                                    class="form-control checkbox ligne" 
                                                    id="checkbox_ligne_{{ ligne.NO_PO }}" 
                                                    name="ligne_{{ ligne.NO_PO }}"
                                                    data-checkall="allLigne"
                                                />
                                            </td>
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                            </fieldset>
                        {% endif %}
                        {% if listeClause %}
                            <fieldset class="scheduler-border">
                                <legend class="scheduler-border">{{ 'Clauses' | trad }}</legend>
                                <table class="table" id='tabble_clause'>
                                    <thead>
                                        <tr>
                                            <th scope="col">{{ 'Clause' | trad }}</th>
                                            <th scope="col" width="15%">
                                                <input type="checkbox" name="allClause" 
                                                    data-checkall-input="allClause" 
                                                    class="form-control checkbox" 
                                                    checked
                                                />
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody>                                
                                        {% for clause in listeClause %}
                                            <tr>
                                                <td>{{ shortLibelle(clause.CONTMEMO, 70) }}</td>
                                                <td class="no_parametrage">
                                                    <input type="checkbox"  
                                                        class="form-control checkbox Clause" 
                                                        id="checkbox_clause_{{ clause.NO_ORDRE }}"
                                                        name="clause_{{ clause.NO_ORDRE }}"
                                                        data-checkall="allClause"
                                                        checked
                                                    />
                                                </td>
                                            </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                            </fieldset>
                        {% endif %}
                        {% if listePJ %}
                            <fieldset class="scheduler-border">
                                <legend class="scheduler-border">{{ 'Pièces jointes' | trad }}</legend>
                                <table class="table" id='tabble_clause'>
                                    <thead>
                                        <tr>
                                            <th scope="col">{{ 'Type' | trad }}</th>
                                            <th scope="col">{{ 'Titre' | trad }}</th>
                                            <th scope="col" width="15%">
                                                <input type="checkbox" name="allPJ" 
                                                    data-checkall-input="allPJ" 
                                                    class="form-control checkbox"
                                                    checked
                                                />
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody>                                
                                        {% for PJ in listePJ %}
                                            <tr>
                                                <td>{{ PJ.TYPE_PJ }}</td>
                                                <td>{{ PJ.TITRE }}</td>
                                                <td class="no_parametrage">
                                                    <input type="checkbox" 
                                                        data-checkall-input="allPJ" 
                                                        checked
                                                        class="form-control checkbox" 
                                                        id="checkbox_pj_{{ PJ.NO_ORDRE }}" 
                                                        name="pj_{{ PJ.NO_ORDRE }}"
                                                    />
                                                </td>
                                            </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                            </fieldset>
                        {% endif %}
                        <div class="modal-footer">
                            <a class="button secondaire fermer">{{  'Fermer' | trad }}</a>
                        </div>
                        <script>
                            $( ".fermer" ).click(function() {
                                $("#contentFixe").removeClass('colonne2');
                                $("#contentDynamique").hide();
                                $(".showImport").show();
                            });
                        </script>
                    </div>
                
                </div>
            </form>
        </div>

        <script>
            $('#input_CODE_STE').change(function(){
                activeLoader();
                $.ajax({
                    dataType : 'html',
                    url: window.location.pathname,
                    data: $('#form_creationCde').serialize() + "&MODE=ChangeSociete", 
                    type: "POST",
                    success: function(result){            	  		
                        refreshFonction('numCde', result);
                        // TODO : update imputation 'obligatoire' (since isAllowedBlank may depend on societe)
                        desactiveLoader();
                    }
                });
            });
        </script>
    </div>
{% endblock %}