<?php
$user     = isset($user) ? $user : (isLoggedIn() ? currentUser() : null);
$whatsapp = getSetting('whatsapp_link') ?: '#';
$telegram = getSetting('telegram_link') ?: '#';
$facebook = getSetting('facebook_link') ?: '#';
$tiktok   = getSetting('tiktok_link')   ?: '#';
$youtube  = getSetting('youtube_link')  ?: '#';
$curPath  = $_SERVER['REQUEST_URI'] ?? '';
?>

<!-- ═══════════════════════════════════════════
     SIDE MENU OVERLAY (hamburger / 3-line menu)
     Available on every user page
     ═══════════════════════════════════════════ -->
<div class="sidemenu-overlay" id="sideMenuOverlay" onclick="closeSideMenu()"></div>

<div class="sidemenu-panel" id="sideMenuPanel">

  <!-- Header -->
  <div class="sidemenu-header">
    <div style="display:flex;align-items:center;gap:10px;">
      <div style="width:38px;height:38px;background:linear-gradient(135deg,var(--orange-primary),var(--orange-deeper));border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;color:#fff;font-weight:900;box-shadow:0 3px 10px rgba(249,115,22,0.35);">E</div>
      <div>
        <div style="font-family:'Space Grotesk',sans-serif;font-weight:900;font-size:15px;color:var(--text-primary);">ERIFY.NG</div>
        <?php if ($user): ?>
        <div style="font-size:11px;color:var(--text-muted);"><?= htmlspecialchars($user['full_name']) ?></div>
        <?php endif; ?>
      </div>
    </div>
    <button class="sidemenu-close-btn" onclick="closeSideMenu()">
      <i class="fi fi-sr-cross"></i>
    </button>
  </div>

  <!-- Menu Sections -->
  <div class="sidemenu-body">

    <!-- Quick Links -->
    <div class="sidemenu-section-label">Quick Links</div>

    <a href="/dashboard.php" class="sidemenu-item">
      <span class="sidemenu-icon" style="background:rgba(249,115,22,0.10);color:var(--orange-primary);">
        <i class="fi fi-sr-home"></i>
      </span>
      <span>Dashboard</span>
    </a>

    <a href="/pages/logs.php" class="sidemenu-item">
      <span class="sidemenu-icon" style="background:rgba(37,99,235,0.08);color:#2563eb;">
        <i class="fi fi-sr-shopping-bag"></i>
      </span>
      <span>My Orders</span>
    </a>
    
    
    <a href="/notifications/notif.php" class="sidemenu-item">
      <span class="sidemenu-icon" style="background:rgba(37,99,235,0.08);color:#2563eb;">
        <i class="fi fi-sr-bell"></i>
      </span>
      <span>Notifications</span>
    </a>
    
    

    <a href="/pages/fund-wallet.php" class="sidemenu-item">
      <span class="sidemenu-icon" style="background:rgba(22,163,74,0.10);color:#16a34a;">
        <i class="fi fi-sr-wallet"></i>
      </span>
      <span>Fund Wallet</span>
    </a>

    <a href="/pages/profile.php?tab=referral" class="sidemenu-item">
      <span class="sidemenu-icon" style="background:rgba(249,115,22,0.10);color:var(--orange-primary);">
        <i class="fi fi-sr-gift"></i>
      </span>
      <span>Refer & Earn</span>
      <span style="margin-left:auto;background:var(--orange-primary);color:#fff;font-size:10px;font-weight:800;padding:2px 8px;border-radius:99px;">5%</span>
    </a>

    <a href="/pages/transactions.php" class="sidemenu-item">
      <span class="sidemenu-icon" style="background:rgba(124,58,237,0.08);color:#7c3aed;">
        <i class="fi fi-sr-chart-line-up"></i>
      </span>
      <span>Transactions</span>
    </a>

    <a href="/pages/support.php" class="sidemenu-item">
      <span class="sidemenu-icon" style="background:rgba(249,115,22,0.10);color:var(--orange-primary);">
        <i class="fi fi-sr-headset"></i>
      </span>
      <span>Support</span>
    </a>

    <!-- Divider -->
    <div class="sidemenu-divider"></div>
    <div class="sidemenu-section-label">Learn & Explore</div>

    <a href="/pages/tutorials.php" class="sidemenu-item">
      <span class="sidemenu-icon" style="background:rgba(234,88,12,0.10);color:#ea580c;">
        <i class="fi fi-sr-play-circle"></i>
      </span>
      <span>Tutorials</span>
      <span style="margin-left:auto;" class="sidemenu-new-badge">New</span>
    </a>

    <a href="/pages/about.php" class="sidemenu-item">
      <span class="sidemenu-icon" style="background:rgba(6,182,212,0.10);color:#0891b2;">
        <i class="fi fi-sr-info"></i>
      </span>
      <span>About Us</span>
    </a>

    <!-- Divider -->
    <div class="sidemenu-divider"></div>
    <div class="sidemenu-section-label">Follow Us</div>

    <a href="<?= htmlspecialchars($facebook) ?>" target="_blank" rel="noopener" class="sidemenu-item sidemenu-social">
      <span class="sidemenu-icon" style="background:rgba(24,119,242,0.10);color:#1877f2;">
        <i class="fi fi-brands-facebook"></i>
      </span>
      <div>
        <div style="font-size:13px;font-weight:700;color:var(--text-primary);">Facebook Page</div>
        <div style="font-size:11px;color:var(--text-dim);">Like & follow us</div>
      </div>
      <i class="fi fi-rr-arrow-right" style="margin-left:auto;color:var(--text-dim);font-size:12px;"></i>
    </a>

    <a href="<?= htmlspecialchars($tiktok) ?>" target="_blank" rel="noopener" class="sidemenu-item sidemenu-social">
      <span class="sidemenu-icon" style="background:rgba(0,0,0,0.06);color:#000;">
        <i class="fi fi-brands-tik-tok"></i>
      </span>
      <div>
        <div style="font-size:13px;font-weight:700;color:var(--text-primary);">TikTok</div>
        <div style="font-size:11px;color:var(--text-dim);">Watch our videos</div>
      </div>
      <i class="fi fi-rr-arrow-right" style="margin-left:auto;color:var(--text-dim);font-size:12px;"></i>
    </a>

    <a href="<?= htmlspecialchars($whatsapp) ?>" target="_blank" rel="noopener" class="sidemenu-item sidemenu-social">
      <span class="sidemenu-icon" style="background:rgba(37,211,102,0.10);color:#16a34a;">
        <i class="fi fi-brands-whatsapp"></i>
      </span>
      <div>
        <div style="font-size:13px;font-weight:700;color:var(--text-primary);">WhatsApp Channel</div>
        <div style="font-size:11px;color:var(--text-dim);">Join our community</div>
      </div>
      <i class="fi fi-rr-arrow-right" style="margin-left:auto;color:var(--text-dim);font-size:12px;"></i>
    </a>

    <a href="<?= htmlspecialchars($telegram) ?>" target="_blank" rel="noopener" class="sidemenu-item sidemenu-social">
      <span class="sidemenu-icon" style="background:rgba(41,182,246,0.10);color:#0284c7;">
        <i class="fi fi-brands-telegram"></i>
      </span>
      <div>
        <div style="font-size:13px;font-weight:700;color:var(--text-primary);">Telegram</div>
        <div style="font-size:11px;color:var(--text-dim);">Get updates & deals</div>
      </div>
      <i class="fi fi-rr-arrow-right" style="margin-left:auto;color:var(--text-dim);font-size:12px;"></i>
    </a>

    <?php if ($youtube !== '#'): ?>
    <a href="<?= htmlspecialchars($youtube) ?>" target="_blank" rel="noopener" class="sidemenu-item sidemenu-social">
      <span class="sidemenu-icon" style="background:rgba(255,0,0,0.08);color:#dc2626;">
        <i class="fi fi-brands-youtube"></i>
      </span>
      <div>
        <div style="font-size:13px;font-weight:700;color:var(--text-primary);">YouTube</div>
        <div style="font-size:11px;color:var(--text-dim);">Subscribe to our channel</div>
      </div>
      <i class="fi fi-rr-arrow-right" style="margin-left:auto;color:var(--text-dim);font-size:12px;"></i>
    </a>
    <?php endif; ?>

    <!-- Divider + Logout -->
    <div class="sidemenu-divider"></div>

    <a href="/logout.php" class="sidemenu-item" style="color:#dc2626;">
      <span class="sidemenu-icon" style="background:rgba(220,38,38,0.08);color:#dc2626;">
        <i class="fi fi-rr-sign-out"></i>
      </span>
      <span style="color:#dc2626;font-weight:700;">Sign Out</span>
    </a>

  </div>

  <!-- Footer inside panel -->
  <div class="sidemenu-footer">
    <div style="font-size:11px;color:var(--text-dim);text-align:center;">
      ERIFY DIGITAL MARKET &copy; <?= date('Y') ?> · All rights reserved
    </div>
  </div>

