// 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
            } 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();