<?php
session_start();
?>
<script>
    checkSessionStatus();
    function checkSessionStatus() {
        const xhr = new XMLHttpRequest();
        xhr.open('GET', 'ajax/session_status.php?logged_in', true);
        xhr.onload = function () {
            if (xhr.status === 200) {
                console.log(": " + xhr.responseText);
                const data = xhr.responseText;
                if (data == "0" || data == 0) {
                    window.location.href = 'logout.php';
                }
            }
        };
        xhr.send();
    }
    setInterval(checkSessionStatus, 10000); // Check session status every 1 minute

    checkClientStatus();
    function checkClientStatus() {
        const xhr = new XMLHttpRequest();
        xhr.open('GET', 'ajax/session_client_admin.php', true);
        xhr.onload = function () {
            if (xhr.status === 200) {
                console.log(": " + xhr.responseText);
                const data = xhr.responseText;
                if (data == "0" || data == 0) {

                } else if (data == "1" || data == 1) {
                    document.getElementById("settings").style.display = "none";
                    document.getElementById("clients").style.display = "none";
                    document.getElementById("sites").style.display = "none";
                    document.getElementById("settings_1").style.display = "none";
                } else {
                    document.getElementById("settings").style.display = "none";
                    document.getElementById("settings_1").style.display = "none";
                }
            }
        };
        xhr.send();
    }
</script>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>EWG - JEV</title>
    <link rel="stylesheet" href="styles/styles.css?v=<?php echo time(); ?>">
</head>

<body>

    <nav class="nav-desktop">
        <div class="nav-content">
            <span class="logo" style="display: flex;"><svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                    style="color: #86868B;">
                    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                    <circle cx="12" cy="7" r="4"></circle>
                </svg><?php echo $_SESSION['username']; ?></span>
            <div class="links">
                <a href="home.php" target="app-frame">Home</a>
                <a href="settings.php" target="app-frame" id="settings">Settings</a>
                <a href="logout.php" class="btn-logout">Logout</a>
            </div>
        </div>
    </nav>

    <main class="app-container">
        <div id="loader" class="loader-overlay">
            <div class="apple-spinner"></div>
        </div>

        <iframe name="app-frame" id="app-frame" src="home.php" onload="hideLoader()"></iframe>

        <aside class="side-nav">
            <a href="dashboard.php" target="app-frame" title="Tanks">
                <span class="side-icon">💧</span>
                <span class="side-label">Tanks</span>
            </a>
            <a href="sites.php" id="sites" target="app-frame" title="Sites">
                <div class="side-icon">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                        stroke-linecap="round" stroke-linejoin="round">
                        <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
                        <circle cx="12" cy="10" r="3"></circle>
                    </svg>
                </div>
                <span class="side-label">Sites</span>
            </a>
            <a href="clients.php" id="clients" target="app-frame" title="Clients">
                <span class="side-icon">👥</span>
                <span class="side-label">Clients</span>
            </a>
            <a href="reports.php" target="app-frame" title="Reports">
                <span class="side-icon">📊</span>
                <span class="side-label">Reports</span>
            </a>
            <a href="notifications.php" target="app-frame" title="Notifications">
                <span class="side-icon">🔔</span>
                <span class="side-label">Notifications</span>
            </a>
        </aside>
    </main>

    <nav class="nav-mobile">
        <a href="home.php" target="app-frame" class="mobile-item">
            <span class="icon">🏠</span>
            <span class="label">Home</span>
        </a>
        <a href="settings.php" target="app-frame" id="settings_1" class="mobile-item">
            <span class="icon">⚙</span>
            <span class="label">Settings</span>
        </a>
        <a href="logout.php" class="mobile-item">
            <span class="icon">📥</span>
            <span class="label">Logout</span>
        </a>
    </nav>

    <script>
        const loader = document.getElementById('loader');
        const iframe = document.getElementById('app-frame');

        // Show loader whenever a link targeting the iframe is clicked
        document.querySelectorAll('a[target="app-frame"]').forEach(link => {
            link.addEventListener('click', () => {
                loader.style.display = 'flex';
            });
        });

        // Show loader whenever a link targeting the iframe is clicked
        document.querySelectorAll('a[href^="javascript:window.location"]').forEach(link => {
            link.addEventListener('click', () => {
                loader.style.display = 'flex';
            });
        });


        function hideLoader() {
            loader.style.fadeOut = "0.5s";
            setTimeout(() => {
                loader.style.display = 'none';
            }, 300);
        }

    </script>
</body>

</html>