<?php
// ============================================================
// index.php – Halaman Utama WebGIS
// ============================================================
session_start();

$modul = $_GET['modul'] ?? null;

if (!$modul) {
    ?>
    <!DOCTYPE html>
    <html lang="id">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Pilih Project Kelas - WebGIS Publik</title>
        <script src="https://cdn.tailwindcss.com"></script>
        <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700;800&display=swap" rel="stylesheet">
        <style>
            body { font-family: 'Plus Jakarta Sans', sans-serif; }
            .bg-map {
                background-image: url('assets/img/map-bg.png');
                background-size: cover;
                background-position: center;
            }
        </style>
    </head>
    <body class="bg-white min-h-screen flex items-center justify-center bg-map relative">
        <div class="absolute inset-0 bg-white/90 backdrop-blur-md"></div>
        
        <div class="relative z-10 max-w-5xl w-full px-6 py-12">
            <div class="text-center mb-12">
                <h1 class="text-4xl md:text-5xl font-extrabold text-rose-700 mb-4 tracking-tight drop-shadow-sm">
                    Pusat Informasi Geospasial
                </h1>
                <p class="text-slate-600 text-lg max-w-2xl mx-auto font-medium">
                    Akses publik untuk mengeksplorasi, menambahkan, dan mengedit data pada 3 modul utama WebGIS.
                </p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <!-- SPBU -->
                <a href="?modul=spbu" class="group relative bg-white border-2 border-rose-100 p-8 rounded-3xl transition-all duration-300 hover:-translate-y-2 hover:shadow-[0_20px_40px_-15px_rgba(225,29,72,0.3)] hover:border-rose-400">
                    <div class="w-16 h-16 bg-rose-50 text-rose-600 rounded-2xl flex items-center justify-center text-3xl mb-6 group-hover:bg-rose-600 group-hover:text-white transition-colors duration-300 shadow-sm border border-rose-100">⛽</div>
                    <h2 class="text-2xl font-bold mb-3 text-slate-800 group-hover:text-rose-700 transition-colors">Peta Lokasi SPBU</h2>
                    <p class="text-slate-500 text-sm leading-relaxed font-medium">
                        Manajemen dan pemetaan titik lokasi SPBU di seluruh wilayah, beserta informasi layanan 24 jam.
                    </p>
                </a>

                <!-- Tematik -->
                <a href="?modul=tematik" class="group relative bg-white border-2 border-rose-100 p-8 rounded-3xl transition-all duration-300 hover:-translate-y-2 hover:shadow-[0_20px_40px_-15px_rgba(225,29,72,0.3)] hover:border-rose-400">
                    <div class="w-16 h-16 bg-rose-50 text-rose-600 rounded-2xl flex items-center justify-center text-3xl mb-6 group-hover:bg-rose-600 group-hover:text-white transition-colors duration-300 shadow-sm border border-rose-100">🗺️</div>
                    <h2 class="text-2xl font-bold mb-3 text-slate-800 group-hover:text-rose-700 transition-colors">Peta Tematik</h2>
                    <p class="text-slate-500 text-sm leading-relaxed font-medium">
                        Visualisasi batas wilayah kecamatan, jaringan sungai besar, dan hierarki jaringan jalan.
                    </p>
                </a>

                <!-- Digitasi -->
                <a href="?modul=digitasi" class="group relative bg-white border-2 border-rose-100 p-8 rounded-3xl transition-all duration-300 hover:-translate-y-2 hover:shadow-[0_20px_40px_-15px_rgba(225,29,72,0.3)] hover:border-rose-400">
                    <div class="w-16 h-16 bg-rose-50 text-rose-600 rounded-2xl flex items-center justify-center text-3xl mb-6 group-hover:bg-rose-600 group-hover:text-white transition-colors duration-300 shadow-sm border border-rose-100">📐</div>
                    <h2 class="text-2xl font-bold mb-3 text-slate-800 group-hover:text-rose-700 transition-colors">Digitasi Lahan</h2>
                    <p class="text-slate-500 text-sm leading-relaxed font-medium">
                        Fitur penggambaran poligon parsil tanah dan garis jalan secara interaktif layaknya petugas.
                    </p>
                </a>
            </div>
            
            <div class="mt-16 text-center text-slate-400 text-sm font-semibold tracking-wide">
                &copy; 2026 WebGIS PENGENTASAN KEMISKINAN
            </div>
        </div>
    </body>
    </html>
    <?php
    exit;
}

// Lanjut jika modul sudah dipilih (spbu/tematik/digitasi)


// Aplikasi Publik (Tidak butuh login)
$currentUser = 'Pengunjung Publik';
$currentRole = 'petugas'; // Berikan role petugas agar pengunjung dapat mengedit data
$_SESSION['role'] = 'petugas';

include 'koneksi.php';

// Eksekusi ALTER TABLE secara diam-diam jika kolom belum ada
try {
    $pdo->exec("ALTER TABLE penduduk_miskin ADD COLUMN status_bantuan ENUM('Belum Disalurkan', 'Proses', 'Sudah Disalurkan') DEFAULT 'Belum Disalurkan'");
} catch(PDOException $e) {
    // Abaikan error jika kolom sudah ada
}

// Ambil semua data
$stmt = $pdo->query("SELECT * FROM points ORDER BY id DESC");
$points = $stmt->fetchAll();

$stmt = $pdo->query("SELECT * FROM jalan ORDER BY id DESC");
$jalan = $stmt->fetchAll();

$stmt = $pdo->query("SELECT * FROM polygon ORDER BY id DESC");
$polygons = $stmt->fetchAll();

$stmt = $pdo->query("SELECT * FROM fasilitas_publik ORDER BY id DESC");
$fasilitasPublik = $stmt->fetchAll();

$stmt = $pdo->query("SELECT pm.*, fp.nama AS fp_nama FROM penduduk_miskin pm LEFT JOIN fasilitas_publik fp ON pm.fasilitas_publik_id = fp.id ORDER BY pm.id DESC");
$pendudukMiskin = $stmt->fetchAll();

