<?php 
if(!isset($_SESSION)) { 
  session_start(); 
  include('includes/dbcon.php');
}

$sql = "SELECT item_id,item_name, description, sales_price,image_path FROM item_master WHERE active_status = 1";
 $result1 = mysqli_query($con, $sql);


?>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Product Catalog</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome for icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">


    <!-- jQuery (Required for Bootstrap 4) -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- Libraries Stylesheet -->
    <!-- Libraries Stylesheet -->
    <link href="lib/animate/animate.min.css" rel="stylesheet">
    <link href="lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">


    <!-- Custom CSS -->
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <!-- Header Section -->
    <header class="custom-header">
        <div class="container">
            <div class="row">
                <!-- Left Side: Phone and Email -->
                <div class="col-md-6">
                    <span class="me-3"><i class="fas fa-phone"></i> +1 234 567 890</span>
                    <span><i class="fas fa-envelope"></i> info@example.com</span>
                </div>
                <!-- Right Side: Track Order -->
                <div class="col-md-6 text-end">
                    <a href="login.php" class="text-decoration-none me-3 black-text"><i class="fas fa-user"></i> Login</a>

                </div>
            </div>
        </div>
    </header>

    <!-- Navigation Section -->
    <nav class="bg-white py-3 shadow-sm">
        <div class="container">
            <div class="row align-items-center">
                <!-- Left Side: Company Icon -->
                <div class="col-md-3">
                    <img src="img/clogo.png" alt="Company Logo" class="img-fluid" style="width: 50px; height: auto;">
                </div>
                <!-- Middle Area: Search Bar -->
                <div class="col-md-6">
                    <form class="d-flex">
                        <input class="form-control me-2" type="search" placeholder="Search products..." aria-label="Search">
                        <button class="btn btn-outline-primary" type="submit"><i class="fas fa-search"></i></button>
                    </form>
                </div>
                <!-- Right Side: Account Login and Cart -->
                <div class="col-md-3 text-end">
                   <a href="#" class="text-decoration-none me-3 text-dark">
    <i class="fas fa-heart"></i> WishList
</a>

                    <a href="cart.php" class="text-decoration-none"><i class="fas fa-shopping-cart"></i> Cart</a>

                </div>
            </div>
        </div>
    </nav>

    <!-- Menu Section -->
<section class="menu-section sticky-top" style="background-color: #ffcc00; padding: 5px 0;">



    <div class="container">
        <div class="row">
            <div class="col-12">
                <nav class="navbar navbar-expand-lg navbar-light p-0">
                    <!-- Toggle Button for Mobile -->
                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>

                    <!-- Menu Items -->
                    <div class="collapse navbar-collapse" id="navbarNav">
                        <ul class="navbar-nav me-auto">
    <li class="nav-item dropdown position-static">
        <a class="nav-link dropdown-toggle" href="#" id="allCategoriesDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            All Categories
        </a>
        <div class="dropdown-menu custom-dropdown mt-0 p-3" aria-labelledby="allCategoriesDropdown">
            <div class="row">
                <?php
               // include 'db_connection.php'; // Include DB connection

                $query = "SELECT cat_id,cat_des FROM item_category where cat_active=1"; // Adjust based on your DB structure
                $result = mysqli_query($con, $query);
                $categories = [];

                while ($row = mysqli_fetch_assoc($result)) {
                    $categories[] = $row['cat_des'];
                }

                $chunks = array_chunk($categories, 2); // Split into columns

                foreach ($chunks as $category_set) {
                    echo '<div class="col-md-3">';
                    foreach ($category_set as $category) {
                        echo '<a class="dropdown-item" href="#">' . htmlspecialchars($category) . '</a>';
                    }
                    echo '</div>';
                }
                ?>
            </div>
        </div>
    </li>
</ul>



                          <ul class="navbar-nav ms-auto">
                            <li class="nav-item">
                                <a class="nav-link" href="#">Home</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Contact Us</a>
                            </li>
                        </ul>
                    </div>
                </nav>
            </div>
        </div>
    </div>
</section>


    <main class="container my-5">
        <div class="row">
            <div class="col-12">
                <h1>Welcome to Our Product Catalog</h1>
                <p>This is a sample product catalog page. You can add your products here.</p>
            </div>
        </div>
    </main>
 <!-- Product Listing Section -->
   <!-- Product Listing Section -->
<div class="container mt-4">
    <div class="product-listing">
        <?php while ($row1 = mysqli_fetch_assoc($result1)) { ?>
            <div class="product">
                <div class="product-image">
   <img src="productimg/<?php echo htmlspecialchars($row1['image_path']); ?>" alt="<?php echo htmlspecialchars($row1['item_name']); ?>">

    <!-- Hover Icons -->
    <div class="hover-icons">
        <i class="fas fa-heart"></i>        
            <i class="fas fa-eye"></i>       
         <a href="product-details.php?id=<?php echo urlencode($row1['item_id']); ?>" class="text-decoration-none">
        <i class="fas fa-shopping-cart"></i> </a>
    </div>
</div>
                <h3><?php echo htmlspecialchars($row1['item_name']); ?></h3>
                <p><?php echo htmlspecialchars($row1['description']); ?></p>
                <p><strong>Price:</strong> Rs. <?php echo number_format($row1['sales_price'], 2); ?></p>
            </div>
        <?php } ?>
    </div>
</div>
        <!-- Add more products as needed -->
    </div>


    <!-- Main Content Section -->


    <!-- Bootstrap JS and dependencies -->
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

</body>
</html>

<script>
document.addEventListener('click', function (event) {
    const dropdowns = document.querySelectorAll('.dropdown-menu');
    dropdowns.forEach(dropdown => {
        if (!event.target.closest('.dropdown')) {
            dropdown.classList.remove('show');
        }
    });
});
</script>




