<?php

include "auth.php";
include "db.php";

if (!isset($_SESSION['admin'])) {
    header("Location: login.php");
    exit();
}

if (isset($_POST['submit'])) {

    $name = $_POST['name'];
    $price = $_POST['price'];
    $category = $_POST['category'];
    $description = $_POST['description'];
    $stock = $_POST['stock'];

    $sql = "INSERT INTO products (name, price, category, description, stock)
            VALUES ('$name', '$price', '$category', '$description', '$stock')";

    $conn->query($sql);

    $product_id = $conn->insert_id;


    if (!empty($_POST['colors'])) {

        foreach ($_POST['colors'] as $color) {

            $color = trim($color);

            if ($color != "") {

                $conn->query("
                    INSERT INTO product_colors (product_id, color)
                    VALUES ('$product_id', '$color')
                ");
            }
        }
    }

   

    if (!empty($_FILES['images']['tmp_name'])) {

        foreach ($_FILES['images']['tmp_name'] as $key => $tmp_name) {

            if ($tmp_name != "") {

                $image_name = time() . "_" . $_FILES['images']['name'][$key];

                move_uploaded_file($tmp_name, "../uploads/" . $image_name);

                $conn->query("
                    INSERT INTO product_images (product_id, image_path)
                    VALUES ('$product_id', '$image_name')
                ");
            }
        }
    }

    echo "Product added successfully!";
}
?>

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

  </aside>


  <main class="main-content">

    <h1>Add Product</h1>

    <div class="admin-form">

      <form method="POST" enctype="multipart/form-data">

        <div class="form-grid">

          <div class="input-group">
            <label>Product Name</label>
            <input type="text" name="name" required>
          </div>

          <div class="input-group">
            <label>Price</label>
            <input type="number" name="price" required>
          </div>

          <div class="input-group">
            <label>Category</label>
            <select name="category">
              <option>Curtains</option>
              <option>Sheers</option>
              <option>Rods</option>
              <option>Mats</option>
              <option>Pillows</option>
              <option>Accessories</option>
              <option>Others</option>
            </select>
          </div>

          <div class="input-group">
            <label>Stock</label>
            <input type="number" name="stock">
          </div>

        
          <div class="input-group full">

            <label>Product Colors</label>

            <div id="color-container">

              <input type="text" name="colors[]" placeholder="e.g. Blue">

            </div>

            <button type="button"
            class="add-color-btn"
            onclick="addColorField()">

              + Add Another Color

            </button>

          </div>

        </div>

        <div class="input-group full">
          <label>Description</label>
          <textarea name="description"></textarea>
        </div>

        <div class="input-group full">
          <label>Product Images</label>
          <input type="file" name="images[]" multiple>
        </div>

        <button type="submit" name="submit" class="btn-primary">
          Add Product
        </button>

      </form>

    </div>

  </main>

</div>

<script>
function addColorField() {

    const container = document.getElementById("color-container");

    const input = document.createElement("input");

    input.type = "text";
    input.name = "colors[]";
    input.placeholder = "e.g. Beige";
    input.style.marginTop = "10px";

    container.appendChild(input);


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