{% extends 'base.html' %}

<!-- Head -->
{% block meta_tags %}
{% endblock meta_tags %}

{% block style %}

{% endblock style %}


<!-- Head // -->
{% block sticky %}
{% endblock sticky %}



{% block breadcrumb %}


<section>
    {% if page.bannercontent %}

    {% include 'components/common/carousel.html' with width=page.bannerWidth height=page.bannerHeight timer=page.bannerTimer content=page.bannercontent %}

    {% endif %}
    <div class="hidden sticky top-16 z-40 bg-white">

        <div class="py-1 px-4">
            <nav class="hidden md:block bg-main px-4 rounded w-fit">

                <ol class="flex items-center gap-2 text-[10px] sm:text-sm md:text-lg">
                    <a href="/" aria-label="Home">

                        <i class='bx bxs-home'></i>
                    </a>
                    {% for p in page.breadcrumb_list %}
                    {% if p.show_in_menus %}
                    <li class="hover:font-bold">
                        <a href="{{p.url}}" class="flex items-center">
                            {% if p.menuName %}
                            {{p.menuName}}
                            {% else %}
                            {{p.title}}
                            {% endif %} >
                        </a>
                    </li>
                    {% endif %}
                    {% endfor %}

                    <li aria-current="page" class="font-bold">
                        {% if page.menuName %}
                        {{page.menuName}}
                        {% else %}
                        {{page.title}}
                        {% endif %}
                    </li>

                </ol>


            </nav>
            <nav class="block md:hidden bg-main px-4 rounded w-fit">

                <ol class="flex items-center flex-wrap gap-2  text-[16px]">
                    <a href="/">

                        <i class='bx bxs-home'></i>
                    </a>

                    {% for p in page.mobile_breadcrumb_list %}
                    {% if p.show_in_menus %}
                    <li class="hover:font-bold">
                        <a href="{{p.url}}" class="flex items-center">
                            / {% if p.catMenu %}
                            {{p.catMenu}}
                            {% else %}
                            {{p.title}}
                            {% endif %}
                        </a>
                    </li>
                    {% endif %}
                    {% endfor %}

                    <li aria-current="page">
                        / {% if page.catMenu %}
                        {{page.catMenu}}
                        {% else %}
                        {{page.title}}
                        {% endif %}
                    </li>

                </ol>



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


</section>

{% endblock breadcrumb %}



{% block content %}
{% endblock content %}



{% block script %}
<script>
    const compList = []
    function add_to_compare(prod, id, cat) {
        var lc = localStorage.getItem("Comp_Cat")
        if (lc == null || lc == cat) {
            var lc = localStorage.setItem("Comp_Cat", cat)
            if (compList.includes(prod)) {
                // console.log("Compare List Index=", compList.indexOf(prod));
                const index = compList.indexOf(prod);
                if (index > -1) { // only splice array when item is found
                    compList.splice(index, 1); // 2nd parameter means remove one item only
                }
                document.getElementById("add_to_me").innerHTML = compList.length;
                if (compList.length <= 1) {
                    document.getElementById("comp_button").classList.add('cursor-not-allowed');
                    document.getElementById("comp_button").classList.add('opacity-50');
                }
                // document.getElementById(id).remove();
                console.log("Compare List After=", compList);
            }
            else if (compList.length == 3) {
                var fields = document.getElementById("grid_view").getElementsByTagName('input');
                for (var i = 0; i < fields.length; i++) {
                    fields[i].disabled = true;
                }
            }

            else if (compList.length == 1) {
                compList.push(prod)
                document.getElementById("add_to_me").innerHTML = compList.length;
                document.getElementById("comp_button").classList.remove('cursor-not-allowed');
                document.getElementById("comp_button").classList.remove('opacity-50');
                document.getElementById("comp_button").classList.remove('hidden');
                document.getElementById("comp_button").disabled = false;

            }
            else {
                compList.push(prod)
                document.getElementById("add_to_me").innerHTML = compList.length;
                console.log("Compare List=", compList);
                console.log("Compare List Length=", compList.length);
                localStorage.setItem("Comp_Cat", cat)
            }

        }
        else{
            console.log("Not Allowed");
            
        }
    }


    function compare() {
        console.log("Comparing");

        let i = 0;
        var url = `/compare/?total=${compList.length}&`
        while (i < compList.length) {
            var val = "prod" + i + "=" + compList[i]
            url += val + '&'
            i++;
        }
        window.location.href = url
    }
</script>

<script>
    function getVals() {
        // Get slider values
        let parent = this.parentNode;
        let slides = parent.getElementsByTagName("input");
        let slide1 = parseFloat(slides[0].value);
        let slide2 = parseFloat(slides[1].value);
        // Neither slider will clip the other, so make sure we determine which is larger
        if (slide1 > slide2) { let tmp = slide2; slide2 = slide1; slide1 = tmp; }

        let displayElement = parent.getElementsByClassName("rangeValues")[0];
        displayElement.innerHTML = "" + slide1 + " - " + slide2;
    }

    window.onload = function () {
        // Initialize Sliders
        let sliderSections = document.getElementsByClassName("range-slider");
        for (let x = 0; x < sliderSections.length; x++) {
            let sliders = sliderSections[x].getElementsByTagName("input");
            for (let y = 0; y < sliders.length; y++) {
                if (sliders[y].type === "range") {
                    sliders[y].oninput = getVals;
                    // Manually trigger event first time to display values
                    sliders[y].oninput();
                }
            }
        }

    }


    window.location.href = "?price_range=" + slide1 + "-" + slide2
</script>

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