@php use App\Enums\DefaultUserRole;
 $user = auth()->user();
@endphp
<div class="w-full py-4 px-10 border-b border-gray-200 flex justify-center">
    <div class="flex-1 py-2">
        @if($user?->hasRole(DefaultUserRole::Admin->value))
            <p class="text-xl font-medium">Admin Panel</p>
        @endif
    </div>
    <div class="flex space-x-4 items-center">
        @php
            $unreadNotifications = $user?->unreadNotifications()->take(5)->get() ?? collect();
            $unreadCount = $user?->unreadNotifications()->count() ?? 0;
        @endphp
        <x-mary-dropdown right class="relative">
            <x-slot:trigger>
                <div class="relative cursor-pointer p-2 hover:bg-gray-100 rounded-full">
                    <x-lucide-bell class="w-5 h-5 text-gray-600"/>
                    @if($unreadCount > 0)
                        <span
                            class="absolute top-1.5 right-1.5 inline-flex items-center justify-center px-1.5 py-0.5 text-[9px] font-bold leading-none text-white transform translate-x-1/3 -translate-y-1/3 bg-red-500 rounded-full">
                            {{ $unreadCount }}
                        </span>
                    @endif
                </div>
            </x-slot:trigger>

            @if($unreadNotifications->isEmpty())
                <x-mary-menu-item title="No new notifications" class="text-gray-400 text-xs py-3 px-4 min-w-50"/>
            @else
                <div
                    class="px-4 py-2 border-b border-gray-100 font-semibold text-[10px] text-gray-500 uppercase tracking-wider flex justify-between items-center gap-4 min-w-60">
                    <span>Notifications</span>
                    <form method="POST" action="{{ route('notifications.read-all') }}">
                        @csrf
                        <button type="submit" class="text-blue-600 hover:underline text-[10px] cursor-pointer">Mark all
                            read
                        </button>
                    </form>
                </div>
                @foreach($unreadNotifications as $notification)
                    <x-mary-menu-item link="{{ route('notifications.resolve', $notification->id) }}">
                        <div class="flex flex-col gap-0.5">
                            <span class="font-semibold text-xs text-gray-900">
                                {{ data_get($notification->data, 'issue_category', 'Notification') }}
                            </span>
                            <span class="text-xs text-gray-500 line-clamp-2 leading-tight">
                                {{ data_get($notification->data, 'message', '') }}
                            </span>
                            <span class="text-[9px] text-gray-400 mt-1">
                                {{ $notification->created_at->diffForHumans() }}
                            </span>
                        </div>
                    </x-mary-menu-item>
                @endforeach
            @endif
        </x-mary-dropdown>

        <x-mary-dropdown>
            <x-slot:trigger>
                <div
                    class="rounded-full w-12 h-12 bg-blue-200 flex items-center justify-center font-semibold text-blue-800 cursor-pointer">
                    {{ $user->initials() }}
                </div>
            </x-slot:trigger>
            <x-mary-menu-item>
                <div class="">
                    <p class="font-semibold font-lg ">{{$user->name}}</p>
                    <p class="text-sm text-base-content/50 ">{{$user->email}}</p>
                </div>
            </x-mary-menu-item>
            <div class="h-[0.5px] bg-gray-100"></div>
            <form method="POST" action="{{ route('logout') }}">
                @csrf
                <x-mary-menu-item
                    title="Log out"
                    icon="lucide.log-out"
                    onclick="event.preventDefault(); this.closest('form').submit();"
                />
            </form>
        </x-mary-dropdown>
    </div>
</div>