<!DOCTYPE html>
<html>
<head>
	<title>Notre parc</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;

		}

		.cars h3{
			font-size: 16pt;
		}

		.cars h3 small{
			font-weight: normal;
		}

		.cars .details{
			font-size: 11pt;
		}

		.cars .details img{
			width: 16px;
		}

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

		.sidebar{
			position: relative;

		}

		.filters {
			height: calc(100% - 568px);
		}

		.filters .sticky{
			position: sticky;
  			top: 10px;
		}

		.filters .title{
			background-color: rgba(0, 0, 0, 0.1);

			border:0.5px solid rgba(0, 0, 0, 0.3);
			padding: 10px;
		}

		.filters .filter{
			border:0.5px solid rgba(0, 0, 0, 0.3);
			padding: 10px;
		}

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

	<section class="container steps my-5">
		<div>
			<ol>
				<li class="text-primary">Résultat de Rent For You</li>
				<li>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-12 text-end mb-5">
				<select class="btn btn-outline-dark btn-filters py-3">
					<option value="0">Prix Croissant</option>
				</select>
			</div>

			<div class="col-lg-8 cars">
				

				<?php for ($i=0; $i < 10; $i++) { ?>
				<div class="card p-3 mb-5">
					<div class="row">
						<div class="col-lg-3 mt-4">
							<img src="assets/img/car.png" class="w-100">
						</div>
						<div class="col-lg-6 my-3">

							<div class="row">

								<div class="col-12">
									<a href="#" data-bs-toggle="modal" data-bs-target="#conditionsModal" class="text-primary float-end h6">Conditions</a>
									<h3>Dacia-Logan <small>ou similaire</small></h3>
								</div>
							</div>

								
							<div class="row details">
								<div class="col-lg-6 my-2">
									<img src="assets/img/car-details/car-door.png" width="16px">
									4 Portes
								</div>
								<div class="col-lg-6 my-2">
									<img src="assets/img/car-details/suitcase-travel.png" width="16px">
									4 Bagages
								</div>
								<div class="col-lg-6 my-2">
									<img src="assets/img/car-details/gear-box.png" width="16px">
									Manuelle
								</div>
								<div class="col-lg-6 my-2">
									<img src="assets/img/car-details/fuel.png" width="16px">
									Essence
								</div>
								<div class="col-lg-6 my-2">
									<img src="assets/img/car-details/ac.png" width="16px">
									Oui
								</div>

							</div>
						</div>
						<div class="col-lg-3 text-center border-start">
							
							<p class="mt-5">
								À partir de <br>
								30.00€ / jour
							</p>
							<a href="options" class="btn btn-sm btn-main btn-primary ">Réserver</a>
						</div>
						
					</div>
				</div>
				<?php } ?>
			</div>



			<!-- Modal -->
			<div class="modal fade" id="conditionsModal" tabindex="-1" aria-labelledby="conditionsModalLabel" aria-hidden="true">
			  <div class="modal-dialog modal-lg">
			    <div class="modal-content">
			      <div class="modal-header">
			        <h1 class="modal-title fs-5" id="conditionsModalLabel">Conditions générales</h1>
			        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
			      </div>
			      <div class="modal-body mb-5">
			      	
					<div class="accordion faq" id="accordionFlushExample">
					  <div class="accordion-item">
					    <h2 class="accordion-header">
					      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
					        Le conducteur
					      </button>
					    </h2>
					    <div id="flush-collapseOne" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
					      <div class="accordion-body">Lorem ipsum dolor sit amet, consetur dipiscing elitunc vulputat eolor siamLorem ipsum dolor sit amet, consetur dipiscing elitunc vulputat eolor siamet, consetur donset.et, consetur donset.</div>
					    </div>
					  </div>
					  <div class="accordion-item">
					    <h2 class="accordion-header">
					      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
					        Période de location
					      </button>
					    </h2>
					    <div id="flush-collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
					      <div class="accordion-body">Lorem ipsum dolor sit amet, consetur dipiscing elitunc vulputat eolor siamLorem ipsum dolor sit amet, consetur dipiscing elitunc vulputat eolor siamet, consetur donset.et, consetur donset.</div>
					    </div>
					  </div>

					  <div class="accordion-item">
					    <h2 class="accordion-header">
					      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
					        Collecte / Retour
					      </button>
					    </h2>
					    <div id="flush-collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
					      <div class="accordion-body">Lorem ipsum dolor sit amet, consetur dipiscing elitunc vulputat eolor siamLorem ipsum dolor sit amet, consetur dipiscing elitunc vulputat eolor siamet, consetur donset.et, consetur donset.</div>
					    </div>
					  </div>

					  <div class="accordion-item">
					    <h2 class="accordion-header">
					      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapse4" aria-expanded="false" aria-controls="flush-collapse4">
					        Carburant
					      </button>
					    </h2>
					    <div id="flush-collapse4" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
					      <div class="accordion-body">Lorem ipsum dolor sit amet, consetur dipiscing elitunc vulputat eolor siamLorem ipsum dolor sit amet, consetur dipiscing elitunc vulputat eolor siamet, consetur donset.et, consetur donset.</div>
					    </div>
					  </div>

					  <div class="accordion-item">
					    <h2 class="accordion-header">
					      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapse5" aria-expanded="false" aria-controls="flush-collapse5">
					        Paiement / Dépôt
					      </button>
					    </h2>
					    <div id="flush-collapse5" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
					      <div class="accordion-body">Lorem ipsum dolor sit amet, consetur dipiscing elitunc vulputat eolor siamLorem ipsum dolor sit amet, consetur dipiscing elitunc vulputat eolor siamet, consetur donset.et, consetur donset.</div>
					    </div>
					  </div>

					  <div class="accordion-item">
					    <h2 class="accordion-header">
					      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapse6" aria-expanded="false" aria-controls="flush-collapse6">
					        Paiement en ligne
					      </button>
					    </h2>
					    <div id="flush-collapse6" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
					      <div class="accordion-body">Lorem ipsum dolor sit amet, consetur dipiscing elitunc vulputat eolor siamLorem ipsum dolor sit amet, consetur dipiscing elitunc vulputat eolor siamet, consetur donset.et, consetur donset.</div>
					    </div>
					  </div>

					  <div class="accordion-item">
					    <h2 class="accordion-header">
					      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapse7" aria-expanded="false" aria-controls="flush-collapse7">
					        Preuve de paiement
					      </button>
					    </h2>
					    <div id="flush-collapse7" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
					      <div class="accordion-body">Lorem ipsum dolor sit amet, consetur dipiscing elitunc vulputat eolor siamLorem ipsum dolor sit amet, consetur dipiscing elitunc vulputat eolor siamet, consetur donset.et, consetur donset.</div>
					    </div>
					  </div>

					  <div class="accordion-item">
					    <h2 class="accordion-header">
					      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapse8" aria-expanded="false" aria-controls="flush-collapse8">
					        Assurance
					      </button>
					    </h2>
					    <div id="flush-collapse8" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
					      <div class="accordion-body">Lorem ipsum dolor sit amet, consetur dipiscing elitunc vulputat eolor siamLorem ipsum dolor sit amet, consetur dipiscing elitunc vulputat eolor siamet, consetur donset.et, consetur donset.</div>
					    </div>
					  </div>

					  <div class="accordion-item">
					    <h2 class="accordion-header">
					      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapse9" aria-expanded="false" aria-controls="flush-collapse9">
					        Compétence
					      </button>
					    </h2>
					    <div id="flush-collapse9" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
					      <div class="accordion-body">Lorem ipsum dolor sit amet, consetur dipiscing elitunc vulputat eolor siamLorem ipsum dolor sit amet, consetur dipiscing elitunc vulputat eolor siamet, consetur donset.et, consetur donset.</div>
					    </div>
					  </div>

					  <div class="accordion-item">
					    <h2 class="accordion-header">
					      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapse10" aria-expanded="false" aria-controls="flush-collapse10">
					        Remboursement
					      </button>
					    </h2>
					    <div id="flush-collapse10" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
					      <div class="accordion-body">Lorem ipsum dolor sit amet, consetur dipiscing elitunc vulputat eolor siamLorem ipsum dolor sit amet, consetur dipiscing elitunc vulputat eolor siamet, consetur donset.et, consetur donset.</div>
					    </div>
					  </div>

					  <div class="accordion-item">
					    <h2 class="accordion-header">
					      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapse11" aria-expanded="false" aria-controls="flush-collapse11">
					        Documents requis
					      </button>
					    </h2>
					    <div id="flush-collapse11" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
					      <div class="accordion-body">Lorem ipsum dolor sit amet, consetur dipiscing elitunc vulputat eolor siamLorem ipsum dolor sit amet, consetur dipiscing elitunc vulputat eolor siamet, consetur donset.et, consetur donset.</div>
					    </div>
					  </div>

					</div>
			      </div>
			    </div>
			  </div>	
			</div>


			<div class="col-lg-4 sidebar">
				<div class="info mb-5">
					<div class="border rounded p-4">
						<h3 class="mb-3">Informations de reservation</h3>
						<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)">

						<button type="button" class="btn btn-primary btn-main w-100 mt-3" data-bs-toggle="modal" data-bs-target="#editSearchModal">Changer la recherche</button>
					</div>
				</div>

				<!-- Modal -->
				<div class="modal fade" id="editSearchModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
				  <div class="modal-dialog">
				    <div class="modal-content">
				      <div class="modal-header">
				        <h1 class="modal-title fs-5" id="exampleModalLabel">Mettre à jour la recherche</h1>
				        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
				      </div>
				      <div class="modal-body">
				      	<div class="d-flex align-items-center">
				  			<div class="form-wrapper bg-primary m-3">
					  			<div class="row">
					  				<div class="col-lg-12">
					  					<h3 class="text-light mt-0 mb-3 h5">Informations de réservation</h3>
					  				</div>
					  				<div class="col-lg-12">
					  					<select class="form-control">
					  						<option value="0">Sélectionnez votre Lieu de retrait</option>
					  					</select>
					  					<select class="form-control">
					  						<option value="0">Sélectionnez votre Lieu de retour</option>
					  					</select>
					  				</div>
					  				<div class="col-lg-6">
					  					<select class="form-control">
					  						<option value="0">Date de départ</option>
					  					</select>
					  				</div>
					  				<div class="col-lg-6">
					  					<select class="form-control">
					  						<option value="0">Heure de départ</option>
					  					</select>
					  				</div>
					  				<div class="col-lg-6">
					  					<select class="form-control">
					  						<option value="0">Date de retour</option>
					  					</select>
					  				</div>
					  				<div class="col-lg-6">
					  					<select class="form-control">
					  						<option value="0">Heure de retour</option>
					  					</select>
					  				</div>
					  				<div class="col-lg-12">
					  					<button class="btn btn-main btn-dark w-100 mt-3">Mettre à jour</button>
					  				</div>
					  			</div>
				  			</div>
		  				</div>
				      </div>
				    </div>
				  </div>
				</div>


				<div class="filters">
					<div class="sticky border rounded p-4">
						<h3 class="mb-3">Filters</h3>
						
						<div class="row border mb-4">
							<div class="col-lg-12 title">Categories de vehicules</div>

							<div class="col-lg-6 filter">
								<input type="checkbox" id="f1"> 
								<label for="f1">Petit</label>
							</div>
							<div class="col-lg-6 filter">
								<input type="checkbox" id="f2"> 
								<label for="f2">Moyen</label>
							</div>
							<div class="col-lg-6 filter">
								<input type="checkbox" id="f3"> 
								<label for="f3">Grand</label>
							</div>
							<div class="col-lg-6 filter">
								<input type="checkbox" id="f4"> 
								<label for="f4">VUS</label>
							</div>
							<div class="col-lg-6 filter">
								<input type="checkbox" id="f5"> 
								<label for="f5">VMP</label>
							</div>
							<div class="col-lg-6 filter">
								<input type="checkbox" id="f6"> 
								<label for="f6">Premium</label>
							</div>

						</div>
						
						<div class="row border mb-4">
							<div class="col-lg-12 title">Boite de vitesses</div>

							<div class="col-lg-6 filter">
								<input type="checkbox" id="f7"> 
								<label for="f7">Manuel</label>
							</div>
							<div class="col-lg-6 filter">
								<input type="checkbox" id="f8"> 
								<label for="f8">Automatique</label>
							</div>
						</div>
						
						<div class="row border mb-4">
							<div class="col-lg-12 title">Type de carburant</div>

							<div class="col-lg-6 filter">
								<input type="checkbox" id="f9"> 
								<label for="f9">Diesel</label>
							</div>
							<div class="col-lg-6 filter">
								<input type="checkbox" id="f10"> 
								<label for="f10">Essance</label>
							</div>
							<div class="col-lg-6 filter">
								<input type="checkbox" id="f11"> 
								<label for="f11">Hybride</label>
							</div>
							<div class="col-lg-6 filter">
								<input type="checkbox" id="f12"> 
								<label for="f12">Electrique</label>
							</div>

						</div>
						

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


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

</body>
</html>