<?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>Wishlist — 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;
}
.wishlist-top-actions {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 28px;
padding-bottom: 16px;
border-bottom: 1px solid var(--mid-gray);
}
.wishlist-count {
font-size: 11px;
letter-spacing: 0.1em;
color: var(--charcoal);
}
/* Wishlist grid */
.wishlist-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 28px;
}
.wishlist-card {
position: relative;
background: var(--white);
border: 1px solid var(--mid-gray);
transition: box-shadow 0.3s;
}
.wishlist-card:hover { box-shadow: 0 8px 30px rgba(0,0,0,0.1); }
.wishlist-card-img-wrap {
position: relative;
overflow: hidden;
aspect-ratio: 3/4;
background: var(--warm-gray);
}
.wishlist-card-img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
display: block;
}
.wishlist-card:hover .wishlist-card-img-wrap img { transform: scale(1.05); }
.wishlist-card-remove {
position: absolute;
top: 12px;
right: 12px;
width: 32px;
height: 32px;
background: var(--white);
border: none;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 13px;
color: var(--charcoal);
transition: color 0.2s, background 0.2s;
box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.wishlist-card-remove:hover { color: #c0392b; background: #fff5f5; }
.wishlist-card-body { padding: 16px; }
.wishlist-card-sku {
font-size: 9px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--charcoal);
margin-bottom: 4px;
}
.wishlist-card-name {
font-size: 16px;
font-weight: 400;
color: var(--black);
margin-bottom: 8px;
line-height: 1.35;
}
.wishlist-card-price {
font-size: 18px;
color: var(--black);
}
/* Empty */
.wishlist-empty {
text-align: center;
padding: 80px 20px;
}
.wishlist-empty i {
font-size: 60px;
color: var(--mid-gray);
margin-bottom: 24px;
display: block;
}
.wishlist-empty h3 {
font-size: 28px;
font-weight: 400;
color: var(--black);
margin-bottom: 10px;
}
.wishlist-empty p {
font-size: 12px;
color: var(--charcoal);
margin-bottom: 30px;
}
.btn-shop-now {
display: inline-block;
padding: 14px 44px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
background: var(--black);
color: var(--white);
text-decoration: none;
transition: background 0.2s;
}
.btn-shop-now:hover { background: var(--charcoal); }
@media (max-width: 600px) {
.wishlist-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}
</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;">My Wishlist</h1>
<p style="color: #888; letter-spacing: 2px; text-transform: uppercase; font-size: 0.9rem;">Save your favourite pieces and shop later.</p>
</div>
</div>
<div class="page-wrapper">
<div class="wishlist-top-actions">
<span class="wishlist-count" id="wishlistPageCount">Loading...</span>
</div>
<div class="wishlist-grid" id="wishlistGrid"></div>
<div class="wishlist-empty" id="wishlistEmpty" style="display:none;">
<i class="far fa-heart"></i>
<h3>Your wishlist is empty</h3>
<p>Browse our collections and heart the pieces you love.</p>
<a href="shop.php" class="btn-shop-now">Start Shopping</a>
</div>
</div>
<?php include 'inc/footer.php'; ?>
<script>
function getWishlist() {
try { return JSON.parse(localStorage.getItem('eoi_wishlist') || '[]'); } catch(e) { return []; }
}
function saveWishlist(wl) { localStorage.setItem('eoi_wishlist', JSON.stringify(wl)); }
function getCart() { try { return JSON.parse(localStorage.getItem('eoi_cart') || '[]'); } catch(e) { return []; } }
function saveCart(cart) { localStorage.setItem('eoi_cart', JSON.stringify(cart)); }
function escHtml(str) {
const d = document.createElement('div');
d.appendChild(document.createTextNode(str || ''));
return d.innerHTML;
}
function renderWishlist() {
const wl = getWishlist();
const grid = document.getElementById('wishlistGrid');
const empty = document.getElementById('wishlistEmpty');
const countEl = document.getElementById('wishlistPageCount');
const moveAllBtn = document.getElementById('moveAllBtn');
if (!wl.length) {
grid.style.display = 'none';
empty.style.display = 'block';
countEl.textContent = '0 saved items';
moveAllBtn.style.display = 'none';
return;
}
grid.style.display = 'grid';
empty.style.display = 'none';
countEl.textContent = wl.length + ' saved item' + (wl.length !== 1 ? 's' : '');
grid.innerHTML = '';
wl.forEach((item, idx) => {
const card = document.createElement('div');
card.className = 'wishlist-card';
const pdpUrl = `product.php?id=${escHtml(item.id || '')}`;
card.innerHTML = `
<div class="wishlist-card-img-wrap">
<a href="${pdpUrl}">
<img src="${escHtml(item.image || 'assets/placeholder-product.jpg')}" alt="${escHtml(item.name)}" />
</a>
<button class="wishlist-card-remove" onclick="removeWishlistItem(${idx})" title="Remove from wishlist">
<i class="fas fa-times"></i>
</button>
</div>
<div class="wishlist-card-body">
<a href="${pdpUrl}" style="text-decoration:none; color:inherit;">
<div class="wishlist-card-sku">${escHtml(item.sku || '')}</div>
<div class="wishlist-card-name">${escHtml(item.name)}</div>
<div class="wishlist-card-price">USD ${parseFloat(item.price || 0).toFixed(2)}</div>
</a>
</div>
`;
grid.appendChild(card);
});
}
function removeWishlistItem(idx) {
const wl = getWishlist();
wl.splice(idx, 1);
saveWishlist(wl);
renderWishlist();
if (typeof updateWishlistBadge === 'function') updateWishlistBadge();
}
function showToast(msg) {
let t = document.getElementById('pageToast');
if (!t) {
t = document.createElement('div');
t.id = 'pageToast';
t.style.cssText = 'position:fixed;bottom:30px;left:50%;transform:translateX(-50%);background:var(--black);color:var(--white);padding:12px 28px;font-family:var(--sans);font-size:12px;letter-spacing:0.1em;z-index:9999;border-radius:2px;opacity:0;transition:opacity 0.3s;';
document.body.appendChild(t);
}
t.textContent = msg;
t.style.opacity = '1';
setTimeout(() => { t.style.opacity = '0'; }, 2500);
}
document.addEventListener('DOMContentLoaded', renderWishlist);
</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>