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

{% block title %}Détail commande{% endblock %}

{% block body %}
	{% include "layouts/_go_to_order_list.html.twig" %}
	
    <h2 class="text-xl font-bold text-cyan-500">Détail de la commande n°{{ order.id }}</h2>
	{% include "layouts/order/_detail_general.html.twig" %}

	<section class="bg-white w-full shadow-md p-4 mt-3">
		<h3 class="font-bold text-sm flex items-center pb-3 border-b border-slate-400">{{ ux_icon('fluent-mdl2:product', {'class': 'w-5 mr-3 text-cyan-500'}) }} Liste des produits</h3>
		{% for product in order.line_items %}
			<div class="{% if loop.index is odd %}bg-slate-100{% endif %}">
				<p class="text-sm font-semibold p-2 flex justify-between items-center border-b border-slate-400">
					<span class="flex-1 text-cyan-600">{{ strip_tags(product.name) }}{% if product.sku != '' %} - {{ product.sku }}{% endif %}</span>
					<span class="w-36 text-right">{{ product.product.stock_quantity > 0 ? 'En stock' : 'Pas de stock' }} ({{ product.product.stock_quantity }})</span>
				</p>
				<div class="flex">
					<div class="w-1/3 px-2 text-left font-semibold">Qté</div>
					<div class="w-1/3 px-2 text-left font-semibold">Prix</div>
					<div class="w-1/3 px-2 text-left font-semibold">Total</div>
				</div>
				<div class="flex items-center">
					<span class="w-1/3 p-2">{{ product.quantity }}</span>
					<span class="w-1/3 p-2">{{ product.subtotal }}€</span>
					<span class="w-1/3 p-2">{{ product.total }}€</span>
				</div>
			</div>
			{% if not loop.last %}<hr>{% endif %}
		{% endfor %}
		<div>
			<p class="text-right font-semibold">Total: {{ order.total }}€</p>
		</div>
	</section>
	
	{% include "layouts/order/delivery/_list_order_delivery_note.html.twig" %}
	
	<div class="lg:flex lg:gap-3">
		{% include "layouts/order/_detail_billing.html.twig" %}
		{% include "layouts/order/_detail_shipping.html.twig" %}
	</div>
{% endblock %}