@props(['activeClass' => 'bg-gray-100 text-gray-900'])

<div
    id="sidebarWrapper" {{$attributes->merge([ 'class' => 'border-r border-r-gray-300 transition-all duration-300 ease-in-out w-64 relative'])}}>
    <div class="hidden md:flex h-screen items-center">
        <div id="sidebar"
             class="flex flex-col p-4 pt-6 justify-between font-medium h-full w-full overflow-hidden transition-all duration-300 ease-in-out">
            <div class="">
                <div class="flex space-x-4 border-b border-b-gray-300 pb-6">
                    <x-logo/>
                    <a href="{{route('home')}}" class="whitespace-nowrap">
                        <p class="text-2xl font-bold">DealHub</p>
                        <p class="text-accent-600 text-sm">Admin Panel</p>
                    </a>
                </div>

                <div class="pt-6 flex flex-col space-y-3 whitespace-nowrap">
                    <x-dashboard.broker.sidebar.item :link="route('admin.dashboard')">
                        <x-heroicon-o-squares-2x2 class="min-w-5 w-5"/>
                        <p class="sidebar-text transition-opacity duration-300 ease-in-out ">Dashboard</p>
                    </x-dashboard.broker.sidebar.item>

                    <x-dashboard.broker.sidebar.item :active="\Illuminate\Support\Facades\Route::is('admin.customers.*')" :link="route('admin.customers.index')">
                        <x-heroicon-o-users class="min-w-5 w-5"/>
                        <p class="sidebar-text transition-opacity duration-300 ease-in-out ">Manage Customers</p>
                    </x-dashboard.broker.sidebar.item>

                    <x-dashboard.broker.sidebar.item :link="route('broker.deals.index')">
                        <svg class="w-5 min-w-5" viewBox="0 0 1024 1024"  version="1.1" xmlns="http://www.w3.org/2000/svg" fill="#000000" stroke="#000000" stroke-width="0.2"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M512.536516 506.562145l-112.606908 197.063113 112.606908 225.21484 112.607932-225.21484z" fill="#000000"></path><path d="M680.856096 476.172205c36.824036-40.482378 59.488761-94.060249 59.488761-152.967444 0-125.613323-102.193994-227.807318-227.807317-227.807318s-227.807318 102.193994-227.807318 227.807318c0 58.906171 22.664726 112.485066 59.488761 152.967444-58.595933 32.817572-187.285008 138.139536-187.285008 430.442414 0 12.273313 9.951141 22.225479 22.225479 22.225479 12.273313 0 22.225479-9.951141 22.225479-22.225479 0-304.35708 145.515606-384.465868 178.379253-398.671253 37.433247 26.981426 83.210136 43.069736 132.773354 43.069737 49.564241 0 95.342154-16.08831 132.775401-43.070761 32.907674 14.226887 178.376182 94.379701 178.376182 398.673301 0 12.273313 9.951141 22.225479 22.225479 22.225479s22.225479-9.951141 22.225478-22.225479c-0.001024-292.303902-128.690099-397.625866-187.283984-430.443438zM329.179132 323.204761c0-101.098437 82.258947-183.357384 183.357384-183.357384s183.357384 82.258947 183.357384 183.357384-82.258947 183.357384-183.357384 183.357384-183.357384-82.258947-183.357384-183.357384z" fill="#020b07"></path></g></svg>
                        <p class="sidebar-text transition-opacity duration-300 ease-in-out">Manage Brokers</p>
                    </x-dashboard.broker.sidebar.item>

                    <x-dashboard.broker.sidebar.item :link="route('broker.deals.index')">
                        <x-heroicon-o-document-text class="w-5 min-w-5"/>
                        <p class="sidebar-text transition-opacity duration-300 ease-in-out">Manage Reports</p>
                    </x-dashboard.broker.sidebar.item>
                </div>
            </div>

            <div class="">
                <x-dashboard.broker.sidebar.item :link="route('broker.profile.show', auth()->user()->id)">
                    <x-heroicon-o-user class="w-5 min-w-5"/>
                    <p class="sidebar-text transition-opacity duration-300 ease-in-out">Profile</p>
                </x-dashboard.broker.sidebar.item>

                <form method="post" action="{{route('logout')}}">
                    @csrf
                    @method('delete')
                    <button
                        class="py-3 pl-3 border border-white hover:bg-red-50 hover:border-red-200 rounded-xl w-full mt-4 transition-all">
                        <div class="flex space-x-3 items-center text-red-500">
                            <x-heroicon-o-arrow-right-start-on-rectangle class="w-5 min-w-5"/>
                            <p class="sidebar-text transition-opacity duration-300 ease-in-out">Logout</p>
                        </div>
                    </button>
                </form>
            </div>
        </div>

        {{-- Toggle Button --}}
        <div
            class="text-gray-500 cursor-pointer hover:text-gray-900 rounded-full p-1.5 bg-white border border-gray-300 absolute -right-3.5 top-21">
            <x-heroicon-c-chevron-left id="closeSidebarBtn" class="w-4"/>
            <x-heroicon-c-chevron-right id="openSidebarBtn" class="w-4 hidden"/>
        </div>
    </div>
</div>
@vite(['resources/js/sidebar.js'])