@if($locale == 'ar')
 @php $image_url = $account && $account->accounts_img_header_reverse ? $imagesBaseUrl.'uploads/'.env('accountId').'/images/original/'.$account->accounts_img_header_reverse : $imagesBaseUrl.'uploads/'.env('accountId').'/images/original/'.$account->accounts_img_favicon ; @endphp
@else
 @php $image_url = $account && $account->accounts_img_header_reverse ? $imagesBaseUrl.'uploads/'.env('accountId').'/images/original/'.$account->accounts_img_header_reverse : $imagesBaseUrl.'uploads/'.env('accountId').'/images/original/'.$account->accounts_img_favicon  ; @endphp
@endif
<a aria-label="open menu" id="show-sidebar" class="btn btn-sm bg-marine text_2 d-md-none d-inline" href="#mmenu">
    <i class="fas fa-bars"></i>
</a>
<nav id="mmenu" class="d-none background_1 text_2 {{ $dir }}" >
    <a aria-label="close menu" href="#close-btn" class="close-btn"><span><i class="fas fa-times fa-2x"></i></span></a>
    <ul>
        <li class="mmenu-logo">
            <a aria-label="go to home page" href="{{ route('home') }}" class="text-center">
                <img class="logo mb-3 img-responsive img_contain" src="{{$image_url}}" alt="{{ isset($setting) ?  $setting->accounts_name : ''  }}" height="80px"  style="max-width:100%">
            </a>
        </li>
        <li class="activePage"><a aria-label="go to offers page" href="{{route('products',['is_offers'=>1])}}" class="text_2 fw-bold font-16"> * {{ __('lang.offers') }}</a></li>
        @foreach($categoriesTree as $category)
            @if(sizeof($category->subcategories) > 0)
                <li class="">
                    <span class="text_2 fw-bold font-16">{{ $category->trans[0]->categories_title }}</span>
                    <ul>
                        <li class="bg-seeAll">
                            <a aria-label="go to category page" href="{{categoryRoute($category)}}" class="text_2 fw-bold font-16">{{__('lang.seeAll') }}</a>
                        </li>
                        @foreach($category->subcategories as $subcategory)
                            @if(sizeof($subcategory->subcategories) > 0)
                                <li class="ps-3">
                                    <span class="text_2 fw-bold font-16">{{ $subcategory->trans[0]->categories_title }}</span>
                                    <ul>
                                        <li class="bg-seeAll">
                                            <a aria-label="go to category page" href="{{categoryRoute($subcategory)}}" class="text_2 fw-bold font-16">{{__('lang.seeAll') }}</a>
                                        </li>
                                        @foreach($subcategory->subcategories as $childcategory)
                                        <li class="ps-3">
                                            <a aria-label="go to category page" href="{{categoryRoute($childcategory)}}" class="text_2 fw-bold font-16">{{ $childcategory->trans[0]->categories_title }}</a>
                                        </li>
                                        @endforeach
                                    </ul>
                                </li>
                            @else
                                <li class="ps-3">
                                    <a aria-label="go to category page" href="{{categoryRoute($subcategory)}}" class="text_2 fw-bold font-16">{{ $subcategory->trans[0]->categories_title }}</a>
                                </li>
                            @endif
                        @endforeach
                    </ul>
                </li>
            @else
                <li>
                    <a aria-label="go to category page" href="{{categoryRoute($category)}}" class="text_2 fw-bold font-16">{{ $category->trans[0]->categories_title }}</a>
                </li>
            @endif
        @endforeach

        @foreach($locales as $lang)
        <li class=" {{ $lang == $locale ? 'd-none' : ' d-md-none d-inline' }}">
            <a aria-label="change website language" href="{{route('lang',$lang)}}" class="text_2 fw-bold font-16">
                <i class="fas fa-globe"></i>
                @if( $locale == 'ar')
                ENGLISH
                @else
                عربي
                @endif
            </a>
        </li>

    @endforeach


    </ul>
</nav>


