{% extends 'layout.twig' %}

{% block body %}


 <div class="contenu clearfix"  id="accueil">
 	<div class="row">
		<div class="fond_blanc_popup padding15" style="height:100%;">
			<div>
				<table class="tablespacepadd0 dib" style="border-collapse: collapse;margin:5px;">
					<tbody>

					</tbody></table>
			</div>
		
		<div>
			<h1>{{'Import modèle' |trad}}</h1>
		</div>

		<div style="height:20px;"></div>
		            {{ ariane() }}

		<H2>{{'Choix du modèle de grille' |trad}} </H2>
        
        <input type="hidden" name="treeQuestJsTraitement" id="treeQuestJsTraitementQuestionnaire" value="{{treeQuestJsTraitementQuestionnaire}}">
        
        <input type="hidden" name="treeQuestJsTraitement" id="treeQuestJsTraitementCampagne" value="{{treeQuestJsTraitementCampagne}}">
    	<div id ="englobeForm">
            <form method="post" class= "bg_form padding_form border_form clearfix" name="form_detail_etat" id="form_detail_etat">


            
            

            <div id ="spaceLeft">

                <div class="row">
                    <div id="dropTreeCampagne" class="colonne2">
                        <div id="treeviewCampagne" class="treeview" style="width: 450px;float: left;top: -10px;position: relative;left: 0px;">
                            </div>
                    </div>
                </div>
            </div>

            <div class="colonne2">	
                <div class="row">
                    <div id="refreshTableau">
                        <div>
                            <div id="treeCGQuestionnaire" class="treeview" style="width: 450px;float: left;bottom: 3706px;position: absolute;left: 506px;">
                            </div> 
                                <div id="tableRefresh">
                                        <table id="tableBibliotheque" class="table table-hover" style ="width: 85%;margin-left: 955px;margin-top: -5706px;position: absolute;">
                                            <thead class="thead-dark">
                                                <tr>
                                                    <th scope="col" width="7%">{{'Libellé Questions' | trad }}</th>
                                                    <th scope="col" width ="3%">{{'Type de réponse' | trad }}</th>
                                                    <th scope="col" width="3%" class="align-center">{{'Poids' | trad}}</th>
                                                    <th scope="col" width="5%" class="align-center"></th>                          
                                                
                                                </tr>
                                            </thead>
                                            <tbody>
                                
                                            {% set compteur = 1 %}
                                            {% for blb in liste_gestion %}
                                                {% set compteur =  compteur + 1 %}
                                                
                                                <tr id="commande{{ blb.ID_QUEST }}" class="delete" >
                                    
                                                    <td onclick = "hideAll();toggleSlide('{{ path('GlobalApplication.ImportQuestion.ajaxDetailLoupeQuestion', {'idQuestion' : blb.ID_QUEST }) }}' , 'commande{{ blb.ID_QUEST }}detail', {'id' : {{ blb.ID_QUEST }}, 'mode' : '{{mode}}' } );" class="toggleSlide" id = "loupe_{{ blb.ID_QUEST }}">{{ blb.LIB_QUEST }}</td>
                                                    <td> 

                                                    
                                                    {% if blb.TYPE_REP == 'N' %}
                                                        {{'Numérique' | trad }}
                                                    {% endif %}
                                                    {% if blb.TYPE_REP == 'O' %}
                                                        {{'Ouvert' | trad }}
                                                    {% endif %}
                                                    {% if blb.TYPE_REP == 'L' %}
                                                        {{'Logique' | trad }}
                                                    {% endif %}
                                                    {% if blb.TYPE_REP == 'T' %}
                                                        {{'Tableau de réponses' | trad}}
                                                    {% endif %}
                                                    {% if blb.TYPE_REP == 'C' %}
                                                        {{ 'Calculée' | trad }}
                                                    {% endif %}
                                                    </td>
                                                    <td class="align-center">{{ blb.POIDS  }}</td>
                                                    <td class="align-center"></td>
                                
                                                    
                                                </tr>
                                                
                                                <tr id="commande{{ blb.ID_QUEST }}detail" class="detail_ligne hide_detail sousBlock">
                                                {# ajaxDetailQuestion == toggleSlide #}
                                                </tr>
                                                {% endfor %}
                            
                                            </tbody>
                                        </table>
                                        </div>             
                                    </div>
                                </div>	
                            </div>
                        </div>
                       
                            
                        

                        <div class="row">
                            <a id="send" style ="position: absolute;left: 294px;" class="button principal" >{{'Importer' | trad}}</a>
                            <input type="hidden" name="idModel" value ="">
                        </div>

                        

                        
</form>
<script type="text/javascript">

    
   // $("#treeCGQuestionnaire").height($(window).height() - 20);
    var dropSpace = $(window).width() - $("#treeviewCampagne").width();
    $('.node-treeCGQuestionnaire').draggable();
    $('.not-drag').draggable();

    $('#treeviewCampagne').droppable({
        accept : '#node-treeCGQuestionnaire', // je n'accepte que le bloc ayant "drag" pour id
        drop : function(){
            alert('Action terminée !');
        }
    });

	{# Utiliser pour importer le model selectionner #}
	$("#send").click(function(e) 
	{
			activeLoader();
			//$("#stati").removeClass('active');

	});

	$('#treeviewCampagne').treeview({
								'data': {{ treeCGCampagne | json }},
								'showTags': true,
								'levels': {{levelCampagne}},
								'enableLinks': true,
	}); 

    $('#treeCGQuestionnaire').treeview({
								'data': {{ treeCGQuestionnaire | json }},
								'showTags': true,
								'levels': {{levelQuestionnaire}},
								'enableLinks': true
	}); 

    var treeArrayQuestionnaire = JSON.parse($('#treeQuestJsTraitementQuestionnaire').val());
    var treeArrayCampagne = JSON.parse($('#treeQuestJsTraitementCampagne').val());

    $('#treeCGQuestionnaire ul li').each(function( index ) 
    {
        $(this).attr('id', treeArrayQuestionnaire[index]['ID_THEME']);
        $(this).addClass("ui-draggable ui-draggable-handle");
    });
        //$('#treeviewCampagne ul li').each(function( index ) 
        //{
        //    console.log(treeArrayCampagne[index]['ID_THEME']);
        //  //console.log(index); 

        //$(this).attr('id', treeArrayCampagne[index]['ID_THEME']);
        //$(this).attr('id', treeArrayCampagne[index]['ID_THEME']);
    //});
    $("#treeCGQuestionnaire ul li").off('mouseup');

    $("#treeCGQuestionnaire ul li").mousedown(function(ev)
    {
        // récuperation id theme 
        //console.log($(this.id).selector);  
        $(this).css("cursor", "move");

        if ( !$(ev.target).data("ui-draggable") ) 
        {
            $(ev.target).draggable();
            $(ev.target).trigger(ev);
        }
        
    });
    $( "#treeviewCampagne ul li" ).droppable({
        drop: function( event, ui )
        {
            // Le theme du questionnaire ( celui qui ce fait draggable )
            console.log(ui['draggable']['context']['id']); 
            // Le texte de l'élément sur lequel on se positionne
            console.log($(this)[0]['innerText']);

            $( this )
            .addClass( "ui-state-highlight" );

            ajaxPopup("{{ path('GlobalApplication.ImportQuestion.popupConfirmationMoveThemeQuestionnaire')}}",'Confirmation', 'name', 'name', 
                                                                                        {'themeQuestionnaire' : ui['draggable']['context']['id'],
                                                                                        'texteCampagneFocus' : $(this)[0]['innerText'] });
        }
    });


    $("#treeCGQuestionnaire ul li").mouseup(function(ev)
    { 
        $.ajax({
        	url : '{{ path('GlobalApplication.ImportQuestion.ajaxTableauRefresh') }}',
        	type: 'POST',
        	dataType : 'HTML',
        	data: {'idModelTheme' : ev['currentTarget']['id']},
        	success: function (html) 
        	{
                //refreshFonction('englobeForm', html);
               //console.log($('#englobeForm').find("form")); 
                res = $('<div />').append(html).find('#refreshTableau').html();
        		$('#refreshTableau').html(res); 
        	}
        });
    });

        //valMode = $('#form_detail_etat').val(); 
        //var myForm = $("#form_question_").serializeArray();
//
        //myForm.push({name : 'idModelTheme', value :this.id});




	function changeViewGrilModeEvent(idValue, idGrille)
	{
		select = $(idValue).val();

		$.ajax({
			url : '{{ path('GlobalApplication.ImportQuestion.ajaxModelRefresh' ) }}',
			type: 'POST',
			dataType : 'HTML',
			data: {'GRILLCAT' : select},
			success: function (html) 
			{
				$('#corpModeEvent').html(html); 
			}
		});
		//refrechDiv('{{ path('GlobalApplication.ImportQuestion.ajaxModelRefresh') }}', 'corpModeEvent', 'form_detail_etat');
		$("#tableau").addClass('active'); 
	}
	
	function changeDetailByModel(idModel)
	{
		var jsonHiddenGrill = JSON.parse($('#hiddenGrill').val());
 
		for(i = 0; i<jsonHiddenGrill.length; i++)
		{
			$('#' + jsonHiddenGrill[i][0]).attr('style', ''); 
		}

		$('#' + idModel).css({
			'padding' : '1px',
			'padding-left' : '10px',
			'border' : '0px solid #327e04',
			'background-color': 'rgba(74, 85, 107, 0.06)', 
			'font-weight' : 'bold', 
		});

		$.ajax({
			url : '{{ path('GlobalApplication.ImportQuestion.ajaxDetailByModel' ) }}',
			type: 'POST',
			dataType : 'HTML',
			data: {'idModelTheme' : idModel},
			success: function (html) 
			{
				$('#treeView').html(html); 
			}
		});
	}

	


</script>
</div>
</div>
</div>


{% endblock %}