<?php
// Fallbacks if included without function.php
if (!isset($currentUser)) $currentUser = ['full_name' => 'User', 'balance' => 0, 'profile_photo' => ''];
$currentPage = basename($_SERVER['PHP_SELF']);

// Helper function for profile photo
function getSidebarPhoto($user, $size = 12) {
    if (!empty($user['profile_photo']) && file_exists($user['profile_photo'])) {
        return '<img src="' . htmlspecialchars($user['profile_photo']) . '" alt="Profile" class="w-' . $size . ' h-' . $size . ' rounded-full object-cover border-2 border-white dark:border-slate-900 shadow-lg">';
    }
    $initials = strtoupper(substr($user['full_name'] ?? 'U', 0, 1));
    if (!empty($user['full_name'])) {
        $parts = explode(' ', $user['full_name']);
        $initials = strtoupper(substr($parts[0], 0, 1) . (isset($parts[1]) ? substr($parts[1], 0, 1) : ''));
    }
    return '<div class="w-' . $size . ' h-' . $size . ' rounded-full bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center text-white font-bold text-lg shadow-lg shadow-blue-500/20">' . $initials . '</div>';
}
?>
<!-- Mobile overlay backdrop -->
<div x-show="sidebarOpen" 
     @click="sidebarOpen = false"
     x-transition:enter="transition-opacity ease-linear duration-300"
     x-transition:enter-start="opacity-0"
     x-transition:enter-end="opacity-100"
     x-transition:leave="transition-opacity ease-linear duration-300"
     x-transition:leave-start="opacity-100"
     x-transition:leave-end="opacity-0"
     class="fixed inset-0 bg-black/60 z-30 md:hidden"
     x-cloak></div>

<aside :class="sidebarOpen ? 'translate-x-0' : '-translate-x-full'"
       class="fixed inset-y-0 left-0 z-40 w-72 bg-white dark:bg-slate-900 border-r border-slate-200 dark:border-slate-800 shadow-2xl transform transition-transform duration-300 ease-out md:translate-x-0 overflow-y-auto scroll-thin">

    <!-- User Profile Card -->
    <div class="p-5 pt-16 border-b border-slate-200 dark:border-slate-800">
      <div class="flex items-center gap-4">
        <div class="relative">
          <?= getSidebarPhoto($currentUser, 12) ?>
          <span class="absolute -bottom-0.5 -right-0.5 w-3.5 h-3.5 bg-emerald-500 rounded-full border-2 border-white dark:border-slate-900"></span>
        </div>
        <div class="min-w-0 flex-1">
          <div class="text-sm font-bold text-slate-900 dark:text-white truncate"><?= htmlspecialchars($currentUser['full_name'] ?? 'User', ENT_QUOTES, 'UTF-8') ?></div>
          <div class="text-xs text-slate-500 dark:text-slate-400 mt-0.5">Verified Account</div>
          
          <!-- Independent Balance Display -->
        <div x-data="{ 
        sidebarBal: <?= isset($currentUser['balance']) && is_numeric($currentUser['balance']) ? (float)$currentUser['balance'] : 0 ?>, 
        isHidden: localStorage.getItem('hideBalance') === 'true',
        get formattedBal() { return this.sidebarBal.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }); } 
     }" 
     @update-balance.window="sidebarBal = $event.detail.balance"
     @balance-toggled.window="isHidden = $event.detail.hidden"
     class="text-xs font-semibold text-emerald-600 dark:text-emerald-400 mt-1 amount-display" 
     :class="isHidden ? 'hide-amount' : ''">
 $<span x-text="isHidden ? '••••••' : formattedBal"><?= number_format((float)($currentUser['balance'] ?? 0), 2) ?></span>
