{% extends 'layout.html' %}

{% block title %}Détails de la commande{% endblock %}

{% block content %}
<div class="row mb-4">
    <div class="col-md-8">
        <h2 class="border-bottom pb-2">
            <i class="fas fa-shopping-cart me-2"></i>Commande n° {{ commande.num }}
        </h2>
    </div>
    <div class="col-md-4 text-end">
        <div class="btn-group">
            <a href="{{ url_for('liste_commandes') }}" class="btn btn-secondary">
                <i class="fas fa-arrow-left me-2"></i>Retour à la liste
            </a>
            <a href="{{ url_for('modifier_commande', id=commande.id) }}" class="btn btn-primary">
                <i class="fas fa-edit me-2"></i>Modifier
            </a>
        </div>
    </div>
</div>

<div class="row">
    <!-- Informations de la commande -->
    <div class="col-md-6 mb-4">
        <div class="card h-100">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0"><i class="fas fa-info-circle me-2"></i>Informations générales</h5>
            </div>
            <div class="card-body">
                <table class="table table-bordered">
                    <tbody>
                        <tr>
                            <th style="width: 35%">Numéro de commande</th>
                            <td>{{ commande.num }}</td>
                        </tr>
                        <tr>
                            <th>Date de commande</th>
                            <td>{{ commande.date_cde }}</td>
                        </tr>
                        <tr>
                            <th>Statut</th>
                            <td>
                                <span class="badge bg-secondary">En attente</span>
                            </td>
                        </tr>
                        <tr>
                            <th>Date de livraison</th>
                            <td>Non définie</td>
                        </tr>
                        <tr>
                            <th>Montant total</th>
                            <td>{{ total|round(2) }} €</td>
                        </tr>
                    </tbody>
                </table>
                
                {% if commande.description %}
                <div class="mt-3">
                    <h6 class="border-bottom pb-2">Description</h6>
                    <p>{{ commande.description|nl2br }}</p>
                </div>
                {% endif %}
                
                <!-- Note : La table commande n'a pas de colonne statut, donc pas de bouton de changement de statut ici -->
            </div>
        </div>
    </div>
    
    <!-- Informations du fournisseur -->
    <div class="col-md-6 mb-4">
        <div class="card h-100">
            <div class="card-header bg-info text-white">
                <h5 class="mb-0"><i class="fas fa-building me-2"></i>Informations du fournisseur</h5>
            </div>
            <div class="card-body">
                {% if commande.nom_fournisseur %}
                <h5>{{ commande.nom_fournisseur }}</h5>
                
                <table class="table table-bordered mt-3">
                    <tbody>
                        <tr>
                            <th style="width: 35%">Adresse</th>
                            <td>{{ commande.adresse_fournisseur or 'Non définie' }}</td>
                        </tr>
                        <tr>
                            <th>Téléphone</th>
                            <td>{{ commande.tel_fournisseur or 'Non défini' }}</td>
                        </tr>
                        <tr>
                            <th>Email</th>
                            <td>{{ commande.email_fournisseur or 'Non défini' }}</td>
                        </tr>
                    </tbody>
                </table>
                
                <div class="mt-3">
                    <a href="{{ url_for('voir_fournisseur', id=commande.id_fournisseur) }}" class="btn btn-outline-primary">
                        <i class="fas fa-eye me-2"></i>Voir la fiche fournisseur
                    </a>
                </div>
                {% else %}
                <div class="alert alert-warning">
                    <i class="fas fa-exclamation-triangle me-2"></i>Aucun fournisseur associé à cette commande.
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- Articles de la commande -->
<div class="card mb-4">
    <div class="card-header bg-success text-white">
        <h5 class="mb-0"><i class="fas fa-list me-2"></i>Articles commandés</h5>
    </div>
    <div class="card-body p-0">
        {% if articles %}
        <div class="table-responsive">
            <table class="table table-striped table-hover mb-0">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Référence</th>
                        <th>Désignation</th>
                        <th class="text-center">Quantité</th>
                        <th class="text-end">Prix unitaire</th>
                        <th class="text-end">Total</th>
                    </tr>
                </thead>
                <tbody>
                    {% for article in articles %}
                    <tr>
                        <td>{{ loop.index }}</td>
                        <td>{{ article.ref }}</td>
                        <td>{{ article.designation }}</td>
                        <td class="text-center">{{ article.quantite }}</td>
                        <td class="text-end">{{ article.prix_unitaire }} €</td>
                        <td class="text-end">{{ (article.quantite * article.prix_unitaire)|round(2) }} €</td>
                    </tr>
                    {% endfor %}
                </tbody>
                <tfoot>
                    <tr class="table-primary">
                        <th colspan="5" class="text-end">Total</th>
                        <th class="text-end">{{ total|round(2) }} €</th>
                    </tr>
                </tfoot>
            </table>
        </div>
        {% else %}
        <div class="alert alert-info m-3">
            <i class="fas fa-info-circle me-2"></i>Aucun article dans cette commande.
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}