<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Product Management</title>
    <link rel="stylesheet" href="styles/product.css">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://www.gstatic.com/firebasejs/9.6.1/firebase-app-compat.js"></script>
    <script src="https://www.gstatic.com/firebasejs/9.6.1/firebase-auth-compat.js"></script>
    <script src="https://www.gstatic.com/firebasejs/9.6.1/firebase-firestore-compat.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
</head>
<body>
    
    <header class="header">
        <div class="header-left">
            <i class="fas fa-bars sidebar-toggle" id="sidebarToggle"></i>
            <h1>
                <span class="ins">INS</span><span class="scipe">CIPE</span>–Managing Products
            </h1>

        </div>
        <div class="header-right">
            <div class="account-circle" title="Account" onclick="navigateTo('profile')">
                <i class="fas fa-user"></i>
            </div>
        </div>
    </header>

    
    <nav class="sidebar-left" id="leftSidebar">
        <div class="sidebar-item active">
            <i class="fas fa-home"></i>
            <span>Home</span>
        </div>
        <div class="sidebar-item" onclick="openAddProductPopup()" title="Add New Product">
            <i class="fas fa-cart-plus"></i>
            <span>Add Products</span>
        </div>
        <div class="sidebar-item" onclick="navigateTo('listedproducts')">
            <i class="fas fa-boxes"></i>
            <span>Listed Products</span>
        </div>
        <div class="sidebar-item" onclick="navigateTo('analytics')">
            <i class="fas fa-chart-pie"></i>
            <span>Analytics</span>
        </div>
        <div class="sidebar-item" onclick="navigateTo('orders_Received')">
            <i class="fas fa-shopping-bag"></i>
            <span>Received Orders</span>
        </div>
        <div class="sidebar-item" onclick="navigateTo('help')">
            <i class="fas fa-life-ring"></i>
            <span>Help</span>
        </div>
        <div class="sidebar-item" onclick="navigateTo('GUID')">
            <i class="fas fa-fingerprint"></i>
            <span>GUID</span>
        </div>

    </nav>

    
    <div class="main-content">
        <main>
            <div class="container" id="productList">
                <h2>Your Products</h2>
                <p>List of products will be displayed here.</p>
            </div>
        </main>
    </div>

    
    <div class="loader-overlay" id="loader">
        <div class="loader"></div>
    </div>
    <script>
        function navigateTo(page) {
            window.location.href = page;
        }

        // Sidebar Toggle
        document.getElementById('sidebarToggle').addEventListener('click', function() {
            document.getElementById('leftSidebar').classList.toggle('active');
        });

        // Close sidebar when clicking outside (for PC)
        document.addEventListener("click", function (event) {
            const sidebar = document.getElementById("leftSidebar");
            const toggleButton = document.getElementById("sidebarToggle");
            if (!sidebar.contains(event.target) && !toggleButton.contains(event.target)) {
                sidebar.classList.remove("active");
            }
        });
    </script>
    <script src="Scripts/ownproduct.js"></script>
</body>
</html>

    <script>
      console.clear();
    </script>