<?php
include "auth.php";
include "db.php";

$sql = "
SELECT
category,
COUNT(*) AS total
FROM products
GROUP BY category
ORDER BY category ASC
";

$result = $conn->query($sql);
?>

<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Categories</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">


  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Playfair+Display:wght@500;600;700&display=swap" rel="stylesheet">

<link rel="stylesheet" href="admin.css">

</head>

<body>

<div class="admin-container">
<button class="menu-toggle" id="menu-toggle">
    <i class="fa-solid fa-bars"></i>
</button>

  <aside class="sidebar" id="sidebar">

    <h2 class="logo">Maria Admin</h2>

    <nav>
      <a href="dashboard.php">Dashboard</a>
      <a href="addproducts.php">Add Product</a>
      <a href="add_offer.php">Add Offer</a>
      <a href="offers.php">Offers</a>
      <a href="products.php">Products</a>
      <a href="categoriesadmin.php" class="active">Categories</a>
      <a href="settings.php">Settings</a>
      <a href="logout.php" class="logout">Logout</a>
    </nav>

  </aside>

  
  <main class="main-content">

    <h1>Product Categories</h1>

    <div class="table-card">

      <table class="admin-table">

        <thead>

          <tr>

            <th>Category</th>

            <th>Total Products</th>

            <th>Action</th>

          </tr>

        </thead>

        <tbody>

        <?php while($row = $result->fetch_assoc()): ?>

          <tr>

            <td>
              <?= htmlspecialchars($row['category']) ?>
            </td>

            <td>
              <?= $row['total'] ?>
            </td>

            <td>

              <a
              href="category_products.php?category=<?= urlencode($row['category']) ?>"
              class="edit">

                View Products

              </a>

            </td>

          </tr>

        <?php endwhile; ?>

        </tbody>

      </table>

    </div>

  </main>

</div>
  <script>
const menuToggle = document.getElementById("menu-toggle");
const sidebar = document.getElementById("sidebar");
const icon = menuToggle.querySelector("i");

menuToggle.addEventListener("click", function(){

    sidebar.classList.toggle("active");

    if(sidebar.classList.contains("active")){

        icon.classList.remove("fa-bars");
        icon.classList.add("fa-xmark");

    }else{

        icon.classList.remove("fa-xmark");
        icon.classList.add("fa-bars");

    }

});

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