<!DOCTYPE html>
<html>
<head>
	<title>Options</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;
		}


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


	</style>

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

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


			<div class="col-lg-8 border rounded p-5">
				<h2 class="teko-400">Veuillez sélectionner vos options</h2>
				
				<div class="card p-3 mt-5">
					<div class="row">
						<div class="col-lg-3 mt-4 text-center">
							<img src="assets/img/booking/car.png" width="80px" class="text-center">
						</div>
						<div class="col-lg-6 my-3">
							<h3>Barre de toit (gratuites)</h3>

							<a href="#" class="btn btn-main btn-light">
								Plus d’informations 
								<i class="fa fa-chevron-down ms-3"></i>
							</a>
						</div>
						<div class="col-lg-3 text-center">
							<a href="#" class="btn btn-sm btn-main btn-primary mt-4">Ajouter</a>
						</div>
					</div>
				</div>

				<div class="card p-3 mt-5">
					<div class="row">
						<div class="col-lg-3 mt-4 text-center">
							<img src="assets/img/booking/card-check.png" width="80px" class="text-center">
						</div>
						<div class="col-lg-6 my-3">
							<h3>Conducteur supplémentaires (gratuites)</h3>

							<a href="#" class="btn btn-main btn-light">
								Plus d’informations 
								<i class="fa fa-chevron-down ms-3"></i>
							</a>
						</div>
						<div class="col-lg-3 text-center">
							<a href="#" class="btn btn-sm btn-main btn-primary mt-4">Ajouter</a>
						</div>
					</div>
				</div>

				<div class="card p-3 mt-5">
					<div class="row">
						<div class="col-lg-3 mt-4 text-center">
							<img src="assets/img/booking/chair.png" height="80px" class="text-center">
						</div>
						<div class="col-lg-6 my-3">
							<h3>Siége enfant (gratuites)</h3>

							<a href="#" class="btn btn-main btn-light">
								Plus d’informations 
								<i class="fa fa-chevron-down ms-3"></i>
							</a>
						</div>
						<div class="col-lg-3 text-center">
							<a href="#" class="btn btn-sm btn-main btn-primary mt-4">Ajouter</a>
						</div>
					</div>
				</div>

			</div>





			<div class="col-lg-4 sidebar">
				<div class="info mb-5">
					<div class="border rounded p-4">
						<h3 class="mt-3 text-center teko-400">Détails de votre réservation</h3>

						<img src="assets/img/car.png" class="w-100">
						<h4 class="text-center mb-4">Dacia-Logan <small>ou similaire</small></h4>

						<input type="text" name="" class="form-control" value="Lieu de récupération: Marrakech ville">

						<input type="text" name="" class="form-control" value="Lieu de dépôt : Marrakech ville">
						<input type="text" name="" class="form-control" value="Date de retrait : 2025-03-28 10:00">
						<input type="text" name="" class="form-control" value="Date de retour : 2025-03-30 10:00">
						<input type="text" name="" class="form-control" value="Nombre de jours : 2 jour(s)">
						<input type="text" name="" class="form-control" value="Prix de la location de voiture : 60.00€">

						<p class="text-center text-primary mt-3 h5">Loyer total : 60.00€</p>

						<a href="coordonnees" class="btn btn-primary btn-main w-100 mt-3">Réserver</a>
					</div>
				</div>
			</div>
			<div class="col-lg-12 mb-5"></div>
		</div>
	</section>


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

</body>
</html>