@php use App\Models\Category\Category; @endphp
@php /** @var Category $rootCategory */ @endphp

@if(isset($categoryTree['categories']) && !empty($categoryTree['categories']))

    @php
        $categories = $categoryTree['categories'];
    @endphp


    <li class="flex items-center py-[1rem] mr-[2.4rem] relative group">

        <a class="nav__link" href="{{ $categories['link'] }}" title="{{ $categories['title'] }}">
            <img class="nav__icon  hide-lg" src="{{ asset('shop/images/cat-icon.svg') }}" alt="">
            {{ $categories['title'] }}
        </a>

        <button class="nav__subnav-toggle" type="button">
            <img src="{{ asset('shop/images/dropdown-toggle-arrow.svg') }}" alt="Show">
        </button>
        <div class="overflow-hidden group-hover:overflow-auto h-0 group-hover:h-auto opacity-0 group-hover:opacity-100 flex w-[940px]  extra:w-[1080px] xxl:w-[1140px] absolute top-[100%] left-0 z-[100] bg-white shadow-lg transition-all duration-300">
            <div class="flex flex-col h-full w-full">
                <ul class="w-full grid grid-cols-3 p-12  pb-16 gap-4 max-h-[calc(100vh-190px)] overflow-y-auto menu-container">
                    @foreach($categories['childrens'] as $category)
                        <li class="">
                            <a class=" text-[#4B4D49] text-[16px] hover:text-[#2184CB] flex items-start gap-[12px]" href="{{ $category['link'] }}"
                                title="{{ $category['title'] }}">
                                <picture>
                                    <source srcset="{{ $category['images']['category_icon']['webp'] }}" type="image/webp">
                                    <img width="20" height="20" class="!h-[20px] w-[20px]" src="{{ $category['images']['category_icon']['source'] }}" alt="{{ $category['title'] }}">
                                </picture>
                                {{ $category['title'] }}
                            </a>
                        </li>
                    @endforeach
                </ul>
                @if($categoryBannerOne && $categoryBannerTwo && $categoryBannerThree)
                <div class="w-full flex ">
                    <a role="banner" title="banner" href="{{ $categoryBannerOne['link'] }}" class="block flex-1 aspect-[1.9]">
                        <picture>
                            <source srcset="{{ $categoryBannerOne['image']['webp'] }}" type="image/webp">
                            <img width="380" height="200" class="object-cover w-full h-full" src="{{ $categoryBannerOne['image']['source']}}" alt="{{ $category['title'] }}">
                        </picture>
                    </a>
                    <a role="banner" title="banner" href="{{ $categoryBannerTwo['link'] }}" class="block flex-1 aspect-[1.9]">
                        <picture>
                            <source srcset="{{ $categoryBannerTwo['image']['webp'] }}" type="image/webp">
                            <img width="380" height="200" class="object-cover w-full h-full" src="{{ $categoryBannerTwo['image']['source']}}" alt="{{ $category['title'] }}">
                        </picture>
                    </a>
                    <a role="banner" title="banner" href="{{ $categoryBannerThree['link'] }}" class="block flex-1 aspect-[1.9]">
                        <picture>
                            <source srcset="{{ $categoryBannerThree['image']['webp'] }}" type="image/webp">
                            <img width="380" height="200" class="object-cover w-full h-full" src="{{ $categoryBannerThree['image']['source']}}" alt="{{ $category['title'] }}">
                        </picture>
                    </a>
                </div>
                @endif
            </div>
        </div>
    </li>

@endif