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

{% block stylesheets %}
	{{ parent() }}
	
	<style>
	
	#step8
	{
		background-color:white;
	}
	
	</style>
{% endblock %}

	
{% block initialisation_figure %}

{{ form_start(form) }}
	{{ form_widget (form)  }}
	{{ form_end(form) }}
	
	attributs mineurs
	
	<div >
		<ul id="values">
		{% for value in startValues %}
			<li name="startValues" >{{ value }}</li>
	    {% endfor %}
		</ul>
	
		<ul id="available_values">
			reste
		</ul>
	</div>
	
<script>

function printAvailableValues(available_values)
{
	let content = "";
	for(let i = 0 ; i < available_values.length ; i++)
    {
    	content += '<li>' + available_values[i] + '</li>';	
    }
    document.getElementById('available_values').innerHTML = content;
}


function selectChange ()
{

	if(this.lastvalue != 0)
	{
		if(available_values.includes(this.value))
		{
			available_values.push(this.lastvalue);
			this.lastvalue = this.value;
			let index = available_values.indexOf(this.value);
			available_values.splice(index,1);
			
		}
		else
		{
			alert("valeur non disponible");
			this.value = this.lastvalue;
		}
	}

	if(this.lastvalue == 0)
	{
		if(available_values.includes(this.value))
		{
			this.lastvalue = this.value;
			let index = available_values.indexOf(this.value);
			available_values.splice(index,1);
			
		}
		
		else
		{
			alert("valeur non disponible ");
			this.selectedIndex = 0;
		}	
	}
	
	printAvailableValues(available_values);
	
}

let available_values = new Array();
let startValuesSection = document.getElementsByName('startValues');
let available_values_section = document.getElementById('available_values').innerHTML;
//let startValues = [];
for(let i = 0 ; i < startValuesSection.length ; i++)
{
	available_values.push(startValuesSection[i].innerHTML);
}

printAvailableValues(available_values);



let selects = document.getElementsByTagName('select');
for(let i = 0 ; i < selects.length ; i++)
{
	selects[i].addEventListener('change', selectChange);
	selects[i].lastvalue = 0;
}









/*
function printAvailableValues(available_values)
{
	let content = "";
	for(let i = 0 ; i < available_values.length ; i++)
    {
    	content += '<li>' + available_values[i] + '</li>';	
    }
    document.getElementById('available_values').innerHTML = content;
}


function selectChange ()
{
	let remaining = false;
	let found = false;
	resetAvailableValue(this.lastvalue);
	for(let i = 0 ; i < startValues.length ;i++)
	{
		
		if(this.value == 0)
		{
			remaining = true;
			this.selectedIndex = 0;
			this.lastvalue = 0;
		}
		
		if(startValues[i] == this.value && found == false && available_values[i] == 1)
		{
			available_values[i] = 0;
			remaining = true;
			found = true;
		}
		this.lastvalue = this.value;
	}
	
	if(remaining == false)
	{
		alert("cette valeur n'est pas disponible");
		this.selectedIndex = 0;
	}
	printAvailableValues(available_values);
	for(let i = 0 ; i < selects.length ; i++)
	{
		alert(selects[i].lastvalue);
	}
}


function resetAvailableValue(value)
{

	let found = false;
	for (let i = 0 ; i < startValues.length ; i++)
	{
		if(startValues[i] == value && available_values[i] == 0 && found == false)
		{
			available_values[i] = 1;
			found = true;
		}
	}
	
}



let available_values = [];
let startValuesSection = document.getElementsByName('startValues');
let startValues = [];
for(let i = 0 ; i < startValuesSection.length ; i++)
{
	startValues[i] = startValuesSection[i].innerHTML;
	available_values[i] = 1;
}

let available_values_section = document.getElementById('available_values').innerHTML;
printAvailableValues(available_values);



let selects = document.getElementsByTagName('select');
for(let i = 0 ; i < selects.length ; i++)
{
	selects[i].addEventListener('change', selectChange);
}
*/




</script>	
	
		
{% endblock %}