</div>

<!-- ─── SIDE MENU STYLES ─────────────────────────── -->
<style>
.sidemenu-overlay {
  position:fixed; inset:0;
  background:rgba(0,0,0,0.35);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  z-index:1100;
  opacity:0; pointer-events:none;
  transition:opacity 0.28s ease;
}
.sidemenu-overlay.open { opacity:1; pointer-events:all; }

.sidemenu-panel {
  position:fixed;
  top:0; right:0; bottom:0;
  width:min(310px,92vw);
  background:rgba(255,255,255,0.97);
  backdrop-filter:blur(30px) saturate(180%);
  -webkit-backdrop-filter:blur(30px) saturate(180%);
  border-left:1px solid var(--glass-border);
  z-index:1200;
  display:flex; flex-direction:column;
  box-shadow:-8px 0 40px rgba(249,115,22,0.12);
  transform:translateX(100%);
  transition:transform 0.32s cubic-bezier(0.4,0,0.2,1);
  overflow:hidden;
}
.sidemenu-panel.open { transform:translateX(0); }

.sidemenu-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 16px 14px;
  border-bottom:1px solid var(--glass-border);
  flex-shrink:0;
  background:rgba(249,115,22,0.03);
}
.sidemenu-close-btn {
  width:32px; height:32px;
  background:rgba(249,115,22,0.08);
  border:1px solid var(--glass-border);
  border-radius:8px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; color:var(--text-muted);
  transition:var(--transition);
}
.sidemenu-close-btn:hover { background:var(--orange-primary); color:#fff; border-color:var(--orange-primary); }

.sidemenu-body {
  flex:1; overflow-y:auto;
  padding:8px 0;
  -webkit-overflow-scrolling:touch;
}
.sidemenu-body::-webkit-scrollbar { width:3px; }
.sidemenu-body::-webkit-scrollbar-thumb { background:var(--glass-border); border-radius:3px; }

.sidemenu-section-label {
  padding:10px 16px 4px;
  font-size:10px; font-weight:800; color:var(--text-dim);
  letter-spacing:1px; text-transform:uppercase;
}

.sidemenu-item {
  display:flex; align-items:center; gap:12px;
  padding:11px 16px;
  text-decoration:none;
  border-bottom:1px solid rgba(249,115,22,0.05);
  transition:background 0.15s, transform 0.15s;
  cursor:pointer;
  position:relative;
}
.sidemenu-item:hover {
  background:rgba(249,115,22,0.04);
}
.sidemenu-item:active { transform:scale(0.98); }

.sidemenu-item span:not(.sidemenu-icon):not([style*="margin-left:auto"]) {
  font-size:13.5px; font-weight:700; color:var(--text-primary);
  flex:1;
}

.sidemenu-icon {
  width:36px; height:36px; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  font-size:16px; flex-shrink:0;
}

.sidemenu-new-badge {
  background:linear-gradient(135deg,var(--orange-primary),var(--orange-deeper));
  color:#fff; font-size:9px; font-weight:800;
  padding:2px 7px; border-radius:99px;
  letter-spacing:0.3px;
}

.sidemenu-divider {
  height:1px; background:var(--glass-border);
  margin:8px 16px;
}

.sidemenu-footer {
  padding:14px 16px;
  border-top:1px solid var(--glass-border);
  flex-shrink:0;
  background:rgba(249,115,22,0.02);
}

/* ── HAMBURGER BUTTON in Navbar ── */
.hamburger-btn {
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:4.5px;
  width:38px; height:38px;
  border-radius:9px;
  background:var(--glass);
  border:1px solid var(--glass-border);
  cursor:pointer;
  padding:9px 8px;
  transition:var(--transition);
  flex-shrink:0;
}
.hamburger-btn:hover {
  background:rgba(249,115,22,0.08);
  border-color:var(--orange-primary);
}
.hamburger-btn span {
  display:block;
  width:18px; height:2px;
  background:var(--orange-primary);
  border-radius:2px;
  transition:var(--transition);
}
.hamburger-btn:hover span { background:var(--orange-primary); }
/* Animate to X when open */
.hamburger-btn.open span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
.hamburger-btn.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.hamburger-btn.open span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }
</style>

