{# @author: Benjamin AMOUZOU <benkokouamouzou@gmail.com> #}
{% extends "rse/template-rse.html.twig" %}

{% block titre_enfant %}
	Performance
{% endblock %}

{% block contenu_principal_rse %}
	<div class="container-fluid">
		<div class="row">
			<div class="col-lg-12">
				<h5 class="mt-3">Performance écocollecteur</h5>
			</div>
		</div>
		<div class="row">
			<div class="col-lg-12 col-md-12 col-sm-12">
				<div class="edit-border">
					<form method="post">
						<div class="row">
							<div class="col-lg-3">
								<label class="col-form-label col-form-label-sm">Sponsor:</label><br/>
								<select class="custom-select custom-select-sm" id="partenaire" name="partenaire">
									<option value=""></option>
									{% for partenaire in partenaires %}
										<option value="{{partenaire.id}}">{{partenaire.denomination}}</option>
									{% endfor %}
								</select>
							</div>
							<div class="col-lg-3">
								<label class="col-form-label col-form-label-sm">Ecocollecteur:</label><br/>
								<select class="custom-select custom-select-sm" id="ecocollecteur" name="ecocollecteur">
									<option value=""></option>
									{% for ecocollecteur in ecocollecteurs %}
										<option class="{{ecocollecteur.partenaire.id}}" value="{{ecocollecteur.id}}">{{ecocollecteur.nom}}
											{{ecocollecteur.prenoms}}</option>
									{% endfor %}
								</select>
							</div>
							<div class="col-lg-3 intervalle" style="display:none">
								<label class="col-form-label col-form-label-sm">Début période:</label><br/>
								<input type="date" name="debut" class="form-control form-control-sm"/>
							</div>
							<div class="col-lg-3 intervalle" style="display:none">
								<label class="col-form-label col-form-label-sm">Fin période:</label><br/>
								<input type="date" name="fin" class="form-control form-control-sm"/>
							</div>
						</div>
						<div class="row">
							<div class="col-lg-6 d-flex flex-row">
								<div class="custom-control custom-radio mt-4">
									<input type="radio" id="defaut" name="option" class="custom-control-input" checked="checked" value="defaut"/>
									<label for="defaut" class="custom-control-label col-form-label col-form-label-sm mt-0">Par défaut</label>
								</div>
								<div class="custom-control custom-radio mt-4 ml-2">
									<input type="radio" id="intervalle" name="option" class="custom-control-input" value="intervalle"/>
									<label for="intervalle" class="custom-control-label col-form-label col-form-label-sm mt-0">Intervalle</label>
								</div>
								<div class="custom-control custom-radio mt-4 ml-2">
									<input type="radio" id="dernier_enlevement" name="option" class="custom-control-input" value="enlevement"/>
									<label for="dernier_enlevement" class="custom-control-label col-form-label col-form-label-sm mt-0">Dernier enlèvement</label>
								</div>
							</div>
						</div>
						<div class="row mt-1">
							<div class="col-lg-12 text-center">
								<button class="btn btn-new btn-sm mt-1">
									<i class="fa fa-eye fa-lg" color="white"></i>&nbsp;&nbsp;Visualiser</button>
							</div>
						</div>
					</form>
					{% if performance %}
						<div class="row d-flex mt-5">
							<div class="col-lg text-center">
								<label class="col-form-label col-form-label-sm alert alert-success">
									<span style="font-size: 1.2rem">{{ecocollecteur.nom}}
										{{ecocollecteur.prenoms}}</span><br/>
										<span style="font-size: 0.7 rem">{% if message is defined %}{{message}}{% endif %}</span>
								</label>
							</div>
						</div>
						<div class="row d-flex">
							<div
								class="col-lg edit-border mx-3 mt-3" style="border-radius: 3px; background-color:white">
								{# Calcul des valeurs totals #}
								{% set caTotal = 0 %}
								{% set poidsTotal = 0 %}
								{% set depenseTotal = 0 %}
								{% for performanceAGR in performancesAGR %}
									{% set caTotal = caTotal + performanceAGR.chiffreAffaireTotal %}
									{% set depenseTotal = depenseTotal + performanceAGR.coutAchatTotal %}
									{% set poidsTotal = poidsTotal + performanceAGR.poidsTotal %}
								{% endfor %}
								{% set tonnageTotal = poidsTotal / 1000 %}
								<label class="font-weight-bold col-form-label col-form-label-sm dashboard-title">
									Performances AGR
								</label><br/>

								{# Affichage des CA #}
								<div class="row d-flex">
									<div class="col-lg">
										<label class="col-form-label col-form-label-sm font-weight-bold" title="Cliquer pour dérouler" id="ca">
											<span class="btn-edit font-weight-bold">
												<i class="fa fa-plus-square-o fa-lg"></i>
											</span>
											Chiffre d'affaire total:
										</label>
									</div>
									<div class="col-lg text-right">
										<label class="col-form-label col-form-label-sm font-weight-bold">
											<span class="btn-edit font-weight-bold">{{caTotal|number_format(0, ',', '.')}}</span>
										</label>
									</div>
								</div>

								{% for performanceAGR in performancesAGR %}
									<div class="row d-flex ml-2">
										<div class="col-lg">
											<label class="col-form-label col-form-label-sm ca" style="display:none">{{ performanceAGR.typeDechet.denomination }}</label>
										</div>
										<div class="col-lg text-right">
											<label class="col-form-label col-form-label-sm ca" style="display:none">
												<span>{{ performanceAGR.chiffreAffaireTotal|number_format(0, ',', '.')}}</span>
											</label>
										</div>
									</div>
								{% endfor %}
								{# Fin affichage des CA #}

								{# Affichage des tonnages #}
								<div class="row d-flex mt-3">
									<div class="col-lg">
										<label class="col-form-label col-form-label-sm font-weight-bold" title="Cliquer pour dérouler" id="tonnage">
											<span class="btn-edit font-weight-bold">
												<i class="fa fa-plus-square-o fa-lg"></i>
											</span>
											Tonnage total:
										</label>
									</div>
									<div class="col-lg text-right">
										<label class="col-form-label col-form-label-sm font-weight-bold">
											<span class="btn-edit font-weight-bold">{{tonnageTotal|number_format(3, ',', '.')}}</span>
										</label>
									</div>
								</div>
								{% for performanceAGR in performancesAGR %}
									<div class="row d-flex ml-2">
										<div class="col-lg">
											<label class="col-form-label col-form-label-sm tonnage" style="display:none">{{ performanceAGR.typeDechet.denomination }}</label>
										</div>
										<div class="col-lg text-right">
											<label class="col-form-label col-form-label-sm tonnage" style="display:none">
												<span>{{ (performanceAGR.poidsTotal / 1000)|number_format(3, ',', '.')}}</span>
											</label>
										</div>
									</div>
								{% endfor %}
								{# Fin affichage des tonnages #}

								{# Affichage des dépenses #}
								<div class="row d-flex mt-3">
									<div class="col-lg">
										<label class="col-form-label col-form-label-sm font-weight-bold" title="Cliquer pour dérouler" id="depense">
											<span class="btn-edit font-weight-bold">
												<i class="fa fa-plus-square-o fa-lg"></i>
											</span>
											Dépense total:
										</label>
									</div>
									<div class="col-lg text-right">
										<label class="col-form-label col-form-label-sm font-weight-bold">
											<span class="btn-edit font-weight-bold">{{depenseTotal|number_format(0, ',', '.')}}</span>
										</label>
									</div>
								</div>
								{% for performanceAGR in performancesAGR %}
									<div class="row d-flex ml-2">
										<div class="col-lg">
											<label class="col-form-label col-form-label-sm  depense" style="display:none">{{ performanceAGR.typeDechet.denomination }}</label>
										</div>
										<div class="col-lg text-right">
											<label class="col-form-label col-form-label-sm  depense" style="display:none">
												<span>{{ performanceAGR.coutAchatTotal|number_format(0, ',', '.')}}</span>
											</label>
										</div>
									</div>
								{% endfor %}
								{# Fin affichage des dépenses #}
								
								<div class="row d-flex">
									<div class="col-lg">
										<label class="col-form-label col-form-label-sm" style="font-size: 0.6rem">NB: Chiffre d'affaire et dépense en FCFA, Tonnage en Tonne.
										</label>
									</div>
								</div>
							</div>
							{#Fin perfomance AGR#}

							{#Perfomance partenaire#}
							<div class="col-lg edit-border mx-3 mt-3" style="border-radius: 3px; background-color:white">
								<div class="row d-flex">
									<div class="col-lg">
										<label class="col-form-label col-form-label-sm dashboard-title font-weight-bold">Performances
											{{ ecocollecteur.partenaire.denomination }}</label>
									</div>
								</div>
								{% if ecocollecteur.partenaire.denomination == "Groupe Togocom"%}
									{% set togocomCaTotal = performanceTogocom.caMobileData + performanceTogocom.caCreditCommunication + performanceTogocom.caDepotMobileMoney + performanceTogocom.caRetraitMobileMoney %}
									<div class="row d-flex">
										<div class="col-lg">
											<label class="col-form-label col-form-label-sm font-weight-bold">Chiffre d'affaire total:
											</label>
										</div>
										<div class="col-lg text-right">
											<label class="col-form-label col-form-label-sm font-weight-bold btn-edit">
												<span>{{togocomCaTotal|number_format(0, ',', '.')}}</span>
											</label>
										</div>
									</div>
									<div class="row d-flex">
										<div class="col-lg">
											<label class="col-form-label col-form-label-sm">Chiffre d'affaire dépôt Mobile money:
											</label>
										</div>
										<div class="col-lg text-right">
											<label class="col-form-label col-form-label-sm">
												<span>{{performanceTogocom.caDepotMobileMoney|number_format(0, ',', '.')}}</span>
											</label>
										</div>
									</div>
									<div class="row d-flex">
										<div class="col-lg">
											<label class="col-form-label col-form-label-sm">Chiffre d'affaire retrait Mobile money:
											</label>
										</div>
										<div class="col-lg text-right">
											<label class="col-form-label col-form-label-sm">
												<span>{{performanceTogocom.caRetraitMobileMoney|number_format(0, ',', '.')}}</span>
											</label>
										</div>
									</div>
									<div class="row d-flex">
										<div class="col-lg">
											<label class="col-form-label col-form-label-sm">Chiffre d'affaire Mobile data:
											</label>
										</div>
										<div class="col-lg text-right">
											<label class="col-form-label col-form-label-sm">
												<span>{{performanceTogocom.caMobileData|number_format(0, ',', '.')}}</span>
											</label>
										</div>
									</div>
									<div class="row d-flex">
										<div class="col-lg">
											<label class="col-form-label col-form-label-sm">Chiffre d'affaire crédit de communication:
											</label>
										</div>
										<div class="col-lg text-right">
											<label class="col-form-label col-form-label-sm">
												<span>{{performanceTogocom.caCreditCommunication|number_format(0, ',', '.')}}</span>
											</label>
										</div>
									</div>
								{% endif %}
								<div class="row d-flex">
									<div class="col-lg">
										<label class="col-form-label col-form-label-sm" style="font-size: 0.6rem">NB: Chiffre d'affaire en FCFA</label>
									</div>
								</div>
							</div>
							{#fin perfomance partenaire#}
						</div>
					{% endif %}


					<div class="row mt-3">
						<div class="col-lg-12">
							<a class="btn btn-discard btn-sm" href="{{path('app_ecocollecteur_list')}}">
								<i class="fa fa-chevron-left fa-lg"></i>&nbsp;&nbsp;Retour</a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
{% endblock %}

{% block script %}
	<script>
		$(document).ready(function (){
			$('.ca').css('display', 'none');
			$('.tonnage').css('display', 'none');
			$('.depense').css('display', 'none');

			$('#ca').click(function(){
				let icone = $('#ca i').attr('class');
				if(icone == 'fa fa-plus-square-o fa-lg'){
					$('#ca i').attr('class', 'fa fa-minus-square-o fa-lg');
					$('.ca').css('display','');
				}else{
					$('#ca i').attr('class', 'fa fa-plus-square-o fa-lg');
					$('.ca').css('display','none');
				}
			});
			$('#tonnage').click(function(){
				let icone = $('#tonnage i').attr('class');
				if(icone == 'fa fa-plus-square-o fa-lg'){
					$('#tonnage i').attr('class', 'fa fa-minus-square-o fa-lg');
					$('.tonnage').css('display','');
				}else{
					$('#tonnage i').attr('class', 'fa fa-plus-square-o fa-lg');
					$('.tonnage').css('display','none');
				}
			});
			$('#depense').click(function(){
				let icone = $('#depense i').attr('class');
				if(icone == 'fa fa-plus-square-o fa-lg'){
					$('#depense i').attr('class', 'fa fa-minus-square-o fa-lg');
					$('.depense').css('display','');
				}else{
					$('#depense i').attr('class', 'fa fa-plus-square-o fa-lg');
					$('.depense').css('display','none');
				}
			});

			$('#partenaire').change(function(){
				let id = $('#partenaire option:selected').val();
				$('#ecocollecteur option').hide();
				$('.'+id).show();
			});

			//Affichage des champs de saisies des dates
			$(':radio[name="option"]').change(function(){
				if($('input[name="option"]:checked').val() == 'intervalle'){
					$('.intervalle').show();
				}else{
					$('.intervalle').hide();
				}
			});
			//Fin affichage des champs de saisies des dates
		})
	</script>
{% endblock %}