@push('css')
    {{-- <link type="text/css" rel="stylesheet" href="{{ asset('vendors/mmenu/css/demo.css') }}" /> --}}
    <link type="text/css" rel="stylesheet" href="{{ asset('vendors/mmenu/dist/mmenu-light.css') }}" />
    <style>

        /* .bg-seeAll{
            background-color: var(--background_6) !important;
        } */
        .mm-spn li.mmenu-logo:after {
            content: "";
            display: none !important;
        }
        .rtl .mm-spn li:before {
            content: "";
            display: block;
            position: absolute;
            top: calc(var(--mm-spn-item-height)/ 2);
            right: auto;
            left: calc(var(--mm-spn-item-height)/ 2);
            z-index: 0;
            width: 10px;
            height: 10px;
            border-top: 2px solid;
            border-right: 2px solid;
            -webkit-transform: rotate(231deg) translate(0,50%);
            -ms-transform: rotate(231deg) translate(0,50%);
            transform: rotate(231deg) translate(0,50%);
            opacity: .4;
        }
        .rtl .mm-spn.mm-spn--navbar.mm-spn--main:before {
            content: "";
            display: none;
        }
        .rtl .mm-spn.mm-spn--navbar:before {
            margin-top: -2px;
        }
        .rtl .mm-spn.mm-spn--navbar:before {
            content: "";
            display: block;
            position: absolute;
            top: calc(var(--mm-spn-item-height)/ 2);
            right: var(--mm-spn-item-indent);
            width: 10px;
            height: 10px;
            margin-top: -2px;
            border-top: 2px solid;
            border-left: 2px solid;
            -webkit-transform: rotate(132deg) translate(0%,50%);
            -ms-transform: rotate(132deg) translate(0%,50%);
            transform: rotate(132deg) translate(0%,50%);
            opacity: 0.8;
        }
        .mm-spn.mm-spn--navbar:after{
            text-align: left !important;
        }
        .rtl .mm-spn.mm-spn--navbar:after{
            text-align: right !important;
        }
        .mm-ocd--open {
            backdrop-filter: blur(20px);
            background: rgba(0,0,0,.25);
            bottom: 0;
            transition-delay: 0s;
        }

        .mm-spn.mm-spn--navbar:after, .mm-spn.mm-spn--navbar:before {
            opacity: 0.8;
            /* padding: 0px 12px; */
        }

        .close-btn{
            position: absolute !important;
            width: auto !important;
            height: auto !important;
            top: 0px !important;
            right: 0px !important;
            padding: 0px !important;
            border: 0px solid transparent !important;
        }
        .rtl .close-btn{
            right:auto !important;
            left: 0px !important;
        }
        .close-btn:after{
            content: "" !important;
            display: block !important;
            position: relative !important;
            top: 0 !important;
            right: 0 !important;
            bottom: 0 !important;
            border-right: 1px solid !important;
            opacity: .15 !important;
        }
    </style>
@endpush
@push('js')
    <script src="{{ asset('vendors/mmenu/dist/mmenu-light.js') }}"></script>
    <script>
        var menu = new MmenuLight(document.querySelector("#mmenu"), "all");
        document.querySelector("#mmenu").classList.remove('d-none')
        var navigator = menu.navigation({
            selectedClass: 'activePage',
            slidingSubmenus: true,
            // theme: 'light',
            title: '{{ strtoupper(__('lang.main_categories')) }}'

        });

        var drawer = menu.offcanvas({
            position: '{{ $dir == "rtl" ? "right" : "left" }}'
        });

        //	Open the menu.
        // document
        //     .querySelector('a[href="#mmenu"]')
        //     .addEventListener("click", (evnt) => {
        //         evnt.preventDefault();
        //         drawer.open();
        //     });
        document.querySelectorAll('a[href="#mmenu"]').forEach(element => {
            element.addEventListener("click", (evnt) => {
                evnt.preventDefault();
                drawer.open();
            });
        });

        //	Close the menu.
        document.querySelector('a[href="#close-btn"]')
            .addEventListener("click", (evnt) => {
                evnt.preventDefault();
                drawer.close();
            });
    </script>
@endpush