{% extends 'sites/template-default/base.html.twig' %}

{% block title %}Mes commandes - {{ site.name }}{% endblock %}

{% block body %}
<div class="container my-5 py-4">
    <div class="row">
        <div class="col-12">
            <div class="header-section mb-5">
                <div class="d-flex justify-content-between align-items-center flex-wrap gap-3">
                    <div>
                        <h1 class="mb-3">📦 Mes commandes</h1>
                        <p class="text-muted mb-0 fs-6">
                            <i class="fas fa-user" style="margin-right: 8px;"></i>Connecté en tant que <strong>{{ customer_email }}</strong>
                        </p>
                    </div>
                    <a href="{{ path('my_account_logout', {siteName: site.internalName}) }}" class="btn btn-outline-secondary">
                        <i class="fas fa-sign-out-alt" style="margin-right: 8px;"></i>Déconnexion
                    </a>
                </div>
            </div>

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

            {% if orders is empty %}
                <div class="card text-center py-5">
                    <div class="card-body">
                        <i class="fas fa-shopping-bag fa-4x text-muted mb-3"></i>
                        <h3>Aucune commande</h3>
                        <p class="text-muted mb-4">Vous n'avez pas encore passé de commande sur ce site.</p>
                        <a href="{{ path('shop_cart', {siteName: site.internalName}) }}" class="btn btn-primary">
                            <i class="fas fa-shopping-cart" style="margin-right: 8px;"></i>Découvrir la boutique
                        </a>
                    </div>
                </div>
            {% else %}
                <div class="row">
                    {% for order in orders %}
                    <div class="col-lg-6 mb-4">
                        <div class="card order-card h-100 shadow-sm">
                            <div class="card-body p-4">
                                <div class="order-header">
                                    <div class="d-flex justify-content-between align-items-start">
                                        <div>
                                            <h5 class="order-title">
                                                <i class="fas fa-receipt" style="margin-right: 8px;"></i>{{ order.orderNumber }}
                                            </h5>
                                            <small class="text-muted d-block" style="margin-top: 8px;">
                                                <i class="fas fa-calendar" style="margin-right: 8px;"></i>{{ order.createdAt|date('d/m/Y à H:i') }}
                                            </small>
                                        </div>
                                        <span class="badge bg-{{ order.status == 'paid' or order.status == 'completed' ? 'success' : (order.status == 'cancelled' ? 'danger' : 'warning') }} status-badge">
                                            {{ order.status|upper }}
                                        </span>
                                    </div>
                                </div>

                                <div class="order-summary">
                                    <div class="summary-item">
                                        <i class="fas fa-box" style="margin-right: 12px;"></i>
                                        <span><strong>{{ order.items|length }}</strong> article(s)</span>
                                    </div>
                                    <div class="summary-item">
                                        <i class="fas fa-credit-card" style="margin-right: 12px;"></i>
                                        <span>{{ order.paymentMethodName }}</span>
                                    </div>
                                    <div class="summary-item amount-item">
                                        <i class="fas fa-euro-sign" style="margin-right: 12px;"></i>
                                        <span><strong class="text-primary" style="font-size: 1.25rem;">{{ order.totalAmount|number_format(2, ',', ' ') }} €</strong></span>
                                    </div>
                                </div>

                                {% if order.isPaid %}
                                    <div class="alert alert-success" style="display: flex; align-items: center; padding: 12px 16px; margin-bottom: 16px;">
                                        <i class="fas fa-check-circle" style="margin-right: 12px;"></i>
                                        <span>Payé le {{ order.paidAt|date('d/m/Y') }}</span>
                                    </div>
                                {% elseif order.status == 'pending' and order.paymentMethod == 'bank_transfer' %}
                                    <div class="alert alert-warning" style="display: flex; align-items: center; padding: 12px 16px; margin-bottom: 16px;">
                                        <i class="fas fa-clock" style="margin-right: 12px;"></i>
                                        <span>En attente du virement bancaire</span>
                                    </div>
                                {% endif %}

                                <div class="order-actions">
                                    <a href="{{ path('my_account_order_detail', {siteName: site.internalName, orderId: order.id}) }}"
                                       class="btn btn-primary">
                                        <i class="fas fa-eye" style="margin-right: 8px;"></i>Détails
                                    </a>

                                    {% if order.invoice %}
                                        <a href="{{ path('my_account_download_invoice', {siteName: site.internalName, orderId: order.id}) }}"
                                           class="btn btn-outline-primary"
                                           target="_blank">
                                            <i class="fas fa-file-pdf" style="margin-right: 8px;"></i>Facture
                                        </a>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            {% endif %}
        </div>
    </div>
