{% extends "web_layout.html" %}
{% load wagtailroutablepage_tags %}
{% load wagtailimages_tags %}

{% load cms_tags %}

{% block title %}
{{page.seo_title}}
{% endblock %}
{% block extra_css %}
<style>
    .mySlides {
        display: none;
        /* height: 40rem; */
    }

    img {
        vertical-align: middle;
        /* height: 40rem; */
    }

    /* Slideshow container */


    /* Caption text */
    .text {
        color: #f2f2f2;
        font-size: 15px;
        padding: 8px 12px;
        position: absolute;
        bottom: 8px;
        width: 100%;
        text-align: center;
    }

    /* Number text (1/3 etc) */
    .numbertext {
        color: #f2f2f2;
        font-size: 12px;
        padding: 8px 12px;
        position: absolute;
        top: 0;
    }

    /* The dots/bullets/indicators */
    .dot {
        height: 15px;
        width: 15px;
        margin: 0 2px;
        background-color: #bbb;
        border-radius: 50%;
        display: inline-block;
        transition: background-color 0.6s ease;
    }

    .active {
        background-color: #717171;
    }

    /* Fading animation */
    .fade {
        animation-name: fade;
        animation-duration: 1.5s;
    }

    @keyframes fade {
        from {
            opacity: .4
        }

        to {
            opacity: 1
        }
    }

    /* On smaller screens, decrease text size */
    @media only screen and (max-width: 300px) {
        .text {
            font-size: 11px
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="bg-gray-100 pb-10 min-h-screen">

    {% for block in page.body %}
    {% if block.block_type == 'carousel' %}
    <div class="z-0 h-[15rem]">
        {% for content in block.value.content %}
        <div class="mySlides fade">
            <div class="numbertext">{{forloop.counter}} / {{block.value.content|length}}</div>

            <img src="{{content.value.image.file.url}}" alt="{{content.value.image.title}}" class="w-[100%] h-[15rem]"
                loading="lazy" />
            <!-- <div class="text">Caption Text</div> -->
        </div>
        {% endfor %}



    </div>
    <div style="text-align:center" class="-mt-6 z-50">
        {% for content in block.value.content %}

        <span class="dot"></span>
        {% endfor %}

    </div>
    {% else %}
    {{block.block_type}}
    {% endif %}
    {% endfor %}

    <div class="hidden flex w-full justify-center mt-2">
        <form action="/search/" method="get" class="flex w-full items-center justify-center">

            <input type="text" name="q" id="" class="rounded w-[60%]">
            <button type="submit" aria-label="search-blog" class="text-2xl bg-gray-200 h-full px-4 rounded">
                <i class="fa fa-search" aria-hidden="true"></i>

            </button>
        </form>
    </div>


   

    <div class="flex w-full gap-1 my-2">

        <div class=" w-[100%] container mx-auto">

            <div class="flex items-center justify-between">
                {% if title %}
                <h1>{{title|safe}}</h1>
                {% else %}
                <h1>Latest</h1>
                {% endif %}
                <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 id="grid_view" class="flex justify-center gap-8 flex-wrap ">
                
                {% for blog in page.get_children %}
                {% include 'components/blogs/gridIndex.html' with blog=blog %}
                {% endfor %}

            </div>


            <div id="list_view" class="hidden grid w-full ">
                {% if posts %}
                {% for blog in posts %}

                {% include 'components/blogs/listIndex.html' with blog=blog %}

                {% endfor %}
                {% else %}
                {% for blog in page.get_child_blogs %}

                {% include 'components/blogs/listIndex.html' with blog=blog %}

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

        </div>

        <div class="hidden w-[30%]">

            <!-- Tags -->
            <div class="p-4 bg-white rounded-xl shadow-2xl">
                <h1 class="font-bold text-xl mb-1">Tags</h1>
                <div class="flex gap-1">

                    {% for tag in page.get_tags %}
                    <a href="{{page.url}}tag/{{tag.slug}}/"
                        class="hover:font-bold px-1.5 py-0.5 rounded bg-[{{tag.bgColor}}] text-[{{tag.fgColor}}] text-sm">{{tag.name}}</a>
                    {% endfor %}
                </div>

            </div>
            <!-- Categories -->
            <div class="p-4 bg-white rounded-xl shadow-2xl my-2">
                <h1 class="font-bold text-xl mb-1">Categories</h1>
                <div class="flex gap-1">

                    {% for cat in page.get_categories %}
                    <div class="flex gap-1">
                        <a href="{{page.url}}category/{{cat.slug}}/"
                            class="hover:font-bold px-1.5 py-0.5 rounded bg-[{{cat.bgColor}}] text-[{{cat.fgColor}}] text-sm">
                            {{cat.title}}
                        </a>
                        <div class="flex gap-1">
                            {% for cat in cat.sub_categories.all %}
                            <a href="{{page.url}}category/{{cat.slug}}/"
                                class="hover:font-bold px-1.5 py-0.5 rounded bg-[{{cat.bgColor}}] text-[{{cat.fgColor}}] text-sm">
                                {{cat.scName}}
                            </a>
                            {% endfor %}
                        </div>
                    </div>
                    {% endfor %}
                </div>

            </div>

            <section class="md:block w-full">
                <!-- <h1 class="prose prose-2xl bg-gray-900 text-white py-2 text-center rounded">Trending</h1> -->

                <div class="rounded border w-full mx-auto mt-0.5">
                    <!-- Tabs -->
                    <ul id="tabs" class="inline-flex pt-2 px-1 w-full grid grid-cols-2 border-b">
                        <li
                            class="bg-white px-4 text-gray-800 font-semibold py-2 rounded-t border-t border-r border-l -mb-px">
                            <a id="default-tab" href="#first">Latest</a>
                        </li>
                        <!-- <li class="px-4 text-gray-800 font-semibold py-2 rounded-t border "><a
                                href="#second">Trending</a>
                        </li> -->
                    </ul>

                    <!-- Tab Contents -->
                    <div id="tab-contents">
                        <div id="first" class="py-2">
                            <article class="w-full py-1 px-2 h-auto shadow">
                                {% if page.get_recent_blogs %}
                                <ul>
                                    {% for post in page.get_recent_blogs %}
                                    <li class="my-1 flex justify-start border-b">
                                        <a href="{{post.url}}" class="flex w-full justify-center items-center gap-1 ">
                                            <div class="h-16 w-[20%]">
                                                {% srcset_image post.titleImg width-60 %}

                                                <!-- <img src="{{post.titleImg.file.url}}" alt="{{post.title}}"
                                                    class="h-full w-full text-[10px]" loading="lazy" /> -->
                                            </div>
                                            <h3 class="w-[80%] line-clamp-3">

                                                {{ post.title|truncatewords:10 }}
                                            </h3>
                                        </a>
                                    </li>
                                    {% endfor %}
                                </ul>
                                {% endif %}
                            </article>
                        </div>
                        <div id="second" class="hidden py-2">
                            <article class="w-full py-1 px-2 h-auto shadow">
                                {% if page.get_trending_blogs %}
                                <ul>
                                    {% for post in page.get_trending_blogs %}
                                    <li class="my-1 flex justify-start border-b">
                                        <a href="{{post.url}}" class="flex w-full justify-center items-center gap-1 ">
                                            <div class="h-16 w-[20%]">

                                                {% srcset_image post.titleImg width-60 %}

                                            </div>
                                            <h3 class="w-[80%] line-clamp-3">

                                                {{ post.title|truncatewords:10 }}
                                            </h3>
                                        </a>
                                    </li>
                                    {% endfor %}
                                </ul>
                                {% endif %}
                            </article>
                        </div>
                    </div>
                </div>

            </section>

            <!-- Archives Categories -->
            <div class="p-4 bg-white rounded-xl shadow-2xl my-2">
                <h1 class="font-bold text-xl mb-1">Archives</h1>
                <div class="flex gap-1">

                    {% for cat in page.get_cat_archives %}
                    <div class="gap-1">
                        <a href="{{page.url}}category/{{cat.0.slug}}/"
                            class="hover:font-bold px-1.5 py-0.5 rounded bg-[{{cat.bgColor}}] text-[{{cat.fgColor}}] text-sm">
                            {{cat.0}}
                            <b>({{cat.1}})</b>
                        </a>
                        <br />

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

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





</div>
{% endblock %}
{% block 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>

<script>
    let slideIndex = 0;
    showSlides();

    function showSlides() {
        let i;
        let slides = document.getElementsByClassName("mySlides");
        let dots = document.getElementsByClassName("dot");
        for (i = 0; i < slides.length; i++) {
            slides[i].style.display = "none";
        }
        slideIndex++;
        if (slideIndex > slides.length) { slideIndex = 1 }
        for (i = 0; i < dots.length; i++) {
            dots[i].className = dots[i].className.replace(" active", "");
        }
        slides[slideIndex - 1].style.display = "block";
        dots[slideIndex - 1].className += " active";
        setTimeout(showSlides, 2000); // Change image every 2 seconds
    }
</script>

<script>
    let tabsContainer = document.querySelector("#tabs");

    let tabTogglers = tabsContainer.querySelectorAll("#tabs a");

    console.log(tabTogglers);

    tabTogglers.forEach(function (toggler) {
        toggler.addEventListener("click", function (e) {
            e.preventDefault();

            let tabName = this.getAttribute("href");

            let tabContents = document.querySelector("#tab-contents");

            for (let i = 0; i < tabContents.children.length; i++) {

                tabTogglers[i].parentElement.classList.remove("border-t", "border-r", "border-l", "-mb-px", "bg-white"); tabContents.children[i].classList.remove("hidden");
                if ("#" + tabContents.children[i].id === tabName) {
                    continue;
                }
                tabContents.children[i].classList.add("hidden");

            }
            e.target.parentElement.classList.add("border-t", "border-r", "border-l", "-mb-px", "bg-white");
        });
    });

</script>

{% endblock script %}