// Statistik dashboard
$totalFP    = count($fasilitasPublik);
$totalPM    = count($pendudukMiskin);
$ditangani  = count(array_filter($pendudukMiskin, fn($p) => $p['status_jangkauan'] === 'Dalam Jangkauan'));
$belumDitangani = $totalPM - $ditangani;
$persen = $totalPM > 0 ? round(($ditangani / $totalPM) * 100, 1) : 0;

$totalSPBU  = count($points);
$spbu24     = count(array_filter($points, fn($p) => $p['buka_24_jam'] === 'Ya'));
$spbuTidak  = $totalSPBU - $spbu24;
?>
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebGIS – Sistem Analisis Geospasial Pengentasan Kemiskinan</title>

    <!-- Leaflet CSS -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" crossorigin="">
    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
    <!-- Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.3/dist/chart.umd.min.js"></script>
    <!-- SweetAlert2 -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <!-- Lottie Web -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.12.2/lottie.min.js"></script>
    <!-- Custom CSS -->
    <link rel="stylesheet" href="assets/css/style.css?v=36">
    <style>
        /* Sticky Header Sidebar */
        .sidebar-top-sticky {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(12px);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            border-bottom: 1px solid transparent;
            flex-shrink: 0;
            z-index: 10;
        }

        /* Saat di-scroll */
        .sidebar-top-sticky.scrolled {
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
            border-bottom: 1px solid var(--sidebar-border);
        }
        
        /* Animasi logo sub */
        .logo-sub {
            transition: all 0.3s ease;
            max-height: 20px;
            opacity: 1;
            overflow: hidden;
        }
        
        .sidebar-top-sticky.scrolled .btn-back-dashboard {
            padding: 8px 16px !important;
            font-size: 0.75rem !important;
        }
        
        .sidebar-top-sticky.scrolled .sidebar-header {
            padding: 10px 16px !important;
        }
        
        .sidebar-top-sticky.scrolled .logo-sub {
            max-height: 0;
            opacity: 0;
            margin-top: 0;
        }
        
        .sidebar-top-sticky.scrolled .logo-icon svg {
            width: 18px;
            height: 18px;
        }

        .sidebar-scrollable {
            flex: 1;
            min-height: 0;
            overflow-y: auto;
            overflow-x: hidden;
            display: flex;
            flex-direction: column;
        }
        
        /* Custom Scrollbar Merah Putih untuk sidebar-scrollable */
        .sidebar-scrollable::-webkit-scrollbar {
            width: 6px;
        }
        .sidebar-scrollable::-webkit-scrollbar-track {
            background: rgba(0,0,0,0.02);
        }
        .sidebar-scrollable::-webkit-scrollbar-thumb {
            background: rgba(225, 29, 72, 0.2); /* Merah transparan */
            border-radius: 6px;
        }
        .sidebar-scrollable::-webkit-scrollbar-thumb:hover {
            background: rgba(225, 29, 72, 0.5); /* Merah saat dihover */
        }
    </style>
</head>
<body>

<!-- ============================================================
     SPLASH SCREEN PRELOADER
============================================================ -->
<div id="splashScreen" style="position:fixed; inset:0; z-index:9999; background:rgba(15, 23, 42, 0.85); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); display:flex; flex-direction:column; align-items:center; justify-content:center; transition:opacity 0.5s ease, visibility 0.5s ease;">
    <!-- Lottie Container -->
    <div id="lottieContainer" style="width:250px; height:250px; margin-bottom:20px;"></div>
    <!-- Pulse Text -->
    <div style="color:white; font-family:'Plus Jakarta Sans', sans-serif; font-weight:600; font-size:16px; letter-spacing:0.5px; animation:pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;">
        Menyiapkan Engine Geospasial...
    </div>
    <style>
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: .5; }
        }
        .splash-hidden {
            opacity: 0 !important;
            visibility: hidden !important;
        }
    </style>
</div>

<!-- ============================================================
     SIDEBAR
============================================================ -->
<aside class="sidebar" id="sidebar">
    <div class="sidebar-top-sticky" id="sidebarSticky">
        <a href="index.php" class="btn-back-dashboard" style="display:flex;align-items:center;gap:8px;padding:12px 16px;color:#e11d48;background:rgba(225,29,72,0.03);text-decoration:none;border-bottom:1px solid rgba(225,29,72,0.1);font-size:0.85rem;font-weight:700;transition:all 0.3s;" title="Kembali ke Menu Utama">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
            Kembali ke Menu Utama
        </a>

        <!-- Header Sidebar -->
        <div class="sidebar-header">
            <div class="sidebar-logo">
                <div class="logo-icon">
                    <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
                        <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z" fill="currentColor" opacity=".9"/>
                        <circle cx="12" cy="9" r="2.5" fill="white"/>
                    </svg>
                </div>
