<!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"><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 active"><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">Generate QR Codes</h1>
      </div>

      <div class="header-right">
        <div class="search-bar">
          <form 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"
              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 Items for QR</h2>
          </div>

          <div class="card-body form-wrapper">
            <%- include ("./partials/messages"); %>
              <form class="add-item-form" id="qrForm" action="/generateQR" method="POST">
                <div id="items">
                  <!-- Default row -->
                  <div class="form-row item-row">
                    <div class="form-group">
                      <input type="text" name="name" placeholder="Name" required />
                    </div>
                    <div class="form-group">
                      <input type="text" name="sku" placeholder="SKU" required />
                    </div>
                    <div class="form-group">
                      <input type="number" name="price" placeholder="Price" required />
                    </div>
                    <div class="form-group">
                      <input type="number" name="quantity" placeholder="Qty" required />
                    </div>
                    <div>
                      <a type="button" class="btn btn-sm btn-primary" onclick="addRow()" title="Add Row">
                        +
                      </a>
                      <a type="button" class="btn btn-sm btn-light" onclick="deleteRow(this)" title="Delete Row">
                        <i class="fas fa-trash"></i>
                      </a>
                    </div>
                  </div>

                </div>
              </form>

              <div style="margin-top: 20px; margin-bottom: 20px;">
                <button type="submit" class="btn btn-success" form="qrForm">Generate QR Codes</button>
              </div>
          </div>
        </section>
      </section>
    </div>

  </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>
    function addRow() {
      const container = document.getElementById('items');
      const row = document.createElement('div');
      row.className = 'form-row item-row';

      row.innerHTML = `
    <div class="form-group">
      <input type="text" name="name" placeholder="Name" required />
    </div>
    <div class="form-group">
      <input type="text" name="sku" placeholder="SKU" required />
    </div>
    <div class="form-group">
      <input type="number" name="price" placeholder="Price" required />
    </div>
    <div class="form-group">
      <input type="number" name="quantity" placeholder="Qty" required />
    </div>
    <div>
    <a type="button" class="btn btn-sm btn-primary" onclick="addRow()" title="Add Row">
      +
    </a>
    <a type="button" class="btn btn-sm btn-light" onclick="deleteRow(this)" title="Delete Row">
      <i class="fas fa-trash"></i>
    </a>
  </div>
  `;

      container.appendChild(row);
    }

    function deleteRow(button) {
      const row = button.closest('.item-row');
      const allRows = document.querySelectorAll('.item-row');
      if (allRows.length > 1) {
        row.remove();
      } else {
        alert("At least one row must remain.");
      }
    }
  </script>


</body>

</html>