<!-- 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">
    <% (sidebarSections || []).forEach((section) => { %>
      <div class="sb-section"><%= section.labelKey ? t(section.labelKey, section.labelDefault) : section.labelDefault %></div>
      <% section.items.forEach((item) => { %>
        <a
          href="<%= item.hrefResolved %>"
          class="sb-item <%= (item.activePages || []).includes(activePage) ? 'active' : '' %>"
          <% if (item.locked) { %>
            onclick='return showLockedMenuNotice(<%- JSON.stringify(item.lockedMessage) %>)'
          <% } %>
        >
          <i class="<%= item.icon %>"></i>
          <span><%= item.labelKey ? t(item.labelKey, item.labelDefault) : item.labelDefault %></span>
          <% if (item.locked) { %>
            <span style="margin-left:auto;padding:2px 8px;border-radius:999px;background:rgba(245,158,11,.18);color:#fde68a;font-size:11px">Kunci</span>
          <% } %>
        </a>
      <% }) %>
    <% }) %>

    <div class="sb-section">KONTROL</div>
    <a href="/admin/sidebar-settings" class="sb-item <%= activePage==='sidebar_settings' ? 'active' : '' %>">
      <i class="bi bi-layout-sidebar-inset"></i><span>Pengaturan Sidebar</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>

<div id="lockedMenuModal" style="display:none;position:fixed;inset:0;z-index:1200;background:rgba(2,6,23,.72);backdrop-filter:blur(4px);padding:16px;align-items:center;justify-content:center">
  <div style="width:min(100%,420px);background:linear-gradient(180deg,rgba(15,23,42,.98),rgba(30,41,59,.98));border:1px solid rgba(148,163,184,.18);border-radius:18px;box-shadow:0 24px 60px rgba(2,6,23,.45);overflow:hidden">
    <div style="display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border-bottom:1px solid rgba(148,163,184,.14)">
      <div style="display:flex;align-items:center;gap:10px">
        <div style="width:40px;height:40px;border-radius:12px;background:rgba(245,158,11,.16);color:#fde68a;display:grid;place-items:center;font-size:18px">
          <i class="bi bi-lock-fill"></i>
        </div>
        <div>
          <div style="font-weight:800;color:#f8fafc">Menu Terkunci</div>
          <div style="font-size:12px;color:#94a3b8">Aktivasi diperlukan untuk membuka fitur ini</div>
        </div>
      </div>
      <button type="button" class="btn btn-g btn-sm" onclick="hideLockedMenuNotice()" style="padding:6px 10px">
        <i class="bi bi-x-lg"></i>
      </button>
    </div>
    <div style="padding:18px">
      <div id="lockedMenuModalMessage" style="color:#e2e8f0;line-height:1.6">
        Menu ini sedang terkunci.
      </div>
      <div style="margin-top:16px;padding:12px 14px;border-radius:14px;background:rgba(59,130,246,.12);border:1px solid rgba(59,130,246,.22);color:#bfdbfe;font-size:13px">
        Silakan hubungi nomor yang tertera untuk mendapatkan password aktivasi (seikhlasnya).
      </div>
      <div style="margin-top:14px">
        <a href="/admin/sidebar-settings" class="btn btn-g" style="width:100%;display:flex;align-items:center;justify-content:center;gap:8px" onclick="hideLockedMenuNotice()">
          <i class="bi bi-layout-sidebar-inset"></i> Buka Pengaturan Sidebar
        </a>
      </div>
    </div>
    <div style="display:flex;justify-content:flex-end;gap:10px;padding:0 18px 18px 18px">
      <button type="button" class="btn btn-p" onclick="hideLockedMenuNotice()">
        <i class="bi bi-check2-circle"></i> Mengerti
      </button>
    </div>
  </div>
</div>

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

  function showLockedMenuNotice(message) {
    const modal = document.getElementById('lockedMenuModal');
    const messageBox = document.getElementById('lockedMenuModalMessage');
    if (messageBox) {
      messageBox.textContent = message || 'Menu ini sedang terkunci.';
    }
    if (modal) {
      modal.style.display = 'flex';
      document.body.style.overflow = 'hidden';
    }
    return false;
  }

  function hideLockedMenuNotice() {
    const modal = document.getElementById('lockedMenuModal');
    if (modal) {
      modal.style.display = 'none';
      document.body.style.overflow = '';
    }
  }

  document.addEventListener('keydown', function(event) {
    if (event.key === 'Escape') hideLockedMenuNotice();
  });
</script>

<!-- Bottom Navigation (Mobile Only) -->
<nav class="bottom-nav" id="bottomNav">
  <% (sidebarBottomNavItems || []).slice(0, 4).forEach((item) => { %>
    <a
      href="<%= item.hrefResolved %>"
      class="bn-item <%= (item.activePages || []).includes(activePage) ? 'active' : '' %>"
      <% if (item.locked) { %>
        onclick='return showLockedMenuNotice(<%- JSON.stringify(item.lockedMessage) %>)'
      <% } %>
    >
      <i class="<%= item.icon %>"></i>
      <span><%= item.labelKey ? t(item.labelKey, item.labelDefault) : item.labelDefault %></span>
    </a>
  <% }) %>
  <button class="bn-item" onclick="toggleSidebar()">
    <i class="bi bi-grid-3x3-gap"></i>
    <span><%= t('common.menu', 'Menu') %></span>
  </button>
</nav>
