<%- include('partials/admin-header') %>
<section class="admin-layout container" style="max-width:1400px;padding-top:20px;">
  <div class="admin-sidebar" style="min-width:200px;">
    <h3>Admin Menu</h3>
    <a href="/admin?tab=dashboard" class="<%= activeTab === 'dashboard' ? 'active' : '' %>">Dashboard</a>
    <a href="/admin?tab=products" class="<%= activeTab === 'products' ? 'active' : '' %>">Products</a>
    <a href="/admin?tab=orders" class="<%= activeTab === 'orders' ? 'active' : '' %>">Orders</a>
    <a href="/admin?tab=banners" class="<%= activeTab === 'banners' ? 'active' : '' %>">Banners</a>
    <a href="/admin?tab=payments" class="<%= activeTab === 'payments' ? 'active' : '' %>">Payments</a>
    <a href="/admin?tab=delivery" class="<%= activeTab === 'delivery' ? 'active' : '' %>">Delivery Areas</a>
    <a href="/admin?tab=settings" class="<%= activeTab === 'settings' ? 'active' : '' %>">SEO & Settings</a>
    <a href="/">View Site</a>
    <a href="/signout">Sign Out</a>
  </div>
  <div class="admin-content" style="overflow-x:auto;">

<% if (activeTab === 'dashboard' || !activeTab) { %>
      <div class="admin-cards">
        <div class="admin-card"><h4>Products</h4><div class="number"><%= products.length %></div></div>
        <div class="admin-card"><h4>Orders</h4><div class="number"><%= orders.length %></div></div>
        <div class="admin-card"><h4>Customers</h4><div class="number"><%= users.filter(u => u.role === 'customer').length %></div></div>
        <div class="admin-card"><h4>Pending</h4><div class="number"><%= orders.filter(o => o.status === 'pending').length %></div></div>
        <div class="admin-card"><h4>Revenue</h4><div class="number">BDT <%= orders.reduce((s,o) => s + o.total, 0).toLocaleString() %></div></div>
      </div>
      <div class="admin-section">
        <h3>Recent Orders</h3>
<% if (orders.length > 0) { %>
        <table class="orders-table">
          <thead><tr><th>#</th><th>Customer</th><th>Total</th><th>Payment</th><th>Status</th><th>Date</th></tr></thead>
          <tbody>
<% orders.slice().sort((a,b) => new Date(b.createdAt) - new Date(a.createdAt)).slice(0, 5).forEach(function(o) { %>
            <tr>
              <td>#<%= o.id %></td><td><%= o.userName %></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.</p>
<% } %>
      </div>
<% } %>

<% if (activeTab === 'products') { %>
      <div class="admin-section">
        <h3>Add New Product</h3>
        <form action="/admin/product/add" method="POST" enctype="multipart/form-data" style="max-width:600px;">
          <div class="form-group"><label>Product Name</label><input type="text" name="name" required></div>
          <div class="form-group"><label>Price (BDT)</label><input type="number" name="price" step="0.01" required></div>
          <div class="form-group">
            <label>Category</label>
            <select name="category">
              <option value="men">Men</option><option value="women">Women</option>
              <option value="accessories">Accessories</option><option value="footwear">Footwear</option>
            </select>
          </div>
          <div class="form-group"><label>Cover Image (Upload)</label><input type="file" name="image" accept="image/*"></div>
          <div class="form-group"><label>Description</label><textarea name="description"></textarea></div>
          <div class="form-group">
            <label style="display:flex;align-items:center;gap:8px;cursor:pointer;">
              <input type="checkbox" name="featured"> Featured Product
            </label>
          </div>
          <button type="submit" class="btn btn-primary">Add Product</button>
        </form>
      </div>
      <div class="admin-section" style="overflow-x:auto;">
        <h3>Manage Products (<%= products.length %>)</h3>
        <table class="orders-table">
          <thead><tr><th>ID</th><th>Image</th><th>Name</th><th>Price</th><th>Category</th><th>Featured</th><th>Action</th></tr></thead>
          <tbody>
<% products.forEach(function(p) { %>
            <tr>
              <td><%= p.id %></td>
              <td>
<% if (p.image && p.image !== '/uploads/product-default.jpg') { %>
                <img src="<%= p.image %>" style="width:40px;height:40px;object-fit:cover;border-radius:4px;">
<% } else { %>
                <span style="color:#5a4a3a;">No img</span>
<% } %>
              </td>
              <td><%= p.name %></td>
              <td>BDT <%= p.price.toLocaleString() %></td>
              <td style="text-transform:capitalize;"><%= p.category %></td>
              <td><%= p.featured ? 'Yes' : 'No' %></td>
              <td>
                <form action="/admin/product/delete/<%= p.id %>" method="POST" onsubmit="return confirm('Delete this product?')">
                  <button type="submit" class="btn btn-danger btn-sm">Delete</button>
                </form>
              </td>
            </tr>
<% }); %>
          </tbody>
        </table>
      </div>
<% } %>

<% if (activeTab === 'orders') { %>
      <div class="admin-section" style="overflow-x:auto;">
        <h3>All Orders (<%= orders.length %>)</h3>
<% if (orders.length > 0) { %>
        <table class="orders-table">
          <thead><tr><th>#</th><th>Customer</th><th>Phone</th><th>Items</th><th>Subtotal</th><th>Delivery</th><th>Total</th><th>Payment</th><th>Area</th><th>Address</th><th>Status</th><th>Action</th></tr></thead>
          <tbody>
<% orders.slice().sort((a,b) => new Date(b.createdAt) - new Date(a.createdAt)).forEach(function(o) { %>
            <tr>
              <td>#<%= o.id %></td>
              <td><%= o.userName %></td>
              <td style="font-size:12px;"><%= o.phone %></td>
              <td style="font-size:11px;max-width:150px;"><%= o.items.map(i => i.name + ' x' + i.qty).join(', ') %></td>
              <td>BDT <%= o.subtotal.toLocaleString() %></td>
              <td><%= o.delivery === 0 ? 'Free' : 'BDT ' + o.delivery.toLocaleString() %></td>
              <td><strong>BDT <%= o.total.toLocaleString() %></strong></td>
              <td><%= o.paymentMethod %></td>
              <td><%= o.deliveryArea || '-' %></td>
              <td style="font-size:11px;max-width:120px;"><%= o.deliveryAddress %></td>
              <td><span class="status-badge status-<%= o.status %>"><%= o.status %></span></td>
              <td>
                <form action="/admin/order/status/<%= o.id %>" method="POST" style="display:flex;gap:4px;flex-wrap:wrap;">
                  <select name="status" style="padding:4px;background:#0a0a0a;border:1px solid #3a3a3a;color:#e0d5c8;font-size:11px;">
                    <option value="pending" <%= o.status === 'pending' ? 'selected' : '' %>>Pending</option>
                    <option value="processing" <%= o.status === 'processing' ? 'selected' : '' %>>Processing</option>
                    <option value="shipped" <%= o.status === 'shipped' ? 'selected' : '' %>>Shipped</option>
                    <option value="delivered" <%= o.status === 'delivered' ? 'selected' : '' %>>Delivered</option>
                    <option value="cancelled" <%= o.status === 'cancelled' ? 'selected' : '' %>>Cancelled</option>
                  </select>
                  <button type="submit" class="btn btn-sm btn-primary">Go</button>
                </form>
              </td>
            </tr>
<% }); %>
          </tbody>
        </table>
<% } else { %>
        <p style="color:#6a5a4a;">No orders yet.</p>
<% } %>
      </div>
<% } %>

<% if (activeTab === 'banners') { %>
      <div class="admin-section">
        <h3>Add New Banner</h3>
        <form action="/admin/banner/add" method="POST" enctype="multipart/form-data" style="max-width:600px;">
          <div class="form-group"><label>Title</label><input type="text" name="title" required></div>
          <div class="form-group"><label>Subtitle</label><input type="text" name="subtitle"></div>
          <div class="form-group"><label>Button Text</label><input type="text" name="btnText" value="Shop Now"></div>
          <div class="form-group"><label>Button Link</label><input type="text" name="btnLink" value="/shop"></div>
          <div class="form-group"><label>Background Color</label><input type="text" name="bgColor" value="#2c1810"></div>
          <div class="form-group"><label>Background Image (Upload)</label><input type="file" name="image" accept="image/*"></div>
          <button type="submit" class="btn btn-primary">Add Banner</button>
        </form>
      </div>
      <div class="admin-section" style="overflow-x:auto;">
        <h3>Manage Banners (<%= banners.length %>)</h3>
        <table class="orders-table">
          <thead><tr><th>ID</th><th>Image</th><th>Title</th><th>Subtitle</th><th>Active</th><th>Action</th></tr></thead>
          <tbody>
<% banners.forEach(function(b) { %>
            <tr>
              <td><%= b.id %></td>
              <td>
<% if (b.image) { %>
                <img src="<%= b.image %>" style="width:60px;height:40px;object-fit:cover;border-radius:4px;">
<% } else { %>
                <span style="color:#5a4a3a;">No img</span>
<% } %>
              </td>
              <td><%= b.title %></td>
              <td><%= b.subtitle %></td>
              <td><%= b.active ? 'Yes' : 'No' %></td>
              <td>
                <form action="/admin/banner/delete/<%= b.id %>" method="POST" onsubmit="return confirm('Delete this banner?')">
                  <button type="submit" class="btn btn-danger btn-sm">Delete</button>
                </form>
              </td>
            </tr>
<% }); %>
          </tbody>
        </table>
      </div>
<% } %>

<% if (activeTab === 'payments') { %>
      <div class="admin-section">
        <h3>Add Payment Method</h3>
        <form action="/admin/payment/add" method="POST" style="max-width:600px;">
          <div class="form-group"><label>Payment Name</label><input type="text" name="name" required></div>
          <div class="form-group">
            <label>Type</label>
            <select name="type">
              <option value="cod">Cash on Delivery</option>
              <option value="bkash">bKash</option>
              <option value="nagad">Nagad</option>
              <option value="rocket">Rocket</option>
              <option value="card">Card Payment</option>
              <option value="bank">Bank Transfer</option>
              <option value="other">Other</option>
            </select>
          </div>
          <div class="form-group"><label>Account Holder Name (if applicable)</label><input type="text" name="accountName"></div>
          <div class="form-group"><label>Account Number (if applicable)</label><input type="text" name="accountNumber"></div>
          <button type="submit" class="btn btn-primary">Add Payment Method</button>
        </form>
      </div>
      <div class="admin-section" style="overflow-x:auto;">
        <h3>Manage Payment Methods (<%= payments.length %>)</h3>
        <table class="orders-table">
          <thead><tr><th>ID</th><th>Name</th><th>Type</th><th>Account Name</th><th>Account Number</th><th>Active</th><th>Action</th></tr></thead>
          <tbody>
<% payments.forEach(function(p) { %>
            <tr>
              <td><%= p.id %></td>
              <td><%= p.name %></td>
              <td><%= p.type %></td>
              <td><%= p.accountName || '-' %></td>
              <td><%= p.accountNumber || '-' %></td>
              <td><%= p.active ? 'Yes' : 'No' %></td>
              <td>
                <form action="/admin/payment/delete/<%= p.id %>" method="POST" onsubmit="return confirm('Delete this payment method?')">
                  <button type="submit" class="btn btn-danger btn-sm">Delete</button>
                </form>
              </td>
            </tr>
<% }); %>
          </tbody>
        </table>
      </div>
<% } %>

<% if (activeTab === 'delivery') { %>
      <div class="admin-section">
        <h3>Add Delivery Area</h3>
        <form action="/admin/delivery/add" method="POST" style="max-width:600px;">
          <div class="form-group"><label>Area Name</label><input type="text" name="area" required></div>
          <div class="form-group"><label>Delivery Charge (BDT)</label><input type="number" name="charge" required></div>
          <div class="form-group"><label>Delivery Time</label><input type="text" name="deliveryTime" placeholder="e.g. 2-3 days"></div>
          <button type="submit" class="btn btn-primary">Add Delivery Area</button>
        </form>
      </div>
      <div class="admin-section" style="overflow-x:auto;">
        <h3>Manage Delivery Areas (<%= deliveryAreas.length %>)</h3>
        <table class="orders-table">
          <thead><tr><th>ID</th><th>Area</th><th>Charge (BDT)</th><th>Delivery Time</th><th>Action</th></tr></thead>
          <tbody>
<% deliveryAreas.forEach(function(d) { %>
            <tr>
              <td><%= d.id %></td>
              <td><%= d.area %></td>
              <td>BDT <%= d.charge %></td>
              <td><%= d.deliveryTime %></td>
              <td>
                <form action="/admin/delivery/delete/<%= d.id %>" method="POST" onsubmit="return confirm('Delete this area?')">
                  <button type="submit" class="btn btn-danger btn-sm">Delete</button>
                </form>
              </td>
            </tr>
<% }); %>
          </tbody>
        </table>
      </div>
<% } %>

<% if (activeTab === 'settings') { %>
      <div class="admin-section">
        <h3>SEO & Site Settings</h3>
        <form action="/admin/settings" method="POST" style="max-width:700px;">
          <div class="form-group"><label>Site Title</label><input type="text" name="siteTitle" value="<%= settings.siteTitle %>"></div>
          <div class="form-group"><label>Site Description (Meta)</label><textarea name="siteDescription"><%= settings.siteDescription %></textarea></div>
          <div class="form-group"><label>Meta Keywords</label><input type="text" name="metaKeywords" value="<%= settings.metaKeywords %>"></div>
          <div class="form-group"><label>Meta Author</label><input type="text" name="metaAuthor" value="<%= settings.metaAuthor %>"></div>
          <div class="form-group"><label>Default Delivery Charge (BDT)</label><input type="number" name="deliveryCharge" value="<%= settings.deliveryCharge %>"></div>
          <div class="form-group"><label>Free Delivery Above (BDT)</label><input type="number" name="freeDeliveryAbove" value="<%= settings.freeDeliveryAbove %>"></div>
          <div class="form-group"><label>Contact Email</label><input type="email" name="contactEmail" value="<%= settings.contactEmail %>"></div>
          <div class="form-group"><label>Contact Phone</label><input type="text" name="contactPhone" value="<%= settings.contactPhone %>"></div>
          <div class="form-group"><label>Address</label><textarea name="address"><%= settings.address %></textarea></div>
          <button type="submit" class="btn btn-primary">Save Settings</button>
        </form>
      </div>
<% } %>

  </div>
</section>
<%- include('partials/admin-footer') %>
