{% extends 'layout.twig' %}

{% block body %}
    {% if mode != 'campagne' %}

    <div class="contenu clearfix"  id="importModele">
        <h1>{{ titre }} </h1>
                                    
        {{ ariane() }} 
	{% endif %}
        <div class="tab-content">
            <div id="divImprot" class="clearfix">
                {% if mode == 'AO' or mode == 'AO_CONTRIB' %}
                    <h2>{{ consultation.OBJET_AO }} {{ 'créé le' | trad }} {{ consultation.DTE_AO | dateTrad }} {{ 'par' | trad }} {{ AOEventCreat.NOM }}</h2>
                    {% include '@Consultation/Consultation/block_entete.twig' %}
                {% elseif mode == 'modele' %}
                    <h2>{{ subtitle }}</h2>
                    {% include "@Evaluation/Modele/entete.twig" %}
                {% elseif mode == 'campagne' %}
                    <h2>{{ subtitle }}</h2>
                    {% include "@Evaluation/Campaign/entete.twig" %}
                {% else %}
                    <h2>{{ 'Gestions des thèmes' | trad }}</h2>
                {% endif %}
                
                <div>
                    <h2>
                        {{ 'Bibliothèque de questions' | trad }}
                        {% if typeImport | boolSql == false %}
                            <a class="principal button button_right"  onClick="sendImport('{{ path('Evaluation.ImportBibliotheque.ajaxAjout', {mode:mode, idMode:idMode,typeImport:'Q', idTheme:'_NoTheme', idThemeCible:idThemeCible}) }}');">{{ 'Valider' | trad }}</a>
                        {% endif %}
                        <a class="button secondaire" href="{{ pathBack }}">{{ 'Annuler' | trad }}</a>
                    </h2>
                    
                    <div style="display:flex;margin-top:10px;">
                        <div id="divTreeview" class="colonne3" style="min-width:450px;">
                            <div id="treeviewV2" class="treeview" style="margin-top:30px;">
                            </div>
                        </div>
                        <div id="zoneDonnee" class="colonneComplement">
                        </div>
                    </div>
                    
                </div>	
                
            </div>
        </div>
        
        <form id="insertInput">
        </form>
        <style>
            .divMenuContextuel{
                width: 50px;
                height: 34px;
                float: right;
                position: absolute;
                top: 1px;
                right: 0px;
            }
        
            .divMenuContextuel .imagePoint{
                position: absolute;
                top: 50%;
                left: 50%;
                margin-top: -13px;
                width:24px;
                height:24px;
            }
        </style>
        <script>
            $('#treeviewV2').jstree({
                'core' : {
                    "themes":{
                        "theme" : "default",
                        "dots" : false,
                        "icons":false,
                        "variant" : "large"
                    },
                    'data' :  {{ tree | json }}
                },
            })
            .on('loaded.jstree', function() {jQuery("#treeviewV2").jstree("select_node", "{{ post.id_theme }}");})
            .bind("loaded.jstree", function(event, data) {$(this).jstree("open_all");});
            
            
            $(document).on('click', '#treeviewV2 .jstree-anchor', function(e) {
        
                var anchorId = $(this).parent().attr('id');
                var id = anchorId.replace('_anchor', '');
                
                var data = JSON.stringify($('#insertInput').serializeArray());
                
                activeLoader();
                $.ajax({
                    dataType : 'html',
                    url: '{{ baseUrl() }}evaluation/import/bibliotheque/ajax/detailTheme/{{ mode }}/{{ idMode }}/{{ typeImport }}/'+id,
                    type: "POST",
                    data: {data : data},
                    success: function(result){
                        $("#zoneDonnee").html(result);
                        desactiveLoader();
                    }
                });
            });
            
            function AfficheMenu(objet)
            {
                activeLoader();
                event.stopPropagation();
                var id = $(objet).parent().parent().attr('id');
        
                $.ajax({
                    dataType : 'html',
                    url: '{{ baseUrl() }}evaluation/import/bibliotheque/ajax/ajout/{{ mode }}/{{ idMode }}/{{ typeImport }}/'+id{% if idThemeCible %}+'/{{ idThemeCible }}'{% endif %},
                    type: "POST",
                    success: function(result){
                        desactiveLoader();
                        $("#modal-content").addClass("modal_small");
                        $("#modal-body").html(result);
                        activePopup();
                    }
                });
            }
            
            function importTheme(objet)
            {
                activeLoader();
                event.stopPropagation();
                var id = $(objet).parent().parent().attr('id');
        
                $.ajax({
                    dataType : 'html',
                    url: '{{ baseUrl() }}evaluation/import/bibliotheque/ajax/ajout/{{ mode }}/{{ idMode }}/{{ typeImport }}/'+id{% if idThemeCible %}+'/{{ idThemeCible }}'{% endif %},
                    type: "POST",
                    success: function(result){
                        redirectJSWithPost('{{ path('Evaluation.BibliothequeDeQuestions.gestionBibliotheque', {'mode':mode, 'idCamp': idMode}) }}', {});
                    }
                });
            }
            
            function sendImport(path)
            {
                var data = JSON.stringify($('#insertInput').serializeArray());
                activeLoader();
                $.ajax({
                    dataType : 'html',
                    url: path,
                    type: "POST",
                    data: {data : data},
                    success: function(result){
                        redirectJSWithPost('{{ path('Evaluation.BibliothequeDeQuestions.gestionBibliotheque', {'mode':mode, 'idCamp': idMode}) }}', {});
                    },
                    error: function (xhr){
                        if (xhr.status == '500') {
                            desactiveLoader();
                            desactivePopup();
                            alert('Internal Server Error.');
                        } else {
                            desactiveLoader();
                            activePopupError(
                                {{ 'Erreur' | trad | json }},
                                xhr.responseText,
                                'modal_small'
                            );
                        }
                    }
                });
            }
        </script>
    </div>
{% endblock %}