{# 
	@author: Benjamin AMOUZOU <benkokouamouzou@gmail.com> 
	Comment: Interdiction de formater automatiquement la souce avec vscode sous peine de casser l'indentation du code jquery
#}
{% extends "rse/template-rse.html.twig" %}

{% block titre_enfant %}
	Partenaire
{% endblock %}

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

		{% include('template-message.html.twig') %}
		<div class="row">
			<div class="col-12">
				<h5 class="mt-3">Edition sponsor Ecobox</h5>
			</div>
		</div>

		<div class="row">
			<div class="col-lg-12 col-md-12 col-sm-12">
				<div class="edit-border">

					<form method="post" enctype="multipart/form-data">

						<div class="row">
							<div class="col-lg-12">
								<div class="row">
									<div class="col-lg-3">
										{{form_label(form.denomination,"Raison sociale", {'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'}})}}
									</div>

									<div class="col-lg-3">
										{{form_label(form.logo,"Logo", {'label_attr': {'class': 'col-form-label col-form-label-sm'}})}}<br/>
										{{form_widget(form.logo, {'attr': {'class': 'form-control-file form-control-sm pl-0'}})}}
									</div>

									<div class="col-lg-3">
										{{form_label(form.contacts,"Contacts", {'label_attr': {'class': 'col-form-label col-form-label-sm'}})}}<br/>
										{{form_widget(form.contacts, {'attr': {'class': 'form-control form-control-sm mb-3'}})}}
									</div>
								</div>
							</div>
						</div>

						<div class="row">
							<div class="col-lg-12 text-center">
								<label class="font-weight-bold col-form-label col-form-label-sm btn-edit">Personnes contacts</label>
							</div>
						</div>

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

						<div class="row  mt-4 mb-3">
							<div class="col-lg-12" id="prototype-parent">
								<input
								type="hidden" id="nombre" value="{{form.personneContacts|length}}"/>

								{#Affichage des personnes contacts#}
								{% for personne in form.personneContacts %}
									<fieldset class="edit-border mt-2" style="border-radius:3px" id="prototype-child-{{ loop.index - 1}}">
										
										<legend class="font-weight-bold col-form-label col-form-label-sm" id="prototype-label-{{ loop.index - 1}}">Personne contact n° {{loop.index}}</legend>
											
										<div class="row">
											<div class="col-lg-3">
												{{form_label(personne.nom,"Nom", {'label_attr': {'class': 'col-form-label col-form-label-sm'}})}}<span class="text-danger">
													*</span><br/>
												{{form_widget(personne.nom, {'attr': {'class': 'form-control form-control-sm mb-3'}})}}
											</div>
											<div class="col-lg-3">
												{{form_label(personne.prenoms,"Prénoms", {'label_attr': {'class': 'col-form-label col-form-label-sm'}})}}<span class="text-danger">
													*</span><br/>
												{{form_widget(personne.prenoms, {'attr': {'class': 'form-control form-control-sm mb-3'}})}}
											</div>
											<div class="col-lg-3">
												{{form_label(personne.sexe,"Sexe", {'label_attr': {'class': 'col-form-label col-form-label-sm'}})}}<span class="text-danger">
													*</span><br/>
												{{form_widget(personne.sexe, {'attr': {'class': 'custom-select custom-select-sm'}})}}
											</div>
										</div>
										<div class="row">
											<div class="col-lg-3">
												{{form_label(personne.email,"Email", {'label_attr': {'class': 'col-form-label col-form-label-sm'}})}}<span class="text-danger">
													*</span><br/>
												{{form_widget(personne.email, {'attr': {'class': 'form-control form-control-sm mb-3'}})}}
											</div>
											<div class="col-lg-3">
												{{form_label(personne.poste,"Fonction", {'label_attr': {'class': 'col-form-label col-form-label-sm'}})}}<span class="text-danger">
													*</span><br/>
												{{form_widget(personne.poste, {'attr': {'class': 'form-control form-control-sm mb-3'}})}}
											</div>
											<div class="col-lg-3">
												{{form_label(personne.contacts,"Contacts", {'label_attr': {'class': 'col-form-label col-form-label-sm'}})}}<span class="text-danger">
													*</span><br/>
												{{form_widget(personne.contacts, {'attr': {'class': 'form-control form-control-sm mb-3'}})}}
											</div>
										</div>

										<div class="row">
											<div class="col-lg-12 text-right">
												<a class="btn btn-delete p-0 supprimer">
													<i class="fa fa-trash-o fa-lg" title="Supprimer ce formulaire"></i>
												</a>
											</div>
										</div>
									</fieldset>

								{% endfor %}

								{#Fin affichage des personnes contacts#}
							</div>
						</div>

						{{ form_row(form._token) }}

						<div class="row">
							<div class="col-lg-12">
								<a class="btn btn-discard btn-sm" href="{{path('app_partenaire_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 suppression() {
			let nombre = parseInt($('#nombre').val()); // Récupération du nombre de formulaire présent sur la page
			let precedent = nombre - 1; // Valuer par rapport au form builder
			if (precedent > 0) {
				$('#prototype-child-' + precedent).remove(); // Suppression de l'élément
				$('#nombre').val(precedent);//Mise à jour du nombre d'éléments
			}
		}

		$(document).ready(function () {
			$('#ajouter').click(function () {
				let nombre = parseInt($('#nombre').val());//Récupération du nombre de formulaire présent sur la page
				let formulaire = $('#prototype-child-0').html();//Récupération du contenu du prototype
				let suivant = nombre + 1;
				let titre = "Personne contact n° " + suivant;
				formulaire = formulaire.replace(/0/g, nombre.toString());
				formulaire = formulaire.replace("Personne contact n° 1", titre);//Remplacement du titre
				formulaire = formulaire.replace("p-" + nombre.toString(),"p-0");//Conservation du padding du bouton de suppression
				$('#prototype-parent').append('<fieldset class="edit-border mt-2" id="prototype-child-' + nombre.toString() + '">' + formulaire + '</fieldset>');
				$('#nombre').val(suivant);
				$('#prototype-child-' + nombre + ' a').click(function () {//Ajout de l'évènement click sur le bouton de suppression
					suppression();
				})
			});

			$('.supprimer').click(function(){
				suppression();
			});
		})
	</script>
{% endblock %}