<?php
declare(strict_types=1);

require_once __DIR__ . '/api/auth.php';
require_admin_login();
?>
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebGIS Sebaran Penduduk Miskin</title>
    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- Leaflet CSS -->
    <link rel="stylesheet" href="assets/vendor/leaflet/leaflet.css" />
    <!-- Custom CSS -->
    <link rel="stylesheet" href="assets/css/style.css?v=<?= filemtime(__DIR__ . '/assets/css/style.css') ?>">
</head>
<body>
    <div class="dashboard-container">
        <!-- Sidebar -->
        <aside class="sidebar" id="sidebar">
            <div class="sidebar-header">
                <i class="fas fa-map-marked-alt fa-2x" style="color: var(--primary);"></i>
                <h2>WebGIS Peduli</h2>
            </div>
            <div class="sidebar-menu">
                <div class="menu-item active" id="menu-dashboard" data-view="dashboard">
                    <i class="fas fa-home"></i> Dashboard
                </div>
                <div class="menu-item" id="menu-map" data-view="map">
                    <i class="fas fa-map"></i> Peta
                </div>
                <div class="menu-item" id="menu-add-ri">
                    <i class="fas fa-plus-circle"></i> Tambah Rumah Ibadah
                </div>
                <div class="menu-item" id="menu-add-pm">
                    <i class="fas fa-user-plus"></i> Tambah Penduduk
                </div>
                <a class="menu-item" href="laporan.php">
                    <i class="fas fa-file-lines"></i> Laporan
                </a>
            </div>
        </aside>

        <!-- Main Content -->
        <main class="main-content dashboard-mode">
            <!-- Topbar -->
            <header class="topbar">
                <button id="toggle-sidebar" class="btn-icon"><i class="fas fa-bars"></i></button>
                <div class="search-bar hidden">
                    <input type="text" id="search-input" placeholder="Cari nama warga / rumah ibadah...">
                    <button id="search-button" type="button"><i class="fas fa-search"></i></button>
                </div>
                <div class="map-header-controls hidden">
                    <div class="header-filter">
                        <i class="fas fa-circle-check"></i>
                        <label>Status</label>
                        <select id="filter-status">
                            <option value="all">Semua Status</option>
                            <option value="Sudah dibantu">Sudah Dibantu</option>
                            <option value="Belum dibantu">Belum Dibantu</option>
                            <option value="Menunggu verifikasi">Menunggu Verifikasi</option>
                        </select>
                    </div>
                    <div class="header-filter">
                        <i class="fas fa-place-of-worship"></i>
                        <label>Jenis</label>
                        <select id="filter-jenis">
                            <option value="all">Semua Jenis</option>
                            <option value="Masjid">Masjid</option>
                            <option value="Gereja">Gereja</option>
                            <option value="Pura">Pura</option>
                            <option value="Vihara">Vihara</option>
                            <option value="Klenteng">Klenteng</option>
                        </select>
                    </div>
                    <div class="header-filter">
                        <i class="fas fa-hand-holding-heart"></i>
                        <label>Kebutuhan</label>
                        <select id="filter-kebutuhan">
                            <option value="all">Semua Kebutuhan</option>
                            <option value="Sembako">Sembako</option>
                            <option value="Pendidikan">Pendidikan</option>
                            <option value="Kesehatan">Kesehatan</option>
                            <option value="Modal Usaha">Modal Usaha</option>
                            <option value="Rumah Tidak Layak">Rumah Tidak Layak</option>
                            <option value="Bantuan Darurat">Bantuan Darurat</option>
                        </select>
                    </div>
                </div>
                <div class="user-profile">
                    <span><?= htmlspecialchars(current_admin_name(), ENT_QUOTES, 'UTF-8') ?></span>
                    <div class="avatar"><i class="fas fa-user-shield"></i></div>
                    <a class="logout-link" href="logout.php" title="Logout"><i class="fas fa-right-from-bracket"></i></a>
                </div>
            </header>

            <!-- Dashboard -->
            <section id="dashboard-view" class="view-panel dashboard-view active">
                <div class="dashboard-page-header">
                    <div>
                        <p class="eyebrow">Ringkasan Data</p>
                        <h1>Dashboard WebGIS Peduli</h1>
                        <p>Pantau sebaran warga, status bantuan, dan cakupan layanan rumah ibadah dari satu halaman.</p>
                    </div>
                    <div class="dashboard-header-actions">
                        <button class="btn btn-primary" id="dashboard-open-map"><i class="fas fa-map-location-dot"></i> Buka Peta</button>
                    </div>
                </div>

                <div class="stats-container" id="stats-container">
                    <div class="stat-card">
                        <h3>Rumah Ibadah</h3>
                        <div class="value" id="stat-ri">0</div>
                    </div>
                    <div class="stat-card">
                        <h3>Total Warga</h3>
                        <div class="value" id="stat-pm">0</div>
                    </div>
                    <div class="stat-card success">
                        <h3>Sudah Dibantu</h3>
                        <div class="value" id="stat-sudah">0</div>
                    </div>
                    <div class="stat-card warning">
                        <h3>Menunggu</h3>
                        <div class="value" id="stat-menunggu">0</div>
                    </div>
                    <div class="stat-card danger">
                        <h3>Belum Dibantu</h3>
                        <div class="value" id="stat-belum">0</div>
                    </div>
                    <div class="stat-card warning">
                        <h3>Prioritas Tinggi</h3>
                        <div class="value" id="stat-prioritas">0</div>
                    </div>
                    <div class="stat-card danger">
                        <h3>Luar Radius</h3>
                        <div class="value" id="stat-luar-radius">0</div>
                    </div>
                </div>

                <div class="dashboard-grid">
                    <div class="dashboard-card status-card">
                        <div class="card-title">
                            <h2>Status Bantuan</h2>
                            <span>Data keluarga miskin</span>
                        </div>
                        <div class="status-list">
                            <div class="status-item">
                                <span class="status-dot success"></span>
                                <div>
                                    <strong id="summary-sudah">0</strong>
                                    <p>Sudah menerima bantuan</p>
                                </div>
                            </div>
                            <div class="status-item">
                                <span class="status-dot warning"></span>
                                <div>
                                    <strong id="summary-menunggu">0</strong>
                                    <p>Menunggu verifikasi</p>
                                </div>
                            </div>
                            <div class="status-item">
                                <span class="status-dot danger"></span>
                                <div>
                                    <strong id="summary-belum">0</strong>
                                    <p>Belum menerima bantuan</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="dashboard-card">
                        <div class="card-title">
                            <h2>Aksi Cepat</h2>
                            <span>Input dan pemetaan data</span>
                        </div>
                        <div class="quick-actions">
                            <button class="quick-action" id="dashboard-add-ri">
                                <i class="fas fa-place-of-worship"></i>
                                <span>Tambah Rumah Ibadah</span>
                            </button>
                            <button class="quick-action" id="dashboard-add-pm">
                                <i class="fas fa-user-plus"></i>
                                <span>Tambah Penduduk</span>
                            </button>
                            <a class="quick-action" href="laporan.php?prioritas=tinggi">
                                <i class="fas fa-file-export"></i>
                                <span>Cetak Laporan Prioritas</span>
                            </a>
                        </div>
                    </div>

                    <div class="dashboard-card map-summary-card">
                        <div class="card-title">
                            <h2>Legenda Peta</h2>
                            <span>Indikator cakupan layanan</span>
                        </div>
                        <div class="legend-list">
                            <div><span class="legend-marker ri"></span> Rumah ibadah dan radius layanan</div>
                            <div><span class="legend-marker reached"></span> Warga dalam radius layanan</div>
                            <div><span class="legend-marker blank"></span> Warga di luar radius layanan</div>
                        </div>
                    </div>

                    <div class="dashboard-card">
                        <div class="card-title">
                            <h2>Prioritas Bantuan</h2>
                            <span>Urutan paling mendesak</span>
                        </div>
                        <div class="priority-list" id="priority-list"></div>
                    </div>

                    <div class="dashboard-card">
                        <div class="card-title">
                            <h2>Kebutuhan Terbanyak</h2>
                            <span>Basis penyaluran bantuan</span>
                        </div>
                        <div class="need-list" id="need-list"></div>
                    </div>
                </div>
            </section>

            <!-- Peta -->
            <section id="map-view" class="view-panel map-view">
                <div id="map" class="map-fullscreen"></div>

                <button id="btn-my-location" class="fab-location" title="Lokasi Saya"><i class="fas fa-crosshairs"></i></button>
                <div class="fab-container">
                    <button class="fab-main" title="Tambah Data"><i class="fas fa-plus"></i></button>
                    <div class="fab-menu">
                        <button class="fab-item" id="fab-add-ri" title="Tambah Rumah Ibadah"><i class="fas fa-place-of-worship"></i></button>
                        <button class="fab-item" id="fab-add-pm" title="Tambah Penduduk Miskin"><i class="fas fa-user-plus"></i></button>
                    </div>
                </div>
            </section>
        </main>
    </div>

    <!-- Modal Rumah Ibadah -->
    <div class="modal-backdrop" id="modal-ri">
        <div class="modal-content">
            <div class="modal-header">
                <h2 id="modal-ri-title">Tambah Rumah Ibadah</h2>
                <button class="btn-close" onclick="closeModal('modal-ri')"><i class="fas fa-times"></i></button>
            </div>
            <div class="modal-body">
                <form id="form-ri">
                    <input type="hidden" id="ri-id">
                    <div class="form-group">
                        <label>Nama Rumah Ibadah</label>
                        <input type="text" id="ri-nama" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label>Jenis</label>
                        <select id="ri-jenis" class="form-control" required>
                            <option value="Masjid">Masjid</option>
                            <option value="Gereja">Gereja</option>
                            <option value="Pura">Pura</option>
                            <option value="Vihara">Vihara</option>
                            <option value="Klenteng">Klenteng</option>
                            <option value="Lainnya">Lainnya</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>Kontak</label>
                        <input type="text" id="ri-kontak" class="form-control">
                    </div>
                    <div class="form-group" style="display: flex; gap: 10px;">
                        <div style="flex: 1;">
                            <label>Latitude</label>
                            <input type="number" step="any" id="ri-lat" class="form-control" required readonly>
                        </div>
                        <div style="flex: 1;">
                            <label>Longitude</label>
                            <input type="number" step="any" id="ri-lng" class="form-control" required readonly>
                        </div>
                        <div style="display: flex; align-items: flex-end;">
                            <button type="button" class="btn btn-secondary" onclick="pickLocation('ri')"><i class="fas fa-map-marker-alt"></i></button>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>Alamat (Otomatis)</label>
                        <textarea id="ri-alamat" class="form-control" rows="2" readonly></textarea>
                    </div>
                    <div class="form-group">
                        <label>Radius Pelayanan (meter)</label>
                        <input type="number" id="ri-radius" class="form-control" value="500" required>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" onclick="closeModal('modal-ri')">Batal</button>
                <button class="btn btn-primary" onclick="saveRI()">Simpan</button>
            </div>
        </div>
    </div>

    <!-- Modal Penduduk Miskin -->
    <div class="modal-backdrop" id="modal-pm">
        <div class="modal-content">
            <div class="modal-header">
                <h2 id="modal-pm-title">Tambah Penduduk Miskin</h2>
                <button class="btn-close" onclick="closeModal('modal-pm')"><i class="fas fa-times"></i></button>
            </div>
            <div class="modal-body">
                <form id="form-pm">
                    <input type="hidden" id="pm-id">
                    
                    <h3 style="margin-bottom: 12px; border-bottom: 1px solid #eee; padding-bottom: 8px;">Data Kepala Keluarga</h3>
                    <div class="form-group">
                        <label>Nama Kepala Keluarga</label>
                        <input type="text" id="pm-nama" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label>NIK</label>
                        <input type="text" id="pm-nik" class="form-control">
                    </div>
                    <div class="form-group" style="display: flex; gap: 10px;">
                        <div style="flex: 1;">
                            <label>Latitude</label>
                            <input type="number" step="any" id="pm-lat" class="form-control" required readonly>
                        </div>
                        <div style="flex: 1;">
                            <label>Longitude</label>
                            <input type="number" step="any" id="pm-lng" class="form-control" required readonly>
                        </div>
                        <div style="display: flex; align-items: flex-end;">
                            <button type="button" class="btn btn-secondary" onclick="pickLocation('pm')"><i class="fas fa-map-marker-alt"></i></button>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>Alamat</label>
                        <textarea id="pm-alamat" class="form-control" rows="2" readonly></textarea>
                    </div>

                    <h3 style="margin: 20px 0 12px; border-bottom: 1px solid #eee; padding-bottom: 8px;">Kebutuhan & Kondisi</h3>
                    <div class="form-group">
                        <label>Kategori Kebutuhan</label>
                        <select id="pm-kategori-kebutuhan" class="form-control">
                            <option value="">Pilih Kebutuhan</option>
                            <option value="Sembako">Sembako</option>
                            <option value="Pendidikan">Pendidikan</option>
                            <option value="Kesehatan">Kesehatan</option>
                            <option value="Modal Usaha">Modal Usaha</option>
                            <option value="Rumah Tidak Layak">Rumah Tidak Layak</option>
                            <option value="Bantuan Darurat">Bantuan Darurat</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>Deskripsi Kebutuhan</label>
                        <textarea id="pm-deskripsi-kebutuhan" class="form-control" rows="2" placeholder="Contoh: butuh sembako bulanan, biaya obat, seragam sekolah"></textarea>
                    </div>
                    <div class="form-group" style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
                        <div>
                            <label>Kondisi Rumah</label>
                            <select id="pm-kondisi-rumah" class="form-control">
                                <option value="">Pilih Kondisi</option>
                                <option value="Layak">Layak</option>
                                <option value="Rentan">Rentan</option>
                                <option value="Tidak Layak">Tidak Layak</option>
                            </select>
                        </div>
                        <div>
                            <label>Penghasilan / Bulan</label>
                            <input type="number" id="pm-penghasilan" class="form-control" min="0" inputmode="numeric" placeholder="0">
                        </div>
                    </div>

                    <h3 style="margin: 20px 0 12px; border-bottom: 1px solid #eee; padding-bottom: 8px;">Status Bantuan</h3>
                    <div class="form-group">
                        <label>Status</label>
                        <select id="pm-status" class="form-control" onchange="toggleBantuanFields()" required>
                            <option value="Belum dibantu">Belum Dibantu</option>
                            <option value="Menunggu verifikasi">Menunggu Verifikasi</option>
                            <option value="Sudah dibantu">Sudah Dibantu</option>
                        </select>
                    </div>
                    <div id="bantuan-fields" style="display: none;">
                        <div class="form-group">
                            <label>Jenis Bantuan</label>
                            <input type="text" id="pm-jenis-bantuan" class="form-control">
                        </div>
                        <div class="form-group">
                            <label>Tanggal Bantuan</label>
                            <input type="date" id="pm-tanggal-bantuan" class="form-control">
                        </div>
                    </div>

                    <h3 style="margin: 20px 0 12px; border-bottom: 1px solid #eee; padding-bottom: 8px;">Survey Lapangan</h3>
                    <div class="form-group">
                        <label>Status Tindak Lanjut</label>
                        <select id="pm-tindak-lanjut" class="form-control">
                            <option value="Belum disurvei">Belum Disurvei</option>
                            <option value="Perlu survei">Perlu Survei</option>
                            <option value="Sudah disurvei">Sudah Disurvei</option>
                            <option value="Sudah diverifikasi">Sudah Diverifikasi</option>
                            <option value="Sedang diproses">Sedang Diproses</option>
                            <option value="Sudah dibantu">Sudah Dibantu</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>Catatan Survey</label>
                        <textarea id="pm-catatan-survei" class="form-control" rows="2"></textarea>
                    </div>
                    <div class="form-group">
                        <label>Bukti / Foto / Dokumen</label>
                        <input type="file" id="pm-bukti-file" class="form-control" accept="image/*,.pdf">
                        <input type="hidden" id="pm-existing-bukti-file">
                    </div>

                    <h3 style="margin: 20px 0 12px; border-bottom: 1px solid #eee; padding-bottom: 8px; display: flex; justify-content: space-between;">
                        Anggota Keluarga
                        <button type="button" class="btn btn-secondary" style="padding: 4px 8px; font-size: 0.8rem;" onclick="addAnggotaField()"><i class="fas fa-plus"></i> Tambah</button>
                    </h3>
                    <div id="anggota-container" class="dynamic-list">
                        <!-- Dynamic fields here -->
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" onclick="closeModal('modal-pm')">Batal</button>
                <button class="btn btn-primary" onclick="savePM()">Simpan</button>
            </div>
        </div>
    </div>

    <!-- Modal Riwayat Bantuan -->
    <div class="modal-backdrop" id="modal-bantuan">
        <div class="modal-content modal-content-sm">
            <div class="modal-header">
                <div>
                    <p class="modal-kicker">Penyaluran Bantuan</p>
                    <h2 id="modal-bantuan-title">Tambah Riwayat Bantuan</h2>
                </div>
                <button class="btn-close" onclick="closeModal('modal-bantuan')"><i class="fas fa-times"></i></button>
            </div>
            <div class="modal-body">
                <form id="form-bantuan">
                    <input type="hidden" id="bantuan-penduduk-id">
                    <div class="form-group">
                        <label>Keluarga Penerima</label>
                        <input type="text" id="bantuan-penerima" class="form-control" readonly>
                    </div>
                    <div class="form-group">
                        <label>Jenis Bantuan</label>
                        <input type="text" id="bantuan-jenis" class="form-control" list="bantuan-jenis-list" placeholder="Contoh: Sembako bulanan" required>
                        <datalist id="bantuan-jenis-list">
                            <option value="Sembako">
                            <option value="Pendidikan">
                            <option value="Kesehatan">
                            <option value="Modal Usaha">
                            <option value="Renovasi Rumah">
                            <option value="Bantuan Darurat">
                        </datalist>
                    </div>
                    <div class="form-grid two-cols">
                        <div class="form-group">
                            <label>Tanggal Bantuan</label>
                            <input type="date" id="bantuan-tanggal" class="form-control" required>
                        </div>
                        <div class="form-group">
                            <label>Nilai Bantuan</label>
                            <input type="number" id="bantuan-nilai" class="form-control" min="0" placeholder="Opsional">
                        </div>
                    </div>
                    <div class="form-group">
                        <label>Pemberi Bantuan</label>
                        <input type="text" id="bantuan-pemberi" class="form-control" value="Admin">
                    </div>
                    <div class="form-group">
                        <label>Catatan</label>
                        <textarea id="bantuan-catatan" class="form-control" rows="3" placeholder="Contoh: bantuan diserahkan langsung ke rumah penerima"></textarea>
                    </div>
                    <div class="form-group">
                        <label>Bukti Bantuan</label>
                        <input type="file" id="bantuan-bukti-file" class="form-control" accept="image/*,.pdf">
                        <p class="form-hint">Opsional, bisa berupa foto penyerahan atau dokumen PDF.</p>
                    </div>
                    <div class="form-alert" id="bantuan-alert" hidden></div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" onclick="closeModal('modal-bantuan')">Batal</button>
                <button class="btn btn-primary" id="btn-save-bantuan" onclick="saveBantuan()">Simpan Bantuan</button>
            </div>
        </div>
    </div>

    <!-- Scripts -->
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
    <script src="assets/js/app.js?v=<?= filemtime(__DIR__ . '/assets/js/app.js') ?>"></script>
</body>
</html>
