{% extends 'base.html.twig' %}
{% set titre ='Réservation' %}
{% block title %}{% endblock %}
{% block body %}
	<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-->

		<div class="container-sm">
			<div class="col-12 col-md-8 col-xl-5">

				<span id="bookingId" data="{{ booking.id}} "></span>

				<table class="table-responsive{-sm|-md|-lg|-xl|-xxl}">
					<tr>
						<td style="font-weight:bold ; vertical-align:top" width="50%">
							<h4>{{ titre }}
								<span id="numdossier">
									<strong>{{ booking.numdossier }}</strong>
								</span>
							</h4>
						</td>
						<td style="font-weight:bold ; vertical-align:top">
							<table border="0">
								{% set i = 0 %}
								{% for psgr in passagers %}
									{% set i = i + 1 %}
									<tr>
										<td>
											{{ i }}
											-
										</td>
										<td>
											{{ psgr.lastname }}
											{{ psgr.firstname }}
										</td>
									</tr>
								{% endfor %}
							</table>
						</td>
					</tr>
					<tr>
						<td>
							{{ booking.schedule.company }}
							<div>
								<img class="img-thumbnail" src="{{ asset('assets/img/company/')}}{{booking.schedule.company.image}}" width="120" height="60">
							</div>
						</td>
						<td>
							{% for conf in booking.schedule.bus.conforts %}
								<i class='{{conf.class}}' desc='{{conf.name}}' title={{conf.description}}></i>
								{{conf.description}}
							{% endfor %}
						</td>
					</tr>
				</table>
				<table>
					<tr>
						<td colspan="3">
							<svg fill="#757575" class="_11vpoll" viewbox="0 0 24 24" width="24px" height="24px">
								<path d="M2,8 L18,8 L18,20 L2,20 L2,8 Z M13.9798254,0 L13.9798254,2 L6,2 L6,0 L3,0 L3,2 L2.00104344,2 C0.895897664,2 1.04665405e-13,2.89821238 9.79822387e-14,3.99079514 L-7.88860905e-31,20.0092049 C-6.72539167e-15,21.1086907 0.898212381,22 1.99079514,22 L18.0092049,22 C19.1086907,22 20,21.1017876 20,20.0092049 L20,3.99079514 C20,2.89130934 19.1090599,2 17.9997971,2 L16.9760131,2 L17,0 L13.9798254,0 Z M10,18 L16,18 L16,12 L10,12 L10,18 Z"></path>
							</svg>
							<span>
								{{ booking.schedule.scheduleDate ? booking.schedule.scheduleDate|format_datetime('full', 'none', locale='fr') }}
							</span>
						</td>
						<td rowspan="3" style="text-align: right"><img width="50%" src='{{ qrcode }}'></td>
					</tr>
					<tr>
						<td>
							<strong>{{ booking.schedule.departureTime ? booking.schedule.departureTime|date('H:i') : '' }}</strong>
						</td>
						<td>
							<svg
								class="_1mmywa6" viewbox="0 0 24 24" width="24px" height="24px" stroke="grey" stroke-width="2" stroke-linecap="round" fill="none" fill-rule="evenodd">
								{# <path d="M4,12 L20,12 M12,6 L20,12 M12,18 L20,12"></path> #}
								<circle cx="6" cy="12" r="3"></circle>
								<path d="M6,12 L6,24"></path>
							</svg>
						</td>
						<td>
							{{ booking.schedule.depart }}
						</td>
					</tr>
					<tr>
						<td>
							<strong>{{ booking.schedule.estimatedArrivalTime ? booking.schedule.estimatedArrivalTime|date('H:i') : '' }}
							</strong>
						</td>
						<td>
							<svg
								class="_1mmywa6" viewbox="0 0 24 24" width="24px" height="24px" stroke="grey" stroke-width="2" stroke-linecap="round" fill="none" fill-rule="evenodd">
								{# <path d="M4,12 L20,12 M12,6 L20,12 M12,18 L20,12"></path> #}
								<circle cx="6" cy="12" r="3"></circle>
								<path d="M6,12 L6,0"></path>
							</svg>
						</td>
						<td>
							{{ booking.schedule.arrivee }}
						</td>
					</tr>
				</table>

				<table>
					{% if booking.status  %}
						<tr>
							<td>Montant :
								<span id="amount">{{ booking.totalAmount }}
									{{ booking.status.currency }}</span>
							</td>
							<td style="text-align: right">
								Transaction :
								<span id="financialTransactionId">{{ booking.status.financialTransactionId }}</span>
							</td>
						</tr>

					{% else %}
						<tr>
							<th>Status de la transaction</th>
							<td>
								<span id="statusmsg">Non payée</span>
							</td>
						</tr>
					{% endif %}
				</table>
				<div class=" input-group mb-3">
					<a href="{{ path('app_booking_search')}}">Retour à la recherche</a>
				</div>
			</div>
		</div>

	</section>
{% endblock %}
{% block footer %}
	{{ include('footer.html.twig') }}
{% endblock %}