{% extends 'shop/base.html' %}
{% block title %}Order #{{ order.id }} - Nana Tradings{% endblock %}

{% block content %}
<div class="container my-5">
    <h1 class="text-center">Order Details</h1>
    <div class="card shadow-lg p-4">
        <h4>Order #{{ order.id }}</h4>
        <p><strong>Date:</strong> {{ order.created_at|date:"F d, Y" }}</p>
        <p><strong>Status:</strong> 
            <span class="badge 
                {% if order.status == 'Pending' %} bg-warning text-dark
                {% elif order.status == 'Processing' %} bg-primary
                {% elif order.status == 'Shipped' %} bg-info
                {% elif order.status == 'Delivered' %} bg-success
                {% elif order.status == 'Cancelled' %} bg-danger
                {% else %} bg-secondary {% endif %}">
                {{ order.status }}
            </span>
        </p>
        <p><strong>Total:</strong> ${{ order.total_price }}</p>
    </div>

    <h3 class="mt-4">Items in this Order</h3>
    <div class="row">
        {% for item in order_items %}
        <div class="col-12 col-md-6 mb-4">
            <div class="card shadow-sm">
                <div class="row g-0">
                    <div class="col-md-4">
                        <img src="{{ item.product.image.url }}" class="img-fluid rounded-start" alt="{{ item.product.name }}">
                    </div>
                    <div class="col-md-8">
                        <div class="card-body">
                            <h5 class="card-title">{{ item.product.name }}</h5>
                            <p class="card-text">Quantity: {{ item.quantity }}</p>
                            <p class="card-text">Price: ${{ item.price }}</p>
                            <p class="card-text text-success">Subtotal: ${{ item.get_total_price }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
</div>
{% endblock %}