๐ header.php
๐ Path: /home/u621169360/domains/papayawhip-cod-251399.hostingersite.com/public_html/inc/header.php
๐ Size: 62.4 KB
๐ Perm: 0644
๐ MIME: text/x-php
<?php
// โโ GLOBAL SECURITY BOOTSTRAP โ protects every page โโโโโโโโโโ
require_once __DIR__ . '/secure.php';
require_once __DIR__ . '/../admin-panal/includes/db.php';
// Fetch categories
$stmtCats = $pdo->query("SELECT * FROM categories ORDER BY sort_order, name");
$navCategories = $stmtCats->fetchAll(PDO::FETCH_ASSOC);
// Fetch subcategories
$stmtSubs = $pdo->query("SELECT * FROM subcategories ORDER BY name");
$allSubs = $stmtSubs->fetchAll(PDO::FETCH_ASSOC);
// Group subcategories by category_id
$subsByCat = [];
foreach ($allSubs as $sub) {
if (!isset($subsByCat[$sub['category_id']])) {
$subsByCat[$sub['category_id']] = [];
}
$subsByCat[$sub['category_id']][] = $sub;
}
$isLoggedIn = isset($_SESSION['customer_id']);
$customerName = $isLoggedIn ? $_SESSION['customer_name'] : '';
// โโ Fetch Announcements โโ
$stmtAnn = $pdo->query("SELECT * FROM announcements WHERE is_active = 1 ORDER BY sort_order ASC, created_at DESC");
$announcements = $stmtAnn->fetchAll(PDO::FETCH_ASSOC);
?>
<style>
/* โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
PROFESSIONAL HEADER โ ELEGANCE OF INDIA
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
/* โโ Announcement Bar โโ */
.announcement-bar {
background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
color: #c9a96e;
width: 100%;
overflow: hidden;
position: relative;
height: 36px;
display: flex;
align-items: center;
}
.announcement-bar-content {
display: flex;
animation: marqueeScroll 28s linear infinite;
white-space: nowrap;
gap: 0;
}
.announcement-bar:hover .announcement-bar-content {
animation-play-state: paused;
}
.announcement-item {
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 0 56px;
display: inline-flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.announcement-item i { color: #e8c87c; font-size: 12px; }
@keyframes marqueeScroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
/* โโ Site Header โโ */
.site-header {
background: #fff;
position: sticky;
top: 0;
z-index: 999;
box-shadow: 0 2px 20px rgba(0,0,0,0.08);
border-bottom: 1px solid #f0ebe3;
}
/* โโ Top utility strip โโ */
.header-top-strip {
background: #faf8f5;
border-bottom: 1px solid #ede8df;
padding: 6px 0;
}
.header-top-inner {
max-width: 1320px;
margin: 0 auto;
padding: 0 24px;
display: flex;
justify-content: space-between;
align-items: center;
}
.header-top-left {
display: flex;
align-items: center;
gap: 20px;
}
.header-top-link {
font-size: 10.5px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #777;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 5px;
transition: color 0.2s;
}
.header-top-link:hover { color: #c9a96e; }
.header-top-link i { font-size: 11px; }
.header-top-right {
display: flex;
align-items: center;
gap: 18px;
}
.header-top-currency {
font-size: 10.5px;
letter-spacing: 0.08em;
color: #888;
text-transform: uppercase;
}
/* โโ Currency Converter Dropdown โโ */
.currency-converter {
position: relative;
display: inline-flex;
align-items: center;
}
.currency-trigger {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 12px;
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #666;
background: transparent;
border: 1px solid #e0dbd3;
border-radius: 3px;
cursor: pointer;
transition: all 0.25s;
font-family: inherit;
line-height: 1;
}
.currency-trigger:hover,
.currency-trigger.open {
color: #c9a96e;
border-color: #c9a96e;
background: rgba(201,169,110,0.06);
}
.currency-trigger i.fa-chevron-down {
font-size: 7px;
transition: transform 0.25s;
}
.currency-trigger.open i.fa-chevron-down {
transform: rotate(180deg);
}
.currency-trigger .currency-flag {
font-size: 14px;
line-height: 1;
}
.currency-dropdown {
position: absolute;
top: calc(100% + 8px);
right: 0;
background: #fff;
min-width: 280px;
max-height: 380px;
overflow-y: auto;
box-shadow: 0 16px 48px rgba(0,0,0,0.14);
border: 1px solid #ede8df;
border-radius: 6px;
padding: 0;
opacity: 0;
visibility: hidden;
transform: translateY(6px);
transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
z-index: 1100;
}
.currency-dropdown.open {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.currency-dropdown-header {
padding: 12px 16px 10px;
border-bottom: 1px solid #f0ebe3;
display: flex;
align-items: center;
gap: 8px;
}
.currency-dropdown-header i {
color: #c9a96e;
font-size: 13px;
}
.currency-dropdown-header span {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #1a1a1a;
}
.currency-search-wrap {
padding: 8px 12px;
border-bottom: 1px solid #f0ebe3;
}
.currency-search {
width: 100%;
padding: 7px 10px;
font-size: 12px;
border: 1px solid #e0dbd3;
border-radius: 3px;
outline: none;
font-family: inherit;
color: #333;
transition: border-color 0.2s;
}
.currency-search:focus {
border-color: #c9a96e;
}
.currency-search::placeholder {
color: #bbb;
}
.currency-list {
list-style: none;
margin: 0;
padding: 6px 0;
}
.currency-list li {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 16px;
cursor: pointer;
transition: background 0.2s, color 0.2s;
font-size: 12.5px;
color: #444;
letter-spacing: 0.02em;
}
.currency-list li:hover {
background: #faf8f5;
color: #1a1a1a;
}
.currency-list li.active {
background: #f5f0e8;
color: #1a1a1a;
font-weight: 600;
}
.currency-list li .cur-flag {
font-size: 16px;
line-height: 1;
flex-shrink: 0;
}
.currency-list li .cur-code {
font-weight: 600;
letter-spacing: 0.08em;
min-width: 36px;
}
.currency-list li .cur-name {
color: #888;
font-size: 11.5px;
}
.currency-list li .cur-check {
margin-left: auto;
color: #c9a96e;
font-size: 11px;
opacity: 0;
}
.currency-list li.active .cur-check {
opacity: 1;
}
.currency-loading {
display: none;
align-items: center;
justify-content: center;
gap: 8px;
padding: 16px;
font-size: 11px;
color: #999;
letter-spacing: 0.06em;
}
.currency-loading.show {
display: flex;
}
.currency-loading i {
animation: currSpin 1s linear infinite;
}
@keyframes currSpin {
to { transform: rotate(360deg); }
}
@media (max-width: 900px) {
.currency-converter { display: none; }
}
/* โโ Mobile Currency Selector โโ */
.mobile-currency-strip {
display: none;
padding: 10px 20px;
border-bottom: 1px solid #ede8df;
background: #faf8f5;
}
@media (max-width: 900px) {
.mobile-currency-strip { display: block; }
}
.mobile-currency-select {
width: 100%;
padding: 9px 12px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.08em;
border: 1px solid #e0dbd3;
border-radius: 3px;
background: #fff;
color: #333;
cursor: pointer;
font-family: inherit;
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23c9a96e'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
}
/* โโ Main Header Row โโ */
.header-main {
max-width: 1320px;
margin: 0 auto;
padding: 20px 24px;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 16px;
}
/* Logo */
.site-logo {
text-align: center;
text-decoration: none;
display: block;
}
.site-logo-text {
font-family: 'Raleway', serif;
font-size: clamp(20px, 3vw, 30px);
font-weight: 300;
letter-spacing: 0.22em;
text-transform: uppercase;
color: #1a1a1a;
line-height: 1;
text-decoration: none;
}
.site-logo-sub {
display: block;
font-size: 8px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: #c9a96e;
margin-top: 3px;
}
/* โโ Left: Mobile menu + desktop care โโ */
.header-left-group {
display: flex;
align-items: center;
gap: 12px;
}
.header-care-link {
font-size: 10.5px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #555;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 6px;
transition: color 0.2s;
white-space: nowrap;
}
.header-care-link:hover { color: #c9a96e; }
.header-care-link i { font-size: 14px; color: #c9a96e; }
@media(max-width:900px){ .header-care-link { display: none; } }
/* โโ Right: Icons โโ */
.header-right-group {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 4px;
}
.hdr-icon-btn {
position: relative;
width: 44px;
height: 44px;
border: none;
background: none;
cursor: pointer;
color: #1a1a1a;
font-size: 17px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: background 0.2s, color 0.2s;
text-decoration: none;
}
.hdr-icon-btn:hover { background: #f9f5ef; color: #c9a96e; }
.hdr-icon-btn.active { color: #c9a96e; }
/* cart badge */
.hdr-badge {
position: absolute;
top: 5px;
right: 5px;
min-width: 16px;
height: 16px;
background: #c9a96e;
color: #fff;
font-size: 9px;
font-weight: 700;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 3px;
line-height: 1;
pointer-events: none;
}
/* โโ Account Dropdown โโ */
.account-dropdown { position: relative; }
.account-menu {
position: absolute;
top: calc(100% + 8px);
right: 0;
background: #fff;
min-width: 200px;
box-shadow: 0 16px 48px rgba(0,0,0,0.12);
border: 1px solid #ede8df;
border-radius: 6px;
padding: 8px 0;
opacity: 0;
visibility: hidden;
transform: translateY(6px);
transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
z-index: 1002;
}
.account-dropdown:hover .account-menu,
.account-menu.open {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.account-menu-header {
padding: 12px 18px 10px;
border-bottom: 1px solid #f0ebe3;
margin-bottom: 4px;
}
.account-menu-header span {
display: block;
font-size: 10px;
color: #aaa;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.account-menu-header strong {
display: block;
font-size: 14px;
color: #1a1a1a;
margin-top: 2px;
font-weight: 600;
}
.account-menu a {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 18px;
color: #444;
font-size: 13px;
text-decoration: none;
transition: background 0.2s, color 0.2s;
}
.account-menu a i { width: 16px; color: #c9a96e; }
.account-menu a:hover { background: #faf8f5; color: #c9a96e; }
/* โโ Desktop Navigation โโ */
.header-nav-wrap {
background: #1a1a1a;
border-top: 2px solid #c9a96e;
}
.header-nav-inner {
max-width: 1320px;
margin: 0 auto;
padding: 0 24px;
position: relative;
}
.main-nav { display: flex; align-items: center; justify-content: center; }
.main-nav > ul {
list-style: none;
margin: 0; padding: 0;
display: flex;
align-items: center;
flex-wrap: wrap;
}
.main-nav > ul > li {
/* mega menu is relative to header-nav-inner instead */
}
.main-nav > ul > li > a {
display: block;
padding: 14px 18px;
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.15em;
text-transform: uppercase;
color: #e8e0d4;
text-decoration: none;
transition: color 0.2s;
white-space: nowrap;
display: flex;
align-items: center;
gap: 5px;
}
.main-nav > ul > li > a i.fa-chevron-down {
font-size: 8px;
transition: transform 0.25s;
}
.main-nav > ul > li:hover > a,
.main-nav > ul > li > a:hover {
color: #c9a96e;
}
.main-nav > ul > li:hover > a i.fa-chevron-down {
transform: rotate(180deg);
}
/* Mega panel */
.mega-panel {
position: absolute;
top: 100%;
left: 0;
right: 0;
width: 100%;
box-sizing: border-box;
background: #fff;
box-shadow: 0 10px 40px rgba(0,0,0,0.08);
border-top: 2px solid #c9a96e;
border-radius: 0 0 4px 4px;
padding: 30px;
display: flex;
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
z-index: 1001;
}
.has-mega:hover .mega-panel {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.mega-col {
flex: 1;
border-right: 1px solid #f0ebe3;
padding: 0 30px;
}
.mega-col:first-child {
padding-left: 0;
}
.mega-col:last-child {
border-right: none;
padding-right: 0;
}
.mega-col-title {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
color: #1a1a1a;
margin-bottom: 20px;
}
.mega-col ul { list-style: none; margin: 0; padding: 0; }
.mega-col ul li a {
display: block;
padding: 8px 0;
font-size: 13px;
letter-spacing: 0.03em;
color: #666;
text-decoration: none;
text-transform: capitalize;
transition: color 0.2s, padding-left 0.2s;
}
.mega-col ul li a:hover {
color: #c9a96e;
padding-left: 5px;
}
/* โโ Search Bar Row โโ */
.header-search-row {
display: none;
background: #fff;
border-top: 1px solid #ede8df;
padding: 12px 24px;
}
.header-search-row.open { display: flex; }
.header-search-form {
max-width: 640px;
width: 100%;
margin: 0 auto;
display: flex;
align-items: center;
gap: 10px;
border: 1.5px solid #c9a96e;
padding: 8px 16px;
border-radius: 4px;
background: #faf8f5;
}
.header-search-form > i { color: #c9a96e; font-size: 14px; flex-shrink: 0; }
.header-search-form input {
flex: 1;
border: none;
background: none;
font-size: 13px;
color: #1a1a1a;
outline: none;
font-family: inherit;
letter-spacing: 0.04em;
}
.header-search-form input::placeholder { color: #bbb; }
.search-row-close {
background: none;
border: none;
cursor: pointer;
color: #999;
font-size: 16px;
line-height: 1;
padding: 0;
transition: color 0.2s;
}
.search-row-close:hover { color: #c9a96e; }
/* โโโโโโโโโโโ MOBILE MENU โโโโโโโโโโโ */
.mobile-menu-btn {
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
width: 42px;
height: 42px;
border: none;
background: none;
cursor: pointer;
padding: 0;
border-radius: 6px;
transition: background 0.2s;
}
.mobile-menu-btn:hover { background: #f0ebe3; }
.mobile-menu-btn span {
display: block;
width: 22px;
height: 2px;
background: #1a1a1a;
border-radius: 2px;
transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
transform-origin: center;
}
.mobile-menu-btn.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobile-menu-btn.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.mobile-menu-btn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* Mobile Overlay */
.mobile-nav-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,0.55);
z-index: 1199;
backdrop-filter: blur(2px);
}
.mobile-nav-overlay.open { display: block; }
/* Mobile Drawer */
.mobile-drawer {
position: fixed;
top: 0;
left: -100%;
width: min(320px, 88vw);
height: 100dvh;
background: #fff;
z-index: 1200;
display: flex;
flex-direction: column;
transition: left 0.35s cubic-bezier(0.4,0,0.2,1);
overflow: hidden;
}
.mobile-drawer.open { left: 0; }
.mobile-drawer-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 20px;
border-bottom: 1px solid #ede8df;
background: #1a1a1a;
flex-shrink: 0;
}
.mobile-drawer-logo {
font-family: 'Raleway', serif;
font-size: 16px;
font-weight: 300;
letter-spacing: 0.2em;
text-transform: uppercase;
color: #e8e0d4;
}
.mobile-drawer-logo span { color: #c9a96e; }
.mobile-drawer-close {
background: none;
border: none;
color: #aaa;
font-size: 20px;
cursor: pointer;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: background 0.2s, color 0.2s;
}
.mobile-drawer-close:hover { background: rgba(255,255,255,0.1); color: #fff; }
/* Mobile user strip */
.mobile-user-strip {
background: #faf8f5;
border-bottom: 1px solid #ede8df;
padding: 12px 20px;
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
.mobile-user-strip i { color: #c9a96e; font-size: 18px; flex-shrink: 0; }
.mobile-user-name { font-size: 13px; font-weight: 600; color: #1a1a1a; }
.mobile-user-sub { font-size: 10.5px; color: #999; letter-spacing: 0.05em; }
/* Mobile nav list */
.mobile-nav-list {
flex: 1;
overflow-y: auto;
padding: 8px 0;
}
.mobile-nav-list ul { list-style: none; margin: 0; padding: 0; }
.mobile-nav-list > ul > li { border-bottom: 1px solid #f5f0e8; }
.mobile-nav-item-link {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 20px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #1a1a1a;
text-decoration: none;
transition: color 0.2s, background 0.2s;
cursor: pointer;
}
.mobile-nav-item-link:hover { color: #c9a96e; background: #faf8f5; }
.mobile-nav-item-link i { font-size: 9px; color: #aaa; transition: transform 0.25s; }
.mobile-nav-item-link.open i { transform: rotate(90deg); color: #c9a96e; }
.mobile-sub-list {
display: none;
background: #faf8f5;
padding: 4px 0;
}
.mobile-sub-list.open { display: block; }
.mobile-sub-list li a {
display: block;
padding: 10px 20px 10px 36px;
font-size: 12px;
letter-spacing: 0.06em;
color: #555;
text-decoration: none;
transition: color 0.2s, background 0.2s;
}
.mobile-sub-list li a::before {
content: 'โ';
margin-right: 8px;
color: #c9a96e;
font-size: 10px;
}
.mobile-sub-list li a:hover { color: #c9a96e; background: #f3ede0; }
/* Level 2 Accordions */
.nested-toggle {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 20px 12px 36px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #333;
cursor: pointer;
border-bottom: 1px solid #ede8df;
background: #faf8f5;
transition: color 0.2s;
}
.nested-toggle:hover { color: #c9a96e; }
.nested-toggle i { font-size: 9px; color: #aaa; transition: transform 0.25s; }
.nested-toggle.open i { transform: rotate(180deg); color: #c9a96e; }
.nested-panel {
display: none;
background: #fff;
}
.nested-panel.open { display: block; }
.nested-panel li a {
display: block;
padding: 10px 20px 10px 50px;
font-size: 12px;
letter-spacing: 0.05em;
color: #555;
text-decoration: none;
border-bottom: 1px solid #f9f5ef;
}
.nested-panel li a::before {
content: 'โ';
margin-right: 8px;
color: #c9a96e;
font-size: 10px;
}
.nested-panel li a:hover { color: #c9a96e; background: #faf8f5; }
/* Mobile drawer footer */
.mobile-drawer-footer {
padding: 16px 20px;
border-top: 1px solid #ede8df;
display: flex;
gap: 10px;
flex-wrap: wrap;
flex-shrink: 0;
}
.mobile-footer-btn {
flex: 1;
min-width: 110px;
padding: 11px 12px;
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
text-align: center;
text-decoration: none;
border: 1px solid #1a1a1a;
color: #1a1a1a;
background: transparent;
cursor: pointer;
border-radius: 2px;
transition: background 0.2s, color 0.2s;
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
}
.mobile-footer-btn:hover,
.mobile-footer-btn.gold {
background: #c9a96e;
border-color: #c9a96e;
color: #fff;
}
.mobile-footer-btn.gold { background: #c9a96e; border-color: #c9a96e; color: #fff; }
/* โโโ RESPONSIVE BREAKPOINTS โโโ */
@media (max-width: 900px) {
.mobile-menu-btn { display: flex; }
.header-nav-wrap { display: none; }
.header-top-strip { display: none; }
.header-main { padding: 14px 16px; }
.desktop-only-icon { display: none !important; }
}
@media (max-width: 600px) {
.header-main { padding: 10px 14px; grid-template-columns: 44px 1fr auto; }
.hdr-icon-btn { width: 38px; height: 38px; font-size: 16px; }
.site-logo-text { font-size: 18px; letter-spacing: 0.16em; }
.site-logo-sub { display: none; }
.header-right-group { gap: 4px; }
}
/* โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
FIX: LOGIN MODAL UI (Direct Inject)
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
.login-modal {
position: fixed !important;
inset: 0 !important;
z-index: 9999 !important;
background: rgba(0,0,0,0.7) !important;
display: none;
align-items: center;
justify-content: center;
padding: 20px;
}
.login-modal.open {
display: flex !important;
}
.login-modal-inner {
background: #ffffff !important;
width: 100%;
max-width: 860px;
display: grid !important;
grid-template-columns: 1fr 1fr;
position: relative;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
overflow: hidden;
}
.login-img-panel {
position: relative;
min-height: 480px;
background: #f0f0f0;
}
.login-img-panel img {
width: 100%; height: 100%; object-fit: cover;
}
.login-form-panel {
background: #ffffff !important; /* Force solid background */
padding: 50px 40px;
display: flex;
flex-direction: column;
}
.login-close {
position: absolute; top: 15px; right: 15px;
width: 34px; height: 34px; background: #fff; border: 1px solid #ddd;
border-radius: 50%; color: #333; z-index: 10; cursor: pointer;
display: flex; align-items: center; justify-content: center;
}
.login-modal-logo {
font-family: serif; font-size: 1.6rem; margin-bottom: 25px; color: #1a1a1a;
}
.lf-group label {
display: block; font-size: 10px; text-transform: uppercase; color: #888; margin-bottom: 5px;
}
.lf-group input {
width: 100%; padding: 12px 0; border: none; border-bottom: 1px solid #ddd;
background: transparent; outline: none; margin-bottom: 20px;
}
.btn-login-submit {
background: #1a1a1a !important; color: #fff !important; width: 100%;
padding: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.15em;
margin-bottom: 15px; border: none; cursor: pointer;
}
@media (max-width: 640px) {
.login-modal-inner { grid-template-columns: 1fr; }
.login-img-panel { display: none; }
}
</style>
<!-- ANNOUNCEMENT BAR -->
<?php if (!empty($announcements)): ?>
<div class="announcement-bar">
<div class="announcement-bar-content">
<?php
// Double them for the seamless marquee effect
$marqueeList = array_merge($announcements, $announcements);
foreach ($marqueeList as $ann): ?>
<div class="announcement-item">
<?php if (!empty($ann['icon'])): ?><i class="<?= htmlspecialchars($ann['icon']) ?>"></i><?php endif; ?>
<?= htmlspecialchars($ann['text']) ?>
</div>
<?php endforeach; ?>
</div>
</div>
<?php endif; ?>
<!-- TOP UTILITY STRIP (desktop only) -->
<div class="header-top-strip">
<div class="header-top-inner">
<div class="header-top-left">
<a href="https://wa.me/9168792308" class="header-top-link" target="_blank">
<i class="fab fa-whatsapp"></i> WhatsApp Us
</a>
<!-- <a href="gallery.php" class="header-top-link">
<i class="fas fa-images"></i> Gallery
</a> -->
</div>
<div class="header-top-right">
<!-- Currency Converter -->
<div class="currency-converter" id="currencyConverter">
<button class="currency-trigger" id="currencyTrigger" aria-label="Select Currency">
<span class="currency-flag" id="currFlagDisplay">๐บ๐ธ</span>
<span id="currCodeDisplay">USD</span>
<i class="fas fa-chevron-down"></i>
</button>
<div class="currency-dropdown" id="currencyDropdown">
<div class="currency-dropdown-header">
<i class="fas fa-coins"></i>
<span>Select Currency</span>
</div>
<div class="currency-search-wrap">
<input type="text" class="currency-search" id="currencySearch" placeholder="Search currency..." autocomplete="off" />
</div>
<div class="currency-loading" id="currencyLoading">
<i class="fas fa-spinner"></i> Loading rates...
</div>
<ul class="currency-list" id="currencyList"></ul>
</div>
</div>
<?php if ($isLoggedIn): ?>
<a href="my-orders.php" class="header-top-link"><i class="fas fa-box-open"></i> My Orders</a>
<?php else: ?>
<span class="header-top-link" id="topSignInLink" style="cursor:pointer;"><i class="far fa-user"></i> Sign In</span>
<?php endif; ?>
</div>
</div>
</div>
<!-- MAIN HEADER -->
<header class="site-header" id="siteHeader">
<div class="header-main">
<!-- LEFT -->
<div class="header-left-group">
<button class="mobile-menu-btn" id="mobileMenuBtn" aria-label="Open menu">
<span></span><span></span><span></span>
</button>
<a href="https://wa.me/9168792308" target="_blank" class="header-care-link">
<i class="fab fa-whatsapp"></i>
<span>Customer Care</span>
</a>
</div>
<!-- CENTER: Logo -->
<a href="index.php" class="site-logo">
<span class="site-logo-text">Elegance of India</span>
<span class="site-logo-sub">Luxury Fashion</span>
</a>
<!-- RIGHT: Icon group -->
<div class="header-right-group">
<button class="hdr-icon-btn" id="searchToggleBtn" aria-label="Search" title="Search">
<i class="fas fa-search"></i>
</button>
<?php if ($isLoggedIn): ?>
<div class="account-dropdown">
<button class="hdr-icon-btn active" id="accountBtn" aria-label="Account" title="Account">
<i class="fas fa-user-check"></i>
</button>
<div class="account-menu" id="accountMenu">
<div class="account-menu-header">
<span>Signed in as</span>
<strong><?= htmlspecialchars($customerName) ?></strong>
</div>
<a href="my-orders.php"><i class="fas fa-box-open"></i> My Orders</a>
<a href="#" id="menuLogoutBtn"><i class="fas fa-sign-out-alt"></i> Logout</a>
</div>
</div>
<?php else: ?>
<button class="hdr-icon-btn" id="loginBtn" aria-label="Sign In" title="Sign In">
<i class="far fa-user"></i>
</button>
<?php endif; ?>
<button class="hdr-icon-btn desktop-only-icon" id="wishlistBtn" aria-label="Wishlist" title="Wishlist" onclick="window.location.href='wishlist.php'">
<i class="far fa-heart"></i>
<span id="wishlistBadge" class="hdr-badge" style="display:none;"></span>
</button>
<button class="hdr-icon-btn cart-icon desktop-only-icon" id="cartBtn" aria-label="Shopping bag" title="Cart" onclick="window.location.href='cart.php'">
<i class="fas fa-shopping-bag"></i>
<span id="cartBadge" class="hdr-badge" style="display:none;"></span>
</button>
</div>
</div><!-- /header-main -->
<!-- SEARCH ROW -->
<div class="header-search-row" id="headerSearchRow">
<form class="header-search-form" id="headerSearchForm" action="search.php" method="GET" role="search">
<i class="fas fa-search"></i>
<input type="search" name="q" id="headerSearchInput" placeholder="Search for sarees, lehengas, suits..." autocomplete="off" aria-label="Search" required />
<button type="button" class="search-row-close" id="searchClose"><i class="fas fa-times"></i></button>
</form>
</div>
<!-- DESKTOP NAVIGATION -->
<div class="header-nav-wrap">
<div class="header-nav-inner">
<nav class="main-nav" id="mainNav">
<ul>
<?php foreach ($navCategories as $cat): ?>
<?php if (!empty($subsByCat[$cat['id']])): ?>
<li class="has-mega">
<a href="shop.php?cat=<?= $cat['id'] ?>">
<?= htmlspecialchars($cat['name']) ?> <i class="fas fa-chevron-down"></i>
</a>
<div class="mega-panel">
<div class="mega-col">
<div class="mega-col-title">SHOP BY CATEGORIES</div>
<ul>
<?php foreach ($subsByCat[$cat['id']] as $sub): ?>
<li><a href="shop.php?cat=<?= $cat['id'] ?>&sub=<?= $sub['id'] ?>"><?= htmlspecialchars($sub['name']) ?></a></li>
<?php endforeach; ?>
</ul>
</div>
<div class="mega-col">
<div class="mega-col-title">SHOP BY OCCASION</div>
<ul>
<!-- User can add items here later -->
</ul>
</div>
<div class="mega-col">
<div class="mega-col-title">SHOP BY TYPE</div>
<ul>
<!-- User can add items here later -->
</ul>
</div>
</div>
</li>
<?php else: ?>
<li><a href="shop.php?cat=<?= $cat['id'] ?>"><?= htmlspecialchars($cat['name']) ?></a></li>
<?php endif; ?>
<?php endforeach; ?>
<li><a href="shop.php">Shop All</a></li>
</ul>
</nav>
</div>
</div>
</header><!-- /site-header -->
<!-- MOBILE NAV OVERLAY -->
<div class="mobile-nav-overlay" id="mobileNavOverlay"></div>
<!-- MOBILE DRAWER -->
<div class="mobile-drawer" id="mobileDrawer" role="dialog" aria-modal="true" aria-label="Navigation">
<div class="mobile-drawer-header">
<span class="mobile-drawer-logo">Elegance <span>of India</span></span>
<button class="mobile-drawer-close" id="mobileDrawerClose" aria-label="Close menu"><i class="fas fa-times"></i></button>
</div>
<?php if ($isLoggedIn): ?>
<div class="mobile-user-strip">
<i class="fas fa-user-circle"></i>
<div>
<div class="mobile-user-name"><?= htmlspecialchars($customerName) ?></div>
<div class="mobile-user-sub">Logged In</div>
</div>
</div>
<?php endif; ?>
<nav class="mobile-nav-list">
<ul>
<?php foreach ($navCategories as $cat): ?>
<li>
<?php if (!empty($subsByCat[$cat['id']])): ?>
<div class="mobile-nav-item-link" data-target="mob-sub-<?= $cat['id'] ?>">
<?= htmlspecialchars($cat['name']) ?>
<i class="fas fa-chevron-right"></i>
</div>
<ul class="mobile-sub-list" id="mob-sub-<?= $cat['id'] ?>">
<li style="border-bottom: none;">
<div class="nested-toggle" data-target="mob-nest-cat-<?= $cat['id'] ?>">
Shop by Categories <i class="fas fa-chevron-down"></i>
</div>
<ul class="nested-panel" id="mob-nest-cat-<?= $cat['id'] ?>">
<?php foreach ($subsByCat[$cat['id']] as $sub): ?>
<li><a href="shop.php?cat=<?= $cat['id'] ?>&sub=<?= $sub['id'] ?>"><?= htmlspecialchars($sub['name']) ?></a></li>
<?php endforeach; ?>
</ul>
</li>
<li style="border-bottom: none;">
<div class="nested-toggle" data-target="mob-nest-occ-<?= $cat['id'] ?>">
Shop by Occasion <i class="fas fa-chevron-down"></i>
</div>
<ul class="nested-panel" id="mob-nest-occ-<?= $cat['id'] ?>"></ul>
</li>
<li style="border-bottom: none;">
<div class="nested-toggle" data-target="mob-nest-type-<?= $cat['id'] ?>">
Shop by Type <i class="fas fa-chevron-down"></i>
</div>
<ul class="nested-panel" id="mob-nest-type-<?= $cat['id'] ?>"></ul>
</li>
</ul>
<?php else: ?>
<a class="mobile-nav-item-link" href="shop.php?cat=<?= $cat['id'] ?>">
<?= htmlspecialchars($cat['name']) ?>
</a>
<?php endif; ?>
</li>
<?php endforeach; ?>
<li>
<a class="mobile-nav-item-link" href="shop.php">Shop All</a>
</li>
<li style="border-top: 2px solid #f0ebe3; margin-top: 10px;">
<a class="mobile-nav-item-link" href="wishlist.php">
<span style="display:flex; align-items:center;">
<i class="far fa-heart" style="margin-right:8px; color:#c9a96e;"></i>
Wishlist
<span id="mobileWishlistBadge" class="hdr-badge" style="display:none; position:static; margin-left:8px;"></span>
</span>
</a>
</li>
<li>
<a class="mobile-nav-item-link" href="cart.php">
<span style="display:flex; align-items:center;">
<i class="fas fa-shopping-bag" style="margin-right:8px; color:#c9a96e;"></i>
My Bag
<span id="mobileCartBadge" class="hdr-badge" style="display:none; position:static; margin-left:8px;"></span>
</span>
</a>
</li>
</ul>
</nav>
<!-- Mobile Currency Selector -->
<div class="mobile-currency-strip">
<select class="mobile-currency-select" id="mobileCurrencySelect" aria-label="Select Currency">
<option value="USD">๐บ๐ธ USD โ US Dollar</option>
</select>
</div>
<div class="mobile-drawer-footer">
<?php if ($isLoggedIn): ?>
<a href="my-orders.php" class="mobile-footer-btn"><i class="fas fa-box-open"></i> My Orders</a>
<a href="#" class="mobile-footer-btn gold" id="mobileLogoutBtn"><i class="fas fa-sign-out-alt"></i> Logout</a>
<?php else: ?>
<button class="mobile-footer-btn gold" id="mobileLoginBtn"><i class="far fa-user"></i> Sign In</button>
<?php endif; ?>
</div>
</div><!-- /mobile-drawer -->
<!-- โโโโโโโโโโโโโโโโโโโโโโโ QUICK VIEW MODAL โโโโโโโโโโโโโโโโโโโโโโโ -->
<div class="modal-overlay" id="quickViewOverlay">
<div class="quick-view-modal">
<button class="modal-close" id="modalClose"><i class="fas fa-times"></i></button>
<div class="qv-image"><img id="qvImage" src="" alt="" /></div>
<div class="qv-details">
<p class="qv-designer" id="qvDesigner"></p>
<h3 id="qvName"></h3>
<p class="qv-price" id="qvPrice"></p>
<a href="#" class="btn btn-gold" style="width:100%;text-align:center">View Full Details</a>
</div>
</div>
</div>
<!-- โโโโโโโโโโโโโโโโโโโโโโโ WISHLIST DRAWER โโโโโโโโโโโโโโโโโโโโโโโ -->
<div class="cart-drawer-overlay" id="wishlistOverlay"></div>
<div class="cart-drawer" id="wishlistDrawer" role="dialog" aria-modal="true" aria-label="Your Wishlist">
<div class="cart-drawer-header">
<div>
<span class="cart-drawer-title">Wishlist</span>
<span class="cart-drawer-count" id="wishlistCount">0 items</span>
</div>
<button class="cart-drawer-close" id="wishlistClose" aria-label="Close"><i class="fas fa-times"></i></button>
</div>
<div class="cart-drawer-items" id="wishlistDrawerItems"></div>
<div class="cart-drawer-footer">
<div class="cart-free-ship"><i class="fas fa-gem"></i> Save your favourites & shop later</div>
<a href="wishlist.php" class="btn-view-bag">View Wishlist</a>
</div>
</div>
<!-- โโโโโโโโโโโโโโโโโโโโโโโ LOGIN MODAL โโโโโโโโโโโโโโโโโโโโโโโ -->
<div class="login-modal" id="loginModal" role="dialog" aria-modal="true" aria-label="Sign in">
<div class="login-modal-inner">
<button class="login-close" id="loginClose" aria-label="Close modal"><i class="fas fa-times"></i></button>
<div class="login-img-panel">
<img src="assets/hero_section/hero_section_1.jpg" alt="Elegance of India" />
</div>
<div class="login-form-panel">
<div class="login-modal-logo">Elegance of India</div>
<div class="login-tabs">
<button class="login-tab active" data-target="loginPanel">Sign In</button>
<button class="login-tab" data-target="registerPanel">Create Account</button>
</div>
<!-- Sign In -->
<div class="login-panel active" id="loginPanel">
<div class="lf-group">
<label>Email Address</label>
<input type="email" id="loginEmail" placeholder="you@example.com" autocomplete="email" />
</div>
<div class="lf-group">
<label>Password</label>
<input type="password" id="loginPassword" placeholder="Your password" autocomplete="current-password" />
</div>
<div class="lf-error" id="loginError"></div>
<a href="#" class="lf-forgot">Forgot password?</a>
<button class="btn-login-submit" id="loginSubmitBtn" type="button"><i class="far fa-user"></i> Sign In</button>
</div>
<!-- Register -->
<div class="login-panel" id="registerPanel">
<div class="lf-group">
<label>Full Name</label>
<input type="text" id="regName" placeholder="Your full name" autocomplete="name" />
</div>
<div class="lf-group">
<label>Email Address</label>
<input type="email" id="regEmail" placeholder="you@example.com" autocomplete="email" />
</div>
<div class="lf-group">
<label>Password</label>
<input type="password" id="regPassword" placeholder="Create a password" autocomplete="new-password" />
</div>
<div class="lf-error" id="regError"></div>
<button class="btn-login-submit" id="registerSubmitBtn" type="button"><i class="fas fa-user-plus"></i> Create Account</button>
</div>
</div>
</div>
</div>
<!-- โโโโโโโโโโโโโโโโโโโโโโโ CART DRAWER โโโโโโโโโโโโโโโโโโโโโโโ -->
<div class="cart-drawer-overlay" id="cartDrawerOverlay"></div>
<div class="cart-drawer" id="cartDrawer" role="dialog" aria-modal="true" aria-label="Shopping bag">
<div class="cart-drawer-header">
<div>
<span class="cart-drawer-title">Your Bag</span>
<span class="cart-drawer-count" id="cartDrawerCount">0 items</span>
</div>
<button class="cart-drawer-close" id="cartClose" aria-label="Close"><i class="fas fa-times"></i></button>
</div>
<div class="cart-drawer-items" id="cartDrawerItems"></div>
<div class="cart-drawer-footer">
<div class="cart-subtotal-row">
<span class="cart-subtotal-label">Subtotal</span>
<span class="cart-subtotal-val" id="cartSubtotal">USD 0.00</span>
</div>
<div class="cart-free-ship"><i class="fas fa-truck"></i> Complimentary shipping on this order</div>
<a href="checkout.php" class="btn-checkout-now">Proceed to Checkout</a>
<a href="cart.php" class="btn-view-bag">View Full Cart</a>
</div>
</div>
<script src="main.js?v=<?= time() ?>"></script>
<script>
(function(){
// โโ Mobile drawer โโ
var menuBtn = document.getElementById('mobileMenuBtn');
var drawer = document.getElementById('mobileDrawer');
var overlay = document.getElementById('mobileNavOverlay');
var closeBtn = document.getElementById('mobileDrawerClose');
function openDrawer(){
drawer.classList.add('open');
overlay.classList.add('open');
if(menuBtn) menuBtn.classList.add('open');
document.body.style.overflow = 'hidden';
}
function closeDrawer(){
drawer.classList.remove('open');
overlay.classList.remove('open');
if(menuBtn) menuBtn.classList.remove('open');
document.body.style.overflow = '';
}
if(menuBtn) menuBtn.addEventListener('click', openDrawer);
if(closeBtn) closeBtn.addEventListener('click', closeDrawer);
if(overlay) overlay.addEventListener('click', closeDrawer);
// Mobile sub-menu accordion (Level 1)
document.querySelectorAll('.mobile-nav-list > ul > li > .mobile-nav-item-link').forEach(function(el){
// If it's a sub-menu toggle
if(el.hasAttribute('data-target')) {
el.addEventListener('click', function(e){
e.preventDefault();
var targetId = this.getAttribute('data-target');
var sub = document.getElementById(targetId);
if(!sub) return;
var isOpen = sub.classList.contains('open');
// Close all Level 1
document.querySelectorAll('.mobile-sub-list.open').forEach(function(s){ s.classList.remove('open'); });
document.querySelectorAll('.mobile-nav-item-link.open').forEach(function(l){ l.classList.remove('open'); });
if(!isOpen){
sub.classList.add('open');
this.classList.add('open');
}
});
} else {
// If it's a direct link, check if it's Wishlist or Cart
// Allow normal navigation for all links
// The new page load will naturally reset the state
}
});
// Mobile nested accordion (Level 2)
document.querySelectorAll('.nested-toggle').forEach(function(el) {
el.addEventListener('click', function(e) {
e.preventDefault();
var target = document.getElementById(this.getAttribute('data-target'));
var isOpen = this.classList.contains('open');
// Optionally close sibling open panels within the same Level 1 list
var parentUl = this.closest('.mobile-sub-list');
if(parentUl) {
parentUl.querySelectorAll('.nested-panel.open').forEach(function(p){ p.classList.remove('open'); });
parentUl.querySelectorAll('.nested-toggle.open').forEach(function(t){ t.classList.remove('open'); });
}
if(!isOpen && target) {
this.classList.add('open');
target.classList.add('open');
}
});
});
// Mobile login/logout
var mobileLoginBtn = document.getElementById('mobileLoginBtn');
if(mobileLoginBtn){
mobileLoginBtn.addEventListener('click', function(){
closeDrawer();
var loginModal = document.getElementById('loginModal');
if(loginModal) loginModal.style.display = 'flex';
});
}
var mobileLogoutBtn = document.getElementById('mobileLogoutBtn');
if(mobileLogoutBtn){
mobileLogoutBtn.addEventListener('click', function(e){
e.preventDefault();
fetch('logout.php').then(function(){ window.location.href='index.php'; });
});
}
// Top strip sign-in link
var topSignIn = document.getElementById('topSignInLink');
if(topSignIn){
topSignIn.addEventListener('click', function(){
var loginModal = document.getElementById('loginModal');
if(loginModal) loginModal.classList.add('open');
});
}
// โโ Search toggle โโ
var searchBtn = document.getElementById('searchToggleBtn');
var searchRow = document.getElementById('headerSearchRow');
var searchClose = document.getElementById('searchClose');
var searchInput = document.getElementById('headerSearchInput');
if(searchBtn && searchRow){
searchBtn.addEventListener('click', function(){
searchRow.classList.toggle('open');
if(searchRow.classList.contains('open') && searchInput) searchInput.focus();
});
}
if(searchClose && searchRow){
searchClose.addEventListener('click', function(){ searchRow.classList.remove('open'); });
}
document.addEventListener('keydown', function(e){
if(e.key === 'Escape' && searchRow) searchRow.classList.remove('open');
});
// โโ Main logout โโ
var menuLogoutBtn = document.getElementById('menuLogoutBtn');
if(menuLogoutBtn){
menuLogoutBtn.addEventListener('click', function(e){
e.preventDefault();
fetch('logout.php').then(function(){ window.location.href='index.php'; });
});
}
// โโ Cart Drawer Rendering โโ
function renderCartDrawer(){
var drawerItems = document.getElementById('cartDrawerItems');
var drawerCount = document.getElementById('cartDrawerCount');
var drawerSubtotal = document.getElementById('cartSubtotal');
if(!drawerItems) return;
var cart = [];
try{ cart = JSON.parse(localStorage.getItem('eoi_cart') || '[]'); } catch(e){}
if(cart.length === 0){
drawerItems.innerHTML = '<div style="padding:40px 20px;text-align:center;color:#888;"><i class="fas fa-shopping-bag" style="font-size:2rem;display:block;margin-bottom:12px;opacity:0.3;"></i>Your bag is empty</div>';
if(drawerCount) drawerCount.textContent = '0 items';
if(drawerSubtotal) drawerSubtotal.textContent = 'USD 0.00';
return;
}
var subtotal = 0;
var html = '';
cart.forEach(function(item, idx){
var lineTotal = (parseFloat(item.price)||0) * (parseInt(item.qty)||1);
subtotal += lineTotal;
html += '<div class="cart-drawer-item">' +
'<div class="cart-drawer-item-img"><img src="' + (item.image || 'assets/placeholder-product.jpg') + '" onerror="this.src=\'assets/placeholder-product.jpg\'" /></div>' +
'<div class="cart-drawer-item-info">' +
'<div class="cdi-designer">' + (item.sku || '') + '</div>' +
'<div class="cdi-name">' + (item.name || 'Product') + '</div>' +
'<div class="cdi-meta">' + (item.stitch || '') + (item.size ? ' · ' + item.size : '') + '</div>' +
'<div class="cdi-bottom">' +
'<div class="qty-stepper">' +
'<button class="qty-btn" onclick="updateCartDrawerQty(' + idx + ',-1)">-</button>' +
'<div class="qty-val">' + (item.qty || 1) + '</div>' +
'<button class="qty-btn" onclick="updateCartDrawerQty(' + idx + ',1)">+</button>' +
'</div>' +
'<div class="cdi-price">USD ' + lineTotal.toFixed(2) + '</div>' +
'</div>' +
'<button class="cart-remove-btn" onclick="removeFromCartDrawer(' + idx + ')">Remove</button>' +
'</div>' +
'</div>';
});
drawerItems.innerHTML = html;
if(drawerCount) drawerCount.textContent = cart.length + ' item' + (cart.length !== 1 ? 's' : '');
if(drawerSubtotal) drawerSubtotal.textContent = 'USD ' + subtotal.toFixed(2);
}
window.updateCartDrawerQty = function(idx, delta){
var cart = JSON.parse(localStorage.getItem('eoi_cart') || '[]');
if(!cart[idx]) return;
cart[idx].qty = Math.max(1, (parseInt(cart[idx].qty)||1) + delta);
localStorage.setItem('eoi_cart', JSON.stringify(cart));
renderCartDrawer();
updateCartBadge();
if(typeof renderCart === 'function') renderCart(); // Sync with cart page if open
};
window.removeFromCartDrawer = function(idx){
var cart = JSON.parse(localStorage.getItem('eoi_cart') || '[]');
cart.splice(idx, 1);
localStorage.setItem('eoi_cart', JSON.stringify(cart));
renderCartDrawer();
updateCartBadge();
if(typeof renderCart === 'function') renderCart();
};
// โโ Cart badge โโ
function updateCartBadge(){
var badge = document.getElementById('cartBadge');
var mobBadge = document.getElementById('mobileCartBadge');
if(!badge && !mobBadge) return;
var cart = [];
try{ cart = JSON.parse(localStorage.getItem('eoi_cart') || '[]'); } catch(e){}
var total = cart.reduce(function(s,i){ return s + (parseInt(i.qty)||1); }, 0);
if(total > 0){
var displayTotal = total > 99 ? '99+' : total;
if(badge) {
badge.textContent = displayTotal;
badge.style.display = 'flex';
}
if(mobBadge) {
mobBadge.textContent = displayTotal;
mobBadge.style.display = 'flex';
}
} else {
if(badge) badge.style.display = 'none';
if(mobBadge) mobBadge.style.display = 'none';
}
renderCartDrawer();
}
updateCartBadge();
// โโ Wishlist badge โโ
function updateWishlistBadge(){
var badge = document.getElementById('wishlistBadge');
var mobBadge = document.getElementById('mobileWishlistBadge');
if(!badge && !mobBadge) return;
var wl = [];
try{ wl = JSON.parse(localStorage.getItem('eoi_wishlist') || '[]'); } catch(e){}
var total = wl.length;
if(total > 0){
var displayTotal = total > 99 ? '99+' : total;
if(badge) {
badge.textContent = displayTotal;
badge.style.display = 'flex';
}
if(mobBadge) {
mobBadge.textContent = displayTotal;
mobBadge.style.display = 'flex';
}
} else {
if(badge) badge.style.display = 'none';
if(mobBadge) mobBadge.style.display = 'none';
}
}
updateWishlistBadge();
window.addEventListener('storage', function() {
updateCartBadge();
updateWishlistBadge();
});
// Also expose to global for manual trigger
window.updateWishlistBadge = updateWishlistBadge;
})();
</script>
<!-- โโโโโโโโโโโโโโโโโโโโโโโ CURRENCY CONVERTER ENGINE โโโโโโโโโโโโโโโโโโโโโโโ -->
<script>
(function(){
'use strict';
var API_KEY = 'e43c27ed79ad83dcdddcfbdb';
var BASE_CURRENCY = 'USD';
var CACHE_KEY = 'eoi_exchange_rates';
var CACHE_DURATION = 3600000; // 1 hour in ms
var SELECTED_KEY = 'eoi_selected_currency';
// Supported currencies with flags and names
var CURRENCIES = [
{ code: 'USD', flag: '๐บ๐ธ', name: 'US Dollar', symbol: '$' },
{ code: 'EUR', flag: '๐ช๐บ', name: 'Euro', symbol: 'โฌ' },
{ code: 'GBP', flag: '๐ฌ๐ง', name: 'British Pound', symbol: 'ยฃ' },
{ code: 'INR', flag: '๐ฎ๐ณ', name: 'Indian Rupee', symbol: 'โน' },
{ code: 'CAD', flag: '๐จ๐ฆ', name: 'Canadian Dollar', symbol: 'CA$' },
{ code: 'AUD', flag: '๐ฆ๐บ', name: 'Australian Dollar', symbol: 'A$' },
{ code: 'AED', flag: '๐ฆ๐ช', name: 'UAE Dirham', symbol: 'ุฏ.ุฅ' },
{ code: 'SAR', flag: '๐ธ๐ฆ', name: 'Saudi Riyal', symbol: '๏ทผ' },
{ code: 'SGD', flag: '๐ธ๐ฌ', name: 'Singapore Dollar', symbol: 'S$' },
{ code: 'MYR', flag: '๐ฒ๐พ', name: 'Malaysian Ringgit', symbol: 'RM' },
{ code: 'BDT', flag: '๐ง๐ฉ', name: 'Bangladeshi Taka', symbol: 'เงณ' },
{ code: 'PKR', flag: '๐ต๐ฐ', name: 'Pakistani Rupee', symbol: 'โจ' },
{ code: 'LKR', flag: '๐ฑ๐ฐ', name: 'Sri Lankan Rupee', symbol: 'Rs' },
{ code: 'JPY', flag: '๐ฏ๐ต', name: 'Japanese Yen', symbol: 'ยฅ' },
{ code: 'CNY', flag: '๐จ๐ณ', name: 'Chinese Yuan', symbol: 'ยฅ' },
{ code: 'KRW', flag: '๐ฐ๐ท', name: 'South Korean Won', symbol: 'โฉ' },
{ code: 'ZAR', flag: '๐ฟ๐ฆ', name: 'South African Rand', symbol: 'R' },
{ code: 'NZD', flag: '๐ณ๐ฟ', name: 'New Zealand Dollar', symbol: 'NZ$' },
{ code: 'CHF', flag: '๐จ๐ญ', name: 'Swiss Franc', symbol: 'CHF' },
{ code: 'SEK', flag: '๐ธ๐ช', name: 'Swedish Krona', symbol: 'kr' },
{ code: 'NPR', flag: '๐ณ๐ต', name: 'Nepalese Rupee', symbol: 'เคฐเฅ' },
{ code: 'QAR', flag: '๐ถ๐ฆ', name: 'Qatari Riyal', symbol: '๏ทผ' },
{ code: 'KWD', flag: '๐ฐ๐ผ', name: 'Kuwaiti Dinar', symbol: 'ุฏ.ู' },
{ code: 'BHD', flag: '๐ง๐ญ', name: 'Bahraini Dinar', symbol: '.ุฏ.ุจ' },
{ code: 'OMR', flag: '๐ด๐ฒ', name: 'Omani Rial', symbol: '๏ทผ' }
];
var rates = null;
var currentCurrency = localStorage.getItem(SELECTED_KEY) || BASE_CURRENCY;
// โโ Fetch exchange rates (with cache) โโ
function fetchRates(callback) {
// Check cache first
try {
var cached = JSON.parse(localStorage.getItem(CACHE_KEY));
if (cached && cached.rates && (Date.now() - cached.timestamp < CACHE_DURATION)) {
rates = cached.rates;
if (callback) callback(rates);
return;
}
} catch(e) {}
// Show loading
var loadEl = document.getElementById('currencyLoading');
if (loadEl) loadEl.classList.add('show');
fetch('https://v6.exchangerate-api.com/v6/' + API_KEY + '/latest/' + BASE_CURRENCY)
.then(function(r) { return r.json(); })
.then(function(data) {
if (data.result === 'success' && data.conversion_rates) {
rates = data.conversion_rates;
// Cache rates
localStorage.setItem(CACHE_KEY, JSON.stringify({
rates: rates,
timestamp: Date.now()
}));
}
if (loadEl) loadEl.classList.remove('show');
if (callback) callback(rates);
})
.catch(function(err) {
console.error('Currency fetch error:', err);
if (loadEl) loadEl.classList.remove('show');
// Fallback: use USD only
rates = { USD: 1 };
if (callback) callback(rates);
});
}
// โโ Find and convert all price elements on page โโ
function convertAllPrices(targetCode) {
if (!rates || !rates[targetCode]) return;
var rate = rates[targetCode];
var curr = CURRENCIES.find(function(c) { return c.code === targetCode; });
var symbol = curr ? curr.symbol : targetCode;
// Find all text nodes that show prices in the format "USD 123.45" or "$123.45"
// We scan specific known price classes + generic text matching
var priceSelectors = [
'.home-product-card__price',
'.plp-card__price',
'.pdp-price',
'.cart-subtotal-val',
'.cdi-price',
'.stitch-price',
'.home-product-card__price',
'.related-card-price',
'.order-price',
'.order-total-val',
'[data-usd-price]'
];
// First pass: mark original USD prices on elements that haven't been marked yet
priceSelectors.forEach(function(sel) {
document.querySelectorAll(sel).forEach(function(el) {
if (!el.hasAttribute('data-original-usd')) {
// Try to extract the USD number from text
var text = el.textContent.trim();
var match = text.match(/[\$]?\s*([\d,]+\.?\d*)/);
if (match) {
var val = parseFloat(match[1].replace(/,/g, ''));
if (!isNaN(val)) {
el.setAttribute('data-original-usd', val.toString());
}
}
}
});
});
// Also scan for any elements that have text containing "USD" followed by a number
var allEls = document.querySelectorAll('p, span, div, td');
allEls.forEach(function(el) {
if (el.children.length > 0 && el.querySelector('p, span, div')) return; // skip parent containers
var txt = el.textContent.trim();
if (/^USD\s+[\d,]+\.?\d*$/.test(txt) && !el.hasAttribute('data-original-usd')) {
var m = txt.match(/([\d,]+\.?\d*)/);
if (m) {
var v = parseFloat(m[1].replace(/,/g, ''));
if (!isNaN(v)) {
el.setAttribute('data-original-usd', v.toString());
}
}
}
});
// Second pass: Convert all marked elements
document.querySelectorAll('[data-original-usd]').forEach(function(el) {
var usdVal = parseFloat(el.getAttribute('data-original-usd'));
if (isNaN(usdVal)) return;
if (targetCode === 'USD') {
el.textContent = 'USD ' + formatNumber(usdVal, 2);
} else {
var converted = usdVal * rate;
// For currencies with large values (like INR, BDT, PKR), skip decimal for amounts > 100
var decimals = (converted > 100 && ['INR','BDT','PKR','LKR','NPR','KRW','JPY'].indexOf(targetCode) > -1) ? 0 : 2;
el.textContent = targetCode + ' ' + symbol + formatNumber(converted, decimals);
}
});
}
function formatNumber(num, decimals) {
return num.toFixed(decimals).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}
// โโ Build the currency list UI โโ
function buildCurrencyList(filter) {
var listEl = document.getElementById('currencyList');
if (!listEl) return;
var filterLower = (filter || '').toLowerCase();
var html = '';
CURRENCIES.forEach(function(c) {
if (filterLower && c.code.toLowerCase().indexOf(filterLower) === -1 && c.name.toLowerCase().indexOf(filterLower) === -1) {
return;
}
var isActive = c.code === currentCurrency;
var rateText = '';
if (rates && rates[c.code] && c.code !== 'USD') {
rateText = ' ยท 1 USD = ' + rates[c.code].toFixed(c.code === 'JPY' || c.code === 'KRW' ? 0 : 2) + ' ' + c.code;
}
html += '<li class="' + (isActive ? 'active' : '') + '" data-code="' + c.code + '">' +
'<span class="cur-flag">' + c.flag + '</span>' +
'<span class="cur-code">' + c.code + '</span>' +
'<span class="cur-name">' + c.name + '</span>' +
'<i class="fas fa-check cur-check"></i>' +
'</li>';
});
listEl.innerHTML = html;
// Attach click handlers
listEl.querySelectorAll('li').forEach(function(li) {
li.addEventListener('click', function() {
var code = this.getAttribute('data-code');
selectCurrency(code);
});
});
}
// โโ Build mobile dropdown โโ
function buildMobileSelect() {
var sel = document.getElementById('mobileCurrencySelect');
if (!sel) return;
var html = '';
CURRENCIES.forEach(function(c) {
html += '<option value="' + c.code + '"' + (c.code === currentCurrency ? ' selected' : '') + '>' +
c.flag + ' ' + c.code + ' โ ' + c.name + '</option>';
});
sel.innerHTML = html;
sel.addEventListener('change', function() {
selectCurrency(this.value);
});
}
// โโ Select a currency โโ
function selectCurrency(code) {
currentCurrency = code;
localStorage.setItem(SELECTED_KEY, code);
var curr = CURRENCIES.find(function(c) { return c.code === code; });
// Update trigger button
var flagEl = document.getElementById('currFlagDisplay');
var codeEl = document.getElementById('currCodeDisplay');
if (flagEl && curr) flagEl.textContent = curr.flag;
if (codeEl) codeEl.textContent = code;
// Update mobile select
var mobSel = document.getElementById('mobileCurrencySelect');
if (mobSel) mobSel.value = code;
// Close dropdown
var dd = document.getElementById('currencyDropdown');
var trigger = document.getElementById('currencyTrigger');
if (dd) dd.classList.remove('open');
if (trigger) trigger.classList.remove('open');
// Rebuild list to update active state
buildCurrencyList();
// Convert prices
convertAllPrices(code);
}
// โโ Initialize โโ
function init() {
// Build currency list
buildCurrencyList();
buildMobileSelect();
// Set initial display from saved selection
var curr = CURRENCIES.find(function(c) { return c.code === currentCurrency; });
var flagEl = document.getElementById('currFlagDisplay');
var codeEl = document.getElementById('currCodeDisplay');
if (flagEl && curr) flagEl.textContent = curr.flag;
if (codeEl) codeEl.textContent = currentCurrency;
// Fetch rates, then apply
fetchRates(function() {
buildCurrencyList(); // Rebuild to show rate info
if (currentCurrency !== BASE_CURRENCY) {
convertAllPrices(currentCurrency);
}
});
// โโ Desktop dropdown toggle โโ
var trigger = document.getElementById('currencyTrigger');
var dropdown = document.getElementById('currencyDropdown');
if (trigger && dropdown) {
trigger.addEventListener('click', function(e) {
e.stopPropagation();
var isOpen = dropdown.classList.contains('open');
dropdown.classList.toggle('open');
trigger.classList.toggle('open');
if (!isOpen) {
var searchInput = document.getElementById('currencySearch');
if (searchInput) { searchInput.value = ''; searchInput.focus(); }
buildCurrencyList();
}
});
// Close on outside click
document.addEventListener('click', function(e) {
if (!dropdown.contains(e.target) && !trigger.contains(e.target)) {
dropdown.classList.remove('open');
trigger.classList.remove('open');
}
});
}
// โโ Search filter โโ
var searchInput = document.getElementById('currencySearch');
if (searchInput) {
searchInput.addEventListener('input', function() {
buildCurrencyList(this.value);
});
}
}
// Run on DOM ready
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', init);
} else {
init();
}
// Expose for external calls (e.g., after AJAX content loads)
window.convertAllPrices = convertAllPrices;
window.refreshCurrencyConversion = function() {
if (currentCurrency !== BASE_CURRENCY) {
convertAllPrices(currentCurrency);
}
};
// Re-apply after dynamic content or MutationObserver
var observer = new MutationObserver(function(mutations) {
var shouldConvert = false;
mutations.forEach(function(m) {
if (m.addedNodes.length > 0) shouldConvert = true;
});
if (shouldConvert && currentCurrency !== BASE_CURRENCY && rates) {
// Debounce
clearTimeout(window._currConvTimer);
window._currConvTimer = setTimeout(function() {
convertAllPrices(currentCurrency);
}, 300);
}
});
// Observe main content areas for dynamic price changes
document.addEventListener('DOMContentLoaded', function() {
var targets = ['cartDrawerItems', 'plpGrid', 'arrivalTrack'];
targets.forEach(function(id) {
var el = document.getElementById(id);
if (el) observer.observe(el, { childList: true, subtree: true });
});
});
})();
</script>