{% extends 'Layout/product_layout.html' %}
{% load ecom_tags %}
{% block style %}
<style>
    .dropdown:hover .dropdown-menu {
        display: block;
    }



    .range-slider {
        width: 300px;
        text-align: center;
        position: relative;
    }

    .range-slider .rangeValues {
        display: block;
    }

    input[type=range] {
        -webkit-appearance: none;
        border: 1px solid white;
        width: 300px;
        position: absolute;
        left: 0;
    }

    input[type=range]::-webkit-slider-runnable-track {
        width: 300px;
        height: 5px;
        background: #ddd;
        border: none;
        border-radius: 3px;
    }

    input[type=range]::-webkit-slider-thumb {
        -webkit-appearance: none;
        border: none;
        height: 16px;
        width: 16px;
        border-radius: 50%;
        background: #21c1ff;
        margin-top: -4px;
        cursor: pointer;
        position: relative;
        z-index: 1;
    }

    input[type=range]:focus {
        outline: none;
    }

    input[type=range]:focus::-webkit-slider-runnable-track {
        background: #ccc;
    }

    input[type=range]::-moz-range-track {
        width: 300px;
        height: 5px;
        background: #ddd;
        border: none;
        border-radius: 3px;
    }

    input[type=range]::-moz-range-thumb {
        border: none;
        height: 16px;
        width: 16px;
        border-radius: 50%;
        background: #21c1ff;
    }

    /*hide the outline behind the border*/
    input[type=range]:-moz-focusring {
        outline: 1px solid white;
        outline-offset: -1px;
    }

    input[type=range]::-ms-track {
        width: 300px;
        height: 5px;
        /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
        background: transparent;
        /*leave room for the larger thumb to overflow with a transparent border */
        border-color: transparent;
        border-width: 6px 0;
        /*remove default tick marks*/
        color: transparent;
        z-index: -4;
    }

    input[type=range]::-ms-fill-lower {
        background: #777;
        border-radius: 10px;
    }

    input[type=range]::-ms-fill-upper {
        background: #ddd;
        border-radius: 10px;
    }

    input[type=range]::-ms-thumb {
        border: none;
        height: 16px;
        width: 16px;
        border-radius: 50%;
        background: #21c1ff;
    }

    input[type=range]:focus::-ms-fill-lower {
        background: #888;
    }

    input[type=range]:focus::-ms-fill-upper {
        background: #ccc;
    }
</style>
{% endblock style %}

{% block sticky %}
<section class="pt-2 bg-white px-2">
    <div class="flex justify-center font-bold text-xl md:text-3xl capitalize">
       Latest Products
    </div>
    <hr class="w-full bg-yellow-500 h-1">
</section>
{% endblock sticky %}