<!-- ─── SIDE MENU JS ──────────────────────────────── -->
<script>
function openSideMenu() {
  document.getElementById('sideMenuPanel').classList.add('open');
  document.getElementById('sideMenuOverlay').classList.add('open');
  document.body.style.overflow = 'hidden';
  const btn = document.getElementById('hamburgerBtn');
  if (btn) btn.classList.add('open');
}
function closeSideMenu() {
  document.getElementById('sideMenuPanel').classList.remove('open');
  document.getElementById('sideMenuOverlay').classList.remove('open');
  document.body.style.overflow = '';
  const btn = document.getElementById('hamburgerBtn');
  if (btn) btn.classList.remove('open');
}
// Close on Escape key
document.addEventListener('keydown', e => { if (e.key === 'Escape') closeSideMenu(); });
</script>

<!-- PWA INSTALL BANNER -->
<div class="pwa-banner" id="pwaBanner">
  <div class="pwa-icon">   <i class="fi fi-brands-app-store-ios"></i>  </div>
  <div class="pwa-text">
    <strong>INSTALL ERIFY.NG APP</strong>
    <span>Faster access. Works offline.</span>
  </div>
  <div class="pwa-actions">
    <button class="btn btn-sm" style="background:rgba(255,255,255,0.25);color:#fff;border:1px solid rgba(255,255,255,0.4);border-radius:8px;" onclick="installPWA()">Install</button>
    <button class="btn btn-sm" style="background:rgba(0,0,0,0.15);color:#fff;border:none;border-radius:8px;" onclick="hidePWABanner()">✕</button>
  </div>
