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

{% block titre_enfant %}
	Reporting
{% endblock %}

{% block contenu_principal_rse %}
	<div class="container-fluid">
		<div class="row">
			<div class="col-lg-12">
				<h5 class="mt-3">Reporting écocollecteur</h5>
			</div>
		</div>
		<div class="row">
			<div class="col-lg-12 col-md-12 col-sm-12">
				<div class="edit-border">

					<fieldset class="edit-border" style="border-radius: 3px;">
						<legend class="col-form-label col-form-label-sm">Eléments de la recherche</legend>
						<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<span class="text-danger">
											*</span>
									</label><br/>
									<select class="custom-select custom-select-sm" id="ecocollecteur" name="ecocollecteur" required>
										<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">
									<label class="col-form-label col-form-label-sm">Début reporting<span class="text-danger">
											*</span>
									</label><br/>
									<input type="date" name="dateDebut" class="form-control form-control-sm" required/>
								</div>
								<div class="col-lg-3">
									<label class="col-form-label col-form-label-sm">Fin reporting<span class="text-danger">
											*</span>
									</label><br/>
									<input type="date" name="dateFin" class="form-control form-control-sm" required/>
								</div>
							</div>
							<div class="row">
								<div class="col-lg-12">
									<label class="col-form-label col-form-label-sm"></label><br/>
									<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>
					</fieldset>

					{% if reporting %}
						<div class="row d-flex mt-3">
							<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: 1.1rem">Du
										{{debut|date('d/m/Y')}}
										au
										{{fin|date('d/m/Y')}}</span>
								</label>
							</div>
						</div>

						<div class="row mt-3">
							<div class="col-lg-12">

								<ul class="nav nav-tabs" id="tab" role="tablist">
									<li class="nav-item" role="presentation">
										<a class="nav-link active" href="#reportingAGR" data-toggle="tab" role="tab" aria-controls="reportingAGR" aria-selected="true">Reporting AGR</a>
									</li>
									<li class="nav-item" role="presentation">
										<a class="nav-link" href="#reportingPartenaire" data-toggle="tab" role="tab" aria-controls="reportingPartenaire" aria-selected="true">Reporting
											{{ ecocollecteur.partenaire.denomination }}</a>
									</li>
								</ul>

								<div
									class="tab-content edit-border" id="tabContent" style="border-radius: 3px; background-color: white">
									{# Début tabs reporting AGR #}
									<div class="tab-pane fade show active" id="reportingAGR" role="tabpanel" aria-labelledby="reportingAGR-tab">

										<div class="col-lg-12">
											<h6>Nombre de reportings &nbsp;&nbsp;<span class="badge btn-new" style="border-radius: 15px">{{reportingsAGRTotal}}</span>
											</h6>
										</div>

										<div class="col-lg-12 mt-3">
											{% if (reportingsAGR|length) > 0 %}
												{% set nbre = 0 %}
												{% for reporting in reportingsAGR %}
													{# Affichage des reportings #}
													<div class="col-lg-12" style="border: 1px solid #D5D5D5; margin-bottom: 5px">

														<div class="col-lg-12 d-flex mt-0" >
															<div class="col-lg">
																<label class="col-form-label col-form-label-sm font-weight-bold icone" title="Cliquer pour dérouler" id="{{ reporting.id }}">
																	<span class="btn-edit font-weight-bold">
																		<i class="fa fa-plus-square-o fa-lg"></i>
																	</span>
																	Date reporting
																</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">{{reporting.dateReporting|date('d/m/Y')}}</span>
																</label>
															</div>
														</div>

														<div class="col-lg-12">
															<div class="col-lg table-responsive">
																<table class="table {{reporting.id}}  mt-3" style="display: none;">
																	<thead>
																		<tr style="background-color:#FFFFFF !important; color: #000000; font-weight: bold;">
																			<td style="width: 25%">Matière</td>
																			<td style="width: 25%">Poids</td>
																			<td style="width: 25%">Montant</td>
																			<td style="width: 25%">Mode de payement</td>
																		</tr>
																	</thead>
																	<tbody>
																		{% for dechet in reporting.dechets %}
																			<tr>
																				<td>{{ dechet.typeDechet.denomination }}</td>
																				<td>{{ dechet.poids|number_format(3, ',', '.') }} Kg</td>
																				<td>{{ dechet.montant|number_format(0, ',', '.') }} FCFA</td>
																				<td>{{ dechet.moyenPayement.denomination }}</td>
																			</tr>
																		{% endfor %}
																	</tbody>
																</table>
															</div>
														</div>
														
													</div>
													{# Fin affichage des reportings #}

												{% endfor %}
											{% else %}
												<div class="row text-center">
													<div class="col-lg-12 mt-3">Aucun reporting trouvé pour cette période !</div>
												</div>
											{% endif %}
										</div>
									</div>
									{# Fin tabs reportings AGR #}

									{# Début tabs reporting Partenaires #}
									{% if ecocollecteur.partenaire.denomination == "Groupe Togocom" %}
										<div class="tab-pane fade" id="reportingPartenaire" role="tabpanel" aria-labelledby="reportingPartenaire-tab" style="background-color: white">
											<div class="col-lg-12">
												<h6>Nombre de reportings &nbsp;&nbsp;<span class="badge btn-new" style="border-radius: 15px">{{reportingsTogocomTotal}}</span>
												</h6>
											</div>
											<div class="col-lg-12 mt-3">
												{% if (reportingsTogocom|length) > 0 %}
													{% for reporting in reportingsTogocom %}
														{# Affichage des reportings #}
														<div style="border: 1px solid #D5D5D5; margin-bottom: 5px;" class="">
															<div class="col-lg-12 d-flex mt-0">
																<div class="col-lg">
																	<label class="col-form-label col-form-label-sm font-weight-bold icone" title="Cliquer pour dérouler" id="{{ reporting.id }}">
																		<span class="btn-edit font-weight-bold">
																			<i class="fa fa-plus-square-o fa-lg"></i>
																		</span>
																		Date reporting
																	</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">{{reporting.dateReporting|date('d/m/Y')}}</span>
																	</label>
																</div>
															</div>
															<div class="col-lg-12 d-flex">
																<div class="col-lg table-responsive">
																	<table class="table {{reporting.id}}  mt-3" style="display: none;">
																		<thead>
																			<tr style="background-color:#FFFFFF !important; color: #000000; font-weight: bold;">
																				<td>Dépôt Mobile money</td>
																				<td>Retrait Mobile Money</td>
																				<td>Crédit de communication</td>
																				<td>Mobile data</td>
																			</tr>
																		</thead>
																		{% set depot = 0 %}
																		{% set retrait = 0 %}
																		{% for mobileMoney in reporting.mobileMoneys %}
																			{% if mobileMoney.typeMobileMoney.denomination == 'Dépôt' %}
																				{% set depot = mobileMoney.montant %}
																			{% else %}
																				{% set retrait = mobileMoney.montant %}
																			{% endif %}
																		{% endfor %}
																		<tbody>
																			{# {% for dechet in reporting.dechets %} #}
																			<tr>
																				<td>{{ depot|number_format(0, ',', '.') }} FCFA</td>
																				<td>{{ retrait|number_format(0, ',', '.') }} FCFA</td>
																				<td>{{ reporting.creditCommunication.montant|number_format(0, ',', '.') }} FCFA</td>
																				<td>{{ reporting.mobileData.montant|number_format(0, ',', '.') }} FCFA</td>
																			</tr>
																			{# {% endfor %} #}
																		</tbody>
																	</table>
																</div>
															</div>
														</div>
														{# Fin affichage des reportings #}
													{% endfor %}
												{% else %}
													<div class="row text-center">
														<div class="col-lg-12 mt-3">Aucun reporting trouvé pour cette période !</div>
													</div>
												{% endif %}
											</div>
										{% endif %}
										{# Fin tabs reportingPartenaires #}

									</div>
								</div>
							</div>
						</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(){
			$('.icone').click(function(){
				let id = $(this).attr('id');
				let i = $('#' + id +' i').attr('class');
				if(i == 'fa fa-plus-square-o fa-lg'){
					$('#' + id +' i').attr('class', 'fa fa-minus-square-o fa-lg');
					$('#' + id +' i').attr('title', 'Cliquez pour enrouler');
					$('.' + id).css('display','');
				}else{
					$('#' + id +' i').attr('class', 'fa fa-plus-square-o fa-lg');
					$('#' + id +' i').attr('title', 'Cliquez pour dérouler');
					$('.' + id).css('display','none');
				}
			});
			$('#partenaire').change(function(){
				let id = $('#partenaire option:selected').val();
				$('#ecocollecteur option').hide();
				$('.'+id).show();
			});
		});
	</script>
{% endblock %}