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

{% block title %}Elections 2018 - Encodage!{% endblock %}

{% block body %}
<style>
    .example-wrapper { margin: 1em auto; max-width: 800px; width: 95%; font: 18px/1.5 sans-serif; }
    .example-wrapper code { background: #F5F5F5; padding: 2px 6px; }
    td{
    	min-width: 150px;
    }
    h3{
    	display: inline-block;
    }
    .busy{
    	border:2px solid red;
    }
    .pushed{
    	border:2px solid green;
    }
</style>

<div class="example-wrapper">
    Distict:
    <select id="cantonPicker">
    	<option value="-1"> --- </option>
    	{% for c in districts %}
    		<option value="{{c.id}}"> {{c}}</option>
    	{% endfor %}
    </select>
&nbsp;&nbsp;-&nbsp;&nbsp;
    Communes:
    <select id="communePicker">
    	<option value="-1"> --- </option>
    	{% for c in communes %}
    		<option value="{{c.id}}"> {{c}}</option>
    	{% endfor %}
    </select>
&nbsp;&nbsp;-&nbsp;&nbsp;
    Provinces:
    <select id="provincePicker">
    	<option value="-1"> --- </option>
    	{% for p in provinces %}
    		<option value="{{p.id}}"> {{p}}</option>
    	{% endfor %}
    </select>
</div>

{% for c in districts %}
<div class="row canton {{c.id}}" style="margin-bottom:25px;">
	<div class="col-md-12">
		<div class="row">
			<div class="col-md-12">
				<h3>{{c}}</h3> ({{c.nbInscrits}} inscrits) <a class="button btn btn-primary" target="_blank" href="{{path("serialCanton", {"id":c.id})}}">JSON</a>
			</div>
		</div>
		<div class="row">
			<div class="col-md-12">
				<input class="form-control updatable" data-obj="canton" data-id="{{c.id}}" data-type="burdep" data-id="{{c.id}}" style="width:100px; display: inline-block" type="number" value="{{c.nbBureauxDepouilles}}"> /{{c.nbBureaux}} bureaux dépouillés
			</div>
		</div>
		<div class="row">
			<div class="col-md-12">
				<input class="form-control updatable" data-obj="canton" data-id="{{c.id}}" data-type="votes" style="width:100px; display: inline-block" type="number" value="{{c.nbVote}}"> votes valables
			</div>
		</div>
		<div class="row">
			<div class="col-md-12">
				<input class="form-control updatable" data-obj="canton" data-id="{{c.id}}" data-type="blancs" style="width:100px; display: inline-block" type="number" value="{{c.nbBlancs}}"> votes blancs
			</div>
		</div>
		<table>
			<thead>
				<th>Liste</th>
				<th>Voix</th>
				<th>%</th>
				<th>siege</th>
			</thead>
			<tbody>
				{% for l in c.listes %}
					<tr>
						<td>
							{{l.numero}} {{l.label}}
						</td>
						<td>
							<input class="form-control updatable" data-obj="liste" data-id="{{l.id}}" data-type="voix" style="width:100px; display: inline-block" type="number" value="{{l.voix2018}}">
						</td>
						<td>
							<input class="form-control updatable" data-obj="liste" data-id="{{l.id}}" data-type="prct" style="width:100px; display: inline-block" type="decimal" value="{{l.prct2018}}">
						</td>
						<td>
							<input class="form-control updatable" data-obj="liste" data-id="{{l.id}}" data-type="siege" style="width:100px; display: inline-block" type="number" value="{{l.nbSiege}}">
						</td>
					</tr>
				{% endfor %}
			</tbody>	
		</table>
	</div>
</div>

{% endfor %}
{% for c in communes %}
<div class="row commune {{c.id}}" style="margin-bottom:25px;">
	<div class="col-md-12">
		<div class="row">
			<div class="col-md-12">
				<h3>{{c}}</h3> ({{c.nbInscrits}} inscrits) <a class="button btn btn-primary" target="_blank" href="{{path("serialCommune", {"id":c.id})}}">JSON</a>
			</div>
		</div>
		<div class="row">
			<div class="col-md-12">
				<input class="form-control updatable" data-obj="commune" data-id="{{c.id}}" data-type="burdep" data-id="{{c.id}}" style="width:100px; display: inline-block" type="number" value="{{c.nbBureauxDepouilles}}"> /{{c.nbBureaux}} bureaux dépouillés
			</div>
		</div>
		<div class="row">
			<div class="col-md-12">
				<input class="form-control updatable" data-obj="commune" data-id="{{c.id}}" data-type="votes" style="width:100px; display: inline-block" type="number" value="{{c.nbVote}}"> votes valables
			</div>
		</div>
		<div class="row">
			<div class="col-md-12">
				<input class="form-control updatable" data-obj="commune" data-id="{{c.id}}" data-type="blancs" style="width:100px; display: inline-block" type="number" value="{{c.nbBlancs}}"> votes blancs
			</div>
		</div>
		<table>
			<thead>
				<th>Liste</th>
				<th>Voix</th>
				<th>%</th>
				<th>siege</th>
			</thead>
			<tbody>
				{% for l in c.listes %}
					<tr>
						<td>
							{{l.numero}} {{l.label}}
						</td>
						<td>
							<input class="form-control updatable" data-obj="liste" data-id="{{l.id}}" data-type="voix" style="width:100px; display: inline-block" type="number" value="{{l.voix2018}}">
						</td>
						<td>
							<input class="form-control updatable" data-obj="liste" data-id="{{l.id}}" data-type="prct" style="width:100px; display: inline-block" type="number" value="{{l.prct2018}}">
						</td>
						<td>
							<input class="form-control updatable" data-obj="liste" data-id="{{l.id}}" data-type="siege" style="width:100px; display: inline-block" type="number" value="{{l.nbSiege}}">
						</td>
					</tr>
				{% endfor %}
			</tbody>	
		</table>
	</div>
</div>

{% endfor %}
{% for p in provinces %}
<div class="row province {{p.id}}" style="margin-bottom:25px;">
	<div class="col-md-12">

		<div class="row">
			<div class="col-md-12">
				<h3>{{p}}</h3>
			</div>
		</div>
		<table>
			<thead>
				<th>Liste</th>
				<th>Voix</th>
				<th>%</th>
			</thead>
			<tbody>
				{% for l in p.listes %}
					<tr>
						<td>
							{{l.numero}} {{l.label}}
						</td>
						<td>
							<input class="form-control updatable" data-obj="liste" data-id="{{l.id}}" data-type="voix" style="width:100px; display: inline-block" type="number" value="{{l.voix2018}}">
						</td>
						<td>
							<input class="form-control updatable" data-obj="liste" data-id="{{l.id}}" data-type="prct" style="width:100px; display: inline-block" type="number" value="{{l.prct2018}}">
						</td>
					</tr>
				{% endfor %}
			</tbody>	
		</table>
	</div>
</div>

{% endfor %}

{% endblock %}
{% block javascripts %}
<script type="text/javascript">
	$("#cantonPicker").change(function(e){
		var optionSelected = $("option:selected", this);
   		var valueSelected = this.value;
   		console.log(".canton."+valueSelected);
   		$(".row.commune").hide();
   		$(".row.province").hide();
   		$(".row.canton").not("."+valueSelected).hide();
   		$(".row.canton."+valueSelected).show();
	});
	$("#provincePicker").change(function(e){
		var optionSelected = $("option:selected", this);
   		var valueSelected = this.value;
   		console.log(".province."+valueSelected);
   		$(".row.commune").hide();
   		$(".row.canton").hide();
   		$(".row.province").not("."+valueSelected).hide();
   		$(".row.province."+valueSelected).show();
	});
	$("#communePicker").change(function(e){
		var optionSelected = $("option:selected", this);
   		var valueSelected = this.value;
   		console.log(".canton."+valueSelected);
   		$(".row.canton").hide();
   		$(".row.province").hide();
   		$(".row.commune").not("."+valueSelected).hide();
   		$(".row.commune."+valueSelected).show();
	});
	$(".updatable").change(function(e){
		var _this = $(this);
		_this.addClass("busy");
		var ob = _this.attr("data-obj");
		var obj = _this.attr("data-id");
		var field = _this.attr("data-type");
		var value = _this.val();
		var data = {
			obj: obj,
			field: field,
			value: value
		}
		var url;
		if(ob == "canton"){
			url = '{{path("updatecanton")}}'
		}
		else if(ob == "commune"){
			url = '{{path("updateCommune")}}'
		}
		else if(ob == "liste"){
			url = '{{path("updateliste")}}'
		}
		$.post( url, data)
			.done(function( data ) {
				_this.removeClass("busy").addClass("pushed");
				setTimeout(function(){
					_this.removeClass("pushed");
				}, 3000);
			});

	});
</script>

{% endblock %}