@if(get_setting('topbar_banner') != null)
    <div class="position-relative top-banner removable-session z-1035 d-none" data-key="top-banner"
         data-value="removed">
        <a href="{{ get_setting('topbar_banner_link') }}" class="d-block text-reset">
            <img src="{{ uploaded_asset(get_setting('topbar_banner')) }}" class="w-100 mw-100 h-50px">
        </a>
        <button class="btn text-white absolute-top-right set-session" data-key="top-banner" data-value="removed"
                data-toggle="remove-parent" data-parent=".top-banner">
            <i class="la la-close la-2x"></i>
        </button>
    </div>
@endif

<header>

    <div class="header-top">

        <div class="container">

            <ul class="header-social-container">

                <li>
                    <a href="#" class="social-link">
                        <ion-icon name="logo-facebook"></ion-icon>
                    </a>
                </li>

                <li>
                    <a href="#" class="social-link">
                        <ion-icon name="logo-twitter"></ion-icon>
                    </a>
                </li>

                <li>
                    <a href="#" class="social-link">
                        <ion-icon name="logo-instagram"></ion-icon>
                    </a>
                </li>

                <li>
                    <a href="#" class="social-link">
                        <ion-icon name="logo-linkedin"></ion-icon>
                    </a>
                </li>

            </ul>

            <div class="header-alert-news">
                <p>
                    <b>Free Shipping</b>
                    This Week Order Over - $55
                </p>
            </div>

            <div class="header-top-actions">

                <ul class="list-inline mb-0 h-100 d-flex justify-content-end align-items-center">
                    @if(get_setting('show_language_switcher') == 'on')
                        <li class="list-inline-item dropdown mr-3" id="lang-change">
                            @php
                                if(Session::has('locale')){
                                    $locale = Session::get('locale', Config::get('app.locale'));
                                }
                                else{
                                    $locale = 'en';
                                }
                            @endphp
                            <a href="javascript:void(0)" class="dropdown-toggle text-reset d-flex"
                               data-toggle="dropdown" data-display="static">
                                <img src="{{ static_asset('assets/img/placeholder.jpg') }}"
                                     data-src="{{ static_asset('assets/img/flags/'.$locale.'.png') }}"
                                     class="mr-2 lazyload"
                                     alt="{{ \App\Models\Language::where('code', $locale)->first()->name }}"
                                     height="11">
                                <span
                                    class="opacity-60 text-muted">{{ \App\Models\Language::where('code', $locale)->first()->name }}</span>
                            </a>
                            <ul class="dropdown-menu dropdown-menu-left">
                                @foreach (\App\Models\Language::where('status', 1)->get() as $key => $language)
                                    <li>
                                        <a href="javascript:void(0)" data-flag="{{ $language->code }}"
                                           class="dropdown-item d-flex @if($locale == $language) active @endif">
                                            <img src="{{ static_asset('assets/img/placeholder.jpg') }}"
                                                 data-src="{{ static_asset('assets/img/flags/'.$language->code.'.png') }}"
                                                 class="mr-1 lazyload" alt="{{ $language->name }}" height="11">
                                            <span class="language">{{ $language->name }}</span>
                                        </a>
                                    </li>
                                @endforeach
                            </ul>
                        </li>
                    @endif

                    @if(get_setting('show_currency_switcher') == 'on')
                        <li class="list-inline-item dropdown ml-auto ml-lg-0 mr-0" id="currency-change">
                            @php
                                if(Session::has('currency_code')){
                                    $currency_code = Session::get('currency_code');
                                }
                                else{
                                    $currency_code = \App\Models\Currency::findOrFail(get_setting('system_default_currency'))->code;
                                }
                            @endphp
                            <a href="javascript:void(0)" class="dropdown-toggle text-reset py-2 opacity-60"
                               data-toggle="dropdown" data-display="static">
                                {{ \App\Models\Currency::where('code', $currency_code)->first()->name }} {{ (\App\Models\Currency::where('code', $currency_code)->first()->symbol) }}
                            </a>
                            <ul class="dropdown-menu dropdown-menu-right dropdown-menu-lg-left">
                                @foreach (\App\Models\Currency::where('status', 1)->get() as $key => $currency)
                                    <li>
                                        <a class="dropdown-item @if($currency_code == $currency->code) active @endif"
                                           href="javascript:void(0)"
                                           data-currency="{{ $currency->code }}">{{ $currency->name }}
                                            ({{ $currency->symbol }})</a>
                                    </li>
                                @endforeach
                            </ul>
                        </li>
                    @endif
                    {{--                    @if (get_setting('helpline_number'))--}}
                    {{--                        <li class="list-inline-item mr-3 text-muted pr-3 pl-0  pr-1 pl-1">--}}
                    {{--                            <a href="tel:{{ get_setting('helpline_number') }}" class=" d-flex ">--}}
                    {{--                                <ion-icon name="call-outline" class="mt-1 text-web"></ion-icon>--}}
                    {{--                                <span class="text-web mr-1 ml-1"> {{ get_setting('helpline_number') }}</span>--}}
                    {{--                            </a>--}}
                    {{--                        </li>--}}
                    {{--                    @endif--}}
                    @auth
                        @if(!isAdmin())

                            <li class="list-inline-item mr-2 ml-2  dropdown">
                                <a class="dropdown-toggle no-arrow text-reset" data-toggle="dropdown"
                                   href="javascript:void(0);" role="button" aria-haspopup="false" aria-expanded="false">
                                    <span class="">
                                        <span class="position-relative d-inline-block">
                                            <i class="las la-bell h4"></i>
                                            @if(count(Auth::user()->unreadNotifications) > 0)
                                                <span
                                                    class="badge badge-sm badge-dot badge-circle badge-primary position-absolute absolute-top-right"></span>
                                            @endif
                                        </span>
                                    </span>
                                </a>
                                <div class="dropdown-menu dropdown-menu-right dropdown-menu-lg py-0"
                                     style="width: 370px;">
                                    <div class="p-3 bg-light border-bottom">
                                        <h6 class="mb-0">{{ translate('Notifications') }}</h6>
                                    </div>
                                    <div class="px-3 c-scrollbar-light overflow-auto " style="max-height:300px;">
                                        <ul class="list-group list-group-flush">
                                            @forelse(Auth::user()->unreadNotifications as $notification)
                                                <li class="list-group-item">
                                                    @if($notification->type == 'App\Notifications\OrderNotification')
                                                        @if(Auth::user()->user_type == 'customer')
                                                            <a href="{{route('purchase_history.details', encrypt($notification->data['order_id']))}}"
                                                               class="text-reset">
                                                                <span>{{translate('Order code: ')}}</span>
                                                                <span class="text-web">
                                                                         {{$notification->data['order_code']}}
                                                                    </span>
                                                                <br>
                                                                <span> {{ translate('has been '. ucfirst(str_replace('_', ' ', $notification->data['status'])))}}</span>
                                                            </a>
                                                        @elseif (Auth::user()->user_type == 'seller')
                                                            <a href="{{ route('seller.orders.show', encrypt($notification->data['order_id'])) }}"
                                                               class="text-reset">
                                                                <span class="ml-2">
                                                                    {{translate('Order code: ')}} {{$notification->data['order_code']}} {{ translate('has been '. ucfirst(str_replace('_', ' ', $notification->data['status'])))}}
                                                                </span>
                                                            </a>
                                                        @endif
                                                    @endif
                                                </li>
                                            @empty
                                                <li class="list-group-item">
                                                    <div class="py-4 text-center fs-16">
                                                        {{ translate('No notification found') }}
                                                    </div>
                                                </li>
                                            @endforelse
                                        </ul>
                                    </div>
                                    <div class="text-center border-top">
                                        <a href="{{ route('all-notifications') }}" class="text-reset d-block py-2">
                                            {{translate('View All Notifications')}}
                                        </a>
                                    </div>
                                </div>
                            </li>
                        @endif
                        <li class="list-inline-item mx-3">
                            <a href="{{ route('logout') }}"
                               class=" btn-web mt-2 fs-6">{{ translate('Logout')}}</a>
                        </li>

                    @endauth
                </ul>

            </div>

        </div>

    </div>

    <div class="header-main">

        <div class="container">

            <a class="header-logo" href="{{ route('home') }}">
                @php
                    $header_logo = get_setting('header_logo');
                @endphp
                @if($header_logo != null)
                    <img src="{{ uploaded_asset($header_logo) }}" alt="{{ env('APP_NAME') }}" width="120" height="36">
                @else
                    <img src="{{ static_asset('assets/img/logo.png') }}" alt="{{ env('APP_NAME') }}" width="200"
                         height="60">
                @endif
            </a>

            <div class="header-search-container">
                <form action="{{ route('search') }}" method="GET" class="stop-propagation">
                    <div class="d-flex position-relative align-items-center">
                        <div class="d-lg-none" data-toggle="class-toggle" data-target=".front-header-search">
                            <button class="btn px-2" type="button"><i class="la la-2x la-long-arrow-left"></i></button>
                        </div>
                        <div class="input-group">
                            <input class="search-field" id="search" name="keyword" @isset($query)
                                value="{{ $query }}"
                                   @endisset placeholder="{{translate('shopping for...')}}" autocomplete="off">

                            <button class="search-btn" type="submit">
                                <ion-icon name="search-outline"></ion-icon>
                            </button>
                        </div>
                    </div>
                </form>
                <div
                    class="typed-search-box  stop-propagation document-click-d-none d-none bg-white rounded shadow-lg position-absolute left-0 top-100 w-100"
                    style="min-height: 200px;z-index: 100">
                    <div class="search-preloader absolute-top-center">
                        <div class="dot-loader">
                            <div></div>
                            <div></div>
                            <div></div>
                        </div>
                    </div>
                    <div class="search-nothing d-none p-3 text-center fs-16">

                    </div>
                    <div id="search-content" class="text-left">

                    </div>
                </div>

            </div>

            <div class="header-user-actions">
                @auth
                    <a @if(isAdmin()) href="{{ route('admin.dashboard') }}"
                       @else @if (Auth::user()->user_type == 'seller') href="{{ route('seller.dashboard') }}"
                       @else href="{{ route('dashboard') }}" @endif @endif class="action-btn">
                        <ion-icon name="person-outline"></ion-icon>
                    </a>
                @else
                    <div class="dropdown">
                        <ion-icon name="person-outline" class="h3 dropdown-toggle" type="button"
                                  id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false"></ion-icon>
                        <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                            <li>
                                <a href="{{ route('user.login') }}"
                                   class="dropdown-item">{{ translate('Login')}}</a>
                            </li>
                            <li>
                                <a href="{{ route('user.registration') }}"
                                   class="dropdown-item">{{ translate('Registration')}}</a>
                            </li>
                        </ul>
                    </div>
                @endauth


                <div class="" id="wishlist">
                    @include('frontend.partials.wishlist')
                </div>


                <div id="cart_items">
                    @include('frontend.partials.cart')
                </div>


                <div class="" id="compare">
                    @include('frontend.partials.compare')
                </div>


            </div>

        </div>

    </div>

    <nav class="desktop-navigation-menu" style="    box-shadow: 0 8px 8px -4px #cfcfcf;">

        <div class="container">

            <ul class="desktop-menu-category-list">

                <li class="menu-category">
                    @if(Route::currentRouteName() !='home')
                        <a href="{{url('/')}}" class="menu-title">{{translate('home')}}</a>
                    @endif
                </li>


                <li class="menu-category">
                    <a href="#" class="menu-title">{{translate('Shop')}}</a>

                    <div class="dropdown-panel">
                        @foreach (\App\Models\Category::get() as $key => $category)
                            <ul class="dropdown-panel-list">
                                @if(single_category($category->id))
                                    <li class=" menu-title">
                                        <a href="{{ route('products.category', $category->slug) }}">{{single_category($category->id)->getTranslation('name')}}</a>
                                    </li>
                                    @foreach(\App\Utility\CategoryUtility::get_immediate_children_ids($category->id) as $id)
                                        <li class=" panel-list-item">
                                            <a href="{{ route('products.category', category($id)->slug) }}">{{category($id)->getTranslation('name')}}</a>
                                        </li>
                                    @endforeach
                                    <li class="panel-list-item">
                                        <a href="{{ route('products.category', $category->slug) }}">
                                            <img
                                                src="{{ uploaded_asset(\App\Models\Category::where('id',$category->id)->where('parent_id',0)->first()->banner) }}"
                                                alt="{{ $category->getTranslation('name') }}"
                                                onerror="this.onerror=null;this.src='{{ static_asset('assets/img/placeholder.jpg') }}';"
                                                width="250"
                                                height="119">
                                        </a>
                                    </li>
                                @endif

                            </ul>
                        @endforeach


                    </div>
                </li>
                @foreach (\App\Models\Category::where('parent_id',0)->get() as $key => $category)
                    <li class="menu-category">
                        <a href="{{ route('products.category', $category->slug) }}"
                           class="menu-title">{{$category->getTranslation('name')}}</a>

                        <ul class="dropdown-list">

                            @foreach(\App\Utility\CategoryUtility::get_immediate_children_ids($category->id) as $id)
                                <li class=" dropdown-item">
                                    <a href="{{ route('products.category', \App\Models\Category::where('id',$id)->first()->slug) }}">{{\App\Models\Category::where('id',$id)->first()->getTranslation('name')}}</a>
                                </li>
                            @endforeach


                        </ul>
                    </li>
                @endforeach


            </ul>

        </div>

    </nav>

    <div class="mobile-bottom-navigation">

        <button class="action-btn" data-mobile-menu-open-btn>
            <ion-icon name="menu-outline"></ion-icon>
        </button>


        <div id="cart_items">
            @include('frontend.partials.cart')
        </div>


        <div class="" id="compare">
            @include('frontend.partials.compare')
        </div>

        <a  href="{{ route('home') }}" class="action-btn">
            <ion-icon name="home-outline"></ion-icon>
        </a>

        <div class="" id="wishlist">
            @include('frontend.partials.wishlist')
        </div>

        <button class="action-btn" >
            @auth
                <a @if(isAdmin()) href="{{ route('admin.dashboard') }}"
                   @else @if (Auth::user()->user_type == 'seller') href="{{ route('seller.dashboard') }}"
                   @else href="{{ route('dashboard') }}" @endif @endif class="action-btn">
                    <ion-icon name="person-outline"></ion-icon>
                </a>
            @else
                <div class="dropdown">
                    <ion-icon name="person-outline" class="h3 dropdown-toggle" type="button"
                              id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false"></ion-icon>
                    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                        <li>
                            <a href="{{ route('user.login') }}"
                               class="dropdown-item">{{ translate('Login')}}</a>
                        </li>
                        <li>
                            <a href="{{ route('user.registration') }}"
                               class="dropdown-item">{{ translate('Registration')}}</a>
                        </li>
                    </ul>
                </div>
            @endauth
        </button>

    </div>

    <nav class="mobile-navigation-menu  has-scrollbar" data-mobile-menu>

        <div class="menu-top">
            <h2 class="menu-title">{{translate('Menu')}}</h2>

            <button class="menu-close-btn" data-mobile-menu-close-btn>
                <ion-icon name="close-outline"></ion-icon>
            </button>
        </div>

        <ul class="mobile-menu-category-list">

            <li class="menu-category">
                @if(Route::currentRouteName() !='home')
                    <a href="{{url('/')}}" class="menu-title">{{translate('home')}}</a>
                @endif
            </li>

            @foreach (\App\Models\Category::get() as $key => $category)
                <li class="menu-category">
                    @if(single_category($category->id))
                        <button class="accordion-menu" data-accordion-btn>
                            <a href="{{ route('products.category', $category->slug) }}"
                               class="menu-title">{{single_category($category->id)->getTranslation('name')}}</a>

                            <div>
                                <ion-icon name="add-outline" class="add-icon"></ion-icon>
                                <ion-icon name="remove-outline" class="remove-icon"></ion-icon>
                            </div>
                        </button>


                        <ul class="submenu-category-list" data-accordion>
                            @foreach(\App\Utility\CategoryUtility::get_immediate_children_ids($category->id) as $id)
                                <li class="submenu-category">
                                    <a class="submenu-title"
                                       href="{{ route('products.category', category($id)->slug) }}">{{category($id)->getTranslation('name')}}</a>
                                </li>
                            @endforeach
                        </ul>
                    @endif
                </li>
            @endforeach


        </ul>

        <div class="menu-bottom">

            <ul class="menu-category-list"  >
                @if(get_setting('show_language_switcher') == 'on')
                    @php
                        if(Session::has('locale')){
                            $locale = Session::get('locale', Config::get('app.locale'));
                        }
                        else{
                            $locale = 'en';
                        }
                    @endphp
                    <li class="menu-category" id="lang-change">

                        <button class="accordion-menu" data-accordion-btn>
                            <p class="menu-title">{{ \App\Models\Language::where('code', $locale)->first()->name }}</p>

                            <ion-icon name="caret-back-outline" class="caret-back"></ion-icon>
                        </button>

                        <ul class="submenu-category-list" data-accordion >
                            @foreach (\App\Models\Language::where('status', 1)->get() as $key => $language)
                                <li class="submenu-category">
                                    <a href="javascript:void(0)" data-flag="{{ $language->code }}"
                                       class=" submenu-title">{{ $language->name }}</a>
                                </li>
                            @endforeach

                        </ul>

                    </li>
                @endif
                @if(get_setting('show_currency_switcher') == 'on')
                    @php
                        if(Session::has('currency_code')){
                            $currency_code = Session::get('currency_code');
                        }
                        else{
                            $currency_code = \App\Models\Currency::findOrFail(get_setting('system_default_currency'))->code;
                        }
                    @endphp
                    <li class="menu-category" id="currency-change">
                        <button class="accordion-menu" data-accordion-btn>
                            <p class="menu-title">{{ \App\Models\Currency::where('code', $currency_code)->first()->name }} {{ (\App\Models\Currency::where('code', $currency_code)->first()->symbol) }}
                            </p>
                            <ion-icon name="caret-back-outline" class="caret-back"></ion-icon>
                        </button>

                        <ul class="submenu-category-list" data-accordion  style="overflow-y: scroll;">
                            @foreach (\App\Models\Currency::where('status', 1)->get() as $key => $currency)
                            <li class="submenu-category">
                                <a  class="submenu-title" href="javascript:void(0)"
                                   data-currency="{{ $currency->code }}">{{ $currency->name }}
                                    ({{ $currency->symbol }})</a>
                            </li>
                            @endforeach

                        </ul>
                    </li>
                @endif

            </ul>

            <ul class="menu-social-container">

                <li>
                    <a href="#" class="social-link">
                        <ion-icon name="logo-facebook"></ion-icon>
                    </a>
                </li>

                <li>
                    <a href="#" class="social-link">
                        <ion-icon name="logo-twitter"></ion-icon>
                    </a>
                </li>

                <li>
                    <a href="#" class="social-link">
                        <ion-icon name="logo-instagram"></ion-icon>
                    </a>
                </li>

                <li>
                    <a href="#" class="social-link">
                        <ion-icon name="logo-linkedin"></ion-icon>
                    </a>
                </li>

            </ul>

        </div>

    </nav>

</header>