<?php
$modulNames = [
    'utuh' => 'Semua Modul',
    'spbu' => 'Modul SPBU',
    'bantuan' => 'Modul Bantuan',
    'tematik' => 'Peta Tematik',
    'digitasi' => 'Modul Digitasi'
];
$modulTitle = $modulNames[$modul] ?? 'Analisis Spasial';
?>
                <div class="logo-text">
                    <span class="logo-title">WebGIS</span>
                    <span class="logo-sub" style="color: var(--accent); font-weight: 700;"><?= $modulTitle ?></span>
                </div>
            </div>
            <button class="sidebar-toggle" id="sidebarToggle" title="Sembunyikan Sidebar">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
                    <path d="M15 18l-6-6 6-6"/>
                </svg>
            </button>
        </div>
    </div>

    <!-- Scrollable Area -->
    <div class="sidebar-scrollable" id="sidebarScrollable">
        <!-- User Info -->
        <div class="sidebar-user">
            <div class="user-info">
                <div class="user-avatar"><?= strtoupper(substr($currentUser, 0, 1)) ?></div>
                <div class="user-detail">
                    <span class="user-name"><?= htmlspecialchars($currentUser) ?></span>
                    <span class="user-role"><?= ucfirst($currentRole) ?></span>
                </div>
            </div>
            <?php if (isset($_SESSION['user_id'])): ?>
            <a href="logout.php" class="btn-logout" title="Logout">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
                    <polyline points="16 17 21 12 16 7"/>
                    <line x1="21" y1="12" x2="9" y2="12"/>
                </svg>
            </a>
            <?php endif; ?>
        </div>


        <!-- Dashboard Statistik -->
        <?php if (in_array($modul, ['spbu', 'bantuan', 'utuh'])): ?>
        <div class="sidebar-section">
            <div class="section-label">Dashboard Statistik</div>
            
            <?php if ($modul === 'spbu' || $modul === 'utuh'): ?>
            <div class="stats-grid mb-4">
                <div class="stat-card stat-blue">
                    <div class="stat-icon">⛽</div>
                    <div class="stat-body">
                        <div class="stat-value" id="statTotalSPBU"><?= $totalSPBU ?></div>
                        <div class="stat-label">Total SPBU</div>
                    </div>
                </div>
                <div class="stat-card stat-green">
                    <div class="stat-icon">✅</div>
                    <div class="stat-body">
                        <div class="stat-value" id="statSPBU24"><?= $spbu24 ?></div>
                        <div class="stat-label">Buka 24 Jam</div>
                    </div>
                </div>
                <div class="stat-card stat-red">
                    <div class="stat-icon">⚠️</div>
                    <div class="stat-body">
                        <div class="stat-value" id="statSPBUTidak"><?= $spbuTidak ?></div>
                        <div class="stat-label">Tidak 24 Jam</div>
                    </div>
                </div>
            </div>
            <?php endif; ?>

            <?php if ($modul === 'bantuan' || $modul === 'utuh'): ?>
            <div class="stats-grid">
                <div class="stat-card stat-blue">
                    <div class="stat-icon">🏢</div>
                    <div class="stat-body">
                        <div class="stat-value" id="statTotalRI"><?= $totalFP ?></div>
                        <div class="stat-label">Fasilitas Publik</div>
                    </div>
                </div>
                <div class="stat-card stat-amber">
                    <div class="stat-icon">👥</div>
                    <div class="stat-body">
                        <div class="stat-value" id="statTotalPM"><?= $totalPM ?></div>
                        <div class="stat-label">Penduduk Miskin</div>
                    </div>
                </div>
                <div class="stat-card stat-green">
                    <div class="stat-icon">✅</div>
                    <div class="stat-body">
                        <div class="stat-value" id="statDitangani"><?= $ditangani ?></div>
                        <div class="stat-label">Ditangani</div>
                    </div>
                </div>
                <div class="stat-card stat-red">
                    <div class="stat-icon">⚠️</div>
                    <div class="stat-body">
                        <div class="stat-value" id="statBelum"><?= $belumDitangani ?></div>
                        <div class="stat-label">Belum Ditangani</div>
                    </div>
                </div>
            </div>

            <!-- Progress cakupan -->
            <div class="coverage-bar-wrap">
                <div class="coverage-bar-header">
                    <span>Cakupan Bantuan</span>
                    <strong id="statPersen"><?= $persen ?>%</strong>
                </div>
                <div class="coverage-bar-track">
                    <div class="coverage-bar-fill" id="statProgressBar" style="width: <?= $persen ?>%"></div>
                </div>
            </div>
            <?php endif; ?>
        </div>
        <?php endif; ?>
            
        <!-- Tools -->
        <?php if (in_array($modul, ['spbu', 'bantuan', 'digitasi', 'utuh'])): ?>
        <div class="sidebar-section<?= $currentRole === 'guest' ? ' hidden' : '' ?>" id="sectionTools">
            <div class="section-label">Alat Peta</div>
            <div class="tool-grid">
                <?php if ($modul === 'spbu' || $modul === 'utuh'): ?>
                    <?php if ($currentRole === 'admin' || $currentRole === 'petugas'): ?>
                    <button class="tool-btn active" id="btnToolPoint" data-mode="point" title="Tambah SPBU/Titik">
                        <span class="tool-icon">📍</span>
                        <span><?= $modul === 'spbu' ? 'Tambah SPBU' : 'Titik' ?></span>
                    </button>
                    <?php endif; ?>
                <?php endif; ?>

                <?php if ($modul === 'digitasi' || $modul === 'utuh'): ?>
                    <?php if ($currentRole === 'admin' || $currentRole === 'petugas'): ?>
                    <button class="tool-btn" id="btnToolJalan" data-mode="jalan" title="Gambar Jalan">
                        <span class="tool-icon">🛣️</span>
                        <span>Jalan</span>
                    </button>
                    <button class="tool-btn" id="btnToolPolygon" data-mode="polygon" title="Gambar Polygon">
                        <span class="tool-icon">⬜</span>
                        <span>Polygon</span>
                    </button>
                    <button class="tool-btn" id="btnToolFasilitasPublik" data-mode="fasilitas_publik" title="Fasilitas Publik">
                        <span class="tool-icon">🏢</span>
                        <span>Fasilitas</span>
                    </button>
                    <?php endif; ?>
                <?php endif; ?>

                <?php if ($modul === 'bantuan' || $modul === 'utuh'): ?>
                    <?php if ($currentRole === 'admin' || $currentRole === 'petugas'): ?>
                    <button class="tool-btn<?= ($modul === 'bantuan' || $currentRole === 'petugas') ? ' active' : '' ?>" id="btnToolPenduduk" data-mode="penduduk_miskin" title="Penduduk Miskin">
                        <span class="tool-icon">👥</span>
                        <span>Miskin</span>
                    </button>
                    <?php endif; ?>
                <?php endif; ?>

                <button class="tool-btn" id="btnToolLokasi" data-mode="lokasi" title="Lokasi Saya">
                    <span class="tool-icon">📡</span>
                    <span>Lokasi</span>
                </button>
            </div>
            <div class="help-text" id="helpText">
                Pilih alat lalu klik pada peta untuk menambahkan data.
            </div>
        </div>
        <?php endif; ?>

        <!-- Kontrol Layer -->
        <div class="sidebar-section">
            <div class="section-label">Kontrol Layer</div>
            <div class="layer-list" id="layerList">
                <?php if (in_array($modul, ['bantuan', 'utuh'])): ?>
                <label class="layer-item">
                    <input type="checkbox" id="layerFasilitasPublik" checked>
                    <span class="layer-icon" style="font-size:14px; margin-right:6px;">🏢</span>
                    <span>Fasilitas Publik</span>
                </label>
                <label class="layer-item">
                    <input type="checkbox" id="layerPendudukDalam" checked>
                    <span class="layer-icon" style="font-size:14px; margin-right:6px;">✅</span>
                    <span>Penduduk Ditangani</span>
                </label>
                <label class="layer-item">
                    <input type="checkbox" id="layerPendudukLuar" checked>
                    <span class="layer-icon" style="font-size:14px; margin-right:6px;">❌</span>
                    <span>Penduduk Luar Jangkauan</span>
                </label>
                <?php endif; ?>

                <?php if (in_array($modul, ['spbu', 'utuh'])): ?>
                <label class="layer-item">
                    <input type="checkbox" id="layerSpbu24" checked>
                    <span class="layer-icon" style="font-size:14px; margin-right:6px;">⛽</span>
                    <span>SPBU Buka 24 Jam</span>
                </label>
                <label class="layer-item">
                    <input type="checkbox" id="layerSpbuTidak" checked>
                    <span class="layer-icon" style="font-size:14px; margin-right:6px;">🚧</span>
                    <span>SPBU Tidak 24 Jam</span>
                </label>
                <?php endif; ?>

                <?php if (in_array($modul, ['tematik', 'utuh'])): ?>
                <label class="layer-item">
                    <input type="checkbox" id="layerKecamatan" <?= $modul === 'tematik' ? 'checked' : '' ?>>
                    <span class="layer-icon" style="font-size:14px; margin-right:6px;">🗺️</span>
                    <span>Batas Kecamatan</span>
                </label>
                <label class="layer-item">
                    <input type="checkbox" id="layerSungai" <?= $modul === 'tematik' ? 'checked' : '' ?>>
                    <span class="layer-icon" style="font-size:14px; margin-right:6px;">🌊</span>
                    <span>Sungai Besar</span>
                </label>
                <label class="layer-item"><input type="checkbox" id="layerGeoJalan" <?= $modul === 'tematik' ? 'checked' : '' ?>>
                    <span class="layer-icon" style="font-size:14px; margin-right:6px;">🛣️</span>
                    <span>Jaringan Jalan</span>
                </label>
                <?php endif; ?>

                <?php if (in_array($modul, ['digitasi', 'utuh'])): ?>
                <label class="layer-item">
                    <input type="checkbox" id="layerJalan">
                    <span class="layer-icon" style="font-size:14px; margin-right:6px;">🛣️</span>
                    <span>Jalan (Data)</span>
                </label>
                <label class="layer-item">
                    <input type="checkbox" id="layerPolygon">
                    <span class="layer-icon" style="font-size:14px; margin-right:6px;">⬜</span>
                    <span>Polygon (Data)</span>
                </label>
                <?php endif; ?>
            </div>
        </div>

        <!-- Legenda -->
        <?php if ($modul !== 'digitasi'): ?>
        <div class="sidebar-section">
            <div class="section-label">Legenda</div>
            <div class="legend-list">
                <?php if (in_array($modul, ['bantuan', 'utuh'])): ?>
                <div class="legend-item">
                    <span class="legend-marker-wrapper"><span class="legend-pin fp"></span></span>
                    <span>Fasilitas Publik + Radius</span>
                </div>
                <div class="legend-item">
                    <span class="legend-marker-wrapper"><span class="legend-pin pm-dalam"></span></span>
                    <span>Penduduk Ditangani (Dalam Jangkauan)</span>
                </div>
                <div class="legend-item">
                    <span class="legend-marker-wrapper"><span class="legend-pin pm-luar"></span></span>
                    <span>Penduduk Luar Jangkauan</span>
                </div>
                <div class="legend-item" style="flex-direction:column; align-items:flex-start; margin-top:10px; background: rgba(0,0,0,0.02); padding: 8px; border-radius: 8px;">
                    <span style="font-size:10px; font-weight:700; color:#64748b; margin-bottom:6px; letter-spacing:0.5px;">STATUS BANTUAN (BADGE)</span>
                    <div style="display:flex; gap:6px; flex-wrap:wrap;">
                        <span style="font-size:9.5px; padding:3px 8px; border-radius:6px; font-weight:700; background:#f1f5f9; color:#475569; border: 1px solid rgba(0,0,0,0.05);">Belum Disalurkan</span>
                        <span style="font-size:9.5px; padding:3px 8px; border-radius:6px; font-weight:700; background:#fef3c7; color:#d97706; border: 1px solid rgba(217,119,6,0.1);">Proses</span>
                        <span style="font-size:9.5px; padding:3px 8px; border-radius:6px; font-weight:700; background:#dcfce7; color:#166534; border: 1px solid rgba(22,101,52,0.1);">Sudah Disalurkan</span>
                    </div>
                </div>
                <?php endif; ?>
                
                <?php if (in_array($modul, ['spbu', 'utuh'])): ?>
                <div class="legend-item">
                    <span class="legend-marker-wrapper"><span class="legend-pin" style="background:#2e7d32"></span></span>
                    <span>SPBU Buka 24 Jam</span>
                </div>
                <div class="legend-item">
                    <span class="legend-marker-wrapper"><span class="legend-pin" style="background:#e53935"></span></span>
                    <span>SPBU Tidak 24 Jam</span>
                </div>
                <?php endif; ?>

                <?php if (in_array($modul, ['tematik', 'utuh'])): ?>
                <div class="legend-item">
                    <span class="legend-line" style="background:#d32f2f"></span>
                    <span>Jalan Nasional</span>
                </div>
                <div class="legend-item">
                    <span class="legend-line" style="background:#f57c00"></span>
                    <span>Jalan Provinsi</span>
                </div>
                <div class="legend-item">
                    <span class="legend-line" style="background:#388e3c"></span>
                    <span>Jalan Kabupaten</span>
                </div>
                <?php endif; ?> <!-- Endif for in_array tematik, utuh -->
            </div>
        </div>
        <?php endif; ?> <!-- Endif for modul !== digitasi -->
    </div> <!-- End sidebar-scrollable -->

    <!-- Sidebar Footer (Sticky Bottom) -->
    <div class="sidebar-footer">
        <button class="btn-statistik" id="btnLihatStatistik">
            <span class="btn-statistik-icon">📊</span>
            <span class="btn-statistik-text">
                <strong>Lihat Statistik Modul</strong>
                <small>Grafik interaktif &amp; ringkasan data</small>
            </span>
            <span class="btn-statistik-arrow">›</span>
        </button>
        <p class="sidebar-footer-copy">&copy; 2026 WebGIS Sistem Pengentasan Kemiskinan.<br>Semua Hak Cipta Dilindungi.</p>
    </div>
