<?php
$currentPage = basename($_SERVER['PHP_SELF']);

function sb_is_active(array $pages, string $currentPage): bool {
  return in_array($currentPage, $pages, true);
}

function sb_active_class(array $pages, string $currentPage): string {
  return sb_is_active($pages, $currentPage) ? ' active' : '';
}

function sb_open_class(array $pages, string $currentPage): string {
  return sb_is_active($pages, $currentPage) ? ' open' : '';
}

function sb_expanded_attr(array $pages, string $currentPage): string {
  return sb_is_active($pages, $currentPage) ? 'true' : 'false';
}
?>

<!-- ══════════════ SIDEBAR STYLES ══════════════ -->
<style>
  .sidebar {
    position: fixed;
    top: 0; left: 0;
    width: var(--sw);
    height: 100vh;
    background: var(--dark-800);
    border-right: 1px solid rgba(245,197,24,0.08);
    display: flex;
    flex-direction: column;
    z-index: 1000;
    transition: left 0.3s ease, background 0.4s ease, border-color 0.4s ease;
    overflow: hidden;
  }

  :root.light-mode .sidebar {
    box-shadow: 1px 0 3px rgba(0,0,0,0.08);
  }

  /* ── Logo area ── */
  .sb-logo {
    padding: 0 20px;
    height: var(--nh);
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid rgba(245,197,24,0.08);
    flex-shrink: 0;
  }

  .sb-logo-icon {
    width: 34px; height: 34px;
    background: var(--yellow-glass);
    border: 1px solid var(--yellow-border);
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    color: var(--yellow);
    font-size: 0.9rem;
  }

  .sb-logo-text {
    font-family: 'Syne', sans-serif;
    font-size: 1rem;
    font-weight: 800;
    color: var(--text-1);
    letter-spacing: -0.3px;
  }

  .sb-logo-text span {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.54rem;
    font-weight: 400;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--text-3);
    margin-top: 1px;
  }

  /* ── Admin info bar ── */
  .sb-user {
    margin: 12px 14px;
    background: var(--yellow-glass);
    border: 1px solid var(--yellow-border);
    border-radius: var(--r);
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
  }

  .sb-user-avatar {
    width: 32px; height: 32px;
    background: linear-gradient(135deg, var(--yellow), var(--yellow-dim));
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: 0.8rem;
    color: var(--dark-900);
    flex-shrink: 0;
  }

  .sb-user-name {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-1);
    line-height: 1.1;
  }

  .sb-user-role {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.58rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--yellow-dim);
    margin-top: 2px;
  }

  /* ── Scroll area ── */
  .sb-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 0 12px;
  }
  .sb-scroll::-webkit-scrollbar { width: 3px; }
  .sb-scroll::-webkit-scrollbar-track { background: transparent; }
  .sb-scroll::-webkit-scrollbar-thumb { background: rgba(245,197,24,0.15); border-radius: 8px; }

  /* ── Section label ── */
  .sb-section-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.55rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--text-3);
    padding: 16px 20px 6px;
  }

  /* ── Single nav link ── */
  .sb-link {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 14px;
    margin: 1px 10px;
    border-radius: 9px;
    color: var(--text-2);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    transition: background 0.18s, color 0.18s;
    position: relative;
  }

  .sb-link i { width: 18px; text-align: center; font-size: 0.82rem; flex-shrink: 0; }
  .sb-link:hover { background: rgba(255,255,255,0.04); color: var(--text-1); }

  .sb-link.active {
    background: var(--yellow-glass);
    color: var(--yellow);
    border: 1px solid var(--yellow-border);
  }
  .sb-link.active i { color: var(--yellow); }
  .sb-link.active::before {
    content: '';
    position: absolute;
    left: -10px; top: 50%;
    transform: translateY(-50%);
    width: 3px; height: 18px;
    background: var(--yellow);
    border-radius: 0 3px 3px 0;
  }

  /* ── Group toggle button ── */
  .sb-group-btn {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 14px;
    margin: 1px 10px;
    border-radius: 9px;
    color: var(--text-2);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    background: none;
    border: none;
    width: calc(100% - 20px);
    text-align: left;
    transition: background 0.18s, color 0.18s;
  }
  .sb-group-btn i.gi { width: 18px; text-align: center; font-size: 0.82rem; flex-shrink: 0; }
  .sb-group-btn:hover { background: rgba(255,255,255,0.04); color: var(--text-1); }
  .sb-group-btn[aria-expanded="true"] { color: var(--yellow); }

  .sb-chevron {
    margin-left: auto;
    font-size: 0.68rem;
    color: var(--text-3);
    transition: transform 0.25s ease;
  }
  .sb-group-btn[aria-expanded="true"] .sb-chevron {
    transform: rotate(180deg);
    color: var(--yellow-dim);
  }

  /* ── Sub-menu ── */
  .sb-sub {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s ease;
  }
  .sb-sub.open { max-height: 200px; }

  .sb-sub a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px 7px 50px;
    margin: 1px 10px;
    border-radius: 8px;
    color: var(--text-3);
    text-decoration: none;
    font-size: 0.8rem;
    transition: background 0.15s, color 0.15s;
  }
  .sb-sub a i { font-size: 0.68rem; }
  .sb-sub a:hover { background: var(--yellow-glass); color: var(--yellow); }
  .sb-sub a.active {
    background: var(--yellow-glass);
    color: var(--yellow);
    box-shadow: inset 0 0 0 1px var(--yellow-border);
  }
  .sb-sub a.active i { color: var(--yellow); }

  /* ── Footer ── */
  .sb-footer {
    padding: 10px 10px 14px;
    border-top: 1px solid rgba(255,255,255,0.04);
    flex-shrink: 0;
  }

  .sb-logout {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 14px;
    border-radius: 9px;
    color: var(--red);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    transition: background 0.18s;
  }
  .sb-logout i { width: 18px; text-align: center; font-size: 0.82rem; }
  .sb-logout:hover { background: rgba(239,79,74,0.08); }

  /* Overlay on mobile */
  .sb-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 999;
    backdrop-filter: blur(2px);
  }
  @media (max-width: 991px) {
    body.sidebar-open .sb-overlay { display: block; }
  }
