itflow/modals/notifications.php

<?php

require_once $_SERVER['DOCUMENT_ROOT'] . '/includes/modal_header.php';

header('Content-Type: application/json');

$sql = mysqli_query(
    $mysqli,
    "SELECT * FROM notifications
    WHERE notification_user_id = $session_user_id
    AND notification_dismissed_at IS NULL
    ORDER BY notification_id DESC"
);

$num_notifications = mysqli_num_rows($sql);

// Generate the HTML form content using output buffering.
ob_start();
?>

<div class="modal-header bg-dark">
    <h5 class="modal-title"><i class='fas fa-bell me-2'></i>Notifications<span class='badge bg-secondary rounded-pill px-3 ms-3'><?= $num_notifications ?><span></h5>
    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
</div>

<div class="modal-body">
    <?php if ($num_notifications) { ?>
    <table class="table table-sm table-hover table-borderless">


        <?php while ($row = mysqli_fetch_assoc($sql)) {

            $notification_id = intval($row["notification_id"]);
            $notification_type = escapeHtml($row["notification_type"]);
            $notification_details = escapeHtml($row["notification"]);
            $notification_action = escapeHtml(
                $row["notification_action"]
            );
            $notification_timestamp_formated = date(
                "M d g:ia",
                strtotime($row["notification_timestamp"])
            );
            $notification_client_id = intval($row["notification_client_id"]);
            if (empty($notification_action)) {
                $notification_action = "#";
            }
            ?>

        <tr class="notification-item">
            <th>
                <a class="text-dark" href="<?= $notification_action ?>">
                    <i class="fas fa-bullhorn me-2"></i><?= $notification_type ?>
                    <small class="text-muted float-end">
                        <?= $notification_timestamp_formated ?>
                    </small>
                    <br>
                    <small class="text-secondary text-wrap"><?= $notification_details ?></small>
                 </a>
            </th>
        </tr>

        <?php
        }
        ?>
        </table>
        <div class="text-center mt-2">
            <button id="prev-btn" class="btn btn-sm btn-outline-secondary me-2"><i class="fas fa-caret-left"></i></button>
            <button id="next-btn" class="btn btn-sm btn-outline-secondary"><i class="fas fa-caret-right"></i></button>
        </div>
    <?php } else { ?>
    <div class="text-center text-secondary pt-3">
        <i class='far fa-6x fa-bell-slash'></i>
        <h3 class="mt-3">No Notifications</h3>
    </div>
    <?php } ?>
</div>
<div class="modal-footer">
    <?php if ($num_notifications) { ?>

    <a href="/agent/post.php?dismiss_all_notifications&csrf_token=<?= $_SESSION["csrf_token"] ?>" class="btn btn-primary">
        <span class="text-white text-bold"><i class="fas fa-check me-2"></i>Dismiss all</span>
    </a>
    <a href="/agent/notifications.php" class="btn btn-secondary">
        <span class="text-white">See all Notifications</span>
    </a>
    <?php } else { ?>
    <a href="/agent/notifications.php?dismissed" class="btn btn-dark">
        <span class="text-white text-bold">See Dismissed Notifications</span>
    </a>
    <?php } ?>
    <button type="button" class="btn btn-light" data-bs-dismiss="modal">
        <i class="fas fa-times me-2"></i>Close
    </button>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    var perPage = 8;
    var items = Array.from(document.querySelectorAll('.notification-item'));
    var totalItems = items.length;
    var totalPages = Math.ceil(totalItems / perPage);
    var currentPage = 0;

    var prevBtn = document.getElementById('prev-btn');
    var nextBtn = document.getElementById('next-btn');
    var indicator = document.getElementById('page-indicator');

    function showPage(page) {
        items.forEach(function (item, i) {
            var visible = i >= page * perPage && i < (page + 1) * perPage;
            item.style.display = visible ? '' : 'none';
        });
        if (prevBtn) {
            prevBtn.disabled = page === 0;
        }
        if (nextBtn) {
            nextBtn.disabled = page >= totalPages - 1;
        }
        if (indicator) {
            indicator.textContent = `Page ${page + 1} of ${totalPages} (${totalItems} total)`;
        }
    }

    if (prevBtn) {
        prevBtn.addEventListener('click', function () {
            if (currentPage > 0) {
                currentPage--;
                showPage(currentPage);
            }
        });
    }

    if (nextBtn) {
        nextBtn.addEventListener('click', function () {
            if (currentPage < totalPages - 1) {
                currentPage++;
                showPage(currentPage);
            }
        });
    }

    if (totalItems <= perPage) {
        [prevBtn, nextBtn, indicator].forEach(function (el) {
            if (el) {
                el.style.display = 'none';
            }
        });
    }

    showPage(currentPage);
});
</script>

<?php

require_once $_SERVER['DOCUMENT_ROOT'] . '/includes/modal_footer.php';