</aside>

<!-- Sidebar collapsed toggle -->
<button class="sidebar-open-btn hidden" id="sidebarOpenBtn" title="Buka Sidebar">
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
        <path d="M9 18l6-6-6-6"/>
    </svg>
</button>

<!-- ============================================================
     RIGHT SIDEBAR (PANEL KANAN)
============================================================ -->
<aside id="rightSidebar">
    <!-- Header -->
    <div class="right-sidebar-header">
        <div class="right-sidebar-title">
            <div class="right-sidebar-title-icon">🗂️</div>
            <span>Data <?= $modulTitle ?></span>
        </div>
        <button class="right-sidebar-close" id="rightSidebarClose" title="Tutup Panel">
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M18 6L6 18M6 6l12 12"/></svg>
        </button>
    </div>

    <!-- Search Bar -->
    <div class="right-search-wrap">
        <div class="right-search-inner">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
            <input type="text" id="rightSearchInput" placeholder="Cari nama, NIK, atau lokasi..." autocomplete="off">
        </div>
    </div>

    <?php if ($modul === 'bantuan'): ?>
    <div style="padding: 10px 16px 0;">
        <button id="btnManajemenData" class="btn-manajemen" onclick="openManajemenModal()">
            <span style="font-size:18px">🗃️</span> Buka Manajemen Data
        </button>
    </div>
    <?php endif; ?>

    <?php if ($modul === 'utuh'): ?>
    <!-- Tabs untuk Modul Utuh -->
    <div class="right-tabs" id="rightTabs">
        <button class="right-tab-btn active" data-tab="spbu">⛽ SPBU</button>
        <button class="right-tab-btn" data-tab="bantuan">👥 Bantuan</button>
        <button class="right-tab-btn" data-tab="jalan">🛣️ Jalan</button>
        <button class="right-tab-btn" data-tab="polygon">⬜ Parsil</button>
    </div>
    <?php endif; ?>

    <!-- Meta info -->
    <div class="right-sidebar-meta">
        <span class="right-sidebar-meta-label">Daftar Data</span>
        <span class="right-count-badge" id="rightCardCount">— entri</span>
    </div>

    <!-- Card List -->
    <div class="right-card-list" id="rightCardList">
        <!-- Skeleton loading awal -->
        <?php if ($modul !== 'tematik'): ?>
            <?php for ($i = 0; $i < 4; $i++): ?>
            <div class="skeleton-card">
                <div class="skeleton-icon"></div>
                <div class="skeleton-lines">
                    <div class="skeleton-line w-80"></div>
                    <div class="skeleton-line w-50"></div>
                </div>
            </div>
            <?php endfor; ?>
        <?php endif; ?>
    </div>
