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

$today = date('Y-m-d');

$sql = "
SELECT
offers.*,
products.name,
(
SELECT image_path
FROM product_images
WHERE product_id = products.id
LIMIT 1
) AS image
FROM offers
JOIN products
ON offers.product_id = products.id
ORDER BY offers.end_date DESC
";

$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">
  <meta name="description"
content="Maria Curtains offers quality curtains, sheers, curtain rods, mats and home décor in Thika, Kenya. Affordable prices, custom fitting and professional installation.">
  
<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 href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Playfair+Display:wght@500;600;700&display=swap" rel="stylesheet">
<title>Offers Management</title>

<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" class="active">Offers</a>
      <a href="products.php">Products</a>
      <a href="categoriesadmin.php">Categories</a>
      <a href="settings.php">Settings</a>
      <a href="logout.php" class="logout">Logout</a>
    </nav>

  </aside>

  
  <main class="main-content">

    <h1>Offers Management</h1>

    <div class="table-card">

      <table class="admin-table">

        <thead>

          <tr>

            <th>Image</th>
            <th>Product</th>
            <th>Discount Title</th>
            <th>Discount Text</th>
            <th>Start Date</th>
            <th>End Date</th>
            <th>Status</th>
            <th>Actions</th>

          </tr>

        </thead>

        <tbody>

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

          <tr>

            <td>

              <?php if($row['image']): ?>

                <img
                src="../uploads/<?= $row['image'] ?>"
                class="table-img">

              <?php else: ?>

                No Image

              <?php endif; ?>

            </td>

            <td>

              <?= htmlspecialchars($row['name']) ?>

            </td>

            <td>

              <?= $row['offer_title'] ?>

            </td>

            <td>

              <?= $row['offer_text'] ?>

            </td>

            <td>

              <?= $row['start_date'] ?>

            </td>

            <td>

              <?= $row['end_date'] ?>

            </td>

            <td>

              <?php if($row['end_date'] >= $today): ?>

                <span class="status-active">

                  Active

                </span>

              <?php else: ?>

                <span class="status-expired">

                  Expired

                </span>

              <?php endif; ?>

            </td>

            <td class="actions">

<a
href="edit_offer.php?id=<?= $row['id'] ?>"
class="edit">

Edit

</a>

<a
href="delete_offer.php?id=<?= $row['id'] ?>"
class="delete"
onclick="return confirm('Delete this offer?')">

Delete

</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>