<?php
session_start();
require_once __DIR__ . '/admin-panal/includes/db.php';
?>
<!DOCTYPE html>
<html lang="en">
<head>
       <!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-Z2X2T395KZ"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-Z2X2T395KZ');
</script>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Shopping Bag — Elegance of India</title>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />
  <link rel="stylesheet" href="style.css" />
  <style>
    .page-wrapper { max-width: 1200px; margin: 0 auto; padding: 40px 24px 80px; }
    .page-heading {
      font-size: 32px;
      font-weight: 400;
      color: var(--black);
      margin-bottom: 6px;
    }
    .page-subheading {
      font-size: 11px;
      letter-spacing: 0.1em;
      color: var(--charcoal);
      margin-bottom: 36px;
    }
    .cart-layout {
      display: grid;
      grid-template-columns: 1fr 360px;
      gap: 40px;
      align-items: flex-start;
    }
    /* ── Cart Items ── */
    .cart-items-table { width: 100%; border-collapse: collapse; }
    .cart-items-table thead th {
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--charcoal);
      border-bottom: 1px solid var(--mid-gray);
      padding: 0 0 14px;
      text-align: left;
    }
    .cart-items-table thead th:last-child { text-align: right; }
    .cart-row { border-bottom: 1px solid var(--mid-gray); }
    .cart-row td { padding: 24px 0; vertical-align: top; }
    .cart-product-cell { display: flex; gap: 18px; }
    .cart-product-img {
      width: 110px;
      height: 140px;
      object-fit: cover;
      flex-shrink: 0;
      background: var(--warm-gray);
    }
    .cart-product-info { flex: 1; }
    .cart-product-sku {
      font-size: 9px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--charcoal);
      margin-bottom: 4px;
    }
    .cart-product-name {
      font-size: 17px;
      font-weight: 400;
      color: var(--black);
      margin-bottom: 8px;
    }
    .cart-product-meta {
      font-size: 10px;
      letter-spacing: 0.06em;
      color: var(--charcoal);
      margin-bottom: 4px;
    }
    .cart-product-meta span { color: var(--black); font-weight: 600; }
    .cart-remove-link {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 10px;
      letter-spacing: 0.08em;
      color: var(--charcoal);
      text-decoration: none;
      margin-top: 12px;
      border-bottom: 1px solid transparent;
      transition: color 0.2s, border-color 0.2s;
      background: none;
      border: none;
      cursor: pointer;
      padding: 0;
    }
    .cart-remove-link:hover { color: #c0392b; }
    /* Qty selector */
    .qty-cell { vertical-align: top; padding-top: 28px !important; }
    .qty-selector {
      display: flex;
      align-items: center;
      border: 1px solid var(--mid-gray);
      width: fit-content;
    }
    .qty-btn {
      width: 36px;
      height: 36px;
      background: none;
      border: none;
      cursor: pointer;
      font-size: 14px;
      color: var(--charcoal);
      transition: background 0.2s;
    }
    .qty-btn:hover { background: var(--warm-gray); }
    .qty-input {
      width: 44px;
      height: 36px;
      text-align: center;
      border: none;
      border-left: 1px solid var(--mid-gray);
      border-right: 1px solid var(--mid-gray);
      font-family: var(--sans);
      font-size: 13px;
      color: var(--black);
      background: none;
      outline: none;
    }
    .price-cell {
      text-align: right;
      vertical-align: top;
      padding-top: 28px !important;
      font-size: 18px;
      color: var(--black);
    }
    /* Empty state */
    .cart-empty {
      text-align: center;
      padding: 60px 20px;
    }
    .cart-empty i {
      font-size: 48px;
      color: var(--mid-gray);
      margin-bottom: 20px;
      display: block;
    }
    .cart-empty h3 {
      font-size: 24px;
      font-weight: 400;
      color: var(--black);
      margin-bottom: 10px;
    }
    .cart-empty p {
      font-size: 12px;
      color: var(--charcoal);
      margin-bottom: 30px;
    }
    /* ── Order Summary ── */
    .order-summary {
      background: var(--warm-gray);
      padding: 28px 24px;
      position: sticky;
      top: 100px;
    }
    .summary-title {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--black);
      margin-bottom: 22px;
      padding-bottom: 14px;
      border-bottom: 1px solid var(--mid-gray);
    }
    .summary-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 12px;
      letter-spacing: 0.05em;
      color: var(--charcoal);
      margin-bottom: 12px;
    }
    .summary-row.total {
      font-size: 15px;
      font-weight: 700;
      color: var(--black);
      border-top: 1px solid var(--mid-gray);
      margin-top: 16px;
      padding-top: 16px;
    }
    .summary-row .label { }
    .summary-row .value { font-weight: 500; }
    .promo-input-group {
      display: flex;
      gap: 0;
      margin: 20px 0 24px;
    }
    .promo-input-group input {
      flex: 1;
      border: 1px solid var(--mid-gray);
      border-right: none;
      padding: 10px 14px;
      font-size: 11px;
      outline: none;
      background: var(--white);
    }
    .promo-input-group input:focus { border-color: var(--gold); }
    .promo-input-group button {
      padding: 10px 16px;
      background: var(--black);
      color: var(--white);
      border: 1px solid var(--black);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      cursor: pointer;
      transition: background 0.2s;
    }
    .promo-input-group button:hover { background: var(--charcoal); }
    .btn-checkout {
      width: 100%;
      padding: 17px 20px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.24em;
      text-transform: uppercase;
      background: var(--gold, #c9a96e);
      color: var(--white);
      border: none;
      cursor: pointer;
      transition: background 0.25s;
      display: block;
      text-align: center;
      text-decoration: none;
      margin-bottom: 12px;
    }
    .btn-checkout:hover { background: #b8954f; }
    .btn-continue-shopping {
      display: block;
      text-align: center;
      font-size: 10px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--charcoal);
      text-decoration: none;
      padding: 12px;
      border: 1px solid var(--mid-gray);
      transition: border-color 0.2s, color 0.2s;
    }
    .btn-continue-shopping:hover { border-color: var(--black); color: var(--black); }
    .summary-trust {
      margin-top: 20px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .summary-trust-item {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 10.5px;
      color: var(--charcoal);
    }
    .summary-trust-item i { color: var(--gold); font-size: 13px; width: 16px; text-align: center; }
    @media (max-width: 900px) {
      .cart-layout { grid-template-columns: 1fr; }
      .order-summary { position: static; }
    }
    @media (max-width: 600px) {
      .cart-items-table thead { display: none; }
      .cart-product-img { width: 80px; height: 100px; }
    }
  </style>
</head>
<body>
  <?php include 'inc/header.php'; ?>

<div class="page-header" style="background: #fdfbf8; padding: 60px 0; text-align: center; border-bottom: 1px solid #eee;">
    <div class="container">
        <h1 style="font-family: 'Playfair Display', serif; font-size: 3rem; margin-bottom: 10px;">Shopping Bag</h1>
        <p style="color: #888; letter-spacing: 2px; text-transform: uppercase; font-size: 0.9rem;" id="cartPageCount">Loading items...</p>
    </div>
</div>

<div class="page-wrapper">

    <div class="cart-layout">
      <!-- Cart Items -->
      <div>
        <table class="cart-items-table" id="cartPageTable">
          <thead>
            <tr>
              <th>Product</th>
              <th style="width:120px;">Quantity</th>
              <th style="width:100px; text-align:right;">Price</th>
            </tr>
          </thead>
          <tbody id="cartPageBody">
            <!-- Populated by JS -->
          </tbody>
        </table>
        <div class="cart-empty" id="cartEmptyState" style="display:none;">
          <i class="fas fa-shopping-bag"></i>
          <h3>Your bag is empty</h3>
          <p>Explore our luxury collection and find something you love.</p>
          <a href="shop.php" class="btn-checkout" style="display:inline-block;width:auto;padding:14px 40px;">Shop All</a>
        </div>
      </div>

      <!-- Order Summary -->
      <div class="order-summary">
        <div class="summary-title">Order Summary</div>
        <div class="summary-row">
          <span class="label">Subtotal</span>
          <span class="value" id="summarySubtotal">USD 0.00</span>
        </div>
        <div class="summary-row">
          <span class="label">Shipping</span>
          <span class="value" style="color:var(--gold)">Free</span>
        </div>
        <div class="summary-row">
          <span class="label">Tax</span>
          <span class="value" id="summaryTax">USD 0.00</span>
        </div>
        <!-- <div class="promo-input-group">
          <input type="text" id="promoCode" placeholder="Promo / Gift Code" />
          <button onclick="applyPromo()">Apply</button>
        </div> -->
        <div class="summary-row total">
          <span class="label">Total</span>
          <span class="value" id="summaryTotal">USD 0.00</span>
        </div>
        <a href="checkout.php" class="btn-checkout" id="checkoutBtn">
          <i class="fas fa-lock" style="margin-right:8px;"></i> Proceed to Checkout
        </a>
        <a href="shop.php" class="btn-continue-shopping">Continue Shopping</a>
        <div class="summary-trust">
          <div class="summary-trust-item"><i class="fas fa-shield-alt"></i> Secure SSL checkout</div>
          <div class="summary-trust-item"><i class="fas fa-undo"></i> Easy returns within 14 days</div>
          <div class="summary-trust-item"><i class="fas fa-truck"></i> Free worldwide shipping</div>
        </div>
      </div>
    </div>
  </div>

  <?php include 'inc/footer.php'; ?>

  <script>
  // ── Cart Page Logic ──
  // This uses localStorage to store cart items.
  // When "Add to Bag" is clicked on product.php, items are saved here.
  function getCart() {
    try { return JSON.parse(localStorage.getItem('eoi_cart') || '[]'); } catch(e) { return []; }
  }
  function saveCart(cart) {
    localStorage.setItem('eoi_cart', JSON.stringify(cart));
  }

  function renderCart() {
    const cart = getCart();
    const tbody = document.getElementById('cartPageBody');
    const emptyState = document.getElementById('cartEmptyState');
    const tableEl = document.getElementById('cartPageTable');
    const countEl = document.getElementById('cartPageCount');

    if (!cart.length) {
      tableEl.style.display = 'none';
      emptyState.style.display = 'block';
      countEl.textContent = '0 items in your bag';
      updateSummary(0);
      return;
    }

    tableEl.style.display = 'table';
    emptyState.style.display = 'none';
    countEl.textContent = cart.length + ' item' + (cart.length !== 1 ? 's' : '') + ' in your bag';
    tbody.innerHTML = '';

    let subtotal = 0;
    cart.forEach((item, idx) => {
      const lineTotal = (parseFloat(item.price) || 0) * (parseInt(item.qty) || 1);
      subtotal += lineTotal;
      const tr = document.createElement('tr');
      tr.className = 'cart-row';
      tr.innerHTML = `
        <td>
          <div class="cart-product-cell">
            <img class="cart-product-img" src="${escHtml(item.image || 'assets/placeholder-product.jpg')}" alt="${escHtml(item.name)}" onerror="this.src='assets/placeholder-product.jpg'" />
            <div class="cart-product-info">
              <div class="cart-product-sku">${escHtml(item.sku || '')}</div>
              <div class="cart-product-name">${escHtml(item.name)}</div>
              ${item.swatch ? `<div class="cart-product-meta">Design: <span>${escHtml(item.swatch)}</span></div>` : ''}
              ${item.stitch ? `<div class="cart-product-meta">Stitching: <span>${escHtml(item.stitch)}</span></div>` : ''}
              ${item.size ? `<div class="cart-product-meta">Size: <span>${escHtml(item.size)}</span></div>` : ''}
              ${item.addons && item.addons.length > 0 ? item.addons.map(a => `<div class="cart-product-meta">Add-on: <span>${escHtml(a.label)} (+USD ${parseFloat(a.price).toFixed(2)})</span></div>`).join('') : ''}
              <button class="cart-remove-link" onclick="removeCartItem(${idx})"><i class="fas fa-times"></i> Remove</button>
            </div>
          </div>
        </td>
        <td class="qty-cell">
          <div class="qty-selector">
            <button class="qty-btn" onclick="changeQtyPage(${idx}, -1)"><i class="fas fa-minus"></i></button>
            <input class="qty-input" type="number" value="${item.qty || 1}" min="1" onchange="setQtyPage(${idx}, this.value)" />
            <button class="qty-btn" onclick="changeQtyPage(${idx}, 1)"><i class="fas fa-plus"></i></button>
          </div>
        </td>
        <td class="price-cell">USD ${lineTotal.toFixed(2)}</td>
      `;
      tbody.appendChild(tr);
    });

    updateSummary(subtotal);
  }

  function escHtml(str) {
    const d = document.createElement('div');
    d.appendChild(document.createTextNode(str));
    return d.innerHTML;
  }

  function updateSummary(subtotal) {
    const tax = subtotal * 0;
    const total = subtotal + tax;
    
    ['summarySubtotal', 'summaryTax', 'summaryTotal'].forEach(id => {
      const el = document.getElementById(id);
      if (el) el.removeAttribute('data-original-usd');
    });

    document.getElementById('summarySubtotal').textContent = 'USD ' + subtotal.toFixed(2);
    document.getElementById('summaryTax').textContent = 'USD ' + tax.toFixed(2);
    document.getElementById('summaryTotal').textContent = 'USD ' + total.toFixed(2);

    if (typeof window.refreshCurrencyConversion === 'function') {
      setTimeout(window.refreshCurrencyConversion, 50);
    }
  }

  function removeCartItem(idx) {
    const cart = getCart();
    cart.splice(idx, 1);
    saveCart(cart);
    renderCart();
    updateHeaderCartCount();
  }

  function changeQtyPage(idx, delta) {
    const cart = getCart();
    cart[idx].qty = Math.max(1, (parseInt(cart[idx].qty) || 1) + delta);
    saveCart(cart);
    renderCart();
    updateHeaderCartCount();
  }

  function setQtyPage(idx, val) {
    const cart = getCart();
    cart[idx].qty = Math.max(1, parseInt(val) || 1);
    saveCart(cart);
    renderCart();
    updateHeaderCartCount();
  }

  function applyPromo() {
    const code = document.getElementById('promoCode').value.trim();
    if (!code) return;
    alert('Promo code "' + code + '" is not valid or has expired.');
  }

  function updateHeaderCartCount() {
    const cart = getCart();
    const badge = document.getElementById('cartBadge');
    if (badge) {
      const totalQty = cart.reduce((sum, i) => sum + (parseInt(i.qty) || 1), 0);
      badge.textContent = totalQty;
      badge.style.display = totalQty > 0 ? 'flex' : 'none';
    }
  }

  document.addEventListener('DOMContentLoaded', () => {
    renderCart();
    updateHeaderCartCount();
  });
  </script>
  <script>
    // Force header and scroll reset on load to prevent clipping
    window.scrollTo(0, 0);
    document.body.style.overflow = '';
    // Ensure mobile menu is closed
    const mobBtn = document.getElementById('mobileMenuBtn');
    if (mobBtn) mobBtn.classList.remove('open', 'active');
  </script>
</body>
</html>