</aside>

<!-- Toggle Button untuk Right Sidebar -->
<button id="rightSidebarToggleBtn" title="Panel Data">
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
        <path d="M15 18l-6-6 6-6"/>
    </svg>
    <span class="rs-toggle-label">Data</span>
</button>

<!-- ============================================================
     MAP
============================================================ -->
<div id="mapContainer">
    <div id="map"></div>

    <!-- Notifikasi toast -->
    <div class="toast-container" id="toastContainer"></div>

    <!-- Loading overlay -->
    <div class="map-loading" id="mapLoading">
        <div class="loading-spinner"></div>
        <span>Memuat peta...</span>
    </div>
</div>

<!-- ============================================================
     MODALS
============================================================ -->

<!-- BACKDROP -->
<div class="modal-backdrop hidden" id="modalBackdrop"></div>

<!-- MODAL: Tambah/Edit Titik (Point) -->
<div class="modal hidden" id="pointModal">
    <div class="modal-header">
        <div class="modal-title-wrap">
            <div class="modal-icon" style="background:#e3f2fd;color:#1565c0">📍</div>
            <div>
                <h3 class="modal-title" id="pointModalTitle">Tambah Titik</h3>
                <p class="modal-subtitle">Klik peta untuk menentukan lokasi</p>
            </div>
        </div>
        <button class="modal-close" id="closePointModal">✕</button>
    </div>
    <div class="modal-body">
        <input type="hidden" id="point_id">
        <div class="form-row">
            <div class="form-group">
                <label class="form-label">Nama <span style="color:#e63946">*</span></label>
                <input type="text" class="form-input" id="point_nama" placeholder="Nama titik..." autocomplete="off">
            </div>
            <div class="form-group">
                <label class="form-label">No. WhatsApp <span style="color:#e63946">*</span></label>
                <input type="text" class="form-input" id="point_no_wa" placeholder="08xx..." autocomplete="off">
            </div>
        </div>
        <div class="form-group">
            <label class="form-label">Buka 24 Jam</label>
            <div class="radio-tabs">
                <label class="radio-tab">
                    <input type="radio" name="point_buka_24_jam" value="Ya">
                    <span>✓ Ya</span>
                </label>
                <label class="radio-tab">
                    <input type="radio" name="point_buka_24_jam" value="Tidak" checked>
                    <span>✗ Tidak</span>
                </label>
            </div>
        </div>
        <div class="form-row">
            <div class="form-group">
                <label class="form-label">Latitude</label>
                <input type="text" class="form-input mono" id="point_latitude" readonly placeholder="Klik peta">
            </div>
            <div class="form-group">
                <label class="form-label">Longitude</label>
                <input type="text" class="form-input mono" id="point_longitude" readonly placeholder="Klik peta">
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <button class="btn btn-ghost" id="cancelPointModal">Batal</button>
        <button class="btn btn-primary" id="btnSavePoint">
            <span>Simpan Titik</span>
        </button>
    </div>
