{% 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 md:pt-4 bg-white px-2">
    <div class="flex justify-center font-bold text-xl md:text-3xl capitalize">
        {{page.title}}
    </div>
    <div class="-mt-12 mb-1 pt-4 flex justify-between items-center">
        <!-- Filters -->
        <div class="flex items-center w-full md:justify-start justify-between  gap-2">
            <div class="dropdown">
                <button class="text-gray-700 font-semibold px-1 inline-flex items-center">
                    <span>Category</span>
                    <i class='bx bx-chevron-down'></i>
                </button>
                <div class="dropdown-menu absolute hidden text-gray-700 pt-1 w-auto shadow-xl bg-gray-200">

                    {% for subcat in page.cat.sub_categories.all %}
                    <a href="{% if subcat.slug == request.get_full_path|split:"=" %}{{page.url}}{% else %}?q={{subcat.slug}} {% endif %}"
                        class="{% if subcat.slug == request.get_full_path|split:"=" %} bg-[{{subcat.cat.activeBgColor}}] text-[{{subcat.cat.activeFgColor}}] {% else %} bg-[{{subcat.cat.bgColor}}] text-[{{subcat.cat.fgColor}}] {% endif %} hover:bg-[{{subcat.cat.hoverBgColor}}] hover:text-[{{subcat.cat.hoverFgColor}}] px-2 rounded flex items-center">

                        {% if subcat.slug != request.get_full_path|split:"=" %}
                        <i class='bx bx-plus'></i>
                        {% endif %}
                        {{subcat.name}}
                        {% if subcat.slug == request.get_full_path|split:"=" %}
                        <i class='bx bx-x'></i>
                        {% endif %}
                    </a>

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



            <div>
                {% for filter in filters %}

                <div class="dropdown inline-block relative">
                    <button class="text-gray-700 font-semibold px-1 inline-flex items-center">
                        <span>{{filter.name}}</span>
                        <i class='bx bx-chevron-down'></i>
                    </button>
                    <ul class="dropdown-menu absolute hidden text-gray-700 w-[12rem] pt-1 px-1 -ml-12 bg-gray-200">
                        {% for item in filter.filter_items.all %}
                        {% if item.show_in_menu %}
                        <li>
                            <a class="rounded-t hover:bg-gray-300 py-1 px-2 block whitespace-no-wrap {% if item.value == request.get_full_path|split:"=" %} bg-gray-50{% endif %}"
                                href="{% if item.value %}?price_range={{item.value}}{% else %}{{page.url}}{% endif %}">
                                {{item.title}}
                            </a>
                        </li>

                        {% endif %}
                        {% endfor %}

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


            </div>
        </div>
        <!-- Filters -->
        <div class="hidden md:block">
        </div>
    </div>
    <hr class="w-full bg-yellow-500 h-1">
</section>
{% endblock sticky %}

{% block content %}
<div class="md:px-4 mt-4">


    {% if request.user_agent.is_mobile %}

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

        {% for brand in page.get_children.live %}
        <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_total_product imgH=340 %}
            {% else %}
            {% include 'components/common/productCarousel.html' with width=600 height=400 timer=7000 content=brand.specific.get_total_product %}
            {% endif %}

        </section>
        {% endfor %}

    </div>
    {% else %}
    <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}}">
                        <div class="flex justify-between">
                            <div>
                                {% if blog.prRec %}
                                <h1
                                    class="px-1 text-sm bg-[{{blog.prRec.recBgColor}}] text-[{{blog.prRec.recFgColor}}] rounded w-fit ">
                                    {{blog.prRec}}
                                </h1>
                                {% elif blog.get_parent.specific.prRec %}
                                <h1
                                    class="px-1 text-sm bg-[{{blog.get_parent.specific.prRec.recBgColor}}] text-[{{blog.get_parent.specific.prRec.recFgColor}}] rounded w-fit ">
                                    {{blog.get_parent.specific.prRec}}
                                </h1>
                                {% endif %}
                            </div>
                            <div>
                                {% now "Y-m-d, g:i a" as today %}
                                {% if blog.get_parent.specific.launchDate %}
                                {% if today > blog.get_parent.specific.launchDate %}
                                .
                                {% else %}
                                <h1
                                    class="px-1 text-sm  rounded w-fit bg-[{{blog.get_parent.specific.subCat.upBgColor}}] text-[{{blog.get_parent.specific.subCat.upFgColor}}] ">
                                    Coming Soon
                                </h1>
                                {% endif %}
                                {% endif %}
                            </div>
                        </div>
                        <!-- {{blog.specific.search_image|img_ori}} -->
                        <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>
                    {% if blog.specific.get_siblings.live.count > 1 %}
                    <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>
                    {% endif %}
                    <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 %}
                    <h2 class="text-[21px] text-center text-red-500">Currently unavailable.</h2>
                    {% endif %}
                    <!-- Price // -->
                    <div class="flex justify-between px-1">

                        {% if blog.specific.get_buy_now %}
                        <div class="flex text-sm">
                            <a href="{{blog.specific.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>

    {% endif %}

</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 %}