<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="app-url" content="<?= APP_URL ?>">
  <meta name="csrf-token" content="<?= $_SESSION['csrf_token'] ?? '' ?>">
  <title><?= e($title ?? 'SINERGI') ?> — SINERGI</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
  <link rel="stylesheet" href="<?= asset('css/app.css') ?>">
  <?php if (isset($extraCss)) echo $extraCss; ?>
</head>
<body>

<div class="app-shell">
  <!-- SIDEBAR -->
  <aside class="sidebar" id="sidebar">
    <div class="sidebar-brand">
      <div class="sidebar-brand-icon">🗺</div>
      <div class="sidebar-brand-text">
        <h1>SINERGI</h1>
        <p>GIS Kemiskinan Pontianak</p>
      </div>
    </div>

    <div class="sidebar-section">
      <div class="sidebar-section-title">Menu Utama</div>
      <ul class="sidebar-nav">
        <li><a href="<?= APP_URL ?>/admin/dashboard">
          <span class="nav-icon">📊</span> Dashboard
        </a></li>
      </ul>
    </div>

    <div class="sidebar-section">
      <div class="sidebar-section-title">Data Master</div>
      <ul class="sidebar-nav">
        <li><a href="<?= APP_URL ?>/admin/users">
          <span class="nav-icon">👤</span> Manajemen User
        </a></li>
        <li><a href="<?= APP_URL ?>/admin/rumah-ibadah">
          <span class="nav-icon">⛪</span> Rumah Ibadah
        </a></li>
        <li><a href="<?= APP_URL ?>/admin/wilayah">
          <span class="nav-icon">🗾</span> Wilayah
        </a></li>
        <li><a href="<?= APP_URL ?>/admin/kategori-bantuan">
          <span class="nav-icon">📦</span> Kategori Bantuan
        </a></li>
      </ul>
    </div>

    <div class="sidebar-section">
      <div class="sidebar-section-title">Monitoring</div>
      <ul class="sidebar-nav">
        <li><a href="<?= APP_URL ?>/admin/monitoring">
          <span class="nav-icon">👥</span> Data Kemiskinan
        </a></li>
        <li><a href="<?= APP_URL ?>/admin/blind-spot">
          <span class="nav-icon">⚠️</span> Blind Spot
        </a></li>
        <li><a href="<?= APP_URL ?>/admin/aktivitas">
          <span class="nav-icon">📋</span> Log Aktivitas
        </a></li>
      </ul>
    </div>

    <div class="sidebar-footer">
      <div class="sidebar-user">
        <div class="sidebar-user-avatar"><?= strtoupper(substr($user['nama'] ?? 'A', 0, 1)) ?></div>
        <div class="sidebar-user-info">
          <div class="sidebar-user-name"><?= e($user['nama'] ?? '') ?></div>
          <div class="sidebar-user-role">Super Admin</div>
        </div>
        <a href="<?= APP_URL ?>/logout" class="sidebar-logout" title="Logout">⏻</a>
      </div>
    </div>
  </aside>

  <!-- TOPBAR -->
  <header class="topbar">
    <div class="topbar-title"><?= e($title ?? '') ?></div>
    <div class="topbar-actions">
      <span class="topbar-time" id="live-clock"></span>
      <a href="<?= APP_URL ?>" target="_blank" class="btn btn-ghost btn-sm">🌐 Publik</a>
    </div>
  </header>

  <!-- MAIN CONTENT -->
  <main class="main-content">
    <?= flashMessage() ?>
    <?= $content ?>
  </main>
</div>

<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet.heat@0.2.0/dist/leaflet-heat.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script src="<?= asset('js/app.js') ?>"></script>
<?php if (isset($extraJs)) echo $extraJs; ?>
</body>
</html>
