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

<div class="w-full px-5 s:px-9 flex flex-col gap-3">
    <!-- <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 Business Type"
                    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">
            <button
                class="w-full s:w-fit text-base px-3 py-2 bg-blue-500 text-white outline-none border border-blue-500 rounded-md cursor-pointer hover:bg-white hover:text-blue-500 addBusinessTypeButton"
                data-modal-url="{% url 'addbusinesstype' %}">Add
                Business Type</button>
        </div>
    </div> -->

    <!-- INVOICES -->
    <div class="w-full bg-white rounded-md h-fit shadow-md p-5">
        <div class="overflow-x-auto border border-gray-300 rounded-md">
            <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">
                            #
                        </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">
                            Title
                        </th>
                        <th scope="col"
                            class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">
                            Description
                        </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 whitespace-nowrap">
                            Amount
                        </th>
                    </tr>
                </thead>

                <!-- TABLE BODY -->
                <tbody class="bg-white divide-y divide-gray-200">
                    <tr>
                        <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
                            <p class="text-slate-800">1</p>
                        </td>

                        <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
                            <p class="text-slate-800">20-2-2024</p>
                        </td>

                        <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
                            <p class="text-slate-800">Invoice 1</p>
                        </td>

                        <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
                            <p class="text-slate-800">Invoice description section</p>
                        </td>

                        <td class="px-6 py-4 text-center text-sm border-r border-gray-300 bg-yellow-500">
                            <p class="text-white">Pending</p>
                        </td>

                        <td class="px-6 py-4 text-center text-sm">
                            <p class="text-slate-800">200</p>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

</div>

{% endblock %}