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

$products = $conn->query("SELECT * FROM products");
?>


<!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="admin.css">
<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>Admin Dashboard | Add Offer</title>
</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" class="active">Add Offer</a>
      <a href="offers.php">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>Add New Offer</h1>
<div class="admin-form">


    <form action="save_offer.php" method="POST">

        <label for= "product_id">Select Product</label>
        <select name="product_id" id="product_id" required>
            <option value="">-- Choose Product --</option>

            <?php while($product = $products->fetch_assoc()): ?>
                <option value="<?= $product['id'] ?>">
                    <?= $product['name'] ?>
                </option>
            <?php endwhile; ?>

        </select>

        <label for="offer_title">Offer Title</label>
        <input type="text" name="offer_title" id="offer_title" placeholder="e.g. Summer Discount">

        <label for="badge">Badge</label>
        <input type="text" name="badge" id="badge" placeholder="20% OFF / SALE / BUNDLE">

        <div class="small-row">
            <div>
                <label for="old_price">Old Price</label>
                <input type="number" name="old_price" id="old_price" placeholder="Old Price">
            </div>

            <div>
                <label for="new_price">New Price</label>
                <input type="number" name="new_price" id="new_price" placeholder="New Price">
            </div>
        </div>

        <label for="offer_text">Description</label>
        <textarea name="offer_text" id="offer_text" placeholder="Offer description..."></textarea>

        <div class="small-row">
            <div>
                <label for="start_date">Start Date</label>
                <input type="date" name="start_date" id="start_date">
            </div>

            <div>
                <label for="end_date">End Date</label>
                <input type="date" name="end_date" id="end_date">
            </div>
        </div>

        <button type="submit">
            Save Offer
        </button>

    </form>

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