{% load core_tags %}
{% load wagtailimages_tags %}

{% for mainBlock in MainHeader.content %}
<div class="hidden md:block">

    {% if mainBlock.block_type == 'row' %}
    <nav
        class="bg-[{{mainBlock.value.bgColor}}] text-[{{mainBlock.value.fgColor}}] flex w-full {% if forloop.counter == 1 %} justify-between {% else %} justify-center {% endif %} ">

        {% for block in mainBlock.value.content %}
        <div class=" flex items-center gap-2  ">
            {% for block in block.value %}
            {% if block.block_type == 'company' %}
            {% if block.value.ciType == 'Logo' %}
            <img src="{{block.value.ciLogo.file.url}}" alt="{{block.value.ciLogo.title}}" class="h-16" />

            {% endif %}
            {% elif block.block_type == 'show_search' %}

            {% include 'Nav/search.html' %}
            {% elif block.block_type == 'social' %}
            <div class="inline-flex gap-2 mx-4 mt-0.5">

                {% for block in block.value %}
                <a href="{{block.value.soUrl}}">

                    {{block.value.soLogoText|safe}}
                </a>
                {% endfor %}
            </div>
            {% elif block.block_type == 'page' %}
            <a href="{{block.value.url}}"
                class="flex items-center font-bold gap-1 hover:bg-[{{mainBlock.value.hoverBgColor}}] hover:text-[{{mainBlock.value.hoverFgColor}}] px-2 py-2 rounded {% if request.path == block.value.url %} bg-[{{mainBlock.value.hoverBgColor}}] text-[{{mainBlock.value.hoverFgColor}}]{% endif %}">
                {% if block.value.specific.menuImageText %}
                <span>
                    {{block.value.specific.menuImageText|safe}}
                </span>
                {% endif %}
                <span>

                    {% if block.value.specific.menuName %}
                    {{block.value.specific.menuName}}
                    {% else %}
                    {{block.value.title}}
                    {% endif %}
                </span>
            </a>
            {% elif block.block_type == 'mega_menu' %}
            <div class="text-bold py-2 droppable px-2">
                <a href="{{block.value.page.url}}" class="flex items-center gap-2 link" title="{{cat.title}}">
                    {% if block.value.page.specific.menuImageText %}
                    <span class="text-[20px] mt-1 -mr-2">
                        {{block.value.page.specific.menuImageText|safe}}
                    </span>

                    {% endif %}
                    {% if block.value.page.specific.menuName %}
                    {{block.value.page.specific.menuName}}
                    {% else %}
                    {{block.value.page.title}}
                    {% endif %}
                    <i class='bx bxs-down-arrow menuicon'></i>
                </a>
                <div class='mega-menu w-full h-fit mt-2 pt-6 pb-10 text-base mega-theme shadow text-gray-950 z-50'>

                    <div class="flex w-full justify-center gap-4 menuList-themes">

                        {% for bodyBlock in block.value.body %}
                        <div class='gap-2 px-2'>

                            {% for colBlock in bodyBlock.value %}

                            {% if colBlock.block_type == 'heading' %}
                            <h1 class="font-bold {{colBlock.value.alignment}} {{colBlock.value.size}}">
                                {{colBlock.value.title}}

                            </h1>
                            {% elif colBlock.block_type == 'line_break' %}
                            <br />
                            {% elif colBlock.block_type == 'page' %}
                            <a href="{{colBlock.value.url}}" class="text-[14px]">

                                {{colBlock}}
                            </a>
                            {% elif colBlock.block_type == 'show_brand' %}
                            <div>
                                {% for brand in block.value.page.get_children.live %}
                                <a href="{{brand.url}}"
                                    class="px-2 capitalize text-gray-900 hover:font-bold text-[14px] py-0"
                                    title="{{brand.title}}">
                                    <!-- {% if brand.specific.brand.image %}
                                    {% image brand.specific.brand.image fill-100x28 %}
                                    {% else %} -->
                                    <!-- {% endif %} -->
                                    {{brand.title}}

                                </a>
                                {% endfor %}

                            </div>

                            {% elif colBlock.block_type == 'show_cat' %}
                            <div>

                                {% for subcat in block.value.page.specific.cat.sub_categories.all %}
                                <a href="{{block.value.page.url}}?q={{subcat.slug}}"
                                    class="px-2 capitalize text-gray-900 hover:font-bold text-[14px] py-0 my-1 "
                                    title="{{block.value.page.title}}">
                                    <span class="flex items-center gap-1">
                                        {% if subcat.image %}
                                        {% image subcat.image fill-40x40 %}
                                        {% else %}
                                        <div class="text-4xl">
                                            {% if block.value.page.specific.menuImageText %}
                                            {{block.value.page.specific.menuImageText|safe}}
                                            {% else %}
                                            <div class="rounded bg-zinc-100 w-10 h-8">
                                            </div>
                                            {% endif %}
                                        </div>
                                        {% endif %}
                                        {{subcat.name}}
                                    </span>
                                </a>
                                {% endfor %}

                            </div>

                            {% elif colBlock.block_type == 'show_price' %}
                            <div>
                                {% for price in block.value.page.specific.cat.price_range.all %}
                                <a href="{{block.value.page.url}}?q={{price.value}}"
                                    class="px-2 capitalize text-gray-900 hover:font-bold text-[14px] py-0"
                                    title="{{block.value.page.title}}">
                                    {{price.title}}
                                </a>
                                {% endfor %}
                            </div>

                            {% elif colBlock.block_type == 'show_feature' %}
                            <div>
                                {% for feature in block.value.page.specific.cat.features.all %}
                                <a href="{{block.value.page.url}}?q={{feature.feature.slug}}"
                                    class="px-2 capitalize text-gray-900 hover:font-bold text-[14px] py-0"
                                    title="{{block.value.page.title}}">
                                    {{feature.feature.name}}
                                </a>
                                {% endfor %}
                            </div>

                            {% elif colBlock.block_type == 'option' %}
                            <a href="{{colBlock.value.page.url}}" aria-label="{{colBlock.value.page.title}}"
                                class="menuImgTile-theme">
                                {% if colBlock.value.page %}
                                <img src="{{colBlock.value.page.specific.search_image.file.url}}"
                                    alt="{{colBlock.value.page.title}}" class="h-[200px]">
                                <h1 class="text-center">
                                    {{colBlock.value.text}}
                                </h1>
                                {% endif %}
                            </a>

                            {% else %}
                            {{colBlock.block_type}}

                            {% endif %}

                            {% endfor %}

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

                </div><!-- .mega-menu-->
            </div>
            {% else %}
            {{block.block_type}}
            {% endif %}
            {% endfor %}
        </div>
        {% endfor %}

    </nav>
    {% else %}
    {{mainBlock.block_type}}
    {% endif %}
