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

{% block content %}
<main class="px-4 py-2 sm:px-10 space-y-2 flex w-full">
    {% follow_enq enq.id as followup %}

    <div class="w-[70%] px-4">

        <div class="w-full mb-4 px-2 mr-6 text-white {% if enq.enqProduct %} bg-indigo-400 {% else %} bg-yellow-600 {% endif %}
        ">
            <h1 class="text-4xl font-semibold py-2">Enquiry Detail

            </h1>
            <!-- <h2 class="text-gray-600 ml-0.5">Mobile UX/UI Design course</h2> -->
        </div>
        <table class="w-full">
            <tr class="h-10">
                <td class="flex items-center text-2xl font-bold gap-2">
                    <i class="fa fa-user" aria-hidden="true"></i>

                    {{enq.name}}
                </td>
                <td class="text-right">
                    {{enq.createdOn|date:'d M,Y'}}

                </td>
            </tr>
            <tr class="h-10 {% if enq.enqProduct %}  bg-indigo-100 {% else %} bg-yellow-100 {% endif %}">
                <td colspan="2" class="p-2">
                    {% if enq.contact %}

                    <a href="tel:+{{enq.contact}}" class="flex items-center gap-2">

                        <i class="fa fa-phone" aria-hidden="true"></i>

                        {{enq.contact}}
                    </a>
                    {% endif %}
                </td>
            </tr>
            {% if enq.email %}
            <tr class="h-10">
                <td colspan="2" class="p-2">
                    {% if enq.email %}
                    <a href="mailto:{{enq.email}}" class="flex items-center gap-2">
                        <i class="fa fa-envelope" aria-hidden="true"></i>

                        {{enq.email}}
                    </a>
                    {% endif %}
                </td>

            </tr>
            {% endif %}
            <tr class="h-fit {% if enq.enqProduct %}  bg-indigo-100 {% else %} bg-yellow-100 {% endif %}">
                <td colspan="2">

                    {% if enq.message %}
                    <div class="p-2 flex gap-2 text-justify">
                        <i class="fa fa-facebook-messenger mt-1" aria-hidden="true"></i>

                        <p>

                            {{enq.message}}
                        </p>
                    </div>
                    {% endif %}
                </td>
            </tr>
        </table>

        <div class="flex w-full mt-1 justify-between gap-4 items-center">
            <script>
                let prev = {{ enq.id }}-1
                // console.log("Next=", prev);
                document.write('<a href="/dash/enquiry/' + prev + '" class="pointer-cursor h-fit bg-red-900 px-4 py-2 text-xl text-white rounded"><i class="fa fa-chevron-left" aria-hidden="true"></i> Prev</a>');
            </script>

            <button onclick="openModal('modelConfirm-done')" class="bg-green-600 text-white rounded text-xl px-6 py-2">
                Done
            </button>
            <div id="modelConfirm-done"
                class="hidden fixed hidden 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-white max-w-md">

                    <div class="flex justify-end p-2">
                        <button onclick="closeModal('modelConfirm-done')" type="button"
                            class="text-red-600  hover:bg-red-700 hover:text-white rounded-lg font-bold p-1.5 ml-auto inline-flex items-center">
                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"
                                xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd"
                                    d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
                                    clip-rule="evenodd"></path>
                            </svg>
                        </button>
                    </div>

                    <div class="p-6 pt-0 text-center">
                        <form method="post">
                            {% csrf_token %}
                            <input type="text" name="status" id="" value="Done" hidden>
                            <h1 class="text-2xl">Are you sure to final close this enquiry ?</h1>
                            <div class="flex justify-center gap-4">
                                <button type="submit"
                                    class="mt-6 text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-red-900 border border-gray-200 font-medium inline-flex items-center rounded-lg text-base px-8 py-2.5 text-center"
                                    data-modal-toggle="delete-user-modal">
                                    OK
                                </button>
                                <a href="#" onclick="closeModal('modelConfirm-done')"
                                    class="mt-6 text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-900 border border-gray-200 font-medium inline-flex items-center rounded-lg text-base px-4 py-2.5 text-center"
                                    data-modal-toggle="delete-user-modal">
                                    Cancel
                                </a>
                            </div>
                        </form>

                    </div>

                </div>
            </div>

            <script>
                let next = {{ enq.id }}+1
                // console.log("Next=", next);
                document.write('<a href="/dash/enquiry/' + next + '" class="pointer-cursor h-fit bg-red-900 px-4 py-2 text-xl text-white rounded">Next <i class="fa fa-chevron-right" aria-hidden="true"></i></a>');
            </script>

        </div>

        <div class="flex w-full">

            <form method="post" class="bg-white w-max p-2 md:p-4 rounded">
                {% csrf_token %}
                <div class="flex items-center gap-4">
                    <div>


                        <div>
                            <input type="text" name="assignTo" id="assign" placeholder="Attended By*"
                                class="border-2 rounded-2xl py-2 px-2 w-96" required>
                        </div>
                        <div class="mt-2">

                            <textarea name="remark" id="assign" placeholder="Remarks*"
                                class="w-96 h-28 border-2 rounded-2xl py-2 px-2" required></textarea>
                            <input type="text" name="status" value="Follow up" hidden>
                        </div>
                    </div>


                    <div class="flex gap-1">

                        <button type="submit"
                            class="h-fit bg-blue-900 px-4 py-2 text-xl text-white rounded">Assign</button>


                        <script>
                            document.write('<a href="/dash/enquiry/?page=' + localStorage.getItem('enqPage') + '" class="pointer-cursor h-fit bg-red-900 px-4 py-2 text-xl text-white rounded">Back to List</a>');
                        </script>
                    </div>


                </div>

            </form>

        </div>






    </div>
    <div class="w-[30%] px-0.5 border-l-2 h-screen overflow-auto">
        <h1 class="text-xl font-bold">Follow Up</h1>
        {% for item in followup %}
        <div
            class="{% if enq.enqProduct %} even:bg-indigo-200 {% else %} even:bg-yellow-100 {% endif %} px-2 py-0.5 rounded border-b">
            <div class="flex justify-between items-center">

                <h1 class="font-bold">
                    <button onclick="openModal('modelConfirm{{forloop.counter}}')">
                        {{item.assignTo}}
                    </button>

                </h1>
                <span class="text-xs">
                    {{item.enqCreatedOn |date:'d M,y'}}
                </span>
            </div>
            {% if item.remarks %}
            <h2 class="pl-2">
                <button onclick="openModal('modelConfirm{{forloop.counter}}')">

                    {{item.remarks|truncatechars:30}}
                </button>

                <div id="modelConfirm{{forloop.counter}}"
                    class="fixed hidden 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="flex justify-end p-2">
                            <button onclick="closeModal('modelConfirm{{forloop.counter}}')" type="button"
                                class="text-white  hover:bg-white hover:text-red-500 rounded-lg font-bold p-1.5 ml-auto inline-flex items-center">
                                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd"
                                        d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
                                        clip-rule="evenodd"></path>
                                </svg>
                            </button>
                        </div>

                        <div class="p-6 pt-0 text-justify">
                            <h1 class="flex justify-between mb-4">
                                <span>

                                    <b>Attended By : </b>

                                    {{item.assignTo}}
                                </span>

                                {{item.enqCreatedOn |date:'d M,Y'}}


                            </h1>
                            <p>
                                <b>Remarks : </b>

                                {{item.remarks}}
                            </p>
                            <div class="flex justify-center">


                                <a href="#" onclick="closeModal('modelConfirm{{forloop.counter}}')"
                                    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-3 py-2.5 text-center"
                                    data-modal-toggle="delete-user-modal">
                                    Okay
                                </a>
                            </div>
                        </div>

                    </div>
                </div>

            </h2>
            {% endif %}
        </div>
        {% endfor %}


    </div>



    <script type="text/javascript">
        window.openModal = function (modalId) {
            document.getElementById(modalId).style.display = 'block'
            document.getElementsByTagName('body')[0].classList.add('overflow-y-hidden')
        }

        window.closeModal = function (modalId) {
            document.getElementById(modalId).style.display = 'none'
            document.getElementsByTagName('body')[0].classList.remove('overflow-y-hidden')
        }

        // Close all modals when press ESC
        document.onkeydown = function (event) {
            event = event || window.event;
            if (event.keyCode === 27) {
                document.getElementsByTagName('body')[0].classList.remove('overflow-y-hidden')
                let modals = document.getElementsByClassName('modal');
                Array.prototype.slice.call(modals).forEach(i => {
                    i.style.display = 'none'
                })
            }
        };
    </script>
</main>
{% endblock content %}