<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Inventory Management System</title>
  <!-- Font Awesome CSS for icons -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Custom Styles -->
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <h1>Inventory Management System</h1>

    <!-- Search Bar -->
    <div class="search-bar mb-4">
      <input type="text" id="searchInput" class="form-control" placeholder="Search Products" onkeyup="searchInventory()" />
      <button class="btn btn-secondary clear-btn" onclick="clearSearch()">Clear Search</button>
    </div>

  <!-- Form to add a product -->
  <div id="addProductForm" class="mb-5">
  <h2 class="section-title">Add Product</h2>
  <form id="productForm" class="form-group" onsubmit="handleSubmit(event)">
    <div class="row mb-3">
      <div class="col">
        <label for="productImage">Product Image</label>
        <input type="file" id="productImage" class="form-control" accept="image/*" onchange="previewImage(event)" />
        <img id="imagePreview" src="" alt="Image Preview" style="display:none; max-width: 100%; margin-top: 10px;">
      </div>
    </div>
    <div class="row mb-3">
      <div class="col">
        <label for="productName">Product Name</label>
        <input type="text" id="productName" class="form-control" placeholder="Product Name" required>
      </div>
      <div class="col">
        <label for="productCategory">Category</label>
        <input type="text" id="productCategory" class="form-control" placeholder="Category" required>
      </div>
      </div>
      <div class="row mb-3">
      <div class="col">
        <label for="quantity">Quantity</label>
        <input type="number" id="quantity" class="form-control" placeholder="Quantity" required min="1">
      </div>
      <div class="col">
        <label for="price">Price</label>
        <input type="number" id="price" class="form-control" placeholder="Price" required min="0" step="0.01">
      </div>
    </div>
      <button type="submit" class="btn btn-success btn-block">Add Product</button>
    </form>
    <div id="addFeedback" class="feedback"></div>
    </div>
    <!-- Section to view the inventory -->
    <div id="inventoryList" class="mb-5">
      <h2 class="section-title">Inventory</h2>

      <!-- Inventory Table -->
      <table class="table table-bordered table-hover">
        <thead>
          <tr>
            <th>Image</th>
            <th>Product Name</th>
            <th>Category</th>
            <th>Quantity</th>
            <th>Price</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody id="inventoryItems">
          <!-- Inventory rows will be dynamically inserted here -->
        </tbody>
      </table>
      <div id="emptyInventoryMessage" class="feedback" style="display: none;">No products in inventory</div>

      <button onclick="backupInventory()" class="btn btn-primary animated-button">Backup Inventory</button>
      <button onclick="restoreInventory()" class="btn btn-warning animated-button">Restore Inventory</button>
      

      <!-- Pagination -->
      <div id="pagination" class="d-flex justify-content-between mt-4">
        <button onclick="changePage(-1)" class="btn btn-primary">Previous</button>
        <button onclick="changePage(1)" class="btn btn-primary">Next</button>
      </div>

      <!-- Pagination Info -->
      <div id="paginationInfo"></div>
    </div>

<!-- Edit Product Modal -->
<div class="modal fade" id="editProductModal" tabindex="-1" aria-labelledby="editProductModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="editProductModalLabel">Edit Product</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form id="editProductFormElement" class="form-group">
          <div class="row mb-3">
            <div class="col">
              <input type="file" id="editProductImage" class="form-control" accept="image/*" />
            </div>
          </div>        
          <input type="text" id="editProductName" class="form-control mb-3" placeholder="Product Name" required>
          <input type="text" id="editProductCategory" class="form-control mb-3" placeholder="Category" required>
          <input type="number" id="editQuantity" class="form-control mb-3" placeholder="Quantity" required>
          <input type="number" id="editPrice" class="form-control mb-3" placeholder="Price" required>
          <button type="submit" class="btn btn-warning btn-block">Update Product</button>
        </form>
        <div id="editFeedback" class="feedback mt-3"></div>
      </div>
    </div>
  </div>
</div>


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