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

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

{% block content %}
{% if STRIPE_IS_TEST_MODE %}
<div class="alert alert-warning" style="background-color: #fff3cd; color: #856404; padding: 10px; margin: 10px 0; border-radius: 5px; border: 1px solid #ffeeba;">
    <strong>⚠️ Test Mode:</strong> Stripe is currently in test mode. No real payments will be processed.
    <br>
    <small>Use test card: 4242 4242 4242 4242 with any future date and any CVC.</small>
</div>
{% endif %}
{% include 'shop/partials/navigation_base.html' %}


<div class="grid-x">
    <div class="cell medium-6 large-6 padding10">
        <h1 class="club padding10">Résumé de votre commande</h1>
        <div class="bubble">
            {% 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 %}

            <!-- Stripe checkout button -->
            <div class="cart-summary">
                <button id="checkout-button" class="confirm-nav-button checkout-button">Procéder au paiement</button>
            </div>
        </div>
    </div>
</div>

<!-- Stripe JavaScript -->
<script src="https://js.stripe.com/v3/"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Initialize Stripe
        const stripe = Stripe('{{ stripe_publishable_key }}');
        const checkoutButton = document.getElementById('checkout-button');

        checkoutButton.addEventListener('click', function() {
            // Redirect to Stripe Checkout
            stripe.redirectToCheckout({
                sessionId: '{{ checkout_session_id }}'
            }).then(function(result) {
                // If `redirectToCheckout` fails due to a browser or network
                // error, display the localized error message to your customer
                if (result.error) {
                    alert(result.error.message);
                }
            });
        });
    });
</script>
{% endblock %}