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

{% block title %}
	Consultrer vos commandes
{% endblock %}

{% block headerCompte %}
	gColor
{% endblock %}

{% block body %}
	<div class="header-image w-100-p h-100-vh dp-f j-c-c a-i-c p-f z-i--1">
		<img class="p-a max-h-65-p max-w-90-p b-60 op-3" src="/assets/logo-sf2.webp" alt="Header image">
	</div>
	<div class="pageContainer l-h-1-5">
		<div class="p-r dp-f-c bg-va-transparent pad-30 gp-30 b-s-b-b b-r-10 ovf-h">
			<div class="contact-header p-a t-0 l-0 w-100-p h-200 dp-f-c j-c-c a-i-c pad-10 gBgColor b-s-b-b">
				<div class="dp-f-c gp-10 b-r-5 dp-f-c j-c-c a-i-c gBgColor b-s-b-b w-100-p h-100-p pad-15 b-s-b-b" style="border: 2px solid var(--dom-cwhite);">
					<h1 class="cwColor ft-s-45 ft-s-30-r600 t-a-c">
						Vos commandes
					</h1>
					{% if commandes is empty %}
						<p class="txtGColor ft-f-chomsky t-a-c ft-s-16-r600" id="descPage">Aucune commande</p>
					{% elseif commandes|length == 1 %}
						<p class="txtGColor ft-f-chomsky t-a-c ft-s-16-r600" id="descPage">1 commande</p>
					{% else %}
						<p class="txtGColor ft-f-chomsky t-a-c ft-s-16-r600" id="descPage">{{ commandes|length }}
							commandes</p>
					{% endif %}
				</div>
			</div>
			{% if app.session.get('client_id') %}
				<div class="dp-f-c gp-30 ft-s-20 mar-t-220">
					<div class="dp-f-r j-c-c a-i-c w-s-nw f-d-c-r700">
						<a class="barre-menu-button barre-menu-button-left dg2BgColor" href="{{ path('app_compte') }}">
							Vos commandes
						</a>
						<a class="barre-menu-button" href="{{ path('app_information_compte') }}">
							Vos informations
						</a>
						<a class="barre-menu-button barre-menu-button-right" href="{{ path('app_client_logout') }}">
							Déconnexion
						</a>
					</div>
					{% if commandes is not empty %}
						<div class="dp-f-c gp-30 w-100-p">
							{% for commande in commandes %}
								<div class="dp-f-c gp-20" id="{{ commande.reference }}">
									<article class="dp-f-r gp-15 w-100-p f-d-c-r800 a-i-c-r800">
										<div class="dp-f-r j-c-s-b w-100-p f-d-c-r800">
											<div class="dp-f-c j-c-s-b a-i-e w-100-p gp-20">
												<div class="dp-f-r j-c-s-b w-100-p a-i-s f-d-c-r1000">
													<div class="dp-f-c gp-10">
														<p class="ft-s-25 ft-s-18-r1000 ft-s-16-r600">
															<b>
																Commande n°<span class="gColor">{{ commande.reference }}</span>
															</b>
														</p>
														{% if commande.livraison.typeLivraison.value is same as("livraison") %}
															<p class="ft-s-20 ft-s-18-r1000 ft-s-16-r600">
																<b>
																	Livré avec
																	<span class="gColor">{{ commande.livraison.libelle }}
																		:</span>
																</b>
															</p>
															<div class="dp-f-c">
																<p class="ft-s-20 ft-s-18-r1000 ft-s-16-r600">
																	<b>
																		Au nom de
																		<span class="gColor">{{ commande.client.nom }}
																			{{ commande.client.prenom }}</span>
																	</b>
																</p>
																<p class="ft-s-20 ft-s-18-r1000 ft-s-16-r600 mar-l-10">
																	<b>
																		{{ commande.adresse.libAdr }},
																		<br>
																		{{ commande.adresse.cp }},
																		{{ commande.adresse.ville }}
																	</b>
																</p>
																<p class="ft-s-20 ft-s-18-r1000 ft-s-16-r600 mar-l-10">
																	<b>Tel :
																	<span class="gColor">
																		{{ commande.adresse.numTel }}</span>
																	</b>
																</p>
															</div>
														{% else %}
															<div class="dp-f-c">
																<p class="ft-s-20 ft-s-18-r1000 ft-s-16-r600">
																	<b>
																		Retrait en
																		<span class="gColor">{{ commande.livraison.libelle }}</span>
																	</b>
																</p>
																<p class="ft-s-20 ft-s-18-r1000 ft-s-16-r600 mar-l-10">
																	<b>
																		26 Rue Saint-Dominique,
																		<br/>
																		63000, Clermont-Ferrand
																	</b>
																</p>
															</div>
															<div class="separator dgBgColor mar-y-10"></div>
															<p class="ft-s-20 ft-s-18-r1000 ft-s-16-r600">
																<b>
																	Au nom de
																	<span class="gColor">{{ commande.client.nom }}
																		{{ commande.client.prenom }}</span>
																		<br>
																	Tel :
																	<span class="gColor">{{ commande.client.numTel }}</span>
																</b>
															</p>
														{% endif %}
													</div>
													<div class="dp-f-c gp-10">
														<p class="ft-s-20 ft-s-18-r1000 ft-s-16-r600">
															<b>
																Passée le
																<span class="gColor">{{ commande.getCreatedAt()|date('d/m/Y') }}</span>
																à
																<span class="gColor">{{ commande.getCreatedAt()|date('H:i') }}</span>
															</b>
														</p>
														<div class="separator dgBgColor"></div>
														<p class="ft-s-20 ft-s-18-r1000 ft-s-16-r600 t-a-e">
															<b>
																Statut de la commande :<br>
																<span class="gColor">{{ commande.status.label() }}</span>
															</b>
														</p>
														<p class="ft-s-20 ft-s-18-r1000 ft-s-16-r600 t-a-e">
															<b>
																Numéro de suivi :<br>
																<span class="gColor">{{ commande.numSuiviColis }}</span>
															</b>
														</p>
													</div>
												</div>

												<section class="dp-f-c bg-va-transparent b-r-10 pad-20 b-s-b-b w-100-p mar-y-20">
													<div onclick="commanderProductArrowIcon('commande-product-arrow-{{ commande.reference }}', 'commande-product-container-{{ commande.reference }}')" class="dp-f-r j-c-s-b w-100-p a-i-c cur-p">
														<p>
															<b>
																Contenu de la commande
															</b>
														</p>
														<div id="commande-product-arrow-{{ commande.reference }}" class="dp-f" style="transition: all 0.3s ease-in-out;">
															<?xml version="1.0" encoding="UTF-8"?>
															<svg xmlns="http://www.w3.org/2000/svg" id="Outline" viewBox="0 0 24 24" class="h-20 dg2Color" fill="currentColor">
																<path d="M18.71,8.21a1,1,0,0,0-1.42,0l-4.58,4.58a1,1,0,0,1-1.42,0L6.71,8.21a1,1,0,0,0-1.42,0,1,1,0,0,0,0,1.41l4.59,4.59a3,3,0,0,0,4.24,0l4.59-4.59A1,1,0,0,0,18.71,8.21Z"/>
															</svg>
														</div>
													</div>
													<div id="commande-product-container-{{ commande.reference }}" class="commande-product-container pad-b-5 dp-f-c gp-15 max-h-0 ovf-h w-100-p b-s-b-b">
														<div class="separator gBgColor mar-t-20"></div>
														{% for product in commande.getProductCommandes() %}
															<div class="dp-f-c gp-20">
																<article class="dp-f-r gp-15 w-100-p f-d-c-r800 a-i-c-r800">
																	<img src="/assets/product/{{ product.getProduct.id }}-1.jpg" alt="Image du produit" class="max-h-120 b-r-5"></img>
																	<div class="dp-f-r j-c-s-b w-100-p f-d-c-r800">
																		<div class="dp-f-c gp-10 j-c-s-b">
																			<h3>{{ product.getProduct.getLibelle }}</h3>
																			<div class="dp-f-c gp-10">
																				<p class="ft-s-15">
																					<?xml version="1.0" encoding="UTF-8"?>
																					<svg xmlns="http://www.w3.org/2000/svg" id="arrow-circle-down" viewBox="0 0 24 24" width="15" height="15" class="gColor" fill="currentColor">
																						<path d="M16.332,18.253l-2.885,2.835c-.108.108-.255.245-.414.389V2.522c.16.146.308.283.42.4l2.879,2.828a1,1,0,1,0,1.4-1.426L14.861,1.5c-.2-.2-.513-.486-.84-.776a3,3,0,0,0-3.976,0c-.327.289-.637.573-.834.77L6.332,4.319a1,1,0,0,0,1.4,1.426l2.885-2.834c.108-.108.255-.244.414-.389V21.477c-.16-.146-.309-.284-.42-.4L7.734,18.253a1,1,0,0,0-1.4,1.427L9.205,22.5c.2.2.513.487.84.777a2.99,2.99,0,0,0,1.982.752h.012a2.992,2.992,0,0,0,1.983-.754c.326-.289.636-.572.833-.769l2.879-2.828a1,1,0,0,0-1.4-1.427Z"/>
																					</svg>
																					<b>Longueur de lame :</b>
																					12 cm
																				</p>

																				<p class="ft-s-15">
																					<?xml version="1.0" encoding="UTF-8"?>
																					<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 24 24" width="15" height="15" class="gColor" fill="currentColor">
																						<path d="m11.735,19.057c-2.182,2.191-5.677,3.795-9.178,3.934-.097.004-.686.007-1.29.008-.818.002-1.429-.769-1.229-1.562.28-1.108.854-2.131,1.674-2.954l7.297-7.196,5.233,5.247-2.507,2.523M22.941,2.065c-.688-.69-1.532-1.056-2.443-1.056h0c-.742,0-1.881.256-3.089,1.468l-6.61,6.528c-.393.388-.397,1.021-.009,1.414.041.042,6.108,5.928,6.108,5.928.278.279.646.423,1.02.423.258,0,.519-.069.753-.21.573-.346.826-1.004.628-1.638-.655-2.114-.746-3.265.889-4.9l2.754-2.827c1.409-1.415,1.409-3.716,0-5.13Zm-2.939,4.4c-.828,0-1.5-.672-1.5-1.5s.672-1.5,1.5-1.5,1.5.672,1.5,1.5-.672,1.5-1.5,1.5Z"/>
																					</svg>
																					<b>Modèle :</b>
																					{{ product.getProduct.getModel.getLibelle }}
																				</p>
																			</div>
																		</div>
																		<div class="dp-f-c j-c-s-b a-i-e">
																			<p class="t-a-e ft-s-40 ft-s-35-r600">
																				<b>
																					{{ product.getPrice }}
																					<span class="gColor">€</span>
																				</b>
																			</p>
																		</div>
																	</div>
																</article>
																<div class="separator dgBgColor"></div>
															</div>
														{% else %}
															<p class="ft-s-18 gColor">Le contenu de la commande n'a pas pu être récupéré</p>
														{% endfor %}
													</div>
												</section>
												<div class="dp-f-c gp-5">
													{% if commande.prixLivraison < 0.1 %}
														<p class="t-a-e ft-s-25 ft-s-18-r600">
															<b>
																Frais de livraison
																<span class="gColor">Gratuit</span>
															</b>
														</p>
													{% else %}
														<p class="t-a-e ft-s-25 ft-s-18-r600">
															<b>
																Frais de livraison :
																{{ commande.prixLivraison }}
																<span class="gColor">€</span>
															</b>
														</p>
													{% endif %}
													<div class="separator dgBgColor"></div>
													<p class="t-a-e ft-s-40 ft-s-35-r600">
														<b>
															{{ commande.total }}
															<span class="gColor">€</span>
														</b>
													</p>
												</div>
												<div class="dp-f-r gp-20 j-c-e w-100-p f-w-w">
													{# <a href="{{ path('app_dl_facture', { 'reference': commande.reference }) }}" class="button gBgColor ft-s-18">Télécharger la facture PDF</a> #}
													<a href="{{ path('app_facture', { 'reference': commande.reference }) }}" class="button dg2BgColor ft-s-18">Voir les détails de la commande</a>
												</div>
											</div>
										</div>
									</article>
									<div class="separator dgBgColor"></div>
								</div>
							{% endfor %}
						</div>
					{% else %}
						<div class="dp-f-c gp-30">
							<div class="separator gBgColor"></div>
							<p class="t-a-c ft-s-25 ft-s-20-r600">
								Vous n'avez pas encore de commande.
							</p>
							<div class="dp-f j-c-c w-100-p">
								<a href="{{ path('app_produits') }}" class="button ft-s-18">Voir les produits</a>
							</div>
						</div>
					{% endif %}
				</div>
			{% else %}
				<div class="dp-f-c gp-30 ft-s-20 mar-t-220">
					<div>
						<div class="little"></div>
						<h2 class="ft-s-25">Connectez vous pour avoir accès à vos commande et à votre espace client.</h2>
					</div>
					<div class="dp-f-r j-c-c a-i-c">
						<a class="barre-menu-button barre-menu-button-left" href="{{ path('app_client_login', {'route': 'commande'}) }}">
							Connexion
						</a>
						<a class="barre-menu-button barre-menu-button-right" href="{{ path('app_inscription') }}">
							Inscription
						</a>
					</div>
				</div>
			{% endif %}
		</div>
	</div>
	<script>
		function commanderProductArrowIcon(iconId, containerId) { // Get the container element
const container = document.getElementById(containerId);

// Toggle the rotation class on the icon
if (document.getElementById(iconId)) {
const icon = document.getElementById(iconId);
icon.classList.toggle('rotate-180');
}

// Toggle the show class on the container to trigger the animation
container.classList.toggle('max-h-500');
}
	</script>
{% endblock %}