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

{% block titre_enfant %}
	Prix et tarifs
{% endblock %}

{% block style %}
	<style>
		.table th,
		.table td {
			border-top: none;
		}
	</style>
{% endblock %}

{% block contenu_principal_commercial %}
	<div class="container-fluid">

		<div class="row">
			<div class="col-lg-12">
				<h5 class="my-3">Prix et tarifs</h5>
			</div>
		</div>
		<div class="row">
			<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="#service" data-toggle="tab" role="tab" aria-controls="service" aria-selected="true">
							<span class="col-form-label col-form-label-sm">Services</span>
						</a>
					</li>
					<li class="nav-item" role="presentation">
						<a class="nav-link" href="#materiel" data-toggle="tab" role="tab" aria-controls="materiel" aria-selected="true">
							<span class="col-form-label col-form-label-sm">Materiels</span>
						</a>
					</li>
					<li class="nav-item" role="presentation">
						<a class="nav-link" href="#formel" data-toggle="tab" role="tab" aria-controls="formel" aria-selected="true">
							<span class="col-form-label col-form-label-sm">Rachat de matières formels</span>
						</a>
					</li>
					<li class="nav-item" role="presentation">
						<a class="nav-link" href="#informel" data-toggle="tab" role="tab" aria-controls="informel" aria-selected="true">
							<span class="col-form-label col-form-label-sm">Rachat de matières informels</span>
						</a>
					</li>
				</ul>

				<div
					class="tab-content edit-border" id="tabContent">
					{# Début tabs service #}
					<div class="tab-pane fade show active" id="service" role="tabpanel" aria-labelledby="entree-tab">

						<div class="col-lg-12">
							<div style="display: flex; flex-direction: row; justify-content:space-between; align-items: center">
								<h6>Tarifs services&nbsp;&nbsp;<span class="badge btn-new" style="border-radius: 15px"></span></h6>
							</div>
						</div>

						<div class="col-lg-12 mt-3"></div>
					</div>
					{# Fin tabs service #}

					{# Début tabs materiel #}
					<div class="tab-pane fade" id="materiel" role="tabpanel" aria-labelledby="sortie-tab">

						<div class="col-lg-12">
							<div style="display: flex; flex-direction: row; justify-content:space-between; align-items: center">
								<h6>Prix materiels&nbsp;&nbsp;<span class="badge btn-new" style="border-radius: 15px"></span></h6>
							</div>
						</div>
						<div class="col-lg-12 mt-2">
							{% if materiels is not empty %}
								<div class="row">
									{% for materiel in materiels %}
										<div class="col-lg-12">
											<div class="edit-border my-2 py-1" style="border-radius: 3px; background-color: #FFFFFF" id="materiel-container-{{materiel.id}}">
												<div class="row d-flex mt-0">
													<div class="col-lg">
														<span id="materiel-{{materiel.id}}" class="materiel btn-edit">
															<i class="fa fa-plus-square-o fa-lg" title="cliquez pour dérouler"></i>
														</span>
														<span class="font-weight-bold ml-2 col-form-label-sm">{{materiel.denomination}}</span>
													</div>
													<div class="col-lg text-right">
														<a href="{{path('app_materiel_edit', {'id': materiel.id})}}"><i class="fa fa-edit fa-lg text-success" title="Editer"></i></a>
													</div>
												</div>

												<div class="row d-flex mt-0">
													<div class="col-lg">
														{% if materiel.tarifs is not empty %}
															<table class="table table-bordered table-hover mt-2" id="materiel-tarif-{{materiel.id}}" style="display:none;">
																<thead>
																	<tr>
																		<td>Nombre de matériel</td>
																		<td>Prix de base</td>
																		<td>Prix après réduction</td>
																	</tr>
																</thead>
																<tbody style="background-color: #f5f9e9 !important;">
																	{% for tarif in materiel.tarifs %}
																		<tr>
																			<td><span>{{tarif.nbreMateriel}}</span></td>
																			<td><span>{{tarif.montant|number_format(0, ',', '.')}}</span> FCFA</td>
																			<td>
																				{% if tarif.reductions is not empty %}
																					{% for reduction in tarif.reductions %}
																						{% set prixReduction = (tarif.montant - (tarif.montant * reduction.pourcentage) / 100) %}
																						<span><span>{{prixReduction|round(0, 'ceil')|number_format(0, ',', '.')}}</span> FCFA</span>&nbsp;&nbsp;<span>({{reduction.pourcentage}}%)</span><br/>
																					{% endfor %}
																				{% else %}
																					{{'Néant'}}
																				{% endif %}
																			</td>
																		</tr>
																	{% endfor %}
																</tbody>
															</table>
														{% else %}
															<span class="col-form-label col-form-label-sm">Aucun tarif renseigné !</span>
														{% endif %}
													</div>
												</div>
											</div>
										</div>
									{% endfor %}
								</div>
							{% else %}
								<div class="row">
									<div class="col-lg-12 d-flex justify-content-center">
										<label class="col-form-label col-form-label-sm">Aucun tarif matériel renseigné !</label>
									</div>
								</div>
							{% endif %}
						</div>
					</div>
					{# Fin tabs materiel #}

					{# Début tabs formel #}
					<div class="tab-pane fade" id="formel" role="tabpanel" aria-labelledby="sortie-tab">

						<div class="col-lg-12">
							<div style="display: flex; flex-direction: row; justify-content:space-between; align-items: center">
								<h6>Prix fournisseurs formels&nbsp;&nbsp;<span class="badge btn-new" style="border-radius: 15px"></span>
								</h6>
							</div>
						</div>
						<div class="col-lg-12 mt-3">
							{% if matiereFormels is not empty %}
								<div class="row">
									<div class="col-lg-12 table-responsive">
										<table class="table table-bordered table-hover">
											<thead>
												<tr>
													<td>Matière première</td>
													<td>Prix par tonne</td>
													<td>Prix par kg</td>
													<td>Edition</td>
												</tr>
											</thead>
											<tbody>
												{% for matiere in matiereFormels %}
													<tr>
														<td>
															{{matiere.denomination}}
														</td>
														<td>
															{% set montant = matiere.prixKiloFormel * 1000 %}
															{{ montant|number_format(0, ',', '.') }}
															FCFA
														</td>
														<td>
															{{ matiere.prixKiloFormel|number_format(0, ',', '.') }}
															FCFA
														</td>
														<td>
															<a href="{{path('app_matiere_premiere_edit', {'id': matiere.id})}}" class="btn-edit" title="Modifier">
																<i class="fa fa-edit fa-lg"></i>&nbsp;&nbsp;
															</a>
														</td>
													</tr>
												{% endfor %}
											</tbody>
										</table>
									</div>
								</div>
								<div class="row justify-content-center">
									<div class="col-lg-2 mt-3">{{ knp_pagination_render(matiereFormels, 'template-paginator.html.twig') }}</div>
								</div>
							{% else %}
								<div class="row">
									<div class="col-lg-12 d-flex justify-content-center">
										<label class="col-form-label col-form-label-sm">Aucun tarif formel renseigné !</label>
									</div>
								</div>
							{% endif %}
						</div>
					</div>
					{# Fin tabs formel #}

					{# Début tabs informel #}
					<div class="tab-pane fade" id="informel" role="tabpanel" aria-labelledby="sortie-tab">

						<div class="col-lg-12">
							<div style="display: flex; flex-direction: row; justify-content:space-between; align-items: center">
								<h6>Prix fournisseurs informels&nbsp;&nbsp;<span class="badge btn-new" style="border-radius: 15px"></span></h6>
							</div>
						</div>
						<div class="col-lg-12 mt-3">
							{% if matiereInformels is not empty %}
								<div class="row">
									<div class="col-lg-12 table-responsive">
										<table class="table table-bordered table-hover">
											<thead>
												<tr>
													<td>Matière première</td>
													<td>Prix maximale par tonne</td>
													<td>Prix maximale par kg</td>
													<td>Edition</td>
												</tr>
											</thead>
											<tbody>
												{% for matiere in matiereInformels %}
													<tr>
														<td>
															{{matiere.denomination}}
														</td>
														<td>
															{% set montant = matiere.prixKiloInformel * 1000 %}
															{{ montant|number_format(0, ',', '.') }}
															FCFA
														</td>
														<td>
															{{ matiere.prixKiloInformel|number_format(0, ',', '.') }}
															FCFA
														</td>
														<td>
															<a href="{{path('app_matiere_premiere_edit', {'id': matiere.id})}}" class="btn-edit" title="Modifier">
																<i class="fa fa-edit fa-lg"></i>&nbsp;&nbsp;
															</a>
														</td>
													</tr>
												{% endfor %}
											</tbody>
										</table>
									</div>
								</div>
								<div class="row justify-content-center">
									<div class="col-lg-2 mt-3">{{ knp_pagination_render(matiereFormels, 'template-paginator.html.twig') }}</div>
								</div>
							{% else %}
								<div class="row">
									<div class="col-lg-12 d-flex justify-content-center">
										<label class="col-form-label col-form-label-sm">Aucun tarif informel renseigné !</label>
									</div>
								</div>
							{% endif %}
						</div>
					</div>
					{# Fin tabs informel #}

				</div>
			</div>
		</div>

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

	</div>
{% endblock %}

{% block script %}
	<script>
		$(document).ready(function(){
			$('.materiel').click(function(){
				let id = $(this).attr('id').split('-')[1];
				let i = $('#materiel-' + id +' i').attr('class');
				if(i == 'fa fa-plus-square-o fa-lg'){
					$('#materiel-' + id +' i').attr('class', 'fa fa-minus-square-o fa-lg');
					$('#materiel-' + id +' i').attr('title', 'Cliquez pour enrouler');
					$('#materiel-tarif-' + id).css('display','');
					$('#materiel-container-' + id).css('background-color', '#f5f9e9');
					$('#materiel-container-' + id).removeClass('edit-border');
				}else{
					$('#materiel-' + id +' i').attr('class', 'fa fa-plus-square-o fa-lg');
					$('#materiel-' + id +' i').attr('title', 'Cliquez pour dérouler');
					$('#materiel-tarif-' + id).css('display','none');
					$('#materiel-container-' + id).css('background-color', '#ffffff');
					$('#materiel-container-' + id).addClass('edit-border');
				}
			});
		});
	</script>
{% endblock %}