{% extends 'layout_2.html' %}

{% load cms_tags %}


{% block content %}

<section class="pb-20 md:pt-10 ">
    {% if not page.get_children %}

    <div class="container mx-auto flex flex-wrap gap-1 md:gap-0 w-full">
        <div class="w-full md:w-[40%] md:px-4">

            <img src="{{page.prImage.file.url}}" alt="{{page.title}}" loading="lazy" class="w-full border rounded-lg">
        </div>
        <div class="w-full md:w-[60%]   md:px-4">

            <section class="flex w-full justify-center gap-4  ">

                <div class="w-[50%]" x-data="{ prodEnq: false }">

                    <button class="bg-btnEnq rounded-lg  px-8 w-full py-2 text-2xl grid text-center"
                    onclick="openModal('modelEnq')">
                        <span class="text-3xl">
                            <i class='bx bxs-spreadsheet'></i>
                        </span>
                        Enquiry
                    </button>

                   

                    <div id="modelEnq"
                        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-10 mx-auto shadow-xl rounded-md bg-second max-w-2xl flex flex-col justify-center">

                            <div class="flex py-2 justify-between bg-main items-center">
                                <div class="w-[20%]"></div>
                                <div class="w-[60%]">

                                    <h1 class="font-bold capitalize text-center text-xl">Product Enquiry</h1>
                                </div>
                                <div class="text-right -mt-4 w-[20%]">

                                    <button onclick="closeModal('modelEnq')" type="button"
                                    class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm 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>
                            <div class=" p-6 pt-0 text-center">
                                <form method="post" action="{% url 'post-enq' %}">
                                    {% csrf_token %}

                                    <div class="flex flex-wrap w-full">
                                        <label for="name" class="pl-4">Name<span class="text-red-700">*</span></label>
                                        <input type="text" id="name" name="name" class="w-full rounded-xl px-4 py-2"
                                            required>
                                    </div>

                                    <div class="grid md:flex gap-2 md:gap-12 mt-2 ">
                                        <div class="grid md:w-1/2">
                                            <label for="contact" class="pl-4 text-left">Phone<span
                                                    class="text-red-700">*</span></label>
                                            <input type="tel" id="contact" name="contact" class="rounded-xl px-4 py-2"
                                                required>
                                        </div>
                                        <div class="grid">
                                            <label for="email" class="pl-4 text-left">Email</label>
                                            <input type="email" id="email" name="email" class="rounded-xl px-4 py-2">
                                        </div>
                                    </div>
                                    <div class="flex flex-wrap w-full mt-2">

                                        <label for="company" class="pl-4">Company</label>
                                        <input type="text" id="company" name="company"
                                            class="w-full rounded-xl px-4 py-2">
                                    </div>
                                    <div class="flex flex-wrap w-full mt-2">
                                        <label for="product" class="pl-4">Product<span
                                                class="text-red-700">*</span></label>
                                        <input type="text" name="product" id="product"
                                            class="w-full rounded-xl px-4 py-2" value="{{page.title}}" readonly
                                            required>

                                    </div>
                                    <div class="mt-2">
                                        <div class="grid">
                                            <label for="msg" class="pl-4 text-left">Message<span
                                                    class="text-red-700">*</span></label>
                                            <textarea id="msg" name="msg" class="rounded-xl px-4 py-2 h-28"
                                                required></textarea>
                                        </div>
                                    </div>
                                    <div class="mt-2 flex w-full justify-center gap-4 items-center">
                                        <button type="submit"
                                            class="rounded-xl bg-blue-950 px-6 py-2 text-white text-xl">Submit</button>
                                        <a href="#" onclick="closeModal('modelEnq')"
                                            class="text-white text-xl bg-red-500 hover:bg-red-700 focus:ring-4 focus:ring-red-900 items-center rounded-xl px-6 py-2"
                                            data-modal-toggle="delete-user-modal">
                                            Cancel
                                        </a>
                                    </div>

                                </form>

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


                {% if page.prDatasheet %}
                <a href="{{page.prDatasheet.file.url}}" download="true"
                    class="bg-btnData  px-4 py-2 rounded-lg grid text-center text-2xl w-[50%]">
                    <span class="text-3xl">
                        <i class='bx bxs-down-arrow-circle'></i>
                    </span>
                    Datasheet
                </a>
                {% endif %}



            </section>
            <br />
            <div class="text-xl text-left leading-8">

                <!-- {{page.prDesc|safe}} -->
                {% if page.prDesc %}

                {{page.prDesc|add_formating}}
                {% endif %}

            </div>



        </div>
    </div>
    
    {% else %}

    <div class="container mx-auto">
        <div class="flex flex-wrap w-full  justify-center items-center gap-4">
            {% for cat in page.get_children %}
            {% include 'components/productTile.html' with image=cat.specific.prImage %}
            {% endfor %}
        </div>
    </div>

    {% endif %}



</section>


{% endblock content %}