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

{% block head_title %}La Boutique{% endblock %}
{% block first_title %}Padel Club{% endblock %}
{% block second_title %}La Boutique{% endblock %}

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

<div class="grid-x">
    <div class="cell medium-6 large-6 padding10">
        <h1 class="club padding10">Paiement réussi</h1>
        <div class="bubble">
            <h2>Merci pour votre commande !</h2>
            <p>Votre paiement a été traité avec succès.</p>

            <div class="delivery-info" style="background-color: #e8f5e9; border-left: 4px solid #4caf50; padding: 15px; margin: 15px 0; border-radius: 5px;">
              <h4 style="color: #2e7d32; margin-top: 0;">Et maintenant ?</h4>
              <p>Votre commande a été enregistrée ! Nous vous contacterons prochainement pour organiser la remise de vos articles lors d'une prochaine session de padel.</p>
            </div>

            <p>Numéro de commande: {{ order.id }}</p>

            <!-- Order details -->
            <h3>Détails de la commande</h3>
            {% include 'shop/partials/order_items_display.html' with items=display_data.items total_quantity=display_data.total_quantity total_price=display_data.total_price edit_mode=False %}

            {% if has_discount %}
            <div class="order-summary" style="margin-top: 20px;">
              <div class="order-row" style="display: flex; justify-content: space-between;">
                <span>Sous-total:</span>
                <span>€{{ order.total_price }}</span>
              </div>
              <div class="order-row" style="display: flex; justify-content: space-between; color: #e67e22;">
                <span>Réduction:</span>
                <span>-€{{ discount_amount }}</span>
              </div>
              <div class="order-row" style="display: flex; justify-content: space-between; font-weight: bold;">
                <span>Total payé:</span>
                <span>€{{ total_after_discount }}</span>
              </div>
            </div>
            {% endif %}

            <div class="cart-summary">
                <a class="confirm-nav-button checkout-button" href="{% url 'shop:product_list' %}">Retour à la boutique</a>
            </div>
        </div>
    </div>
</div>
{% endblock %}
