<!-- views/admin/partials/sidebar.ejs -->
<div class="sidebar-overlay" id="sidebarOverlay" onclick="toggleSidebar()"></div>
<aside class="sidebar" id="sidebar">
  <div class="sb-brand">
    <div class="sb-icon"><i class="bi bi-wifi"></i></div>
    <div style="flex:1">
      <div class="sb-name">
        <%= company %>
      </div>
      <div class="sb-sub"><%= t('admin.panel', 'Admin Panel') %></div>
      <div style="margin-top:8px;display:flex;gap:6px">
        <a href="/lang/id" class="btn btn-g btn-sm" style="padding:4px 8px">ID</a>
        <a href="/lang/en" class="btn btn-g btn-sm" style="padding:4px 8px">EN</a>
      </div>
    </div>
    <button class="sb-close btn-g btn-sm" onclick="toggleSidebar()"><i class="bi bi-x-lg"></i></button>
  </div>
  <nav class="sb-nav">
    <div class="sb-section"><%= t('admin.section.main', 'UTAMA') %></div>
    <a href="/admin" class="sb-item <%= (!activePage || activePage==='dashboard') ? 'active' : '' %>">
      <i class="bi bi-speedometer2"></i><span><%= t('admin.nav.dashboard', 'Dashboard') %></span>
    </a>
    <a href="/admin/mikrotik" class="sb-item <%= activePage==='mikrotik' ? 'active' : '' %>">
      <i class="bi bi-router"></i><span><%= t('admin.nav.mikrotik', 'MikroTik') %></span>
    </a>
    <% if (false) { %>
    <a href="/admin/olts" class="sb-item <%= activePage==='olts' ? 'active' : '' %>">
      <i class="bi bi-hdd-rack"></i><span><%= t('admin.nav.olt_management', 'Manajemen OLT') %></span>
    </a>
    <% } %>
    <a href="/admin/map" class="sb-item <%= activePage==='map' ? 'active' : '' %>">
      <i class="bi bi-map"></i><span><%= t('admin.nav.network_map', 'Peta Jaringan') %></span>
    </a>
    <a href="/admin/whatsapp" class="sb-item <%= activePage==='whatsapp' ? 'active' : '' %>">
      <i class="bi bi-whatsapp"></i><span><%= t('admin.nav.whatsapp', 'WhatsApp') %></span>
    </a>
    <div class="sb-section"><%= t('admin.section.billing', 'BILLING') %></div>
    <a href="/admin/customers" class="sb-item <%= activePage==='customers' ? 'active' : '' %>">
      <i class="bi bi-people"></i><span><%= t('admin.nav.customers', 'Pelanggan') %></span>
    </a>
    <a href="/admin/packages" class="sb-item <%= activePage==='packages' ? 'active' : '' %>">
      <i class="bi bi-box-seam"></i><span><%= t('admin.nav.internet_packages', 'Paket Internet') %></span>
    </a>
    <a href="/admin/billing" class="sb-item <%= activePage==='billing' ? 'active' : '' %>">
      <i class="bi bi-receipt"></i><span><%= t('admin.nav.invoices', 'Tagihan') %></span>
    </a>
    <% if (typeof session !=='undefined' && session.isAdmin) { %>
    <a href="/admin/digiflazz" class="sb-item <%= activePage==='digiflazz' ? 'active' : '' %>">
      <i class="bi bi-phone"></i><span>Digiflazz</span>
    </a>
    <% } %>
    <a href="/admin/reports" class="sb-item <%= activePage==='reports' ? 'active' : '' %>">
      <i class="bi bi-bar-chart-line"></i><span><%= t('admin.nav.finance_report', 'Laporan Keuangan') %></span>
    </a>
    <a href="/admin/cashiers/reports" class="sb-item <%= activePage==='cashiers_reports' ? 'active' : '' %>">
      <i class="bi bi-journal-text"></i><span>Laporan Kasir</span>
    </a>
    <a href="/admin/collector-payments" class="sb-item <%= activePage==='collector_payments' ? 'active' : '' %>">
      <i class="bi bi-check2-square"></i><span>Approval Kolektor</span>
    </a>
    <div class="sb-section"><%= t('admin.section.service', 'LAYANAN') %></div>
    <a href="/admin/tickets" class="sb-item <%= activePage==='tickets' ? 'active' : '' %>">
      <i class="bi bi-headset"></i><span><%= t('admin.nav.customer_tickets', 'Keluhan Pelanggan') %></span>
    </a>
    <a href="/admin/inventory" class="sb-item <%= activePage==='inventory' ? 'active' : '' %>">
      <i class="bi bi-boxes"></i><span>Inventaris (Stok)</span>
    </a>
    <a href="/admin/attendance" class="sb-item <%= activePage==='attendance' ? 'active' : '' %>">
      <i class="bi bi-calendar-check"></i><span>Absensi Karyawan</span>
    </a>
    <a href="/admin/payroll" class="sb-item <%= activePage==='payroll' ? 'active' : '' %>">
      <i class="bi bi-wallet2"></i><span>Gaji Karyawan</span>
    </a>

    <% if (typeof session !=='undefined' && session.isCashier) { %>
      <div class="sb-section">KASIR</div>
      <a href="/admin/cashiers/attendance" class="sb-item <%= activePage==='cashier_attendance' ? 'active' : '' %>">
        <i class="bi bi-calendar-check"></i><span>Absensi Saya</span>
      </a>
    <% } %>

    <% if (typeof session !=='undefined' && (session.isAdmin || session.isCashier)) { %>
      <div class="sb-section"><%= t('admin.section.user_management', 'MANAJEMEN USER') %></div>
      <% if (session.isAdmin) { %>
      <a href="/admin/technicians" class="sb-item <%= activePage==='technicians' ? 'active' : '' %>">
        <i class="bi bi-person-gear"></i><span><%= t('admin.nav.technicians', 'Teknisi') %></span>
      </a>
      <a href="/admin/cashiers" class="sb-item <%= activePage==='cashiers' ? 'active' : '' %>">
        <i class="bi bi-person-vcard"></i><span><%= t('admin.nav.cashiers', 'Kasir') %></span>
      </a>
      <a href="/admin/collectors" class="sb-item <%= activePage==='collectors' ? 'active' : '' %>">
        <i class="bi bi-person-badge"></i><span>Kolektor</span>
      </a>
      <% } %>
      <a href="/admin/agents" class="sb-item <%= activePage==='agents' ? 'active' : '' %>">
        <i class="bi bi-person-badge"></i><span><%= t('admin.nav.agents', 'Agent') %></span>
      </a>
      <% if (session.isAdmin) { %>
        <a href="/admin/agents/reports" class="sb-item <%= activePage==='agents_reports' ? 'active' : '' %>">
          <i class="bi bi-journal-text"></i><span><%= t('admin.nav.agent_reports', 'Laporan Agent') %></span>
        </a>
      <% } %>
    <% } %>

        <div class="sb-section"><%= t('admin.section.system', 'SISTEM') %></div>
        <% if (typeof session !=='undefined' && session.isAdmin) { %>
          <a href="/admin/update" class="sb-item <%= activePage==='update' ? 'active' : '' %>">
            <i class="bi bi-cloud-arrow-down"></i><span><%= t('admin.nav.update', 'Update GitHub') %></span>
          </a>
          <a href="/admin/settings" class="sb-item <%= activePage==='settings' ? 'active' : '' %>">
            <i class="bi bi-gear"></i><span><%= t('admin.nav.settings', 'Pengaturan') %></span>
          </a>
          <a href="/admin/backup" class="sb-item <%= activePage==='backup' ? 'active' : '' %>">
            <i class="bi bi-hdd-stack"></i><span>Backup & Recovery</span>
          </a>
          <a href="/admin/monitoring" class="sb-item <%= activePage==='monitoring' ? 'active' : '' %>">
            <i class="bi bi-activity"></i><span>Monitoring Sistem</span>
          </a>
          <a href="/admin/audit-logs" class="sb-item <%= activePage==='audit_logs' ? 'active' : '' %>">
            <i class="bi bi-shield-lock"></i><span>Log Aktivitas</span>
          </a>

          <% } %>
            <a href="/admin/logout" class="sb-item logout">
              <i class="bi bi-box-arrow-left"></i><span><%= t('common.logout', 'Logout') %></span>
            </a>
            <div class="mt-4 px-3 py-2 text-center" style="border-top: 1px solid rgba(255,255,255,0.1);">
              <a href="https://github.com/alijayanet/billing-rtrw" target="_blank"
                style="color: #94a3b8; font-size: 11px; text-decoration: none; font-weight: 600;">
                ALIJAYA BILLING SYSTEM
              </a>
            </div>
  </nav>
