<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Product Editor</title>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="styles/styles.css">

   
</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> Listed 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>
    
    <div class="search-container" style="margin-bottom: 20px;">
        <input type="text" id="searchBar" placeholder="Search products by name..." onkeyup="searchProducts()">
    </div>
    
    <nav class="sidebar-left" id="leftSidebar">
        <div class="sidebar-item" onclick="navigateTo('Home')">
            <i class="fas fa-home"></i>
            <span>Home</span>
        </div>
        <div class="sidebar-item active">
            <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-book"></i>
            <span>GUID</span>
        </div>
    </nav>

    
    <div id="productsList"></div>

    <div id="overlay" class="overlay" onclick="closePopup()"></div>
    <div id="editPopup" class="popup"></div>
    <div id="loader"><div class="spinner"></div></div>

    <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="Scripts/products.js"></script>
    <script src="Scripts/listedproduct.js"></script>
    <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>
</body>
</html>
    <script>
      console.clear();
    </script>