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

<div class="w-full flex flex-col gap-3">
    <!-- INVOICES -->
    <div class="w-full bg-white rounded-md h-fit shadow-md p-5">
        <h1 class="text-secondosiblue text-[25px]">My Invoices</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">
                            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">
                            Due Date
                        </th>
                        <th scope="col"
                            class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
                            Items
                        </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">
                            Amount
                        </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 invoice in invoices %}
                    <tr>
                        <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
                            <p class="text-secondosiblue">{{invoice.invoice_number}}</p>
                        </td>

                        <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
                            <p class="text-secondosiblue">
                                {% if invoice.order.orderpayment_set.all.last.date_due %}
                                    {{invoice.order.orderpayment_set.all.last.date_due}}
                                {% else %}
                                  - 
                                {% endif %}
                            </p>
                        </td>

                        <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
                            <div class="w-full h-full flex justify-center items-center">
                                <ul class="text-secondosiblue font-light list-disc px-5">
                                    {% for item in invoice.order.orderitem_set.all %}
                                    <li>{{item.item.title}}</li>
                                    {% endfor %}
                                </ul>
                            </div>
                        </td>

                        <td class="px-6 py-4 text-center text-sm border-r border-gray-300 {% if invoice.status == 'Not Completed' %}bg-red-500{% elif invoice.status == 'Completed' %}bg-green-700{% endif %}">
                            <p class="text-white">{{invoice.status}}</p>
                        </td>

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

                        <td class="px-6 py-4">
                            <div class="w-full flex justify-center items-center gap-3">

                                <a href="{{invoice.pdf.url}}" target="_blank">
                                    <button
                                        class="w-fit px-3 py-2 rounded-md bg-gray-100 border border-gray-100 shadow-md cursor-pointer hover:scale-105 duration-300 transition-transform">
                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                            stroke-width="1.5" stroke="currentColor" class="w-4 h-4 text-secondosiblue">
                                            <path stroke-linecap="round" stroke-linejoin="round"
                                                d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3" />
                                        </svg>
                                    </button>
                                </a>

                                {% if invoice.status == 'Not Completed' %}
                                <a href="{% url 'customerorderdetails' invoice.order.order_id %}">
                                    <button
                                        class="flex justify-center items-center gap-2 px-3 py-1 rounded-md bg-osiblue text-white border border-osiblue cursor-pointer hover:bg-white hover:text-osiblue duration-300">
                                        Pay Now
                                    </button>
                                </a>
                                {% else %}
                                    <button
                                        class="flex justify-center items-center gap-2 px-3 py-1 rounded-md bg-osiblue text-white  bg-opacity-40" disabled>
                                        Pay Now
                                    </button>
                                {% endif %}
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

{% endblock %}