<%- include('../layouts/header') %>

<div class="container" style="padding-top: 3rem; padding-bottom: 6rem;">
  <div style="margin-bottom: 2rem;">
    <div style="font-size: 0.82rem; color: var(--text-light); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.5rem;">
      <a href="/" style="color: var(--text-muted);">Home</a> / 
      <span>Shopping Bag</span>
    </div>
    <h1 class="heading-lg">Your Atelier Shopping Bag</h1>
    <p style="color: var(--text-muted); margin-top: 0.35rem; font-size: 0.95rem;">Review your selected garments and sample fabric cuts before placing your inquiry via WhatsApp.</p>
  </div>

  <!-- B2B Order Notice -->
  <div style="background: #FDFBF7; border: 1px solid var(--border-subtle); border-left: 4px solid var(--accent-gold); border-radius: 8px; padding: 0.9rem 1.25rem; margin-bottom: 2rem; font-size: 0.86rem; color: var(--text-muted); display: flex; align-items: center; gap: 0.75rem;">
    <span style="font-size: 1.25rem; flex-shrink: 0;">💼</span>
    <div>
      <strong style="color: var(--text-main);">B2B Ordering System:</strong> Fabric samples are calculated in <strong>metres</strong> for trial cuts and sampling. Shirts, pants, and jeans are ordered in <strong>quantity</strong>. You can directly edit the quantity or metres of any item below.
    </div>
  </div>

  <div id="cart-main-wrapper">
    <!-- Empty Cart State -->
    <div id="cart-empty-state" style="display: none; text-align: center; padding: 5rem 1.5rem; background: #FFF; border: 1px dashed var(--border-strong); border-radius: var(--radius-md);">
      <div style="margin-bottom: 1.25rem; display: flex; justify-content: center; color: var(--accent-gold);">
        <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round">
          <path d="M14.625 9.841A2.62 2.62 0 0 1 12 12.458 2.62 2.62 0 0 1 9.375 9.84M6.697 19h10.606C18.24 19 19 18.257 19 17.34l-1.087-9.68c0-.917-.76-1.66-1.697-1.66H7.572c-.937 0-1.697.743-1.697 1.66L5 17.34c0 .917.76 1.66 1.697 1.66"/>
        </svg>
      </div>
      <h2 class="heading-md" style="margin-bottom: 0.75rem;">Your Bag is Empty</h2>
      <p style="color: var(--text-muted); margin-bottom: 2rem; max-width: 440px; margin-left: auto; margin-right: auto;">
        You have not added any bespoke shirts or textile samples to your selection yet.
      </p>
      <div style="display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;">
        <a href="/shop?category=shirts" class="btn btn-primary">Browse Shirts</a>
        <a href="/shop?category=fabric-samples" class="btn btn-outline">Order Fabric Samples</a>
      </div>
    </div>

    <!-- Active Cart Layout -->
    <div class="cart-layout">
      <!-- Items Column -->
      <div>
        <div class="cart-items-wrap" id="cart-items-container">
          <!-- Dynamically populated by cart.js -->
        </div>
      </div>

      <!-- Checkout & Delivery Details Column -->
      <div class="checkout-box" id="checkout-sidebar">
        <h3 class="heading-sm" style="margin-bottom: 1.25rem; letter-spacing: 0.05em;">Order Summary &amp; WhatsApp Consultation</h3>
        
        <div class="order-summary-row">
          <span>Subtotal</span>
          <span id="cart-subtotal-val" style="font-weight: 600; color: var(--text-main);">₹0</span>
        </div>
        <div class="order-summary-row">
          <span>Estimated Insured Courier</span>
          <span style="color: var(--color-success); font-weight: 600;">Complimentary</span>
        </div>
        <div class="order-summary-total">
          <span>Estimated Total</span>
          <span id="cart-total-val">₹0</span>
        </div>

        <div style="margin-top: 1.5rem; border-top: 1px solid var(--border-subtle); padding-top: 1.5rem;">
          <h4 style="font-size: 0.88rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 1rem;">
            Customer &amp; Delivery Details
          </h4>

          <div id="checkout-error-box" style="display: none; padding: 0.75rem 1rem; background: #FFEBEE; color: #C53030; border-radius: 4px; font-size: 0.85rem; margin-bottom: 1rem;"></div>

          <form id="whatsapp-checkout-form" onsubmit="handleWhatsAppCheckout(event)">
            <div class="form-group">
              <label class="form-label" for="customerName">Full Name *</label>
              <input type="text" id="customerName" name="customerName" class="form-input" placeholder="e.g. Rahul Sharma" required>
            </div>

            <div class="form-group">
              <label class="form-label" for="customerPhone">WhatsApp Mobile Number *</label>
              <input type="tel" id="customerPhone" name="customerPhone" class="form-input" placeholder="e.g. +91 98765 43210" required>
              <small style="color: var(--text-muted); font-size: 0.72rem;">We will send your order reference and tailoring updates here.</small>
            </div>

            <div class="form-group">
              <label class="form-label" for="customerEmail">Email Address (Optional)</label>
              <input type="email" id="customerEmail" name="customerEmail" class="form-input" placeholder="e.g. rahul@example.com">
            </div>

            <div class="form-group">
              <label class="form-label" for="deliveryAddress">Delivery Address</label>
              <textarea id="deliveryAddress" name="deliveryAddress" rows="2" class="form-textarea" placeholder="Flat / House No., Street, City, State, PIN Code"></textarea>
            </div>

            <div class="form-group">
              <label class="form-label" for="notes">Special Tailoring or Fit Notes (Optional)</label>
              <textarea id="notes" name="notes" rows="2" class="form-textarea" placeholder="e.g. Monogram request, sleeve length adjustment, specific collar preference"></textarea>
            </div>

            <div style="margin-top: 1.5rem;">
              <button type="submit" id="whatsapp-submit-btn" class="btn btn-whatsapp btn-block btn-lg">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
                  <path d="M12.04 2c-5.46 0-9.91 4.45-9.91 9.91 0 1.75.46 3.45 1.32 4.95L2.05 22l5.25-1.38c1.45.79 3.08 1.21 4.74 1.21 5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.9-7.01A9.816 9.816 0 0 0 12.04 2z"/>
                </svg>
                Order on WhatsApp
              </button>
            </div>

            <div style="font-size: 0.75rem; color: var(--text-muted); text-align: center; margin-top: 0.85rem; line-height: 1.5;">
              🔒 <strong>Inventory Transparency:</strong> Submitting on WhatsApp creates an official order inquiry. Our atelier confirms stock and records the sale before dispatch.
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

<%- include('../layouts/footer') %>
