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

{% block head_title %}Détail de commande{% endblock %}
{% block first_title %}Padel Club{% endblock %}
{% block second_title %}Détail de commande{% endblock %}

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

<div class="grid-x">
    <div class="cell medium-8 large-8 padding10">
        <h1 class="club padding10">Commande #{{ order.id }}</h1>
        <div class="bubble">
            <div class="order-meta">
                <div class="order-date">
                    <strong>Date:</strong> {{ order.date_ordered|date:"d/m/Y H:i" }}
                </div>
                <div class="order-status">
                    <strong>Statut:</strong>
                    {% if order.status == 'PENDING' %}
                        <span class="status-badge pending">En attente</span>
                    {% elif order.status == 'PREPARED' %}
                        <span class="status-badge prepared">En cours de préparation</span>
                    {% elif order.status == 'PAID' %}
                        <span class="status-badge paid">Payée</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 %}
                </div>
            </div>

            <div class="order-items-section">
                <h3>Produits</h3>
                {% with items=order_items total_quantity=total_quantity total_price=order.total_price %}
                    {% include 'shop/partials/order_items_display.html' with items=items total_quantity=total_quantity total_price=total_price edit_mode=False cancel_mode=order.is_cancellable %}
                {% endwith %}
            </div>

            <div class="coupon-section">
                <div>Adresse de livraison (dans la mesure du possible)</div>
                {% if order.shipping_address %}
                    <div class="address-details" style="margin: 10px 0; padding: 10px; background: #f8f9fa; border-radius: 4px;">
                        <p style="margin: 0;">{{ order.shipping_address.street_address }}</p>
                        {% if order.shipping_address.apartment %}
                            <p style="margin: 5px 0;">{{ order.shipping_address.apartment }}</p>
                        {% endif %}
                        <p style="margin: 0;">{{ order.shipping_address.postal_code }} {{ order.shipping_address.city }}, {{ order.shipping_address.country }}</p>
                    </div>
                    {% if order.shipping_address_can_be_edited %}
                        <button class="edit-address-btn confirm-nav-button" style="margin-top: 10px;" onclick="toggleAddressForm()">Modifier l'adresse</button>

                        <div id="address-form-container" style="display: none; margin-top: 10px;">
                            <form method="post" action="{% url 'shop:update_shipping_address' order.id %}" class="coupon-form">
                                {% csrf_token %}
                                <input type="text" name="street_address" class="address-input" style="width: 100%;" placeholder="Adresse" value="{{ order.shipping_address.street_address }}">
                                <div style="margin: 10px 0;">
                                    <input type="text" name="apartment" class="address-input" style="width: 100%;" placeholder="Appartement (optionnel)" value="{{ order.shipping_address.apartment|default:'' }}">
                                </div>
                                <div style="display: flex; gap: 10px;">
                                    <input type="text" name="postal_code" class="address-input" style="width: 25%;" placeholder="Code postal" value="{{ order.shipping_address.postal_code }}">
                                    <input type="text" name="city" class="address-input" style="width: 25%;" placeholder="Ville" value="{{ order.shipping_address.city }}">
                                    <input type="text" name="country" class="address-input" style="width: 25%;" placeholder="Pays" value="{{ order.shipping_address.country }}">
                                </div>
                                <button type="submit" class="save-btn confirm-nav-button">Enregistrer</button>
                            </form>
                        </div>
                    {% endif %}
                {% else %}
                    <p>Aucune adresse de livraison renseignée</p>
                    {% if order.shipping_address_can_be_edited %}
                        <button class="add-address-btn confirm-nav-button" onclick="toggleAddressForm()">Ajouter une adresse</button>
                        <div id="address-form-container" style="display: none; margin-top: 10px;">
                            <form method="post" action="{% url 'shop:update_shipping_address' order.id %}" class="coupon-form">
                                {% csrf_token %}
                                <input type="text" name="street_address" class="address-input" style="width: 100%;" placeholder="Adresse">
                                <div style="margin: 10px 0;">
                                    <input type="text" name="apartment" class="address-input" style="width: 100%;" placeholder="Appartement (optionnel)">
                                </div>
                                <div style="display: flex; gap: 10px;">
                                    <input type="text" name="postal_code" class="address-input" style="width: 25%;" placeholder="Code postal">
                                    <input type="text" name="city" class="address-input" style="width: 25%;" placeholder="Ville">
                                    <input type="text" name="country" class="address-input" style="width: 25%;" placeholder="Pays">
                                </div>
                                <button type="submit" class="save-btn confirm-nav-button">Enregistrer</button>
                            </form>
                        </div>
                    {% endif %}
                {% endif %}
            </div>

            {% if order.discount_amount > 0 %}
            <div class="discount-section">
                <div class="discount-row">
                    <span>Sous-total:</span>
                    <span class="price-value">{{ order.total_price }}€</span>
                </div>
                <div class="discount-row">
                    <span>Réduction:</span>
                    <span class="price-value">-{{ order.discount_amount }}€</span>
                </div>
                <div class="discount-row total-row">
                    <span>Total final:</span>
                    <span class="price-value">{{ order.get_total_after_discount }}€</span>
                </div>

                {% if order.coupon %}
                <div class="coupon-info">
                    Coupon appliqué: {{ order.coupon.code }}
                </div>
                {% endif %}
            </div>
            {% endif %}

            <div class="order-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? Cette action est irréversible.');">
                    {% csrf_token %}
                    <button type="submit" class="remove-btn">Annuler la commande</button>
                </form>
                {% endif %}
            </div>
        </div>
    </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>

<script>
function toggleAddressForm() {
    const formContainer = document.getElementById('address-form-container');
    const isHidden = formContainer.style.display === 'none';
    formContainer.style.display = isHidden ? 'block' : 'none';
}
</script>

{% endblock %}