</div>

        </div>
      </div>
    </div>

    <nav class="p-4 space-y-6 pb-24">

      <!-- ================= OVERVIEW ================= -->
      <div>
        <p class="px-3 mb-2 text-[10px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider">Overview</p>
        <ul class="space-y-0.5">
          <li>
            <a href="dashboard.php" class="flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm transition-all duration-200 group <?= $currentPage === 'dashboard.php' ? 'bg-blue-600 text-white shadow-lg shadow-blue-600/20' : 'text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white hover:bg-slate-100 dark:hover:bg-slate-800/50' ?>">
              <i data-lucide="layout-dashboard" class="w-4 h-4 shrink-0 <?= $currentPage === 'dashboard.php' ? '' : 'group-hover:text-blue-500 dark:group-hover:text-blue-400' ?> transition-colors"></i>
              <span class="flex-1 font-medium">Dashboard</span>
            </a>
          </li>
          <li>
            <a href="accounthistory.php" class="flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm transition-all duration-200 group <?= $currentPage === 'accounthistory.php' ? 'bg-blue-600 text-white shadow-lg shadow-blue-600/20' : 'text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white hover:bg-slate-100 dark:hover:bg-slate-800/50' ?>">
              <i data-lucide="receipt" class="w-4 h-4 shrink-0 <?= $currentPage === 'accounthistory.php' ? '' : 'group-hover:text-blue-500 dark:group-hover:text-blue-400' ?> transition-colors"></i>
              <span class="flex-1 font-medium">Account Statement</span>
            </a>
          </li>
        </ul>
      </div>

      <!-- ================= PORTFOLIO ================= -->
      <div>
        <p class="px-3 mb-2 text-[10px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider">Portfolio</p>
        <ul class="space-y-0.5">
          <li>
            <a href="buy-plan.php" class="flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm transition-all duration-200 group <?= $currentPage === 'buy-plan.php' ? 'bg-blue-600 text-white shadow-lg shadow-blue-600/20' : 'text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white hover:bg-slate-100 dark:hover:bg-slate-800/50' ?>">
              <i data-lucide="target" class="w-4 h-4 shrink-0 <?= $currentPage === 'buy-plan.php' ? '' : 'group-hover:text-blue-500 dark:group-hover:text-blue-400' ?> transition-colors"></i>
              <span class="flex-1 font-medium">Investment Plans</span>
            </a>
          </li>
          <li>
            <a href="MyPortfolio.php" class="flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm transition-all duration-200 group <?= $currentPage === 'My Portfolio.php' ? 'bg-blue-600 text-white shadow-lg shadow-blue-600/20' : 'text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white hover:bg-slate-100 dark:hover:bg-slate-800/50' ?>">
              <i data-lucide="pie-chart" class="w-4 h-4 shrink-0 <?= $currentPage === 'MyPortfolio.php' ? '' : 'group-hover:text-blue-500 dark:group-hover:text-blue-400' ?> transition-colors"></i>
              <span class="flex-1 font-medium">My Portfolio</span>
            </a>
          </li>
          <li>
            <a href="tradinghistory.php" class="flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm transition-all duration-200 group <?= $currentPage === 'trading history.php' ? 'bg-blue-600 text-white shadow-lg shadow-blue-600/20' : 'text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white hover:bg-slate-100 dark:hover:bg-slate-800/50' ?>">
              <i data-lucide="activity" class="w-4 h-4 shrink-0 <?= $currentPage === 'trading history.php' ? '' : 'group-hover:text-blue-500 dark:group-hover:text-blue-400' ?> transition-colors"></i>
              <span class="flex-1 font-medium">Performance History</span>
            </a>
          </li>
        </ul>
      </div>

      <!-- ================= TRADING ================= -->
      <div>
        <p class="px-3 mb-2 text-[10px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider">Trading</p>
        <ul class="space-y-0.5">
          <li>
            <a href="trade_terminal.php" class="flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm transition-all duration-200 group <?= $currentPage === 'Trading Market.php' ? 'bg-blue-600 text-white shadow-lg shadow-blue-600/20' : 'text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white hover:bg-slate-100 dark:hover:bg-slate-800/50' ?>">
              <i data-lucide="candlestick-chart" class="w-4 h-4 shrink-0 <?= $currentPage === 'trade_terminal.php' ? '' : 'group-hover:text-blue-500 dark:group-hover:text-blue-400' ?> transition-colors"></i>
              <span class="flex-1 font-medium">Live Markets</span>
              <span class="shrink-0 px-2 py-0.5 text-[10px] font-bold text-white rounded-full bg-emerald-500">LIVE</span>
            </a>
          </li>
          <li>
            <a href="copytrade.php" class="flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm transition-all duration-200 group <?= $currentPage === 'copy trade.php' ? 'bg-blue-600 text-white shadow-lg shadow-blue-600/20' : 'text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white hover:bg-slate-100 dark:hover:bg-slate-800/50' ?>">
              <i data-lucide="users-2" class="w-4 h-4 shrink-0 <?= $currentPage === 'copytrade.php' ? '' : 'group-hover:text-blue-500 dark:group-hover:text-blue-400' ?> transition-colors"></i>
              <span class="flex-1 font-medium">Copy Trading</span>
              <span class="shrink-0 px-2 py-0.5 text-[10px] font-bold text-white rounded-full bg-purple-500">PRO</span>
            </a>
          </li>
          <li>
            <a href="AItradingBot.php" class="flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm transition-all duration-200 group <?= $currentPage === 'AI trading Bot.php' ? 'bg-blue-600 text-white shadow-lg shadow-blue-600/20' : 'text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white hover:bg-slate-100 dark:hover:bg-slate-800/50' ?>">
              <i data-lucide="bot" class="w-4 h-4 shrink-0 <?= $currentPage === 'AI trading Bot.php' ? '' : 'group-hover:text-blue-500 dark:group-hover:text-blue-400' ?> transition-colors"></i>
              <span class="flex-1 font-medium">AI Trading Bots</span>
              <span class="shrink-0 px-2 py-0.5 text-[10px] font-bold text-white rounded-full bg-blue-500">AI</span>
            </a>
          </li>
        </ul>
      </div>

      <!-- ================= SIGNALS ================= -->
      <div>
        <p class="px-3 mb-2 text-[10px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider">Signals</p>
        <ul class="space-y-0.5">
          <li>
            <a href="PremiumSignals.php" class="flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm transition-all duration-200 group <?= $currentPage === 'Premium  Signals.php' ? 'bg-blue-600 text-white shadow-lg shadow-blue-600/20' : 'text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white hover:bg-slate-100 dark:hover:bg-slate-800/50' ?>">
              <i data-lucide="zap" class="w-4 h-4 shrink-0 <?= $currentPage === 'PremiumSignals.php' ? '' : 'group-hover:text-blue-500 dark:group-hover:text-blue-400' ?> transition-colors"></i>
              <span class="flex-1 font-medium">Premium Signals</span>
              <span class="shrink-0 px-2 py-0.5 text-[10px] font-bold text-white rounded-full bg-amber-500">VIP</span>
            </a>
          </li>
        </ul>
      </div>

      <!-- ================= WALLET ================= -->
      <div>
        <p class="px-3 mb-2 text-[10px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider">Wallet</p>
        <ul class="space-y-0.5">
          <li>
            <a href="deposit.php" class="flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm transition-all duration-200 group <?= $currentPage === 'deposit.php' ? 'bg-blue-600 text-white shadow-lg shadow-blue-600/20' : 'text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white hover:bg-slate-100 dark:hover:bg-slate-800/50' ?>">
              <i data-lucide="plus-circle" class="w-4 h-4 shrink-0 <?= $currentPage === 'deposit.php' ? '' : 'group-hover:text-blue-500 dark:group-hover:text-blue-400' ?> transition-colors"></i>
              <span class="flex-1 font-medium">Deposit Funds</span>
            </a>
          </li>
          <li>
            <a href="withdrawals.php" class="flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm transition-all duration-200 group <?= $currentPage === 'withdrawals.php' ? 'bg-blue-600 text-white shadow-lg shadow-blue-600/20' : 'text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white hover:bg-slate-100 dark:hover:bg-slate-800/50' ?>">
              <i data-lucide="minus-circle" class="w-4 h-4 shrink-0 <?= $currentPage === 'withdrawals.php' ? '' : 'group-hover:text-blue-500 dark:group-hover:text-blue-400' ?> transition-colors"></i>
              <span class="flex-1 font-medium">Withdraw Funds</span>
            </a>
          </li>
          <li>
            <a href="internaltransfer.php" class="flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm transition-all duration-200 group <?= $currentPage === 'internaltransfer.php' ? 'bg-blue-600 text-white shadow-lg shadow-blue-600/20' : 'text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white hover:bg-slate-100 dark:hover:bg-slate-800/50' ?>">
              <i data-lucide="arrow-left-right" class="w-4 h-4 shrink-0 <?= $currentPage === 'internaltransfer.php' ? '' : 'group-hover:text-blue-500 dark:group-hover:text-blue-400' ?> transition-colors"></i>
              <span class="flex-1 font-medium">Internal Transfer</span>
            </a>
          </li>
        </ul>
      </div>

      <!-- ================= CREDIT ================= -->
      <div>
        <p class="px-3 mb-2 text-[10px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider">Credit</p>
        <ul class="space-y-0.5">
          <li>
            <a href="Loan_Application.php" class="flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm transition-all duration-200 group <?= $currentPage === 'Loan Application.php' ? 'bg-blue-600 text-white shadow-lg shadow-blue-600/20' : 'text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white hover:bg-slate-100 dark:hover:bg-slate-800/50' ?>">
              <i data-lucide="file-plus" class="w-4 h-4 shrink-0 <?= $currentPage === 'Loan_Application.php' ? '' : 'group-hover:text-blue-500 dark:group-hover:text-blue-400' ?> transition-colors"></i>
              <span class="flex-1 font-medium">Apply for Credit</span>
              <span class="shrink-0 px-2 py-0.5 text-[10px] font-bold text-white rounded-full bg-emerald-500">NEW</span>
            </a>
          </li>
          <li>
            <a href="LoanHistory.php" class="flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm transition-all duration-200 group <?= $currentPage === 'Loan History.php' ? 'bg-blue-600 text-white shadow-lg shadow-blue-600/20' : 'text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white hover:bg-slate-100 dark:hover:bg-slate-800/50' ?>">
              <i data-lucide="file-text" class="w-4 h-4 shrink-0 <?= $currentPage === 'Loan History.php' ? '' : 'group-hover:text-blue-500 dark:group-hover:text-blue-400' ?> transition-colors"></i>
              <span class="flex-1 font-medium">Credit History</span>
            </a>
          </li>
        </ul>
      </div>

      <!-- ================= ACCOUNT ================= -->
      <div>
        <p class="px-3 mb-2 text-[10px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider">Account</p>
        <ul class="space-y-0.5">
          <li>
            <a href="ProfileSettings.php" class="flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm transition-all duration-200 group <?= $currentPage === 'ProfileSettings.php' ? 'bg-blue-600 text-white shadow-lg shadow-blue-600/20' : 'text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white hover:bg-slate-100 dark:hover:bg-slate-800/50' ?>">
              <i data-lucide="user" class="w-4 h-4 shrink-0 <?= $currentPage === 'ProfileSettings.php' ? '' : 'group-hover:text-blue-500 dark:group-hover:text-blue-400' ?> transition-colors"></i>
              <span class="flex-1 font-medium">Profile Settings</span>
            </a>
          </li>
        </ul>
      </div>

      <!-- ================= REWARDS ================= -->
      <div>
        <p class="px-3 mb-2 text-[10px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider">Rewards</p>
        <ul class="space-y-0.5">
          <li>
            <a href="ReferralProgram.php" class="flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm transition-all duration-200 group <?= $currentPage === 'Referral Program.php' ? 'bg-blue-600 text-white shadow-lg shadow-blue-600/20' : 'text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white hover:bg-slate-100 dark:hover:bg-slate-800/50' ?>">
              <i data-lucide="users" class="w-4 h-4 shrink-0 <?= $currentPage === 'Referral Program.php' ? '' : 'group-hover:text-blue-500 dark:group-hover:text-blue-400' ?> transition-colors"></i>
              <span class="flex-1 font-medium">Referral Program</span>
              <span class="shrink-0 px-2 py-0.5 text-[10px] font-bold text-white rounded-full bg-emerald-500">5%</span>
            </a>
          </li>
        </ul>
      </div>

      <!-- ================= SUPPORT ================= -->
      <div>
        <p class="px-3 mb-2 text-[10px] font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider">Support</p>
        <ul class="space-y-0.5">
          <li>
            <a href="SupportCenter.php" class="flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm transition-all duration-200 group <?= $currentPage === 'SupportCenter.php' ? 'bg-blue-600 text-white shadow-lg shadow-blue-600/20' : 'text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white hover:bg-slate-100 dark:hover:bg-slate-800/50' ?>">
              <i data-lucide="headphones" class="w-4 h-4 shrink-0 <?= $currentPage === 'SupportCenter.php' ? '' : 'group-hover:text-blue-500 dark:group-hover:text-blue-400' ?> transition-colors"></i>
              <span class="flex-1 font-medium">Support Center</span>
            </a>
          </li>
        </ul>
      </div>

      <!-- Logout Button -->
      <div class="pt-4 border-t border-slate-200 dark:border-slate-800">
        <form method="POST" action="logout.php">
          <button type="submit" class="w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm text-rose-500 dark:text-rose-400 hover:text-rose-600 dark:hover:text-rose-300 hover:bg-rose-50 dark:hover:bg-rose-500/10 transition-colors">
            <i data-lucide="log-out" class="w-4 h-4"></i>Sign Out
          </button>
        </form>
      </div>
      
    </nav>
  </aside>