{% 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>

    	
    	<form method="post" class= "bg_form padding_form border_form clearfix" name="form_detail_etat" id="form_detail_etat">

		<div id="table_criteres" style= "">
		
			<div id ="corpFiltre">

				<label for="categorie">{{'Catégorie' | trad }}</label>
				<div class="row" style="width:600px;">
					<select class="form-control" name="GRILLCAT" id="GRILLCAT">
							
						{% for elemGrill in grilleCat %}
							<option value ="{{elemGrill.ID_GRILLE}}" onClick ="changeViewGrilModeEvent(this, {{ elemGrill.ID_GRILL }} );" selected>{{elemGrill.LIB_GRILLE |trad}} </option>
						{% endfor %}
		
					</select>
				</div>
		</div>

		<div id ="corpModeEvent">
			<label for="categorie">{{'Modèles' | trad }}</label>
			<div class="row">
				<div id="ModeEvent" class="ModeEvent" style="width:361px;">
					<input type="hidden" id="hiddenGrill" value="{{grillModeEventJsonEncode}}" >
					<ul id="" class="SyncLists right">
						{% for elemGrillCat in grillModeEvent %}
						{# Rajouter un label modèle #}
							<li onClick = "changeDetailByModel('{{elemGrillCat.ID_MODEL}}')" class="varianteListe" id="{{elemGrillCat.ID_MODEL}}">{{elemGrillCat.LIB_MODEL}}<span id="interval"></span></li>
						{% endfor %}
						</ul>
				</div>
			</div>
		</div>

		<div class="colonne2">	
			<div class="row">
				<div id="refreshTableau">
					<div>
						{# Ici on va ajouter le treeView depuis une vue apart  #}
						<div id="treeView">
							
						</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>

		

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



<script type="text/javascript">

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

	});



	function changeView(idValue, change, divHidding, hideD)
	{

		$(change).css('display', 'block');
		$(divHidding).css('display', 'none'); 
		//$(divHidding).hide(); 

		$(hideD).removeClass('active');
		$(idValue).addClass('active');

	}			


	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>

{% endblock %}