{% extends 'figure_initialisation_template.html.twig' %}

{% block stylesheets %}
	{{ parent() }}
	
	<style>
	
	#step4
	{
		background-color:white;
	}
	
	.resume
	{
		flex:1;
		margin:0% 5% 2% 5%;
		border:solid;
		padding:1%;
		background-color:#800000;
		color:white;
		box-shadow: -2px 0px 10px 5px rgba(0, 0, 0,1.5);
		list-style-type:none;
	}
	
	
	#form_figure div
	{
		flex:2;
	}
	
	
	#form_figure div
	{
		display:flex;
		flex-direction: column;
		align-items: center;
		height:300px;
		width:100%;
	}
	
	/*#form_figure div form*/
	form
	{
		width:30%;
		height:200px;
		border:solid;
		background-color:white;
    	box-shadow: -2px 0px 10px 5px rgba(0, 0, 0,1.5);
	}
	
	#form_figure div form div 
	{
		display:flex;
		flex-direction: column;
		align-items: flex-start;
		
	}
	
	#form_figure div form div input
	{
		height:40px;
    	font-size:20px;
    	background-color:white;
    	box-shadow: -2px 0px 10px 5px rgba(0, 0, 0,1.5) inset;
    	width:99%;
    	margin:20px 0px 20px 0px ;
	}
	
	#form_figure div form div button
	{
		height:40px;
        width:180px;
    	background-color:#EDCF40;
    	font-size:0.9em;
    	border-radius:15px 15px 15px 15px;
    	border-color:none;	
    	box-shadow: -2px 0px 10px 5px rgba(0, 0, 0,1.5);
    	
	}
	
	#form_figure select
	{
		height:40px;
		width:200px;
		text-align:center;
	}
	
	#description
	{
		width:100%;
		display:flex;
		flex-direction:column;
		justify-content:center;
	}
	
	#description ul
	{
		border:solid;
		margin:10px 10px 10px 10px;
		min-width:200px;
		box-shadow: -2px 0px 10px 5px rgba(0, 0, 0,1.5) inset;
		background-color:#93fab4;
	}
	
	#caste
	{
		
	}
	
	#favours
	{
		
	}
	
	.hidden
	{
		display:none;
	}
	
	</style>

{% endblock %}

	
{% block initialisation_figure %}

<h1>choix de la caste</h1>

<p class="resume">La caste blablabla </p>

<div>
	{{ form(form) }}
</div>

<span id="description">
	<ul id="caste" >
	</ul>
		
	<ul id="favours" >
	</ul>
	
	<ul id="benefits" >
	</ul>
	
	<ul id="prohibiteds" >
	</ul>
	
	<ul id="technics" >
	</ul>
	
</span> 


<div >
	<ul id="castes_list" class="hidden">
    {% for caste in castes %}
		<li id="{{ caste.name }}"  caste="{{ caste.name }}" description="{{ caste.description }}">{{ caste.description }} caste="{{ caste.name }}"</li>	
	{% endfor %}
	</ul>
	
	<ul id="favours_list" class="hidden">
    {% for favour in favours %}
		<li id="{{ favour.caste }}" favour="{{ favour.name }}" description="{{ favour.description }}" caste="{{ favour.caste.name }}">favour="{{ favour.name }}" description="{{ favour.description }}"  caste="{{ favour.caste.name }}"</li>
	{% endfor %}
	</ul>

	<ul id="benefits_list" class="hidden">
    {% for benefit in benefits %}
		<li id="{{ benefit.status.caste.name }}" benefit="{{ benefit.name }}"   description="{{ benefit.description }}" >benefit="{{ benefit.name }}" description="{{ benefit.description }}" status="{{ benefit.status.level }}" caste="{{ benefit.status.caste.name }}"</li>
	{% endfor %}
	</ul>
	
		<ul id="prohibiteds_list" class="hidden">
    {% for prohibited in prohibiteds %}
		<li id="{{ prohibited.caste }}" prohibited="{{ prohibited.name }}" description="{{ prohibited.description }}" >prohibited="{{ prohibited.name }}" description="{{ prohibited.description }}"  caste="{{ prohibited.caste }}"</li>
	{% endfor %}
	</ul>
	
		<ul id="technics_list" class="hidden">	
    {% for technic in technics %}
		<li id="{{ technic.status.caste.name }}" technic="{{ technic.name }}" description="{{ technic.description }}" caste="{{ technic.status.caste.name }}" >technic="{{ technic.name }}" description="{{ technic.description }}" caste="{{ technic.status.caste.name }}"</li>
	{% endfor %}
	</ul>
		
</div>
		
{% endblock %}

