{% extends "@EasyAdmin/page/content.html.twig" %}
{% set titre ='Planning des voyages' %}
{% block content_title %}
	{{ titre }}
{% endblock %}
{% block header %}
	{{ parent() }}
	<link id="theme-style" rel="stylesheet" href="{{asset('assets/css/sieges.css')}}">
	<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 */
		}

		table {
			width: 100%; /* Le tableau prend toute la largeur de sa section */
			border-collapse: collapse; /* Supprime les espaces entre les bordures */
		}

		th,
		td {
			border: 1px solid #ccc; /* Bordures grises pour les cellules du tableau */
			padding: 8px; /* Padding pour les cellules */
			text-align: left; /* Alignement du texte à gauche */
		}

		th {
			background-color: #f4f4f4; /* Couleur de fond pour les en-têtes de tableau */
		}
	</style>
{% endblock %}
{% block main %}
	<div class="container">
		<div class="row">
			<div class="col-12 col-md-6">
				<div class="data-section">
					{% block detail_fields %}
						Trajet
						<table class="table">
							<tbody>
								<tr>
									<th>Trajet</th>
									<td>{{ schedule }}</td>
								</tr>
								<tr>
									<th>Bus</th>
									<td>{{ schedule.bus.busPlateNumber }}</td>
								</tr>
								<tr>
									<th>Date de départ</th>
									<td>{{ schedule.scheduleDate|format_datetime(pattern="EEEE, dd/MM/Y", locale='fr_FR') }}</td>
								</tr>
								<tr>
									<th>Heure de départ</th>
									<td>{{ schedule.departureTime ? schedule.departureTime|date('H:i') : '' }}</td>
								</tr>
								<tr>
									<th>Heure d'arrivée</th>
									<td>{{ schedule.estimatedArrivalTime ? schedule.estimatedArrivalTime|date('H:i') : '' }}</td>
								</tr>
								<tr>
									<th>Tarif</th>
									<td>{{ schedule.typetarif }}</td>
								</tr>
								<tr>
									<th>Places disponibles</th>
									<td>{{ schedule.seats }}</td>
								</tr>
								<tr>
									<th>Remarque</th>
									<td>{{ schedule.remarks }}</td>
								</tr>
							</tbody>
						</table>
						<a href="{{ ea_url() .setController('App\\Controller\\Admin\\ScheduleCrudController') .setAction('index') }}">
							Retour à la liste
						</a>
					{% endblock detail_fields %}
				</div>
			</div>

			<div class="col-12 col-md-6">
				<div class="table-section">
					<div class="bus">
						{% set capacity = schedule.bus.capacity %}
						{# Création des sièges face à l'avant #}
						{% set i = 1 %}
						{% for siege in tabSieges %}
							<div data-seat-number="{{ siege.id }} : {{ siege.passager_nom }} {{ siege.passager_prenom }}">
								<button class="{{siege.class}}" id="siege{{siege.id}}" ondblclick="bloqueSiege({{ siege.id }})" value="{{ siege.id }}" title='{{ siege.id }} : {{ siege.passager_nom }} {{ siege.passager_prenom }}'>
									{{ siege.name }}<br>{{ siege.passager_nom|slice(0,1) }}{{ siege.passager_prenom|slice(0,1) }}
								</button>
							</div>
							{% set i = i+1 %}
						{% endfor %}
					</div>
					<input type="hidden" id="schedule" data-id="{{ schedule.id }}" value={{ schedule.id }}>
				</div>
			</div>
		</div>
	</div>
{% endblock %}
{% block head_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://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
{% endblock %}