<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Admin Panel</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

<style>
:root{
    --green:#0b4f27;
    --green-dark:#083a1d;
    --bg:#f3f4f6;
    --white:#fff;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}

body{
    height:100vh;
    overflow:hidden;
    font-size:15px;
}

/* ===== LAYOUT ===== */
.admin-wrapper{
    display:flex;
    height:100vh;
}

/* ===== LEFT MENU ===== */
.sidebar{
    width:270px;
    background:var(--green);
    color:#fff;
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    overflow-y:auto;
}

.sidebar h2{
    text-align:center;
    padding:22px 0;
    font-size:22px;
    border-bottom:1px solid rgba(255,255,255,.15);
}

/* STATIC ADMIN INFO (UPON DASHBOARD) */
.admin-summary{
    margin:15px;
    padding:14px;
    background:#0f5132;
    border-radius:10px;
    font-size:14px;
    text-align:center;
}

.admin-summary i{
    font-size:22px;
    margin-bottom:6px;
    display:block;
}

.admin-summary span{
    font-weight:500;
}

/* MENU ITEMS */
.menu-item{
    padding:16px 25px;
    cursor:pointer;
    display:flex;
    align-items:center;
    gap:12px;
    font-size:16px;
}

.menu-item i{
    width:20px;
}

.menu-item:hover{
    background:var(--green-dark);
}

.menu-item.active{
    background:#146c43;
}

.submenu{
    display:none;
    background:#0a3d22;
}

.submenu a{
    display:block;
    padding:13px 50px;
    font-size:14.5px;
    color:#d9f3e4;
    text-decoration:none;
}

.submenu a:hover{
    background:#0f5132;
}

/* ===== RIGHT SIDE ===== */
.right-area{
    margin-left:270px;
    flex:1;
    display:flex;
    flex-direction:column;
    height:100vh;
}

/* ===== TOP BAR ===== */
.top-bar{
    height:60px;
    background:#fff;
    border-bottom:1px solid #ddd;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 25px;
}

.top-bar strong{
    font-size:16px;
}

.logout-btn{
    background:#dc3545;
    color:#fff;
    padding:9px 16px;
    border-radius:6px;
    text-decoration:none;
    font-size:14px;
}

/* ===== CONTENT FRAME ===== */
.content-frame{
    flex:1;
}

.content-frame iframe{
    width:100%;
    height:100%;
    border:none;
    background:var(--bg);
}

/* ===== MOBILE ===== */
.menu-toggle{
    display:none;
    background:var(--green);
    color:#fff;
    padding:8px 12px;
    border-radius:5px;
    cursor:pointer;
}

@media(max-width:768px){
    .sidebar{
        position:absolute;
        transform:translateX(-100%);
        transition:.3s;
        z-index:999;
    }
    .sidebar.open{
        transform:translateX(0);
    }
    .right-area{
        margin-left:0;
    }
    .menu-toggle{
        display:block;
    }
}
</style>
</head>

<body>

<div class="admin-wrapper">

    <!-- LEFT MENU -->
    <aside class="sidebar" id="sidebar">
        <h2>Admin</h2>

        <!-- STATIC INFO ABOVE DASHBOARD -->
        <div class="admin-summary">
            <i class="fa fa-user-shield"></i>
            <span>Administrator</span>
        </div>

        <div class="menu-item active" onclick="loadPage(this,'dashboard.php')">
            <i class="fa fa-chart-line"></i> Dashboard
        </div>

        <div class="menu-item" onclick="toggleMenu('productMenu',this)">
            <i class="fa fa-box"></i> Products
            <i class="fa fa-chevron-down" style="margin-left:auto;"></i>
        </div>
        <div class="submenu" id="productMenu">
            <a onclick="loadPage(null,'add_product.php')">Add Product</a>
            <a onclick="loadPage(null,'view_products.php')">View Products</a>
        </div>

        <div class="menu-item" onclick="toggleMenu('categoryMenu',this)">
            <i class="fa fa-tags"></i> Categories
            <i class="fa fa-chevron-down" style="margin-left:auto;"></i>
        </div>
        <div class="submenu" id="categoryMenu">
            <a onclick="loadPage(null,'add_category.php')">Add Category</a>
            <a onclick="loadPage(null,'view_categories.php')">Manage Categories</a>
        </div>

        <div class="menu-item" onclick="loadPage(this,'view_orders.php')">
            <i class="fa fa-receipt"></i> Orders
        </div>

        <div class="menu-item" onclick="loadPage(this,'view_users.php')">
            <i class="fa fa-users"></i> Users
        </div>
    </aside>

    <!-- RIGHT SIDE -->
    <section class="right-area">

        <!-- TOP FRAME -->
        <div class="top-bar">
            <div class="menu-toggle" onclick="toggleSidebar()">☰</div>
            <strong>Admin Panel</strong>
            <a href="logout.php" class="logout-btn">Logout</a>
        </div>

        <!-- CONTENT FRAME -->
        <div class="content-frame">
            <iframe id="contentFrame" src="dashboard.php"></iframe>
        </div>

    </section>

</div>

<script>
const frame = document.getElementById("contentFrame");
const sidebar = document.getElementById("sidebar");

function loadPage(el,page){
    frame.src = page;

    document.querySelectorAll('.menu-item').forEach(i=>{
        i.classList.remove('active');
    });
    if(el) el.classList.add('active');

    sidebar.classList.remove('open');
}

function toggleMenu(id){
    const menu = document.getElementById(id);
    document.querySelectorAll('.submenu').forEach(s=>{
        if(s!==menu) s.style.display='none';
    });
    menu.style.display = (menu.style.display==='block')?'none':'block';
}

function toggleSidebar(){
    sidebar.classList.toggle('open');
}
</script>

</body>
</html>
