@php
    // Obtener notificaciones no leídas para el usuario actual
    $unreadCount = \App\Models\UserNotification::where('user_id', Auth::id())
        ->whereNull('read_at')
        ->count();
    
    // Obtener las 5 notificaciones más recientes
    $recentNotifications = \App\Models\UserNotification::where('user_id', Auth::id())
        ->orderBy('created_at', 'desc')
        ->take(5)
        ->get();
@endphp

<div class="notification-dropdown" style="position: absolute;left: calc(100% - 25vw);">
    <a href="#" class="position-relative text-decoration-none dropdown-toggle" id="notificationDropdown" data-bs-toggle="dropdown" aria-expanded="false">
        <i class="fas fa-bell fs-5 text-primary"></i>
        @if($unreadCount > 0)
            <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger notification-counter">
                {{ $unreadCount > 99 ? '99+' : $unreadCount }}
            </span>
        @else
            <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger notification-counter d-none">0</span>
        @endif
    </a>
    
    <ul class="dropdown-menu dropdown-menu-end notification-dropdown-menu shadow" aria-labelledby="notificationDropdown">
        <li>
            <h6 class="dropdown-header d-flex justify-content-between align-items-center">
                Notificaciones
                @if($unreadCount > 0)
                    <a href="#" id="mark-all-read" class="text-primary text-decoration-none small">
                        <i class="fas fa-check-double"></i> Marcar todas como leídas
                    </a>
                @endif
            </h6>
        </li>
        
        <div class="notification-list" style="max-height: 300px; overflow-y: auto;">
            @forelse($recentNotifications as $notification)
                <li>
                    <a class="dropdown-item notification-item {{ is_null($notification->read_at) ? 'unread' : '' }}" 
                       href="{{ $notification->link }}" 
                       onclick="event.preventDefault(); markNotificationAsRead('{{ $notification->id }}'); window.location.href = '{{ $notification->link }}'">
                        <div class="d-flex align-items-center">
                            <div class="notification-icon bg-{{ $notification->type }} text-white p-2 rounded-circle me-2">
                                <i class="fas fa-{{ $notification->icon }}"></i>
                            </div>
                            <div>
                                <div class="fw-bold">{{ $notification->title }}</div>
                                <div class="small">{{ Str::limit($notification->message, 100) }}</div>
                                <div class="text-muted small">{{ $notification->created_at->diffForHumans() }}</div>
                            </div>
                        </div>
                    </a>
                </li>
            @empty
                <li><span class="dropdown-item py-3 text-center">No hay notificaciones</span></li>
            @endforelse
        </div>
        
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item text-center" href="{{ route('notifications.index') }}">Ver todas las notificaciones</a></li>
    </ul>
</div>

<style>
    .notification-counter {
        font-size: 0.65rem;
        padding: 0.2rem 0.35rem;
        margin-left: -0.5rem !important;
        margin-top: -0.25rem !important;
    }
    
    .notification-item.unread {
        background-color: rgba(13, 110, 253, 0.05);
        font-weight: 500;
        border-left: 3px solid #0d6efd;
    }
    
    .notification-icon {
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .notification-icon.bg-info { background-color: #0dcaf0; }
    .notification-icon.bg-success { background-color: #198754; }
    .notification-icon.bg-warning { background-color: #ffc107; }
    .notification-icon.bg-danger { background-color: #dc3545; }
    .notification-icon.bg-primary { background-color: #0d6efd; }
    
    .notification-dropdown-menu {
        width: 350px;
        padding: 0;
    }
    
    .notification-item {
        padding: 0.7rem 1rem;
        border-left: 3px solid transparent;
    }
    
    .notification-item.unread {
        background-color: rgba(74, 144, 226, 0.05);
        border-left: 3px solid #4A90E2;
    }
    
    .notification-icon {
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.8rem;
    }
    
    .notification-item:hover {
        background-color: rgba(74, 144, 226, 0.1);
    }
</style>
