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

{% block body %}
<!-- Pop-up pour modifier le statut -->
<div id="popup-status" class="popup-container">
    <div class="popup-content dp-f-c gp-30 mar-30">
        <h3 class="ft-s-25 t-a-c dg2Color">Modifier le statut de la commande</h3>
        <select id="statusSelect">
            <option value="received">En préparation</option>
            <option value="shipped">Expédiée</option>
            <option value="delivered">Livrée</option>
            <option value="waiting">En attente</option>
            <option value="canceled">Annulée</option>
            <option value="refused">Refusée</option>
            <option value="pending">En attente de paiement</option>
        </select>
        <div class="dp-f-r gp-10">
            <button class="button rBgColor f-1" onclick="closePopup('popup-status')">Fermer</button>
            <button class="button f-1" id="confirmStatus">Modifier</button>
        </div>
    </div>
</div>

<!-- Pop-up pour modifier le numéro de suivi -->
<div id="popup-tracking" class="popup-container">
    <div class="popup-content dp-f-c gp-30 mar-30">
        <h3 class="ft-s-25 t-a-c dg2Color">Modifier le numéro de suivi</h3>
        <div class="inputBox">
                <input class="promptRegister" id="trackingNumber" autocomplete="off" required="true" type="text" name="trackingNumber" placeholder=" " required>
                <label for="trackingNumber" class="textLabelDescription ft-s-11-r500">
                <b>Entrer le n° de suivi</b>
            </label>
        </div>
        <div class="dp-f-r gp-10">
            <button class="button rBgColor f-1" onclick="closePopup('popup-tracking')">Fermer</button>
            <button class="button f-1" id="confirmTracking">Modifier</button>
        </div>
    </div>
