74 lines
2.5 KiB
HTML
74 lines
2.5 KiB
HTML
{% 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 %}
|