<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta name="description" content="Simulation du MMO Grepolis">

<title>GrepoSimu</title>

<link rel="shortcut icon" th:href="@{/favicon.ico}" type="image/x-icon">

<style>
body {
	background-color: #ffecc3;
}
.unit-image {
	width: 50px;
	height: 50px;
}
.slider {
  -webkit-appearance: none;  /* Override default CSS styles */
  appearance: none;
  width: 276px; /* Full-width */
  height: 8px; /* Specified height */
  background-image: url("[[@{/images/slider3.png}]]"); /* Grey background */
  outline: none; /* Remove outline */
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 18px; /* Set a specific slider handle width */
  height: 18px; /* Slider handle height */
  background-image: url("[[@{/images/sliderButton.png}]]"); /* Grey background */
}

.slider::-moz-range-thumb {
  width: 18px; /* Set a specific slider handle width */
  height: 18px; /* Slider handle height */
  background-image: url("[[@{/images/sliderButton.png}]]"); /* Grey background */
}

span.fixed50px {
	width: 50px;
	display: inline-block;
}
.parameters-selection {
	display: flex;
	column-gap: 0px
}
.small-number-selection {
	border: 2px solid #e1af55;
	background: #ffe2a1;
	display: inline-flex;
	padding: 4px;
}

.numbered-unit {
  width: 50px;
  height: 50px;
  text-align: center;
  background-color: #CCCCCC;
  position: relative;
  display: inline-block;
}

.numbered-unit span {
  width: 50px;
  color: #000000;
  float: left;
  position: absolute;
  left: 0px;
  padding-top: 26px;
  text-align: right;
  color: #fff;
  text-shadow: 1px 1px 0 #000;
  font-family: Verdana;
  font-weight: 700;
}

.numbered-unit img {
  width: 50px;
  height: 50px;
  border: 0px;
  margin: auto;
}

.resultsUnits{
	display: flex;
}

table#resultsByGod, table#resultsByGod tr td {
  border: 2px solid #e1af55;
  border-collapse: collapse;
}
</style>

</head>
<body>
	
	<form action="#" th:object="${optinput}" method="post" id="simuform" >
	<h4>Héros</h4>
	<select name="heros" id="heros" th:field="*{heros}">
	  <option value="none">Aucun</option>
	  <option th:each="hero : ${heros}" th:value="${hero.pname}"><span th:text="${hero.nom}"/></option>
	</select>
	
	<label for="herosLevelSlider">Niveau du héros: (<span id="herosLevelSliderInfo" class="fixed50px"></span>)</label>
	 <input type="range" min="1" max="20" value="1" class="slider" id="herosLevelSlider" th:field="*{herosLvl}">
	<script>
	var slider = document.getElementById("herosLevelSlider");
	var output = document.getElementById("herosLevelSliderInfo");
	output.innerHTML = "lvl. "+slider.value;
	// Update the current slider value (each time you drag the slider handle)
	slider.oninput = function() {
	  output.innerHTML = "lvl. "+this.value;
	} 
	</script>
	
	<h4>Paramètres</h4>
	<div class="parameters-selection">
	<div class="small-number-selection">
		<label for="att_hack_proportion"><img th:src="@{/images/info/att_hack.png}"/></label>
		<input type="number" id="att_hack_proportion" th:field="*{att_hack_proportion}" value="1" size="8" />
	</div>
	<div class="small-number-selection">
		<label for="att_pierce_proportion"><img th:src="@{/images/info/att_pierce.png}"/></label>
		<input type="number" id="att_pierce_proportion" th:field="*{att_pierce_proportion}" value="1" size="8" />
	</div>
	<div class="small-number-selection">
		<label for="att_distance_proportion"><img th:src="@{/images/info/att_distance.png}"/></label>
		<input type="number" id="att_distance_proportion" th:field="*{att_distance_proportion}" value="1" size="8" />
	</div>
	<div class="small-number-selection">
		<label for="ship_attack_proportion"><img th:src="@{/images/info/ship_attack.png}"/></label>
		<input type="number" id="ship_attack_proportion" th:field="*{ship_attack_proportion}" value="1" size="8" />
	</div>
	<div class="small-number-selection">
		<label for="def_hack_proportion"><img th:src="@{/images/info/def_hack.png}"/></label>
		<input type="number" id="def_hack_proportion" th:field="*{def_hack_proportion}" value="1" size="8" />
	</div>
	<div class="small-number-selection">
		<label for="def_pierce_proportion"><img th:src="@{/images/info/def_pierce.png}"/></label>
		<input type="number" id="def_pierce_proportion" th:field="*{def_pierce_proportion}" value="1" size="8" />
	</div>
	<div class="small-number-selection">
		<label for="def_distance_proportion"><img th:src="@{/images/info/def_distance.png}"/></label>
		<input type="number" id="def_distance_proportion" th:field="*{def_distance_proportion}" value="1" size="8" />
	</div>
	<div class="small-number-selection">
		<label for="ship_defense_proportion"><img th:src="@{/images/info/ship_defense.png}"/></label>
		<input type="number" id="ship_defense_proportion" th:field="*{ship_defense_proportion}" value="1" size="8" />
	</div>
	<div class="small-number-selection">
		<label for="population"><img th:src="@{/images/info/pop.png}"/></label>
		<input type="number" id="population" th:field="*{population}" value="1000" size="8" />
	</div>
	</div>
	
	<h4>Unités</h4>
	<table cellspacing="0" cellpadding="0">
		<tr>
			<td th:each="unite : ${otherunites}" class="unit_container">
				<img class="unit-image" th:for="'unite-'+${unite.pname}" th:src="@{/images/units/{uname}.png(uname=${unite.pname})}"/>
				<input type="checkbox" th:id="'unite-'+${unite.pname}" th:field="*{unites[__${unite.pname}__]}"/>
			</td>
		</tr>
	</table>
	<table cellspacing="0" cellpadding="0">
		<thead>
			<tr>			
				<td th:each="dieu : ${dieux}">
					<img class="unit-image" th:src="@{/images/gods_temple/{dieu}_small.png(dieu=${dieu})}"/>
				</td>
			</tr>
		</thead>
		<tbody>
			<tr th:each="i: ${#numbers.sequence(0,1)}">
				<td th:each="dieu : ${dieux}" th:with="unite=${godunites.get(dieu).get(i)}" class="unit_container">
					<img class="unit-image" th:for="'unite-'+${unite.pname}" th:src="@{/images/units/{uname}.png(uname=${unite.pname})}"/>
					<input type="checkbox" th:id="'unite-'+${unite.pname}" th:field="*{unites[__${unite.pname}__]}"/>
				</td>
			</tr>
		</tbody>
	</table>
	
	<button type="button" id="computeButton">Calculer</button>
	</form>
	
	<h4>Résultats</h4>
	
	<script>
		function computeResults() {
			var xhr = new XMLHttpRequest();
			xhr.open("POST", "[[@{/optimizer}]]"); 
			xhr.onload = function(event){ 
				document.getElementById("results").innerHTML = event.target.response
			}; 
			// or onerror, onabort
			var formData = new FormData(document.getElementById("simuform")); 
			xhr.send(formData);
		}
		document.getElementById("computeButton").addEventListener('click',computeResults)
	</script>
	
	<div id="results">
	
	</div>
	
	
	
	
	
	
	
	
	
</body>