{% extends 'layout.twig' %}

{% block body %}

    <div class="contenu clearfix">
        <h1>
        
            {{ 'Import ligne panier' | trad }} 

            <button class="principal button" type="button" onClick="importFile();">{{ 'Importer' | trad }}</button>
        
        </h1>

        <script>
            function importFile()
            {
                activeLoader();
                jForm.append("ID_PROFIL", $('[name="ID_PROFIL"]').val());

                var affJournal = false;
                if($('[name="aff_journal"]').is(':checked'))
                {
                    jForm.append("aff_journal", 'On');
                    affJournal = true;
                }

                $.ajax({
                    url : '{{ path('Panier.ImportLigne.import') }}',
                    
                    data : jForm,
                    type: 'POST',
                    contentType: false,
                    cache: false,
                    processData: false,
                    mimeType: "multipart/form-data",
                    success: function (data) {
                        var data = jQuery.parseJSON(data);
                        redirectJSWithPost(data.path, data.post);
                    },
                    error: function (data){
                        desactiveLoader();
                        $("#modal-content").addClass("modal_small");
                        $("#modal-body").html(data.responseText);
                        $("#modal-title").html('{{ 'Erreur' | trad }}');

                        activePopup();
                    }   
                });
            }
        </script>


        <form method="post" name="importLigne" id="importLigne">

            <div class="clearfix bg_form padding_form">

                <h4>{{ 'Le fichier attendu est au format CSV (séparateur point-virgule) et contient les colonnes aux formats suivants' |trad }}</h4>
                <div class="clearfix">
                    <div class="colonne2">
                        <div class="row">
                            {{ inputAdvance('ZOOMADVANCE', {
                                'titre' : 'Format de fichier' | trad,
                                'name' : 'ID_PROFIL',
                                'value' : defaultFormat.ID_PROFIL,
                                'pahtZoom' : path('Panier.ImportLigne.listeFormat'),
                                'titreZoom' : 'Liste des formats' | trad,
                                'paramZoom' : "{}",
                                'entity' : 'ImpPanE',
                                'pathValidator' : path('Ajax.validator.zoom'),
                                'paramsValidator' : "{'entity' : 'ImpPanE','nomChamp' : '"~('Format de fichier' | trad)~"', 'null' : false}",
                                'pathConvert' : path('Ajax.outil.convertLibelle'),
                                'convertLibelle' : 'convertLibelleGlobal',
                                'option' : 'desactiveSaisie',
                            }) }}
                        </div>
                        <div class="row" style="text-align: center;">
                            <span style="color: #FF0000;font-weight: bold;">{{ 'ATTENTION : les imports se basent sur le contenu des catalogues.' |trad }}</span>
                        </div>
                        <div class="row">
                            {{ inputAdvance('SWITCH', {
                                'titre' : 'Affichage du journal d\'import ?' |trad,
                                'name' : 'aff_journal',
                                'value': true,
                            }) }}
                        </div>
                        <div class="row">
                            {{ inputAdvance('FILE', {
                                'name' : 'import',
                            }) }}
                        </div>
                    </div>
                    
                    <div class="colonne2 last">
                        <div id="refreshTable">
                            {% include '@GlobalApplication/Component/_tableImportFormat.twig' with {
                                listCol: infoForamt | map(item => item | merge({
                                    label: item.NOM_CHAMP,
                                    mandatory: item.OBLIG | boolSql,
                                    format: item.ATTRIBUT,
                                    formatMask: item.MASQUE,
                                })),
                            } only %}
                        </div>
                    </div>
                </div>
            </div> 
            <script>
                $('#input_ID_PROFIL').change(function(){
                    activeLoader();
                    $.ajax({
                        dataType : 'html',
                        url: '{{ path('Panier.ImportLigne.ajaxChangeDef') }}',
                        data: $('#importLigne').serialize(),
                        type: "POST",
                        statusCode: {
                            413: function(xhr) {
                                desactiveLoader();
                                desactivePopup();
                                alert('Error - ModSecurity.');
                            }
                        },
                        success: function(result){
                            desactiveLoader();
                            $('#refreshTable').html(result);
                        }
                    });
                });
            </script>
        </form>
    </div>

{% endblock %}
