<div class="container py-4">
    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h2 class="fw-bold font-outfit text-dark m-0">My Notifications</h2>
            <p class="text-muted mb-0">System updates, connection approvals, message notifications, and session confirmations.</p>
        </div>
    </div>

    <!-- Notification List Card -->
    <div class="row">
        <div class="col-12">
            <div class="card border-0 shadow-sm p-4">
                <?php if (!empty($notifications)): ?>
                    <div class="list-group list-group-flush" id="notifications-main-list">
                        <?php foreach ($notifications as $notif): ?>
                            <div class="list-group-item border-0 py-3 px-3 mb-2 rounded-3 d-flex justify-content-between align-items-center notif-item <?= $notif['is_read'] ? 'bg-light-subtle opacity-75' : 'bg-primary-subtle border-start border-3 border-primary' ?>" id="notif-item-<?= $notif['id'] ?>">
                                <div class="d-flex align-items-center">
                                    <div class="badge-icon-box bg-white text-primary rounded-circle p-2 me-3 shadow-2xs">
                                        <?php if ($notif['type'] === 'new_message'): ?>
                                            <i class="fa-regular fa-comment-dots fs-5"></i>
                                        <?php elseif (str_contains($notif['type'], 'session')): ?>
                                            <i class="fa-regular fa-calendar-check fs-5"></i>
                                        <?php else: ?>
                                            <i class="fa-regular fa-bell fs-5"></i>
                                        <?php endif; ?>
                                    </div>
                                    <div>
                                        <h6 class="fw-bold text-dark mb-1"><?= htmlspecialchars($notif['title']) ?></h6>
                                        <p class="text-sm text-muted mb-1"><?= htmlspecialchars($notif['body']) ?></p>
                                        <small class="text-muted text-3xs"><?= timeAgo($notif['created_at']) ?></small>
                                    </div>
                                </div>
                                <div class="text-end">
                                    <?php if (!$notif['is_read']): ?>
                                        <button class="btn btn-xs btn-outline-primary rounded-pill px-3 btn-mark-read" data-id="<?= $notif['id'] ?>">Mark Read</button>
                                    <?php endif; ?>
                                </div>
                            </div>
                        <?php endforeach; ?>
                    </div>
                <?php else: ?>
                    <div class="text-center py-5 text-muted">
                        <i class="fa-regular fa-bell-slash display-5 mb-3"></i>
                        <h5>All Caught Up!</h5>
                        <p class="text-xs">You do not have any notification alerts at the moment.</p>
                    </div>
                <?php endif; ?>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const list = document.getElementById('notifications-main-list');
    if (list) {
        list.addEventListener('click', function(e) {
            if (e.target.classList.contains('btn-mark-read')) {
                const button = e.target;
                const id = button.getAttribute('data-id');
                button.disabled = true;

                fetch(APP_URL + '/api/notifications/read/' + id, {
                    method: 'POST',
                    headers: {
                        'X-CSRF-Token': CSRF_TOKEN,
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                })
                .then(res => res.json())
                .then(json => {
                    if (json.success) {
                        const item = document.getElementById('notif-item-' + id);
                        item.classList.remove('bg-primary-subtle', 'border-start', 'border-3', 'border-primary');
                        item.classList.add('bg-light-subtle', 'opacity-75');
                        button.remove();

                        // Force sync unread count badge in layout header
                        const hCount = document.getElementById('header-unread-notifications');
                        const sCount = document.getElementById('sidebar-unread-notifications');
                        [hCount, sCount].forEach(el => {
                            if (el) {
                                let c = parseInt(el.innerText) - 1;
                                if (c > 0) {
                                    el.innerText = c;
                                } else {
                                    el.style.display = 'none';
                                }
                            }
                        });
                    }
                })
                .catch(err => {
                    button.disabled = false;
                    console.error(err);
                });
            }
        });
    }
});
</script>
