{% extends 'Layout/base_layout.html' %}
{% load cms_tags %}
{% block content %}
{% load wagtailcore_tags wagtailsearchpromotions_tags %}

<div class="mt-2 pt-4 px-4">
    <div>
        <div class="flex justify-between">

            <div class="flex items-center gap-6">
                <h1>{{title}}</h1>
            </div>
            <div class="flex gap-4">

                <button onclick="listView()" id="list_btn" class="text-xl font-bold">&#9776;</button>
                <button onclick="gridView()" id="grid_btn"
                    class="text-xl font-bold bg-gray-300 px-2 py-1">&#9783;</button>
            </div>
        </div>
        <hr class="w-full bg-yellow-500 h-1">
    </div>
    <section class="w-full">


        {% get_search_promotions search_query as search_promotions %}

        <ul>
            {% for search_promotion in search_promotions %}
                {% if search_promotion.page %}
                    <li>
                        <a href="{% pageurl search_promotion.page %}">
                            <h2>{{ search_promotion.page.title }}</h2>
                            <p>{{ search_promotion.description }}</p>
                        </a>
                    </li>
                {% else %}
                    <li>
                        <a href="{{ search_promotion.external_link_url }}">
                            <h2>{{ search_promotion.external_link_text }}</h2>
                            <p>{{ search_promotion.description }}</p>
                        </a>
                    </li>
                {% endif %}
            {% endfor %}
        </ul>
        
        <div id="grid_view" class="flex justify-center gap-8 flex-wrap ">


            {% for blog in prodObj %}
            <article class="my-4 w-72 h-auto shadow px-2 pb-4">
                <a
                    href="{% if blog.specific.get_buy_now %}{{blog.specific.get_buy_now}}{% else %}{{blog.url}}{% endif %}">

                    <div class="h-64 flex w-full justify-center text-red-500 ">
                        <img src="{{blog.specific.get_thumb_image.file.url}}" alt="{{blog.title}}" class="h-full">

                    </div>


                    <!-- Price -->
                    {% if blog.specific.prodDealPrice or blog.specific.prodMRP %}
                    <div class="flex items-center gap-4">
                        {% if blog.specific.prodDealPrice %}
                        <span class="text-[21px] font-bold flex items-center">
                            {{ settings.core.CurrencySettings.icon|safe }}
                            {{blog.specific.prodDealPrice}}
                        </span>
                        {% endif %}
                        {% if blog.specific.prodMRP %}
                        <span
                            class="flex items-center {% if blog.specific.prodDealPrice %} line-through text-[12px] {% else %}  text-[18px] {% endif %}">
                            {{ settings.core.CurrencySettings.icon|safe }}
                            {{blog.specific.prodMRP}}

                        </span>
                        {% endif %}
                    </div>
                    {% else %}
                    <h2 class="text-[21px] text-center text-red-500">Currently unavailable.</h2>
                    {% endif %}

                    <h3 class="mt-2 text-[14px] line-clamp-2">
                        {{blog.title}}
                    </h3>

                    <div class="mt-4 flex justify-center">
                        <a href="{% if blog.specific.get_buy_now %}{{blog.specific.get_buy_now}}{% else %}{{blog.url}}{% endif %}"
                            class="bg-orange-400 px-20 py-1.5 rounded-xl">
                            Buy Now
                        </a>

                    </div>
                </a>


            </article>
            {% endfor %}
        </div>


        <div id="list_view" class="hidden grid w-full ">

            {% for blog in prodObj %}
            {% if blog.specific.get_thumb_image %}

            <article class="flex flex-col sm:flex-row gap-4 py-4 border-b">

                <div class="h-64 flex w-full md:w-[30%] justify-center ">
                    <img src="{{blog.specific.get_thumb_image.file.url}}" alt="{{blog.title}}" class="h-full">

                </div>
                <div class="md:w-[70%] h-64">
                    <a
                        href="{% if blog.specific.get_buy_now %}{{blog.specific.get_buy_now}}{% else %}{{blog.url}}{% endif %}">

                        {% for tag in blog.tags.all %}
                        <a href="/{{tag.slug}}"
                            class="px-2 mx-1 py-0.5 rounded bg-[{{tag.bgColor}}] text-[{{tag.fgColor}}]">

                            {% if tag.name|make_list|first == '"' %}
                            {{tag.name|slice:":-1"|slice:"1:" }}
                            {% else %}
                            {{tag.name}}
                            {% endif %}

                        </a>
                        {% endfor %}
                        <br />
                        <h3 class="prose md:prose-xl lg:prose-2xl line-clamp-3">
                            {{blog.title}}
                        </h3>
                        <!-- Price -->
                        <div class="flex items-center gap-4">
                            {% if blog.specific.prodDealPrice %}
                            <span class="text-[21px] font-bold flex items-center">
                                {{ settings.core.CurrencySettings.icon|safe }}
                                {{blog.specific.prodDealPrice}}
                            </span>
                            {% endif %}

                            <span
                                class="flex items-center {% if blog.specific.prodDealPrice %} line-through text-[12px] {% else %}  text-[18px] {% endif %}">
                                {{ settings.core.CurrencySettings.icon|safe }}
                                {{blog.specific.prodMRP}}

                            </span>
                        </div>
                        <div class="mt-6">

                            <a href="{% if blog.specific.get_buy_now %}{{blog.specific.get_buy_now}}{% else %}{{blog.url}}{% endif %}" class="bg-orange-400 px-20 py-1.5 rounded-xl text-lg">
                                Buy Now
                            </a>
                        </div>

                    </a>
                </div>
            </article>
            {% endif %}

            {% endfor %}
            <hr class="md:hidden" />
        </div>

    </section>


</div>

<script>
    function listView() {


        var gridview = document.getElementById('grid_view');
        gridview.classList.add("hidden");
        var listview = document.getElementById('list_view');
        listview.classList.remove("hidden");

        var listbtn = document.getElementById('list_btn');
        listbtn.classList.add("bg-gray-300");
        listbtn.classList.add("px-2");
        listbtn.classList.add("py-1");


        var gridbtn = document.getElementById('grid_btn');
        gridbtn.classList.remove("bg-gray-300");
        gridbtn.classList.remove("px-2");
        gridbtn.classList.remove("py-1");


    }
    function gridView() {
        var listview = document.getElementById('list_view');
        listview.classList.add("hidden");
        var gridview = document.getElementById('grid_view');
        gridview.classList.remove("hidden");

        var listbtn = document.getElementById('list_btn');
        listbtn.classList.remove("bg-gray-300");
        listbtn.classList.remove("px-2");
        listbtn.classList.remove("py-1");

        var gridbtn = document.getElementById('grid_btn');
        gridbtn.classList.add("bg-gray-300");
        gridbtn.classList.add("px-2");
        gridbtn.classList.add("py-1");

    }
</script>

{% endblock content %}