<?php
// Admin Sidebar Navigation — RBE Utilities
?>
<nav class="admin-sidebar">
  <div class="sidebar-header">
    <div class="logo-glow">⚡</div>
    <div class="brand">RBE Utilities</div>
    <button class="collapse-btn" title="Toggle sidebar" aria-label="Toggle sidebar">≡</button>
  </div>

  <ul class="nav-links">
    <li><a href="/admin-dashboard.php"><i class="icon">🏠</i><span>Overview</span></a></li>
    <li><a href="/manage-agents.php"><i class="icon">👤</i><span>Agents</span></a></li>
    <li><a href="/manage-landlords.php"><i class="icon">🏢</i><span>Landlords</span></a></li>
    <li><a href="/properties.php"><i class="icon">🏘️</i><span>Properties</span></a></li>
    <li><a href="/admin-meters-list.php"><i class="icon">🔌</i><span>Meters</span></a></li>
    <li><a href="/admin-meters.php"><i class="icon">✚</i><span>Add Meters</span></a></li>
    <li><a href="/modules/billing/billing.php"><i class="icon">💳</i><span>Billing</span></a></li>
    <li><a href="/modules/wallet/wallet.php"><i class="icon">👛</i><span>Wallet</span></a></li>
    <li><a href="/modules/reports/reports.php"><i class="icon">📊</i><span>Reports</span></a></li>
    <li><a href="/logout.php"><i class="icon">🚪</i><span>Logout</span></a></li>
  </ul>
  <div style="margin: 12px; margin-top:auto;">
    <button id="themeToggle" style="width:100%; background:#10314a; color:var(--text); border:1px solid rgba(255,255,255,0.2); border-radius:10px; padding:8px; cursor:pointer;">🌙 Theme</button>
  </div>
</nav>

<style>
:root {
  --bg-dark: #041622;
  --nav-bg: linear-gradient(180deg, #062235 0%, #041622 100%);
  --nav-hover: rgba(0, 204, 255, 0.12);
  --accent: #7ed957;
  --accent2: #00ccff;
  --text: #e6f5ff;
  --muted: #9bb5c7;
  --radius: 12px;
  --transition: 0.25s ease;
  --shadow: 0 0 14px rgba(0, 0, 0, 0.5);
}

.admin-sidebar {
  position: fixed;
  top: 0; left: 0;
  width: 240px;
  height: 100vh;
  background: var(--nav-bg);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  z-index: 1000;
}

/* Collapsed state */
body.sidebar-collapsed .admin-sidebar { width: 72px; }
body.sidebar-collapsed .admin-sidebar .brand { display: none; }
body.sidebar-collapsed .admin-sidebar .nav-links a span { display: none; }
body.sidebar-collapsed .admin-sidebar .nav-links a { justify-content: center; }

.sidebar-header { display: flex; align-items: center; gap: 10px; padding: 20px; }
.logo-glow { font-size: 26px; color: var(--accent2); text-shadow: 0 0 10px var(--accent2); }
.brand { color: var(--accent); font-size: 16px; font-weight: 700; letter-spacing: 0.5px; }

.nav-links { list-style: none; margin: 0; padding: 0; flex: 1; }
.nav-links li { display: block; }
.nav-links a { display: flex; align-items: center; gap: 14px; padding: 12px 20px; color: var(--text); text-decoration: none; font-weight: 500; transition: var(--transition); }
.nav-links a:hover { background: var(--nav-hover); }
.nav-links a.active { background: rgba(0, 204, 255, 0.18); color: var(--accent2); border-left: 3px solid var(--accent2); }
.icon { font-size: 20px; width: 26px; text-align: center; }

.collapse-btn { margin-left: auto; border: 1px solid rgba(255,255,255,0.15); background: transparent; color: var(--text); border-radius: 8px; padding: 6px 8px; cursor: pointer; }
.collapse-btn:hover { background: rgba(0,0,0,0.15); }

@media (max-width: 900px) {
  .admin-sidebar { position: fixed; width: 100%; height: auto; flex-direction: row; align-items: center; overflow-x: auto; }
  .nav-links { display: flex; justify-content: space-around; width: 100%; }
  .sidebar-header { display: none; }
}
</style>

<script>
document.addEventListener('DOMContentLoaded', () => {
  const current = window.location.pathname.split('/').pop();
  document.querySelectorAll('.nav-links a').forEach(link => {
    if (link.getAttribute('href').includes(current)) {
      link.classList.add('active');
    }
  });

  const collapsed = localStorage.getItem('sidebarCollapsed') === '1';
  if (collapsed) document.body.classList.add('sidebar-collapsed');
  const btn = document.querySelector('.admin-sidebar .collapse-btn');
  if (btn) {
    btn.addEventListener('click', () => {
      document.body.classList.toggle('sidebar-collapsed');
      localStorage.setItem('sidebarCollapsed', document.body.classList.contains('sidebar-collapsed') ? '1' : '0');
    });
  }
  if (localStorage.getItem('themeLight') === '1') document.body.classList.add('light');
});
</script>
