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

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

	
	
{% block initialisation_figure %}

Initialisation des compétences de votre personnage
	
		<p>experience restantes</p> <p id="xp"></p>


{{ form_start(form) }}

{% set count = 0 %}

{% for majorAttribute in figure.majorAttributes %}
		{{ majorAttribute.majorAttribute.name }} 
		{% for skillCategory in skillCategories %}
			{% if skillCategory.majorAttribute.name is same as (majorAttribute.majorAttribute.name) %} 
				{{ skillCategory.name }}
			{% for skill in figure.skills %}
		    	{% if skill.skill.skillCategory.name is same as (skillCategory.name) %}				
		    	{# {{ form_widget(form.skills[count]) }}  #}
		    	{{ form_widget(form.skills[count]) }}
		    		{% if count < figure.skills | length %}
                    {% set count = count + 1 %}
                    {% endif %}	
		    	{% endif %}
	    	{% endfor %}
	    	{% endif %}
		{% endfor %}
	    {% endfor %}
 
{{ form_widget(form.valider) }}
{{ form_widget(form.xperience) }}

{{ form_end(form) }}


		
</div>
	
{% endblock %}
	
	{# {% include 'footer.html.twig' %} #}



{% block javascripts %}
<script>
/* ATTENTION, ON A OUBLIE DE GERER LA LIMITE DE SKILL A LA CREATION QUI DEPEND DE L AGE */

function initialisation()
{
	let elts = document.getElementsByClassName('inputSkill');

	for(let i = 0 ; i < elts.length ; i++)
    {
    	let lastValue = elts[i].getAttribute('lastvalue');
    	let value = elts[i].getAttribute('value');
    	elts[i].setAttribute('lastvalue', value); 
    }
}


window.addEventListener('load', initialisation);


function modif()
{
	let xperience = document.getElementById("initialise_prophecy_figure_skill_form_xperience").value;
	let maxValue = this.getAttribute('maxvalue');
	let value = this.value;
	let lastValue = this.getAttribute('lastvalue');
	
	if(value > maxValue)
	{
		alert("vous avez atteint la valeur maximale autorisée a la creation");
		this.value -= 1;
	}
	
	else if(value < 0)
	{
		alert("vous ne pouvez descendre en dessous de 0");
		this.value = 0;
	}

	//augmentation d'une competence
	else if(xperience-value > 0 && value > lastValue)
	{
		xperience = parseInt(xperience)-parseInt(value);	
		document.getElementById("initialise_prophecy_figure_skill_form_xperience").value = xperience;
		lastValue++;
		this.setAttribute('lastvalue', lastValue);
		document.getElementById("xp").innerHTML = document.getElementById("initialise_prophecy_figure_skill_form_xperience").value
	}
	
	//diminution d'une competence
	else if (xperience-value > 0 && value < lastValue)
	{
		xperience = parseInt(xperience) + parseInt(lastValue);
		document.getElementById("initialise_prophecy_figure_skill_form_xperience").value = xperience;
		lastValue--;
		this.setAttribute('lastvalue', lastValue); 
		document.getElementById("xp").innerHTML = document.getElementById("initialise_prophecy_figure_skill_form_xperience").value
	}
	
	//depassement de l'experience disponible
	if(xperience-value < 0)
	{
		alert("vous n'avez pas assez d'experience");
		this.value -= 1;	
	}
}


let elts = document.getElementsByClassName('inputSkill');
for(let i = 0 ; i < elts.length ; i++)
{
	elts[i].addEventListener('change', modif);
}

document.getElementById("xp").innerHTML = document.getElementById("initialise_prophecy_figure_skill_form_xperience").value



</script>

		
{% endblock %}