</div>

<!-- MODAL: Jalan -->
<div class="modal hidden" id="jalanModal">
    <div class="modal-header">
        <div class="modal-title-wrap">
            <div class="modal-icon" style="background:#fce4ec;color:#c62828">🛣️</div>
            <div>
                <h3 class="modal-title">Data Jalan</h3>
                <p class="modal-subtitle">Klik beberapa titik, double-klik selesai</p>
            </div>
        </div>
        <button class="modal-close" id="closeJalanModal">✕</button>
    </div>
    <div class="modal-body">
        <div class="form-group">
            <label class="form-label">Nama Jalan <span class="req">*</span></label>
            <input type="text" class="form-input" id="nama_jalan" placeholder="Nama jalan...">
        </div>
        <div class="form-group">
            <label class="form-label">Status Jalan <span class="req">*</span></label>
            <select class="form-input" id="status_jalan">
                <option value="">– Pilih Status –</option>
                <option value="Jalan Nasional">Jalan Nasional</option>
                <option value="Jalan Provinsi">Jalan Provinsi</option>
                <option value="Jalan Kabupaten">Jalan Kabupaten</option>
            </select>
        </div>
        <div class="form-row">
            <div class="form-group">
                <label class="form-label">Panjang (meter)</label>
                <input type="text" class="form-input mono" id="panjang_meter" readonly>
            </div>
            <div class="form-group">
                <label class="form-label">Jumlah Titik</label>
                <input type="text" class="form-input mono" id="jumlah_titik_jalan" readonly value="0">
            </div>
        </div>
        <div class="form-group hidden">
            <textarea class="form-input mono" id="koordinat_jalan" rows="4" readonly></textarea>
        </div>
    </div>
    <div class="modal-footer">
        <button class="btn btn-ghost" id="cancelJalanModal">Batal</button>
        <button class="btn btn-primary" id="btnSaveJalan">Simpan Jalan</button>
    </div>
</div>

<!-- MODAL: Polygon -->
<div class="modal hidden" id="polygonModal">
    <div class="modal-header">
        <div class="modal-title-wrap">
            <div class="modal-icon" style="background:#f3e5f5;color:#6a1b9a">⬜</div>
            <div>
                <h3 class="modal-title">Data Parsil Tanah</h3>
                <p class="modal-subtitle">Min. 3 titik untuk polygon</p>
            </div>
        </div>
        <button class="modal-close" id="closePolygonModal">✕</button>
    </div>
    <div class="modal-body">
        <div class="form-group">
            <label class="form-label">Nama Parsil <span class="req">*</span></label>
            <input type="text" class="form-input" id="nama_parsil" placeholder="Nama parsil tanah...">
        </div>
        <div class="form-group">
            <label class="form-label">Status Kepemilikan <span class="req">*</span></label>
            <select class="form-input" id="status_kepemilikan">
                <option value="">– Pilih Status –</option>
                <option value="SHM">SHM – Sertifikat Hak Milik</option>
                <option value="HGB">HGB – Hak Guna Bangunan</option>
                <option value="HGU">HGU – Hak Guna Usaha</option>
                <option value="HP">HP – Hak Pakai</option>
            </select>
        </div>
        <div class="form-row">
            <div class="form-group">
                <label class="form-label">Luas (m²)</label>
                <input type="text" class="form-input mono" id="luas_tanah" readonly>
            </div>
            <div class="form-group">
                <label class="form-label">Jumlah Titik</label>
                <input type="text" class="form-input mono" id="jumlah_titik_polygon" readonly value="0">
            </div>
        </div>
        <div class="form-group hidden">
            <textarea class="form-input mono" id="koordinat_polygon" rows="4" readonly></textarea>
        </div>
    </div>
    <div class="modal-footer">
        <button class="btn btn-ghost" id="cancelPolygonModal">Batal</button>
        <button class="btn btn-primary" id="btnSavePolygon">Simpan Polygon</button>
    </div>
</div>

