@if($locale == 'ar')
 @php $image_url = $account && $account->accounts_img_rtl ? $imagesBaseUrl.'uploads/'.env('accountId').'/images/original/'.$account->accounts_img_rtl : $imagesBaseUrl.'uploads/'.env('accountId').'/images/original/'.$account->accounts_img_favicon ; @endphp
@else
 @php $image_url = $account && $account->accounts_img_ltr ? $imagesBaseUrl.'uploads/'.env('accountId').'/images/original/'.$account->accounts_img_ltr : $imagesBaseUrl.'uploads/'.env('accountId').'/images/original/'.$account->accounts_img_favicon  ; @endphp
@endif
<a aria-label="go to menu page" 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_2 text_1 {{ $dir }}" >
    <a aria-label="close menu page" 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="seperated-link"><a aria-label="go to offers page" href="{{route('products',['is_offers'=>1])}}" class="text_4  font-16"> {{ __('lang.offers') }}</a></li>
        <li class="seperated-link"><a aria-label="go to products page" href="{{route('products')}}" class="text_4 font-16 "> {{$account->products_title}}</a></li>
        <li class="seperated-link"><a aria-label="go to brands page" href="{{route( 'brands')}}" class="text_4 font-16 "> {{__('theme5.brands')}}</a></li>
        @if(isset($forms_settings) && sizeof($forms_settings))
            @foreach ($forms_settings as $forms_setting)
                @if($forms_setting->forms_settings_type !='contactus')
                    <li class=" seperated-link"><a aria-label="go to {{$forms_setting->forms_settings_name }} page" href="{{route('pages.index',$forms_setting->forms_settings_type)}}" class="text_4 font-16 "> {{$forms_setting->forms_settings_name}}</a></li>
                @endif
            @endforeach
        @endif

        @foreach($categoriesTree as $category)
            @if(sizeof($category->subcategories) > 0)
                <li class="seperated-link">

                    <span class="text_4 font-16">{{ $category->categories_title }}</span>
                    <ul>
                        <li class="bg-seeAll">
                            <a aria-label="go to {{$category->categories_title }} category page" href="{{categoryRoute($category)}}" class="text_4 font-16">{{__('lang.seeAll') }}</a>
                        </li>
                        @foreach($category->subcategories as $subcategory)
                            @if(sizeof($subcategory->subcategories) > 0)
                                <li class="ps-3">
                                    <span class="text_4 font-16">{{ $subcategory->categories_title }}</span>
                                    <ul>
                                        <li class="bg-seeAll">
                                            <a aria-label="go to {{$subcategory->categories_title }} subcategory page" href="{{categoryRoute($subcategory)}}" class="text_4 font-16">{{__('lang.seeAll') }}</a>
                                        </li>
                                        @foreach($subcategory->subcategories as $childcategory)
                                        <li class="ps-3">
                                            <a aria-label="go to {{$childcategory->categories_title }} subcategory page" href="{{categoryRoute($childcategory)}}" class="text_4 font-16">{{ $childcategory->categories_title }}</a>
                                        </li>
                                        @endforeach
                                    </ul>
                                </li>
                            @else
                                <li class="ps-3">
                                    <a aria-label="go to {{$subcategory->categories_title }} subcategory page" href="{{categoryRoute($subcategory)}}" class="text_4 font-16">{{ $subcategory->categories_title }}</a>
                                </li>
                            @endif
                        @endforeach
                    </ul>
                </li>
            @else
                <li class="seperated-link">
                    <a aria-label="go to {{$category->categories_title }} category page" href="{{categoryRoute($category)}}" class="text_4 font-16">{{ $category->categories_title }}</a>
                </li>
            @endif
        @endforeach

        @if($account->accounts_show_articles == '1')
            <li class=" seperated-link"><a aria-label="go to articles page" href="{{route('articles')}}" class="text_4 font-16 "> {{ __('lang.articles')  }}</a></li>
        @endif

        @if($account->accounts_show_questions == '1')
            <li class=" seperated-link"><a aria-label="go to faqs page" href="{{route('faqs')}}" class="text_4 font-16 "> {{ __('lang.faqs')  }}</a></li>
        @endif

        @if(isset($static_pages))
            @foreach ($static_pages as $static_page)
                @if(!in_array($static_page->static_pages_slug,['terms','about','privacy','return_policy']) && $static_page->static_pages_type == 'link')
                    <li class=" seperated-link"><a aria-label="go to {{$static_page->static_pages_title }} page" href="{{route('pages.index', $static_page->static_pages_slug)}}" class="text_4 font-16 "> {{isset($static_page) ? $static_page->static_pages_title : '' }}</a></li>
                @endif
            @endforeach
        @endif

         @if(session()->has('customer'))
           <li class="seperated-link"><a aria-label="go to my orders page" class=" {{ isset($activePage) && $activePage == 'my_orders' ? 'active' : '' }}" href="{{route('getOrders')}}" >{{__('lang.myOrders')}}</a></li>
           <li class="seperated-link"><a aria-label="go to my addresses page" class=" {{ isset($activePage) && $activePage == 'my_addresses' ? 'active' : '' }}" href="{{route('getCstomerAddresses')}}" >{{__('lang.deliveryAddresses')}}</a></li>
           <li class="seperated-link"><a aria-label="go to my favs page" class=" {{ isset($activePage) && $activePage == 'favorite' ? 'active' : '' }}" href="{{route('customerFavs')}}" >{{__('lang.myFavs')}}</a></li>
            @if($account->accounts_show_wallet)
           <li class="seperated-link"><a aria-label="go to my wallet page" class=" {{ isset($activePage) && $activePage == 'my_wallet' ? 'active' : '' }}" href="{{route('wallet')}}" >{{__('lang.myWallet')}}</a></li>
            @endif
            @if(collect($account_payments ?? [])->contains(fn($m) => $m->payments_slug == 'store_credit'))
           <li class="seperated-link"><a aria-label="go to my store credit page" class=" {{ isset($activePage) && $activePage == 'my_store_credit' ? 'active' : '' }}" href="{{route('storeCredit')}}" >{{__('lang.storeCredit')}}</a></li>
            @endif
            @if($account->accounts_show_points)
           <li class="seperated-link"><a aria-label="go to points levels page" class=" {{ isset($activePage) && $activePage == 'points_levels' ? 'active' : '' }}" href="{{route('pointsLevels')}}" >{{ str_contains($account->accounts_slug,'nasser') ? __('lang.myPoints-n') : __('lang.myPoints')}}</a></li>
            @endif
           <li class="seperated-link"><a aria-label="go to profile page" class=" {{ isset($activePage) && $activePage == 'profile' ? 'active' : '' }}" href="{{route('profile')}}" >{{__('lang.personalDetails')}}</a></li>
           <li class="seperated-link"><a aria-label="go to logout page" class="" href="{{route('logout')}}" >{{__('lang.logout')}}</a></li>
        @else
            <li class="seperated-link"><a aria-label="go to register page" href="{{route( 'register')}}" class="text_4 font-16 "> {{__('lang.register')}}</a></li>
            <li class="seperated-link"><a aria-label="go to login page" href="{{route( 'login')}}" class="text_4 font-16 "> {{__('lang.login')}}</a></li>
        @endif



        @foreach($locales as $lang)
            <li class=" {{ $lang == $locale ? 'd-none' : ' d-md-none d-inline' }}">
                <a aria-label="go to {{$lang}} language page" href="{{route('lang',$lang)}}" class="text_4  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