{% extends 'tournaments/base.html' %}

{% block head_title %}Mes Commandes{% endblock %}
{% block first_title %}Padel Club{% endblock %}
{% block second_title %}Mes Commandes{% endblock %}

{% block content %}
{% include 'shop/partials/navigation_base.html' %}

<div class="grid-x">
    <div class="cell medium-12 large-6 padding10">
        <h1 class="club padding10">Mes Commandes</h1>
        <div class="bubble">
            {% if orders %}
                <table class="order-table">
                    <tbody>
                        {% for order in orders %}
                            <tr class="{% cycle 'odd-row' 'even-row' %}">
                                <td class="text-left">Commande #{{ order.id }}</td>
                                <td>
                                    <a href="{% url 'shop:order_detail' order.id %}" class="view-btn">Détails</a>
                                </td>
                                <td class="text-left">{{ order.date_ordered|date:"d/m/Y H:i" }}</td>
                                <td class="text-left">
                                    {% if order.status == 'PENDING' %}
                                        <span class="status-badge pending">En attente</span>
                                    {% elif order.status == 'PAID' %}
                                        <span class="status-badge paid">Payée</span>
                                    {% elif order.status == 'PREPARED' %}
                                        <span class="status-badge prepared">En cours de préparation</span>
                                    {% elif order.status == 'SHIPPED' %}
                                        <span class="status-badge shipped">Expédiée</span>
                                    {% elif order.status == 'DELIVERED' %}
                                        <span class="status-badge delivered">Livrée</span>
                                    {% elif order.status == 'CANCELED' %}
                                        <span class="status-badge canceled">Annulée</span>
                                    {% elif order.status == 'REFUNDED' %}
                                        <span class="status-badge refunded">Remboursée</span>
                                    {% endif %}
                                </td>
                                <td class="price-column">
                                    {% if order.discount_amount > 0 %}
                                        <span class="original-price">{{ order.total_price }}€</span>
                                        <span class="discounted-price">{{ order.get_total_after_discount }}€</span>
                                    {% else %}
                                        {{ order.total_price }}€
                                    {% endif %}
                                </td>
                                <td class="actions">
                                    {% if order.status == 'PENDING' or order.status == 'PAID' %}
                                        <form method="post" action="{% url 'shop:cancel_order' order.id %}" class="inline-form" onsubmit="return confirm('Êtes-vous sûr de vouloir annuler cette commande?');">
                                            {% csrf_token %}
                                            <button type="submit" class="remove-btn">Annuler</button>
                                        </form>
                                    {% endif %}
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            {% else %}
                <div class="empty-orders">
                    <p>Vous n'avez pas encore de commandes.</p>
                    <a href="{% url 'shop:product_list' %}" class="checkout-button confirm-nav-button">Découvrir la boutique</a>
                </div>
            {% endif %}
        </div>

        {% if messages %}
        <div class="messages">
            {% for message in messages %}
            <div class="alert {% if message.tags %}alert-{{ message.tags }}{% endif %}">
                {{ message }}
            </div>
            {% endfor %}
        </div>
        {% endif %}
    </div>
</div>

{% endblock %}