<?php
require_once __DIR__ . '/../config.php';
if (session_status() === PHP_SESSION_NONE) session_start();
if (!isset($_SESSION['customer_id'])) {
    // For preview purposes, mock a customer if not logged in
    $cust = ['name' => 'Rajesh Sharma', 'id' => 1];
} else {
    $db = getDB();
    $cust_id = $_SESSION['customer_id'];
    $cust = $db->query("SELECT * FROM customers WHERE id={$cust_id}")->fetch();
}

$current_page = basename($_SERVER['PHP_SELF'], '.php');
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0">
<title><?= h($page_title ?? 'Customer Portal') ?> | Balimeen</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@700;800;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<style>
/* Base UI */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Inter', sans-serif; background: #f8fafc; color: #334155; display: flex; min-height: 100vh; }

/* Sidebar */
.sidebar { width: 260px; background: #0f172a; color: #fff; display: flex; flex-direction: column; flex-shrink: 0; }
.sidebar-brand { padding: 20px; text-align: center; border-bottom: 1px solid rgba(255,255,255,0.1); }
.sidebar-brand h2 { font-family: 'Outfit', sans-serif; font-size: 1.4rem; color: #fff; margin: 0 0 2px; letter-spacing:1px; }
.sidebar-brand span { font-size: .75rem; color: #3b82f6; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }

.nav-links { padding: 20px 0; flex: 1; overflow-y: auto; }
.nav-item { padding: 12px 24px; display: flex; align-items: center; gap: 12px; color: #cbd5e1; text-decoration: none; font-size: .95rem; font-weight: 500; transition: all 0.2s; border-left: 3px solid transparent; }
.nav-item:hover { background: rgba(255,255,255,0.05); color: #fff; }
.nav-item.active { background: rgba(37,99,235,1); color: #fff; border-left-color: #60a5fa; }
.nav-item i { width: 20px; text-align: center; font-size: 1.1rem; }
.nav-item .badge { background: #ef4444; color: #fff; font-size: 0.7rem; padding: 2px 6px; border-radius: 10px; margin-left: auto; }
.nav-section { padding: 15px 24px 5px; font-size: 0.75rem; color: #64748b; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }

.sidebar-help { margin: 20px; padding: 20px; background: rgba(255,255,255,0.05); border-radius: 12px; text-align: center; }
.sidebar-help h4 { margin: 0 0 5px; color: #fff; font-size: 1rem; }
.sidebar-help p { font-size: 0.8rem; color: #94a3b8; margin: 0 0 15px; }
.sidebar-help .btn { background: #2563eb; color: #fff; padding: 8px 16px; border-radius: 6px; text-decoration: none; font-size: 0.85rem; font-weight: 600; display: inline-block; }

/* Main Content */
.main-content { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.top-header { height: 70px; background: #fff; padding: 0 30px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #e2e8f0; }
.search-bar { position: relative; width: 400px; }
.search-bar input { width: 100%; padding: 10px 16px 10px 40px; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 0.9rem; outline: none; background: #f8fafc; }
.search-bar i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #94a3b8; }
.search-bar .btn-search { position: absolute; right: 4px; top: 4px; bottom: 4px; background: #2563eb; color: #fff; border: none; border-radius: 6px; padding: 0 16px; cursor: pointer; }

/* Content Area */
.content-area { padding: 30px; overflow-y: auto; flex: 1; }
.card { background: #fff; border-radius: 12px; padding: 24px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); margin-bottom: 24px; border: 1px solid #e2e8f0; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; }

@media (max-width: 1024px) { .grid-4, .grid-5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) { .grid-2, .grid-3, .grid-4, .grid-5 { grid-template-columns: 1fr; } .sidebar { display: none; } }
</style>
</head>
<body>

<aside class="sidebar">
  <div class="sidebar-brand">
    <h2>BALIMEEN</h2>
    <div style="font-size:0.7rem; color:#cbd5e1; margin-bottom:10px;">PRIVATE LIMITED</div>
    <span>CUSTOMER PORTAL</span>
  </div>
  
  <nav class="nav-links">
    <a href="index.php" class="nav-item <?= $current_page==='index'?'active':'' ?>"><i class="fas fa-home"></i> Dashboard</a>
    <a href="orders.php" class="nav-item <?= $current_page==='orders'?'active':'' ?>"><i class="fas fa-box"></i> My Orders</a>
    <a href="products.php" class="nav-item <?= $current_page==='products'?'active':'' ?>"><i class="fas fa-shopping-bag"></i> Products</a>
    <a href="quotations.php" class="nav-item <?= $current_page==='quotations'?'active':'' ?>"><i class="fas fa-file-invoice"></i> My Quotations</a>
    <a href="inquiries.php" class="nav-item <?= $current_page==='inquiries'?'active':'' ?>"><i class="fas fa-question-circle"></i> My Inquiries</a>
    <a href="track.php" class="nav-item <?= $current_page==='track'?'active':'' ?>"><i class="fas fa-map-marker-alt"></i> Track Order</a>
    <a href="invoices.php" class="nav-item <?= $current_page==='invoices'?'active':'' ?>"><i class="fas fa-file-invoice-dollar"></i> Invoices & Payments</a>
    <a href="returns.php" class="nav-item <?= $current_page==='returns'?'active':'' ?>"><i class="fas fa-undo-alt"></i> Returns & Warranty</a>
    <a href="support.php" class="nav-item <?= $current_page==='support'?'active':'' ?>"><i class="fas fa-headset"></i> Support Tickets</a>
    <a href="profile.php" class="nav-item <?= $current_page==='profile'?'active':'' ?>"><i class="fas fa-user"></i> My Profile</a>
    <a href="addresses.php" class="nav-item <?= $current_page==='addresses'?'active':'' ?>"><i class="fas fa-map-marked-alt"></i> Addresses</a>
    <a href="downloads.php" class="nav-item <?= $current_page==='downloads'?'active':'' ?>"><i class="fas fa-download"></i> Downloads</a>
    <a href="notifications.php" class="nav-item <?= $current_page==='notifications'?'active':'' ?>"><i class="fas fa-bell"></i> Notifications <span class="badge">3</span></a>
    <a href="refer.php" class="nav-item <?= $current_page==='refer'?'active':'' ?>"><i class="fas fa-gift"></i> Refer & Earn</a>
    
    <div class="nav-section">Enterprise Modules</div>
    <a href="customer_360.php" class="nav-item <?= $current_page==='customer_360'?'active':'' ?>"><i class="fas fa-id-card"></i> Customer 360</a>
    <a href="omnichannel.php" class="nav-item <?= $current_page==='omnichannel'?'active':'' ?>"><i class="fas fa-project-diagram"></i> Omnichannel</a>
    <a href="pricing.php" class="nav-item <?= $current_page==='pricing'?'active':'' ?>"><i class="fas fa-tags"></i> Pricing Engine</a>
    <a href="logistics.php" class="nav-item <?= $current_page==='logistics'?'active':'' ?>"><i class="fas fa-truck-loading"></i> Logistics</a>
    <a href="intelligence.php" class="nav-item <?= $current_page==='intelligence'?'active':'' ?>"><i class="fas fa-brain"></i> Intelligence</a>
    <a href="community.php" class="nav-item <?= $current_page==='community'?'active':'' ?>"><i class="fas fa-users"></i> Community</a>
    <a href="apis.php" class="nav-item <?= $current_page==='apis'?'active':'' ?>"><i class="fas fa-code"></i> APIs</a>
    <a href="security.php" class="nav-item <?= $current_page==='security'?'active':'' ?>"><i class="fas fa-shield-alt"></i> Security</a>

    <div class="nav-section">Advanced Modules</div>
    <a href="account_mgmt.php" class="nav-item <?= $current_page==='account_mgmt'?'active':'' ?>"><i class="fas fa-id-card-alt"></i> Account Mgmt</a>
    <a href="smart_buying.php" class="nav-item <?= $current_page==='smart_buying'?'active':'' ?>"><i class="fas fa-tools"></i> Smart Buying</a>
    <a href="b2b_purchase.php" class="nav-item <?= $current_page==='b2b_purchase'?'active':'' ?>"><i class="fas fa-building"></i> B2B Purchase</a>
    <a href="subscriptions.php" class="nav-item <?= $current_page==='subscriptions'?'active':'' ?>"><i class="fas fa-sync-alt"></i> Subscriptions</a>
    <a href="service_install.php" class="nav-item <?= $current_page==='service_install'?'active':'' ?>"><i class="fas fa-wrench"></i> Service & Install</a>
    <a href="customer_community.php" class="nav-item <?= $current_page==='customer_community'?'active':'' ?>"><i class="fas fa-users"></i> Community</a>
    <a href="personalization.php" class="nav-item <?= $current_page==='personalization'?'active':'' ?>"><i class="fas fa-magic"></i> Personalization</a>
    <a href="delivery.php" class="nav-item <?= $current_page==='delivery'?'active':'' ?>"><i class="fas fa-truck"></i> Delivery</a>
    <a href="finance.php" class="nav-item <?= $current_page==='finance'?'active':'' ?>"><i class="fas fa-wallet"></i> Finance</a>
    <a href="docs_vault.php" class="nav-item <?= $current_page==='docs_vault'?'active':'' ?>"><i class="fas fa-archive"></i> Documents Vault</a>
    <a href="cust_success.php" class="nav-item <?= $current_page==='cust_success'?'active':'' ?>"><i class="fas fa-headset"></i> Customer Success</a>
    <a href="integrations.php" class="nav-item <?= $current_page==='integrations'?'active':'' ?>"><i class="fas fa-plug"></i> Integrations</a>
    <a href="analytics.php" class="nav-item <?= $current_page==='analytics'?'active':'' ?>"><i class="fas fa-chart-pie"></i> Analytics</a>
    <a href="enterprise.php" class="nav-item <?= $current_page==='enterprise'?'active':'' ?>"><i class="fas fa-city"></i> Enterprise</a>
    <a href="international.php" class="nav-item <?= $current_page==='international'?'active':'' ?>"><i class="fas fa-globe-americas"></i> International</a>
    <a href="security_center.php" class="nav-item <?= $current_page==='security_center'?'active':'' ?>"><i class="fas fa-lock"></i> Security Center</a>
    <a href="future_layer.php" class="nav-item <?= $current_page==='future_layer'?'active':'' ?>"><i class="fas fa-rocket"></i> Future Layer</a>

    <a href="logout.php" class="nav-item"><i class="fas fa-sign-out-alt"></i> Logout</a>
  </nav>

  <div class="sidebar-help">
    <h4>Need Help?</h4>
    <p>We're here to help you</p>
    <a href="support.php" class="btn">Contact Support</a>
  </div>
</aside>

<main class="main-content">
  <header class="top-header">
    <div>
      <i class="fas fa-bars" style="font-size:1.2rem;color:#64748b;cursor:pointer;"></i>
    </div>
    <div class="search-bar">
      <i class="fas fa-search"></i>
      <input type="text" placeholder="Search for products, categories, SKU...">
      <button class="btn-search"><i class="fas fa-search" style="position:static;color:#fff;transform:none;"></i></button>
    </div>
    <div style="display:flex;align-items:center;gap:24px;">
      <a href="cart.php" style="position:relative;color:#64748b;font-size:1.3rem;text-decoration:none;">
        <i class="fas fa-shopping-cart"></i>
        <span style="position:absolute;top:-6px;right:-8px;background:#2563eb;color:#fff;font-size:0.6rem;padding:2px 5px;border-radius:10px;font-weight:bold;">2</span>
      </a>
      <a href="notifications.php" style="position:relative;color:#64748b;font-size:1.3rem;text-decoration:none;">
        <i class="far fa-bell"></i>
        <span style="position:absolute;top:-4px;right:-6px;background:#ef4444;color:#fff;font-size:0.6rem;padding:2px 5px;border-radius:10px;font-weight:bold;">3</span>
      </a>
      
      <div style="display:flex;align-items:center;gap:12px;border-left:1px solid #e2e8f0;padding-left:24px;">
        <div style="text-align:right;">
          <strong style="display:block;color:#0f172a;font-size:.9rem;line-height:1.2;"><?= h($cust['name']) ?></strong>
          <span style="font-size:.75rem;color:#64748b;">100045</span>
        </div>
        <div style="width:40px;height:40px;border-radius:50%;background:#e2e8f0;display:flex;align-items:center;justify-content:center;color:#64748b;">
            <i class="fas fa-user"></i>
        </div>
      </div>
    </div>
  </header>
  <div class="content-area">