<!-- MODAL: Fasilitas Publik -->
<div class="modal hidden" id="fasilitasPublikModal">
    <div class="modal-header">
        <div class="modal-title-wrap">
            <div class="modal-icon" style="background:#e8f5e9;color:#2e7d32">🏢</div>
            <div>
                <h3 class="modal-title" id="fpModalTitle">Tambah Fasilitas Publik</h3>
                <p class="modal-subtitle">Klik peta untuk menentukan lokasi</p>
            </div>
        </div>
        <button class="modal-close" id="closefasilitasPublikModal">✕</button>
    </div>
    <div class="modal-body">
        <input type="hidden" id="fp_id">
        <div class="form-row">
            <div class="form-group">
                <label class="form-label">Nama Fasilitas <span style="color:#e63946">*</span></label>
                <input type="text" class="form-input" id="fp_nama" placeholder="Cth: SDN 01 Pagi" autocomplete="off">
            </div>
            <div class="form-group">
                <label class="form-label">Jenis</label>
                <select class="form-input" id="fp_jenis">
                    <option value="">– Pilih Jenis –</option>
                    <option value="Kantor Desa / Pemerintahan">Kantor Desa / Pemerintahan</option>
                    <option value="Fasilitas Kesehatan (Puskesmas)">Fasilitas Kesehatan (Puskesmas)</option>
                    <option value="Rumah Ibadah (Masjid/Gereja/dll)">Rumah Ibadah (Masjid/Gereja/dll)</option>
                    <option value="Posko / e-Warong">Posko / e-Warong</option>
                    <option value="Sekolah">Sekolah</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="form-label">Alamat <small>(otomatis dari koordinat)</small></label>
            <div class="geocode-wrap">
                <textarea class="form-input" id="fp_alamat" rows="2" placeholder="Klik peta untuk mendapatkan alamat otomatis..."></textarea>
                <span class="geocode-status" id="geocodeStatus"></span>
            </div>
        </div>
        <div class="form-group">
            <label class="form-label">
                Radius Pelayanan: <strong id="fp_radius_text">300</strong> meter
            </label>
            <div class="range-wrap">
                <span class="range-min">100m</span>
                <input type="range" class="range-input" id="fp_radius" min="100" max="3000" step="50" value="300">
                <span class="range-max">3000m</span>
            </div>
        </div>
        <div class="form-group">
            <label class="form-label">Kontak</label>
            <input type="text" class="form-input" id="fp_kontak" placeholder="No. HP / WA...">
        </div>
        <div class="form-row">
            <div class="form-group">
                <label class="form-label">Latitude</label>
                <input type="text" class="form-input mono" id="fp_latitude" readonly placeholder="Klik peta">
            </div>
            <div class="form-group">
                <label class="form-label">Longitude</label>
                <input type="text" class="form-input mono" id="fp_longitude" readonly placeholder="Klik peta">
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <button class="btn btn-ghost" id="cancelfasilitasPublikModal">Batal</button>
        <button class="btn btn-primary" id="btnSaveFasilitasPublik">Simpan</button>
    </div>
</div>

<!-- MODAL: Penduduk Miskin -->
<div class="modal hidden" id="pendudukModal">
    <div class="modal-header">
        <div class="modal-title-wrap">
            <div class="modal-icon" style="background:#fff8e1;color:#e65100">👥</div>
            <div>
                <h3 class="modal-title" id="pmModalTitle">Tambah Penduduk Miskin</h3>
                <p class="modal-subtitle">Klik peta untuk menentukan lokasi</p>
            </div>
        </div>
        <button class="modal-close" id="closePendudukModal">✕</button>
    </div>
    <div class="modal-body">
        <input type="hidden" id="pm_id">
        <div class="form-row">
            <div class="form-group">
                <label class="form-label">Nama Lengkap <span style="color:#e63946">*</span></label>
                <input type="text" class="form-input" id="pm_nama" placeholder="Sesuai KTP" autocomplete="off">
            </div>
            <div class="form-group">
                <label class="form-label">NIK <span style="color:#e63946">*</span></label>
                <input type="text" class="form-input" id="pm_nik" placeholder="16 digit angka" autocomplete="off">
            </div>
        </div>
        <div class="form-row">
            <div class="form-group" style="flex:2">
                <label class="form-label">Keterangan</label>
                <textarea class="form-input" id="pm_keterangan" rows="2" placeholder="Kondisi ekonomi, pekerjaan, dll..."></textarea>
            </div>
            <div class="form-group" style="flex:1">
                <label class="form-label">Status Penyaluran</label>
                <select class="form-input" id="pm_status_bantuan">
                    <option value="Belum Disalurkan">Belum Disalurkan</option>
                    <option value="Proses">Proses</option>
                    <option value="Sudah Disalurkan">Sudah Disalurkan</option>
                </select>
            </div>
        </div>
        <div class="form-row">
            <div class="form-group">
                <label class="form-label">Foto Rumah</label>
                <input type="file" class="form-input" id="pm_foto_rumah" accept="image/png, image/jpeg" style="padding:10px;">
            </div>
            <div class="form-group">
                <label class="form-label">Foto KK</label>
                <input type="file" class="form-input" id="pm_foto_kk" accept="image/png, image/jpeg" style="padding:10px;">
            </div>
        </div>
        <!-- Status Jangkauan (auto) -->
        <div class="status-jangkauan-card" id="statusJangkauanCard">
            <div class="sj-label">Status Jangkauan</div>
            <div class="sj-value" id="pm_status">—</div>
            <div class="sj-ditangani" id="pm_ditangani"></div>
        </div>
        <div class="form-group">
            <label class="form-label">Alamat / Lokasi <small>(otomatis dari koordinat)</small></label>
            <div class="geocode-wrap">
                <textarea class="form-input" id="pm_alamat" rows="2" placeholder="Menunggu lokasi peta..."></textarea>
            </div>
        </div>
        <div class="form-row">
            <div class="form-group">
                <label class="form-label">Latitude</label>
                <input type="text" class="form-input mono" id="pm_latitude" readonly placeholder="Klik peta">
            </div>
            <div class="form-group">
                <label class="form-label">Longitude</label>
                <input type="text" class="form-input mono" id="pm_longitude" readonly placeholder="Klik peta">
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <button class="btn btn-ghost" id="cancelPendudukModal">Batal</button>
        <button class="btn btn-primary" id="btnSavePenduduk">Simpan</button>
    </div>
</div>

<!-- MODAL: Konfirmasi Hapus -->
<div class="modal modal-sm hidden" id="deleteModal">
    <div class="modal-header">
        <div class="modal-title-wrap">
            <div class="modal-icon" style="background:#ffebee;color:#c62828">🗑️</div>
            <div>
                <h3 class="modal-title">Konfirmasi Hapus</h3>
            </div>
        </div>
    </div>
    <div class="modal-body">
        <p id="deleteMessage">Apakah Anda yakin ingin menghapus data ini?</p>
    </div>
    <div class="modal-footer">
        <button class="btn btn-ghost" id="cancelDelete">Batal</button>
        <button class="btn btn-danger" id="confirmDelete">Hapus</button>
    </div>