{% block javascripts %}
	<script>
	
	
function selected ()
{
	let index = this.selectedIndex;
	
	//vars
	let castesList = document.getElementById('castes_list');
    let favoursList = document.getElementById('favours_list');
    let benefitsList = document.getElementById('benefits_list');
    let prohibitedsList = document.getElementById('prohibiteds_list');
    let technicsList = document.getElementById('technics_list');
    
    let castes = castesList.getElementsByTagName('li');
    let favours = favoursList.getElementsByTagName('li');
    let benefits = benefitsList.getElementsByTagName('li');
    let prohibiteds = prohibitedsList.getElementsByTagName('li');
    let technics = technicsList.getElementsByTagName('li');

	//display castes
	//titre pour la description des castes      
    let casteDescription = document.getElementById('caste');
    let casteTitleLine = document.createElement ("h3");
    let casteTitle = document.createTextNode('description de la caste choisie');
    casteDescription.innerHTML = "";
    casteTitleLine.appendChild(casteTitle);
    casteDescription.appendChild(casteTitleLine);
    
    for(let elem of castes)
	{
		let elementId = elem.getAttribute('id'); 
		if(this.options[index].text == elementId)
		{
			let li = document.createElement("li");
			let content = document.createTextNode(elem.innerHTML);
			li.appendChild(content);
			casteDescription.appendChild(li);
		}	
	}
	
	//display favours
	//titre pour la description des faveurs      
    let favourDescription = document.getElementById('favours');
    let favourTitleLine = document.createElement ("h3");
    let favourTitle = document.createTextNode('Liste des privilèges de la caste');
    favourDescription.innerHTML = "";
    favourTitleLine.appendChild (favourTitle);
    favourDescription.appendChild(favourTitleLine);
    
    for(let elem of favours)
	{
		let elementId = elem.getAttribute('id'); 
		if(this.options[index].text.toLowerCase() == elementId)
		{
			let li = document.createElement("li");
			let content = document.createTextNode(elem.innerHTML);
			li.appendChild(content);
			favourDescription.appendChild(li);
		}	
	}

  //display first benefices         //A CONTROLER

  //titre pour la description des faveurs
  let benefitsDescription = document.getElementById('benefits');
  let benefitTitleLine = document.createElement ("h3");
  let benefitTitle = document.createTextNode('Liste des bénéfices de la caste');
  benefitsDescription.innerHTML = "";
  benefitTitleLine.appendChild (benefitTitle);
  benefitsDescription.appendChild(benefitTitleLine);

  //liste des benefices pour la caste
  let benefitsAttributes = benefitsList.getElementsByTagName('li');

  for(let elem of benefitsAttributes)
  {
  	let elementId = elem.getAttribute('id');
  	if(select.options[index].text.toLowerCase() == elementId)
  	{
  		let li = document.createElement("li");
  		let content = document.createTextNode(elem.innerHTML);
  		li.appendChild(content);
  		benefitsDescription.appendChild(li);
  	}
  }
  	

    //display first prohibiteds
    
    //titre pour la description des interdits
    let prohibitedsDescription = document.getElementById('prohibiteds');
    let prohibitedTitleLine = document.createElement ("h3");
    let prohibitedTitle = document.createTextNode('Liste des interdits de la caste');
    prohibitedsDescription.innerHTML = "";
    prohibitedTitleLine.appendChild (prohibitedTitle);
    prohibitedsDescription.appendChild(prohibitedTitleLine);
    
    //liste des interdits pour la caste
    let prohibitedsAttributes = prohibitedsList.getElementsByTagName('li');
    
    for(let elem of prohibitedsAttributes)
    {
    	let elementId = elem.getAttribute('id');
    	if(select.options[index].text.toLowerCase() == elementId.toLowerCase())
    	{
    		let li = document.createElement("li");
    		let content = document.createTextNode(elem.innerHTML);
    		li.appendChild(content);
    		prohibitedsDescription.appendChild(li);
    	}
    }

  //display first technics

  //titre pour la description des techniques
  let technicsDescription = document.getElementById('technics');
  let technicTitleLine = document.createElement ("h3");
  let technicTitle = document.createTextNode('Liste des techniques de la caste');
  technicsDescription.innerHTML = "";
  technicTitleLine.appendChild (technicTitle);
  technicsDescription.appendChild(technicTitleLine);

  //liste des techniques pour la caste
  let technicsAttributes = technicsList.getElementsByTagName('li');

  for(let elem of technicsAttributes)
  {
  	let elementId = elem.getAttribute('id');

  	if(select.options[index].text.toLowerCase() == elementId.toLowerCase())
  	{
  		let li = document.createElement("li");
  		let content = document.createTextNode(elem.innerHTML);
  		li.appendChild(content);
  		technicsDescription.appendChild(li);
  	}
  }
	
}	
	
	
//display first caste
let select = document.querySelector('select');
let castesList = document.getElementById('castes_list');
let favoursList = document.getElementById('favours_list');
let benefitsList = document.getElementById('benefits_list');
let prohibitedsList = document.getElementById('prohibiteds_list');
let technicsList = document.getElementById('technics_list');

