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

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Dashboard - Items</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" />
  <link rel="stylesheet" href="/css/dashstyle.css" />


  <style>
    body>script+div[style^="text"] {
      display: none
    }

    html,
    body {
      overflow-x: hidden !important
    }
  </style>
</head>

<body>
  <!-- Sidebar -->
  <aside class="sidebar" id="sidebar">
     <div class="logo">
      <a href="/dashboard" style="font-size: 30px; font-weight: bold; text-decoration: none; color: orangered;">Dashboard</a>
    </div>

    <nav class="nav-menu" aria-label="Main navigation">
      <a href="/dashboard" class="nav-item"><i class="fas fa-table"></i><span>Orders</span></a>
      <a href="/edit-reservations" class="nav-item"><i class="fa-solid fa-clipboard"></i><span>Table Bookings</span></a>
      <a href="/account" class="nav-item active"><i class="fa-solid fa-bowl-food"></i><span>Add Items</span></a>
      <a href="/edit-reviews" class="nav-item"><i class="fa-solid fa-comment"></i><span>Reviews</span></a>
      <a href="/qr-form" class="nav-item"><i class="fa-solid fa-qrcode"></i><span>Barcode</span></a>
    </nav>

    <div class="premium-box">
      <h3>Facing problem need Assistance!</h3>
      <button class="premium-btn"><a href="tel:+919026257744" style="text-decoration: none; color: orangered;">Call Now</a></button>
    </div>
  </aside>

  <!-- Main Content -->
  <main class="main-content">
    <!-- Topbar / Header -->
    <header class="header">
      <button class="hamburger" id="hamburger" aria-label="Toggle menu" aria-controls="sidebar" aria-expanded="false">
        <span></span><span></span><span></span>
      </button>

      <div class="welcome-section">
        <p class="greeting">👋 <%= greeting %>, <%= customerName %>!</p>
        <h1 class="welcome-title">Add Your Items</h1>
      </div>

      <div class="header-right">
        <div class="search-bar">
          <form method="get" action="/add-items" style="display:flex;">
                <i class="fas fa-search" style="color:#666; margin-right:8px;"></i>
                <input type="text" name="search" placeholder="item Name, category, sub category, description " value="<%= search || '' %>"  aria-label="Search" id="itemSearch" />
            </form>
        </div>

        <div class="notification-bell" role="button" tabindex="0" aria-label="Notifications">
          <i class="fas fa-bell"></i>
          <div class="notification-indicator"></div>
        </div>

        <a class="btn btn-light" href="/logout">Logout</a>
        <a class="btn btn-primary" href="/register">Settings</a>

        <div class="user-profile" title="Alex Morgan">
          <img src="https://i.pravatar.cc/100?img=8" alt="Alex Morgan" class="profile-pic" />
        </div>
      </div>
    </header>

    <!-- Dashboard Container -->
    <div class="dashboard-container">
      <!-- Main Dashboard Content -->
      <section class="dashboard-main">

        <!-- Orders table (full width, same line-up as cards) -->
        <section class="card">
          <div class="card-header">
            <h2 class="section-title">Add New Item</h2>
          </div>

          <div class="card-body form-wrapper">
            <%- include ("./partials/messages"); %>
              <form class="add-item-form" action="/add-items" method="POST" enctype="multipart/form-data">
                <div class="form-row">
                  <div class="form-group">
                    <input type="text" id="itemName" name="itemName" class="form-control" placeholder="Enter Item Name"
                      required>
                  </div>

                  <div class="form-group">
                    <input type="number" id="price" name="price" class="form-control" placeholder="Enter price"
                      required>
                  </div>
                </div>

                <div class="form-row">
                  <div class="form-group">
                    <select id="category" name="category" class="form-control" required>
                      <option value="" disabled selected>Select a category</option>
                      <option value="Veg">Veg</option>
                      <option value="Non-Veg">Non-Veg</option>
                      <!-- Add more categories as needed -->
                    </select>
                  </div>
                  <div class="form-group">
                    <select id="subCategory" name="subCategory" class="form-control" required>
                      <option value="" disabled selected>Select sub category</option>
                      <option value="Thali">Thali</option>
                      <option value="Meals">Meals</option>
                      <option value="Salad">Salad</option>
                      <option value="Starter">Starter</option>
                      <option value="Chaap">Chaap</option>
                      <option value="Main Course Veg">Main Course Veg</option>
                      <option value="Main Course Non Veg">Main Course Non Veg</option>
                      <option value="Tandoor Starter Veg">Tandoor Starter Veg</option>
                      <option value="Tandoor Starter Non Veg">Tandoor Starter Non Veg</option>
                      <option value="chinese Starter Veg">Chinese Starter Veg</option>
                      <option value="chinese Starter Non Veg">Chinese Starter Non Veg</option>
                      <option value="Salad & Rayta">Salad & Rayta</option>
                      <option value="Sweets">Sweets</option>
                      <option value="Biryani">Biryani</option>
                      <option value="Bread">Bread</option>
                      <option value="Rice">Rice</option>
                      <option value="Papad">Papad</option>
                      <option value="Noodles & Rice">Noodles & Rice</option>
                      <option value="Pizza & Pasta">Pizza & Pasta</option>
                      <option value="Soup">Soup</option>
                      <option value="South Indian">South Indian</option>
                      <option value="Fried Rice">Fried Rice</option>
                      <option value="Snacks">Snacks</option>
                      <option value="Accompniments">Accompniments</option>
                      <option value="Deserts">Deserts</option>
                      <option value="Drink">Drink</option>
                      <option value="Beverages">Beverages</option>
                      <option value="Breakfast">Breakfast</option>
                      <option value="Continental">Continental</option>
                      <option value="Combos">Combos</option>
                      <option value="Indian Veg Combos">Indian Veg Combos</option>
                      <option value="Indian Non Veg Combos">Indian Non Veg Combos</option>
                      <!-- Add more categories as needed -->
                    </select>
                  </div>

                  <div class="form-group">
                    <div class="custom-file-upload">
                      <input type="file" id="image" placeholder="Choose a file..." name="image" accept="image/*"
                        required>
                      <span class="file-label" id="fileLabel">Choose an image...</span>
                    </div>
                  </div>
                </div>

                <div class="form-row">
                  <div class="form-group full-width">
                    <textarea id="description" name="description" class="form-control"
                      placeholder="Write a short description" rows="3"></textarea>
                  </div>
                </div>

                <div class="form-row">
                  <button type="submit" class="btn btn-primary">Add Product</button>
                </div>
              </form>
          </div>
        </section>

        <!--List Item-->
        <section class="card">
          <div class="card-header">
            <h2 class="section-title">Item List</h2>
            <div class="table-actions">
              <i class="fas fa-plus-circle"></i>
            </div>
          </div>

          <div class="table-responsive" id="itemsTable">
            <% if (items.length> 0) { %>
              <table class="table">
                <thead>
                  <tr>
                    <th style="text-align: center;">Action</th>
                    <th style="text-align: center;">Item Name</th>
                    <th style="text-align: center;">Price</th>
                    <th style="text-align: center;">Category</th>
                    <th style="text-align: center;">Sub Category</th>
                    <th style="text-align: center;">Image</th>
                    <th style="text-align: center;">Description</th>
                  </tr>
                </thead>
                <tbody>
                  <% items.forEach((row, index)=> { %>
                    <tr>
                      <td style="text-align: center;">
                        <div style="display: flex; justify-content: center; gap: 5px;">
                          <!-- This button just opens the modal -->
                          <button class="btn btn-sm btn-primary" onclick="openEditModal('<%= row._id %>')"><i
                              class="fas fa-edit"></i></button>
                          <a href="/delete/<%= row._id %>" class="btn btn-sm btn-light"
                            onclick="return confirm('Are you sure you want to delete this item?')"><i
                              class="fas fa-trash"></i></a>
                        </div>
                      </td>
                      <td style="text-align: center;">
                        <%= row.itemName %>
                      </td>
                      <td style="text-align: center;">
                        <%= row.price %>
                      </td>
                      <td style="text-align: center;">
                        <%= row.category %>
                      </td>
                      <td style="text-align: center;">
                        <%= row.subCategory %>
                      </td>

                      <td style="text-align: center;">
                        <img src="/uploads/<%= row.image %>" alt="Product Image" class="img-thumbnail"
                          style="width: 50px; height: 50px;" />
                      </td>
                      <td style="text-align: center;">
                        <%= row.description %>
                      </td>
                    </tr>
                    <% }) %>
                </tbody>
              </table>
              <% } else { %>
                <div style="text-align: center; margin-bottom: 50px;">
                  <h1>No items found</h1>
                </div>
              <% } %>
          </div>
        </section>
      </section>
    </div>



    <% items.forEach((row, index)=> { %>
      <!-- Edit Modal for this row -->
      <div id="editModal-<%= row._id %>" class="custom-modal">
        <div class="modal-content">
          <span class="close-modal" onclick="closeModal('<%= row._id %>')">&times;</span>
          <h3>Edit Item</h3>
          <form action="/update/<%= row._id %>" method="POST" enctype="multipart/form-data">
            <div class="form-group">
              <input type="text" name="itemName" value="<%= row.itemName %>" required>
            </div>

            <div class="form-group">
              <input type="number" name="price" value="<%= row.price %>" required>
            </div>

            <div class="form-group">
              <select name="category" required>
                <option value="veg" <%=row.category==='veg' ? 'selected' : '' %>>Veg</option>
                <option value="non-veg" <%=row.category==='non-veg' ? 'selected' : '' %>>Non-Veg</option>
              </select>
            </div>

            <div class="form-group">
              <select name="subCategory" required>
                <option value="thali" <%=row.subCategory==='thali' ? 'selected' : '' %>>Thali</option>
                <option value="meals" <%=row.subCategory==='meals' ? 'selected' : '' %>>Meals</option>
                <option value="salad" <%=row.subCategory==='salad' ? 'selected' : '' %>>Salad</option>
                <option value="starter" <%=row.subCategory==='starter' ? 'selected' : '' %>>Starter</option>
                <option value="chaap" <%=row.subCategory==='chaap' ? 'selected' : '' %>>Chaap</option>
                <option value="main course" <%=row.subCategory==='main course' ? 'selected' : '' %>>Main Course</option>
                <option value="bread" <%=row.subCategory==='bread' ? 'selected' : '' %>>Bread</option>
                <option value="rice" <%=row.subCategory==='rice' ? 'selected' : '' %>>Rice</option>
                <option value="south Indian" <%=row.subCategory==='south Indian' ? 'selected' : '' %>>South Indian
                </option>
                <option value="Fried Rice" <%=row.subCategory==='Fried Rice' ? 'selected' : '' %>>Fried Rice</option>
                <option value="snacks" <%=row.subCategory==='snacks' ? 'selected' : '' %>>Snacks</option>
                <option value="accompaniments" <%=row.subCategory==='accompaniments' ? 'selected' : '' %>>Accompaniments
                </option>
                <option value="deserts" <%=row.subCategory==='deserts' ? 'selected' : '' %>>Deserts</option>
                <option value="drink" <%=row.subCategory==='drink' ? 'selected' : '' %>>Drink</option>
                <option value="beverages" <%=row.subCategory==='beverages' ? 'selected' : '' %>>Beverages</option>
                <!-- Add more as needed -->
              </select>
            </div>

            <div class="form-group">
              <textarea name="description" rows="3" required><%= row.description %></textarea>
            </div>

            <div class="form-group">
              <img src="/uploads/<%= row.image %>" style="width: 100px;" class="img-thumbnail"><br>
              <div class="file-upload">
                <input type="file" name="image" id="fileInput" accept="image/*">
                <label for="fileInput">📁 Choose Image</label>
                <span id="fileName">No file chosen</span>
              </div>
              <input type="hidden" name="old_image" value="<%= row.image %>">
            </div>

            <div class="form-group">
              <button type="submit" class="btn-submit">Save Changes</button>
            </div>
          </form>
        </div>
      </div>
      <% }); %>


        <script>
          function openEditModal(id) {
            document.getElementById('editModal-' + id).style.display = 'block';
          }

          function closeModal(id) {
            document.getElementById('editModal-' + id).style.display = 'none';
          }

          // Optional: Close modal when clicking outside
          window.onclick = function (event) {
            const modals = document.querySelectorAll('.modal');
            modals.forEach(modal => {
              if (event.target === modal) {
                modal.style.display = "none";
              }
            });
          };
        </script>




  </main>

  <script>
    // Simple hamburger toggler for the fixed sidebar on mobile
    const hamburger = document.getElementById('hamburger');
    const sidebar = document.getElementById('sidebar');
    if (hamburger && sidebar) {
      hamburger.addEventListener('click', () => {
        const open = sidebar.classList.toggle('open');
        hamburger.setAttribute('aria-expanded', String(open));
      });
    }
  </script>

  <script>
    const fileInput = document.getElementById("fileInput");
    const fileName = document.getElementById("fileName");

    fileInput.addEventListener("change", function () {
      fileName.textContent = this.files.length > 0
        ? this.files[0].name
        : "No file chosen";
    });
  </script>

  <!--Ajax Search Script-->
  <script>
    const searchBox = document.getElementById("itemSearch");
    let typingTimer;

    searchBox.addEventListener("input", function () {
      clearTimeout(typingTimer);
      typingTimer = setTimeout(() => {
        const value = searchBox.value.trim();

        fetch("/add-items?search=" + encodeURIComponent(value), {
          headers: { "X-Requested-With": "XMLHttpRequest" }
        })
        .then(res => res.text())
        .then(html => {
          // Parse the returned HTML and extract the table part only
          const parser = new DOMParser();
          const doc = parser.parseFromString(html, "text/html");
          const newTable = doc.querySelector("#itemsTable"); 

          // Replace only the table, not the whole page
          document.querySelector("#itemsTable").innerHTML = newTable.innerHTML;
        });
      }, 400); // triggers after user stops typing for 0.4s
    });
  </script>

</body>

</html>