</div>

<!-- ============================================================
     CHART MODAL
============================================================ -->
<div id="chartModal" class="hidden">
    <div class="chart-modal-box">
        <div class="chart-modal-header">
            <div class="chart-modal-icon" id="chartModalIcon">📊</div>
            <div class="chart-modal-meta">
                <div class="chart-modal-title" id="chartModalTitle">Statistik Modul</div>
                <div class="chart-modal-subtitle" id="chartModalSubtitle">Visualisasi data interaktif</div>
            </div>
            <button class="chart-modal-close" id="chartModalClose">✕</button>
        </div>
        <div class="chart-modal-body" id="chartModalBody">
            <!-- Konten dinamis diisi oleh JS -->
        </div>
    </div>
</div>

<!-- MODAL: Manajemen Data Penduduk -->
<div class="modal hidden" id="manajemenModal" style="max-width: 900px; width: 95%;">
    <div class="modal-header" style="justify-content: space-between;">
        <div class="modal-title-wrap">
            <div class="modal-icon" style="background:#fce4ec;color:#e91e63">🗃️</div>
            <div>
                <h3 class="modal-title">Manajemen Data Penduduk</h3>
                <p class="modal-subtitle">Pusat kontrol penyaluran bantuan sosial</p>
            </div>
        </div>
        <div style="display: flex; gap: 10px;">
            <button class="btn btn-primary" onclick="window.print()" style="padding: 6px 12px; font-size: 0.85rem;">
                📥 Cetak Data
            </button>
            <button class="modal-close" id="closeManajemenModal" style="position:static; margin-left:10px;">✕</button>
        </div>
    </div>
    <div class="modal-body" style="background: #f8fafc; padding: 0;">
        <div class="manajemen-filter" style="padding: 16px; border-bottom: 1px solid #e2e8f0; display:flex; gap:10px; flex-wrap:wrap; background:white;">
            <button class="btn btn-ghost mj-tab active" data-filter="Semua">Semua</button>
            <button class="btn btn-ghost mj-tab" data-filter="Belum Disalurkan">Belum Disalurkan</button>
            <button class="btn btn-ghost mj-tab" data-filter="Proses">Proses</button>
            <button class="btn btn-ghost mj-tab" data-filter="Sudah Disalurkan">Sudah Disalurkan</button>
        </div>
        <div class="table-responsive" style="max-height: 60vh; overflow-y: auto; padding: 16px;">
            <table class="mj-table" style="width: 100%; border-collapse: collapse; background: white; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.05);">
                <thead style="background: #f1f5f9; text-align: left;">
                    <tr>
                        <th style="padding: 12px 16px; font-weight: 600; font-size: 0.8rem; color:#475569; text-transform:uppercase;">No</th>
                        <th style="padding: 12px 16px; font-weight: 600; font-size: 0.8rem; color:#475569; text-transform:uppercase;">Identitas</th>
                        <th style="padding: 12px 16px; font-weight: 600; font-size: 0.8rem; color:#475569; text-transform:uppercase;">Jarak (Status)</th>
                        <th style="padding: 12px 16px; font-weight: 600; font-size: 0.8rem; color:#475569; text-transform:uppercase;">Foto Rumah</th>
                        <th style="padding: 12px 16px; font-weight: 600; font-size: 0.8rem; color:#475569; text-transform:uppercase;">Status Bantuan</th>
                    </tr>
                </thead>
                <tbody id="manajemenTableBody">
                    <!-- Data akan di-render via JS -->
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- MODAL: Alert / Peringatan -->
<div class="modal modal-sm hidden" id="alertModal" style="z-index: 9999;">
    <div class="modal-header">
        <div class="modal-title-wrap">
            <div class="modal-icon" style="background:#fff3e0;color:#e65100">⚠️</div>
            <div>
                <h3 class="modal-title" id="alertTitle">Perhatian</h3>
            </div>
        </div>
    </div>
    <div class="modal-body">
        <p id="alertMessage" style="font-size: 13px; color: #334155; line-height: 1.5;"></p>
    </div>
    <div class="modal-footer" style="justify-content: center;">
        <button class="btn btn-primary" id="btnAlertOk" style="width: 100%;">Mengerti</button>
    </div>
</div>

<!-- ============================================================
     DATA PHP → JS
============================================================ -->
<script>
const USER_ROLE = '<?= $currentRole ?>';
const APP_DATA = {
    modul:         '<?= htmlspecialchars($modul) ?>',
    points:        <?= json_encode($points, JSON_UNESCAPED_UNICODE) ?>,
    jalan:         <?= json_encode($jalan, JSON_UNESCAPED_UNICODE) ?>,
    polygons:      <?= json_encode($polygons, JSON_UNESCAPED_UNICODE) ?>,
    fasilitasPublik:   <?= json_encode($fasilitasPublik, JSON_UNESCAPED_UNICODE) ?>,
    pendudukMiskin:<?= json_encode($pendudukMiskin, JSON_UNESCAPED_UNICODE) ?>,
};
</script>

<!-- Leaflet JS -->
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" crossorigin=""></script>
<!-- App JS -->
<script src="assets/js/app.js?v=36"></script>
    <script>
    // Fitur scroll dinamis untuk mengecilkan header sidebar tanpa blink
    document.addEventListener('DOMContentLoaded', function() {
        const scrollable = document.getElementById('sidebarScrollable');
        const stickyHeader = document.getElementById('sidebarSticky');
        
        if (scrollable && stickyHeader) {
            scrollable.addEventListener('scroll', function() {
                if (scrollable.scrollTop > 10) {
                    stickyHeader.classList.add('scrolled');
                } else {
                    stickyHeader.classList.remove('scrolled');
                }
            });
        }
    });
    </script>
</body>
</html>