</style>

<!-- Overlay (mobile) -->
<div class="sb-overlay" id="sbOverlay"></div>

<!-- ══════════════ SIDEBAR ══════════════ -->
<aside class="sidebar" id="mainSidebar">

  <!-- Logo -->
  <div class="sb-logo">
    <div class="sb-logo-icon"><i class="fas fa-chart-line"></i></div>
    <div class="sb-logo-text">
      BrokerPortal
      <span>Management Console</span>
    </div>
  </div>

  <!-- Admin info -->
  <div class="sb-user">
    <div class="sb-user-avatar">A</div>
    <div>
      <div class="sb-user-name">Admin Panel</div>
      <div class="sb-user-role">Super Admin</div>
    </div>
  </div>

  <!-- Scrollable nav -->
  <div class="sb-scroll">

    <div class="sb-section-label">Main</div>

    <a href="dashboard.php" class="sb-link<?= sb_active_class(['dashboard.php'], $currentPage) ?>">
      <i class="fas fa-tachometer-alt"></i> Dashboard
    </a>

    <!-- Trading Env -->
    <button class="sb-group-btn" data-sub="subEnv" aria-expanded="<?= sb_expanded_attr(['manage_trad_env.php', 'add_trad_env.php'], $currentPage) ?>">
      <i class="fas fa-chart-area gi"></i>
      Trading Conditions
      <i class="fas fa-chevron-down sb-chevron"></i>
    </button>
    <div class="sb-sub<?= sb_open_class(['manage_trad_env.php', 'add_trad_env.php'], $currentPage) ?>" id="subEnv">
      <a href="./manage_trad_env.php" class="<?= sb_active_class(['manage_trad_env.php'], $currentPage) ?>"><i class="fas fa-list"></i> View Rankings</a>
      <a href="./add_trad_env.php" class="<?= sb_active_class(['add_trad_env.php'], $currentPage) ?>"><i class="fas fa-plus"></i> Add New</a>
    </div>


    <!-- Brokers -->
    <button class="sb-group-btn" data-sub="subBrokers" aria-expanded="<?= sb_expanded_attr(['brokers.php', 'add-broker.php'], $currentPage) ?>">
      <i class="fas fa-briefcase gi"></i>
      Brokers
      <i class="fas fa-chevron-down sb-chevron"></i>
    </button>
    <div class="sb-sub<?= sb_open_class(['brokers.php', 'add-broker.php'], $currentPage) ?>" id="subBrokers">
      <a href="brokers.php" class="<?= sb_active_class(['brokers.php'], $currentPage) ?>"><i class="fas fa-list"></i> View Brokers</a>
      <a href="add-broker.php" class="<?= sb_active_class(['add-broker.php'], $currentPage) ?>"><i class="fas fa-plus"></i> Add Broker</a>
    </div>

    <!-- Blacklisted -->
    <button class="sb-group-btn" data-sub="subBlacklist" aria-expanded="<?= sb_expanded_attr(['list_blackbrokers.php', 'add-blackbrokers.php'], $currentPage) ?>">
      <i class="fas fa-ban gi"></i>
      Blacklisted
      <i class="fas fa-chevron-down sb-chevron"></i>
    </button>
    <div class="sb-sub<?= sb_open_class(['list_blackbrokers.php', 'add-blackbrokers.php'], $currentPage) ?>" id="subBlacklist">
      <a href="list_blackbrokers.php" class="<?= sb_active_class(['list_blackbrokers.php'], $currentPage) ?>"><i class="fas fa-eye"></i> View List</a>
      <a href="add-blackbrokers.php" class="<?= sb_active_class(['add-blackbrokers.php'], $currentPage) ?>"><i class="fas fa-user-slash"></i> Add to Blacklist</a>
    </div>

    <div class="sb-section-label">Content</div>

    <!-- Articles -->
    <button class="sb-group-btn" data-sub="subArticles" aria-expanded="<?= sb_expanded_attr(['articles_list.php', 'article_create.php', 'article_edit.php', 'article_view.php', 'article_delete.php'], $currentPage) ?>">
      <i class="fas fa-newspaper gi"></i>
      Articles
      <i class="fas fa-chevron-down sb-chevron"></i>
    </button>
    <div class="sb-sub<?= sb_open_class(['articles_list.php', 'article_create.php', 'article_edit.php', 'article_view.php', 'article_delete.php'], $currentPage) ?>" id="subArticles">
      <a href="articles_list.php" class="<?= sb_active_class(['articles_list.php', 'article_edit.php', 'article_view.php', 'article_delete.php'], $currentPage) ?>"><i class="fas fa-list"></i> View Articles</a>
      <a href="article_create.php" class="<?= sb_active_class(['article_create.php'], $currentPage) ?>"><i class="fas fa-plus"></i> Add Article</a>
    </div>

    <!-- Reports -->
    <button class="sb-group-btn" data-sub="subReports" aria-expanded="<?= sb_expanded_attr(['admin_reports.php', 'admin_report_add.php', 'admin_report_edit.php', 'admin_report_delete.php'], $currentPage) ?>">
      <i class="fas fa-file-lines gi"></i>
      Reports
      <i class="fas fa-chevron-down sb-chevron"></i>
    </button>
    <div class="sb-sub<?= sb_open_class(['admin_reports.php', 'admin_report_add.php', 'admin_report_edit.php', 'admin_report_delete.php'], $currentPage) ?>" id="subReports">
      <a href="admin_reports.php" class="<?= sb_active_class(['admin_reports.php', 'admin_report_edit.php', 'admin_report_delete.php'], $currentPage) ?>"><i class="fas fa-list"></i> View Reports</a>
      <a href="admin_report_add.php" class="<?= sb_active_class(['admin_report_add.php'], $currentPage) ?>"><i class="fas fa-plus"></i> Add Report</a>
    </div>

    <!-- Surveys -->
    <button class="sb-group-btn" data-sub="subSurveys" aria-expanded="<?= sb_expanded_attr(['view_surveys.php', 'add_survey.php', 'edit_survey.php', 'delete_survey.php'], $currentPage) ?>">
      <i class="fas fa-poll gi"></i>
      Surveys
      <i class="fas fa-chevron-down sb-chevron"></i>
    </button>
    <div class="sb-sub<?= sb_open_class(['view_surveys.php', 'add_survey.php', 'edit_survey.php', 'delete_survey.php'], $currentPage) ?>" id="subSurveys">
      <a href="view_surveys.php" class="<?= sb_active_class(['view_surveys.php', 'edit_survey.php', 'delete_survey.php'], $currentPage) ?>"><i class="fas fa-list"></i> View Surveys</a>
      <a href="add_survey.php" class="<?= sb_active_class(['add_survey.php'], $currentPage) ?>"><i class="fas fa-plus"></i> Add Survey</a>
    </div>

    <!-- EA -->
    <button class="sb-group-btn" data-sub="subEA" aria-expanded="<?= sb_expanded_attr(['view_ea.php', 'add_ea.php', 'edit_ea.php', 'delete_ea.php'], $currentPage) ?>">
      <i class="fas fa-robot gi"></i>
      Expert Advisors
      <i class="fas fa-chevron-down sb-chevron"></i>
    </button>
    <div class="sb-sub<?= sb_open_class(['view_ea.php', 'add_ea.php', 'edit_ea.php', 'delete_ea.php'], $currentPage) ?>" id="subEA">
      <a href="view_ea.php" class="<?= sb_active_class(['view_ea.php', 'edit_ea.php', 'delete_ea.php'], $currentPage) ?>"><i class="fas fa-list"></i> View EA</a>
      <a href="add_ea.php" class="<?= sb_active_class(['add_ea.php'], $currentPage) ?>"><i class="fas fa-plus"></i> Add EA</a>
    </div>

  </div><!-- /sb-scroll -->

  <!-- Footer -->
  <div class="sb-footer">
    <a href="logout.php" class="sb-logout">
      <i class="fas fa-sign-out-alt"></i> Logout
    </a>
  </div>

</aside>

<script>
  // Sub-menu accordion
  document.querySelectorAll('.sb-group-btn').forEach(btn => {
    btn.addEventListener('click', () => {
      const subId  = btn.dataset.sub;
      const sub    = document.getElementById(subId);
      const isOpen = btn.getAttribute('aria-expanded') === 'true';

      // Close all
      document.querySelectorAll('.sb-sub.open').forEach(el => el.classList.remove('open'));
      document.querySelectorAll('.sb-group-btn').forEach(b => b.setAttribute('aria-expanded','false'));

      if (!isOpen) {
        sub.classList.add('open');
        btn.setAttribute('aria-expanded','true');
      }
    });
  });

  // Mobile overlay click closes sidebar
  document.getElementById('sbOverlay')?.addEventListener('click', () => {
    document.body.classList.remove('sidebar-open');
  });
</script>