{% extends 'base.html.twig' %}
{% set titre ='Recherche de réservation' %}
{% block title %}{% endblock %}
{% block header %}
	<link id="theme-style" rel="stylesheet" href="{{asset('assets/css/sieges.css')}}">
{% endblock %}
{% block body %}
	<style>
		.container {
			display: flex;
			justify-content: space-around; /* Cela distribue l'espace uniformément */
			align-items: start; /* Alignement vertical au début des divs */
		}
		.data-section,
		.table-section {
			flex: 1; /* Chaque section prend une part égale de l'espace */
			padding: 20px; /* Un peu d'espace autour du contenu de chaque section */
		}
		/* Ajouter à styles.css */
	</style>
	<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>
		{% set schedule = booking.schedule %}
		<div class="container-sm">
			<div class="row">
				<div class="col-12 col-md-6">
					<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">
										<a href="/booking/show/{{ booking.numdossier }}" alt="Changer de siège">
											<strong>{{ booking.numdossier }}</strong>
										</a>
									</span>
								</h4>
							</td>
							<td style="font-weight:bold ; vertical-align:top">
								<table border="0">
									{% set i = 0 %}
									{% if scheduleSieges[0] %}
										{% for scheduleSiege in scheduleSieges %}
											<tr>
												<td>
													{% if scheduleSiege.siege is null %}
														XXX
													{% else %}
														{{ scheduleSiege.siege.name }}
													{% endif %}
													-
												</td>
												<td>
													{{ scheduleSiege.passager.lastname }}
													{{ scheduleSiege.passager.firstname }}
												</td>
											</tr>
										{% endfor %}
									{% else %}
										{% for passager in passagers %}
											<tr>
												<td>
													XXX -
												</td>
												<td>
													{{ passager.lastname }}
													{{ passager.firstname }}
												</td>
											</tr>
										{% endfor %}
									{% endif %}
								</table>
							</td>
						</tr>
						<tr>
							<td>
								{{ booking.schedule.company }}
								<div>
									{% 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>
							</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='{{ path('app_booking_showqrcode', { 'id': booking.numdossier }) }}'></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.payment  %}
							<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>
					{% if booking.facture %}
						<a href="{{ path('app_booking_showfacture', {'id': booking.numdossier}) }}">Imprimer la facture</a>
					{% endif %}
					<br>
					{% if booking.payment %}
						<a href="{{ path('app_booking_edit', {'id': booking.numdossier}) }}">Modifier</a>
						(une seule fois)<br>
					{% else %}
						<h1>
							<strong>NON PAYEE</strong>
						</h1>
					{% endif %}
					<div class=" input-group mb-3">
						<a href="{{ referer }}">Retour</a>
					</div>
				</div>
				<div class="col-12 col-md-5">
					<div class="table-section">
						<div class="bus">
							{% for siege in tabSieges %}
								{% set disabled = 'disabled' %}
								{% set buttonTitle = '' %}
								{% set spanContent = '' %}
								{% set buttonOnclick = 'changerSiege(' ~ siege.id ~ ')' %}

								{% if siege.status.value == 'emp' %}
									{% set disabled = '' %}
								{% elseif siege.status.value == 'res' %}
									{% if siege.passager %}
										{% set disabled = '' %}
										{% set buttonTitle = siege.passager.lastname ~ ' ' ~ siege.passager.firstname %}
										{% set spanContent = '\n' ~ siege.passager.lastname|slice(0,1) ~ siege.passager.firstname|slice(0,1) %}
									{% endif %}
								{% elseif siege.status.value == 'boa' %}
									{% if siege.passager %}
										{% set disabled = '' %}
										{% set buttonTitle = siege.passager.lastname ~ ' ' ~ siege.passager.firstname %}
										{% set spanContent = '\n' ~ siege.passager.lastname|slice(0,1) ~ siege.passager.firstname|slice(0,1) %}
									{% endif %}
								{% else %}
									{% set buttonOnclick = '' %}
								{% endif %}
								<div>
									<button value="{{ siege.id }}" {{disabled}} class="{{siege.class}}" id="siege{{ siege.id }}" title="{{ buttonTitle }}" onclick="{{buttonOnclick}}">
										<b>{{siege.name}}
											<span>{{spanContent}}</span>
										</b>
									</button>
								</div>
							{% endfor %}
							{% set capacity = schedule.bus.capacity %}
						</div>
					</div>
				</div>
				<div class="col-12 col-md-1">
					<div class="row">
						<button style="cursor: default;" class="seat empty">Libre</button>
						<button style="cursor: default;" class="seat occupied">Occupé</button>
						<button style="cursor: default;" class="seat selected">Mes sièges</button>
						<button style="cursor: default;" class="seat locked">Bloqué</button>
						<button style="cursor: default;" class="seat notcreated">N/A</button>
					</div>
				</div>
			</div>
		</div>
		<input type="hidden" id="schedule" data-id="{{ schedule.id }}" value={{ schedule.id }}>
	</section>
{% endblock %}
{% block javascript %}
	{{ parent() }}
	<script src="{{asset('assets/js/sieges.js')}}"></script>
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
{% endblock %}
{% block footer %}
	{{ include('footer.html.twig') }}
{% endblock %}