<?php
if (session_status() === PHP_SESSION_NONE) {
    session_start();
}
$role = $_SESSION['role'] ?? '';
?>
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ERP Kebhav Tamvan</title>
    <link rel="stylesheet" href="/kebhav_tamvan/assets/css/style.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    
    <style>
        .floating-menu-btn {
            position: fixed;
            bottom: 30px; /* Pindah ke bawah */
            right: 30px;  /* Tetap di kanan */
            z-index: 9999;
            background-color: var(--primary, #fbbf24); 
            color: var(--accent, #dc2626);
            border: none;
            border-radius: 50%;
            width: 60px; /* Disediakan lebih besar sedikit biar enak diklik */
            height: 60px;
            font-size: 28px;
            cursor: pointer;
            box-shadow: 0 4px 15px rgba(0,0,0,0.3);
            transition: transform 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .floating-menu-btn:hover { transform: scale(1.1); }
        
        .menu-overlay {
            position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
            background: rgba(0,0,0,0.5); backdrop-filter: blur(2px); z-index: 9998;
            visibility: hidden; opacity: 0; transition: 0.3s;
        }
        .menu-overlay.active { visibility: visible; opacity: 1; }
        
        .side-menu {
            position: fixed; top: 0; right: -300px; width: 280px; height: 100vh;
            background-color: white; box-shadow: -5px 0 20px rgba(0,0,0,0.2);
            z-index: 10000; transition: right 0.3s ease; display: flex; flex-direction: column;
        }
        .side-menu.active { right: 0; }
        
        .side-menu-header {
            padding: 20px; border-bottom: 2px solid var(--primary, #fbbf24);
            display: flex; justify-content: space-between; align-items: center;
        }
        .side-menu-header h2 { margin: 0; font-size: 1.2rem; color: var(--accent, #dc2626); }
        .close-btn { background: none; border: none; font-size: 30px; cursor: pointer; color: #999; }
        .close-btn:hover { color: #dc2626; }
        
        .side-nav-links { display: flex; flex-direction: column; padding: 20px; gap: 10px; }
        .side-nav-links a {
            text-decoration: none; color: #333; font-weight: bold; padding: 12px;
            border-radius: 8px; transition: 0.2s;
        }
        .side-nav-links a:hover { background-color: var(--primary, #fbbf24); color: var(--accent, #dc2626); }
        .btn-logout-side { color: #dc2626 !important; background: #fee2e2; text-align: center; }
    </style>
</head>
<body>

    <button id="menuToggle" class="floating-menu-btn">☰</button>

    <div id="menuOverlay" class="menu-overlay"></div>
    <div id="sideMenu" class="side-menu">
        <div class="side-menu-header">
            <h2>KEBHAV <span>TAMVAN</span></h2>
            <button id="closeMenu" class="close-btn">&times;</button>
        </div>
        <div class="side-nav-links">
            <?php if ($role === 'admin'): ?>
                <a href="/kebhav_tamvan/modules/admin/dashboard.php">Dashboard</a>
                <a href="/kebhav_tamvan/modules/admin/products_manage.php">Menu Produk</a>
                <a href="/kebhav_tamvan/modules/admin/ingredients_manage.php">Bahan Baku</a>
                <a href="/kebhav_tamvan/modules/admin/recipes.php">Resep</a>
                <a href="/kebhav_tamvan/modules/admin/reports.php">Laporan</a>
                <a href="employee_reports.php">Laporan Kehadiran</a>
            <?php elseif ($role === 'staff'): ?>
                <a href="/kebhav_tamvan/modules/staff/production_input.php">Input Jualan</a>
                <a href="/kebhav_tamvan/modules/staff/waste_input.php" style="color: #b45309;">⚠️ Input Bahan Rusak</a>
            <?php endif; ?>
            <hr style="border: 1px solid #eee; margin: 10px 0;">
            <a href="/kebhav_tamvan/logout.php" class="btn-logout-side">Logout</a>
        </div>
    </div>

    <script>
        document.getElementById('menuToggle').addEventListener('click', function() {
            document.getElementById('sideMenu').classList.add('active');
            document.getElementById('menuOverlay').classList.add('active');
        });
        document.getElementById('closeMenu').addEventListener('click', function() {
            document.getElementById('sideMenu').classList.remove('active');
            document.getElementById('menuOverlay').classList.remove('active');
        });
        document.getElementById('menuOverlay').addEventListener('click', function() {
            document.getElementById('sideMenu').classList.remove('active');
            document.getElementById('menuOverlay').classList.remove('active');
        });
    </script>