{% block content %}
<div class="md:px-4">
    <div class="hidden md:block">
        <div id="grid_view" class="flex w-full justify-center gap-4 flex-wrap ">
            {% for blog in total_products %}
            <div class="lg:w-1/5 md:w-1/2">
                <article class="shadow px-1 py-2">
                    <a href="{{blog.url}}">
                        {% if blog.prRec %}
                        <h1
                            class="px-1 text-sm bg-[{{blog.prRec.recBgColor}}] text-[{{blog.prRec.recFgColor}}] rounded w-fit ">
                            {{blog.prRec}}
                        </h1>
                        {% endif %}
                        <div class="flex w-full justify-center">

                            <img src="{{blog.specific.search_image.file.url}}" alt="{{blog.title}}"
                                class="{% if blog.specific.search_image|img_ori == 'square' %} w-[280px] h-[280px] {% elif blog.specific.get_thumb_image|img_ori == 'landscape' %} w-[280px] min-h-[175px] max-h-[200px] {% else %} min-h-[300px] max-h-[310px] w-auto {% endif %} ">
                        </div>
                    </a>
                    <div class="my-1 flex justify-center gap-1">
                        {% for var in blog.specific.get_siblings.live %}
                        <a href="{{var.specific.url}}" title="{{var.specific.title}}" class="bg-[{{var.specific.color}}] p-2 rounded-full border border-gray-900">
                            
                        </a>
                        {% endfor %}
                    </div>
                    <span class="text-[16px] line-clamp-3 px-1">
                        {{blog.specific.customTitle|safe}}
                    </span>
                    {% if blog.specific.prodRating %}
                    <div class="flex items-center text-xl text-gray-600 px-1">
                        <i class='bx bxs-star {% if blog.specific.prodRating >= 1 %} text-yellow-500 {% endif %}'></i>
                        <i class='bx bxs-star {% if blog.specific.prodRating >= 2 %} text-yellow-500 {% endif %}'></i>
                        <i class='bx bxs-star {% if blog.specific.prodRating >= 3 %} text-yellow-500 {% endif %}'></i>
                        <i class='bx bxs-star {% if blog.specific.prodRating >= 4 %} text-yellow-500 {% endif %}'></i>
                        <i class='bx bxs-star {% if blog.specific.prodRating >= 5 %} text-yellow-500 {% endif %}'></i>
                    </div>
                    {% endif %}
                    <!-- Price -->
                    {% if blog.specific.prodDealPrice or blog.specific.prodMRP %}
                    <div class="flex items-center">
                        {% if blog.specific.prodDealPrice %}
                        <span class="flex items-center">

                            {{ settings.core.CurrencySettings.icon|safe }}
                            <h2 class="text-[21px] font-bold flex items-center mr-2">
                                {{blog.specific.prodDealPrice}}
                            </h2>
                        </span>
                        {% endif %}
                        {% if blog.specific.prodMRP %}
                        <h3
                            class="flex items-center {% if blog.specific.prodDealPrice %} text-[12px] {% else %}  text-[18px] {% endif %}">
                            M.R.P: &nbsp;
                            <span class="{% if blog.specific.prodDealPrice %} line-through {% endif %}">
                                {{blog.specific.prodMRP}}
                            </span>

                        </h3>
                        {% endif %}
                    </div>
                    {% else %}
                    <h4 class="text-[21px] text-center text-red-500">Currently unavailable.</h4>
                    {% endif %}
                    <!-- Price // -->
                    <div class="flex justify-between px-1">

                        {% if blog.get_buy_now %}
                        <div class="flex text-sm">
                            <a href="{{blog.get_buy_now}}" class="bg-orange-400 px-4 py-1.5 rounded-full">
                                Buy Now
                            </a>
                        </div>
                        {% endif %}
                    <div class="text-sm flex items-center gap-2 bg-orange-400 px-4  rounded-full">
                        <label>Compare</label>
                            <input type="checkbox" name="" id=""
                                onclick="add_to_compare('{{blog}}','{{blog.id}}','{{blog.subCat.cat}}')">
                        </div>
                    </div>


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

    </div>


    <!-- Mobile View -->
    <div class="block md:hidden z-0">
        <label id="totalLength" class="hidden">{{page.get_children|length}}</label>

        {% for brand in page.get_children %}
        <section class="py-6 border-b border-gray-900 ">
            <h1 class="text-2xl text-center text-orange-400 font-bold" id="title-{{forloop.counter}}" onlo>
                <a href="{{brand.url}}">
                    {{brand.title}}
                </a>
            </h1>
            <div class="flex w-full justify-center mb-2">
                <hr id="hr-{{forloop.counter}}" class="bg-gray-600 w-20 h-[5px]" />
            </div>
            {% if page.slug == 'smartphone' %}
            {% include 'components/common/productCarousel.html' with width=800 height=660 timer=7000
            content=brand.specific.get_children imgH=340 %}
            {% else %}
            {% include 'components/common/productCarousel.html' with width=600 height=400 timer=7000
            content=brand.specific.get_children %}
            {% endif %}

        </section>
        {% endfor %}

    </div>
    <!-- Mobile View -->

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

        {% for blog in total_products %}
        {% if blog.specific.get_thumb_image %}
        <article class="flex flex-col sm:flex-row gap-4 py-4 border-b h-60 border-gray-900 rounded-2xl shadow-2xl">

            <div class="h-full flex w-auto md:w-[30%] justify-center ">
                <a href="{{blog.url}}">

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

                {% 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 />
                <a href="{{blog.url}}">

                    <h3 class="prose md:prose-xl lg:prose-2xl line-clamp-3">
                        {{blog.title}}
                    </h3>
                </a>
                <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>
                {% if blog.url %}
                <div class="mt-6">

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

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


</div>


<div class="fixed right-0 bottom-28 p-1 rounded border">
    <!-- <div id="add_to_me">
     

    </div> -->
    <!-- <a href="#" id="comp_button" class="px-4 py-1 rounded-xl bg-yellow-600 cursor-not-allowed opacity-50" disabled>Compare</a> -->
    <button id="comp_button" class="hidden px-4 py-1 rounded-xl bg-yellow-600 cursor-not-allowed opacity-50" disabled
        onclick="compare()">Compare
        (<span id="add_to_me"></span>)
    </button>
</div>
{% endblock content %}