<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>FinFlow Dashboard</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"/>
</head>
<body>
  <!-- Sidebar -->
  <aside class="sidebar" id="sidebar">
    <div class="logo">
      <a href="/dashboard"><svg width="100" height="40" viewBox="0 0 100 40" aria-label="FinFlow logo">
        <path d="M12,15 L30,15 L24,27 L12,27 Z" fill="#4270F4" />
        <text x="38" y="27" fill="#262A39" font-size="20" font-weight="bold">FinFlow</text>
      </svg></a>
    </div>

    <nav class="nav-menu" aria-label="Main navigation">
      <a href="/" class="nav-item active"><i class="fas fa-table"></i><span>Orders</span></a>
      <a href="/account" class="nav-item"><i class="fas fa-user-circle"></i><span>Add Products</span></a>
      <a href="/payments" class="nav-item"><i class="fas fa-gift"></i><span>Add Offer/Rewards</span></a>
      
      <a href="/help" class="nav-item"><i class="fas fa-life-ring"></i><span>Help Center</span></a>
      <a href="/tables" class="nav-item"><i class="fas fa-table"></i><span>Data Tables</span></a>
    </nav>

    <div class="premium-box">
      <h3>Upgrade to Elite Plan</h3>
      <button class="premium-btn">Try Free</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">Good afternoon, Alex,</p>
        <h1 class="welcome-title">Your Financial Overview</h1>
      </div>

      <div class="header-right">
        <div class="search-bar">
          <i class="fas fa-search"></i>
          <input type="text" placeholder="Find transactions..." aria-label="Search" />
        </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="/login">Login</a>
        <a class="btn btn-primary" href="/register">Register</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 Product</h2>
          </div>

          <div class="card-body form-wrapper">
            <form class="add-item-form" action="/submit-item" method="POST" enctype="multipart/form-data">
              <div class="form-row">
                <div class="form-group">
                  <label for="itemName">Product Name</label>
                  <input type="text" id="itemName" name="itemName" class="form-control" placeholder="Enter product name" required>
                </div>

                <div class="form-group">
                  <label for="itemPrice">Price ($)</label>
                  <input type="number" id="itemPrice" name="itemPrice" class="form-control" placeholder="Enter price" required>
                </div>
              </div>

              <div class="form-row">
                <div class="form-group">
                  <label for="itemCategory">Category</label>
                  <input type="text" id="itemCategory" name="itemCategory" class="form-control" placeholder="Enter category" required>
                </div>

                <div class="form-group">
                  <label for="itemImage">Upload Product Image</label>
                  <input type="file" id="itemImage" name="itemImage" class="form-control" accept="image/*" required>
                </div>
              </div>

              <div class="form-row">
                <div class="form-group full-width">
                  <label for="itemDescription">Description</label>
                  <textarea id="itemDescription" name="itemDescription" class="form-control" placeholder="Write a short description" rows="4"></textarea>
                </div>
              </div>

              <div class="form-row">
                <button type="submit" class="btn btn-primary">Add Product</button>
              </div>
            </form>
          </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>
</body>
</html>