let castes = castesList.getElementsByTagName('li');
let favours = favoursList.getElementsByTagName('li');
let benefits = benefitsList.getElementsByTagName('li');
let prohibiteds = prohibitedsList.getElementsByTagName('li');
let technics = technicsList.getElementsByTagName('li');

let caste = castes[0];

//titre pour la description des castes      
let casteDescription = document.getElementById('caste');
let casteTitleLine = document.createElement ("h3");
let casteTitle = document.createTextNode('description de la caste choisie');
casteTitleLine.appendChild(casteTitle);
casteDescription.appendChild(casteTitleLine);

//description de la caste [0]
let casteDescriptionLine = document.createElement('p');
let descriptionCaste = document.createTextNode(caste.getAttribute('description'));
casteDescriptionLine.appendChild(descriptionCaste);
casteDescription.appendChild(casteDescriptionLine);


//display first favours                NE MARCHE PAS

//titre pour la description des faveurs
let favourDescription = document.getElementById('favours');
let favourTitleLine = document.createElement ("h3");
let favourTitle = document.createTextNode('Liste des privilèges de la caste');
favourTitleLine.appendChild (favourTitle);
favourDescription.appendChild(favourTitleLine);

//liste des faveurs pour la caste[0]
let favoursAttributes = favoursList.getElementsByTagName('li');

for(let elem of favoursAttributes)
{
	let elementId = elem.getAttribute('id');
	
	if(select.options[0].text.toLowerCase() == elementId)
	{
		let li = document.createElement("li");
		let content = document.createTextNode(elem.innerHTML);
		li.appendChild(content);
		favourDescription.appendChild(li);
	}
}


//display first benefices

//titre pour la description des faveurs
let benefitsDescription = document.getElementById('benefits');
let benefitTitleLine = document.createElement ("h3");
let benefitTitle = document.createTextNode('Liste des bénéfices de la caste');
benefitTitleLine.appendChild (benefitTitle);
benefitsDescription.appendChild(benefitTitleLine);

//liste des benefices pour la caste[0]
let benefitsAttributes = benefitsList.getElementsByTagName('li');

for(let elem of benefitsAttributes)
{
	let elementId = elem.getAttribute('id');
	if(select.options[0].text == elementId)
	{
		let li = document.createElement("li");
		let content = document.createTextNode(elem.innerHTML);
		li.appendChild(content);
		benefitsDescription.appendChild(li);
	}
}




//display first prohibiteds

//titre pour la description des interdits
let prohibitedsDescription = document.getElementById('prohibiteds');
let prohibitedTitleLine = document.createElement ("h3");
let prohibitedTitle = document.createTextNode('Liste des interdits de la caste');
prohibitedTitleLine.appendChild (prohibitedTitle);
prohibitedsDescription.appendChild(prohibitedTitleLine);

//liste des interdits pour la caste[0]
let prohibitedsAttributes = prohibitedsList.getElementsByTagName('li');

for(let elem of prohibitedsAttributes)
{
	let elementId = elem.getAttribute('id');
	if(select.options[0].text.toLowerCase() == elementId.toLowerCase())
	{
		let li = document.createElement("li");
		let content = document.createTextNode(elem.innerHTML);
		li.appendChild(content);
		prohibitedsDescription.appendChild(li);
	}
}



//display first technics

//titre pour la description des techniques
let technicsDescription = document.getElementById('technics');
let technicTitleLine = document.createElement ("h3");
let technicTitle = document.createTextNode('Liste des techniques de la caste');
technicTitleLine.appendChild (technicTitle);
technicsDescription.appendChild(technicTitleLine);

//liste des techniques pour la caste[0]
let technicsAttributes = technicsList.getElementsByTagName('li');

for(let elem of technicsAttributes)
{
	let elementId = elem.getAttribute('id');

	if(select.options[0].text.toLowerCase() == elementId.toLowerCase())
	{
		let li = document.createElement("li");
		let content = document.createTextNode(elem.innerHTML);
		li.appendChild(content);
		technicsDescription.appendChild(li);
	}
}

select.addEventListener('change', selected);

	
	</script>
{% endblock %}