<div id ="refreshTableau">
            <div id="treeCGQuestionnaire" class="treeview" style="width: 450px;float: left;bottom: 3706px;position: absolute;left: 506px;">
            </div> 
                <table id="tableBibliotheque" class="table table-hover" style ="width: 95%;margin-left: 956px;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 }}" >
            
                            <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>
    <script>
    var treeArrayQuestionnaire = JSON.parse($('#treeQuestJsTraitementQuestionnaire').val());
    
    $('#treeCGQuestionnaire').treeview({
								'data': {{ treeCGQuestionnaire | json }},
								'showTags': true,
								'levels': {{levelQuestionnaire}},
								'enableLinks': true
	}); 
     $('#treeCGQuestionnaire ul li').each(function( index ) 
    {
        $(this).attr('id', treeArrayQuestionnaire[index]['ID_THEME']);
        $(this).addClass("ui-draggable ui-draggable-handle");
    });

    $("#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); 
                $('#' + ev['currentTarget']['id']).css({'color': '#FFFFFF','background-color':'#428bca'});
        	}
        });
       
    });

    $("#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'] });
        }
    });
    </script>
                </div>     

