{{--
    Notification Dropdown Component
    Shows recent notifications in a dropdown menu
--}}

<div class="dropdown notification-dropdown">
    <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
        <span class="position-relative d-inline-flex">
            <x-lucide-bell width="20" height="20" />
            @if ($unreadCount > 0)
                <span class="badge bg-danger notification-badge">{{ $unreadCount }}</span>
            @endif
        </span>
        <span class="nav-link-text d-none d-lg-inline">الإشعارات</span>
    </a>

    <div class="dropdown-menu dropdown-menu-end notification-dropdown-menu">
        <div class="dropdown-header d-flex justify-content-between align-items-center">
            <h6 class="mb-0">الإشعارات</h6>
            @if ($unreadCount > 0)
                <span class="badge bg-primary">{{ $unreadCount }}</span>
            @endif
        </div>

        <div class="dropdown-divider"></div>

        @if ($recentNotifications->isNotEmpty())
            @foreach ($recentNotifications as $notification)
                <a href="{{ route('user.notifications.mark-as-read', $notification->id) }}"
                    class="dropdown-item notification-item {{ !$notification->is_read ? 'unread' : '' }}">
                    <div class="d-flex align-items-start">
                        <div class="flex-shrink-0 me-2">
                            @if ($notification->type === 'error')
                                <x-lucide-x-circle class="text-danger" width="18" height="18" />
                            @elseif($notification->type === 'warning')
                                <x-lucide-triangle-alert class="text-warning" width="18" height="18" />
                            @else
                                <x-lucide-info class="text-info" width="18" height="18" />
                            @endif
                        </div>
                        <div class="flex-grow-1">
                            <h6 class="dropdown-item-title mb-1">{{ Str::limit($notification->title, 25) }}</h6>
                            <p class="dropdown-item-text mb-1">{{ Str::limit($notification->content, 40) }}</p>
                            <small class="text-muted">{{ $notification->created_at?->format('d-m-Y') }}</small>
                            @if ($notification->is_required)
                                <span class="badge bg-danger ms-1">مهم</span>
                            @endif
                        </div>
                    </div>
                </a>
            @endforeach

            <div class="dropdown-divider"></div>
            <a href="{{ route('user.notifications') }}" class="dropdown-item text-center text-primary">
                <x-lucide-eye class="me-1" width="16" height="16" />
                عرض جميع الإشعارات
            </a>
        @else
            <div class="dropdown-item text-center text-muted">
                <x-lucide-bell-off class="mb-2 d-block" width="24" height="24" />
                لا توجد إشعارات
            </div>
        @endif
    </div>
</div>

<style>
    .notification-dropdown-menu {
        width: 320px;
        max-height: 400px;
        overflow-y: auto;
    }

    .notification-item {
        padding: 0.75rem 1rem;
        border-bottom: 1px solid #f1f3f4;
        transition: background-color 0.2s ease;
    }

    .notification-item:hover {
        background-color: #f8f9fa;
    }

    .notification-item.unread {
        background-color: #f8f9ff;
        border-left: 3px solid #0d6efd;
    }

    .notification-badge {
        position: absolute;
        top: -2px;
        right: -6px;
        font-size: 0.65rem;
        padding: 0.2em 0.4em;
        border-radius: 50%;
        min-width: 16px;
        height: 16px;
        line-height: 1;
    }

    .dropdown-item-title {
        font-size: 0.875rem;
        font-weight: 600;
        color: #495057;
    }

    .dropdown-item-text {
        font-size: 0.8rem;
        color: #6c757d;
        line-height: 1.3;
    }

    @media (max-width: 991.98px) {
        .notification-dropdown-menu {
            width: 280px;
        }
    }
</style>