<header>
    @if (env('Environment') == 'sendbox')
        <div class="top-header">
            <div class="container">
                <div class="d-block d-md-flex justify-content-center align-items-center">
                    <p class="text-center mb-0"> <a href="https://1.envato.market/AWQ5dN" target="_blank"
                            class="fs-7 text-white">This is a demo website - Buy genuine GroceryGo via using our official
                            link! Click Now >>> Buy Now</a></p>
                </div>
            </div>
        </div>
    @endif
    <div class="header-bar" id="header1">
        <nav class="navbar navbar-expand-lg sticky-top p-0">
            <div class="container navbar-container">
                <div class="d-flex align-items-center gap-2">
                    <div class="d-lg-none">
                        <button class="btn bg-transparent border-0 p-0 text-dark m-0" type="button"
                            data-bs-toggle="offcanvas" data-bs-target="#footersiderbar" aria-controls="footersiderbar">
                            <i class="fa-solid fa-bars fs-3 color-changer"></i>
                        </button>
                    </div>
                    <script>
                        document.addEventListener("DOMContentLoaded", function(event) {
                            if (localStorage.getItem('theme') === 'dark') {
                                var logo = "{{helper::image_path(@helper::appdata()->dark_logo)}}";
                            } else {
                                var logo = "{{ helper::image_path(helper::appdata()->logo) }}";
                            }
                            $('#logoimage').attr('src', logo);
                        });
                    </script>

                    <a class="navbar-brand p-0 m-0 {{ session()->get('direction') == '2' ? 'ms-3 me-0' : 'me-3' }}"  href="{{ route('home') }}">
                        <img src="" class="img-resposive img-fluid" alt="logo" id="logoimage">
                    </a>
                </div>

                <div class="buttons d-flex gap-2 align-items-center">
                    <!-- language-btn -->
                    @if (@helper::checkaddons('language'))
                        @if (helper::language()->count() > 1)
                            <div class="lag-btn dropdown d-block d-lg-none">
                                <a class="btn-lang border-0" type="button" id="dropdownMenuButton1"
                                    data-bs-toggle="dropdown" aria-expanded="false">
                                    <img src="{{ helper::image_path(Session::get('flag')) }}"
                                        class="img-fluid lag-img rounded-5" alt=""></a>
                                <ul class="dropdown-menu border-0 mt-2 shadow p-0 bg-body-secondary {{ session()->get('direction') == '2' ? 'min-dropdown-rtl' : 'min-dropdown' }}"
                                    aria-labelledby="dropdownMenuButton1">
                                    @foreach (helper::language() as $lang)
                                        <li>
                                            <a class="dropdown-item align-items-center gap-2 text-dark py-2 px-2 d-flex"
                                                href="{{ URL::to('/language-' . $lang->code) }}">
                                                <img src="{{ helper::image_path($lang->image) }}"
                                                    class="img-fluid lag-img rounded-5"
                                                    alt="">{{ $lang->name }}
                                            </a>
                                        </li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif
                    @endif

                    <div class="dropdown lag-btn d-block d-lg-none">
                        <a href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"
                            class="nav-sidebar-bg">
                            <i class="fa-regular fa-circle-half-stroke fs-6 text-primary"></i>
                        </a>
                        <ul
                            class="dropdown-menu border-0 mt-2 shadow p-0 bg-body-secondary {{ session()->get('direction') == '2' ? 'min-dropdown-rtl' : 'min-dropdown' }}">
                            <li>
                                <a class="dropdown-item d-flex cursor-pointer align-items-center p-2 gap-2"
                                    onclick="setLightMode()">
                                    <i class="fa-light fa-lightbulb fs-6"></i>
                                    <span>Light</span>
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item d-flex cursor-pointer align-items-center p-2 gap-2"
                                    onclick="setDarkMode()">
                                    <i class="fa-solid fa-moon fs-6"></i>
                                    <span>Dark</span>
                                </a>
                            </li>
                        </ul>
                    </div>

                    @if (@helper::checkaddons('currency_settigns'))
                        @if (helper::available_currency('')->count() > 1)
                            <div class="dropdown lag-btn d-block d-lg-none">
                                <a class="nav-sidebar-bg" href="#" role="button" data-bs-toggle="dropdown"
                                    aria-expanded="false">
                                    {{ session()->get('currency') }}
                                </a>
                                <ul
                                    class="dropdown-menu border-0 mt-2 shadow p-0 bg-body-secondary {{ session()->get('direction') == '2' ? 'min-dropdown-rtl' : 'min-dropdown' }}">
                                    @foreach (helper::available_currency() as $currencylist)
                                        <li>
                                            <a class="dropdown-item d-flex cursor-pointer align-items-center p-2 gap-2"
                                                href="{{ URL::to('/currency/change?currency=' . $currencylist['code']) }}">
                                                <span>
                                                    {{ $currencylist['currency'] . '  ' . $currencylist['name'] }}</span>
                                            </a>
                                        </li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif
                    @endif
                </div>
                {{-- for large devices - for header bar --}}
                <div class="navbar-collapse collapse">
                    <div class="navbar-nav mx-auto">
                        <a class="nav-link px-3 {{ request()->is('/') || request()->is('home') ? 'active' : '' }}"
                            aria-current="page" href="{{ route('home') }}">{{ trans('labels.home') }}</a>
                        <a class="nav-link px-3 {{ request()->is('categories') ? 'active' : '' }}"
                            href="{{ route('categories') }}">{{ trans('labels.category') }}</a>
                        <a class="nav-link px-3 {{ request()->is('search') ? 'active' : '' }}"
                            href="{{ route('search') }} ">{{ trans('labels.search') }}</a>
                        <a class="nav-link px-3 {{ request()->is('gallery') ? 'active' : '' }}"
                            href="{{ route('gallery') }} ">{{ trans('labels.gallery') }}</a>
                        @if (@helper::checkaddons('blog'))
                            <a class="nav-link px-3 {{ request()->is('blogs') ? 'active' : '' }}"
                                href="{{ route('blogs') }} ">{{ trans('labels.blogs') }}</a>
                        @endif

                        <a class="nav-link px-3 {{ request()->is('contactus') ? 'active' : '' }}"
                            href="{{ route('contact-us') }} ">{{ trans('labels.contact_us') }}</a>

                        @if (env('Environment') == 'sendbox')
                            <li class="nav-item dropdown">
                                <a class="nav-link px-3 dropdown-toggle" href="javascript:void(0)" id="menudropdown"
                                    data-bs-toggle="dropdown" aria-expanded="false">Theme</a>
                                <ul class="dropdown-menu theme-menu text-black " aria-labelledby="menudropdown"
                                    id="style-3">
                                    <li>
                                        <a class="nav-link" href="{{ URL::to('/?theme_id=1') }}">Theme-1</a>
                                    </li>
                                    <li>
                                        <a class="nav-link" href="{{ URL::to('/?theme_id=2') }}">Theme-2 (Addon)</a>
                                    </li>
                                    <li>
                                        <a class="nav-link" href="{{ URL::to('/?theme_id=3') }}">Theme-3 (Addon)</a>
                                    </li>
                                    <li>
                                        <a class="nav-link" href="{{ URL::to('/?theme_id=4') }}">Theme-4 (Addon)</a>
                                    </li>
                                    <li>
                                        <a class="nav-link" href="{{ URL::to('/?theme_id=5') }}">Theme-5 (Addon)</a>
                                    </li>
                                </ul>
                            </li>
                        @endif
                    </div>
                    <div class="d-none d-xl-block mx-auto">
                        <a href="mailto:{{ helper::appdata()->email }}" class="text-dark">
                            <div class="d-flex align-items-center gap-3">
                                <div class="inner-icon">
                                    <i class="fas fa-envelope fs-4 color-changer"></i>
                                </div>
                                <div class="inner-text">
                                    <span class="m-0 fs-7 color-changer">{{ trans('labels.email') }}</span>
                                    <p class="fs-8 fw-bold mb-0 color-changer">{{ helper::appdata()->email }}</p>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="d-flex align-items-center gap-2">
                        <!-- language-btn -->
                        @if (@helper::checkaddons('language'))
                            @if (helper::language()->count() > 1)
                                <div class="dropdown lag-btn">
                                    <a class="btn-lang border-0" type="button" id="dropdownMenuButton1"
                                        data-bs-toggle="dropdown" aria-expanded="false"><img
                                            src="{{ helper::image_path(Session::get('flag')) }}"
                                            class="img-fluid lag-img rounded-5" alt=""></a>
                                    <ul class="dropdown-menu bg-body-secondary border-0 mt-2 shadow p-0 {{ session()->get('direction') == '2' ? 'min-dropdown-rtl' : 'min-dropdown-ltr' }}"
                                        aria-labelledby="dropdownMenuButton1">
                                        @foreach (helper::language() as $lang)
                                            <li>
                                                <a class="dropdown-item text-dark align-items-center d-flex gap-2 p-2"
                                                    href="{{ URL::to('/language-' . $lang->code) }}">
                                                    <img src="{{ helper::image_path($lang->image) }}"
                                                        class="img-fluid lag-img rounded-5"
                                                        alt="">{{ $lang->name }}
                                                </a>
                                            </li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endif
                        @endif
                        <!-- cart-btn -->
                        <div class="cart-area d-block nav-sidebar-bg">
                            <a href="{{ route('cart') }}" class="text-primary">
                                <i class="fa-sharp fa-regular fa-basket-shopping"></i>
                                <span class="cart-badge">{{ helper::get_user_cart() }}</span>
                            </a>
                        </div>
                        <div class="dropdown lag-btn">
                            <a href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"
                                class="nav-sidebar-bg">
                                <i class="fa-regular fa-circle-half-stroke fs-6 text-primary"></i>
                            </a>
                            <ul class="dropdown-menu mt-2 bg-body-secondary shadow border-0 overflow-hidden p-0">
                                <li>
                                    <a class="dropdown-item d-flex cursor-pointer align-items-center p-2 gap-2"
                                        onclick="setLightMode()">
                                        <i class="fa-light fa-lightbulb fs-6"></i>
                                        <span>Light</span>
                                    </a>
                                </li>
                                <li>
                                    <a class="dropdown-item d-flex cursor-pointer align-items-center p-2 gap-2"
                                        onclick="setDarkMode()">
                                        <i class="fa-solid fa-moon fs-6"></i>
                                        <span>Dark</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                        @if (@helper::checkaddons('currency_settigns'))
                            @if (helper::available_currency('')->count() > 1)
                                <div class="dropdown lag-btn">
                                    <a class="nav-sidebar-bg" href="#" role="button"
                                        data-bs-toggle="dropdown" aria-expanded="false">
                                        <p class="fs-5 m-0 text-primary">{{ session()->get('currency') }}</p>
                                    </a>
                                    <ul
                                        class="dropdown-menu mt-2 bg-body-secondary shadow border-0 overflow-hidden p-0">
                                        @foreach (helper::available_currency() as $currencylist)
                                            <li>
                                                <a class="dropdown-item d-flex align-items-center gap-2 p-2 fs-13"
                                                    href="{{ URL::to('/currency/change?currency=' . $currencylist['code']) }}">
                                                    <span>
                                                        {{ $currencylist['currency'] . '  ' . $currencylist['name'] }}
                                                    </span>
                                                </a>
                                            </li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endif
                        @endif
                        <!-- user-btn -->
                        @if (@helper::checkaddons('customer_login'))
                            @if (@helper::appdata()->login_required == 1)
                                @if (Auth::user() && Auth::user()->type == 2)
                                    <div>
                                        <a class="nav-link px-3 nav-sidebar-bg" href="{{ route('user-profile') }}">
                                            <i class="fa-regular fa-user text-primary"></i>
                                        </a>
                                    </div>
                                @else
                                    <div>
                                        <a class="nav-link px-3 nav-sidebar-bg" href="{{ route('login') }}">
                                            <i class="fa-regular fa-user text-primary"></i>
                                        </a>
                                    </div>
                                @endif
                            @endif
                        @endif
                    </div>
                </div>
            </div>
        </nav>
    </div>

    <div class="mobile-menu-footer  d-lg-none">
        <ul class="d-flex align-items-center mobile-menu-active p-0 m-0">
            <li class="position-relative">
                <a class="{{ request()->is('/') ? 'active' : '' }}" href="{{ route('home') }}">
                    <i class="fa-light fa-house"></i>
                    <span class="tab-bar-text">{{ trans('labels.home') }}</span>
                </a>
            </li>
            <li class="position-relative">
                <a class="{{ request()->is('categories') ? 'active' : '' }}" href="{{ route('categories') }}"
                    type="button">
                    <i class="fa-light fa-box-archive"></i>
                    <span class="tab-bar-text">{{ trans('labels.categories') }}</span>
                </a>
            </li>
            <li class="position-relative">
                <a class="{{ request()->is('cart') ? 'active' : '' }}" href="{{ route('cart') }}">
                    <i class="fa-light fa-bag-shopping position-relative">
                        <span class="cart-count cart-mobile text-white p-0">{{ helper::get_user_cart() }}</span>
                    </i>
                    <span class="tab-bar-text">{{ trans('labels.cart') }}</span>
                </a>
            </li>

            <li class="position-relative">
                <a class="{{ request()->is('search') ? 'active' : '' }}" href="{{ route('search') }}">
                    <i class="fa-light fa-search"></i>
                    <span class="tab-bar-text">{{ trans('labels.search') }}</span>
                </a>
            </li>
            @if (@helper::checkaddons('customer_login'))
                @if (@helper::appdata()->login_required == 1)
                    <li class="position-relative">
                        @if (Auth::user() && Auth::user()->type == 2)
                            <a class="{{ request()->is('user-profile') ? 'active' : '' }}"
                                href="{{ route('user-profile') }}">
                                <i class="fa-light fa-user fs-6"></i>
                                <span class="tab-bar-text">{{ trans('labels.my_profile') }}</span>
                            </a>
                        @else
                            <a class="" href="{{ route('login') }}">
                                <i class="fa-light fa-user fs-6"></i>
                                <span class="tab-bar-text">{{ trans('labels.account') }}</span>
                            </a>
                        @endif
                    </li>
                @endif
            @endif
        </ul>
    </div>
