{% extends 'base.html.twig' %}
{% set titre ='Réservation' %}
{% block page_title %}
	{{ titre }}
{% endblock %}
{% block header %}{% endblock %}
{% block stylesheets %}
	{{ encore_entry_link_tags('app') }}
{% endblock %}

{% block body %}
	<!-- Image visible seulement sur les écrans md (medium) et plus grands -->
	{% set tarifs = schedule.typeTarif.tarif %}
	{% if (app.user) %}
		{% set firstname = app.user.firstname %}
		{% set lastname = app.user.lastname %}
	{% else %}
		{% set firstname ='' %}
		{% set lastname ='' %}
	{% endif %}

	{% set arrayTarifs = [] %}
	{% for tarif in tarifs %}
		{% if ((tarif.company == schedule.company) and (tarif.depart == schedule.depart) and (tarif.arrivee == schedule.arrivee)) %}
			{% set arrayTarifs = arrayTarifs|merge([{ id: tarif.id, name: tarif.name, amount: tarif.amount }]) %}
		{% endif %}
	{% endfor %}

	<section class="mt-7 py-0">

		<div data-tarifs="{{ arrayTarifs | json_encode() }}" id="mydiv"></div>
		<div class="container-sm">

			{{ form_start(form, {'attr': {'id': 'processForm'}}) }}
			{% for message in app.flashes('echec') %}
				<div class="alert alert-warning">
					{{ message }}
				</div>
			{% endfor %}

			<h3>{{ titre }}
				pour
				{{ schedule.company }}
				du
				{{ schedule.scheduleDate|date('d/m/Y') }}</h3>
			<div class="row">
				<div class="col-6">
					{% if schedule.company.image is null %}
						<img class="img-thumbnail" src="{{ asset('assets/img/company/')}}0.jpg" width="120" height="60">
					{% else %}
						<img class="img-thumbnail" src="{{ asset('assets/img/company/')}}{{schedule.company.image}}" width="120" height="60">
					{% endif %}
				</div>
				<div class="col-6">
					<div style="color: blue" id="divResa" style="display:none">Actuellement il y a
						<strong>
							<span id="resaencours"></span>
						</strong>
						réservation(s) en cours sur ce trajet
					</div>
					<input id="schedule" type="hidden" value={{schedule.id}}>
				</div>
			</div>
			<div class="row">
				<div class="col-12 col-md-8 col-xl-5">
					<div class="row">
						<table class="table table-responsive{-sm|-md|-lg|-xl|-xxl}">
							<tr>
								<td>
									<strong>Type tarif :&nbsp;</strong>
									{{ schedule.typeTarif }}
								</td>
								<td>
									<strong>Départ>Arrivée :&nbsp;</strong>
									{{ schedule.departureTime|date('H:i') }}
									>
									{{ schedule.estimatedArrivalTime|date('H:i') }}</td>
							</tr>
							<tr>
								<th>Nb de places/Montant :</th>
								<td>
									<div class="input-group">
										<div id="numberOfSeats" name="numberOfSeats">{{ numberOfSeats }}</div>
										&nbsp;/&nbsp;
										{% if (arrayTarifs is empty) %}
											{% set tarif0 = 0 %}
										{% else %}
											{% set tarif0 = arrayTarifs[0].amount %}
										{% endif %}
										<span style="font-weight:bold;color:green;" id="totalAmount" name="totalAmount" id="totalAmount">{{ tarif0 }}</span>
										<span>&nbsp;XAF</span>
									</div>
								</td>
							</tr>
						</table>
					</div>
					<div class="row">
						<table width="100%">
							<tr>
								<td style="background-color:#E5E4D7">
									{{ form_row(form.agenceDepart)}}
								</td>
								<td style="background-color:#E5E4D7">
									{{ form_row(form.agenceArrivee)}}
								</td>
							</tr>
						</table>
					</div>
					<div class="row" id="infosPassagers" style="background-color:#E5E4D7">
						<table id="dynamic_field">
							<tr>
								<td>
									<strong>Nom :</strong>
								</td>
								<td>
									<strong>Prénom :</strong>
								</td>
								<td style="width:150px ; border:0px">
									<strong>Tarif :</strong>
								</td>
							</tr>
							<tr>
								<td>
									<input type="text" class="form-control" value="{{ lastname }}" name="lastname[]" placeholder="Nom" class="input-group" required/>
								</td>
								<td>
									<input type="text" class="form-control" value="{{ firstname }}" name="firstname[]" placeholder="Prénom" class="input-group" required/>
								</td>
								<td style="width:150px ; border:0px">
									<select onchange="calcul()" class="form-select" id="codetarif1" title="codetarif" placeholder="codetarif" name="codetarif[]">
										{%  for tarif in arrayTarifs %}
											<option value="{{ tarif.id }}">{{ tarif.name }}:{{ tarif.amount }}</option>
										{% endfor %}
									</select>
								</td>
							</tr>
						</table>
						<div class="input-group">
							<button type="button" name="addpassager" id="addpassager" class="btn btn-secondary">Ajout passager</button>
						</div>
					</div>
					<div class="row" style="background-color:#E5E4D7">
						<table>
							<tr>
								<td>
									<div class="input-group">
										<div id="prefixPhone">
											<div class="input-group-text">+242</div>
										</div>
										<div id="phone">
											{{ form_row(form.phone)}}
										</div>
										<div>
											{{ form_row(form.send)}}
										</div>
									</div>
								</td>
							</tr>
						</table>
					</div>
				</div>
				<div class="col-lg-2 d-none d-lg-block">
					<img
					width="500" src="{{ asset('assets/img/gallery/KD-PROFIL-4.jpg')}}" alt="Description de l'image">
				{# <img src="{{ asset('assets/img/gallery/hero-section-1.png')}}" alt="Description de l'image"> #}
				</div>
			</div>
			{{ form_end(form) }}
			<button class="btn btn-link">
				<a href="{{ path('app_schedule_index')}}">Retour au planning</a>
			</button>
		</div>
	</div>
{% endblock %}
{% block javascript %}
	{{ parent()}}
	<script src="{{asset('assets/js/travels.js')}}"></script>
	<script src="{{ asset('login.js', constant('EasyCorp\\Bundle\\EasyAdminBundle\\Asset\\AssetPackage::PACKAGE_NAME')) }}"></script>
	{{ encore_entry_script_tags('app') }}
{% endblock %}
{% block footer %}
	{{ include('footer.html.twig') }}
{% endblock %}