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

{% block titre_enfant %}
	Matériels
{% endblock %}

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

		{% include('template-message.html.twig') %}
		<div class="row">
			<div class="col-12">
				<h5 class="mt-3">Matériel</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 mt-4">
								{{form_label(form.denomination,"Dénomination", {'label_attr': {'class': 'col-form-label col-form-label-sm'}})}}<span class="text-danger"> *</span><br/>
								{{form_widget(form.denomination, {'attr': {'class': 'form-control form-control-sm mb-3'}})}}
								{{form_label(form.prixRevient,"Prix de revient (FCFA)", {'label_attr': {'class': 'col-form-label col-form-label-sm'}})}}<br/>
								{{form_widget(form.prixRevient, {'attr': {'class': 'form-control form-control-sm mb-3'}})}}
								{{form_label(form.quantiteStock,"Quantité en stock", {'label_attr': {'class': 'col-form-label col-form-label-sm'}})}}
								{{form_widget(form.quantiteStock, {'attr': {'class': 'form-control form-control-sm mb-3'}})}}
							</div>

							<div class="col-lg-9" id="prototype-parent-tarif-materiel">

								<div class="row">
									<div class="col-lg-12 text-right mb-1">
										<a class="btn btn-new btn-sm" title="Ajouter un tarif" id="ajouter-tarif-materiel">
											<i class="fa fa-plus-square-o fa-lg" color="white"></i>&nbsp;&nbsp;Ajouter
										</a>
									</div>
								</div>

								{# tarif-materiel #}
								<input type="hidden" id="nombre-tarif-materiel" value="{{form.tarifs|length}}"/>

								{% for tarif in form.tarifs %}
									{% set numeroTarif = loop.index - 1 %}
									<fieldset class="edit-border mt-2" id="prototype-child-tarif-materiel-{{ numeroTarif }}">

										<legend class="font-weight-bold col-form-label col-form-label-sm">Tarif n° {{loop.index}}</legend>

										<div class="row">

											<div class="col-lg-3">
												{{form_label(tarif.nbreMateriel, "Nombre de matériel", {'label_attr': {'class': 'col-form-label col-form-label-sm'}})}}<span class="text-danger">
													*</span><br/>
												{{form_widget(tarif.nbreMateriel, {'attr': {'class': 'form-control form-control-sm mb-2'}})}}
												
											</div>

											<div class="col-lg-3">
												{{form_label(tarif.montant, "Prix de vente (FCFA)", {'label_attr': {'class': 'col-form-label col-form-label-sm'}})}}<span class="text-danger">
													*</span><br/>
												{{form_widget(tarif.montant, {'attr': {'class': 'form-control form-control-sm mb-2'}})}}
											</div>

											<div class="col-lg-3">
												<div class="custom-control custom-checkbox">
													<input type="checkbox" class="custom-control-input" id="tarifs_{{numeroTarif}}-reduction-checkbox" {# if reductionSelectionnes[tarif.id] %} checked {% endif #}/>
													<label for="tarifs_{{numeroTarif}}-reduction-checkbox" class="custom-control-label col-form-label col-form-label-sm mt-4">Possibilité de réduction ?</label><br/>
												</div>
											</div>

											<input type="hidden" id="nombre-reduction-tarifs_{{numeroTarif}}" value="{{tarif.reductions|length}}"/>

											<div class="col-lg-3" id="tarifs_{{numeroTarif}}-reductions" style="display:none">
												{% for reduction in reductions %}
													{% set numeroReduction = loop.index %}
													<div class="custom-control custom-checkbox">
														<input type="checkbox" class="custom-control-input tarif-materiel-checkbox" id="tarifs_{{numeroTarif}}_{{numeroReduction}}" value={{reduction.id}} name=""/>
														<label for="tarifs_{{numeroTarif}}_{{numeroReduction}}" class="custom-control-label col-form-label col-form-label-sm">{{reduction.pourcentage}} %</label><br/>
													</div>
												{% endfor %}
											</div>

										</div>

										<div class="row">
											<div class="col-lg-12">
												<a class="btn btn-delete p-0 supprimer-tarif-materiel" id="supprimer_tarifs_{{numeroTarif}}">
													<i class="fa fa-trash-o fa-lg" title="Supprimer ce tarif"></i>
												</a>
											</div>
										</div>
									</fieldset>
								{% endfor %}
								{# Fin service fournisseur #}

							</div>
						</div>

						{{form_row(form._token)}}

						<div class="row mt-2">
							<div class="col-lg-12">
								<a class="btn btn-discard btn-sm" href="{{path('app_materiel_list')}}">
									<i class="fa fa-chevron-left fa-lg"></i>&nbsp;&nbsp;Annuler</a>
								<button class="btn btn-new btn-sm">
									<i class="fa fa-floppy-o fa-lg" color="white"></i>&nbsp;&nbsp;Enrégistrer</button>
							</div>
						</div>

					</form>
				</div>
			</div>
		</div>
	</div>
{% endblock %}

{% block script %}
	<script>
		function suppressionTarifMateriel(){
			let nombre = parseInt($('#nombre-tarif-materiel').val()); 
			let precedent = nombre - 1; 
			if (precedent > 0) {
				$('#prototype-child-tarif-materiel-' + precedent).remove(); 
				$('#nombre-tarif-materiel').val(precedent);
			}
		}

		function tarifMaterielCheckbox(trigger){
			let id = trigger.attr('id');
			let numeroTarif = id.split('_')[1];
			let nombre = parseInt($('#nombre-reduction-tarifs_' + numeroTarif).val());
			let suivant = nombre + 1;
			let precedant = nombre - 1;
			if (trigger.is(':checked')) {
				$('#' + id).attr('name','materiel[tarifs][' + numeroTarif + '][reductions]['+ nombre +']');
				$('#nombre-reduction-tarifs_' + numeroTarif).val(suivant);
			}else{
				$('#' + id).attr('name', '');
				if(precedant > 0){
					$('#nombre-reduction-tarifs_' + numeroTarif).val(precedant);
				}else{
					$('#nombre-reduction-tarifs_' + numeroTarif).val(0);
				}
				//Mise à jour des names des checkbox
				$('#tarifs_' + numeroTarif + '-reductions .tarif-materiel-checkbox').each(function(){
					if($(this).is(':checked')){
						let id = parseInt(this.attributes.id.value.split('_')[2]);
						let position= parseInt(this.attributes.name.value.split('][')[3]);
						let n = parseInt($('#nombre-reduction-tarifs_' + numeroTarif).val());
						if(position >= n){
							for(i = 0; i < n; i++){
								if($(':checkbox[name="materiel[tarifs][' + numeroTarif + '][reductions][' + i +']"]').length == 0) {
									$('#tarifs_' + numeroTarif + '_' + id).attr('name','materiel[tarifs][' + numeroTarif + '][reductions][' + i +']');
								}
							}
						}
					}
				});
			}
		}

		$(document).ready(function () {
			//Au chargement de la page
			$('.supprimer-tarif-materiel').click(function(){
				suppressionTarifMateriel();
			});
			$('#tarifs_0-reduction-checkbox').change(function(){
				if($('#tarifs_0-reduction-checkbox:checked').length > 0){
					$('#tarifs_0-reductions').css('display', '');
				}else{
					$('#tarifs_0-reductions').css('display', 'none');
				}
			});
			$('.tarif-materiel-checkbox').change(function (){
				tarifMaterielCheckbox($(this));
			});

			$('#ajouter-tarif-materiel').click(function(){
				let nombre = parseInt($('#nombre-tarif-materiel').val());
				let formulaire = $('#prototype-child-tarif-materiel-0').html();
				let suivant = nombre + 1;
				let titre = "Tarif n° " + suivant;
				formulaire = formulaire.replace(/tarifs_0/g, "tarifs_" + nombre.toString());
				formulaire = formulaire.replace(/\[tarifs\]\[0\]/g, "[tarifs][" + nombre.toString()+']');
				formulaire = formulaire.replace("Tarif n° 1", titre);
				$('#prototype-parent-tarif-materiel').append('<fieldset class="edit-border mt-2" id="prototype-child-tarif-materiel-' + nombre.toString() + '" >' + formulaire + '</fieldset>');
				$('#tarifs_' + nombre +'-reduction-checbox').click(function() {
					if($('#tarifs_' + nombre + '-reduction-checkbox:checked').length > 0){
						$('#tarifs_' + nombre + '-reductions').css('display', '');
					}else{
						$('#tarifs_' + nombre + '-reductions').css('display', 'none');
					}
				});
				$('#supprimer_tarifs_' + nombre).click(function(){
					suppressionTarifMateriel();
				});
				$('#tarifs_' + nombre + '-reduction-checkbox').change(function(){
					if($('#tarifs_' + nombre + '-reduction-checkbox:checked').length > 0){
						$('#tarifs_' + nombre + '-reductions').css('display', '');
					}else{
						$('#tarifs_' + nombre + '-reductions').css('display', 'none');
					}
				});
				$('#tarifs_' + nombre + '-reductions .tarif-materiel-checkbox').change(function(){
					tarifMaterielCheckbox($(this));
				});
				$('#nombre-tarif-materiel').val(suivant);
			});
		});
	</script>
{% endblock %}