</div>

<?php if ($user): ?>
<!-- SUPPORT FAB -->
<a href="/pages/support.php" class="support-fab" title="Support">
  <i class="fi fi-sr-headset"></i>
</a>

<!-- BOTTOM NAV -->
<nav class="bottom-nav">
  <div class="bottom-nav-inner">
    <a href="/dashboard.php" class="bottom-nav-item <?= strpos($curPath,'/dashboard')!==false ? 'active' : '' ?>">
      <i class="fi fi-sr-home"></i>
      <span>Home</span>
    </a>
    <a href="/pages/logs.php" class="bottom-nav-item <?= strpos($curPath,'/logs')!==false ? 'active' : '' ?>">
      <i class="fi fi-sr-shopping-bag"></i>
      <span>Orders</span>
    </a>
    <a href="/pages/fund-wallet.php" class="bottom-nav-item <?= strpos($curPath,'/fund')!==false ? 'active' : '' ?>">
      <i class="fi fi-sr-wallet"></i>
      <span>Fund</span>
    </a>
    <a href="/pages/profile.php" class="bottom-nav-item <?= strpos($curPath,'/profile')!==false ? 'active' : '' ?>">
      <i class="fi fi-sr-user"></i>
      <span>Profile</span>
    </a>
  </div>
</nav>
<?php endif; ?>

<!-- MAIN JS -->
<script src="/assets/js/main.js"></script>

<script>
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/pwa/sw.js').catch(() => {});
}
</script>

<?php if (isset($_SESSION['login_popup'])): ?>
<script>
document.addEventListener('DOMContentLoaded', () => {
  setTimeout(() => showWelcomePopup(<?= json_encode($_SESSION['login_popup']) ?>), 600);
});
</script>
<?php unset($_SESSION['login_popup']); ?>
<?php endif; ?>

</body>
</html>
