{% extends "@EasyAdmin/page/content.html.twig" %}
{% set titre ='Réservation' %}
{% block content_title %}
	{{ titre }}
	pour
	{{ booking.schedule.company }}
	du
	{{ booking.schedule.scheduleDate|date('d/m/Y') }}
{% endblock %}
{% block header %}
	{{ parent() }}
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
{% endblock %}
{% block head_stylesheets %}
	<link rel="stylesheet" href="{{ asset('app.css', ea.assets.defaultAssetPackageName) }}">
{% endblock %}
{% block main %}
	<section class="mt-7 py-0">
		<div class="bg-holder w-50 bg-right d-none d-lg-block" style="background-image:url({{ asset('assets/img/gallery/hero-section-1.png')}});"></div>
		<!--/.bg-holder-->
		{% set tarifs = booking.schedule.typeTarif.tarif %}
		{% set firstname ='' %}
		{% set lastname ='' %}

		{% set arrayTarifs = [] %}
		{% for tarif in tarifs %}
			{% if ((tarif.company == booking.schedule.company) and (tarif.depart == booking.schedule.depart) and (tarif.arrivee == booking.schedule.arrivee)) %}
				{% set arrayTarifs = arrayTarifs|merge([{ id: tarif.id, name: tarif.name, amount: tarif.amount }]) %}
			{% endif %}
		{% endfor %}
		<div data-tarifs="{{ arrayTarifs | json_encode() }}" id="mydiv"></div>
		<div class="container-sm">
			{{ form_start(form) }}
			{% for message in app.flashes('echec') %}
				<div class="alert alert-warning">
					{{ message }}
				</div>
			{% endfor %}
			{% if booking.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/')}}{{booking.schedule.company.image}}" width="120" height="60">
			{% endif %}
			<div class="col-12 col-md-8 col-xl-5">
				<table class="table table-responsive{-sm|-md|-lg|-xl|-xxl}">
					<tr>
						<td>
							<div class="input-group">
								{{ form_row(form.agenceDepart)}}
							</div>
						</td>
						<td>
							<div class="input-group">
								{{ form_row(form.agenceArrivee)}}
							</div>
						</td>
					</tr>
					<tr>
						<th style="border:0px">Départ > Arrivée</th>
						<td style="border:0px">{{ booking.schedule.departureTime|date('H:i') }}
							>
							{{ booking.schedule.estimatedArrivalTime|date('H:i') }}</td>
					</tr>
					<tr>
						<th style="border:0px">Tarif</th>
						<td style="border:0px">{{ booking.schedule.typeTarif }}</td>
					</tr>
					<tr>
						<th style="border:0px">Nb de places/Montant</th>
						<td style="border:0px">
							<div class="input-group">
								<div id="numberOfSeats" name="numberOfSeats">{{ booking.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 id="infosPassagers">
				<table id="dynamic_field">
					<tr>
						<td style="border:0px">
							<input type="text" class="form-control" value="{{ lastname }}" name="lastname[]" placeholder="Nom" class="input-group" required/>
						</td>
						<td style="border:0px">
							<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="age1" title='age' placeholder="age" name="age[]">
								{%  for tarif in arrayTarifs %}
									<option value="{{ tarif.id }}">{{ tarif.name }}:{{ tarif.amount }}</option>
								{% endfor %}
							</select>
						</td>
					</tr>
				</table>
				<button type="button" name="addpassager" id="addpassager" class="btn btn-primary">Ajout passager</button>
			</div>
			<table>
				<tr>
					<td>
						<div style='background-color:yellow; display:none' id='momoMessage'></div>
					</td>
				</tr>
				<tr>
					<td>
						<div class="input-group">
							<div id="prefixPhone">
								<div class="input-group-text">Coupon</div>
							</div>
							<div id="phone">
								{{ form_row(form.phone)}}
							</div>
							<div>
								{{ form_row(form.send)}}
							</div>
						</div>
					</td>
				</tr>
			</table>
			{{ form_end(form) }}
			<button class="btn btn-link">
				<a href="{{ path('app_schedule_index')}}">Retour au planning</a>
			</button>
		</div>
	</section>

{% endblock %}
{% block body_javascript %}
	<script src="{{asset('assets/js/travels.js')}}"></script>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
	<script src="{{asset('assets/js/theme.min.js')}}"></script>
{% endblock %}