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

{% block titre_enfant %}
	Produit fini
{% 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">Edition produit fini</h5>
				<span>{{ form_errors(form) }}</span>
			</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-3">
								{{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'}})}}
							</div>

							<div class="col-lg-3">
								{{form_label(form.familleMatiere,"Famille de matière", {'label_attr': {'class': 'col-form-label col-form-label-sm'}})}}<br/>
								{{form_widget(form.familleMatiere, {'attr': {'class': 'custom-select custom-select-sm'}})}}
							</div>

							<div class="col-lg-4">
								{{form_label(form.description,"Description", {'label_attr': {'class': 'col-form-label col-form-label-sm'}})}}<br/>
								{{form_widget(form.description, {'attr': {'class': 'form-control form-control-sm'}})}}
							</div>

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

						<div class="row">
							<div class="col-lg-12">
								<div class="custom-control custom-checkbox">
									<input type="checkbox" id="edit_price" name="edit_price" class="custom-control-input"/>
									<label for="edit_price" class="custom-control-label col-form-label col-form-label-sm mt-0">Editer le dernier prix de vente</label>
								</div>
							</div>
						</div>

						<div class="row edit_price" style="display:none">
							<div class="col-lg-12 text-center mt-3">
								<label class="col-form-label col-form-label-sm text-success">Dernier prix de vente</label>
								<hr class="mt-0"/>
							</div>
						</div>

						<input type="hidden" id="matiereSelectionnes" name="matiereSelectionnes" value=""/>
						
						<div class="row edit_price" style="display:none" id="price_prototype_parent">
							<div class="col-lg-3">
								<label class="col-form-label col-form-label-sm" for="prix">Prix du Kg (FCFA)</label><span class="text-danger">
									*</span><br/>
								<input type="number" id="prix" name="prix" class="form-control form-control-sm" value="">
							</div>
							<div class="col-lg-3">
								<label class="col-form-label col-form-label-sm" for="date">Date</label><span class="text-danger">
									*</span><br/>
								<input type="date" id="date" name="date" class="form-control form-control-sm" value="">
							</div>
							<div class="col-lg-3">
								<div class="custom-control custom-checkbox mt-4">
									<input type="checkbox" id="others_for_this_price" name="others_for_this_price" class="custom-control-input"/>
									<label for="others_for_this_price" class="custom-control-label col-form-label col-form-label-sm mt-0">Autres produits finis à ce prix</label>
								</div>
							</div>
						</div>

						<div class="row mt-5" style="display:none" id="matieres">
							<div class="col-lg-12 mb-2"><span class="col-form-label col-form-label-sm">Selectionnez les matières ayant ce dernier prix de vente en commun</span></div>
							{% if matiereSecondaires is defined %}
								{% for matiere in matiereSecondaires %}
									{% if not (matiere.denomination == form.denomination.vars.data) %}
										<div class="col-lg-5">
											<div class="custom-control custom-checkbox">
												<input type="checkbox" id="matiere-{{matiere.id}}" name="matiere-{{matiere.id}}" class="custom-control-input matieres" value="{{matiere.id}}"/>
												<label for="matiere-{{matiere.id}}" class="custom-control-label col-form-label col-form-label-sm mt-0">{{matiere.denomination}}</label>
											</div>
										</div>
									{% endif %}
								{% endfor %}
							{% endif %}
						</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_famille_matiere_list')}}">
									<i class="fa fa-chevron-left fa-lg"></i>&nbsp;&nbsp;Annuler</a>
								<button class="btn btn-sm btn-new" style="background-color: #94C11E; border-color: #94C11E;">
									<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>
		$(document).ready(function(){
			$('#edit_price').change(function(){
				if($(this).is(':checked')){
					$('.edit_price').show();
					$('#prix').attr('required', true);
					$('#date').attr('required', true);
					$('#others_for_this_price').change(function(){
						if($(this).is(':checked')){
							$('#matieres').show();
						}else{
							$('#matieres').hide();
						}
					});
				}else{
					$('.edit_price').hide();
					$('#matieres').hide();
					$('#prix').removeAttr('required');
					$('#date').removeAttr('required');
				}
			});

			$('.matieres').change(function(){
				var id = $(this).val();
				if($(this).is(':checked')){
					//Ajout de la matière à la listes des matières
					let matiereSelectionnes = $('#matiereSelectionnes').val();
					matiereSelectionnes += (id + ';');
					$('#matiereSelectionnes').val(matiereSelectionnes);
				}else{
					let matiereSelectionnes = $('#matiereSelectionnes').val().split(';');
					let nouvellesMatiereSelectionnes = '';
					for(let i = 0; i < (matiereSelectionnes.length - 1); i++){//-1 à cause du dernier point virgule
						if(matiereSelectionnes[i] != id){
							nouvellesMatiereSelectionnes += (matiereSelectionnes[i] + ';');
						}
					}
					$('#matiereSelectionnes').val(nouvellesMatiereSelectionnes);
				}
			});
		});
	</script>
{% endblock %}