document.addEventListener('DOMContentLoaded', function() {
    const url = 'http://127.0.0.1:8000/sql_status_info/';
    const interval = 10000; // 10 seconds
    let timer = null;
    let timerStarted = false;
    let timerCompleted = false;
    const timerDuration = 15000; // 2 minutes in milliseconds

    function checkMysqlStatus() {
        fetch(url)
            .then(response => response.json())
            .then(data => {
                if (data.mysql > 0) {
                    if (!timerStarted) {
                        startTimer();
                    }
                } else {
                    if (timerStarted) {
                        resetTimer();
                    }
                    if (timerCompleted) {
                        hideAlert();
                    }
                }
            })
            .catch(error => console.error('Error fetching mysql status:', error));
    }

    function startTimer() {
        timerStarted = true;
        timerCompleted = false;
        timer = setTimeout(() => {
            timerCompleted = true;
            showAlert();
        }, timerDuration);
    }

    function resetTimer() {
        clearTimeout(timer);
        timerStarted = false;
        timerCompleted = false;
    }

    function showAlert() {
        document.querySelector('.sidebar-section-box').style.display = 'block';
    }

    function hideAlert() {
        document.querySelector('.sidebar-section-box').style.display = 'none';
    }

    // Check status every 10 seconds
    setInterval(checkMysqlStatus, interval);

    // Initial check
    checkMysqlStatus();
});