// Function to request notification permission
function requestNotificationPermission() {
    if (Notification.permission === "default") {
        Notification.requestPermission().then(function(permission) {
            if (permission === "granted") {
                console.log("Permission granted for notifications.");
            } else {
                console.log("Permission denied for notifications.");
            }
        });
    }
}

// Request permission when the page loads
document.addEventListener('DOMContentLoaded', function() {
    requestNotificationPermission();
});

// Function to show notification
function showNotification(alert) {
    if (Notification.permission === "granted") {
        const notification = new Notification("New Alert: " + alert.type, {
            body: alert.message,
            icon: "images/edulert-logo.png" // You can specify an icon
        });

        // Add a click event to the notification (optional)
        notification.onclick = function () {
            window.focus(); // Bring the window to the foreground
            notification.close();
        };
    }
}

// Function to fetch the latest alerts from the server
function fetchAlerts() {
    fetch('alerts.php')  // Send GET request to alerts.php
        .then(response => response.json())  // Parse JSON response
        .then(data => {
            console.log("Alerts fetched:", data); // Debugging: Check the fetched alerts
            if (data.length > 0) {
                updateAlertList(data);  // Update the alert list if data is returned
                // Show notifications for new alerts
                data.forEach(alert => showNotification(alert));
            } else {
                console.log("No new alerts.");
            }
        })
        .catch(error => {
            console.error('Error fetching alerts:', error);
        });
}

// Function to update the alert list on the page
function updateAlertList(alerts) {
    const alertContainer = document.getElementById('active-alerts-container');  // Get the correct container
    alertContainer.innerHTML = '';  // Clear any existing alerts

    // Loop through the alerts and create HTML elements for them
    alerts.forEach(alert => {
        const alertElement = document.createElement('div');
        alertElement.classList.add('alert', 'blinking-alert');  // Add blinking-alert class to active alerts
        alertElement.innerHTML = `
            <h4>${alert.type}</h4>
            <p>${alert.message}</p>
            <p><strong>Date:</strong> ${alert.timestamp}</p>
            <!-- Acknowledge button for active alerts -->
            <form method="POST" action="dashboard.php" style="display:inline;">
                <input type="hidden" name="acknowledge_alert_id" value="${alert.alert_id}">
                <button type="submit" style="background-color: green; color: white; padding: 5px 10px; border: none; cursor: pointer;">Acknowledge</button>
            </form>
        `;
        alertContainer.appendChild(alertElement);  // Append new alert to the Active Alerts container
    });
}

// Start polling for new alerts every 2 seconds
setInterval(fetchAlerts, 2000);

// Call fetchAlerts initially when the page loads
fetchAlerts();