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

{% block titre_enfant %}
	Rapports de réunions
{% endblock %}

{% block contenu_principal_commercial %}
	<div class="container-fluid">
		<div class="row">
			<div class="col-lg-12">
				<h5 class="mt-3">Rapports de réunions</h5>
			</div>
		</div>
		<div class="row">
			<div class="col-lg-12 col-md-12 col-sm-12">
				<div class="edit-border">
					<fieldset class="edit-border" style="border-radius: 3px;">
						<legend class="col-form-label col-form-label-sm">Eléments de la recherche</legend>
						<form method="post">
							<div class="row">
								<div class="col-lg-3">
									<div id="date">
										<label class="col-form-label col-form-label-sm">Date réunion</label>
										<span class="text-danger"> *</span><br/>
										<input type="date" class="form-control form-control-sm" required="required" name="date"/>
									</div>
									<div class="custom-control custom-checkbox mt-4">
										<input type="checkbox" id="intervalle" name="intervalle" class="custom-control-input" value="true"/>
										<label for="intervalle" class="custom-control-label col-form-label col-form-label-sm">Intervalle</label>
									</div>
								</div>
								<div class="col-lg-3 intervalle" style="display:none">
									<label class="col-form-label col-form-label-sm">Date début réunions</label>
									<span class="text-danger"> *</span><br/>
									<input type="date" class="form-control form-control-sm" name="dateDebut"/>
								</div>
								<div class="col-lg-3 intervalle" style="display:none">
									<label class="col-form-label col-form-label-sm">Date fin réunions</label>
									<span class="text-danger"> *</span><br/>
									<input type="date" class="form-control form-control-sm" name="dateFin"/>
								</div>
							</div>
							<div class="row">
								<div class="col-lg-12">
									<button class="btn btn-new btn-sm mt-3">
										<i class="fa fa-eye fa-lg" color="white"></i>&nbsp;&nbsp;Visualiser</button>
								</div>
							</div>
						</form>
					</fieldset>

					<div class="row d-flex mt-3">
						<div class="col-lg text-center">
							<label class="col-form-label col-form-label-sm alert alert-success">
								<span>{{message}}</span>
							</label>
						</div>
					</div>

					<fieldset class="edit-border mt-3" style="border-radius: 3px">
						<legend class="col-form-label col-form-label-sm">Résultat de la recherche</legend>
						{% if reunions is empty %}
							<div class="row d-flex mt-3">
								<div class="col-lg text-center">
									<label class="col-form-label col-form-label-sm">
										<span>Aucun rapport trouvé</span>
									</label>
								</div>
							</div>
						{% else %}
							{% for reunion in reunions %} 
								<div class="edit-border my-2 py-1" style="border-radius: 3px; background-color: #FFFFFF">
									<div class="row d-flex mt-0">
										<div class="col-lg">
											<span id="reunion-{{reunion.id}}" class="reunion btn-edit">
												<i class="{% if loop.index == loop.first %}fa fa-minus-square-o fa-lg{% else %}fa fa-plus-square-o fa-lg{% endif %}" title="cliquez pour dérouler"></i>
											</span>
											<span class="font-weight-bold ml-2 pl-1 col-form-label-sm">Date de la réunion:</span><span class="pl-2 col-form-label-sm">{{reunion.dateReunion|date('d-m-Y')}}</span>
										</div>
										<div class="col-lg text-right">
											<a href="{{path('app_rapport_reunion_commercial_edit', {id: reunion.id})}}"><i class="fa fa-edit fa-lg text-success" title="Editer"></i></a>
										</div>
									</div>
									<div class="col-lg-12 ml-3 reunion-{{reunion.id}}" style="{% if loop.index != loop.first %}display: none{% endif %}">
										<label class="col-form-label col-form-label-sm font-weight-bold">Sujets débattus</label><br/>
										<label class="col-form-label col-form-label-sm text-justify">{{reunion.sujet}}</label>
									</div>
									<div class="col-lg-12 ml-3 reunion-{{reunion.id}}" style="{% if loop.index != loop.first %}display: none{% endif %}">
										<label class="col-form-label col-form-label-sm font-weight-bold">Décisions prises</label><br/>
										<label class="col-form-label col-form-label-sm text-justify">{{reunion.decision}}</label>
									</div>
									<div class="col-lg-12 ml-3 reunion-{{reunion.id}}" style="{% if loop.index != loop.first %}display: none{% endif %}">
										<label class="col-form-label col-form-label-sm font-weight-bold">Echéances</label><br/>
										<label class="col-form-label col-form-label-sm text-justify">{{reunion.echeance}}</label>
									</div>
								</div>
							{% endfor %}
						{% endif %}
					</fieldset>

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

{% block script %}
	<script>
		$(document).ready(function(){
			$('#intervalle').change(function(){
				if($(this).is(':checked')){
					$('#date').hide();
					$('#date input').removeAttr('required');
					$('.intervalle').show();
					$('.intervalle input').attr('required','required');
				}else{
					$('#date').show();
					$('#date').attr('required','required');
					$('.intervalle').hide();
					$('.intervalle input').removeAttr('required');
				}
			});
			$('.reunion').click(function(){
				let id = $(this).attr('id').split('-')[1];
				let i = $('#reunion-' + id +' i').attr('class');
				if(i == 'fa fa-plus-square-o fa-lg'){
					$('#reunion-' + id +' i').attr('class', 'fa fa-minus-square-o fa-lg');
					$('#reunion-' + id +' i').attr('title', 'Cliquez pour enrouler');
					$('.reunion-' + id).css('display', '');
				}else{
					$('#reunion-' + id +' i').attr('class', 'fa fa-plus-square-o fa-lg');
					$('#reunion-' + id +' i').attr('title', 'Cliquez pour dérouler');
					$('.reunion-' + id).css('display', 'none');
				}
			});
		});
	</script>
{% endblock %}