</div>
{% endfor %}
<!-- 
<div class="block md:hidden">
    {% company_logo 'Logo' as logo %}
    <div class="flex w-full justify-center bg-white">

        <img src="{{logo.ciLogo.file.url}}" alt="{{logo.ciLogo.title}}" style="height: 100px;" />
    </div>
</div> -->


<!-- Bottom Menu -->
<div class="block md:hidden fixed w-full  bottom-0 border border-t-2 shadow-2xl">
    {% get_bottomMenu as bottomMenu %}

    {% for mblock in bottomMenu.content %}
    {% if mblock.block_type == 'row' %}
    <div class="bg-[{{mblock.value.bgColor}}] text-[{{mblock.value.fgColor}}] flex w-full gap-6 px-2 overflow-x-scroll justify-between items-center">
        {% for block in mblock.value.content %}
        <div>
            {% if block.block_type == 'column' %}
            {% for block in block.value %}
            {% if block.block_type == 'page' %}
            <a href="{{block.value.url}}"
                class=" catamaran 
                {% if request.path == block.value.url %} 
                bg-[{{mblock.value.hoverBgColor}}] 
                text-[{{mblock.value.hoverFgColor}}] font-bold 
                {% endif %} 
                grid w-12 text-center align-center roboto-regular hover:bg-[{{mblock.value.hoverBgColor}}] hover:text-[{{mblock.value.hoverFgColor}}]"
                title="{{block.value.title}}" id="{{block.value.slug}}" onchange="activeMenu(`{{block.value.slug}}`)">
                <!-- <div class="flex w-full justify-center">
                    {% if request.path == block.value.url %}
                    <div class="h-1 bg-orange-500 w-[70%] rounded-b-xl"></div>
                    {% endif %}
                </div> -->
                {% if block.value.specific.menuImageText %}
                <h1 class="text-[28px]" aria-label="{{block.value.title}}">
                    {{block.value.specific.menuImageText|safe}}
                </h1>
                {% endif %}
                <h2 class="capitalize text-[14px] -mt-2 w-full">
                    {% if block.value.menuName %}
                    {{block.value.menuName}}
                    {% else %}
                    {{block.value.title}}
                    {% endif %}
                </h2>
            </a>
            {% elif block.block_type == 'show_burger_menu' %}
            {% include 'Nav/burgerMenu.html' %}

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

    {% endfor %}
    <!-- Menus -->


</div>

<script>
    function activeMenu(id){
        document.getElementById(id).classList.add('active')
    }
</script>