{% extends "customer_main.html" %}
{%load static%}

{% block content %}

<div class="w-full flex flex-col gap-3">
    <div class="w-full bg-white rounded-md h-fit shadow-md p-5">
        <h1 class="text-secondosiblue text-[25px]">My Orders</h1>


        <div class="overflow-x-auto border border-gray-300 rounded-md mt-4 tableContainer">
            <table class="min-w-full divide-y">
                <!-- TABLE HEADER -->
                <thead class="bg-gray-50">
                    <tr>
                        <th scope="col"
                            class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
                            Order ID
                        </th>
                        <th scope="col"
                            class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
                            Product
                        </th>
                        <th scope="col"
                            class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
                            Cost
                        </th>
                        <th scope="col"
                            class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
                            Status
                        </th>
                        <th scope="col" class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
                           Date Created
                        </th>
                        <th scope="col" class="px-6 py-3 text-sm font-medium text-gray-500 uppercase whitespace-nowrap">
                            Actions
                         </th>
                    </tr>
                </thead>

                <!-- TABLE BODY -->
                <tbody class="bg-white divide-y divide-gray-200">

                    {% for order in orders %}
                    <tr>
                        <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
                            <p class="text-secondosiblue">{{order.order_id}}</p>
                        </td>

                        <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
                            {% for item in order.orderitem_set.all %}
                            <p class="text-secondosiblue">{{item.item.title}}</p>
                            {% endfor %}
                        </td>

                        <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
                            <p class="text-secondosiblue">${{order.get_cart_total}}</p>
                        </td>

                        <td class="px-6 py-4 text-center text-sm border-r border-gray-300 {% if order.orderstatus_set.all.last.status  == 'Completed' %}  bg-green-700  {% elif order.orderstatus_set.all.last.status  == 'Pending' %}  bg-yellow-500  {% elif order.orderstatus_set.all.last.status  == 'Cancelled' %} bg-red-500 {% elif order.orderstatus_set.all.last.status  == 'In Progress' %} bg-orange-500 {% else %} bg-gray-400 {% endif %}">
                            <p class="text-white">{{ order.orderstatus_set.last.status }}</p>
                        </td>

                        <td class="px-6 py-4 text-center text-sm border-r border-gray-300"> 
                            <p class="text-secondosiblue">{{order.get_purchased_date}}</p>
                        </td>

                        <td class="px-6 py-4 text-center text-sm"> 
                            <div class="w-full flex justify-center items-center gap-3">
                                <a href="{% url 'customerorderdetails' order.order_id %}">
                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-[18px] text-fifthosiblue hover:scale-110 duration-500 transition-transform">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" />
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
                                    </svg>   
                                </a>
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>


{% endblock %}