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

{% block pageTitle %}
<h1 class="text-4xl font-semibold mb-2">Enquiry List </h1>

{% endblock pageTitle %}
{% block content %}
<script>
   var ChkbxTable = (() => {
            'use strict';

            NodeList.prototype.toArray = function () {
                return [].slice.call(this);
            };

            var
                checkboxCheckAll = null,
                checkboxes = null,
                checkboxCounter = null,
                actionBtns = null,
                options = {},
                defaults = {
                    actionBtnAttr: 'chklist-btn',
                    actionBtnClass: 'chklist-btn-disabled',
                    checkboxAllAttr: 'chklist-all',
                    checkboxAttr: 'chklist',
                    checkboxCountAttr: 'chklist-count'
                };

            var _setOptions = config => {
                if (typeof config === 'object') {
                    for (var key in defaults) {
                        if (!defaults.hasOwnProperty(key)) { continue; }
                        options[key] = (typeof config[key] === 'undefined' ? defaults[key] : config[key]);
                    }
                }
            };

            var _getElements = () => {
                checkboxCheckAll = document.querySelector(`[${options.checkboxAllAttr}]`);
                checkboxes = document.querySelectorAll(`[${options.checkboxAttr}]`).toArray();
                checkboxCounter = document.querySelector(`[${options.checkboxCountAttr}]`);
                actionBtns = document.querySelectorAll(`[${options.actionBtnAttr}]`).toArray();
            };

            var _enableAction = btns => {
                btns.forEach(btn => {
                    btn.classList.remove(options.actionBtnClass);
                    btn.disabled = false;
                });
            };

            var _disableAction = btns => {
                btns.forEach(btn => {
                    btn.classList.add(options.actionBtnClass);
                    btn.disabled = true;
                });
            };

            var _actionManager = (checkbox, count) => {
                if (count > 0) {
                    _enableAction.call(checkbox, actionBtns);
                } else if (count === 0) {
                    _disableAction.call(checkbox, actionBtns);
                }
            }

            var _checkSelectAll = checkbox => {
                checkbox.checked = true;
            };

            var _uncheckSelectAll = checkbox => {
                checkbox.checked = false;
            };

            var _selectAllManager = (count, checkboxes) => {
                if (count === checkboxes.length) {
                    _checkSelectAll(checkboxCheckAll);
                } else if (count < checkboxes.length) {
                    _uncheckSelectAll(checkboxCheckAll);
                }
            };

            var _outputCheckboxCount = (element, count) => {
                var countText = count > 1 ? 'items selected' : 'item selected';
                element.innerHTML = `${count}${element.getAttribute('chklist-count')} ${countText}`;
            };

            var _checkboxesManager = checkboxes => {
                var newThread = setTimeout(() => {
                    var checkboxCount = checkboxes.filter(c => c.checked).length;

                    _actionManager(this, checkboxCount);
                    _selectAllManager(checkboxCount, checkboxes);
                    _outputCheckboxCount(checkboxCounter, checkboxCount);
                }, 0);
            };

            var triggerEvent = (element, event) => {
                if ('createEvent' in document) {
                    var evt = document.createEvent('HTMLEvents');
                    evt.initEvent(event, false, true);
                    element.dispatchEvent(evt);
                } else {
                    element.fireEvent(`on${event}`);
                }
            };

            var _selectAll = (self, checkboxes) => {
                checkboxes.forEach(checkbox => {
                    triggerEvent(checkbox, 'change');

                    return self.checked ? checkbox.checked = true : checkbox.checked = false;
                });
            };

            var _bindListeners = () => {
                checkboxes.forEach(checkbox => {
                    checkbox.addEventListener('change', function () {
                        _checkboxesManager(checkboxes);
                    });
                });

                checkboxCheckAll.addEventListener('change', function () {
                    _selectAll(this, checkboxes);
                });
            };

            var init = config => {
                _setOptions(config);
                _getElements();
                _bindListeners();
                _disableAction(actionBtns);
                _outputCheckboxCount(checkboxCounter, 0);
            };

            return { init: init };
        })();

        document.addEventListener('DOMContentLoaded', ChkbxTable.init);

</script>
<main class="p-4 sm:px-10 space-y-2">
    <div class="flex flex-col space-y-2 md:space-y-0 md:flex-row justify-between">
        <!-- <div class="mr-6">
            <h1 class="text-4xl font-semibold mb-2">Enquiry List </h1>
        </div> -->
        <div>

            <button type="submit" chklist-btn disabled>action</button>
            <p chklist-count>&nbsp;</p>
        </div>
        <form method="get" id="pageForm">

            <select name="q" id="" onchange="document.getElementById('pageForm').submit()">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="5">5</option>
                <option value="10">10</option>
                <option value="20">20</option>
                <option value="50">50</option>
                <option value="100">100</option>

            </select>

        </form>
    </div>
    <section class="flex justify-center w-full">

        {% if page_obj %}
        <table class="border-2 w-full" id="table">
            <thead>
                <tr class="text-justify bg-[#E59D23] text-white">
                    <th class="border-2 pl-4">
                        <input id="0" type="checkbox" chklist-all />


                    </th>
                    <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">
                        <input id="{{enq.id}}" type="checkbox" chklist />

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

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

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

                    </td>

                    <td class="border-2 pl-4">
                        <a href="{% url 'enq_detail' enq.id %}">
                            {% if enq.enqEmail %}{{enq.enqEmail}}{% 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>
    <script>
        localStorage.setItem('enqPage', JSON.parse('{{page_obj.number}}'))
    </script>

</main>
{% endblock content %}


{% block script %}

<script>
    console.log(JSON.parse('Checked=',$("input[type='checkbox']:checked").length));

    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 %}