<div class="ab-card">
  <div class="ab-card-header">
    <h2>All Notifications</h2>
    <button class="btn btn-light-soft btn-sm" id="abMarkAllReadBtn">Mark all as read</button>
  </div>
  <div class="ab-card-body p-0" id="abNotifFullList">
    <?php foreach ($rows as $n): ?>
    <div class="ab-notif-item" data-id="<?= (int) $n['id'] ?>" style="<?= $n['is_read'] ? '' : 'background:var(--ab-primary-100);' ?>">
      <div class="ab-notif-icon bg-primary-soft ab-badge"><i class="bi bi-bell"></i></div>
      <div class="flex-fill"><p><strong><?= e($n['title']) ?></strong> — <?= e($n['message']) ?></p><small><?= e(date('M j, g:i A', strtotime($n['created_at']))) ?></small></div>
      <?php if (!$n['is_read']): ?><span class="ab-badge bg-primary-soft align-self-start">New</span><?php endif; ?>
    </div>
    <?php endforeach; ?>
    <?php if (empty($rows)): ?>
    <div class="ab-empty"><i class="bi bi-bell-slash"></i><h3>No notifications yet</h3></div>
    <?php endif; ?>
  </div>
</div>

<script>
document.getElementById('abMarkAllReadBtn').addEventListener('click', function () {
  abFetch('<?= base_url('api/v1/notifications/read-all') ?>', { method: 'POST' }).then(function (res) {
    abToast(res.message);
    document.querySelectorAll('#abNotifFullList .ab-notif-item').forEach(function (el) { el.style.background = ''; });
    document.querySelectorAll('#abNotifFullList .ab-badge').forEach(function (el) { el.remove(); });
  });
});
</script>
