<?php
/**
 * @var object $notifications
 * @var int $unreadCount
 */
?>
<div class="page-title mb-4">
    <h5><i class="fas fa-bell me-2 text-gold"></i>Notifications</h5>
</div>

<div class="glass-card p-0">
    <div class="card-header">
        <div class="card-header-left">
            <i class="fas fa-bell card-icon"></i>
            <h6 class="card-title">
                All Notifications
                <?php if ($unreadCount > 0): ?>
                    <span class="badge bg-danger ms-2"><?= (int)$unreadCount ?> unread</span>
                <?php endif; ?>
            </h6>
        </div>
        <div class="card-header-right">
            <?php if ($unreadCount > 0): ?>
                <button type="button" class="btn btn-sm btn-outline-gold" id="markAllRead">
                    <i class="fas fa-check-double me-1"></i>Mark All Read
                </button>
            <?php endif; ?>
        </div>
    </div>
    <div class="card-body p-0">
        <div class="list-group list-group-flush bg-transparent">
            <?php if (empty($notifications->data)): ?>
                <div class="text-center text-muted py-5">
                    <i class="fas fa-bell-slash fa-3x mb-3"></i>
                    <p class="mb-0">No notifications</p>
                </div>
            <?php else: ?>
                <?php foreach ($notifications->data as $notif): ?>
                    <div class="list-group-item bg-transparent border-secondary notification-item <?= !$notif->is_read ? 'unread' : '' ?>"
                         data-id="<?= $notif->id ?>">
                        <div class="d-flex w-100 justify-content-between align-items-start">
                            <div class="d-flex gap-3 align-items-start">
                                <div class="mt-1">
                                    <?php if (!$notif->is_read): ?>
                                        <span class="badge bg-danger rounded-pill" style="width:8px;height:8px;padding:0;">&nbsp;</span>
                                    <?php else: ?>
                                        <span class="text-muted" style="width:8px;display:inline-block;">&nbsp;</span>
                                    <?php endif; ?>
                                </div>
                                <div>
                                    <h6 class="mb-1 <?= !$notif->is_read ? 'text-gold' : '' ?>"><?= e($notif->title) ?></h6>
                                    <p class="mb-1 small text-muted"><?= e($notif->message) ?></p>
                                    <small class="text-muted"><?= timeAgo($notif->created_at) ?></small>
                                </div>
                            </div>
                            <?php if (!$notif->is_read): ?>
                                <button type="button" class="btn btn-sm btn-link text-gold mark-read" data-id="<?= $notif->id ?>">
                                    <i class="fas fa-check"></i>
                                </button>
                            <?php endif; ?>
                        </div>
                    </div>
                <?php endforeach; ?>
            <?php endif; ?>
        </div>

        <?php if ($notifications->totalPages > 1): ?>
            <div class="card-footer d-flex justify-content-between align-items-center">
                <div class="text-muted small">
                    Page <?= $notifications->currentPage ?> of <?= $notifications->totalPages ?>
                </div>
                <?= paginateLinks($notifications, url('notifications')) ?>
            </div>
        <?php endif; ?>
    </div>
</div>

<?php $inlineScripts = <<<'EOS'
$('.mark-read').click(function() {
    const id = $(this).data('id');
    const item = $(this).closest('.notification-item');
    $.post('__URL__/notifications/mark-read/' + id, {
        _csrf_token: $('meta[name="csrf-token"]').attr('content')
    }, function() {
        item.removeClass('unread');
        item.find('.badge').remove();
        item.find('.mark-read').remove();
        const count = $('.notification-item.unread').length;
        if (count === 0) {
            $('#markAllRead').remove();
        }
    });
});

$('#markAllRead').click(function() {
    $.post('__URL__/notifications/mark-all-read', {
        _csrf_token: $('meta[name="csrf-token"]').attr('content')
    }, function() {
        $('.notification-item').removeClass('unread');
        $('.notification-item .badge').remove();
        $('.notification-item .mark-read').remove();
        $('#markAllRead').remove();
    });
});
EOS;
$inlineScripts = str_replace('__URL__', rtrim(APP_URL, '/'), $inlineScripts);
?>
