@php
    $unreadCount = auth()->user()->unreadNotifications->count();
    $notifications = auth()->user()->notifications()->latest()->take(5)->get();
@endphp

<div class="relative ml-3" x-data="{ open: false }">
    <button @click="open = !open" class="relative p-1 text-gray-600 hover:text-primary-DEFAULT focus:outline-none">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
        </svg>
        @if($unreadCount > 0)
            <span class="absolute top-0 right-0 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-white transform translate-x-1/2 -translate-y-1/2 bg-red-600 rounded-full">
                {{ $unreadCount }}
            </span>
        @endif
    </button>

    <div x-show="open" 
         @click.away="open = false"
         x-transition:enter="transition ease-out duration-100" 
         x-transition:enter-start="transform opacity-0 scale-95" 
         x-transition:enter-end="transform opacity-100 scale-100" 
         x-transition:leave="transition ease-in duration-75" 
         x-transition:leave-start="transform opacity-100 scale-100" 
         x-transition:leave-end="transform opacity-0 scale-95" 
         class="absolute right-0 mt-2 w-80 bg-white rounded-md shadow-lg py-1 z-50"
         style="display: none;">
        
        <div class="px-4 py-2 border-b border-gray-200">
            <div class="flex justify-between items-center">
                <h3 class="text-sm font-semibold text-gray-700">Notifications</h3>
                @if($unreadCount > 0)
                    <form action="{{ route('notifications.mark-all-read') }}" method="POST" class="inline">
                        @csrf
                        <button type="submit" class="text-xs text-primary-DEFAULT hover:text-primary-dark">
                            Mark all as read
                        </button>
                    </form>
                @endif
            </div>
        </div>

        <div class="max-h-60 overflow-y-auto">
            @forelse($notifications as $notification)
                <a href="{{ isset($notification->data['withdrawal_id']) ? route('withdrawals.show', $notification->data['withdrawal_id']) : route('notifications.index') }}" 
                   class="block px-4 py-2 hover:bg-gray-100 {{ $notification->read_at ? 'bg-white' : 'bg-blue-50' }}">
                    <div class="flex items-start">
                        <div class="flex-shrink-0 mt-0.5">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 {{ $notification->read_at ? 'text-gray-400' : 'text-primary-DEFAULT' }}" viewBox="0 0 20 20" fill="currentColor">
                                <path fill-rule="evenodd" d="M10 2a8 8 0 100 16 8 8 0 000-16zm0 14a6 6 0 100-12 6 6 0 000 12zm-.75-6.75a.75.75 0 000 1.5h2.5a.75.75 0 000-1.5h-2.5z" clip-rule="evenodd" />
                            </svg>
                        </div>
                        <div class="ml-3 flex-1">
                            <p class="text-sm font-medium {{ $notification->read_at ? 'text-gray-700' : 'text-gray-900' }}">
                                {{ isset($notification->data['message']) ? $notification->data['message'] : 'New notification' }}
                            </p>
                            <p class="text-xs text-gray-500 mt-1">
                                {{ $notification->created_at->diffForHumans() }}
                            </p>
                        </div>
                    </div>
                </a>
            @empty
                <div class="px-4 py-6 text-center text-sm text-gray-500">
                    No notifications yet
                </div>
            @endforelse
        </div>

        <div class="px-4 py-2 border-t border-gray-200">
            <a href="{{ route('notifications.index') }}" class="block text-center text-sm text-primary-DEFAULT hover:text-primary-dark">
                View all notifications
            </a>
        </div>
    </div>
</div>