<?php
require __DIR__ . '/../helpers/auth.php';
auth_check();
$user = auth_user();
?>

<?php
$menu  = 'dashboard';
$title = 'Dashboard';
require __DIR__ . '/../api/monitoring/koneksi.php';
?>
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title><?= $title ?></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSS -->
    <link rel="stylesheet" href="../assets/css/dashboard.css">

    <link
    rel="stylesheet"
    href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
    />

</head>

<body>

<div class="app">

    <!-- OVERLAY -->
    <div class="overlay" id="overlay" onclick="toggleSidebar()"></div>

    <!-- SIDEBAR -->
    <?php include '../layout/sidebar.php'; ?>

    <!-- MAIN -->
    <main class="main">

        <!-- HEADER -->
        <?php include '../layout/header.php'; ?>

        <!-- SUMMARY -->
        <section class="summary">
            <div class="summary-card green">
                <p>Devices Installed</p>
                <h2 id="total_pc">-</h2>
                <span id="online_pc">Online: -</span>
            </div>
        </section>


        <!-- MAP -->
        <section class="map-section">
            <div id="map"></div>
        </section>
        <!-- FILTER SITE -->
        <section class="filter-bar">
            <label for="siteFilter">Filter Site:</label>
            <select id="siteFilter">
                <option value="all">All Site</option>
            </select>
        </section>

        <!-- DEVICE GRID (SITE GROUPING ADA DI SINI) -->
        <section class="device-grid" id="pcGrid">
            <!-- Diisi oleh dashboard1.js -->
        </section>

    </main>
</div>

<!-- SOUND ALERT -->
<audio id="alertSound" src="../assets/sound/alert.mp3" preload="auto"></audio>

<!-- SENSOR MODAL -->
<div id="sensorModal" class="modal">
    <div class="modal-content">
        <span class="close" onclick="closeModal()">&times;</span>
        <h2 id="modalTitle"></h2>
        <div id="modalBody"></div>
    </div>
</div>


<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<!-- ===============================
     GLOBAL JS (WAJIB)
================================ -->
<script src="../assets/js/layout.js"></script>

<!-- ===============================
     DASHBOARD JS
================================ -->
<script src="../assets/js/dashboard1.js"></script>

<script src="../assets/js/map.js"></script>




</body>
</html>
