{% extends 'cPanel/base.html' %}
{% load cms_tags %}

{% block content %}
<main class="p-4 sm:p-10 space-y-6">
    <div class="flex flex-col space-y-6 md:space-y-0 md:flex-row justify-between">
        <div class="mr-6">
            <h1 class="text-4xl font-semibold mb-2">Enquiry List </h1>
            <!-- <h2 class="text-gray-600 ml-0.5">Mobile UX/UI Design course</h2> -->
        </div>

    </div>
    <section class=" w-full">
        {% if page_obj %}
        <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for Customer.." class="rounded w-full mb-0.5" title="Type in a name">

        <table id="myTable" class="border-2 w-full">
            <thead>
                <tr class="text-justify bg-[#E59D23] text-white">
                    <th class="border-2 pl-4">Date</th>
                    <th class="border-2 pl-4">Customer</th>
                    <th class="border-2 pl-4">Contact</th>
                    <th class="border-2 pl-4">Email</th>
                    <th class="border-2 pl-4">View</th>
                    <th class="border-2 pl-4">Status</th>
                    {% if user.is_superuser %}
                    <th class="border-2 pl-4">Delete</th>
                    {% endif %}
                </tr>
            </thead>
            <tbody>
                {% for enq in page_obj %}
                <tr class="even:bg-[#FFECCC] hover:bg-[#8B7356] hover:text-white">
                    <td class="border-2 pl-4">
                        <a href="{% url 'enq_detail' enq.id %}">

                            {{enq.createdOn |date:'d M, y'}}
                        </a>
                    </td>
                    <td class="border-2 pl-4">
                        <a href="{% url 'enq_detail' enq.id %}">

                            {{enq.name}}&nbsp;
                        </a>
                    </td>
                    <td class="border-2 pl-4">
                        <a href="{% url 'enq_detail' enq.id %}">
                            {% if enq.contact %}{{enq.contact}}{% endif %}
                        </a>

                    </td>

                    <td class="border-2 pl-4">
                        <a href="{% url 'enq_detail' enq.id %}">
                            {% if enq.email %}{{enq.email}}{% endif %}
                        </a>
                    </td>
                    <td class="border-2 pl-4">

                        <a href="{% url 'enq_detail' enq.id %}" class="text-xl">
                            &#128065;

                        </a>

                    </td>
                    <td
                        class="border-2 pl-4 hover:text-white {% if enq.enqStatus == 'Pending' %}text-red-600{% elif enq.enqStatus == 'Viewed' %}text-yellow-600{% elif enq.enqStatus == 'Follow up' %} text-blue-800{% elif enq.enqStatus == 'Done' %}text-green-700{% endif %}">
                        <a href="{% url 'enq_detail' enq.id %}" class="text-xl">

                            {{enq.enqStatus}}
                        </a>
                    </td>
                    {% if user.is_superuser %}

                    <td class="border-2 pl-4">
                        <div x-data="{ open: false }">
                            <button x-on:click="open = ! open">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="red"
                                    class="w-4 h-4"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
                                    <path
                                        d="M135.2 17.7L128 32H32C14.3 32 0 46.3 0 64S14.3 96 32 96H416c17.7 0 32-14.3 32-32s-14.3-32-32-32H320l-7.2-14.3C307.4 6.8 296.3 0 284.2 0H163.8c-12.1 0-23.2 6.8-28.6 17.7zM416 128H32L53.2 467c1.6 25.3 22.6 45 47.9 45H346.9c25.3 0 46.3-19.7 47.9-45L416 128z" />
                                </svg> </button>

                            <div x-show="open" x-on:click.outside="open = false">
                                <div
                                    class="fixed  z-50 inset-0 bg-gray-900 bg-opacity-60 overflow-y-auto h-full w-full px-4 ">
                                    <div class="relative top-40 mx-auto shadow-xl rounded-md bg-main max-w-xl">

                                        <div class="p-6  text-justify">
                                            <h1 class="text-2xl text-center mb-4">

                                                Do you want to Delete?

                                            </h1>
                                            <div class="flex justify-center gap-4">


                                                <a href="{% url 'enq_delete' enq.id %}?page={{page_obj.number}}"
                                                    class="mt-6  text-blue-900 font-bold bg-white focus:ring-4 border border-gray-200 font-medium inline-flex items-center rounded-lg text-base px-6 py-2.5 text-center"
                                                    data-modal-toggle="delete-user-modal">
                                                    Yes
                                                </a>
                                                <button x-on:click="open = ! open" class="mt-6 text-white font-bold bg-red-500  focus:ring-4 border
                                                    border-gray-200 font-medium inline-flex items-center rounded-lg
                                                    text-base px-6 py-2.5 text-center"
                                                    data-modal-toggle="delete-user-modal">
                                                    No
                                                </button>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>


                    </td>
                    {% endif %}
                </tr>
                {% endfor %}
            </tbody>
        </table>
        {% else %}

        <h1 class="text-5xl text-center text-red-600">No Record Found</h1>
        {% endif %}
    </section>


    <div class="pagination flex w-full justify-center font-bold">
        <span class="step-links">
            {% if page_obj.has_previous %}
            <a href="?page=1" class="bg-indigo-200 px-2 py-0.5 text-lg rounded mr-1">&laquo; </a>
            <a href="?page={{ page_obj.previous_page_number }}"
                class="bg-indigo-200 px-2 py-0.5 text-lg rounded">Previous</a>
            {% endif %}

            <span class="current">
                Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}.
            </span>

            {% if page_obj.has_next %}
            <a href="?page={{ page_obj.next_page_number }}" class="bg-indigo-200 px-2 py-0.5 text-lg rounded">Next</a>
            <a href="?page={{ page_obj.paginator.num_pages }}" class="bg-indigo-200 px-2 py-0.5 text-lg rounded">
                &raquo;</a>
            {% endif %}
        </span>
    </div>

</main>
{% endblock content %}


{% block script %}
<script>
    // console.log(JSON.parse('{{page_obj.number}}'));
    localStorage.setItem('enqPage',JSON.parse('{{page_obj.number}}'))
    function myFunction() {
        var input, filter, table, tr, td, i, txtValue;
        input = document.getElementById("myInput");
        filter = input.value.toUpperCase();
        table = document.getElementById("myTable");
        tr = table.getElementsByTagName("tr");
        for (i = 0; i < tr.length; i++) {
            var allTDs = tr[i].getElementsByTagName("td");

            for (index = 0; index < allTDs.length; index++) {
                txtValue = allTDs[index].textContent || allTDs[index].innerText;
                if (txtValue.toUpperCase().indexOf(filter) > -1) {
                    tr[i].style.display = "";
                    break;
                } else {
                    tr[i].style.display = "none";
                }
            }
        }
    }
</script>
{% endblock script %}