<!DOCTYPE html>
<html>
<head>
	<title>Confirmation</title>
	<?php include('../sections/head.php'); ?>

</head>
<body>

	<?php include('../sections/header.php'); ?>

	<style type="text/css">
		.steps ol{
			display: flex;
			justify-content: space-between;

		}

		.steps ol:after{
			content: '';
			position: absolute;

		}

		.steps li{
			font-family: "Teko", sans-serif;
			font-weight: 400;
			font-size: 25pt;

		}

		.teko-400{
			font-family: "Teko", sans-serif;
			font-weight: 400;
			font-size: 25pt;
		}

		.card h3{
			font-size: 14pt;
			margin-bottom: 20px;
		}





		.bg-primary{
			background-color: var(--main-color)!important;
		}

		.overflowhidden{
			overflow:hidden;
		}






		.table td,.table th{
			padding: 30px;
		}















		.info .form-control{
			margin-bottom: 10px ;
			background-color: #eee;
			padding:16px 10px;
		}



		.contact-form {
			background-color: #eee;
			padding: 60px;
		}

		.contact-form .form-control{
			border:2px solid #aaa;
			padding: 16px 10px;
			margin-bottom: 20px;
		}

		.lbl-accept{
			color:#343434;
			opacity: 0.5;
		}

		.text-dark{
			color:#343434;
		}

		.lbl-accept a,.text-dark a{
			color:#343434;
			text-decoration: underline;
		}


	</style>

	<section class="container steps my-5">
		<div>
			<ol>
				<li>Résultat de Rent For You</li>
				<li>Options Rent For You</li>
				<li>Vos coordonnées</li>
				<li class="text-primary">Confirmation</li>
			</ol>
		</div>
	</section>

	<section class="container">
		<div class="row">


			<div class="col-lg-12 border rounded p-5 contact-form">

				<div class="alert alert-warning bg-primary text-light h5 p-5">Merci pour votre réservation avec Yacout Tours. Veuillez noter que votre réservation a été reçue mais n'est pas active jusqu'à la validation finale. Vous recevrez une confirmation une fois le processus de validation terminé.</div>

				<h2 class="teko-400 m-5">Réservation : ID: #414/2025</h2>
				
				<div class="row">
					<div class="col-lg-8">
						<div class="bg-white rounded p-5">
							<div class="row">
								<div class="col-lg-6">
									<p>À :Rent for you<br>
									Location Voiture Marrakech<br>	
									Date d'émission :2025-04-01</p>

									<a href="#" class="text-dark"><i class="fa fa-phone text-primary"></i> 0900098876</a>
								</div>
								<div class="col-lg-6">
									ID :#414/2025 <br>	
									Statut :<b>Règlement à la livraison de la voiture</b>
								</div>
							</div>
						</div>
					</div>
					<div class="col-lg-4 text-center">
						<img src="assets/img/car.png" class="w-75">
					</div>
				</div>

				<table class="table rounded overflowhidden mt-5">
					<thead>
						<tr>
							<th class="bg-primary text-light">#</th>
							<th class="bg-primary text-light">Description</th>
							<th class="bg-primary text-light">Qté</th>
							<th class="bg-primary text-light">Prix unitaire</th>
							<th class="bg-primary text-light">Montant</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>1</td>
							<td>
								<b>LOCATION DE VOITURE</b> (Logan ou similaire)<br>
								Départ : Marrakech ville | Retour : Marrakech ville <br>	
								De : 2025-04-02 10:00 | À : 2025-04-04 10:00 <br>
								Lieu de livraison : Marrakech | Heure de livraison : 18:34<br>
								Lieu de retour : Marrakech | Heure de retour : 18:35<br>
								<b>Franchise</b>
							</td>
							<td>2 jours</td>
							<td>30.00€</td>
							<td>60.00€</td>
						</tr>
						<tr>
							<td>2</td>
							<td>Roof rack (free)</td>
							<td>2 jours</td>
							<td>0.00€</td>
							<td>0.00€</td>
						</tr>
						<tr>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td class="h5">60.00€</td>
						</tr>
					</tbody>
					
				</table>

			</div>



			<div class="col-lg-12 mb-5"></div>
		</div>
	</section>


	<?php include('../sections/footer.php'); ?>

</body>
</html>