@if (Auth::check())
    @php
        $userMenu = Auth::user()->can('read', \App\Models\User::class);
        $galleryPermission = [
            'image' => Auth::user()->can('readImage', \App\Models\Gallery::class),
            'video' => Auth::user()->can('readVideo', \App\Models\Gallery::class),
        ];
        $careerMenu = [
            'careers' => Auth::user()->can('read', \App\Models\Career::class),
            'job_application' => Auth::user()->can('readapplication', \App\Models\JobApplication::class),
        ];
        $Blogs = [
            'blogmenu' => Auth::user()->can('read', \App\Models\Blog::class),
            'blogcategorymenu' => Auth::user()->can('read', \App\Models\Blogcategory::class),
        ];
        $seoSettingsMenu = [
            'google' => Auth::user()->can('google', \App\Models\Setting::class),
            'robots' => Auth::user()->can('robots', \App\Models\Setting::class),
            'sitemap' => Auth::user()->can('sitemap', \App\Models\Setting::class),
            'metaTags' => Auth::user()->can('metaTags', \App\Models\Setting::class),
        ];
        $testimonialMenu = Auth::user()->can('read', \App\Models\Testimonial::class);
        $enquiryMenu = Auth::user()->can('read', \App\Models\Contact::class);
        // dd($enquiryMenu);
        $settingsMenu = Auth::user()->can('read', \App\Models\Setting::class);
    @endphp

    <!-- ========== App Menu ========== -->
    <div class="app-menu navbar-menu">
        <!-- LOGO -->
        <div class="navbar-brand-box light-border-bottom">
            <!-- Dark Logo-->
            <a href="javascript:void(0)" class="logo logo-dark">

                <!-- Mobile Logo -->
                <span class="logo-sm">
                    <img src="{{ asset('backend/template/images/logo/sm-header-logo.svg') }}" alt=""
                        class="admin-logo-sm">
                </span>

                <!-- Desktop Logo -->
                {{-- <span class="logo-lg">
                    <img src="{{ asset('backend/template/images/logo/white-logo.png') }}" alt=""
                        class="admin-logo-lg">
                </span> --}}

            </a>
            <!-- Light Logo-->
            <a href="javascript:void(0)" class="logo logo-light">
                <span class="logo-sm">
                    <img src="{{ asset('backend/template/images/logo/sm-header-logo.svg') }}" alt=""
                        class="admin-logo">
                </span>
                <span class="logo-lg">
                    <img src="{{ asset('backend/template/images/logo/header-logo.svg') }}" alt=""
                        class="admin-logo">
                </span>
            </a>
            <button type="button" class="btn btn-sm p-0 fs-20 header-item float-end btn-vertical-sm-hover"
                id="vertical-hover">
                <i class="bx bx-radio-circle-marked"></i>
            </button>
        </div>

        <div id="scrollbar">
            <div class="container-fluid">
                <div id="two-column-menu">
                </div>
                <ul class="navbar-nav" id="navbar-nav">
                    <li class="nav-item mt-3">
                        <span class="ps-4 sub-heading">OVERVIEW</span>
                        <a class="nav-link menu-link mt-2 {{ request()->routeIs('backend.template.dashboard.index') ? 'active' : '' }}"
                            href="{{ route('backend.template.dashboard.index') }}">
                            <img class="pe-2"
                                src="{{ request()->routeIs('backend.template.dashboard.index')
                                    ? asset('backend/template/images/sidebar/dashboard-active.svg')
                                    : asset('backend/template/images/sidebar/dashboard.svg') }}"
                                alt="dashboard">
                            <span data-key="t-dashboards">Dashboard</span>
                        </a>
                    </li>

                    <div class="menu-border-line my-3"></div>

                    @php
                        // add route
                        $isProductManagementActive = request()->routeIs([
                            'backend.template.product-list*',
                            'backend.template.product.category*',
                            'backend.template.units-variants*',
                            'backend.template.product.kitchen-products*',
                        ]);
                    @endphp

                    <li class="nav-item">
                        <span class="ps-4 sub-heading">CATALOGUE</span>

                        <a class="nav-link menu-link mt-2 {{ $isProductManagementActive ? 'active' : 'collapsed' }}"
                            href="#ProductManagement" data-bs-toggle="collapse" role="button"
                            aria-expanded="{{ $isProductManagementActive ? 'true' : 'false' }}"
                            aria-controls="ProductManagement">

                            <img class="pe-2"
                                src="{{ $isProductManagementActive
                                    ? asset('backend/template/images/sidebar/product-active.svg')
                                    : asset('backend/template/images/sidebar/product.svg') }}"
                                alt="Product Management">

                            <span>Product Management</span>
                        </a>

                        <div class="collapse menu-dropdown {{ $isProductManagementActive ? 'show' : '' }}"
                            id="ProductManagement">

                            <ul class="nav nav-sm flex-column">
                                <li class="nav-item">
                                    <a href="{{ route('backend.template.product.category.manage-category') }}"
                                        class="nav-link {{ request()->routeIs('backend.template.product.category*') ? 'active' : '' }}">
                                        Category & Sections
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="{{ route('backend.template.product-list.index') }}"
                                        class="nav-link {{ request()->routeIs('backend.template.product-list*') ? 'active' : '' }}">
                                        Product List
                                    </a>
                                </li>

                                <li class="nav-item">
                                    <a href="{{ route('backend.template.product.kitchen-products.vital-kitchen-products') }}"
                                        class="nav-link {{ request()->routeIs('backend.template.product.kitchen-products*') ? 'active' : '' }}">
                                        Vital Kitchen Products
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="{{ route('backend.template.units-variants.index') }}"
                                        class="nav-link {{ request()->routeIs('backend.template.units-variants*') ? 'active' : '' }}">
                                        Units & Quantities
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    {{-- <li class="nav-item">
                        <span class="ps-4 sub-heading">CATALOGUE</span>
                        <a class="nav-link menu-link mt-2 {{ request()->routeIs(['backend.template.product-list.index', 'backend.template.product.category*', 'backend.template.units-variants.index', 'backend.template.product.kitchen-products*']) ? 'collapse' : '' }}"
                            href="#ProductManagement" data-bs-toggle="collapse" role="button" aria-expanded="false"
                            aria-controls="ProductManagement">
                            <img class="pe-2"
                                src="{{ request()->routeIs([
                                    'backend.template.product-list',
                                    'backend.template.product.category*',
                                    'backend.template.units-variants.index',
                                    'backend.template.product.kitchen-products*',
                                ])
                                    ? asset('backend/template/images/sidebar/product-active.svg')
                                    : asset('backend/template/images/sidebar/product.svg') }}"
                                alt="Product Management">
                            <span>Product Management</span>
                        </a>
                        <div class="collapse menu-dropdown" id="ProductManagement">
                            <ul class="nav nav-sm flex-column">
                                <li class="nav-item">
                                    <a href="{{ route('backend.template.product.category.manage-category') }}"
                                        class="nav-link {{ request()->routeIs('backend.template.product.category*') ? 'sub-active' : '' }}"
                                        data-key="Category">Category &
                                        Sections</a>
                                </li>

                                <li class="nav-item">
                                    <a href="{{ route('backend.template.product-list.index') }}"
                                        class="nav-link {{ request()->routeIs('backend.template.product-list.*') ? 'sub-active' : '' }}"
                                        data-key="Product">Product List</a>
                                </li>

                                <li class="nav-item">
                                    <a href="{{ route('backend.template.product.kitchen-products.vital-kitchen-products') }}"
                                        class="nav-link {{ request()->routeIs('backend.template.product.kitchen-products*') ? 'sub-active' : '' }}"
                                        data-key="Units">Vital Kitchen Products</a>
                                </li>

                                <li class="nav-item">
                                    <a href="{{ route('backend.template.units-variants.index') }}"
                                        class="nav-link {{ request()->routeIs('backend.template.units-variants*') ? 'sub-active' : '' }}"
                                        data-key="Units">Units & Quantities</a>
                                </li>
                            </ul>
                        </div>
                    </li> --}}

                    <li class="nav-item">
                        <a class="nav-link menu-link mt-1 {{ request()->routeIs('backend.template.manage-inventory*') ? 'active' : '' }}"
                            href="{{ route('backend.template.manage-inventory.index') }}">
                            <img class="pe-2"
                                src="{{ request()->routeIs('backend.template.manage-inventory*')
                                    ? asset('backend/template/images/sidebar/inventory-active.svg')
                                    : asset('backend/template/images/sidebar/inventory.svg') }}"
                                alt="Manage Inventory">
                            <span data-key="Manage Inventory">Manage Inventory</span>
                            <span class="badge badge-pill bg-white rounded-5 text-black">3</span>
                        </a>
                    </li>
                    <div class="menu-border-line my-3"></div>

                    <li class="nav-item">
                        <span class="ps-4 sub-heading">OPERATIONS</span>
                        <a class="nav-link menu-link mt-1 {{ request()->routeIs('backend.template.manage-orders.*') ? 'active' : '' }}"
                            href="{{ route('backend.template.manage-orders.index') }}">
                            <img class="pe-2"
                                src="{{ request()->routeIs('backend.template.manage-orders.*')
                                    ? asset('backend/template/images/sidebar/order-active.svg')
                                    : asset('backend/template/images/sidebar/order.svg') }}"
                                alt="Manage Orders">
                            <span data-key="Manage Orders">Manage Orders</span>
                            <span class="badge badge-pill bg-white rounded-5 text-black">3</span>
                        </a>
                    </li>

                    <li class="nav-item">
                        <a class="nav-link menu-link mt-1 {{ request()->routeIs('backend.template.delivery-team*') ? 'active' : '' }}"
                            href="{{ route('backend.template.delivery-team.index') }}">
                            <img class="pe-2"
                                src="{{ request()->routeIs('backend.template.delivery-team*')
                                    ? asset('backend/template/images/sidebar/delivery-team-active.svg')
                                    : asset('backend/template/images/sidebar/delivery-team.svg') }}"
                                alt="Delivery Team">
                            <span data-key="Delivery Team">Delivery Team</span>
                        </a>
                    </li>
                    <div class="menu-border-line my-3"></div>

                    {{-- <li class="nav-item">
                        <span class="ps-4 sub-heading">CONFIGURATIONS</span>
                        <a class="nav-link menu-link mt-2 collapsed 
                        {{ request()->routeIs(['javascript:void(0);', 'javascript:void(0);']) ? 'active' : '' }}"
                            href="#DeliverySetup" data-bs-toggle="collapse" role="button" aria-expanded="false"
                            aria-controls="DeliverySetup">
                            <img class="pe-2"
                                src="{{ request()->routeIs(['javscript:void(0);'])
                                    ? asset('backend/template/images/sidebar/delivery-setup-active.svg')
                                    : asset('backend/template/images/sidebar/delivery-setup.svg') }}"
                                alt="Delivery Setup">
                            <span>Delivery Setup</span>
                        </a>
                        <div class="collapse menu-dropdown" id="DeliverySetup">
                            <ul class="nav nav-sm flex-column">
                                <li class="nav-item">
                                    <a href="{{ route('backend.template.manage-zone.index') }}"
                                        class="nav-link {{ request()->routeIs('javascript:void(0)') ? 'sub-active' : '' }}"
                                        data-key="Manage
                                        Zones">Manage
                                        Zones</a>
                                </li>

                                <li class="nav-item">
                                    <a href="{{ route('backend.template.manage-feebands.index') }}"
                                        class="nav-link {{ request()->routeIs('javascript:void(0)') ? 'sub-active' : '' }}"
                                        data-key="Manage Fee
                                        Bands">Manage Fee
                                        Bands</a>
                                </li>

                            </ul>
                        </div>
                    </li> --}}
                    @php
                        $isDeliverySetupActive = request()->routeIs([
                            'backend.template.manage-zone*',
                            'backend.template.manage-feebands*',
                        ]);
                    @endphp

                    <li class="nav-item">

                        <span class="ps-4 sub-heading">CONFIGURATIONS</span>

                        <a class="nav-link menu-link mt-2
                            {{ $isDeliverySetupActive ? 'active' : 'collapsed' }}"
                            href="#DeliverySetup" data-bs-toggle="collapse" role="button"
                            aria-expanded="{{ $isDeliverySetupActive ? 'true' : 'false' }}"
                            aria-controls="DeliverySetup">

                            <img class="pe-2"
                                src="{{ $isDeliverySetupActive
                                    ? asset('backend/template/images/sidebar/delivery-setup-active.svg')
                                    : asset('backend/template/images/sidebar/delivery-setup.svg') }}"
                                alt="Delivery Setup">

                            <span>Delivery Setup</span>
                        </a>

                        <div class="collapse menu-dropdown
                            {{ $isDeliverySetupActive ? 'show' : '' }}"
                            id="DeliverySetup">

                            <ul class="nav nav-sm flex-column">

                                <li class="nav-item">
                                    <a href="{{ route('backend.template.manage-zone.index') }}"
                                        class="nav-link
                                        {{ request()->routeIs('backend.template.manage-zone*') ? 'active' : '' }}">

                                        Manage Zones
                                    </a>
                                </li>

                                <li class="nav-item">
                                    <a href="{{ route('backend.template.manage-feebands.index') }}"
                                        class="nav-link
                                        {{ request()->routeIs('backend.template.manage-feebands*') ? 'active' : '' }}">

                                        Manage Fee Bands
                                    </a>
                                </li>

                            </ul>

                        </div>

                    </li>


                    {{-- <li class="nav-item">
                        <a class="nav-link menu-link mt-2 collapsed {{ request()->routeIs(['backend.template.manage-users.category.user-directory', 'backend.template.manage-users.roles.roles-and-permissions']) ? 'active' : '' }}"
                            href="#ManageUsers" data-bs-toggle="collapse" role="button" aria-expanded="false"
                            aria-controls="ManageUsers">
                            <img class="pe-2"
                                src="{{ request()->routeIs([
                                    'backend.template.manage-users.category.user-directory',
                                    'backend.template.manage-users.roles.roles-and-permissions',
                                ])
                                    ? asset('backend/template/images/sidebar/manage-users-active.svg')
                                    : asset('backend/template/images/sidebar/manage-users.svg') }}"
                                alt="Manage Users">
                            <span>Manage Users</span>
                        </a>
                        <div class="collapse menu-dropdown" id="ManageUsers">
                            <ul class="nav nav-sm flex-column">
                                <li class="nav-item">
                                    <a href="{{ route('backend.template.manage-users.category.user-directory') }}"
                                        class="nav-link {{ request()->routeIs('backend.template.manage-users.category.user-directory') ? 'sub-active' : '' }}"
                                        data-key="User
                                        Directory">User
                                        Directory</a>
                                </li>

                                <li class="nav-item">
                                    <a href="{{ route('backend.template.manage-users.roles.roles-and-permissions') }}"
                                        class="nav-link {{ request()->routeIs('backend.template.manage-users.roles.roles-and-permissions') ? 'sub-active' : '' }}"
                                        data-key="Roles &
                                        Permissions">Roles &
                                        Permissions</a>
                                </li>

                            </ul>
                        </div>
                    </li> --}}
                    @php
                        $isManageUsersActive = request()->routeIs([
                            'backend.template.manage-users.category*',
                            'backend.template.manage-users.roles*',
                        ]);
                    @endphp

                    <li class="nav-item">

                        <a class="nav-link menu-link mt-2
                            {{ $isManageUsersActive ? 'active' : 'collapsed' }}"
                            href="#ManageUsers" data-bs-toggle="collapse" role="button"
                            aria-expanded="{{ $isManageUsersActive ? 'true' : 'false' }}"
                            aria-controls="ManageUsers">

                            <img class="pe-2"
                                src="{{ $isManageUsersActive
                                    ? asset('backend/template/images/sidebar/manage-users-active.svg')
                                    : asset('backend/template/images/sidebar/manage-users.svg') }}"
                                alt="Manage Users">

                            <span>Manage Users</span>
                        </a>

                        <div class="collapse menu-dropdown
                            {{ $isManageUsersActive ? 'show' : '' }}"
                            id="ManageUsers">

                            <ul class="nav nav-sm flex-column">

                                <li class="nav-item">
                                    <a href="{{ route('backend.template.manage-users.category.user-directory') }}"
                                        class="nav-link
                                        {{ request()->routeIs('backend.template.manage-users.category*') ? 'active' : '' }}">

                                        User Directory
                                    </a>
                                </li>

                                <li class="nav-item">
                                    <a href="{{ route('backend.template.manage-users.roles.roles-and-permissions') }}"
                                        class="nav-link
                                        {{ request()->routeIs('backend.template.manage-users.roles*') ? 'active' : '' }}">

                                        Roles & Permissions
                                    </a>
                                </li>

                            </ul>

                        </div>

                    </li>

                    <div class="menu-border-line my-3"></div>

                    {{-- <li class="nav-item">
                        <span class="ps-4 sub-heading">ANALYTICS</span>
                        <a class="nav-link menu-link mt-2 collapsed {{ request()->routeIs(['backend.template.reports.SalesReport', 'backend.template.reports.ProductReport', 'backend.template.reports.InventoryReport', 'backend.template.reports.CustomerReport', 'backend.template.reports.PaymentReport']) ? 'active' : '' }}"
                            href="#Reports" data-bs-toggle="collapse" role="button" aria-expanded="false"
                            aria-controls="Reports">
                            <img class="pe-2"
                                src="{{ request()->routeIs([
                                    'backend.template.reports.SalesReport',
                                    'backend.template.reports.ProductReport',
                                    'backend.template.reports.InventoryReport',
                                    'backend.template.reports.CustomerReport',
                                    'backend.template.reports.PaymentReport',
                                ])
                                    ? asset('backend/template/images/sidebar/reports-active.svg')
                                    : asset('backend/template/images/sidebar/reports.svg') }}"
                                alt="Reports">
                            <span>Reports</span>
                        </a>
                        <div class="collapse menu-dropdown" id="Reports">
                            <ul class="nav nav-sm flex-column">
                                <li class="nav-item">
                                    <a href="{{ route('backend.template.reports.SalesReport') }}"
                                        class="nav-link {{ request()->routeIs('backend.template.reports.SalesReport') ? 'sub-active' : '' }}"
                                        data-key="Sales Report">Sales
                                        Report</a>
                                </li>

                                <li class="nav-item">
                                    <a href="{{ route('backend.template.reports.ProductReport') }}"
                                        class="nav-link {{ request()->routeIs('backend.template.reports.ProductReport') ? 'sub-active' : '' }}"
                                        data-key="Product Report">Product
                                        Report</a>
                                </li>

                                <li class="nav-item">
                                    <a href="{{ route('backend.template.reports.InventoryReport') }}"
                                        class="nav-link {{ request()->routeIs('backend.template.reports.InventoryReport') ? 'sub-active' : '' }}"
                                        data-key="Inventory Report">Inventory Report</a>
                                </li>
                                <li class="nav-item">
                                    <a href="{{ route('backend.template.reports.CustomerReport') }}"
                                        class="nav-link {{ request()->routeIs('backend.template.reports.CustomerReport') ? 'sub-active' : '' }}"
                                        data-key="Customer Report">Customer Report</a>
                                </li>

                                <li class="nav-item">
                                    <a href="{{ route('backend.template.reports.PaymentReport') }}"
                                        class="nav-link {{ request()->routeIs('backend.template.reports.PaymentReport') ? 'sub-active' : '' }}"
                                        data-key="Payment Report">Payment Report</a>
                                </li>

                            </ul>
                        </div>
                    </li> --}}
                    @php
                        $isReportsActive = request()->routeIs(['backend.template.reports.*']);
                    @endphp

                    <li class="nav-item">

                        <span class="ps-4 sub-heading">ANALYTICS</span>

                        <a class="nav-link menu-link mt-2
                            {{ $isReportsActive ? 'active' : 'collapsed' }}"
                            href="#Reports" data-bs-toggle="collapse" role="button"
                            aria-expanded="{{ $isReportsActive ? 'true' : 'false' }}" aria-controls="Reports">

                            <img class="pe-2"
                                src="{{ $isReportsActive
                                    ? asset('backend/template/images/sidebar/reports-active.svg')
                                    : asset('backend/template/images/sidebar/reports.svg') }}"
                                alt="Reports">

                            <span>Reports</span>
                        </a>

                        <div class="collapse menu-dropdown
                            {{ $isReportsActive ? 'show' : '' }}"
                            id="Reports">

                            <ul class="nav nav-sm flex-column">

                                <li class="nav-item">
                                    <a href="{{ route('backend.template.reports.SalesReport') }}"
                                        class="nav-link
                                        {{ request()->routeIs('backend.template.reports.SalesReport') ? 'active' : '' }}">

                                        Sales Report
                                    </a>
                                </li>

                                <li class="nav-item">
                                    <a href="{{ route('backend.template.reports.ProductReport') }}"
                                        class="nav-link
                                        {{ request()->routeIs('backend.template.reports.ProductReport') ? 'active' : '' }}">

                                        Product Report
                                    </a>
                                </li>

                                <li class="nav-item">
                                    <a href="{{ route('backend.template.reports.InventoryReport') }}"
                                        class="nav-link
                                        {{ request()->routeIs('backend.template.reports.InventoryReport') ? 'active' : '' }}">

                                        Inventory Report
                                    </a>
                                </li>

                                <li class="nav-item">
                                    <a href="{{ route('backend.template.reports.CustomerReport') }}"
                                        class="nav-link
                                        {{ request()->routeIs('backend.template.reports.CustomerReport') ? 'active' : '' }}">

                                        Customer Report
                                    </a>
                                </li>

                                <li class="nav-item">
                                    <a href="{{ route('backend.template.reports.PaymentReport') }}"
                                        class="nav-link
                                        {{ request()->routeIs('backend.template.reports.PaymentReport') ? 'active' : '' }}">

                                        Payment Report
                                    </a>
                                </li>

                            </ul>

                        </div>

                    </li>

                    <div class="menu-border-line my-3"></div>
                    {{-- ----------- Manage Content --------- --}}
                    <li class="nav-item">
                        <span class="ps-4 sub-heading">ENGAGEMENT</span>

                        <a class="nav-link menu-link mt-2 collapsed
        {{ request()->routeIs(['backend.template.manage-content.*', 'backend.template.legal-policy.*']) ? 'active' : '' }}"
                            href="#manageContent" data-bs-toggle="collapse" role="button" aria-expanded="false"
                            aria-controls="manageContent">

                            <img class="pe-2"
                                src="{{ asset('backend/template/images/sidebar/delivery-setup.svg') }}"
                                alt="Manage Content">

                            <span>Manage Content</span>
                        </a>

                        <div class="collapse menu-dropdown
        {{ request()->routeIs(['backend.template.manage-content.*', 'backend.template.legal-policy.*']) ? 'show' : '' }}"
                            id="manageContent">

                            <ul class="nav nav-sm flex-column">

                                <li class="nav-item">
                                    <a href="{{ route('backend.template.manage-content.index') }}"
                                        class="nav-link {{ request()->routeIs('backend.template.manage-content.*') ? 'sub-active' : '' }}">
                                        Banners
                                    </a>
                                </li>

                                <li class="nav-item">
                                    <a href="{{ route('backend.template.legal-policy.index') }}"
                                        class="nav-link {{ request()->routeIs('backend.template.legal-policy.*') ? 'sub-active' : '' }}">
                                        Legal Policies
                                    </a>
                                </li>

                            </ul>

                        </div>
                    </li>

                    {{-- ----------- Manage Notifications --------- --}}
                    <li class="nav-item">
                        <a class="nav-link menu-link mt-1
        {{ request()->routeIs('backend.template.notification.TemplateList*') ? 'active' : '' }}"
                            href="{{ route('backend.template.notification.TemplateList') }}">

                            <img class="pe-2"
                                src="{{ request()->routeIs('backend.template.notification.TemplateList*')
                                    ? asset('backend/template/images/sidebar/fill.svg')
                                    : asset('backend/template/images/sidebar/stroke.svg') }}"
                                alt="Manage Notifications">

                            <span>Manage Notifications</span>
                        </a>
                    </li>

                    {{-- ----------- Manage Subscription --------- --}}
                    <li class="nav-item">

                        <a class="nav-link menu-link mt-1 collapsed
        {{ request()->routeIs(['backend.template.subscription.*', 'backend.template.subscription-plans.*']) ? 'active' : '' }}"
                            href="#manageSubscription" data-bs-toggle="collapse" role="button"
                            aria-expanded="false" aria-controls="manageSubscription">

                            <img class="pe-2"
                                src="{{ asset('backend/template/images/sidebar/delivery-team.svg') }}"
                                alt="Manage Subscription">

                            <span>Manage Subscription</span>
                        </a>

                        <div class="collapse menu-dropdown
        {{ request()->routeIs(['backend.template.subscription.*', 'backend.template.subscriber.*']) ? 'show' : '' }}"
                            id="manageSubscription">

                            <ul class="nav nav-sm flex-column">

                                <li class="nav-item">
                                    <a href="{{ route('backend.template.subscription.index') }}"
                                        class="nav-link {{ request()->routeIs('backend.template.subscription.*') ? 'sub-active' : '' }}">
                                        Subscription
                                    </a>
                                </li>

                                <li class="nav-item">
                                    <a href="{{ route('backend.template.subscriber.index') }}"
                                        class="nav-link {{ request()->routeIs('backend.template.subscriber.*') ? 'sub-active' : '' }}">
                                        Subscriber
                                    </a>
                                </li>

                            </ul>
                        </div>

                    </li>
                    <div class="menu-border-line my-3"></div>

                    {{-- <li class="nav-item">
                        <span class="ps-4 sub-heading">SYSTEM</span>
                        <a class="nav-link menu-link mt-2 collapsed {{ request()->routeIs(['backend.template.admin-settings*']) ? 'active' : '' }}"
                            href="#Settings" data-bs-toggle="collapse" role="button" aria-expanded="false"
                            aria-controls="Settings">
                            <img class="pe-2"
                                src="{{ request()->routeIs(['backend.template.admin-settings*'])
                                    ? asset('backend/template/images/sidebar/reports-active.svg')
                                    : asset('backend/template/images/sidebar/reports.svg') }}"
                                alt="Settings">
                            <span>Settings</span>
                        </a>
                        <div class="collapse menu-dropdown" id="Settings">
                            <ul class="nav nav-sm flex-column">
                                <li class="nav-item">
                                    <a href="{{ route('backend.template.admin-settings.general-settings') }}"
                                        class="nav-link {{ request()->routeIs('backend.template.admin-settings.general-settings') ? 'sub-active' : '' }}"
                                        data-key="General Settings">General Settings</a>
                                </li>

                                <li class="nav-item">
                                    <a href="{{ route('backend.template.admin-settings.app-web-settings') }}"
                                        class="nav-link {{ request()->routeIs('backend.template.admin-settings.app-web-settings') ? 'sub-active' : '' }}"
                                        data-key="App & Web Settings">App & Web Settings</a>
                                </li>

                                <li class="nav-item">
                                    <a href="{{ route('backend.template.admin-settings.invoice-settings') }}"
                                        class="nav-link {{ request()->routeIs('backend.template.admin-settings.invoice-settings') ? 'sub-active' : '' }}"
                                        data-key="Invoice Settings">Invoice Settings</a>
                                </li>
                                <li class="nav-item">
                                    <a href="{{ route('backend.template.admin-settings.seo-settings') }}"
                                        class="nav-link {{ request()->routeIs('backend.template.admin-settings.seo-settings') ? 'sub-active' : '' }}"
                                        data-key="Seo Settings">Seo Settings</a>
                                </li>

                                <li class="nav-item">
                                    <a href="{{ route('backend.template.admin-settings.email-sms-settings') }}"
                                        class="nav-link {{ request()->routeIs('backend.template.admin-settings.email-sms-settings') ? 'sub-active' : '' }}"
                                        data-key="Email & SMS Settings">Email & SMS Settings</a>
                                </li>
                                <li class="nav-item">
                                    <a href="{{ route('backend.template.admin-settings.payment-settings') }}"
                                        class="nav-link {{ request()->routeIs('backend.template.admin-settings.payment-settings') ? 'sub-active' : '' }}"
                                        data-key="Payment Settings">Payment Settings</a>
                                </li>
                                <li class="nav-item">
                                    <a href="{{ route('backend.template.admin-settings.google-recaptcha-settings') }}"
                                        class="nav-link {{ request()->routeIs('backend.template.admin-settings.google-recaptcha-settings') ? 'sub-active' : '' }}"
                                        data-key="Google Re-Captcha Settings">Google Re-Captcha Settings</a>
                                </li>
                            </ul>
                        </div>
                    </li> --}}
                    @php
                        $isSettingsActive = request()->routeIs(['backend.template.admin-settings.*']);
                    @endphp

                    <li class="nav-item">

                        <span class="ps-4 sub-heading">SYSTEM</span>

                        <a class="nav-link menu-link mt-2
                            {{ $isSettingsActive ? 'active' : 'collapsed' }}"
                            href="#Settings" data-bs-toggle="collapse" role="button"
                            aria-expanded="{{ $isSettingsActive ? 'true' : 'false' }}" aria-controls="Settings">

                            <img class="pe-2"
                                src="{{ $isSettingsActive
                                    ? asset('backend/template/images/sidebar/reports-active.svg')
                                    : asset('backend/template/images/sidebar/reports.svg') }}"
                                alt="Settings">

                            <span>Settings</span>
                        </a>

                        <div class="collapse menu-dropdown
                            {{ $isSettingsActive ? 'show' : '' }}"
                            id="Settings">

                            <ul class="nav nav-sm flex-column">

                                <li class="nav-item">
                                    <a href="{{ route('backend.template.admin-settings.general-settings') }}"
                                        class="nav-link
                                        {{ request()->routeIs('backend.template.admin-settings.general-settings') ? 'active' : '' }}">

                                        General Settings
                                    </a>
                                </li>

                                <li class="nav-item">
                                    <a href="{{ route('backend.template.admin-settings.app-web-settings') }}"
                                        class="nav-link
                                        {{ request()->routeIs('backend.template.admin-settings.app-web-settings') ? 'active' : '' }}">

                                        App & Web Settings
                                    </a>
                                </li>

                                <li class="nav-item">
                                    <a href="{{ route('backend.template.admin-settings.invoice-settings') }}"
                                        class="nav-link
                                        {{ request()->routeIs('backend.template.admin-settings.invoice-settings') ? 'active' : '' }}">

                                        Invoice Settings
                                    </a>
                                </li>

                                <li class="nav-item">
                                    <a href="{{ route('backend.template.admin-settings.seo-settings') }}"
                                        class="nav-link
                                        {{ request()->routeIs('backend.template.admin-settings.seo-settings') ? 'active' : '' }}">

                                        Seo Settings
                                    </a>
                                </li>

                                <li class="nav-item">
                                    <a href="{{ route('backend.template.admin-settings.email-sms-settings') }}"
                                        class="nav-link
                                        {{ request()->routeIs('backend.template.admin-settings.email-sms-settings') ? 'active' : '' }}">

                                        Email & SMS Settings
                                    </a>
                                </li>

                                <li class="nav-item">
                                    <a href="{{ route('backend.template.admin-settings.payment-settings') }}"
                                        class="nav-link
                                        {{ request()->routeIs('backend.template.admin-settings.payment-settings') ? 'active' : '' }}">

                                        Payment Settings
                                    </a>
                                </li>

                                <li class="nav-item">
                                    <a href="{{ route('backend.template.admin-settings.google-recaptcha-settings') }}"
                                        class="nav-link
                                        {{ request()->routeIs('backend.template.admin-settings.google-recaptcha-settings') ? 'active' : '' }}">

                                        Google Re-Captcha Settings
                                    </a>
                                </li>

                            </ul>

                        </div>

                    </li>


                    {{-- @if (in_array(true, $seoadmin - settingsMenu))
                        <li class="nav-item">
                            <a class="nav-link menu-link collapsed {{ request()->routeIs([
                                'backend.template.metatags.index',
                                'backend.template.admin-settings.index',
                                'backend.template.admin-settings.index',
                            ])
                                ? 'active'
                                : '' }}"
                                href="#sidebarseoSettingsMenu" data-bs-toggle="collapse" role="button"
                                aria-expanded="false" aria-controls="sidebarseoSettingsMenu">
                                <i class="bx bx-search-alt-2"></i> <span>SEO Settings</span>
                            </a>
                            <div class="collapse menu-dropdown" id="sidebarseoSettingsMenu">
                                <ul class="nav nav-sm flex-column">
                                    @if ($seoSettingsMenu['metaTags'])
                                        <li class="nav-item">
                                            <a href="{{ route('backend.template.metatags.index') }}"
                                                class="nav-link {{ request()->routeIs('javascript:void(0)') ? 'sub-active' : '' }}"
                                                data-key="t-meta-tags">Meta Tags</a>
                                        </li>
                                    @endif
                                    @if ($seoSettingsMenu['google'])
                                        <li class="nav-item">
                                            <a href="{{ route('backend.template.settings.index', 'google') }}"
                                                class="nav-link {{ request()->routeIs('javascript:void(0)') ? 'sub-active' : '' }}"
                                                data-key="t-google-settings">Google Settings</a>
                                        </li>
                                    @endif

                                    @if ($seoSettingsMenu['robots'])
                                        <li class="nav-item">
                                            <a href="{{ route('backend.template.settings.index', 'robots') }}"
                                                class="nav-link {{ request()->routeIs('javascript:void(0)') ? 'sub-active' : '' }}"
                                                data-key="t-robots-file">Robots File</a>
                                        </li>
                                    @endif

                                    @if ($seoSettingsMenu['sitemap'])
                                        <li class="nav-item">
                                            <a href="{{ route('backend.template.settings.index', 'sitemap') }}"
                                                class="nav-link {{ request()->routeIs('javascript:void(0)') ? 'sub-active' : '' }}"
                                                data-key="t-site-map">Site Map</a>
                                        </li>
                                    @endif
                                </ul>
                            </div>
                        </li>
                    @endif

                    @if ($settingsMenu)
                        <li class="nav-item">
                            <a class="nav-link menu-link"
                                href="{{ route('backend.template.settings.index', 'general') }}">
                                <i class="bx bx-cog"></i> <span data-key="t-settings">Settings</span>
                            </a>
                        </li>
                    @endif --}}


                </ul>
            </div>
            <!-- Sidebar -->
        </div>
        <div class="sidebar-background"></div>
    </div>
    <!-- Left Sidebar End -->

    <!-- Vertical Overlay-->
    <div class="vertical-overlay"></div>
@endif
<script>
    document.addEventListener("click", function(e) {

        const sidebar = document.querySelector(".app-menu");
        const toggleBtn = document.querySelector(".vertical-menu-btn");
        const body = document.body;

        if (
            body.classList.contains("vertical-sidebar-enable") &&
            !sidebar.contains(e.target) &&
            !e.target.closest(".vertical-menu-btn")
        ) {

            body.classList.remove("vertical-sidebar-enable");

        }

    });
</script>