<!-- header.php -->
<?php
// This file contains the common header and sidebar for IT pages
// Make sure the user is logged in and has IT privileges
if (!isset($_SESSION['user_id']) || $_SESSION['user_type'] != 'it') {
    header("Location: ../login.php");
    exit();
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo isset($page_title) ? $page_title . ' | Color Access System' : 'IT Panel | Color Access System'; ?></title>
    <link rel="icon" href="../images/logo.png" type="image/png">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: {
                        'poppins': ['Poppins', 'sans-serif'],
                    },
                    backgroundImage: {
                        'gradient-primary': 'linear-gradient(135deg, #2C5364 0%, #203A43 50%, #0F2027 100%)',
                        'gradient-side': 'linear-gradient(225deg, #2C5364 0%, #203A43 50%, #0F2027 100%)',
                    },
                    colors: {
                        primary: '#203A43',
                        secondary: '#2C5364',
                        tertiary: '#0F2027',
                        'light-blue': '#e0f7fa',
                    }
                }
            }
        }
    </script>
    <style>
        /* Additional custom styles */
        .bg-custom-blue {
            background-color: #e0f7fa;
        }
        .main-content-area {
            background-color: #e0f7fa;
        }
        
        /* Active menu styling */
        .menu-active {
            background-color: rgba(59, 130, 246, 0.3) !important;
            border-left: 4px solid #3b82f6;
            font-weight: 600;
        }
        
        .submenu-active {
            background-color: rgba(96, 165, 250, 0.25) !important;
            border-left: 3px solid #60a5fa;
            font-weight: 500;
        }
    </style>
</head>
<body class="font-poppins bg-custom-blue flex h-screen">
    <!-- Sidebar -->
    <div id="sidebar" class="bg-gradient-side text-white w-64 py-4 px-6 flex flex-col transition-all duration-300 h-full shadow-lg fixed lg:relative z-20">
        <div class="flex flex-col items-center mb-6">
            <!-- Logo above IT Panel text -->
            <div class="relative flex justify-center">
                <div class="rounded-full p-1 bg-white ring-4 ring-white">
                    <img src="../images/logo.png" alt="Logo" class="h-20 w-20 rounded-full object-cover">
                </div>
            </div>
            <h2 class="text-2xl font-bold mt-3">IT Panel</h2>
        </div>
        <div class="flex items-center justify-end lg:hidden">
            <button id="closeSidebar" class="text-white">
                <i class="fas fa-times"></i>
            </button>
        </div>

        <div class="flex-1 flex flex-col">
            <!-- Main Menu -->
            <div class="mb-4">
                <div class="text-xs uppercase font-semibold text-white/70 mb-2 pl-2">Main Menu</div>
                <ul>
                    <li class="mb-1">
                        <a href="dashboard_it.php" class="flex items-center py-2 px-3 rounded-lg hover:bg-white/20 transition-colors duration-200" data-page="dashboard_it.php">
                            <i class="fas fa-home w-5"></i>
                            <span class="ml-2">Dashboard</span>
                        </a>
                    </li>
                    <li class="mb-1">
    <!-- Pengelolaan Submenu -->
    <div class="submenu">
        <div class="flex items-center justify-between py-2 px-3 rounded-lg hover:bg-white/20 cursor-pointer transition-colors duration-200" onclick="toggleSubmenu(this)">
            <div class="flex items-center">
                <i class="fas fa-cogs w-5"></i>
                <span class="ml-2">Management Color</span>
            </div>
            <i class="fas fa-chevron-down text-xs"></i>
        </div>
        <ul class="pl-6 mt-1 hidden">
            <li class="mb-1">
                <a href="new_data_it.php" class="flex items-center py-2 px-3 rounded-lg hover:bg-white/20 transition-colors duration-200" data-page="new_data_it.php">
                    <i class="fas fa-plus-circle w-5"></i>
                    <span class="ml-2">New Data</span>
                </a>
            </li>
            <li class="mb-1">
                <a href="buyer_collection_it.php" class="flex items-center py-2 px-3 rounded-lg hover:bg-white/20 transition-colors duration-200" data-page="buyer_collection_it.php">
                    <i class="fas fa-shopping-cart w-5"></i>
                    <span class="ml-2">Buyer Collection</span>
                </a>
            </li>
            <li class="mb-1">
                <a href="color_code_it.php" class="flex items-center py-2 px-3 rounded-lg hover:bg-white/20 transition-colors duration-200" data-page="color_code_it.php">
                    <i class="fas fa-box w-5"></i>
                    <span class="ml-2">Stock Color Panel</span>
                </a>
            </li>
            <li class="mb-1">
                <a href="stok_color_it.php" class="flex items-center py-2 px-3 rounded-lg hover:bg-white/20 transition-colors duration-200" data-page="stok_color_it.php">
                    <i class="fas fa-sync-alt w-5"></i>
                    <span class="ml-2">Renew Color Panel</span>
                </a>
            </li>
            <li class="mb-1">
                <a href="add_component_panel.php" class="flex items-center py-2 px-3 rounded-lg hover:bg-white/20 transition-colors duration-200" data-page="add_component_panel.php">
                    <i class="fas fa-puzzle-piece w-5"></i>
                    <span class="ml-2">Add Components</span>
                </a>
            </li>
        </ul>
    </div>
