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

{% block title %}
	Confirmation de commande
{% endblock %}

{% block metaDesc %}Confirmation de votre commande chez Vulcan' Affûtage. Récapitulatif de votre achat de couteaux artisanaux et services d'affûtage à Clermont-Ferrand.{% endblock %}

{% block canonical %}{% endblock %}

{% block headerPanier %}
	gColor
{% endblock %}

{% block seoIndex %}
	<meta name="robots" content="noindex, nofollow">
{% 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-5 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 t-a-c ft-s-35-r1000 ft-s-26-r600" id="titlePage">MERCI POUR VOTRE COMMANDE</h1>
					<p class="txtGColor ft-f-chomsky ft-s-20 t-a-c ft-s-16-r600">Votre commande à été enregistré avec succès !</p>
				</div>
			</div>
			<div class="dp-f-c gp-50 ft-s-20 mar-t-220">
				<section class="w-100-p dp-f-r j-c-s-b a-i-c gp-10">
					<div class="dp-f" title="Panier">
						<?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" height="35" class="ico-cart-state" fill="currentColor">
							<path d="M23.297,9.034c-.57-.657-1.396-1.034-2.267-1.034h-.086C20.445,3.506,16.625,0,12,0S3.555,3.506,3.056,8h-.056c-.87,0-1.695,.377-2.266,1.034S-.093,10.562,.03,11.425l1.061,7.424c.42,2.937,2.974,5.151,5.94,5.151h9.969c2.966,0,5.52-2.215,5.94-5.151l1.061-7.424c.123-.862-.134-1.733-.704-2.391ZM12,2c3.52,0,6.441,2.613,6.928,6H5.072c.487-3.387,3.408-6,6.928-6Zm10.021,9.142l-1.061,7.424c-.28,1.958-1.982,3.435-3.96,3.435H7.031c-1.979,0-3.681-1.477-3.96-3.435l-1.061-7.424c-.042-.291,.042-.574,.234-.797,.193-.223,.461-.345,.755-.345H21.03c.294,0,.562,.122,.756,.345,.192,.223,.276,.506,.234,.797Zm-9.021,1.858v6c0,.553-.447,1-1,1s-1-.447-1-1v-6c0-.553,.447-1,1-1s1,.447,1,1Zm5,0v6c0,.553-.447,1-1,1s-1-.447-1-1v-6c0-.553,.447-1,1-1s1,.447,1,1Zm-10,0v6c0,.553-.447,1-1,1s-1-.447-1-1v-6c0-.553,.447-1,1-1s1,.447,1,1Z"/>
						</svg>
					</div>

					<div class="separator w-u f-1 separator-cart-state active"></div>

					<div class="dp-f">
						<?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" height="35" class="ico-cart-state" fill="currentColor">
							<path d="m3.307,11.412c5.009,2.212,9.836-2.176,8.452-7.136-.546-1.959-2.077-3.489-4.036-4.035C2.764-1.143-1.624,3.684.588,8.692c.532,1.205,1.514,2.187,2.719,2.719Zm1.693-9.412h2v3.586l2.207,2.207-1.414,1.414-2.793-2.793V2Zm19,8.5c0-3.033-2.468-5.5-5.5-5.5h-1.5v-.5h0c0-1.93-1.57-3.5-3.5-3.5h-1.26c.715.891,1.238,1.939,1.52,3.083.141.088.241.238.241.417,0,0,0,0,0,0v12.499H3v-3h0v-.587C1.838,12.942.815,12.205,0,11.279v2.721s0,0,0,0v5.999h3.058c-.034.162-.058.328-.058.5,0,1.381,1.119,2.5,2.5,2.5s2.5-1.119,2.5-2.5c0-.172-.024-.338-.058-.5h8.115c-.034.162-.058.328-.058.5,0,1.381,1.119,2.5,2.5,2.5s2.5-1.119,2.5-2.5c0-.172-.024-.338-.058-.5h3.058v-9.5Zm-5.5-2.5c1.379,0,2.5,1.122,2.5,2.5v2.5h-4v-5h1.5Z"/>
						</svg>
					</div>


					<div class="separator w-u f-1 separator-cart-state active"></div>

					<div class="dp-f">
						<img src="/assets/paypal-logo2.svg" alt="Icons PayPal" class="max-h-35 max-h-25-r600 img-cart-state"></img>
					</div>

					<div class="separator w-u f-1 separator-cart-state active"></div>


					<div class="dp-f">
						<svg id="Layer_1" viewBox="0 0 24 24" height="35" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" class="ico-cart-state active" fill="currentColor">
							<path d="m20.389 4.268-2.657-2.657a5.462 5.462 0 0 0 -3.889-1.611h-6.343a5.506 5.506 0 0 0 -5.5 5.5v13a5.506 5.506 0 0 0 5.5 5.5h9a5.506 5.506 0 0 0 5.5-5.5v-10.343a5.464 5.464 0 0 0 -1.611-3.889zm-3.889 16.732h-9a2.5 2.5 0 0 1 -2.5-2.5v-13a2.5 2.5 0 0 1 2.5-2.5h5.5v4a2 2 0 0 0 2 2h4v9.5a2.5 2.5 0 0 1 -2.5 2.5zm.586-9.534a1.5 1.5 0 0 1 -.052 2.12l-3.586 3.414a3.5 3.5 0 0 1 -4.923-.025l-1.525-1.355a1.5 1.5 0 1 1 2-2.24l1.586 1.414a.584.584 0 0 0 .414.206.5.5 0 0 0 .353-.146l3.613-3.44a1.5 1.5 0 0 1 2.12.052z"/>
						</svg>
					</div>
				</section>
				<h2 class="dgColor">Détails de votre commande</h2>

				<div class="commande-details ft-s-16-r600">
					<p>
						<strong class="gColor">Référence :</strong>
						{{ commande.reference }}
					</p>
					{% if livraison.typeLivraison.value is same as("livraison") %}
						<p>
							<strong class="gColor">Adresse :</strong>
							{{ adresse.nom }}
							{{ adresse.prenom }},<br/>
							{{ adresse.libAdr }},<br/>
							{{ adresse.cp }},
							{{ adresse.ville }}
						</p>
						<p>
							<strong class="gColor">Livraison :</strong>
							{{ livraison.libelle }}
							-
							{{ livraison.prix }}
							€
						</p>
					{% else %}
						<p>
							<strong class="gColor">Retrait en boutique :</strong>
							{{ livraison.libelle }}
							-
							{% if livraison.prix < 0.1 %}
								GRATUIT
							{% else %}
								{{ livraison.prix }}€
							{% endif %}
						</p>
						<p>
							<strong class="gColor">Au nom de  :</strong>
							{{ adresse.nom }}
							{{ adresse.prenom }}
						</p>
					{% endif %}
				</div>

				<h2 class="dgColor">Produits commandés</h2>
				<div class="produits">
					{% for productCommande in productCommandes %}
						{% set product = productCommande.product %}

						<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.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.libelle }}</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.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>
												{{ productCommande.totalPrice|number_format(2, ',', ' ') }}
												<span class="gColor">€</span>
											</b>
										</p>
										{% for option in productCommande.options %}
											<p class="t-a-e ft-s-15">{{ option.label }} : « {{ option.valeur }} »</p>
										{% endfor %}
									</div>
								</div>
							</article>
							<div class="separator dgBgColor"></div>
						</div>
					{% endfor %}
				</div>
				{# ---- Bons cadeaux ---- #}
				{% for bon in bons|default([]) %}
					<div class="dp-f-c gp-20">
						<article class="dp-f-r gp-15 w-100-p j-c-s-b a-i-c f-d-c-r800">
							<div class="dp-f-c gp-5">
								<h3>{{ bon.type.value == 'activite' and bon.atelier ? 'Bon cadeau — ' ~ bon.atelier.titre : 'Carte cadeau' }}</h3>
								<p class="ft-s-15">
									{{ bon.envoiPapier ? 'Code envoyé par email + version papier par courrier.' : 'Code envoyé par email.' }}
									{% if bon.pourNom %}Pour {{ bon.pourNom }}.{% endif %}
									Valable 12 mois.
								</p>
							</div>
							<p class="t-a-e ft-s-40 ft-s-35-r600">
								<b>{{ bon.montantTotal|number_format(2, ',', ' ') }} <span class="gColor">€</span></b>
							</p>
						</article>
						<div class="separator dgBgColor"></div>
					</div>
				{% endfor %}

				<div class="dp-f w-100-p a-i-e j-c-e">
					<div class="dp-f-c j-c-e 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>
				<div class="dp-f-r gp-20 f-w-w j-c-e">
					<a href="{{ path('app_commande', {'numCommande': commande.reference }) }}#{{ commande.reference }}" class="button">Voir votre commande</a>
					<a href="{{ path('app_facture', { 'reference': commande.reference }) }}" class="button dg2BgColor">Voir la facture</a>
				</div>
			</div>
		</div>
	</div>


{% endblock %}