<%- include('partials/header') %>
<section class="page-header">
  <div class="container">
    <h1>Shopping Cart</h1>
    <p><%= cartItems.length %> item(s) in your cart</p>
  </div>
</section>
<section class="cart-page container">
  <% if (cartItems.length > 0) { %>
  <table class="cart-table">
    <thead>
      <tr>
        <th>Product</th>
        <th>Price</th>
        <th>Quantity</th>
        <th>Subtotal</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <% cartItems.forEach(function(item) { %>
      <tr>
        <td><%= item.name %></td>
        <td>BDT <%= item.price.toLocaleString() %></td>
        <td>
          <form action="/cart/update" method="POST" class="qty-form">
            <input type="hidden" name="id" value="<%= item.id %>">
            <input type="number" name="qty" value="<%= item.qty %>" min="0" class="qty-input" onchange="this.form.submit()">
          </form>
        </td>
        <td>BDT <%= (item.price * item.qty).toLocaleString() %></td>
        <td>
          <form action="/cart/remove" method="POST">
            <input type="hidden" name="id" value="<%= item.id %>">
            <button type="submit" class="btn btn-danger btn-sm">Remove</button>
          </form>
        </td>
      </tr>
      <% }); %>
    </tbody>
  </table>

  <div class="cart-summary">
    <p>Subtotal: BDT <%= subtotal.toLocaleString() %></p>
    <p>Delivery: <%= delivery === 0 ? 'FREE' : 'BDT ' + delivery.toLocaleString() %></p>
    <p class="total">Total: BDT <%= total.toLocaleString() %></p>
    <p style="color:#6a5a4a;font-size:12px;margin-top:8px;">Free delivery on orders above BDT <%= settings.freeDeliveryAbove.toLocaleString() %></p>
  </div>

  <div class="checkout-section">
    <h3>Delivery Conditions by Area</h3>
    <div style="overflow-x:auto;">
      <table class="orders-table">
        <thead><tr><th>Area</th><th>Charge</th><th>Delivery Time</th></tr></thead>
        <tbody>
          <% deliveryAreas.forEach(function(d) { %>
          <tr>
            <td><%= d.area %></td>
            <td>BDT <%= d.charge %></td>
            <td><%= d.deliveryTime %></td>
          </tr>
          <% }); %>
        </tbody>
      </table>
    </div>
  </div>

  <div class="checkout-section">
    <h3>Checkout</h3>
    <% if (!user) { %>
      <p style="color:#6a5a4a;margin-bottom:12px;">Please <a href="/signin">sign in</a> to checkout.</p>
    <% } else { %>
    <form action="/checkout" method="POST">
      <div class="form-group">
        <label>Delivery Area</label>
        <select name="deliveryArea" style="width:100%;padding:12px;background:#0a0a0a;border:1px solid #3a3a3a;color:#e0d5c8;">
          <% deliveryAreas.forEach(function(d) { %>
          <option value="<%= d.id %>"><%= d.area %> - BDT <%= d.charge %> (<%= d.deliveryTime %>)</option>
          <% }); %>
        </select>
      </div>
      <div class="form-group">
        <label>Delivery Address</label>
        <textarea name="deliveryAddress" required><%= user.address || 'Dhaka, Bangladesh' %></textarea>
      </div>
      <div class="form-group">
        <label>Phone Number</label>
        <input type="text" name="phone" value="<%= user.phone || '' %>" required>
      </div>
      <div class="form-group">
        <label>Payment Method</label>
        <div class="payment-options">
          <div class="payment-option">
            <input type="radio" name="paymentMethod" value="Cash on Delivery" id="cod" checked>
            <label for="cod">Cash on Delivery</label>
          </div>
          <div class="payment-option">
            <input type="radio" name="paymentMethod" value="bKash" id="bkash">
            <label for="bkash">bKash</label>
          </div>
          <div class="payment-option">
            <input type="radio" name="paymentMethod" value="Nagad" id="nagad">
            <label for="nagad">Nagad</label>
          </div>
          <div class="payment-option">
            <input type="radio" name="paymentMethod" value="Rocket" id="rocket">
            <label for="rocket">Rocket</label>
          </div>
        </div>
      </div>
      <button type="submit" class="btn btn-primary" style="width:100%;">Place Order - BDT <%= total.toLocaleString() %></button>
    </form>
    <% } %>
  </div>
  <% } else { %>
  <div class="cart-empty">
    <p>Your cart is empty</p>
    <a href="/shop" class="btn btn-secondary">Browse Products</a>
  </div>
  <% } %>
</section>
<%- include('partials/footer') %>