</div>



	<div class="pageContainer min-h-100-vh gBgColor">
		<div class="dp-f-c pad-30 b-s-b-b gp-20 bg-va-transparent b-r-10">
            <section class="dp-f-c gp-50">
                <h1 class="ft-s-45 ft-s-35-r1000 ft-s-20-r600">
                    Commandes en cours
                </h1>
                {% if otherCommandes is not empty %}
                    <div class="separator dg2BgColor"></div>
						<div class="dp-f-c gp-30 w-100-p">
							{% for commande in otherCommandes %}
								<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 gp-25">
													<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>
															</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>
																</b>
															</p>
														{% endif %}
													</div>
													<div class="dp-f-c gp-10 w-100-p-r1000 a-i-e">
                                                    <div class="dp-f-c gp-10 a-i-e j-c-e">
														<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>
                                                        <button class="dp-f-r gp-5 a-i-s bg-va-transparent b-r-5 pad-10 b-s-b-b cur-p" onclick="openStatus('{{ commande.reference }}')">
                                                            <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>
                                                            <?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="20" height="20">
                                                                <path d="m18.813,10c.309,0,.601-.143.79-.387s.255-.562.179-.861c-.311-1.217-.945-2.329-1.833-3.217l-3.485-3.485c-1.322-1.322-3.08-2.05-4.95-2.05h-4.515C2.243,0,0,2.243,0,5v14c0,2.757,2.243,5,5,5h3c.552,0,1-.448,1-1s-.448-1-1-1h-3c-1.654,0-3-1.346-3-3V5c0-1.654,1.346-3,3-3h4.515c.163,0,.325.008.485.023v4.977c0,1.654,1.346,3,3,3h5.813Zm-6.813-3V2.659c.379.218.732.488,1.05.806l3.485,3.485c.314.314.583.668.803,1.05h-4.338c-.551,0-1-.449-1-1Zm11.122,4.879c-1.134-1.134-3.11-1.134-4.243,0l-6.707,6.707c-.755.755-1.172,1.76-1.172,2.829v1.586c0,.552.448,1,1,1h1.586c1.069,0,2.073-.417,2.828-1.172l6.707-6.707c.567-.567.879-1.32.879-2.122s-.312-1.555-.878-2.121Zm-1.415,2.828l-6.708,6.707c-.377.378-.879.586-1.414.586h-.586v-.586c0-.534.208-1.036.586-1.414l6.708-6.707c.377-.378,1.036-.378,1.414,0,.189.188.293.439.293.707s-.104.518-.293.707Z"/>
                                                            </svg>
                                                        </button>
                                                        <button class="dp-f-r gp-5 a-i-s bg-va-transparent b-r-5 pad-10 b-s-b-b cur-p" onclick="openSuivi('{{ commande.reference }}')">
                                                            <p class="ft-s-20 ft-s-18-r1000 ft-s-16-r600 t-a-e">
                                                                <b>
                                                                    Numéro de suivi :<br>
                                                                    {% if commande.numSuiviColis is not empty %}
                                                                        <span class="gColor">{{ commande.numSuiviColis }}</span>
                                                                    {% else %}
                                                                        <span class="gColor">Aucun n° de suivi</span>
                                                                    {% endif %}
                                                                </b>
                                                            </p>
                                                            <?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="20" height="20">
                                                                <path d="m18.813,10c.309,0,.601-.143.79-.387s.255-.562.179-.861c-.311-1.217-.945-2.329-1.833-3.217l-3.485-3.485c-1.322-1.322-3.08-2.05-4.95-2.05h-4.515C2.243,0,0,2.243,0,5v14c0,2.757,2.243,5,5,5h3c.552,0,1-.448,1-1s-.448-1-1-1h-3c-1.654,0-3-1.346-3-3V5c0-1.654,1.346-3,3-3h4.515c.163,0,.325.008.485.023v4.977c0,1.654,1.346,3,3,3h5.813Zm-6.813-3V2.659c.379.218.732.488,1.05.806l3.485,3.485c.314.314.583.668.803,1.05h-4.338c-.551,0-1-.449-1-1Zm11.122,4.879c-1.134-1.134-3.11-1.134-4.243,0l-6.707,6.707c-.755.755-1.172,1.76-1.172,2.829v1.586c0,.552.448,1,1,1h1.586c1.069,0,2.073-.417,2.828-1.172l6.707-6.707c.567-.567.879-1.32.879-2.122s-.312-1.555-.878-2.121Zm-1.415,2.828l-6.708,6.707c-.377.378-.879.586-1.414.586h-.586v-.586c0-.534.208-1.036.586-1.414l6.708-6.707c.377-.378,1.036-.378,1.414,0,.189.188.293.439.293.707s-.104.518-.293.707Z"/>
                                                            </svg>
                                                        </button>
                                                        </div>
													</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.getTotalPrice|number_format(2, ',', ' ') }}
																					<span class="gColor">€</span>
																				</b>
																			</p>
																			{# Le texte à graver part à l'établi : il doit être lisible ici aussi. #}
																			{% for option in product.getOptions %}
																				<p class="t-a-e ft-s-15">{{ option.label }} : <b>{{ option.valeur }}</b></p>
																			{% endfor %}
																		</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_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">
								Aucune commande en cours de traitement
							</p>
						</div>
					{% endif %}
            </section>
            <section class="dp-f-c gp-50">
                <h1 class="ft-s-35 ft-s-25-r1000 ft-s-16-r600">
                    Commandes livré et terminé
                </h1>
                {% if commandesFinished is not empty %}
						<div class="dp-f-c gp-30 w-100-p">
							{% for commande in commandesFinished %}
								<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>
															</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>
																</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>
																Status de la commande :<br>
																<span class="gColor">{{ commande.status.label() }}</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.getTotalPrice|number_format(2, ',', ' ') }}
																					<span class="gColor">€</span>
																				</b>
																			</p>
																			{# Le texte à graver part à l'établi : il doit être lisible ici aussi. #}
																			{% for option in product.getOptions %}
																				<p class="t-a-e ft-s-15">{{ option.label }} : <b>{{ option.valeur }}</b></p>
																			{% endfor %}
																		</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_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">
								Aucune commande terminé
							</p>
						</div>
					{% endif %}
            </section>
		</div>
	</div>
	<script>
let currentReference = '';

function openStatus(reference) {
    currentReference = reference;
    document.getElementById("popup-status").classList.add("active");
}

function openSuivi(reference) {
    currentReference = reference;
    document.getElementById("popup-tracking").classList.add("active");
}

function closePopup(popupId) {
    document.getElementById(popupId).classList.remove("active");
}

document.getElementById("confirmStatus").addEventListener("click", () => {
    const status = document.getElementById("statusSelect").value;

    fetch(`/api/admin/update-status/${currentReference}`, {
        method: 'POST',
        headers: admCsrfHeaders({ 'Content-Type': 'application/json' }),
        body: JSON.stringify({ status })
    })
    .then(response => response.json())
    .then(data => {
        console.log("data : " + data);
        if (data.success) {
            showNotification({
                success: true,
                title: "Numéro de suivi mis à jour",
                message: `Nouveau statut : ${data.newStatus}`,
            });
            setTimeout(() => {
                window.location.reload();
            }, 1000);
            // document.querySelector(`#${CSS.escape(currentReference)} .gColor`).innerText = data.newStatus;
        } else {
            showNotification({
                success: false,
                title: "Oups... Quelque chose s'est mal passé",
                message: data.message,
            });
        }
        closePopup("popup-status");
    })
    .catch(error => console.error('Erreur:', error));
});

		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');
}

document.getElementById("confirmTracking").addEventListener("click", () => {
    const trackingNumber = document.getElementById("trackingNumber").value;

    fetch(`/api/admin/update-tracking/${currentReference}`, {
        method: 'POST',
        headers: admCsrfHeaders({ 'Content-Type': 'application/json' }),
        body: JSON.stringify({ trackingNumber })
    })
    .then(response => response.json())
    .then(data => {
        console.log("data : " + data);
        if (data.success) {
            showNotification({
                success: true,
                title: "Numéro de suivi mis à jour",
                message: `Nouveau numéro : ${data.newTrackingNumber}`,
            });
            setTimeout(() => {
                window.location.reload();
            }, 1000);
            // document.querySelector(`#${CSS.escape(currentReference)} .gColor`).innerText = data.newStatus;
        } else {
            showNotification({
                success: false,
                title: "Oups... Quelque chose s'est mal passé",
                message: data.message,
            });
        }
        closePopup("popup-tracking");
    })
    .catch(error => console.error('Erreur:', error));
});

function showNotification(success, title, message) {
    const notification = document.createElement("div");
    notification.classList.add("notification", success ? "success" : "error");
    notification.innerHTML = `<strong>${title}</strong><p>${message}</p>`;
    document.body.appendChild(notification);
    setTimeout(() => notification.remove(), 5000);
}


	</script>

    <style>
.popup-container {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.popup-content {
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    text-align: center;
}

.popup-container.active {
    display: flex;
}

</style>
{% endblock %}