{% extends 'base.html' %}
{% load static %}

{% block extra_head %}
<link rel="stylesheet" href="{% static 'css/product.css' %}">
{% endblock %}

{% block content %}
<section class="page-header">
    <div>
        <h1>Order #{{ order.id }}</h1>
        <p>Placed on {{ order.created_at|date:"F d, Y" }} | <span class="status-tag status-{{ order.status|lower }}">{{ order.status }}</span></p>
    </div>
</section>

<div class="order-detail-page">
    <div class="order-detail-box">
        <h2>Tracking Timeline</h2>
        <div class="timeline">
            {% for step in timeline %}
            <div class="timeline-step {{ step.state }}">
                <div class="timeline-dot"></div>
                <div class="timeline-label">{{ step.label }}</div>
            </div>
            {% endfor %}
        </div>

        <h2>Order Summary</h2>
        <div class="summary-row">
            <span>Payment method</span>
            <strong>{{ order.payment_method }}</strong>
        </div>
        <div class="summary-row">
            <span>Total amount</span>
            <strong>Rs. {{ order.total_price|floatformat:2 }}</strong>
        </div>
        <div class="summary-row">
            <span>Customer</span>
            <strong>{{ order.full_name|default:order.user.username }}</strong>
        </div>
        <div class="summary-row">
            <span>Phone</span>
            <strong>{{ order.phone|default:'-' }}</strong>
        </div>
        <div class="summary-row">
            <span>Address</span>
            <strong>{{ order.address|default:'-' }}</strong>
        </div>

        <h3>Items</h3>
        <div class="order-items">
            {% for item in order.items.all %}
                <div class="order-item-row">
                    <div class="order-item-left">
                        <div class="order-item-avatar">
                            {% if item.product.image %}
                            <img src="{{ item.product.image.url }}" alt="{{ item.product.name }}">
                            {% else %}
                            <span class="avatar-placeholder">{{ item.product.name|slice:":1"|upper }}</span>
                            {% endif %}
                        </div>
                        <div>
                            <h4>{{ item.product.name }}</h4>
                            <p>Quantity: {{ item.quantity }}</p>
                        </div>
                    </div>
                    <strong>Rs. {{ item.price|floatformat:2 }}</strong>
                </div>
            {% endfor %}
        </div>
    </div>
</div>
{% endblock %}