<?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>