<%- include('partials/header') %>
<section class="page-header">
  <div class="container">
    <h1>My Dashboard</h1>
    <p>Welcome back, <%= user.name %></p>
  </div>
</section>
<section class="dashboard-layout container">
  <div class="dash-sidebar">
    <h3>Dashboard</h3>
    <a href="#profile" class="active" onclick="showTab('profile')">Profile</a>
    <a href="#orders" onclick="showTab('orders')">My Orders</a>
    <a href="/shop">Browse Shop</a>
    <a href="/cart">Shopping Cart</a>
    <a href="/signout">Sign Out</a>
  </div>
  <div class="dash-content">
    <div id="profile" class="tab-content">
      <div class="admin-section">
        <h3>Update Profile</h3>
        <form action="/dashboard/update" method="POST" style="max-width:500px;">
          <div class="form-group">
            <label>Full Name</label>
            <input type="text" name="name" value="<%= user.name %>" required>
          </div>
          <div class="form-group">
            <label>Email</label>
            <input type="email" value="<%= user.email %>" disabled style="opacity:0.5;">
          </div>
          <div class="form-group">
            <label>Phone</label>
            <input type="text" name="phone" value="<%= user.phone || '' %>">
          </div>
          <div class="form-group">
            <label>Address</label>
            <textarea name="address"><%= user.address || '' %></textarea>
          </div>
          <button type="submit" class="btn btn-primary">Update Profile</button>
        </form>
      </div>
    </div>
    <div id="orders" class="tab-content" style="display:none;">
      <div class="admin-section">
        <h3>My Orders (<%= orders.length %>)</h3>
        <% if (orders.length > 0) { %>
        <table class="orders-table">
          <thead>
            <tr>
              <th>Order #</th>
              <th>Items</th>
              <th>Total</th>
              <th>Payment</th>
              <th>Status</th>
              <th>Date</th>
            </tr>
          </thead>
          <tbody>
            <% orders.sort((a,b) => new Date(b.createdAt) - new Date(a.createdAt)).forEach(function(o) { %>
            <tr>
              <td>#<%= o.id %></td>
              <td><%= o.items.map(i => i.name + ' x' + i.qty).join(', ') %></td>
              <td>BDT <%= o.total.toLocaleString() %></td>
              <td><%= o.paymentMethod %></td>
              <td><span class="status-badge status-<%= o.status %>"><%= o.status %></span></td>
              <td style="font-size:11px;"><%= new Date(o.createdAt).toLocaleDateString() %></td>
            </tr>
            <% }); %>
          </tbody>
        </table>
        <% } else { %>
        <p style="color:#6a5a4a;">No orders yet. <a href="/shop">Start shopping!</a></p>
        <% } %>
      </div>
    </div>
  </div>
</section>
<script>
function showTab(tab) {
  document.querySelectorAll('.tab-content').forEach(el => el.style.display = 'none');
  document.getElementById(tab).style.display = 'block';
  document.querySelectorAll('.dash-sidebar a').forEach(el => el.classList.remove('active'));
  event.target.classList.add('active');
}
</script>
<%- include('partials/footer') %>
