{% extends 'layout.twig' %}

{% block body %}
    
    <div class="contenu" id="panier">
        <script>
            $( document ).ready(function() {
                if (localStorage['keepHeaderClose{{id_rowid_panier}}'] == '1') {
                    $('#rowImput, #rowCs').hide();
                    $('#showHideEntete').attr('src', '{{ baseUrl('IconeV2/Misc/Collapse_Down.png') }}');
                }
            });
        </script>

        {% if panier.id_panier != 0 %}
            {% include '@Panier/General/subPanier.twig' with {
                libPanier : panier.lib_panier,
                montantPanier : montantPanier,
                devise : panier.COD_DEV,
                nombreLigne : panier.nombreLigne,
                id_panier: panier.id_panier,
            } only %}
        {% endif %}

        <h1>
            {{ 'Panier' | trad }} : {{ panier.lib_panier }}

            {% if panier.id_panier == 0 %}
                {% include '@Panier/General/steBarPanier.twig' %}
            {% endif %}

            {% if listeFrs and panier.id_panier == 0 %}
                <button class="button principal" type="button" onClick="soumission();">{{ 'Soumettre le panier'| trad }}</button>
            {% endif %}
            
        </h1>

        {{ ariane() }}
        <div class="tab-content" id="tab-content" style="margin-top:20px">
            <form id="formPanier" name="formPanier">
                <div id='entete'>
                    <div id="initEntete">
                        
                        <div class="clearfix" id="row1">
                            <div id="divCtr" class="bg_form padding15">   
                                <div>
                                    <span style="font-weight:bold">{{ 'Centre de livraison' | trad }}</span> : 
                                    <a href="{{ path('Panier.CentreLivraison.fiche') }}">
                                        <span class="modifier_v2"></span>
                                    </a>
                                    <p style="margin-top: 19px;">{{ convertLibelleGlobal('CENTRE', '',panier.LIV_CTR, true) }}</p>
                                    <p>{{ panier.LIV_ADR }}</p>
                                    <p>{{ panier.LIV_VILLE }}</p>
                                    <p>{{ panier.LIV_CP }}</p>
                                    <p>{{ panier.LIB_PAYS }} ({{ panier.LIV_PAYS }})</p>
                                </div>
                            </div>

                            <div class="bg_form padding15" id="divMisc">   
                                <div class="single">
                                    <div class="row">
                                        {{ inputAdvance('ZOOMADVANCE', {
                                            'titre' : 'Centre émetteur' | trad,
                                            'name' : 'CTR_EMETT',
                                            'pahtZoom' : path('Ajax.liste.centreEmetteur'),
                                            'paramZoom' : "{'code_ste' : '"~codeSte~"' }",
                                            'entity' : 'Centre',
                                            'titleZoom' : 'Liste des centres' | trad,
                                            '_pathConvert' : path('Ajax.outil.convertLibelle'),
                                            'convertLibelle' : 'convertLibelleGlobal',
                                            'value' : panier.CENTRE_EMETTEUR,
                                            'faceAttr' : {
                                                'data-updatevalue' : 'on',
                                            },
                                        }) }}
                                    </div>
                                </div>

                                {% if parametrage.MASQUER_CHIFF_EXEC == false %}
                                    <div class="single">
                                        <div class="row">
                                            {{ inputAdvance('SELECT', {
                                                'titre' : 'Type' |trad,
                                                'name' : 'CHIF_EXEC',
                                                'listeValue' : {'C' : 'Chiffrage' | trad, 'E' : 'Execution' | trad},
                                                'value' : panier.CHIF_EXEC,
                                                'option' : panier.CHIF_EXEC_LOCK? 'readOnly':'',
                                                'inputAttr' : {
                                                    'data-updatevalue' : 'on',
                                                },
                                            }) }}
                                        </div>
                                    </div>
                                {% endif %}

                                {% if parametrage.MASQUER_BUDGET == false %}
                                    <div class="div-budget">
                                        <div class="colonne2 last">
                                            <div class="row">
                                                {{ inputAdvance('TEXT', {
                                                    'name' : 'BUDGET_DA',
                                                    'titre' : 'budget',
                                                    'value' : panier.BUDGET_DA,
                                                    'numeric' : true,
                                                    'parameter' : {'inputAttr' : {
                                                            'data-updatevalue' : 'on',
                                                        }
                                                    },
                                                }) }}
                                            </div>
                                        </div>
                                        <div class="colonne2 last">
                                            <div class="row" style="padding-left:10px">
                                                {{ inputAdvance('ZOOMADVANCE', {
                                                    '_titre' : 'Devise' | trad,
                                                    'name' : 'COD_DEV',
                                                    'pahtZoom' : path('Ajax.liste.devise'),
                                                    'paramZoom' : "{}",
                                                    'entity' : 'Devise',
                                                    'titleZoom' : 'Liste des devises' | trad,
                                                    '_pathConvert' : path('Ajax.outil.convertLibelle'),
                                                    'convertLibelle' : 'convertLibelleGlobal',
                                                    'value' : panier.COD_DEV,
                                                    'faceAttr' : {
                                                        'data-updatevalue' : 'on',
                                                    },
                                                }) }}
                                            </div>
                                        </div>
                                    </div>
                                {% endif %}
                            </div>

                            <div class="last">
                                <div id="ComplEntete">
                                    <div class="bg_form noborder">
                                        <span class="titre">
                                            {{ 'Total panier' | trad }}
                                        </span>
                                        <span class="montant">
                                            <div style="display:flex">
                                                <div id="montantPanier" style="margin-right:3px">
                                                    {{ montantPanier | prix }}
                                                </div>
                                                {{ panier.COD_DEV }}
                                            </div>
                                        </span>
                                    </div>
                                </div>

                                <div class="row panier-flex" >
                                    <div style="width: 50px;margin-top: 28px;">
                                        <img id="showHideEntete"  style="width: 32px;cursor:pointer;" src="{{ baseUrl('IconeV2/Misc/Collapse_Up.png') }}" onClick="showEntetePanier();">
                                    </div>

                                    <script>
                                    
                                        function showEntetePanier()
                                        {
                                            if($('#rowImput').is(':visible')) {
                                                $('#rowImput, #rowCs').hide();
                                                $('#showHideEntete').attr('src', '{{ baseUrl('IconeV2/Misc/Collapse_Down.png') }}');
                                                localStorage['keepHeaderClose{{id_rowid_panier}}'] = '1';
                                            } else {
                                                $('#rowImput, #rowCs').show();
                                                $('#showHideEntete').attr('src', '{{ baseUrl('IconeV2/Misc/Collapse_Up.png') }}');
                                                localStorage['keepHeaderClose{{id_rowid_panier}}'] = '0';
                                            }
                                        }

                                    </script>

                                    <div class="divBtn">
                                        {# TODO V12 PENSER A MODIFIER LE HTML POUR LE METTRE EN V2 PLUS EN POPUP V1 #}
                                        {{ specifique('HtmlExtension', 'specifiqueCsPanier', {}) }}
                                    </div>

                                    <div class="divAllLigne">
                                        <span>
                                            {{ 'Voir détail ligne' |trad }}
                                        </span>
                                        <input type="checkbox" class="form-control checkbox" onClick="if ($(this).is(':checked')){$('.showAllDetailLigne').show();}else{$('.showAllDetailLigne').hide();}" {% if parametrage.DETAIL_LIGNE_PANIER %}checked{% endif %}/>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="bg_form padding15 clearfix" id="rowCs" style="margin-bottom:15px;">   

                            {{ inputCSAdvance({
                                'codTab' : 'DA_ENTET',
                                'codeEnr' : '',
                                'colonneActif' : true,
                                'duplication' : false,
                                'ModeModif' : false,
                                'postVal' : null,
                                'colonneActif' : 'colonne3',
                                'codTableDifferent' : 'PANIER',
                                'inputAttr' : {
                                    'data-updatevalue' : 'on',
                                },
                            }) }}
                            
                            <script>
                                $( document ).ready(function() {
                                    if ($('#rowCs label:not(.switchV2):visible').length < 3) {
                                        $('#showAllCs').hide();
                                    }
                                });
                            </script>
                            <div style="text-align: center;" id="showAllCs">
                                <a onClick="showHide();" id="showAllCS">{{ 'Afficher plus' | trad }}</a>
                            </div>
                        </div>

                        <div class="bg_form padding15 clearfix" id="rowImput">   
                            {% include '@Panier/Panier/_imputation.twig' with {
                                    'idImputation' : null,
                                    'codeSte' : panier.CODE_STE,
                                    'centreEmetteur' : panier.CENTRE_EMETTEUR,
                                    'imputation' : panier,
                                } 
                            %}
                            <div id="eclatementImputation" class="collapse clearfix">
                            </div>
                        </div>
                    </div>

                    <script>
                        $(document).ready(function(){
                            showHide();
                        });

                        function showHide() {
                            if ($('#rowCs > .colonne3 > div:not(:first-child)').is(':visible')) {
                                $('#rowCs > .colonne3 > div:not(:first-child)').hide();
                                $('#showAllCS').html('{{  'Afficher plus' | trad }}');
                            } else {
                                $('#rowCs > .colonne3 > div:not(:first-child)').show();
                                $('#showAllCS').html('{{  'Afficher moins' | trad }}');
                            }
                        }
                    </script>
                </div>

                <div id="zoneLigne" >
                    {# On évite les traduction dans les boucles, 40 mots traduit a chaque ligne article = probleme de perf meme avec le cache #}
                    {% set trad = {
                        'Frais de port' : 'Frais de port' | trad,
                        'Contact de livraison' : 'Contact de livraison' | trad,
                        'Minimum franco' : 'Minimum franco' | trad,
                        'Port obligatoire' : 'Port obligatoire' | trad,
                        'Adresse de Cde' : 'Adresse de Cde' | trad,
                        'Type d\'achat' : 'Type d\'achat' | trad,
                        'Date de livraison' : 'Date de livraison' | trad,
                        'Périodicité' : 'Périodicité' | trad,
                        'Date début' : 'Date début' | trad,
                        'Date fin' : 'Date fin' | trad,
                        'Détail Panier' : 'Détail Panier' | trad,
                        'Instruction Frs' : 'Instruction Frs' | trad,
                        'Clause' : 'Clause' | trad,
                        'Pièces Jointes' : 'Pièces Jointes' | trad,
                        'Docs. rattachés' : 'Docs. rattachés' | trad,
                        'Livraison' : 'Livraison' | trad,
                        'Imputation' : 'Imputation' | trad,
                        'Info frs' : 'Info frs' | trad,
                        'Caract.' : 'Caract.' | trad,
                        'Ref.Art/Fourn' : 'Ref.Art/Fourn' | trad,
                        'Libellé Article' : 'Libellé Article' | trad,
                        'Quantité' : 'Quantité' | trad,
                        'Unité' : 'Unité' | trad,
                        'PU TTC' : 'PU TTC' | trad,
                        'Mt Ligne' : 'Mt Ligne' | trad,
                        'Ajouter un document' : 'Ajouter un document' | trad,
                        'Ajouter un article' : 'Ajouter un article'  | trad,
                        'Ligne manuelle' : 'Ligne manuelle' | trad,
                        'Accord-cadre' : 'Accord-cadre' | trad,
                        'Présence d\'articles associés' : 'Présence d\'articles associés' | trad,
                        'Présence de fiche technique' : 'Présence de fiche technique' | trad,
                        'Article stocké' : 'Article stocké' | trad,
                        'Article autorisé à commande e-proc' : 'Article autorisé à commande e-proc' | trad,
                        'Présence d\'article équivalent' : 'Présence d\'article équivalent' | trad,
                        'Quantité' : 'Quantité' | trad,
                        'Prix' : 'Prix' | trad,
                        'Ajouter à vos favoris' : 'Ajouter à vos favoris' | trad,
                        'Supprimer' : 'Supprimer' | trad,
                        'Modifier' : 'Modifier' | trad,
                        'Changement de fournisseur' : 'Changement de fournisseur' | trad,
                        'Frais annexes' : 'Frais annexes' | trad,
                        'Ajouter un frais annexe' : 'Ajouter un frais annexe' | trad,
                        'Total des articles' : 'Total des articles' | trad,
                        'Dossier achat complet ?' : 'Dossier achat complet ?' | trad,
                        'Ajouter au panier en cours' : 'Ajouter au panier en cours' | trad,
                    } %}

                    {% for frs in listeFrs %}
                        {% include '@Panier/Panier/_bloc_fournisseur.twig' %}
                    {% else %}
                        <div style="height:130px"></div>
                    {% endfor %}

                </div>
            </form>
        </div>

    </div>

    {% if listeFrs and panier.id_panier == 0 %}
        <form name="form_nouveauPanier" id="form_nouveauPanier">
            <div class="sectionOption">
                <div class="bg_form padding15">
                    <div class="row">
                        {{ inputAdvance('TEXT', {
                            'titre' : 'Nom du panier' | trad,
                            'name' : 'PANIER',
                        }) }}
                        {{ inputAdvance('SWITCH', {
                            'titre' : 'Modèle ?' | trad,
                            'name' : 'MODELE',
                            'styleText' : 'display:none;'
                        }) }}
                    </div>
                    <button class="button secondaire" type="button" onClick="ajaxPopupV2('{{ path('Panier.Panier.nouveauPanier', {action:'SAVE'}) }}', 'form_nouveauPanier');">
                        {{ 'Enregistrer' | trad }}
                    </button>
                </div>

                <div class="bg_form padding15">
                    {{ inputAdvance('ZOOMADVANCE', {
                        'titre' : 'Transférer le panier à' | trad,
                        'name' : 'TRANSFERE',

                        'pahtZoom' : path('Ajax.liste.utilisateur'),
                        'paramZoom' : "{'DEMAND' : 'T', 'ACCOXAPR' : 'T',  'CODE_STE' : '"~panier.CODE_STE~"', 'NOTME' : true}",
                        'entity' : 'Hastutil',
                        'titleZoom' : 'Liste des utilisateurs disponibles pour le transfert' | trad,
                        '_pathConvert' : path('Ajax.outil.convertLibelle'),
                        'convertLibelle' : 'convertLibelleGlobal',
                    }) }}
                    <button class="button secondaire" type="button" onClick="ajaxPopupV2('{{ path('Panier.Panier.nouveauPanier', {action:'TRANSFERE'}) }}', 'form_nouveauPanier');">
                        {{ 'Transférer' | trad }}
                    </button>
                </div>

                <div class="bg_form padding15">
                    <button class="button secondaire" type="button" >
                        <a href="{{ path('Consultation.ConsultationPanier.creatEdit') }}">
                            {# todo penser a modifier le bouton "annuler" des consultations #}
                            {{ 'Créer consultation' | trad }}
                        </a>
                    </button>
                </div>

                {% if listeFrs and panier.id_panier == 0 %}
                    <div style="margin-left: auto;">
                        <button class="button principal button_right" type="button" style="margin-right: 28px;" onClick="soumission();">{{ 'Soumettre le panier' | trad }}</button>
                    </div>
                {% endif %}

            </div>
        </form>
    {% endif %}
{# Panier.Panier.nouveauPanier #}
    <script>
		$.datepicker.setDefaults({
			onSelect: function() {
				triggerChangeEvent(this);
			},
			onUpdateDatepicker: function() {
                $(this).data('oldvalue', $(this).val());
			}
		});


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

            if (!$(event.target).data('updatevalue')) {
                return;
            }

            $(target).data('oldvalue', $(target).val());

            if ($(event.target).hasClass('zoom')) {
                $(target).select();
            }
        });

        document.addEventListener('change',(event) => {
            var target = event.target;

            if (!(target instanceof HTMLElement) ) {
                return;
            }

            if (!$(target).data('updatevalue')) {
                return;
            }

            var fieldName = $(target).attr('name');

            var post = {};
            if (fieldName.indexOf("TYP_ACH") === 0 || fieldName.indexOf("TYP_ACH_CONF") === 0) {
                var critere = $(target).data('critere');
                post = {
                    'TYP_ACH' : $('#input_TYP_ACH{{ spliter() }}'+critere).val(),
                    'TYP_ACH_CONF' : $('#input_TYP_ACH_CONF{{ spliter() }}'+critere).is(':checked'),
                };
            }

            if ($(target).attr('type') == 'checkbox') {
                var value = $(target).is(':checked');
            } else {
                var value = $(target).val();
            }
            activeLoader();
            $.ajax({
                dataType: 'json',
                url: '{{ path('Panier.Panier.updateValue') }}',
                data: {'field' : fieldName, 'value' : value, 'post' : post},
                type: "POST",
                success: function(content){
                    if (content.statut == 'O') {
                        changeValueInput(target);

                        //changer la value d'autre input lié (surtout pour les imputations)
                        if (content.listeUpdate) {
                            $.each(content.listeUpdate, function(key, value) {
                                $('#'+key).val(value);
                                changeValueInput('#'+key);
                            });
                        }

                        // pour le centre emetteur, refresh les select des adresses
                        if (fieldName == 'text_CTR_EMETT') {
                            $.ajax({
                                url: '{{ path('Panier.Panier.index') }}',
                                type: 'POST',
                                dataType: 'html',
                                data : {},
                                success: function (htmlData) {
                                    $('.sectionAdr').each(function(){
                                        refreshFonction($(this).attr('id'), htmlData);
                                    });
                                }
                            });	
                        }

                        //refresh du bloc ligne
                        if (content.refreshScreen) {
                            $.ajax({
                                url: '{{ path('Panier.Panier.index') }}',
                                type: 'POST',
                                dataType: 'html',
                                data : {},
                                success: function (htmlData) {
                                    refreshFonction('zoneLigne', htmlData);
                                    refreshFonction('montantPanier', htmlData);
                                    refreshFonction('menu-panier', htmlData);
                                    refreshFonction('subPanier', htmlData);
                                }
                            });	
                        }

                        if (content.updateImputation) {
                            $('.divImpuLigne').html('');
                            $('.mainTabFrs').trigger('click');
                        }

                        if (fieldName.indexOf("TYP_ACH") === 0 || fieldName.indexOf("TYP_ACH_CONF") === 0) {
                            var critere = $(target).data('critere');
                            
                            var targetTab = document.getElementById("triggerOngletclause"+critere);
                            refreshTab(targetTab, true);

                            var targetTab = document.getElementById("triggerOngletpj"+critere);
                            refreshTab(targetTab, true);
                        }

                        if ($(target).data('refreshliv')) {
                            var critere = $(target).data('critere');

                            if ($.trim( $('#livraison'+critere).html() ).length) {
                                var targetTab = document.getElementById("triggerOngletlivraison"+critere);
                                refreshTab(targetTab, true);
                            }
                        }
                        desactiveLoader();

                    } else {
                        desactiveLoader();
                        $(target).val($(target).data('oldvalue'));

                        $("#modal-content").addClass("modal_small");
                        $("#modal-body").html(content.content);
                        $("#modal-title").html(content.title);

                        activePopup();
                    }
                }
            });
        });

        function changeValueInput(target)
        {
            if ($(target).data('autocomplete')) {
                var textInput = $(target).attr('id');
                var idInput = textInput.replace('text_', 'input_');

                ConvertLibelle(
                    '{{ path('Ajax.outil.convertLibelle') }}', 
                    target,
                    $(target).data('autocomplete'), 
                    '', 
                    '',
                    idInput,
                    textInput,
                );
            } else if($(target).data('cglink')) {
                var textInput = $(target).attr('id');
                var idInput = textInput.replace('text_', 'input_');

                convertLibelleCodeGestion(
                    '{{ path('Ajax.outil.convertLibelleCodeGestion') }}', 
                    target,
                    'CODE_GES', 
                    'CODE_AFF',
                    idInput,
                    textInput,
                    $(target).data('ste'),
                    '1',
                    '',
                    $(target).data('si'),
                );
            }
        }


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

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

            refreshTab(target, false);
        });

        function refreshTab(target, force) {
            var idBloc      = target.getAttribute("data-idbloc");
            var path        = target.getAttribute("data-path");
            var zoneUpdate  = target.getAttribute("href");
            
            if($.trim( $(zoneUpdate).html() ).length && !target.hasAttribute('data-refreshbloc') && force == false) {
                return; 
            }

            activeLoader();
            $.ajax({
                dataType: 'html',
                url: path,
                data: {},
                type: "POST",
                success: function(result){
                    $(zoneUpdate).html(result);
                    desactiveLoader();
                }
            });

            return false;
        }

        $('#btneclatementImputation').click(function(){
            if ($('#eclatementImputation').is(':visible')) {
                return;
            }

            $.ajax({
                dataType: 'html',
                url: '{{ path('Panier.Panier.ajaxChargeEclatementImpu') }}',
                data: {},
                type: "POST",
                success: function(result){
                    $('#eclatementImputation').html(result);
                    desactiveLoader();

                    hideTabImputation();
                }
            });
        });

        function hideTabImputation() {
            $('.tabImputation').each(function(){
                if ($(this).hasClass('active')) {
                    $(this).parent().find('li:first a').trigger('click');
                    $(this).hide();
                } else {
                    $(this).hide();
                }
            });
        }

        function gestFavoris(path, rowCompteur)
        {
            $.ajax({
                url: path,
                type: 'POST',
                dataType: 'html',
                data: {},
                success: function (content) {
                    if($('#fav'+rowCompteur).hasClass('artFav')) {
                        $('#fav'+rowCompteur).removeClass('artFav').addClass('artNoFav');
                    } else {
                        $('#fav'+rowCompteur).removeClass('artNoFav').addClass('artFav');
                    }
                },
            });
        }

        function activeDivModulable(result, idBloc,titre)
        {
            $('#onglet_DivModulable'+idBloc).show();
            $('#onglet_DivModulable'+idBloc).find('a').html(titre);
            $('#onglet_DivModulable'+idBloc).find('a').trigger('click');
            $('#DivModulable'+idBloc).html(result);
        }

        $('.perma').click(function(){
            var parentUl = $(this).parent().data('divmodule');
    		$('#onglet_'+parentUl).hide();
    		$('#'+parentUl).html('');
        });

        function addDoc(path, idBlocfrs, titre)
        {
            $.ajax({
                dataType: 'html',
                url: path,
                data: {},
                type: "POST",
                success: function(result){
                    activeDivModulable(result, idBlocfrs, titre);
                }
            });
        }

        function removeDoc(path, bloc, iddoc)
        {
            $.ajax({
                dataType: "html",
                url: path,
                data: {},
                type: "POST",
                success: function (result) {
                    $("#doc_"+bloc+"_"+iddoc).remove();
                }
            });
        }

        function addPJ(path, idBlocfrs, titre)
        {
            $.ajax({
                dataType: 'html',
                url: path,
                data: {},
                type: "POST",
                success: function(result){
                    activeDivModulable(result, idBlocfrs, titre);
                }
            });
        }

        function removePj(path, idPj)
        {
            $.ajax({
                dataType: "html",
                url: path,
                data: {},
                type: "POST",
                success: function (result) {
                    $("#PJ_"+idPj).remove();
                }
            });
        }

        function addClause(path, idBlocfrs)
        {
            $.ajax({
                dataType: "html",
                url: path,
                data: {},
                type: "POST",
                success: function (result) {
                    $("#tableClause"+idBlocfrs+" > tbody ").append(result);
                }
            });
        }

        function removeClause(path, idClause)
        {
            $.ajax({
                dataType: "html",
                url: path,
                data: {},
                type: "POST",
                success: function (result) {
                    $("#CLAUSE"+idClause).remove();
                }
            });
        }

        function soumission()
        {
            ajaxPopupV2('{{ path('Panier.Panier.soumission') }}', 'formPanier', '');
        }

        function loadLignePanier(path)
        {
            activeLoader();
            $.ajax({
                dataType: "html",
                url: path,
                data: {},
                type: "POST",
                success: function (result) {
                    desactiveLoader();
                    desactivePopup();
                    var data = jQuery.parseJSON(result);
                    $('#zone_mntEntete').html(data.montant);
                    $('#zone_ligneCount').html(data.nombreLigne);
                },
                error: function (data) {
                    desactiveLoader();
                    
                    $("#modal-content").addClass("modal_small");
                    $("#modal-body").html(data.responseText);
                    $("#modal-title").html("{{ 'Import d\'article' | trad }}");

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

    {% include '@Panier/Panier/scriptAddRemoveQte.twig' %}

{% endblock %}