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

{% block titre_enfant %}
	Planning hebdomadaire
{% endblock %}

{% block style %}
	<style>
		.multiple{
			height: 70px; 
			overflow: scroll; 
			background-color: white;
			border: 1px solid #D0D0D0;
			border-radius: 3px;
		}
	</style>
{% endblock %}

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

		{% include('template-message.html.twig') %}
		<div class="row">
			<div class="col-12">
				<h5 class="mt-3">Planning hebdomadaire</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-12 text-right mt-3">
								<a class="btn btn-new btn-sm" title="Ajouter une journée" id="ajouter-journee">
									<i class="fa fa-plus-square-o fa-lg" color="white"></i>&nbsp;&nbsp;Ajouter</a>
							</div>
						</div>

						<div class="row">
							{# Affichage des journees #}
							<div class="col-lg-12" id="prototype-parent-journee">
								<input type="hidden" id="nombre-journee" value="{{form.journees|length}}"/>

								{% for journee in form.journees %}
									{% set numeroJournee = loop.index - 1 %}

									<fieldset class="edit-border mt-2" id="prototype-child-journee-{{ loop.index - 1 }}">
										<legend class="col-form-label col-form-label-sm">Journée n° {{ loop.index }}</legend>

										<div class="row">
											<div class="col-lg-12 text-right mb-1">
												<a class="btn btn-new btn-sm ajouter-operation" title="Ajouter une opération" id="ajouter-operation-journees_{{numeroJournee}}">
													<i class="fa fa-plus-square-o fa-lg" color="white"></i>
												</a>
											</div>
										</div>
										<div class="row">
											<div class="col-lg-2">
												{{form_label(journee.date,"Date", {'label_attr': {'class': 'col-form-label col-form-label-sm'}})}}<span class="text-danger">
													*</span><br/>
												{{form_widget(journee.date, {'attr': {'class': 'form-control form-control-sm'}})}}
											</div>
											<div class="col-lg-10" id="prototype-parent-operation_journees_{{numeroJournee}}">
												<input type="hidden" id="nombre-operation_journees_{{numeroJournee}}" value="{{journee.operations|length}}"/>
												{# Affichage des opérations #}
												{% for operation in journee.operations %}
													{% set numeroOperation = loop.index - 1 %}
													<fieldset class="edit-border" id="prototype-child_journees_{{numeroJournee}}_operations_{{numeroOperation}}">
														<legend class="col-form-label col-form-label-sm">Opération n° 1</legend>
														<div class="row">
															<div class="col-lg-3">
																{{form_label(operation.typeOperation,"Type operation", {'label_attr': {'class': 'col-form-label col-form-label-sm'}})}}<span class="text-danger">
																	*</span><br/>
																{{form_widget(operation.typeOperation, {'attr': {'class': 'custom-select custom-select-sm'}})}}
															</div>
															<div class="col-lg-3">
																{{form_label(operation.heureDebut,"Heure début", {'label_attr': {'class': 'col-form-label col-form-label-sm'}})}}<span class="text-danger">
																	*</span><br/>
																{{form_widget(operation.heureDebut, {'attr': {'class': 'form-control form-control-sm px-1'}})}}
															</div>
															<div class="col-lg-3">
																{{form_label(operation.heureFin,"Heure fin", {'label_attr': {'class': 'col-form-label col-form-label-sm'}})}}<span class="text-danger">
																	*</span><br/>
																{{form_widget(operation.heureFin, {'attr': {'class': 'form-control form-control-sm'}})}}
															</div>
														</div>
														<div class="row">
															<div class="col-lg-3">
																{{form_label(operation.statut,"Statut", {'label_attr': {'class': 'col-form-label col-form-label-sm'}})}}<br/>
																{{form_widget(operation.statut, {'attr': {'class': 'custom-select custom-select-sm'}})}}
															</div>
															<div class="col-lg-3">
																{{form_label(operation.nbreTour, "Nombre de tour", {'label_attr': {'class': 'col-form-label col-form-label-sm'}})}}<br/>
																{{form_widget(operation.nbreTour, {'attr': {'class': 'form-control form-control-sm'}})}}
															</div>
															<div class="col-lg-3">
																{{form_label(operation.commentaire,"Commentaire", {'label_attr': {'class': 'col-form-label col-form-label-sm'}})}}<br/>
																{{form_widget(operation.commentaire, {'attr': {'class': 'form-control form-control-sm'}})}}
															</div>
														</div>

														<div class="row mt-3">
															{# Affichage des fournisseurs formels et informels #}
															<div class="col-lg-6">
																{# <div class="custom-control custom-checkbox"> #}
																	{# <input type="checkbox" id="fournisseurs_formels_journees_{{numeroJournee}}_operations_{{numeroOperation}}" class="custom-control-input fournisseurs_formels"/> #}
																	<label for="fournisseurs_formels_journees_{{numeroJournee}}_operations_{{numeroOperation}}" class="col-form-label col-form-label-sm mt-0">Fournisseurs formels</label>
																{# </div> #}
																<div id="container_fournisseurs_formels_journees_{{numeroJournee}}_operations_{{numeroOperation}}" class="multiple pl-1">
																	{% for fournisseur in operation.fournisseurs %}
																		<div class="custom-control custom-checkbox">
																			{{form_widget(fournisseur, {'attr': {'class': 'custom-control-input'}})}}
																			{{form_label(fournisseur, "", {'label_attr': {'class': 'custom-control-label col-form-label col-form-label-sm'}})}}
																		</div>
																	{% endfor %}
																</div>
															</div>

															{# {% if operation.fournisseurs is defined and operation %} #}
															<div class="col-lg-6">
																{# <div class="custom-control custom-checkbox"> #}
																	{# <input type="checkbox" id="fournisseurs_informels_journees_{{numeroJournee}}_operations_{{numeroOperation}}" class="custom-control-input fournisseurs_informels"/> #}
																	<label for="fournisseurs_informels_journees_{{numeroJournee}}_operations_{{numeroOperation}}" class="col-form-label col-form-label-sm mt-0">Fournisseurs informels</label>
																{# </div> #}
																<div id="container_fournisseurs_informels_journees_{{numeroJournee}}_operations_{{numeroOperation}}" class="multiple pl-1">
																	{% for fournisseur in operation.informels %}
																		<div class="custom-control custom-checkbox">
																			{{form_widget(fournisseur, {'attr': {'class': 'custom-control-input'}})}}
																			{{form_label(fournisseur, "", {'label_attr': {'class': 'custom-control-label col-form-label col-form-label-sm'}})}}
																		</div>
																	{% endfor %}
																</div>
															</div>
														</div>

														<div class="row">
															<div class="col-lg-12 text-right">
																<a class="btn btn-delete p-0 supprimer-operation">
																	<i class="fa fa-trash-o fa-lg" title="Supprimer cette operation de la journée" id="supprimer_journees_{{numeroJournee}}_operations_{{numeroOperation}}"></i>
																</a>
															</div>
														</div>
													</fieldset>
												{% endfor %}
											</div>
										</div>
										<div class="row">
											<div class="col-lg-12">
												<a class="btn btn-delete p-0 supprimer-journee">
													<i class="fa fa-trash-o fa-lg" title="Supprimer cette journée" id="supprimer_journees_{{numeroJournee}}"></i>
												</a>
											</div>
										</div>
									</fieldset>
								{% endfor %}
							</div>
						</div>

						{{form_row(form._token)}}

						<div class="row mt-3">
							<div class="col-lg-12">
								<a class="btn btn-discard btn-sm" href="{{path('app_planning_hebdomadaire_view')}}">
									<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>
		//Suppression journee
		function suppressionJournee() {
			let nombre = parseInt($('#nombre-journee').val());
			let precedent = nombre - 1;
			if (precedent > 0) {
				$('#prototype-child-journee-' + precedent).remove();
				$('#nombre-journee').val(precedent);
			}
		}
		//Fin suppression journee
		//Suppression operation journee
		function suppressionOperationJournee(trigger) {
			let journee = trigger.attr('id').split('_')[2];
			let nombre = parseInt($('#nombre-operation_journees_' + journee).val());
			let precedent = nombre - 1;
			if (precedent > 0) {
				$('#prototype-child_journees_' + journee + '_operations_' + precedent).remove();
				$('#nombre-operation_journees_' + journee).val(precedent);
			}
		}
		//Fin suppression operation journee
		//Ajouter operation à une journee
		function ajoutOperationJournee(trigger){
			let numeroJournee = trigger.attr('id').split("_")[1];
			let nombre = parseInt($('#nombre-operation_journees_' + numeroJournee).val());
			let formulaire = $('#prototype-child_journees_' + numeroJournee + '_operations_0').html();
			let suivant = nombre + 1;
			let titre = "Opération n° " + suivant;
			formulaire = formulaire.replace(/operations_0/g, "operations_" + nombre.toString());
			formulaire = formulaire.replace(/\[operations\]\[0\]/g, "[operations][" + nombre.toString()+']');
			formulaire = formulaire.replace("Opération n° 1", titre);
			formulaire = formulaire.replace("p-" + nombre.toString(), "p-0");
			$('#prototype-parent-operation_journees_' + numeroJournee).append('<fieldset class="edit-border mt-2" id="prototype-child_journees_' + numeroJournee + '_operations_' + nombre.toString() + '" >' + formulaire + '</fieldset>');
			$('#nombre-operation_journees_' + numeroJournee).val(suivant);
			$('#supprimer_journees_' + numeroJournee + '_operations_' + nombre).click(function () {
				suppressionOperationJournee($(this));
			});
		}
		//Fin ajouter operation à une journee
		$(document).ready(function (){
			$('.fournisseurs_formels').change(function(){
				hideAndShowFournisseursFormels($(this));
			});
			$('.fournisseurs_informels').change(function(){
				hideAndShowFournisseursInformels($(this));
			});
			//Journees
			$('#ajouter-journee').click(function () {
				let nombre = parseInt($('#nombre-journee').val());
				let formulaire = $('#prototype-child-journee-0').html();
				let suivant = nombre + 1;
				let titre = "Journee n° " + suivant;
				formulaire = formulaire.replace(/journees_0/g, "journees_" + nombre.toString());
				formulaire = formulaire.replace(/\[journees\]\[0\]/g, "[journees][" + nombre.toString()+']');
				formulaire = formulaire.replace("Journée n° 1", titre);
				$('#prototype-parent-journee').append('<fieldset class="edit-border mt-2" id="prototype-child-journee-' + nombre.toString() + '" >' + formulaire + '</fieldset>');
				$('#ajouter-operation-journees_' + nombre).click(function() {
					ajoutOperationJournee($(this));//Evènement d'ajout d'operation sur la nouvelle journée
				});
				$('[id^=supprimer_journees_' + nombre + '_operations_]').click(function(){//id start with
					suppressionOperationJournee($(this));//Evènement de suppression de l'opération sur la nouvelle journée
				});
				$('#nombre-journee').val(suivant);
				$('#supprimer_journees_' + nombre).click(function () {
					suppressionJournee();
				});
			});
			$('.supprimer-journee').click(function() {
				suppressionJournee();
			});
			//Fin journees
			//Facturation service
			$('.ajouter-operation').click(function () {
				ajoutOperationJournee($(this));
			});
			$('.supprimer-operation').click(function() {
				suppressionOperationJournee($(this));
			});
			//Fin facturation service
		});
    </script>
{% endblock %}