@php
    $access = false;
@endphp

<div
        class="side-menu rtl:xl:mr-0 ltr:xl:ml-0 shadow-xl transition-[margin,padding] duration-300 xl:shadow-none fixed top-0 rtl:right-0 ltr:left-0 z-50 group inset-y-0 xl:py-3.5 rtl:xl:pr-3.5 ltr:xl:pl-3.5 after:content-[''] after:fixed after:inset-0 after:bg-black/80 after:xl:hidden side-menu--collapsed rtl:[&.side-menu--mobile-menu-open]:mr-0 ltr:[&.side-menu--mobile-menu-open]:ml-0 [&.side-menu--mobile-menu-open]:after:block rtl:-mr-[275px] ltr:-ml-[275px] after:hidden">
    <div
            class="close-mobile-menu fixed rtl:mr-[275px] ltr:ml-[275px] w-10 h-10 items-center justify-center xl:hidden z-50 [&.close-mobile-menu--mobile-menu-open]:flex hidden">
        <a class="mt-5 rtl:mr-5 ltr:ml-5" href="echo-dashboard-overview-1.html">
            <i data-tw-merge="" data-lucide="x" class="stroke-[1] w-8 h-8 text-white"></i>
        </a>
    </div>
    <div
            class="side-menu__content h-full box bg-white/[0.95] rounded-none xl:rounded-xl z-20 relative w-[275px] duration-300 transition-[width] group-[.side-menu--collapsed]:xl:w-[91px] group-[.side-menu--collapsed.side-menu--on-hover]:xl:shadow-[6px_0_12px_-4px_#0000000f] group-[.side-menu--collapsed.side-menu--on-hover]:xl:w-[275px] overflow-hidden flex flex-col">
        <div
                class="flex-none hidden xl:flex items-center z-10 px-5 h-[65px] w-[275px] overflow-hidden relative duration-300 group-[.side-menu--collapsed]:xl:w-[91px] group-[.side-menu--collapsed.side-menu--on-hover]:xl:w-[275px]">
            <a class="flex items-center transition-[margin] duration-300 rtl:group-[.side-menu--collapsed.side-menu--on-hover]:xl:mr-0 ltr:group-[.side-menu--collapsed.side-menu--on-hover]:xl:ml-0 rtl:group-[.side-menu--collapsed]:xl:mr-2 ltr:group-[.side-menu--collapsed]:xl:ml-2"
               href="{{ route('panel') }}">
                <div
                        class="flex h-[34px] w-[34px] items-center justify-center rounded-lg bg-gradient-to-b from-theme-1 to-theme-2/80 transition-transform ease-in-out">
                    <img src="{{ asset('dist/images/logo/logo.png') }}">
                </div>

                <div
                        class="rtl:mr-3.5 ltr:ml-3.5 font-medium transition-opacity group-[.side-menu--collapsed.side-menu--on-hover]:xl:opacity-100 group-[.side-menu--collapsed]:xl:opacity-0">
                کامبک
                </div>
            </a>
            <a class="toggle-compact-menu rtl:mr-auto ltr:ml-auto hidden h-[20px] w-[20px] items-center justify-center rounded-full border border-slate-600/40 transition-[opacity,transform] hover:bg-slate-600/5 group-[.side-menu--collapsed]:xl:rotate-180 group-[.side-menu--collapsed.side-menu--on-hover]:xl:opacity-100 group-[.side-menu--collapsed]:xl:opacity-0 3xl:flex"
               href="{{ route('panel') }}">
                <i data-tw-merge="" data-lucide="arrow-left" class="h-3.5 w-3.5 stroke-[1.3] rtl:rotate-180"></i>
            </a>
        </div>
        <div
                class="scrollable-ref w-full h-full z-20 px-5 overflow-y-auto overflow-x-hidden pb-3 [-webkit-mask-image:-webkit-linear-gradient(top,rgba(0,0,0,0),black_30px)] [&:-webkit-scrollbar]:w-0 [&:-webkit-scrollbar]:bg-transparent [&_.simplebar-content]:p-0 [&_.simplebar-track.simplebar-vertical]:w-[10px] [&_.simplebar-track.simplebar-vertical]:mr-0.5 [&_.simplebar-track.simplebar-vertical_.simplebar-scrollbar]:before:bg-slate-400/30">
            <ul class="scrollable">
                <li class="side-menu__divider">
                    ابزار های کامبگ
                </li>
                @can('admin')
                    <li>
                        <a href="{{ route('panel') }}"
                           class="side-menu__link {{ activeSideRoute(['panel']) ? 'side-menu__link--active' : '' }}">
                            <i data-tw-merge="" data-lucide="gauge-circle"
                               class="stroke-[1] w-5 h-5 side-menu__link__icon"></i>
                            <div class="side-menu__link__title">داشبورد</div>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;" class="side-menu__link ">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                 fill="none"
                                 stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                 stroke-linejoin="round"
                                 data-lucide="user-square"
                                 class="lucide lucide-user-square stroke-[1] w-5 h-5 side-menu__link__icon">
                                <rect width="18" height="18" x="3" y="3" rx="2"></rect>
                                <circle cx="12" cy="10" r="3"></circle>
                                <path d="M7 21v-2a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v2"></path>
                            </svg>
                            <div class="side-menu__link__title">مدیریت کاربران</div>
                            <i data-tw-merge="" data-lucide="chevron-down"
                               class="stroke-[1] w-5 h-5 side-menu__link__chevron"></i>
                        </a>
                        <ul class="hidden">
                            @foreach(\App\Models\User::ROLE as $key => $item)
                                <li>
                                    <a href="{{ route('user.list', $key) }}"
                                       class="side-menu__link {{ activeParamRoute(['user-list/user', 'users/create', 'users/{user}/edit'], 'user-list') ? 'active' : '' }}">
                                        <i data-tw-merge="" data-lucide="layout-panel-top"
                                           class="stroke-[1] w-5 h-5 side-menu__link__icon"></i>
                                        <div class="side-menu__link__title">
                                            {{ $item }}
                                        </div>
                                    </a>
                                </li>
                            @endforeach
                            <li>
                                <a href="{{ route('users.list') }}"
                                   class="side-menu__link {{ activeSideRoute(['users-list', 'users-list-search']) ? 'active' : '' }}">
                                    <i data-tw-merge="" data-lucide="layout-panel-top"
                                       class="stroke-[1] w-5 h-5 side-menu__link__icon"></i>
                                    <div class="side-menu__link__title">
                                        کاربران دارای برنامه
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="{{ route('plans.index') }}"
                           class="side-menu__link {{ activeSideRoute(['plans', 'plans/search']) ? 'side-menu__link--active' : '' }}">
                            <i data-tw-merge="" data-lucide="square-chart-gantt"
                               class="stroke-[1] w-5 h-5 side-menu__link__icon"></i>
                            <div class="side-menu__link__title">برنامه</div>
                        </a>
                    </li>
                    <li>
                        <a href="{{ route('booklets.index') }}"
                           class="disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none side-menu__link {{ activeSideRoute(['booklets']) ? 'side-menu__link--active' : '' }}">
                            <i data-tw-merge="" data-lucide="book-open-text"
                               class="stroke-[1] w-5 h-5 side-menu__link__icon"></i>
                            <div class="side-menu__link__title">جزوات</div>
                        </a>
                    </li>
                    <li>
                        <a href="{{ route('powerbanks.list') }}"
                           class="disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none side-menu__link {{ activeSideRoute(['powerbanks-list']) ? 'side-menu__link--active' : '' }}">
                            <i data-tw-merge="" data-lucide="book-open-check"
                               class="stroke-[1] w-5 h-5 side-menu__link__icon"></i>
                            <div class="side-menu__link__title">بانک سوالات</div>
                        </a>
                    </li>
                    <li>
                        <a href="{{ route('wallpapers.index') }}"
                           class="disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none side-menu__link {{ activeSideRoute(['wallpapers']) ? 'side-menu__link--active' : '' }}">
                            <i data-tw-merge="" data-lucide="book-open"
                               class="stroke-[1] w-5 h-5 side-menu__link__icon"></i>
                            <div class="side-menu__link__title">روزنامه دیواری</div>
                        </a>
                    </li>
                @endcan
                @can('user')
                    @php
                        $hasPlan = $authUser->currentWeekPlan();
                    @endphp
                    <li>
                        <a href="{{ $hasPlan ? route('plans.show', $hasPlan) : '' }}"
                           {{ !$authUser->isSignup() || !$hasPlan ? 'disabled' : '' }}
                           class="disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none side-menu__link {{ activeSideRoute(['plans', 'plans/search']) ? 'side-menu__link--active' : '' }}">
                            <i data-tw-merge="" data-lucide="square-chart-gantt"
                               class="stroke-[1] w-5 h-5 side-menu__link__icon"></i>
                            <div class="side-menu__link__title">برنامه</div>
                            @if(!$authUser->isSignup() || !$hasPlan)
                                <i data-tw-merge="" data-lucide="lock"
                                   class="stroke-[1] w-5 h-5 side-menu__link__icon mr-auto"></i>
                            @endif
                        </a>
                    </li>
                    <li>
                        <a href="{{ $hasPlan ? route('booklets.index') : '' }}"
                           {{ !$authUser->isSignup() || !$hasPlan ? 'disabled' : '' }}
                           class="disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none side-menu__link {{ activeSideRoute(['booklets']) ? 'side-menu__link--active' : '' }}">
                            <i data-tw-merge="" data-lucide="book-open-text"
                               class="stroke-[1] w-5 h-5 side-menu__link__icon"></i>
                            <div class="side-menu__link__title">جزوات</div>
                            @if(!$authUser->isSignup() || !$hasPlan)
                                <i data-tw-merge="" data-lucide="lock"
                                   class="stroke-[1] w-5 h-5 side-menu__link__icon mr-auto"></i>
                            @endif
                        </a>
                    </li>
                    <li>
                        <a href="{{ $hasPlan ? route('powerbanks.list') : '' }}"
                           {{ !$authUser->isSignup() || !$hasPlan ? 'disabled' : '' }}
                           class="disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none side-menu__link {{ activeSideRoute(['booklets']) ? 'side-menu__link--active' : '' }}">
                            <i data-tw-merge="" data-lucide="book-open-check"
                               class="stroke-[1] w-5 h-5 side-menu__link__icon"></i>
                            <div class="side-menu__link__title">بانک سوالات</div>
                            @if(!$authUser->isSignup() || !$hasPlan)
                                <i data-tw-merge="" data-lucide="lock"
                                   class="stroke-[1] w-5 h-5 side-menu__link__icon mr-auto"></i>
                            @endif
                        </a>
                    </li>
                    <li>
                        <a href="{{ $hasPlan ? route('wallpapers.index') : '' }}"
                           {{ !$authUser->isSignup() || !$hasPlan ? 'disabled' : '' }}
                           class="disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none side-menu__link {{ activeSideRoute(['booklets']) ? 'side-menu__link--active' : '' }}">
                            <i data-tw-merge="" data-lucide="book-open"
                               class="stroke-[1] w-5 h-5 side-menu__link__icon"></i>
                            <div class="side-menu__link__title">روزنامه دیواری</div>
                            @if(!$authUser->isSignup() || !$hasPlan)
                                <i data-tw-merge="" data-lucide="lock"
                                   class="stroke-[1] w-5 h-5 side-menu__link__icon mr-auto"></i>
                            @endif
                        </a>
                    </li>
                @endcan
            </ul>
        </div>
    </div>
    @includeWhen(empty($header),'panel.layouts.header')
</div>