<?php
require_once $_SERVER['DOCUMENT_ROOT'] . '/nabila/includes/config.php';
require_once $_SERVER['DOCUMENT_ROOT'] . '/nabila/includes/functions.php';

// Cek login
cek_login();

// Get current user and pengaturan
$user = get_current_user_data();
$pengaturan = get_pengaturan();
?>
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SI Penggajian & Absensi - <?php echo htmlspecialchars($pengaturan['nama_perusahaan']); ?></title>
    
    <!-- Google Fonts: Inter -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    
    <!-- Tailwind CSS v3 -->
    <script src="https://cdn.tailwindcss.com"></script>
    
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <!-- jQuery -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
    
    <!-- HTML5 QR Scanner -->
    <script src="https://unpkg.com/html5-qrcode@2.0.9/dist/html5-qrcode.min.js"></script>

    <!-- Custom CSS for Modern UI -->
    <style>
        /* Palet Warna Dim Mode (Tidak terlalu gelap) */
        body { font-family: 'Inter', sans-serif; background-color: #1E293B; /* slate-800 */ color: #CBD5E1; /* slate-300 */ }
        .glass-effect { background-color: rgba(30, 41, 59, 0.6); /* slate-800 with opacity */ -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.1); }
        .sidebar { transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); height: 100vh; position: fixed; z-index: 40; width: 260px; }
        @media (max-width: 1023px) {
            .sidebar { transform: translateX(-100%); }
            .sidebar.show { transform: translateX(0); }
            .main-content { padding-top: 80px; width: 100%; }
        }
        @media (min-width: 1024px) {
            .sidebar { transform: translateX(0); }
            .main-content { margin-left: 260px; padding-top: 80px; }
            .top-header { left: 260px; }
        }
        #sidebar-nav::-webkit-scrollbar { width: 6px; }
        #sidebar-nav::-webkit-scrollbar-track { background-color: transparent; }
        #sidebar-nav::-webkit-scrollbar-thumb { background-color: #475569; /* slate-600 */ border-radius: 6px; }
        .sidebar-link { transition: all 0.2s ease-in-out; }
        .sidebar-link.active { background-color: rgba(59, 130, 246, 0.2); color: #F8FAFC; /* slate-50 */ border-left-color: #3B82F6; /* sky-500 */ }
        .sidebar-link.active i { color: #3B82F6; /* sky-500 */ }
        .dropdown-menu { transition: opacity 0.2s ease-out, transform 0.2s ease-out; transform-origin: top right; }
        .dropdown-menu.hidden { opacity: 0; transform: scale(0.95) translateY(-10px); pointer-events: none; }
    </style>
</head>
<body class="antialiased">
    <!-- Wrapper Utama -->
    <div class="relative min-h-screen lg:flex">
        <!-- Sidebar akan di-include di sini -->
        <?php include 'sidebar.php'; ?>

        <!-- Overlay untuk Mobile -->
        <div id="sidebarOverlay" class="fixed inset-0 z-30 bg-black/60 lg:hidden hidden"></div>

        <!-- Konten Utama -->
        <div class="main-content flex-1">
            <!-- Header Atas (Top Bar) -->
            <header class="fixed top-0 right-0 h-20 z-20 top-header glass-effect w-full lg:w-[calc(100%-260px)]">
                <div class="flex items-center justify-between h-full px-4 sm:px-6">
                    <div class="flex items-center">
                        <!-- Tombol ini HANYA MUNCUL di layar kecil (LG-breakpoint Tailwind) -->
                        <button id="sidebarToggle" class="lg:hidden text-slate-300 hover:text-white focus:outline-none mr-4">
                            <i class="fas fa-bars fa-lg"></i>
                        </button>
                        <h1 id="page-title" class="text-xl font-semibold text-slate-200 hidden sm:block">Dashboard</h1>
                    </div>
                    <div class="flex items-center space-x-4">
                        <!--<div class="relative hidden md:block">-->
                        <!--     <span class="absolute inset-y-0 left-0 flex items-center pl-3"><i class="fas fa-search text-slate-400"></i></span>-->
                        <!--    <input type="text" placeholder="Cari..." class="w-full pl-10 pr-4 py-2 rounded-lg bg-slate-700 border border-slate-600 focus:outline-none focus:ring-2 focus:ring-sky-500 text-slate-300">-->
                        <!--</div>-->
                        <!--<button class="relative text-slate-400 hover:text-white transition-colors duration-200">-->
                        <!--    <i class="fas fa-bell fa-lg"></i>-->
                        <!--    <span class="absolute -top-1 -right-1 flex h-3 w-3">-->
                        <!--        <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-sky-400 opacity-75"></span>-->
                        <!--        <span class="relative inline-flex rounded-full h-3 w-3 bg-sky-500"></span>-->
                        <!--    </span>-->
                        <!--</button>-->
                        <div class="relative">
                            <button id="userMenuButton" class="flex items-center space-x-3 focus:outline-none">
                                <span class="hidden sm:inline font-medium text-slate-300"><?php echo htmlspecialchars($user['nama']); ?></span>
                                <div class="w-10 h-10 rounded-full bg-sky-500 flex items-center justify-center text-white font-bold">
                                    <?php echo strtoupper(substr($user['nama'], 0, 1)); ?>
                                </div>
                            </button>
                            <div id="userDropdown" class="dropdown-menu hidden absolute right-0 mt-3 w-56 rounded-lg shadow-lg glass-effect p-1">
                                <div class="px-3 py-2">
                                    <p class="text-sm font-semibold text-white"><?php echo htmlspecialchars($user['nama']); ?></p>
                                    <p class="text-xs text-slate-400 truncate"><?php echo htmlspecialchars($user['email'] ?? 'Tidak ada email'); ?></p>
                                </div>
                                <div class="border-t border-slate-600/50 my-1"></div>
                                <a href="<?php echo BASE_URL; ?>/modules/auth/ganti_password.php" class="flex items-center px-3 py-2 text-sm text-slate-300 hover:bg-slate-700 rounded-md transition-colors"><i class="fas fa-key w-6 text-slate-400"></i><span>Ganti Password</span></a>
                                <div class="border-t border-slate-600/50 my-1"></div>
                                <a href="<?php echo BASE_URL; ?>/modules/auth/logout.php" class="flex items-center px-3 py-2 text-sm text-red-400 hover:bg-red-500/20 rounded-md transition-colors"><i class="fas fa-sign-out-alt w-6"></i><span>Logout</span></a>
                            </div>
                        </div>
                    </div>
                </div>
            </header>
            <!-- Area Konten Dinamis -->
            <main class="p-4 sm:p-6 lg:p-8">
                <!-- Konten halaman akan dimulai di sini -->
