
<?php if(auth()->guard()->check()): ?>
<?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();
?>

<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>
        <?php if($unreadCount > 0): ?>
            <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger notification-badge">
                <?php echo e($unreadCount > 9 ? '9+' : $unreadCount); ?>

            </span>
        <?php 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>
            <?php if($unreadCount > 0): ?>
                <button class="btn btn-sm btn-link text-primary p-0" onclick="markAllAsRead()">Mark all read</button>
            <?php endif; ?>
        </div>
        
        <div class="notification-list" style="max-height: 320px; overflow-y: auto;">
            <?php $__empty_1 = true; $__currentLoopData = $unreadNotifications; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $notification): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                <a href="<?php echo e(route('notifications.read', $notification)); ?>" class="dropdown-item notification-item py-3 px-3 border-bottom <?php echo e(!$notification->is_read ? 'unread' : ''); ?>">
                    <div class="d-flex">
                        <div class="notification-icon rounded-circle bg-<?php echo e($notification->icon_color); ?>-subtle text-<?php echo e($notification->icon_color); ?> p-2 me-3">
                            <i class="bi <?php echo e($notification->icon_class); ?>"></i>
                        </div>
                        <div class="flex-grow-1 min-width-0">
                            <h6 class="mb-1 fw-bold text-truncate"><?php echo e($notification->title); ?></h6>
                            <p class="mb-1 text-muted small text-truncate"><?php echo e(Str::limit($notification->body, 60)); ?></p>
                            <small class="text-muted"><?php echo e($notification->created_at->diffForHumans()); ?></small>
                        </div>
                        <?php if(!$notification->is_read): ?>
                            <span class="unread-dot bg-primary rounded-circle ms-2" style="width: 8px; height: 8px; flex-shrink: 0;"></span>
                        <?php endif; ?>
                    </div>
                </a>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                <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>
            <?php endif; ?>
        </div>
        
        <div class="text-center py-2 border-top bg-light">
            <a href="<?php echo e(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('<?php echo e(route("notifications.mark-all-read")); ?>', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': '<?php echo e(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>
<?php endif; ?>
<?php /**PATH /home/u281583269/domains/theminiport.com/public_html/resources/views/partials/notification-bell.blade.php ENDPATH**/ ?>