<?php
// app/Views/dashboard/warga.php
$nama =$user['nama'] ?? 'Warga';
$rt   =$user['rt'] ?? '000';
$rw   =$user['rw'] ?? '000';

// Sesuaikan nama variabel dengan nama kolom di database: ktp_path, kk_path, buku_nikah_path
$fileKtp    = !empty($user['ktp_path']) ?$user['ktp_path'] : (!empty($user['file_ktp']) ?$user['file_ktp'] : null);
$fileKk     = !empty($user['kk_path']) ? $user['kk_path'] : (!empty($user['file_kk']) ? $user['file_kk'] : null);$fileNikah  = !empty($user['buku_nikah_path']) ?$user['buku_nikah_path'] : (!empty($user['file_buku_nikah']) ?$user['file_buku_nikah'] : null);
$jmlKeluarga=$user['jumlah_keluarga'] ?? '-';
?>
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard Warga - Aplikasi Warga</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-100 text-slate-800 font-sans min-h-screen pb-12">

    <!-- Header Navigation -->
    <header class="bg-blue-600 text-white p-6 rounded-b-3xl shadow-lg">
        <div class="max-w-4xl mx-auto flex justify-between items-center">
            <div>
                <p class="text-xs text-blue-200">Selamat Datang,</p>
                <h1 class="text-xl font-bold"><?= htmlspecialchars($nama) ?></h1>
                <p class="text-xs text-blue-100 mt-0.5">RT <?= htmlspecialchars($rt) ?> / RW <?= htmlspecialchars($rw) ?></p>
            </div>
            <a href="/logout" class="bg-blue-700 hover:bg-blue-800 text-xs px-3.5 py-2 rounded-xl font-medium transition">
                Keluar
            </a>
        </div>
    </header>

    <main class="max-w-4xl mx-auto px-4 mt-6 space-y-6">

        <!-- Tombol Bantuan Darurat (Panic Button) -->
        <div class="bg-gradient-to-r from-red-600 to-rose-700 text-white p-5 rounded-2xl shadow-lg flex items-center justify-between">
            <div>
                <h3 class="font-bold text-base flex items-center gap-2">
                    🚨 Tombol Bantuan Darurat
                </h3>
                <p class="text-xs text-rose-100 mt-0.5">Kirim sinyal darurat ke pengurus RT/RW & Satpam secara langsung.</p>
            </div>
            <button type="button" onclick="kirimSinyalPanic()" class="bg-white text-rose-600 hover:bg-rose-50 font-bold px-5 py-2.5 rounded-xl shadow-md transition flex items-center gap-2 text-xs active:scale-95 cursor-pointer">
                🚨 PANIC
            </button>
        </div>

        <!-- Menu Layanan Utama -->
        <h2 class="font-bold text-slate-700 text-sm px-1">Layanan Utama</h2>
        <div class="grid grid-cols-2 md:grid-cols-5 gap-4">
            
            <a href="/laporan" class="bg-white p-4 rounded-2xl border border-slate-200 shadow-sm hover:shadow-md transition flex flex-col items-center text-center space-y-2">
                <div class="w-12 h-12 bg-amber-100 text-amber-600 rounded-2xl flex items-center justify-center text-2xl">📢</div>
                <span class="text-xs font-bold text-slate-700">Pengaduan</span>
            </a>

            <a href="/surat" class="bg-white p-4 rounded-2xl border border-slate-200 shadow-sm hover:shadow-md transition flex flex-col items-center text-center space-y-2">
                <div class="w-12 h-12 bg-blue-100 text-blue-600 rounded-2xl flex items-center justify-center text-2xl">📄</div>
                <span class="text-xs font-bold text-slate-700">Surat Online</span>
            </a>

            <a href="/kas" class="bg-white p-4 rounded-2xl border border-slate-200 shadow-sm hover:shadow-md transition flex flex-col items-center text-center space-y-2">
                <div class="w-12 h-12 bg-emerald-100 text-emerald-600 rounded-2xl flex items-center justify-center text-2xl">💳</div>
                <span class="text-xs font-bold text-slate-700">Kas & Iuran</span>
            </a>

            <a href="/scan-ktp" class="bg-white p-4 rounded-2xl border border-slate-200 shadow-sm hover:shadow-md transition flex flex-col items-center text-center space-y-2">
                <div class="w-12 h-12 bg-purple-100 text-purple-600 rounded-2xl flex items-center justify-center text-2xl">🎴</div>
                <span class="text-xs font-bold text-slate-700">Scan KTP</span>
            </a>

            <!-- Menu Tambahan: Upload Dokumen -->
            <button type="button" onclick="openModalDokumen()" class="bg-white p-4 rounded-2xl border border-slate-200 shadow-sm hover:shadow-md transition flex flex-col items-center text-center space-y-2 cursor-pointer">
                <div class="w-12 h-12 bg-indigo-100 text-indigo-600 rounded-2xl flex items-center justify-center text-2xl">📁</div>
                <span class="text-xs font-bold text-slate-700">Upload Dokumen</span>
            </button>

        </div>

        <!-- Ringkasan Status Dokumen Warga -->
        <div class="bg-white p-5 rounded-2xl border border-slate-200 shadow-sm space-y-3">
            <h3 class="font-bold text-slate-700 text-sm flex items-center gap-2">
                📌 Status Kelengkapan Berkas
            </h3>
            <div class="grid grid-cols-2 md:grid-cols-4 gap-3 text-xs">
                <div class="p-3 bg-slate-50 rounded-xl border border-slate-100">
                    <p class="text-slate-500 mb-1">Anggota Keluarga</p>
                    <p class="font-bold text-slate-800 text-sm"><?= htmlspecialchars($jmlKeluarga) ?> Orang</p>
                </div>
                <div class="p-3 bg-slate-50 rounded-xl border border-slate-100">
                    <p class="text-slate-500 mb-1">Dokumen KTP</p>
                    <span class="px-2 py-0.5 rounded-full text-[10px] font-bold <?= $fileKtp ? 'bg-emerald-100 text-emerald-700' : 'bg-rose-100 text-rose-700' ?>">
                        <?= $fileKtp ? '✓ Terunggah' : '✗ Belum ada' ?>
                    </span>
                    <?php if ($fileKtp): ?>
                        <a href="<?= htmlspecialchars($fileKtp) ?>" target="_blank" class="block text-[10px] text-blue-600 underline mt-1">Lihat Berkas</a>
                    <?php endif; ?>
                </div>
                <div class="p-3 bg-slate-50 rounded-xl border border-slate-100">
                    <p class="text-slate-500 mb-1">Kartu Keluarga</p>
                    <span class="px-2 py-0.5 rounded-full text-[10px] font-bold <?= $fileKk ? 'bg-emerald-100 text-emerald-700' : 'bg-rose-100 text-rose-700' ?>">
                        <?= $fileKk ? '✓ Terunggah' : '✗ Belum ada' ?>
                    </span>
                    <?php if ($fileKk): ?>
                        <a href="<?= htmlspecialchars($fileKk) ?>" target="_blank" class="block text-[10px] text-blue-600 underline mt-1">Lihat Berkas</a>
                    <?php endif; ?>
                </div>
                <div class="p-3 bg-slate-50 rounded-xl border border-slate-100">
                    <p class="text-slate-500 mb-1">Buku Nikah</p>
                    <span class="px-2 py-0.5 rounded-full text-[10px] font-bold <?= $fileNikah ? 'bg-emerald-100 text-emerald-700' : 'bg-slate-200 text-slate-600' ?>">
                        <?= $fileNikah ? '✓ Terunggah' : 'Opsional' ?>
                    </span>
                    <?php if ($fileNikah): ?>
                        <a href="<?= htmlspecialchars($fileNikah) ?>" target="_blank" class="block text-[10px] text-blue-600 underline mt-1">Lihat Berkas</a>
                    <?php endif; ?>
                </div>
            </div>
        </div>

    </main>

    <!-- Modal Pop-up Upload Dokumen -->
    <div id="modalDokumen" class="fixed inset-0 bg-black/60 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
        <div class="bg-white rounded-2xl max-w-lg w-full p-6 shadow-2xl space-y-4 max-h-[90vh] overflow-y-auto">
            <div class="flex justify-between items-center border-b pb-3">
                <h3 class="font-bold text-slate-800 text-sm flex items-center gap-2">
                    📁 Upload Dokumen & Data Keluarga
                </h3>
                <button type="button" onclick="closeModalDokumen()" class="text-slate-400 hover:text-slate-600 font-bold text-xl">&times;</button>
            </div>

            <form action="/warga/upload-dokumen" method="POST" enctype="multipart/form-data" class="space-y-4 text-xs">
                
                <!-- Input Jumlah Keluarga -->
                <div>
                    <label class="font-semibold text-slate-700 block mb-1">
                        Jumlah Anggota Keluarga (Orang) <span class="text-red-500">*</span>
                    </label>
                    <input type="number" name="jumlah_keluarga" min="1" value="<?= htmlspecialchars($jmlKeluarga !== '-' ?$jmlKeluarga : '1') ?>" placeholder="Contoh: 4" required class="w-full p-2.5 border border-slate-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:outline-none">
                </div>

                <hr class="border-slate-100">

                <!-- Upload KTP -->
                <div>
                    <label class="font-semibold text-slate-700 block mb-1">
                        Upload Foto / Scan KTP <span class="text-red-500">*</span>
                    </label>
                    <input type="file" name="file_ktp" accept="image/*,.pdf" <?= $fileKtp ? '' : 'required' ?> class="w-full text-slate-500 file:mr-3 file:py-2 file:px-4 file:rounded-xl file:border-0 file:text-xs file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100 border border-slate-200 rounded-xl">
                    <?php if ($fileKtp): ?>
                        <p class="text-[10px] text-emerald-600 mt-1">✓ Berkas KTP sudah tersimpan</p>
                    <?php endif; ?>
                </div>

                <!-- Upload Kartu Keluarga (KK) -->
                <div>
                    <label class="font-semibold text-slate-700 block mb-1">
                        Upload Foto / Scan Kartu Keluarga (KK) <span class="text-red-500">*</span>
                    </label>
                    <input type="file" name="file_kk" accept="image/*,.pdf" <?= $fileKk ? '' : 'required' ?> class="w-full text-slate-500 file:mr-3 file:py-2 file:px-4 file:rounded-xl file:border-0 file:text-xs file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100 border border-slate-200 rounded-xl">
                    <?php if ($fileKk): ?>
                        <p class="text-[10px] text-emerald-600 mt-1">✓ Berkas KK sudah tersimpan</p>
                    <?php endif; ?>
                </div>

                <!-- Upload Buku Nikah (Opsional) -->
                <div>
                    <label class="font-semibold text-slate-700 block mb-1">
                        Upload Buku Nikah <span class="text-slate-400 font-normal">(Opsional / Abaikan jika belum menikah)</span>
                    </label>
                    <input type="file" name="file_buku_nikah" accept="image/*,.pdf" class="w-full text-slate-500 file:mr-3 file:py-2 file:px-4 file:rounded-xl file:border-0 file:text-xs file:font-semibold file:bg-slate-100 file:text-slate-700 hover:file:bg-slate-200 border border-slate-200 rounded-xl">
                    <?php if ($fileNikah): ?>
                        <p class="text-[10px] text-emerald-600 mt-1">✓ Berkas Buku Nikah sudah tersimpan</p>
                    <?php endif; ?>
                </div>

                <div class="flex justify-end gap-2 pt-3 border-t">
                    <button type="button" onclick="closeModalDokumen()" class="px-4 py-2.5 bg-slate-100 text-slate-600 font-semibold rounded-xl hover:bg-slate-200">
                        Batal
                    </button>
                    <button type="submit" class="px-5 py-2.5 bg-blue-600 text-white font-semibold rounded-xl hover:bg-blue-700 shadow-md">
                        Simpan & Upload
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Script Fungsi Panic Button & Modal -->
    <script>
        function kirimSinyalPanic() {
            if (!confirm("⚠️ PERINGATAN!\n\nApakah kamu yakin ingin mengirim SINYAL DARURAT (PANIC) ke Pengurus & Satpam?")) {
                return;
            }

            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(
                    (pos) => {
                        const lat = pos.coords.latitude;
                        const lng = pos.coords.longitude;
                        prosesKirimPanic(`https://maps.google.com/?q=${lat},${lng}`);
                    },
                    (err) => {
                        prosesKirimPanic("Lokasi GPS tidak diizinkan");
                    },
                    { timeout: 5000 }
                );
            } else {
                prosesKirimPanic("Perangkat tidak mendukung GPS");
            }
        }

        function prosesKirimPanic(lokasi) {
            fetch('/panic/send', {
                method: 'POST',
                headers: { 
                    'Content-Type': 'application/x-www-form-urlencoded',
                    'X-Requested-With': 'XMLHttpRequest'
                },
                body: new URLSearchParams({ 'lokasi': lokasi })
            })
            .then(async (res) => {
                const text = await res.text();
                try {
                    return JSON.parse(text);
                } catch (e) {
                    throw new Error("Respon Server: " + text.substring(0, 150));
                }
            })
            .then(data => {
                if (data.status === 'success') {
                    alert('🚨 ' + data.message);
                    if (data.wa_url) {
                        window.open(data.wa_url, '_blank');
                    }
                } else {
                    alert('❌ Gagal: ' + data.message);
                }
            })
            .catch(err => {
                alert('❌ ' + err.message);
            });
        }

        // Buka & Tutup Modal Dokumen
        function openModalDokumen() {
            document.getElementById('modalDokumen').classList.remove('hidden');
        }
        function closeModalDokumen() {
            document.getElementById('modalDokumen').classList.add('hidden');
        }
    </script>
</body>
</html>