<?php
include 'db_connection.php'; // Include your database connection

// Fetch logo from settings table
$logoQuery = "SELECT logo FROM settings LIMIT 1";
$logoResult = $conn->query($logoQuery);

$logoPath = '';
if ($logoResult && $logoResult->num_rows > 0) {
    $logoRow = $logoResult->fetch_assoc();
    // Ensure the path is correctly prefixed
    $logoPath = '/csms/admin/uploads/' . htmlspecialchars($logoRow['logo']);
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Social Circle Dashboard</title>
    <link rel="stylesheet" href="styles.css">
    <!-- Include an icon library -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style type="text/css">
  body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f0f0f0;
    overflow: hidden; /* Prevent vertical scrolling */
    overflow-y: auto; /* Enable vertical scrolling */
}
   header {
            background-color: #34495e; /* Dark background for header */
            color: white;
            padding: 10px 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 2;
        }

.header-left, .header-center, .header-right {
    display: flex;
    align-items: center;
}

  .header-left img {
            height: 40px;
            margin-right: 20px;
        }
        #search-box {
            padding: 5px;
            border-radius: 4px;
            border: none;
            width: 200px;

        }

.header-center .icon, .header-right .icon {
    margin: 0 10px;
    cursor: pointer;
    position: relative;
}

.header-right .icon .dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: white;
    border: 1px solid #ddd;
    padding: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    z-index: 1;
}

.header-right .icon:hover .dropdown {
    display: block;
}

.dropdown-item {
    padding: 5px 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #000;
}

.dropdown-item i {
    margin-right: 8px;
}

.dropdown-item:hover {
    background-color: #f0f0f0;
}

.header-center a.dropdown-item {
    margin: 0 10px;
    cursor: pointer;
    text-decoration: none;
    color: white;
    display: flex;
    align-items: center;
}

.header-center a.dropdown-item:hover {
    color: #000; /* Slightly lighter color on hover */
}

  aside {
            width: 250px;
            height: calc(100% - 50px); /* Adjust height based on header height */
            background-color: #34495e;
            position: absolute;
            top: 50px; /* Adjust based on header height */
            left: 0;
            z-index: 1;
            overflow-x: hidden;
            padding-top: 20px;
            transition: width 0.3s;
        }



       main {
            margin-left: 250px;
            padding: 20px;
            padding-top: 70px; /* Adjust based on header height */
            min-height: calc(100vh - 100px); /* Adjust based on header and footer height */
            box-sizing: border-box;
        }
   footer {
            background-color: #34495e;
            color: white;
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: fixed;
            bottom: 0;
            left: 250px; /* Align with the right edge of the aside */
            right: 0;
            padding: 10px 20px;
            box-sizing: border-box;
        }

   .container {
            width: 100%;
            margin: 0 auto;
            padding: 20px;
        }

    header, aside, main, footer {
        box-sizing: border-box;
    }

    </style>
</head>
<body>
     <header>
        <div class="header-left">
           <a href="index.php">
                <img src="<?php echo $logoPath; ?>" alt="Logo">
            </a>
            <div class="search-box">
                <input type="text" placeholder="Search">
            </div>
        </div>
        <div class="header-center">
            <a href="#" class="dropdown-item"><i class="fas fa-home"></i> Home</a>
            <a href="creat_group.php" class="dropdown-item"><i class="fas fa-users"></i> Groups</a>
            <a href="#" class="dropdown-item"><i class="fas fa-envelope"></i> Messages</a>
        </div>
        <div class="header-right">
            <div class="icon menu">
                <i class="fas fa-bars"></i> Menu
                <div class="dropdown">
                    <a href="#" class="dropdown-item"><i class="fas fa-plus"></i> Create</a>
                    <a href="#" class="dropdown-item"><i class="fas fa-pen"></i> Post</a>
                    <a href="#" class="dropdown-item"><i class="fas fa-book"></i> Story</a>
                    <a href="#" class="dropdown-item"><i class="fas fa-birthday-cake"></i> Life Event</a>
                    <a href="#" class="dropdown-item"><i class="fas fa-video"></i> Reel</a>
                    <a href="#" class="dropdown-item"><i class="fas fa-flag"></i> Page</a>
                    <a href="#" class="dropdown-item"><i class="fas fa-users"></i> Group</a>
                    <a href="#" class="dropdown-item"><i class="fas fa-calendar-alt"></i> Event</a>
                </div>
            </div>
            <div class="icon"><i class="fas fa-bell"></i> Notification</div>
            <div class="icon user-avatar">
                <i class="fas fa-user"></i> Avatar
                <div class="dropdown">
                    <a href="#" class="dropdown-item"><i class="fas fa-cog"></i> Settings</a>
                    <a href="#" class="dropdown-item"><i class="fas fa-user-shield"></i> Privacy</a>
                    <a href="#" class="dropdown-item"><i class="fas fa-adjust"></i> Display</a>
                    <a href="#" class="dropdown-item"><i class="fas fa-universal-access"></i> Accessibility</a>
                    <a href="#" class="dropdown-item"><i class="fas fa-sign-out-alt"></i> Log Out</a>
                </div>
            </div>
        </div>
    </header>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
    // Get all elements with class 'icon' that have a dropdown
    const dropdownIcons = document.querySelectorAll('.header-right .icon');

    dropdownIcons.forEach(icon => {
        icon.addEventListener('click', function (event) {
            // Prevent the click from closing the dropdown immediately
            event.stopPropagation();

            // Close any open dropdowns
            closeAllDropdowns();

            // Toggle the current dropdown
            const dropdown = icon.querySelector('.dropdown');
            if (dropdown) {
                dropdown.style.display = dropdown.style.display === 'block' ? 'none' : 'block';
            }
        });
    });

    // Close dropdowns when clicking outside
    document.addEventListener('click', function () {
        closeAllDropdowns();
    });

    // Function to close all dropdowns
    function closeAllDropdowns() {
        dropdownIcons.forEach(icon => {
            const dropdown = icon.querySelector('.dropdown');
            if (dropdown) {
                dropdown.style.display = 'none';
            }
        });
    }
});

    </script>
</body>
</html>