</li>
                    <li class="mb-1">
    <div class="submenu">
        <div class="flex items-center justify-between py-2 px-3 rounded-lg hover:bg-white/20 cursor-pointer transition-colors duration-200" onclick="toggleSubmenu(this)">
            <div class="flex items-center">
                <i class="fas fa-users-cog w-5"></i>
                <span class="ml-2">Management Account</span>
            </div>
            <i class="fas fa-chevron-down text-xs"></i>
        </div>
        <ul class="pl-6 mt-1 hidden">
            <li class="mb-1">
                <a href="setting_admin.php" class="flex items-center py-2 px-3 rounded-lg hover:bg-white/20 transition-colors duration-200" data-page="setting_admin.php">
                    <i class="fas fa-user-shield w-5"></i>
                    <span class="ml-2">Akun Admin</span>
                </a>
            </li>
            <li class="mb-1">
                <a href="setting_borrower.php" class="flex items-center py-2 px-3 rounded-lg hover:bg-white/20 transition-colors duration-200" data-page="setting_borrower.php">
                    <i class="fas fa-user-tag w-5"></i>
                    <span class="ml-2">Akun Borrower</span>
                </a>
            </li>
        </ul>
    </div>
</li>
<li class="mb-1">
    <div class="submenu">
        <div class="flex items-center justify-between py-2 px-3 rounded-lg hover:bg-white/20 cursor-pointer transition-colors duration-200" onclick="toggleSubmenu(this)">
            <div class="flex items-center">
                <i class="fas fa-clipboard-check w-5"></i> <span class="ml-2">Support Approval</span>
            </div>
            <i class="fas fa-chevron-down text-xs"></i>
        </div>
        <ul class="pl-6 mt-1 hidden">
            <li class="mb-1">
                <a href="persetujuan_formulir_it.php" class="flex items-center py-2 px-3 rounded-lg hover:bg-white/20 transition-colors duration-200" data-page="persetujuan_formulir_it.php">
                    <i class="fas fa-file-signature w-5"></i> <span class="ml-2">Daftar Persetujuan</span>
                </a>
            </li>
            <li class="mb-1">
                <a href="lacak_peminjaman_it.php" class="flex items-center py-2 px-3 rounded-lg hover:bg-white/20 transition-colors duration-200" data-page="lacak_peminjaman_it.php">
                    <i class="fas fa-search-location w-5"></i> <span class="ml-2">Lacak Peminjaman</span>
                </a>
            </li>
            <li class="mb-1">
                <a href="history_pengembalian.php" class="flex items-center py-2 px-3 rounded-lg hover:bg-white/20 transition-colors duration-200" data-page="history_pengembalian.php">
                    <i class="fas fa-history w-5"></i> <span class="ml-2">Lacak Pengembalian</span>
                </a>
            </li>
            <li class="mb-1">
                <a href="cek_code_barang.php" class="flex items-center py-2 px-3 rounded-lg hover:bg-white/20 transition-colors duration-200" data-page="cek_code_barang.php">
                    <i class="fas fa-barcode w-5"></i> <span class="ml-2">Lacak Code Barang</span>
                </a>
            </li>
            <li class="mb-1">
                <a href="print_data.php" class="flex items-center py-2 px-3 rounded-lg hover:bg-white/20 transition-colors duration-200" data-page="print_data.php">
                    <i class="fas fa-print w-5"></i> <span class="ml-2">Print Data</span>
                </a>
            </li>
            <li class="mb-1">
                <a href="change_date.php" class="flex items-center py-2 px-3 rounded-lg hover:bg-white/20 transition-colors duration-200" data-page="change_date.php">
                    <i class="fas fa-calendar-alt w-5"></i> <span class="ml-2">Change Date</span>
                </a>
            </li>
            <li class="mb-1">
                <a href="change_description.php" class="flex items-center py-2 px-3 rounded-lg hover:bg-white/20 transition-colors duration-200" data-page="change_description.php">
                    <i class="fas fa-file-alt w-5"></i> <span class="ml-2">Change Desc Master Color</span>
                </a>
            </li>
            <li class="mb-1">
                <a href="master_list_data.php" class="flex items-center py-2 px-3 rounded-lg hover:bg-white/20 transition-colors duration-200" data-page="master_list_data.php">
                    <i class="fas fa-list-ul w-5"></i> <span class="ml-2">List Master Panel</span>
                </a>
            </li>
            <li class="mb-1">
                <a href="rename_rack.php" class="flex items-center py-2 px-3 rounded-lg hover:bg-white/20 transition-colors duration-200" data-page="rename_rack.php">
                    <i class="fas fa-list-ul w-5"></i> <span class="ml-2">Rename Rack</span>
                </a>
            </li>
            <li class="mb-1">
                <a href="reset_color_data.php" class="flex items-center py-2 px-3 rounded-lg hover:bg-white/20 transition-colors duration-200" data-page="reset_color_data.php">
                    <i class="fas fa-list-ul w-5"></i> <span class="ml-2">Reset Color Panel</span>
                </a>
            </li>
        </ul>
    </div>
