<?php 
session_start(); 
if(!isset($_SESSION['logged_in'])) header("Location:index.php"); 

$page = $_GET['page'] ?? 'home';
?>

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Dashboard IoT</title>

<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script type="module" src="firebase-dashboard.js"></script>
<style>
* {
    transition: all 0.3s ease;
}
</style>
<style>
body { font-family: 'Poppins', sans-serif; }
</style>
</head>

<body class="bg-gradient-to-br from-slate-100 to-blue-100 flex">

<!-- SIDEBAR -->
<div class="w-64 bg-gradient-to-b from-blue-600 to-indigo-700 text-white min-h-screen p-6 shadow-xl">

    <h1 class="text-2xl font-bold mb-10 tracking-wide">
        ⚡ IoT Dryer
    </h1>

    <ul class="space-y-3 text-sm">

        <li onclick="window.location='dashboard.php?page=home'" 
            class="p-3 rounded-xl cursor-pointer hover:bg-white/20 transition duration-300 flex items-center gap-2">
            <i class="fas fa-chart-line"></i> Dashboard
        </li>

        <li onclick="window.location='dashboard.php?page=monitoring'" 
            class="p-3 rounded-xl cursor-pointer hover:bg-white/20 transition duration-300 flex items-center gap-2">
            <i class="fas fa-thermometer-half"></i> Monitoring
        </li>

        <li onclick="window.location='dashboard.php?page=kontrol'" 
            class="p-3 rounded-xl cursor-pointer hover:bg-white/20 transition duration-300 flex items-center gap-2">
            <i class="fas fa-sliders-h"></i> Kontrol
        </li>

        <li onclick="window.location='logout.php'" 
            class="p-3 rounded-xl cursor-pointer hover:bg-red-500 transition duration-300 flex items-center gap-2">
            <i class="fas fa-sign-out-alt"></i> Logout
        </li>

    </ul>
</div>

<!-- MAIN -->
<div class="flex-1 <?= ($page == 'home') ? 'p-0' : 'p-8' ?>">

<?php

if ($page == 'home') {
    include 'home.php';
} elseif ($page == 'monitoring') {
    include 'monitoring.php';
} elseif ($page == 'kontrol') {
    include 'kontrol.php';
} else {
    echo "<h2>Halaman tidak ditemukan</h2>";
}
?>

</div>

</body>
</html>