</div>

<style>
/* Header Section */
.header-section {
    padding-bottom: 2rem;
    border-bottom: 2px solid #e2e8f0;
}

/* Page Title */
h1 {
    color: #1e293b !important;
    font-weight: 700;
    font-size: 2rem;
}

/* Text Colors */
.card-body,
.card-body p,
.card-body h5,
.card-body strong,
.card-body small,
.card-body span {
    color: #1e293b !important;
}

.text-muted {
    color: #64748b !important;
}

/* Order Cards */
.order-card {
    border: none;
    border-radius: 16px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background: white;
}

.order-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.12) !important;
}

.order-header {
    padding-bottom: 1rem;
    border-bottom: 2px solid #f1f5f9;
}

.order-card h5 {
    color: #1e293b !important;
    font-weight: 700;
    font-size: 1.1rem;
}

/* Order Summary */
.order-summary {
    padding: 1rem 0;
}

.summary-item {
    display: flex;
    align-items: center;
    padding: 0.5rem 0;
    color: #1e293b !important;
    font-size: 0.95rem;
}

.summary-item i {
    color: var(--site-primary-color, #10b981);
    font-size: 1rem;
    flex-shrink: 0;
}

.amount-item {
    padding-top: 1rem;
    margin-top: 0.5rem;
    border-top: 1px dashed #e2e8f0;
}

/* Status Badge */
.status-badge {
    font-size: 0.7rem;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* Buttons */
.btn {
    font-weight: 600;
    border-radius: 10px;
    transition: all 0.3s ease;
    padding: 12px 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-primary {
    background: linear-gradient(135deg, var(--site-primary-color, #10b981) 0%, #059669 100%);
    border: none;
    color: white !important;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.btn-outline-primary {
    border: 2px solid var(--site-primary-color, #10b981);
    color: var(--site-primary-color, #10b981) !important;
    background: transparent;
}

.btn-outline-primary:hover {
    background: var(--site-primary-color, #10b981);
    border-color: var(--site-primary-color, #10b981);
    color: white !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.btn-outline-secondary {
    color: #64748b !important;
    border: 2px solid #e2e8f0;
    padding: 0.5rem 1.25rem;
}

.btn-outline-secondary:hover {
    background: #64748b;
    border-color: #64748b;
    color: white !important;
}

/* Text Primary Override */
.text-primary {
    color: var(--site-primary-color, #10b981) !important;
}

/* Alerts */
.alert {
    color: #1e293b !important;
    border-radius: 10px;
    font-size: 0.9rem;
}

.alert-success {
    background: #d1fae5;
    border: 1px solid #10b981;
}

.alert-warning {
    background: #fef3c7;
    border: 1px solid #f59e0b;
}

.alert i {
    font-size: 1.1rem;
}

/* Order Actions */
.order-actions {
    display: flex;
    gap: 12px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.order-actions .btn {
    flex: 1;
    min-width: 120px;
}

/* Responsive */
@media (max-width: 768px) {
    h1 {
        font-size: 1.5rem;
    }

    .header-section {
        margin-bottom: 2rem;
    }

    .order-card .card-body {
        padding: 1.5rem !important;
    }
}
</style>
{% endblock %}