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

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>


<div class="w-full xxlg1:w-[75%]">
    <div class="w-full h-fit bg-white rounded-md shadow-md p-5">
        <h1 class="text-secondosiblue text-[30px] font-semibold">Invoices</h1>

        <div
            class="w-full py-4 px-3 bg-gray-200 rounded-md shadow-md mt-4 flex flex-col s:flex-row justify-between gap-3 items-center">
            <div class="w-full s:w-fit flex justify-start items-center gap-5">
                <div class="relative h-fit w-full s:w-fit flex items-center">
                    <input type="text" placeholder="Enter Invoice Number"
                        class="py-2 px-3 border border-gray-300 rounded-md outline-none w-full s:w-[300px] h-[40px] relative">
                    <button
                        class="text-gray-500 text-xl outline-none border-none cursor-pointer absolute right-2 bg-white">
                        <i class="fa fa-search"></i>
                    </button>
                </div>
            </div>
            <div class="w-full s:w-fit">
                <a href="">
                    <button
                        class="w-full s:w-fit text-base px-3 py-2 bg-osiblue text-white outline-none border border-osiblue rounded-md cursor-pointer hover:bg-white hover:text-osiblue duration-300">Add
                        Invoice</button>
                </a>
            </div>
        </div>

        <div class="overflow-x-auto border border-gray-300 rounded-md mt-4">
            <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">
                            Invoice Number
                        </th>
                        <th scope="col"
                            class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
                            Customer
                        </th>
                        <th scope="col"
                            class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
                            Order
                        </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 invoice in invoices %}
                    <tr>
                        <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
                            <p class="text-slate-800">{{invoice.invoice_number}}</p>
                        </td>

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

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

                        <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
                            <p class="text-slate-800">{{invoice.date_created}}</p>
                        </td>

                        <td class="px-6 py-4">
                            <div class="w-full flex justify-center items-center">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-[18px] text-blue-500">
                                    <path fill-rule="evenodd" d="M5.625 1.5H9a3.75 3.75 0 0 1 3.75 3.75v1.875c0 1.036.84 1.875 1.875 1.875H16.5a3.75 3.75 0 0 1 3.75 3.75v7.875c0 1.035-.84 1.875-1.875 1.875H5.625a1.875 1.875 0 0 1-1.875-1.875V3.375c0-1.036.84-1.875 1.875-1.875Zm5.845 17.03a.75.75 0 0 0 1.06 0l3-3a.75.75 0 1 0-1.06-1.06l-1.72 1.72V12a.75.75 0 0 0-1.5 0v4.19l-1.72-1.72a.75.75 0 0 0-1.06 1.06l3 3Z" clip-rule="evenodd" />
                                    <path d="M14.25 5.25a5.23 5.23 0 0 0-1.279-3.434 9.768 9.768 0 0 1 6.963 6.963A5.23 5.23 0 0 0 16.5 7.5h-1.875a.375.375 0 0 1-.375-.375V5.25Z" />
                                </svg>      
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>


{% endblock %}