furry/shop/templates/shop/my_orders.html

{% extends "shop/base.html" %}
{% load i18n %}

{% block title %}{% trans "My Orders" %} - Fursuit Shop{% endblock %}

{% block extra_css %}
<style>
.order-card {
    transition: transform 0.2s ease;
}

.order-card:hover {
    transform: translateY(-2px);
}

.status-badge {
    font-size: 0.875rem;
}

.status-pending {
    background-color: var(--bs-warning);
    color: var(--bs-dark);
}

.status-confirmed {
    background-color: var(--bs-info);
}

.status-in_progress {
    background-color: var(--bs-primary);
}

.status-completed {
    background-color: var(--bs-success);
}

.status-cancelled {
    background-color: var(--bs-danger);
}

.progress-timeline {
    position: relative;
    padding-left: 45px;
}

.progress-timeline::before {
    content: '';
    position: absolute;
    left: 20px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--bs-gray-300);
}

.timeline-item {
    position: relative;
    padding-bottom: 1.5rem;
}

.timeline-item:last-child {
    padding-bottom: 0;
}

.timeline-dot {
    position: absolute;
    left: -45px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--bs-primary);
    border: 2px solid white;
    box-shadow: 0 0 0 2px var(--bs-primary);
}

.timeline-date {
    font-size: 0.875rem;
    color: var(--bs-gray-600);
}
</style>
{% endblock %}

{% block content %}
<div class="container py-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="h2 mb-0">{% trans "My Orders" %}</h1>
        <a href="{% url 'shop:product_list' %}" class="btn btn-outline-primary">
            <i class="bi bi-cart-plus"></i> 
            {% trans "Continue Shopping" %}
        </a>
    </div>

    {% if orders %}
        <div class="row g-4">
            {% for order in orders %}
                <div class="col-12">
                    <div class="card order-card">
                        <div class="card-body">
                            <div class="row align-items-center">
                                <!-- Bestellnummer und Status -->
                                <div class="col-md-3">
                                    <h5 class="card-title mb-1">
                                        {% trans "Order" %} #{{ order.id }}
                                    </h5>
                                    <div class="mb-2">
                                        <span class="badge status-{{ order.status }} status-badge">
                                            {{ order.get_status_display }}
                                        </span>
                                    </div>
                                    <div class="text-muted small">
                                        {{ order.created_at|date:"d.m.Y" }}
                                    </div>
                                </div>

                                <!-- Bestellte Artikel -->
                                <div class="col-md-5">
                                    <h6 class="mb-2">{% trans "Order Items" %}</h6>
                                    {% for product in order.products.all %}
                                        <div class="d-flex align-items-center mb-1">
                                            {% if product.image %}
                                                <img src="{{ product.image.url }}" 
                                                     alt="{{ product.name }}"
                                                     class="rounded"
                                                     style="width: 40px; height: 40px; object-fit: cover;">
                                            {% endif %}
                                            <div class="ms-2">
                                                {{ product.name }}
                                                {% if product.product_type == 'fursuit' %}
                                                    <span class="badge bg-primary">{% trans "Fursuit" %}</span>
                                                {% else %}
                                                    <span class="badge bg-success">{% trans "Printed Item" %}</span>
                                                {% endif %}
                                            </div>
                                        </div>
                                    {% endfor %}
                                </div>

                                <!-- Zahlungsmethode und Gesamtbetrag -->
                                <div class="col-md-2">
                                    <h6 class="mb-2">{% trans "Payment" %}</h6>
                                    <p class="mb-1">
                                        {% if order.payment_method == 'paypal' %}
                                            <i class="bi bi-paypal"></i> PayPal
                                        {% elif order.payment_method == 'credit_card' %}
                                            <i class="bi bi-credit-card"></i> {% trans "Credit Card" %}
                                        {% else %}
                                            <i class="bi bi-bank"></i> {% trans "Bank Transfer" %}
                                        {% endif %}
                                    </p>
                                    <p class="fw-bold mb-0">
                                        {{ order.total_price }} €
                                    </p>
                                </div>

                                <!-- Fortschritt -->
                                <div class="col-md-2">
                                    <button class="btn btn-outline-primary w-100" 
                                            type="button"
                                            data-bs-toggle="collapse"
                                            data-bs-target="#progress-{{ order.id }}"
                                            aria-expanded="false">
                                        <i class="bi bi-clock-history"></i>
                                        {% trans "Show Progress" %}
                                    </button>
                                </div>
                            </div>

                            <!-- Fortschritts-Timeline -->
                            <div class="collapse mt-3" id="progress-{{ order.id }}">
                                <div class="progress-timeline">
                                    {% for update in order.progress_updates.all %}
                                        <div class="timeline-item">
                                            <div class="timeline-dot"></div>
                                            <h6 class="mb-1">{{ update.title }}</h6>
                                            <div class="timeline-date mb-2">
                                                {{ update.created_at|date:"d.m.Y H:i" }}
                                            </div>
                                            <p class="mb-0">{{ update.description }}</p>
                                            {% if update.image %}
                                                <img src="{{ update.image.url }}" 
                                                     alt="{% trans 'Progress Image' %}"
                                                     class="img-fluid rounded mt-2"
                                                     style="max-height: 200px;">
                                            {% endif %}
                                        </div>
                                    {% endfor %}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
    {% else %}
        <div class="text-center py-5">
            <i class="bi bi-inbox display-1 text-muted mb-4"></i>
            <h2>{% trans "No orders yet" %}</h2>
            <p class="text-muted">
                {% trans "You haven't placed any orders yet." %}
            </p>
            <a href="{% url 'shop:product_list' %}" class="btn btn-primary">
                <i class="bi bi-shop"></i> 
                {% trans "Start Shopping" %}
            </a>
        </div>
    {% endif %}
</div>
{% endblock %}