{{--
<nav class="w-[20%] h-[100vh] py-6 px-6 bg-slate-100 fixed right-0 top-0 mt-[4rem] lg:block hidden">

    <div class="w-full">
        <div class="w-full">

            @if(!(\Illuminate\Support\Facades\Auth::user()->is_profile_complete))
                <button class="btn btn-outline-warning text-center">
                    <a href="{{ route('user.favorites') }}" class="block w-full text-center">
                        تکمیل پروفایل کاربری
                    </a>
                </button>
            @endif

        </div>
    </div>

    <ul class="flex flex-col gap-2">
        <li class="px-3 py-2 font-medium transition-colors duration-150 rounded-md text-md {{ request()->routeIs('user.favorites') ? 'bg-slate-300' : 'bg-slate-200 hover:bg-slate-300' }}">
            <a href="{{ route('user.favorites') }}" class="block w-full">
                نشان شده‌ها
            </a>
        </li>
        <li class="px-3 py-2 font-medium transition-colors duration-150 rounded-md text-md {{ request()->routeIs('user.rates') ? 'bg-slate-300' : 'bg-slate-200 hover:bg-slate-300' }}">
            <a href="{{ route('user.rates') }}" class="block w-full">
                امتیاز داده شده‌ها
            </a>
        </li>
        <li class="px-3 py-2 font-medium transition-colors duration-150 rounded-md text-md {{ request()->routeIs('user.profile') ? 'bg-slate-300' : 'bg-slate-200 hover:bg-slate-300' }}">
            <a href="{{ route('user.profile') }}" class="block w-full">
                تنظیمات
            </a>
        </li>
    </ul>
</nav>

<nav x-cloak x-show="sidebarOpen"
    class="w-full bg-[#00000063] fixed z-50 right-0 top-0  mt-[4rem] h-[100vh]"
    x-transition:enter="transition ease-out duration-300"
    x-transition:enter-start="opacity-0"
    x-transition:enter-end="opacity-100"
    x-transition:leave="transition ease-in duration-200"
    x-transition:leave-start="opacity-100"
    x-transition:leave-end="opacity-0"

>
    <div class="w-[60%] h-[100vh] py-6 px-6 bg-slate-100 fixed z-50 right-0 top-0 mt-[4rem] block lg:hidden">
        <ul class="flex flex-col gap-2" @click.outside="sidebarOpen = false">
            <li class="px-3 py-2 font-medium transition-colors duration-150 rounded-md text-md {{ request()->routeIs('user.favorites') ? 'bg-slate-300' : 'bg-slate-200 hover:bg-slate-300' }}">
                <a href="{{ route('user.favorites') }}" class="block w-full">
                    نشان شده‌ها
                </a>
            </li>
            <li class="px-3 py-2 font-medium transition-colors duration-150 rounded-md text-md {{ request()->routeIs('user.rates') ? 'bg-slate-300' : 'bg-slate-200 hover:bg-slate-300' }}">
                <a href="{{ route('user.rates') }}" class="block w-full">
                    امتیاز داده شده‌ها
                </a>
            </li>
            <li class="px-3 py-2 font-medium transition-colors duration-150 rounded-md text-md {{ request()->routeIs('user.profile') ? 'bg-slate-300' : 'bg-slate-200 hover:bg-slate-300' }}">
                <a href="{{ route('user.profile') }}" class="block w-full">
                    تنظیمات
                </a>
            </li>
        </ul>
    </div>
</nav>
--}}

<!-- Filter Sidebar -->
<div class="w-[25%] h-full p-4 bg-white rounded-[8px] border-2 border-custom-blue/15 shadow ">

    <div class="text-start flex justify-start gap-5">
        <div>
            @if(auth()->user()->avatar)
                <img src="{{ asset('storage/'.auth()->user()->avatar) }}" class="w-[90px] rounded-full" alt="">
            @else
                <img src="{{ asset('assets/media/avatar/blank.png') }}" class="w-[90px] rounded-full" alt="">
            @endif
        </div>

        <div class="flex flex-col justify-center">
            @if(auth()->user()->first_name)
                {{ auth()->user()->first_name }} , {{auth()->user()->last_name}}
            @else
                <a href="{{ route('user.profile') }}" class="btn bg-s">
                    تکمیل پروفایل کاربری
                </a>
            @endif
        </div>
    </div>

    <div class="w-full my-4 h-[1px] bg-slate-300"></div>

    <div class="space-y-2 mt-5">
        <div class="space-y-2">
            <div class="flex items-center gap-2 px-3 py-3 transition-colors duration-150 rounded-lg cursor-pointer hover:bg-zinc-200 bg-slate-100">
                <div class="flex items-center justify-between w-full">
                    <a href="{{ route('user.favorites') }}">
                        <h4 class="font-semibold text-md">نشان شده ها</h4>
                    </a>
                </div>
            </div>

            <div class="flex items-center gap-2 px-3 py-3 transition-colors duration-150 rounded-lg cursor-pointer hover:bg-zinc-200 bg-slate-100">
                <div class="flex items-center justify-between w-full">
                    <a href="{{ route('user.rates') }}">
                        <h4 class="font-semibold text-md">امتیاز داده شده‌ها</h4>
                    </a>
                </div>
            </div>

            <div class="flex items-center gap-2 px-3 py-3 transition-colors duration-150 rounded-lg cursor-pointer hover:bg-zinc-200 bg-slate-100">
                <div class="flex items-center justify-between w-full">
                    <a href="{{ route('user.profile') }}">
                        <h4 class="font-semibold text-md"> پروفایل </h4>
                    </a>
                </div>
            </div>

            @if(auth()->user()->type == 2)
                <div class="flex items-center gap-2 px-3 py-3 transition-colors duration-150 rounded-lg cursor-pointer hover:bg-zinc-200 bg-slate-100">
                    <div class="flex items-center justify-between w-full">
                        <a href="{{ route('service-management.my-services') }}">
                            <h4 class="font-semibold text-md"> خدمات من </h4>
                        </a>
                    </div>
                </div>
            @else
                <div class="flex items-center gap-2 px-3 py-3 transition-colors duration-150 rounded-lg cursor-pointer text-white hover:bg-blue-600 bg-blue-500 mt-9">
                    <div class="flex items-center justify-between w-full">
                        <a href="{{ route('show-change-to-businessman') }}">
                            <h4 class="font-semibold text-md"> افزودن کسب و کار </h4>
                        </a>
                    </div>
                </div>
            @endif

        </div>
    </div>

</div>

<!-- Services List -->