</header>

<div class="offcanvas {{ session()->get('direction') == 2 ? 'offcanvas-end' : 'offcanvas-start' }}" tabindex="-1"
    id="footersiderbar" aria-labelledby="footersiderbar">
    <div class="offcanvas-header justify-content-between border-bottom">
        <img src="{{ helper::image_path(@helper::appdata()->logo) }}" class="object-fit-contain offcanvas-logo"
            alt="footer_logo">
        <button type="button" class="bg-transparent border-0 p-0 m-0" data-bs-dismiss="offcanvas"
            aria-label="Close">
            <i class="fa-regular fa-xmark color-changer fs-4"></i>
        </button>
    </div>
    <div class="offcanvas-body">
        <h5 class="text-dark color-changer text-capitalize border-bottom pb-3 m-0 fw-600">
            {{ trans('labels.other_pages') }}
        </h5>
        <ul class="list-group list-add list-group-flush border-bottom">
            <li class="list-group-item px-0 py-3 {{ session()->get('direction') == 2 ? 'pe-3' : 'ps-3' }}">
                <a class="fs-7 fw-500 d-flex gap-2 align-items-center" href="{{ route('ourteam') }}">
                    <i class="fa-solid fa-circle-dot fs-7"></i>
                    {{ trans('labels.our_team') }}
                </a>
            </li>
            <li class="list-group-item px-0 py-3 {{ session()->get('direction') == 2 ? 'pe-3' : 'ps-3' }}">
                <a class="fs-7 fw-500 d-flex gap-2 align-items-center" href="{{ route('faq') }}">
                    <i class="fa-solid fa-circle-dot fs-7"></i>
                    {{ trans('labels.faq') }}
                </a>
            </li>
            <li class="list-group-item px-0 py-3 {{ session()->get('direction') == 2 ? 'pe-3' : 'ps-3' }}">
                <a class="fs-7 fw-500 d-flex gap-2 align-items-center" href="{{ route('gallery') }}">
                    <i class="fa-solid fa-circle-dot fs-7"></i>
                    {{ trans('labels.gallery') }}
                </a>
            </li>
            <li class="list-group-item px-0 py-3 {{ session()->get('direction') == 2 ? 'pe-3' : 'ps-3' }}">
                <a class="fs-7 fw-500 d-flex gap-2 align-items-center" href="{{ route('contact-us') }}">
                    <i class="fa-solid fa-circle-dot fs-7"></i>
                    {{ trans('labels.help_contact_us') }}
                </a>
            </li>
            @if (@helper::checkaddons('blog'))
                <li class="list-group-item px-0 py-3 {{ session()->get('direction') == 2 ? 'pe-3' : 'ps-3' }}">
                    <a class="fs-7 fw-500 d-flex gap-2 align-items-center" href="{{ route('blogs') }}">
                        <i class="fa-solid fa-circle-dot fs-7"></i>
                        {{ trans('labels.blogs') }}
                    </a>
                </li>
            @endif
        </ul>
        <h5 class="text-dark color-changer text-capitalize border-bottom py-3 m-0 fw-600">
            {{ trans('labels.legal') }}
        </h5>
        <ul class="list-group list-add list-group-flush border-bottom">
            <li class="list-group-item px-0 py-3 {{ session()->get('direction') == 2 ? 'pe-3' : 'ps-3' }}">
                <a class="fs-7 fw-500 d-flex gap-2 align-items-center" href="{{ route('about-us') }}">
                    <i class="fa-solid fa-circle-dot fs-7"></i>
                    {{ trans('labels.about') }}
                </a>
            </li>
            <li class="list-group-item px-0 py-3 {{ session()->get('direction') == 2 ? 'pe-3' : 'ps-3' }}">
                <a class="fs-7 fw-500 d-flex gap-2 align-items-center" href="{{ route('privacy-policy') }}">
                    <i class="fa-solid fa-circle-dot fs-7"></i>
                    {{ trans('labels.privacy_policy') }}
                </a>
            </li>
            <li class="list-group-item px-0 py-3 {{ session()->get('direction') == 2 ? 'pe-3' : 'ps-3' }}">
                <a class="fs-7 fw-500 d-flex gap-2 align-items-center" href="{{ route('refund-policy') }}">
                    <i class="fa-solid fa-circle-dot fs-7"></i>
                    {{ trans('labels.refund_policy') }}
                </a>
            </li>
            <li class="list-group-item px-0 py-3 {{ session()->get('direction') == 2 ? 'pe-3' : 'ps-3' }}">
                <a class="fs-7 fw-500 d-flex gap-2 align-items-center" href="{{ route('terms-conditions') }}">
                    <i class="fa-solid fa-circle-dot fs-7"></i>
                    {{ trans('labels.terms_condition') }}
                </a>
            </li>
        </ul>
        @if (helper::getsociallinks()->count() > 0)
            <div class="social-media">
                <h5 class="text-dark color-changer text-capitalize pt-3 m-0 fw-600">{{ trans('labels.follow_us') }}
                </h5>
                <div class="d-flex gap-2 flex-wrap mt-3">
                    @foreach (@helper::getsociallinks() as $links)
                        <a class="btn-social px-2 mb-0" href="{{ $links->link }}" target="_blank">
                            {!! $links->icon !!}</a>
                    @endforeach
                </div>
            </div>
        @endif
        <!-- Social media icon -->
        <div class="subscribe-box">
            <h5 class="text-dark color-changer text-capitalize pt-3 m-0 fw-600">
                {{ trans('labels.newslatter') }}
            </h5>
            <p class="text-dark color-changer fs-7 my-3">{{ trans('labels.newslatter_subtitle') }}</p>
        </div>
        <form class="mt-4 footer-form" method="post" action="{{ URL::to('postsubscribe') }}">
            @csrf
            <div class="input-group gap-2">
                <input type="text" class="form-control rounded" name="email"
                    placeholder="{{ trans('labels.email') }}" required>
                <button class="btn btn-secondary rounded px-4 py-2"
                    type="submit">{{ trans('labels.subscribe') }}</button>

            </div>
        </form>
        <div class="mt-4"></div>
    </div>
    <div class="offcanvas-footer bg-dark border-top">
        <p class="m-0 fs-7 text-center text-light fw-500 px-2 py-2">
            {{ helper::appdata()->copyright }}
        </p>
    </div>
</div>