{{-- Bell Icon Notification Dropdown --}}
@auth
@php
    $unreadNotifications = \App\Models\UserNotification::where('user_id', Auth::id())
        ->unread()
        ->orderBy('created_at', 'desc')
        ->limit(5)
        ->get();
    $unreadCount = \App\Models\UserNotification::where('user_id', Auth::id())->unread()->count();
@endphp

<div class="dropdown notification-dropdown">
    <button class="btn btn-link text-muted position-relative p-2" type="button" data-bs-toggle="dropdown" aria-expanded="false" id="notificationBell">
        <i class="bi bi-bell fs-5"></i>
        @if($unreadCount > 0)
            <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger notification-badge">
                {{ $unreadCount > 9 ? '9+' : $unreadCount }}
            </span>
        @endif
    </button>
    <div class="dropdown-menu dropdown-menu-end notification-menu shadow-lg border-0" style="width: 360px; max-height: 450px;">
        <div class="d-flex justify-content-between align-items-center px-3 py-2 border-bottom bg-light">
            <h6 class="mb-0 fw-bold"><i class="bi bi-bell me-2"></i>Notifications</h6>
            @if($unreadCount > 0)
                <button class="btn btn-sm btn-link text-primary p-0" onclick="markAllAsRead()">Mark all read</button>
            @endif
        </div>
        
        <div class="notification-list" style="max-height: 320px; overflow-y: auto;">
            @forelse($unreadNotifications as $notification)
                <a href="{{ route('notifications.read', $notification) }}" class="dropdown-item notification-item py-3 px-3 border-bottom {{ !$notification->is_read ? 'unread' : '' }}">
                    <div class="d-flex">
                        <div class="notification-icon rounded-circle bg-{{ $notification->icon_color }}-subtle text-{{ $notification->icon_color }} p-2 me-3">
                            <i class="bi {{ $notification->icon_class }}"></i>
                        </div>
                        <div class="flex-grow-1 min-width-0">
                            <h6 class="mb-1 fw-bold text-truncate">{{ $notification->title }}</h6>
                            <p class="mb-1 text-muted small text-truncate">{{ Str::limit($notification->body, 60) }}</p>
                            <small class="text-muted">{{ $notification->created_at->diffForHumans() }}</small>
                        </div>
                        @if(!$notification->is_read)
                            <span class="unread-dot bg-primary rounded-circle ms-2" style="width: 8px; height: 8px; flex-shrink: 0;"></span>
                        @endif
                    </div>
                </a>
            @empty
                <div class="text-center py-5 text-muted">
                    <i class="bi bi-bell-slash fs-1 d-block mb-2 opacity-25"></i>
                    <p class="mb-0 small">No new notifications</p>
                </div>
            @endforelse
        </div>
        
        <div class="text-center py-2 border-top bg-light">
            <a href="{{ route('notifications.all') }}" class="text-primary fw-bold small">View All Notifications</a>
        </div>
    </div>
</div>

<style>
    .notification-dropdown .notification-menu {
        border-radius: 12px;
    }
    .notification-item {
        transition: background 0.2s;
    }
    .notification-item:hover {
        background: #f8f9fa;
    }
    .notification-item.unread {
        background: #f0f7ff;
    }
    .notification-icon {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
    .notification-badge {
        font-size: 10px;
        padding: 4px 6px;
    }
</style>

<script>
function markAllAsRead() {
    fetch('{{ route("notifications.mark-all-read") }}', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Accept': 'application/json',
        },
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            // Remove unread styling and badge
            document.querySelectorAll('.notification-item.unread').forEach(el => el.classList.remove('unread'));
            document.querySelectorAll('.unread-dot').forEach(el => el.remove());
            const badge = document.querySelector('.notification-badge');
            if (badge) badge.remove();
        }
    });
}
</script>
@endauth
