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

{% block title %}Commande {{ order.orderNumber }}{% endblock %}

{% block breadcrumb %}Boutique <i class="fas fa-chevron-right"></i> Commandes <i class="fas fa-chevron-right"></i> {{ order.orderNumber }}{% endblock %}

{% block body %}
<div class="container-fluid mt-4">
    <div class="row mb-4">
        <div class="col">
            <h1>
                <i class="fas fa-shopping-cart"></i> Commande {{ order.orderNumber }}
            </h1>
        </div>
        <div class="col-auto">
            <a href="{{ path('admin_shop_orders', {siteId: site.id}) }}" class="btn btn-secondary">
                <i class="fas fa-arrow-left"></i> Retour
            </a>
        </div>
    </div>

    {% for message in app.flashes('success') %}
        <div class="alert alert-success alert-dismissible fade show">
            {{ message }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    {% endfor %}

    <div class="row">
        <div class="col-lg-8">
            <!-- Produits commandés -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0">Produits commandés</h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>Produit</th>
                                    <th>SKU</th>
                                    <th class="text-center">Quantité</th>
                                    <th class="text-end">Prix unitaire</th>
                                    <th class="text-end">Total</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for item in order.items %}
                                    <tr>
                                        <td>{{ item.productName }}</td>
                                        <td>{{ item.productSku ?? '-' }}</td>
                                        <td class="text-center">{{ item.quantity }}</td>
                                        <td class="text-end">{{ item.formattedUnitPrice }}</td>
                                        <td class="text-end"><strong>{{ item.formattedTotalPrice }}</strong></td>
                                    </tr>
                                {% endfor %}
                            </tbody>
                            <tfoot>
                                <tr>
                                    <td colspan="4" class="text-end"><strong>TVA</strong></td>
                                    <td class="text-end">{{ order.vatAmount|number_format(2, ',', ' ') }} €</td>
                                </tr>
                                <tr class="table-primary">
                                    <td colspan="4" class="text-end"><strong>TOTAL TTC</strong></td>
                                    <td class="text-end"><strong class="fs-5">{{ order.formattedTotal }}</strong></td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>

            <!-- Adresse de facturation/livraison -->
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Adresses</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <h6><i class="fas fa-file-invoice"></i> Adresse de facturation</h6>
                            {% if order.billingAddress %}
                                <address>
                                    {{ order.billingAddress.address }}<br>
                                    {% if order.billingAddress.address2 is defined and order.billingAddress.address2 %}
                                        {{ order.billingAddress.address2 }}<br>
                                    {% endif %}
                                    {{ order.billingAddress.postal_code }} {{ order.billingAddress.city }}<br>
                                    {{ order.billingAddress.country }}
                                </address>
                            {% else %}
                                <p class="text-muted">Non renseignée</p>
                            {% endif %}
                        </div>
                        <div class="col-md-6">
                            <h6><i class="fas fa-truck"></i> Adresse de livraison</h6>
                            {% if order.shippingAddress %}
                                <address>
                                    {{ order.shippingAddress.address }}<br>
                                    {% if order.shippingAddress.address2 is defined and order.shippingAddress.address2 %}
                                        {{ order.shippingAddress.address2 }}<br>
                                    {% endif %}
                                    {{ order.shippingAddress.postal_code }} {{ order.shippingAddress.city }}<br>
                                    {{ order.shippingAddress.country }}
                                </address>
                            {% else %}
                                <p class="text-muted">Identique à l'adresse de facturation</p>
                            {% endif %}
                        </div>
                    </div>

                    {% if order.notes %}
                        <hr>
                        <h6><i class="fas fa-comment"></i> Notes du client</h6>
                        <p>{{ order.notes }}</p>
                    {% endif %}
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <!-- Informations commande -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0">Informations</h5>
                </div>
                <div class="card-body">
                    <dl class="row mb-0">
                        <dt class="col-sm-6">Statut :</dt>
                        <dd class="col-sm-6">
                            {% if order.status == 'pending' %}
                                <span class="badge bg-warning">En attente</span>
                            {% elseif order.status == 'paid' %}
                                <span class="badge bg-success">Payée</span>
                            {% elseif order.status == 'processing' %}
                                <span class="badge bg-info">En traitement</span>
                            {% elseif order.status == 'shipped' %}
                                <span class="badge bg-primary">Expédiée</span>
                            {% elseif order.status == 'completed' %}
                                <span class="badge bg-success">Terminée</span>
                            {% elseif order.status == 'cancelled' %}
                                <span class="badge bg-danger">Annulée</span>
                            {% endif %}
                        </dd>

                        <dt class="col-sm-6">Date :</dt>
                        <dd class="col-sm-6">{{ order.createdAt|date('d/m/Y à H:i') }}</dd>

                        {% if order.paidAt %}
                            <dt class="col-sm-6">Payée le :</dt>
                            <dd class="col-sm-6">{{ order.paidAt|date('d/m/Y à H:i') }}</dd>
                        {% endif %}

                        <dt class="col-sm-6">Paiement :</dt>
                        <dd class="col-sm-6">
                            {% if order.stripePaymentIntentId %}
                                <i class="fab fa-stripe"></i> Stripe
                                <br><small class="text-muted">{{ order.stripePaymentIntentId }}</small>
                            {% else %}
                                -
                            {% endif %}
                        </dd>
                    </dl>
                </div>
            </div>

            <!-- Informations client -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0">Client</h5>
                </div>
                <div class="card-body">
                    <p class="mb-1"><strong>{{ order.customerFullName }}</strong></p>
                    <p class="mb-1"><i class="fas fa-envelope"></i> {{ order.customerEmail }}</p>
                    {% if order.customerPhone %}
                        <p class="mb-0"><i class="fas fa-phone"></i> {{ order.customerPhone }}</p>
                    {% endif %}
                </div>
            </div>

            <!-- Changer le statut -->
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Changer le statut</h5>
                </div>
                <div class="card-body">
                    <form method="post" action="{{ path('admin_shop_order_status', {siteId: site.id, orderId: order.id}) }}">
                        <select name="status" class="form-select mb-2" required>
                            <option value="">Sélectionner...</option>
                            <option value="pending" {% if order.status == 'pending' %}selected{% endif %}>En attente</option>
                            <option value="paid" {% if order.status == 'paid' %}selected{% endif %}>Payée</option>
                            <option value="processing" {% if order.status == 'processing' %}selected{% endif %}>En traitement</option>
                            <option value="shipped" {% if order.status == 'shipped' %}selected{% endif %}>Expédiée</option>
                            <option value="completed" {% if order.status == 'completed' %}selected{% endif %}>Terminée</option>
                            <option value="cancelled" {% if order.status == 'cancelled' %}selected{% endif %}>Annulée</option>
                        </select>
                        <button type="submit" class="btn btn-primary btn-block w-100">
                            <i class="fas fa-check"></i> Mettre à jour
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}