</li>
                </ul>
            </div>
        </div>
    </div>

    <!-- Main Content -->
    <div class="flex-1 flex flex-col min-h-screen">
        <!-- Top Navigation Bar -->
        <header class="bg-white shadow-sm z-10">
            <div class="flex items-center justify-between px-6 py-3">
                <div class="flex items-center">
                    <button id="toggleSidebar" class="text-gray-600 hover:text-primary lg:hidden">
                        <i class="fas fa-bars text-xl"></i>
                    </button>
                    <h1 class="text-xl font-semibold ml-4 text-gray-800"><?php echo $page_title ?? 'Dashboard'; ?></h1>
                </div>
                
                <!-- User Profile Dropdown -->
                <div class="relative">
                    <button id="profileDropdown" class="flex items-center px-3 py-2 rounded-full bg-gray-100 hover:bg-gray-200 transition-colors duration-200">
                        <div class="flex items-center">
                            <div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center text-white">
                                <?php echo isset($_SESSION['username']) ? strtoupper(substr($_SESSION['username'], 0, 1)) : 'IT'; ?>
                            </div>
                            <span class="ml-2 font-medium text-sm text-gray-700 hidden md:block">
                                <?php echo htmlspecialchars($_SESSION['username'] ?? 'IT User'); ?>
                            </span>
                            <i class="fas fa-chevron-down ml-2 text-xs text-gray-500"></i>
                        </div>
                    </button>
                    
                    <!-- Dropdown Menu -->
                    <div id="profileMenu" class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg py-2 z-20 hidden">
                        <div class="px-4 py-2 text-sm text-gray-500 border-b border-gray-200">
                            IT Department
                        </div>
                        <a href="profile_it.php" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                            <i class="fas fa-user mr-2 text-primary"></i> Profile
                        </a>
                        <a href="pembaharuan_password_it.php" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                            <i class="fas fa-key mr-2 text-primary"></i> Ubah Password
                        </a>
                        <div class="border-t border-gray-200 my-1"></div>
                        <a href="../logout.php" class="block px-4 py-2 text-sm text-red-600 hover:bg-gray-100">
                            <i class="fas fa-sign-out-alt mr-2"></i> Logout
                        </a>
                    </div>
                </div>
            </div>
        </header>