{% extends "layouts/base.html" %}
{% load static %}
{% block title %}My Orders - SavvyGT{% endblock %}
{% include 'partials/header.html' %}

{% block content %}

<!-- Wrapper start -->
<div id="wrapper" class="wrap">
    <div class="breadcrumbs panel z-1 py-2 bg-primary-50 text-dark">
        <div class="container max-w-xl">
            <ul class="breadcrumb nav-x justify-center gap-1 fs-7 sm:fs-6 fw-medium m-0">
                <li><a href="{% url 'products' %}">Home</a></li>
                <li><i class="unicon-chevron-right"></i></li>
                <li><span class="opacity-60">My Orders</span></li>
            </ul>
        </div>
    </div>

    <div class="section py-4 lg:py-6 xl:py-8">
        <div class="container max-w-lg">
            <div class="panel vstack gap-4 lg:gap-6 xl:gap-8"
                data-anime="onview: -100; targets: >*; translateY: [48, 0]; opacity: [0, 1]; easing: easeOutCubic; duration: 500; delay: anime.stagger(100, {start: 500});">
                <header class="shop-header panel vstack justify-center gap-2 lg:gap-4 text-center">
                    <div class="panel">
                        <h1 class="h3 lg:h1 m-0">My Orders</h1>
                    </div>
                </header>
                {% if messages %}
                {% for message in messages %}
                <p class="error text-center text-danger">{{ message }}</p>
                {% endfor %}
                {% endif %}
                {% if purchases %}
                <div class="panel purchase-history">
                    <div class="panel max-h-sm overflow-auto border border-gray-50 rounded">
                       <table class="table datatable-export table-striped table-bordered">
                            <thead class="bg-gray-25 text-black sticky-top ft-secondary z-1">
                                <tr>
                                    <th class="w-100px"></th>
                                    <th class="w-1/3">Product</th>
                                    <th class="w-1/6">Quantity</th>
                                    <th class="w-1/6">Total Price</th>
                                    <th class="w-1/4">Order Status</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for purchase in purchases %}
                                <tr>
                                    <td>
                                        <div class="image panel w-48px lg:w-72px">
                                            <div class="ratio ratio-1x1 rounded uc-transition-toggle overflow-hidden">
                                                {% if purchase.product %}
                                                <img class="media-cover image uc-transition-scale-up uc-transition-opaque"
                                                    src="{% static 'assets/images/common/'|add:purchase.product.image|default:'/static/assets/images/common/default.jpg' %}"
                                                    alt="{{ purchase.product.name|default:'Deleted Product' }}">
                                                <a href="{% url 'product_details' purchase.product.id %}"
                                                    class="position-cover"
                                                    data-caption="{{ purchase.product.name|default:'Deleted Product' }}"></a>
                                                {% else %}
                                                <img class="media-cover image uc-transition-scale-up uc-transition-opaque"
                                                    src="{% static 'assets/images/common/default.jpg' %}"
                                                    alt="Deleted Product">
                                                <span class="position-cover" data-caption="Deleted Product"></span>
                                                {% endif %}
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <h5 class="title h6 m-0">
                                            {% if purchase.product %}
                                            <a href="{% url 'product_details' purchase.product.id %}"
                                                class="text-none">{{ purchase.product.name|default:'Deleted Product'}}</a>
                                            {% else %}
                                            <span>Deleted Product</span>
                                            {% endif %}
                                        </h5>
                                    </td>
                                    <td>
                                        <span class="quantity">{{ purchase.quantity }}</span>
                                    </td>
                                    <td>
                                        <span class="total-price">${{ purchase.total_price|floatformat:2 }}</span>
                                    </td>
                                    <td>
                                        <span class="badge
                                            {% if purchase.order_status == 'Out for delivery' %}
                                            bg-warning text-dark
                                            {% elif purchase.order_status == 'Delivered' %}
                                            bg-success text-white
                                            {% else %}
                                            bg-secondary text-white
                                            {% endif %}">
                                            {{ purchase.order_status }}
                                        </span>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
                {% else %}
                <p class="error text-center text-danger">No purchase history found.</p>
                {% endif %}
            </div>
        </div>
    </div>
</div>
<!-- Wrapper end -->

{% endblock %}