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

{% block pageTitle %}

{% if enq.enqProduct %}
Product Enquiry
{% else %}
Enquiry
{% endif %}
{% endblock pageTitle %}

{% 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
                {% if enq.enqProduct %}
                for
                {{enq.enqProduct}}
                {% endif %}
            </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">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="20" height="20"
                        class="mt-1"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
                        <path
                            d="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3z" />
                    </svg>
                    {{enq.enqName}}
                </td>
                <td class="text-right">
                    {{enq.enqCreatedOn|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.enqContact %}

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

                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="16" height="16"
                            class="mt-1"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
                            <path
                                d="M164.9 24.6c-7.7-18.6-28-28.5-47.4-23.2l-88 24C12.1 30.2 0 46 0 64C0 311.4 200.6 512 448 512c18 0 33.8-12.1 38.6-29.5l24-88c5.3-19.4-4.6-39.7-23.2-47.4l-96-40c-16.3-6.8-35.2-2.1-46.3 11.6L304.7 368C234.3 334.7 177.3 277.7 144 207.3L193.3 167c13.7-11.2 18.4-30 11.6-46.3l-40-96z" />
                        </svg>
                        {{enq.enqContact}}
                    </a>
                    {% endif %}
                </td>
            </tr>
            {% if enq.enqEmail %}
            <tr class="h-10">
                <td colspan="2" class="p-2">
                    {% if enq.enqEmail %}
                    <a href="mailto:{{enq.enqEmail}}" class="inline-flex gap-2">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="16" height="16"
                            class="mt-1"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
                            <path
                                d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48H48zM0 176V384c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V176L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z" />
                        </svg>
                        {{enq.enqEmail}}
                    </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.enqMessage %}
                    <div class="p-2 flex gap-2 text-justify">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="40" height="30"
                            class=""><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
                            <path
                                d="M64 0C28.7 0 0 28.7 0 64V352c0 35.3 28.7 64 64 64h96v80c0 6.1 3.4 11.6 8.8 14.3s11.9 2.1 16.8-1.5L309.3 416H448c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64H64z" />
                        </svg>
                        <p>

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


        <div class="flex w-full y-between">

            <form method="post" class="bg-white w-full p-2 md:p-4 rounded">
                {% csrf_token %}
                <div class="flex items-center gap-2">
                    <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="bg-blue-900 px-4 py-6  text-white rounded">Assign</button>




                        <div class="flex w-full  justify-center gap-4 items-center">
                            {% if enq.enqProduct %}
                            <script>
                                document.write('<a href="/dash/product-enquiry/?page=' + localStorage.getItem('enqPage') + '" class="pointer-cursor  bg-red-900 px-4 py-6  text-white rounded">Back to List</a>');
                            </script>
                            {% else %}

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

                    </div>

                </div>

            </form>
        </div>



        <!-- <button onclick="openModal('modelConfirm-done')"
            class="hidden bg-green-600 text-white rounded-2xl text-xl px-6 py-2 mt-8">
            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-3 py-2.5 text-center"
                                data-modal-toggle="delete-user-modal">
                                Submit
                            </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-3 py-2.5 text-center"
                                data-modal-toggle="delete-user-modal">
                                Cancel
                            </a>
                        </div>
                    </form>

                </div>

            </div>
        </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 hover:bg-indigo-600 hover:text-white">
            <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 %}