{% extends 'base.html.twig' %}

{% block title %}Nos véhicules d'occasion
{% endblock %}

{% block body %}
	<h1 class="text-center">Nos véhicules d'occasion</h1>


	<div class="container">
		<hr class="mt-3 mb-3">
		<form id="filter-form" method="get" action="{{ path('app_vehicle_index') }}">
			<div class="row">
				<div class="col-sm-3">
					<h3>Filtrer par catégories :</h3>
					<select class="form-select" name="category">
						<option value="">Toutes les catégories</option>
						{% for category in categories %}
							{% if category is not null %}
								<option value="{{ category.name }}" {% if app.request.query.get('category') == category.name %} selected {% endif %}>{{ category.name }}</option>
							{% endif %}
						{% endfor %}
					</select>
				</div>
				<div class="col-sm-3">
					<h3>Filtrer par prix :</h3>
					<input type="range" class="form-range" id="price-slider" name="price" min="0" max="100000" step="1000" value="{{ app.request.query.get('price')|default(100000) }}">
					<div class="price-labels">
						<span class="min-price">0 €</span>
						<span class="max-price">100000 €</span>
					</div>
				</div>

				<div class="col-sm-3">
					<h3>Filtrer par année :</h3>
					<select class="form-select" id="time-select" name="year">
						<option value="">Toutes les années</option>
						{% for year in range(currentYear, 1960, -1) %}
							<option value="{{ year }}" {% if app.request.query.get('year') == year %} selected {% endif %}>{{ year }}</option>

						{% endfor %}

					</select>
				</div>

				<div class="col-sm-3">
					<h3>Filtrer par kilométrage :</h3>
					<input type="range" id="km-slider" class="form-range" name="kilometer" placeholder="Km max" min="0" max="400000" step="1000" value="{{ app.request.query.get('kilometer')|default(400000) }}">
					<div class="km-labels">
						<span class="min-km">de 0 km</span>
						<span class="max-km">à 400000 km</span>
					</div>
				</div>

			</div>
			<div class="row mt-3 justify-content-center">
				<div class="col-sm-12 text-center">
					<button type="submit" name="remove" class="btn btn2 text-center">Réinitialiser</button>
				</div>
			</div>
		</form>
	</div>


	<div id="vehicles-container">
		<hr class="mt-3 mb-3">
		{% set hasVehicles = false %}
		{% if vehicles is not empty %}

			{% if app.request.query.get('category') is not empty %}
				{% set selectedCategory = categories|filter(category => category.name == app.request.query.get('category'))|first %}
				{% if selectedCategory is not null %}
					<div class="container category-container" id="category-{{ selectedCategory.getId }}">
						<div class="row">
							<div class="col-12">
								<h2 class="category-title">{{ selectedCategory.getName }}</h2>
							</div>
						</div>
						<div class="row">
							{% set vehicles = selectedCategory.getVehicleType %}
							{% if vehicles|length > 0 %}
								{% set hasVehicles = true %}
								{% set sortedVehicles = vehicles|sort((a, b) => a.getYear().diff(b.getYear()).invert ? -1 : 1 or b.getPrice() - a.getPrice()) %}
								{% for vehicle in sortedVehicles %}
									<div class="col-lg-4 col-md-6 mb-4 vehicle">
										<div class="card h-100">
											<img class="card-img-top" src="{{ vehicle.image }}" alt="{{ vehicle.brand }}" class="zoom-card-img card-img-top img-fluid">
											<div class="card-body">
												<h4 class="card-title">{{ vehicle.brand }}</h4>
												<p class="card-text">{{ vehicle.description }}</p>
											</div>
											<div class="card-footer">

												<small class="text-muted">{{ vehicle.price }}€</small>
												<a href="{{ path('app_vehicle_detail', {'slug': vehicle.slug }) }}" class="btn btn2">Détail véhicule</a>
											</div>
										</div>
									</div>
								{% endfor %}
							{% endif %}
						</div>
					</div>
				{% endif %}

			{% endif %}
		{% endif %}

		{% if app.request.query.get('category') is not empty %}
			{% set selectedCategory = categories|filter(category => category.name == app.request.query.get('category'))|first %}
			{% if selectedCategory is not null %}
				<div class="container category-container" id="category-{{ selectedCategory.getId }}">
					<div class="row">
						<div class="col-12">
							<h2 class="category-title">{{ selectedCategory.getName }}</h2>
						</div>
					</div>
					<div class="row">
						{% set vehicles = selectedCategory.getVehicleType %}
						{% if vehicles|length > 0 %}
							{% set sortedVehicles = vehicles|sort((a, b) => a.getYear().diff(b.getYear()).invert ? -1 : 1 or b.getPrice() - a.getPrice()) %}
							{% for vehicle in sortedVehicles %}
								<div class="col-lg-4 col-md-6 mb-4 vehicle">
									<div class="card h-100">
										<img class="card-img-top" src="{{ vehicle.image }}" alt="{{ vehicle.brand }}" class="zoom-card-img card-img-top img-fluid">
										<div class="card-body">
											<h4 class="card-title">{{ vehicle.brand }}</h4>
											<p class="card-text">{{ vehicle.description }}</p>
										</div>
										<div class="card-footer">
											<small class="text-muted">{{ vehicle.price }}€</small>
											<a href="{{ path('app_vehicle_detail', {'slug': vehicle.slug }) }}" class="btn btn2">Détail véhicule</a>
										</div>
									</div>
								</div>
							{% endfor %}
						{% endif %}
					</div>
				</div>
			{% endif %}
		{% else %}
			{% for category in categories %}
				{% set vehicles = category.getVehicleType %}
				{% if vehicles|length > 0 %}
					<div class="container category-container" id="category-{{ category.getId }}">
						<div class="row">
							<div class="col-12">
								<h2 class="category-title">{{ category.getName }}</h2>
							</div>
						</div>
						<div class="row">
							{% set sortedVehicles = vehicles|sort((a, b) => a.getYear().diff(b.getYear()).invert ? -1 : 1 or b.getPrice() - a.getPrice()) %}
							{% for vehicle in sortedVehicles %}
								<div class="col-lg-4 col-md-6 mb-4 vehicle">
									<div class="card h-100">

										{% if vehicle.images|length > 0 %}
											<img src="{{ asset('assets/uploads/vehicle/mini/300x300-' ~ vehicle.images[0].name ) }}" alt="{{ vehicle.brand }}" class="card-img-top img-fluid">
											
										{% elseif vehicle.image %}
											<img src="{{ vehicle.image }}" alt="{{ vehicle.brand }}" class="card-img-top img-fluid">
										{% else %}
											<img src="{{ asset('assets/image/Garage.png') }}" width="300" height="300" alt="Image par défaut" class="card-img-top img-fluid">
										{% endif %}

										<div class="card-body">
											<h4 class="card-title">{{ vehicle.brand }}</h4>
											<p class="card-text">{{ vehicle.kilometer }}
												km</p>
										</div>
										<div class="card-footer">
											<p>Mise en circulation</p>
											<h5>{{ vehicle.year.format('d-m-Y') }}</h5>
											<p>Prix :
											</p>
											<small class="text-muted">{{ vehicle.price }}€</small>
											<a href="{{ path('app_vehicle_detail', {"slug": vehicle.slug }) }}" class="btn btn2">Détail véhicule</a>

											<a href="{{ path('app_contact_vehicle', {'id': vehicle.id}) }}" class="btn btn mt-3">Contact</a>


										</div>

									</div>
								</div>

							{% endfor %}
						</div>
					</div>
				{% endif %}
			{% endfor %}
		{% endif %}

		{{ include('_partials/_footer.html.twig', { 'business_hours': business_hours }) }}

	{% endblock %}


	{% block javascripts %}
		<script src="{{ asset('assets/js/zoom.js') }}?v={{ random() }}" defer></script>
		<script src="{{ asset('assets/js/card.js') }}?v={{ random() }}" defer></script>
	{% endblock %}