@php
    $categories  = [0 => ['name' => 'All Categories', 'value' => '0']];
@endphp
<x-layout title="Deals">
    <x-dashboard.page-heading
        title="Explore Deals"
        description="Discover trusted recommendation"
    >
        <x-slot:end>
            <div class="flex items-center">
                <div class="relative group">
                    <x-ui.button icon="user-circle" class="cursor-pointer" onclick="showMenu(this)"></x-ui.button>
                    <ul class="menu invisible  group-hover:visible w-48 absolute right-0  bg-white border border-gray-300 rounded-md shadow-xl py-2 text-accent-600">
                        <li class="py-2 px-4 hover:bg-gray-100 hover:text-gray-900 hover:cursor-pointer hover:font-bold">
                            <a href="{{$profileLink}}" class="flex space-x-4">
                                <div class="p-1 bg-gray-200 rounded-xl text-gray-900">
                                    <x-heroicon-o-user class="w-4"/>
                                </div>
                                <p>Profile</p>
                            </a>
                        </li>

                        @if(auth()->user()->role === \App\Enums\UserTypes::Broker->value)
                            <li class="py-2 px-4 hover:bg-gray-100 hover:text-gray-900 hover:cursor-pointer hover:font-bold">
                                <a href="{{route('broker.dashboard')}}" class="flex space-x-4">
                                    <div class="p-1 bg-gray-200 rounded-xl text-gray-900">
                                        <x-heroicon-o-adjustments-horizontal class="w-4"/>
                                    </div>
                                    <p>Control Panel</p>
                                </a>
                            </li>
                        @endif

                    </ul>
                </div>
                <form method="post" action="{{route('logout')}}">
                    @csrf
                    @method('delete')
                    <x-ui.button class="flex space-x-3 hover:bg-gray-100 hover:border-gray-300 hover:border">
                        <x-heroicon-o-arrow-right-start-on-rectangle class="w-4 stroke-2 mr-2"/>
                        <p class="hidden sm:block">Logout</p>
                    </x-ui.button>
                </form>
            </div>
        </x-slot:end>
    </x-dashboard.page-heading>
    <section class="flex flex-col space-y-8 bg-[#F9FAFB] wrapper mt-2 pb-6">

        <div>
            @session('success')
            <x-ui.alert variant="success">{{$value}}</x-ui.alert>
            @endsession

            @session('error')
            <x-ui.alert variant="error">{{$value}}</x-ui.alert>
            @endsession
        </div>

        <x-dashboard.card>
            <div class="flex gap-4 flex-col sm:flex-row">
                <x-ui.input class="flex-1" name="search" placeholder="Search deals, services, places"/>
                <x-ui.select name="category" :options="$categories" value-key="value" label-key="name"/>
            </div>
        </x-dashboard.card>

        <x-ui.toggle-button-group>
            <x-ui.toggle-button active>
                <a href="" class="flex items-center px-2 py-1 space-x-2">
                    <x-heroicon-o-clock class="w-4 stroke-2"/>
                    <p class="font-bold text-xs  sm:text-sm md:text-md">All Deals</p>
                </a>
            </x-ui.toggle-button>

            <x-ui.toggle-button>
                <a href="" class="flex items-center px-2 py-1 space-x-2">
                    <x-heroicon-o-arrow-trending-up class="w-4 stroke-2"/>
                    <p class="font-bold text-xs sm:text-sm md:text-md">Most Liked</p>
                </a>
            </x-ui.toggle-button>

            <x-ui.toggle-button>
                <a href="" class="flex items-center px-2 py-1 space-x-2">
                    <x-heroicon-o-star class="w-4 stroke-2"/>
                    <p class="font-bold text-xs sm:text-sm md:text-md">Most Clicked</p>
                </a>
            </x-ui.toggle-button>
        </x-ui.toggle-button-group>

        <x-dashboard.user.listing :deals="$deals"/>
    </section>
    @vite('resources/js/menu.js')
</x-layout>