</aside>

<script>
  function toggleSidebar() {
    const sb = document.getElementById('sidebar');
    const ov = document.getElementById('sidebarOverlay');
    sb.classList.toggle('open');
    ov.classList.toggle('show');
  }
</script>

<!-- Bottom Navigation (Mobile Only) -->
<nav class="bottom-nav" id="bottomNav">
  <a href="/admin" class="bn-item <%= (!activePage || activePage==='dashboard') ? 'active' : '' %>">
    <i class="bi bi-speedometer2"></i>
    <span><%= t('common.home', 'Beranda') %></span>
  </a>
  <a href="/admin/customers" class="bn-item <%= activePage==='customers' ? 'active' : '' %>">
    <i class="bi bi-people"></i>
    <span><%= t('admin.nav.customers', 'Pelanggan') %></span>
  </a>
  <a href="/admin/billing" class="bn-item <%= activePage==='billing' ? 'active' : '' %>">
    <i class="bi bi-receipt"></i>
    <span><%= t('admin.nav.invoices', 'Tagihan') %></span>
  </a>
  <a href="/admin/mikrotik" class="bn-item <%= activePage==='mikrotik' ? 'active' : '' %>">
    <i class="bi bi-router"></i>
    <span>MikroTik</span>
  </a>
  <button class="bn-item" onclick="toggleSidebar()">
    <i class="bi bi-grid-3x3-gap"></i>
    <span><%= t('common.menu', 'Menu') %></span>
  </button>
</nav>
