<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Lapor Warga — WebGIS Pemetaan Sosial</title>

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js"></script>
    <style>
        :root {
            --blue:      #30a8e0;
            --blue-d:    #1b8ec7;
            --blue-lt:   #ddf0fb;
            --navy:      #0b2545;
            --green:     #1fad63;
            --green-d:   #168a4f;
            --green-lt:  #d7f5e7;
            --red:       #e05050;
            --orange:    #f59e0b;
            --glass:     rgba(255,255,255,0.94);
            --shadow:    0 8px 32px rgba(11,37,69,0.18);
            --shadow-sm: 0 2px 12px rgba(11,37,69,0.12);
            --r:  14px;
            --r2: 10px;
            --r3: 8px;
        }

        * { box-sizing: border-box; margin: 0; padding: 0; }
        html, body { min-height: 100%; font-family: 'Plus Jakarta Sans', sans-serif; background: #f0f4f8; color: var(--navy); }

        /* LAYOUT */
        .page-wrap {
            min-height: 100vh;
            display: grid;
            grid-template-columns: 1fr 420px;
            grid-template-rows: auto 1fr;
        }

        /* HEADER */
        .page-header {
            grid-column: 1 / -1;
            background: var(--glass);
            backdrop-filter: blur(14px);
            border-bottom: 1px solid rgba(11,37,69,0.09);
            padding: 14px 24px;
            display: flex; align-items: center; justify-content: space-between;
            box-shadow: var(--shadow-sm);
            position: sticky; top: 0; z-index: 100;
        }
        .header-brand { display: flex; align-items: center; gap: 10px; }
        .hb-icon {
            width: 36px; height: 36px;
            background: linear-gradient(135deg, var(--green), var(--blue));
            border-radius: 10px;
            display: flex; align-items: center; justify-content: center;
            font-size: 17px; box-shadow: 0 3px 10px rgba(31,173,99,0.3);
        }
        .hb-text .title   { font-size: 14px; font-weight: 800; color: var(--navy); line-height: 1.2; }
        .hb-text .subtitle{ font-size: 10px; color: rgba(11,37,69,0.42); font-weight: 500; }
        .header-badge {
            background: var(--orange); color: white;
            font-size: 10px; font-weight: 700;
            padding: 4px 11px; border-radius: 20px;
        }
        .back-link {
            display: flex; align-items: center; gap: 6px;
            font-size: 12px; font-weight: 600;
            color: rgba(11,37,69,0.45);
            text-decoration: none;
            padding: 6px 12px; border-radius: var(--r3);
            border: 1.5px solid rgba(11,37,69,0.1);
            background: rgba(11,37,69,0.03);
            transition: all 0.15s;
        }
        .back-link:hover { background: rgba(11,37,69,0.07); color: var(--navy); }

        /* PETA */
        .map-panel { position: relative; background: #e8eff5; }
        #map-lapor { width: 100%; height: 100%; min-height: 500px; cursor: crosshair; }

        .map-instruction {
            position: absolute; bottom: 20px; left: 50%;
            transform: translateX(-50%);
            z-index: 500;
            background: rgba(11,37,69,0.82); color: rgba(255,255,255,0.9);
            font-size: 12px; font-weight: 500;
            padding: 8px 18px; border-radius: 20px;
            backdrop-filter: blur(8px); pointer-events: none; white-space: nowrap;
            transition: all 0.3s;
        }
        .map-instruction.picked { background: rgba(31,173,99,0.88); }

        .coord-pill {
            position: absolute; top: 12px; left: 50%;
            transform: translateX(-50%);
            z-index: 500;
            background: var(--glass); backdrop-filter: blur(12px);
            border-radius: 20px; padding: 6px 14px;
            font-size: 11px; font-weight: 600; color: var(--navy);
            box-shadow: var(--shadow-sm);
            display: none; align-items: center; gap: 6px;
        }
        .coord-pill.show { display: flex; }

        /* FORM PANEL */
        .form-panel {
            background: white;
            border-left: 1px solid rgba(11,37,69,0.08);
            display: flex; flex-direction: column;
            overflow-y: auto;
            max-height: calc(100vh - 64px);
            position: sticky; top: 64px;
        }
        .form-panel::-webkit-scrollbar { width: 4px; }
        .form-panel::-webkit-scrollbar-thumb { background: rgba(11,37,69,0.14); border-radius: 4px; }

        /* HERO FORM */
        .form-hero {
            background: linear-gradient(135deg, #0b2545 0%, #1a3f6f 100%);
            padding: 22px 22px 18px;
            position: relative; overflow: hidden;
        }
        .form-hero::before {
            content: ''; position: absolute;
            top: -20px; right: -20px; width: 100px; height: 100px;
            background: rgba(48,168,224,0.15); border-radius: 50%;
        }
        .form-hero::after {
            content: ''; position: absolute;
            bottom: -30px; left: 30px; width: 80px; height: 80px;
            background: rgba(31,173,99,0.1); border-radius: 50%;
        }
        .fh-label { font-size: 10px; font-weight: 700; color: rgba(255,255,255,0.45); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 5px; }
        .fh-title { font-size: 20px; font-weight: 800; color: white; line-height: 1.2; margin-bottom: 6px; }
        .fh-desc  { font-size: 12px; color: rgba(255,255,255,0.55); line-height: 1.6; }

        /* STEPS */
        .steps-bar {
            display: flex; padding: 14px 22px;
            border-bottom: 1px solid rgba(11,37,69,0.08);
            background: rgba(11,37,69,0.02);
        }
        .step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; position: relative; }
        .step:not(:last-child)::after {
            content: ''; position: absolute;
            top: 12px; left: 60%; width: 80%; height: 2px;
            background: rgba(11,37,69,0.1); z-index: 0;
        }
        .step.done:not(:last-child)::after { background: var(--green); }
        .step-num {
            width: 24px; height: 24px; border-radius: 50%;
            background: rgba(11,37,69,0.08); border: 2px solid rgba(11,37,69,0.12);
            font-size: 11px; font-weight: 700; color: rgba(11,37,69,0.35);
            display: flex; align-items: center; justify-content: center;
            position: relative; z-index: 1; transition: all 0.25s;
        }
        .step.active .step-num { background: var(--blue-lt); border-color: var(--blue); color: var(--blue-d); }
        .step.done   .step-num { background: var(--green-lt); border-color: var(--green); color: var(--green-d); }
        .step-lbl { font-size: 9px; font-weight: 600; color: rgba(11,37,69,0.35); text-align: center; }
        .step.active .step-lbl { color: var(--blue-d); }
        .step.done   .step-lbl { color: var(--green-d); }

        /* FORM BODY */
        .form-body { padding: 18px 22px; flex: 1; }
        .form-section { margin-bottom: 18px; }
        .section-title {
            font-size: 11px; font-weight: 700;
            color: rgba(11,37,69,0.45);
            text-transform: uppercase; letter-spacing: 0.08em;
            margin-bottom: 10px;
            display: flex; align-items: center; gap: 6px;
        }
        .section-title::after { content: ''; flex: 1; height: 1px; background: rgba(11,37,69,0.08); }

        .ff { margin-bottom: 11px; }
        .ff label {
            display: block; font-size: 10px; font-weight: 700;
            color: rgba(11,37,69,0.42); text-transform: uppercase;
            letter-spacing: 0.07em; margin-bottom: 4px;
        }
        .ff label .req { color: var(--red); margin-left: 2px; }
        .ff input, .ff select, .ff textarea {
            width: 100%; padding: 9px 11px; font-size: 13px; font-family: inherit;
            border: 1.5px solid rgba(11,37,69,0.12); border-radius: var(--r3);
            color: var(--navy); background: rgba(11,37,69,0.02);
            transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
            appearance: none; -webkit-appearance: none;
        }
        .ff select {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%230b2545' stroke-opacity='0.35' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
            background-repeat: no-repeat; background-position: right 11px center; padding-right: 32px; cursor: pointer;
        }
        .ff textarea { resize: vertical; min-height: 72px; line-height: 1.55; }
        .ff input:focus, .ff select:focus, .ff textarea:focus {
            outline: none; border-color: var(--blue);
            box-shadow: 0 0 0 3px rgba(48,168,224,0.11); background: white;
        }
        .ff input::placeholder, .ff textarea::placeholder { color: rgba(11,37,69,0.26); }
        .ff-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

        /* LOKASI BOX */
        .loc-box {
            background: rgba(11,37,69,0.03);
            border: 1.5px dashed rgba(11,37,69,0.15);
            border-radius: var(--r2); padding: 12px 14px;
            display: flex; align-items: center; gap: 10px;
            margin-bottom: 11px; transition: all 0.2s; cursor: pointer;
        }
        .loc-box.filled { background: var(--green-lt); border-color: var(--green); border-style: solid; }
        .loc-box-icon {
            width: 36px; height: 36px; border-radius: 9px;
            background: rgba(11,37,69,0.06);
            display: flex; align-items: center; justify-content: center;
            font-size: 16px; flex-shrink: 0; transition: background 0.2s;
        }
        .loc-box.filled .loc-box-icon { background: rgba(31,173,99,0.15); }
        .loc-box-text .lbt-title { font-size: 12px; font-weight: 700; color: rgba(11,37,69,0.5); }
        .loc-box.filled .loc-box-text .lbt-title { color: var(--green-d); }
        .loc-box-text .lbt-val { font-size: 11px; color: rgba(11,37,69,0.38); margin-top: 2px; font-family: monospace; }
        .loc-box.filled .loc-box-text .lbt-val { color: var(--green-d); font-weight: 600; }

        /* INFO BOX */
        .info-box {
            background: rgba(245,158,11,0.08);
            border: 1px solid rgba(245,158,11,0.25);
            border-radius: var(--r2); padding: 10px 12px;
            font-size: 11px; color: rgba(11,37,69,0.6);
            line-height: 1.6; margin-bottom: 14px;
            display: flex; gap: 8px;
        }
        .info-box .ib-icon { font-size: 14px; flex-shrink: 0; margin-top: 1px; }

        /* FORM FOOTER */
        .form-footer {
            padding: 14px 22px 20px;
            border-top: 1px solid rgba(11,37,69,0.08);
            background: rgba(11,37,69,0.01);
        }
        .btn-submit {
            width: 100%; padding: 13px; border: none; border-radius: var(--r2);
            background: linear-gradient(135deg, var(--green), var(--blue));
            color: white; font-family: inherit; font-size: 14px; font-weight: 700;
            cursor: pointer; transition: all 0.2s;
            display: flex; align-items: center; justify-content: center; gap: 7px;
            box-shadow: 0 4px 15px rgba(31,173,99,0.3);
        }
        .btn-submit:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(31,173,99,0.4); }
        .btn-submit:active { transform: scale(0.98); }
        .btn-submit:disabled {
            background: rgba(11,37,69,0.12); color: rgba(11,37,69,0.35);
            cursor: not-allowed; box-shadow: none; transform: none;
        }
        .submit-note { text-align: center; font-size: 10px; color: rgba(11,37,69,0.3); margin-top: 8px; }

        /* SUCCESS OVERLAY */
        #success-overlay {
            display: none; position: fixed; inset: 0; z-index: 9000;
            background: rgba(11,37,69,0.5); backdrop-filter: blur(6px);
            align-items: center; justify-content: center;
        }
        #success-overlay.show { display: flex; }
        .success-card {
            background: white; border-radius: 20px; padding: 36px 32px;
            max-width: 360px; width: calc(100vw - 32px);
            text-align: center; box-shadow: 0 30px 80px rgba(11,37,69,0.3);
            animation: scaleIn 0.35s cubic-bezier(0.34,1.5,0.64,1);
        }
        @keyframes scaleIn { from { opacity:0; transform:scale(0.75); } to { opacity:1; transform:scale(1); } }
        .sc-circle {
            width: 72px; height: 72px; background: var(--green-lt); border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            font-size: 32px; margin: 0 auto 16px;
        }
        .sc-title  { font-size: 20px; font-weight: 800; color: var(--navy); margin-bottom: 8px; }
        .sc-desc   { font-size: 13px; color: rgba(11,37,69,0.5); line-height: 1.6; margin-bottom: 20px; }
        .sc-id     { background: var(--green-lt); border-radius: var(--r2); padding: 10px 14px; font-size: 12px; font-weight: 700; color: var(--green-d); margin-bottom: 20px; }
        .btn-lapor-lagi {
            width: 100%; padding: 11px; border: none; border-radius: var(--r2);
            background: var(--green); color: white; font-family: inherit;
            font-size: 13px; font-weight: 700; cursor: pointer; transition: background 0.15s;
        }
        .btn-lapor-lagi:hover { background: var(--green-d); }

        /* TOAST — identik dengan index.php */
        #toast {
            position: fixed; bottom: 24px; left: 50%;
            transform: translateX(-50%) translateY(8px);
            z-index: 9999;
            background: var(--navy); color: white;
            font-size: 12px; font-weight: 600;
            padding: 8px 20px; border-radius: 18px;
            box-shadow: 0 6px 22px rgba(11,37,69,0.28);
            opacity: 0; transition: all 0.28s ease; pointer-events: none;
            font-family: 'Plus Jakarta Sans', sans-serif; white-space: nowrap;
        }
        #toast.show { opacity:1; transform: translateX(-50%) translateY(0); }
        #toast.ok   { background: var(--green); }
        #toast.err  { background: var(--red); }

        /* RESPONSIVE MOBILE */
        @media (max-width: 768px) {
            .page-wrap { grid-template-columns: 1fr; grid-template-rows: auto auto auto; }
            .map-panel { grid-row: 2; height: 280px; }
            .form-panel { grid-row: 3; max-height: none; position: static; overflow-y: visible; }
            #map-lapor { min-height: 280px; }
            .ff-row { grid-template-columns: 1fr; }
            .back-link span { display: none; }
        }
    </style>

    <div style="
        margin-top:16px; padding-top:14px;
        border-top:1px dashed rgba(11,37,69,0.1);
        text-align:center">
        <div style="font-size:10px;font-weight:700;color:rgba(11,37,69,0.35);
            text-transform:uppercase;letter-spacing:0.07em;margin-bottom:8px">
            Bagikan halaman ini
        </div>
        <div id="self-qr" style="width:100px;height:100px;border-radius:8px;border:1.5px solid rgba(11,37,69,0.08);overflow:hidden"></div>
        <div style="font-size:10px;color:rgba(11,37,69,0.3);margin-top:6px">
            Scan untuk membuka di HP lain
        </div>
    </div>
</head>
<body>

<div class="page-wrap">

    <!-- HEADER -->
    <header class="page-header">
        <div class="header-brand">
            <div class="hb-icon">🗺️</div>
            <div class="hb-text">
                <div class="title">WebGIS Pemetaan Sosial</div>
                <div class="subtitle">Kota Pontianak — Berbasis Komunitas Rumah Ibadah</div>
            </div>
        </div>
        <div style="display:flex;align-items:center;gap:10px">
            <div class="header-badge">📢 Laporan Publik</div>
            <a href="index.php" class="back-link">← <span>Kembali ke Peta</span></a>
        </div>
    </header>

    <!-- PANEL KIRI: PETA -->
    <div class="map-panel">
        <div id="map-lapor"></div>
        <div class="coord-pill" id="coordPill">
            📍 <span id="coordText">—</span>
        </div>
        <div class="map-instruction" id="mapHint">
            Klik titik lokasi tempat tinggal di peta
        </div>
    </div>

    <!-- PANEL KANAN: FORM -->
    <div class="form-panel">

        <!-- Hero -->
        <div class="form-hero">
            <div class="fh-label">Formulir Laporan Warga</div>
            <div class="fh-title">Laporkan Keluarga<br>Tidak Mampu</div>
            <div class="fh-desc">Data Anda akan diverifikasi oleh pengurus rumah ibadah setempat sebelum masuk ke peta resmi.</div>
        </div>

        <!-- Steps -->
        <div class="steps-bar">
            <div class="step done"   id="step1"><div class="step-num">1</div><div class="step-lbl">Mulai</div></div>
            <div class="step active" id="step2"><div class="step-num">2</div><div class="step-lbl">Lokasi</div></div>
            <div class="step"        id="step3"><div class="step-num">3</div><div class="step-lbl">Data Diri</div></div>
            <div class="step"        id="step4"><div class="step-num">4</div><div class="step-lbl">Kirim</div></div>
        </div>

        <!-- Body -->
        <div class="form-body">

            <div class="info-box">
                <span class="ib-icon">💡</span>
                <span>Klik di peta sebelah kiri untuk menentukan lokasi, lalu isi data di bawah ini.</span>
            </div>

            <!-- LOKASI -->
            <div class="section-title">📍 Lokasi Tempat Tinggal</div>
            <div class="loc-box" id="locBox" onclick="focusMap()">
                <div class="loc-box-icon">📍</div>
                <div class="loc-box-text">
                    <div class="lbt-title" id="locTitle">Belum dipilih — klik peta</div>
                    <div class="lbt-val"   id="locVal">Klik di peta untuk menentukan koordinat</div>
                </div>
            </div>
            <div class="ff">
                <label>Alamat Lengkap <span class="req">*</span></label>
                <textarea id="f_alamat" placeholder="Contoh: Jl. Ahmad Yani No. 12, Kel. Sungai Bangkong, Kec. Pontianak Kota"></textarea>
            </div>

            <!-- DATA PRIBADI -->
            <div class="section-title">👤 Data Kepala Keluarga</div>
            <div class="ff">
                <label>Nama Kepala Keluarga <span class="req">*</span></label>
                <input type="text" id="f_kk" placeholder="Nama lengkap sesuai KTP" />
            </div>
            <div class="ff-row">
                <div class="ff">
                    <label>Jumlah Anggota (Jiwa) <span class="req">*</span></label>
                    <input type="number" id="f_jml" placeholder="Contoh: 4" min="1" max="30" />
                </div>
                <div class="ff">
                    <label>Tanggal Lahir KK</label>
                    <input type="date" id="f_tgl_lahir" />
                </div>
            </div>
            <div class="ff-row">
                <div class="ff">
                    <label>Pendidikan Terakhir</label>
                    <select id="f_pendidikan">
                        <option value="">— Pilih —</option>
                        <option value="Tidak Sekolah">Tidak Sekolah</option>
                        <option value="SD">SD</option>
                        <option value="SMP">SMP</option>
                        <option value="SMA">SMA</option>
                        <option value="D3">D3</option>
                        <option value="S1">S1</option>
                        <option value="S2">S2</option>
                        <option value="S3">S3</option>
                    </select>
                </div>
                <div class="ff">
                    <label>Pekerjaan</label>
                    <input type="text" id="f_pekerjaan" placeholder="Contoh: Buruh harian" />
                </div>
            </div>

            <!-- KESEHATAN -->
            <div class="section-title">🏥 Kesehatan & Jaminan Sosial</div>
            <div class="ff">
                <label>Riwayat Penyakit / Disabilitas</label>
                <textarea id="f_penyakit" placeholder="Contoh: Diabetes, hipertensi — atau tulis 'Tidak ada'" style="min-height:56px"></textarea>
            </div>
            <div class="ff">
                <label>Kepemilikan Jaminan Sosial</label>
                <select id="f_jaminan">
                    <option value="">— Pilih —</option>
                    <option value="BPJS Kesehatan">BPJS Kesehatan</option>
                    <option value="KIS">KIS (Kartu Indonesia Sehat)</option>
                    <option value="BPJS Ketenagakerjaan">BPJS Ketenagakerjaan</option>
                    <option value="Tidak Ada">Tidak Ada</option>
                </select>
            </div>

            <!-- PELAPOR -->
            <div class="section-title">📝 Identitas Pelapor</div>
            <div class="ff">
                <label>Nama Pelapor <span class="req">*</span></label>
                <input type="text" id="f_pelapor" placeholder="Nama Anda (pengurus / relawan / warga)" />
            </div>
            <div class="ff-row">
                <div class="ff">
                    <label>No. HP Pelapor</label>
                    <input type="tel" id="f_hp" placeholder="08xx-xxxx-xxxx" />
                </div>
                <div class="ff">
                    <label>Hubungan dengan KK</label>
                    <select id="f_hubungan">
                        <option value="">— Pilih —</option>
                        <option value="Diri sendiri">Diri sendiri</option>
                        <option value="Tetangga">Tetangga</option>
                        <option value="Pengurus RT/RW">Pengurus RT/RW</option>
                        <option value="Relawan">Relawan</option>
                        <option value="Pengurus Rumah Ibadah">Pengurus Rumah Ibadah</option>
                    </select>
                </div>
            </div>
            <div class="ff">
                <label>Keterangan Tambahan</label>
                <textarea id="f_keterangan" placeholder="Ceritakan kondisi keluarga secara singkat (opsional)"></textarea>
            </div>

        </div><!-- /form-body -->

        <!-- Footer -->
        <div class="form-footer">
            <button class="btn-submit" id="btnSubmit" onclick="submitLaporan()" disabled>
                📤 Kirim Laporan untuk Diverifikasi
            </button>
            <div class="submit-note">
                ⚠️ Laporan akan masuk sebagai <strong>menunggu verifikasi</strong> — belum tampil di peta sebelum disetujui operator
            </div>
        </div>

    </div><!-- /form-panel -->
</div><!-- /page-wrap -->

<!-- SUCCESS OVERLAY -->
<div id="success-overlay">
    <div class="success-card">
        <div class="sc-circle">✅</div>
        <div class="sc-title">Laporan Terkirim!</div>
        <div class="sc-desc">Terima kasih. Laporan Anda sudah diterima dan akan segera diverifikasi oleh pengurus rumah ibadah setempat.</div>
        <div class="sc-id" id="sc-ref">ID Laporan: #—</div>
        <button class="btn-lapor-lagi" onclick="resetForm()">📋 Laporkan Warga Lain</button>
    </div>
</div>

<div id="toast"></div>

<script>
// =============================================
// VARIABEL GLOBAL
// =============================================
let pickedLL   = null;
let tempMarker = null;

// =============================================
// INISIALISASI PETA
// =============================================
const mapLapor = L.map('map-lapor', { zoomControl: true })
    .setView([-0.0548, 109.3494], 14);

L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19, attribution: '© OpenStreetMap'
}).addTo(mapLapor);

const mkRed = new L.Icon({
    iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-red.png',
    shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
    iconSize:[25,41], iconAnchor:[12,41], popupAnchor:[1,-34], shadowSize:[41,41]
});

// Klik peta → simpan koordinat + tampilkan marker
mapLapor.on('click', function(e) {
    pickedLL = e.latlng;

    if (tempMarker) mapLapor.removeLayer(tempMarker);
    tempMarker = L.marker([e.latlng.lat, e.latlng.lng], { icon: mkRed })
        .addTo(mapLapor)
        .bindPopup('<div style="font-family:Plus Jakarta Sans,sans-serif;font-size:12px;font-weight:600;color:#0b2545">📍 Lokasi dipilih</div>')
        .openPopup();

    const latStr = e.latlng.lat.toFixed(6);
    const lngStr = e.latlng.lng.toFixed(6);

    // Update UI koordinat
    document.getElementById('coordPill').classList.add('show');
    document.getElementById('coordText').textContent = latStr + ', ' + lngStr;
    document.getElementById('locBox').classList.add('filled');
    document.getElementById('locTitle').textContent = '✅ Lokasi ditentukan';
    document.getElementById('locVal').textContent   = latStr + ', ' + lngStr;
    document.getElementById('mapHint').textContent  = '✅ Lokasi dipilih — klik lagi untuk mengubah';
    document.getElementById('mapHint').classList.add('picked');

    checkSubmitReady();
});

// =============================================
// STEP INDICATOR
// =============================================
function updateSteps(cur) {
    for (let i = 1; i <= 4; i++) {
        const el = document.getElementById('step' + i);
        el.className = 'step';
        if (i < cur) el.classList.add('done');
        else if (i === cur) el.classList.add('active');
    }
}

// =============================================
// VALIDASI — enable/disable tombol submit
// =============================================
function checkSubmitReady() {
    const ok = pickedLL
        && document.getElementById('f_kk').value.trim()
        && document.getElementById('f_jml').value
        && parseInt(document.getElementById('f_jml').value) > 0
        && document.getElementById('f_alamat').value.trim()
        && document.getElementById('f_pelapor').value.trim();

    document.getElementById('btnSubmit').disabled = !ok;

    if (ok) updateSteps(4);
    else if (pickedLL) updateSteps(3);
    else updateSteps(2);
}

// Pasang listener ke semua field wajib
['f_kk','f_jml','f_alamat','f_pelapor'].forEach(id => {
    document.getElementById(id).addEventListener('input', checkSubmitReady);
});

// =============================================
// FOKUS KE PETA (klik locBox di mobile)
// =============================================
function focusMap() {
    document.getElementById('map-lapor').scrollIntoView({ behavior: 'smooth', block: 'center' });
    toast('🖱️ Klik di peta untuk menentukan lokasi', '');
}

// =============================================
// SUBMIT LAPORAN → api_laporan.php
// =============================================
function submitLaporan() {
    if (!pickedLL) { toast('⚠️ Pilih lokasi di peta terlebih dahulu', 'err'); return; }

    const kk      = document.getElementById('f_kk').value.trim();
    const jml     = document.getElementById('f_jml').value;
    const alamat  = document.getElementById('f_alamat').value.trim();
    const pelapor = document.getElementById('f_pelapor').value.trim();

    if (!kk || !jml || !alamat || !pelapor) {
        toast('⚠️ Lengkapi semua field wajib (*)', 'err');
        return;
    }

    const btn = document.getElementById('btnSubmit');
    btn.disabled   = true;
    btn.textContent = '⏳ Mengirim...';

    const fd = new FormData();
    fd.append('lat',                 pickedLL.lat);
    fd.append('lng',                 pickedLL.lng);
    fd.append('nama_kk',             kk);
    fd.append('jumlah_anggota',      jml);
    fd.append('alamat',              alamat);
    fd.append('tanggal_lahir',       document.getElementById('f_tgl_lahir').value  || '');
    fd.append('pendidikan_terakhir', document.getElementById('f_pendidikan').value || '');
    fd.append('pekerjaan',           document.getElementById('f_pekerjaan').value.trim() || '');
    fd.append('riwayat_penyakit',    document.getElementById('f_penyakit').value.trim()  || '');
    fd.append('kepemilikan_jaminan', document.getElementById('f_jaminan').value   || '');
    fd.append('nama_pelapor',        pelapor);
    fd.append('hp_pelapor',          document.getElementById('f_hp').value.trim() || '');
    fd.append('hubungan_pelapor',    document.getElementById('f_hubungan').value  || '');
    fd.append('keterangan',          document.getElementById('f_keterangan').value.trim() || '');

    fetch('api_laporan.php', { method: 'POST', body: fd })
        .then(r => r.json())
        .then(res => {
            if (res.status === 'ok') {
                document.getElementById('sc-ref').textContent = 'ID Laporan: #' + res.id;
                document.getElementById('success-overlay').classList.add('show');
            } else {
                toast('❌ Gagal: ' + (res.pesan || 'Coba lagi'), 'err');
                btn.disabled   = false;
                btn.innerHTML  = '📤 Kirim Laporan untuk Diverifikasi';
            }
        })
        .catch(() => {
            toast('❌ Koneksi gagal. Periksa jaringan Anda.', 'err');
            btn.disabled  = false;
            btn.innerHTML = '📤 Kirim Laporan untuk Diverifikasi';
        });
}

// =============================================
// RESET — Laporan lagi
// =============================================
function resetForm() {
    document.getElementById('success-overlay').classList.remove('show');
    ['f_kk','f_jml','f_alamat','f_tgl_lahir','f_pendidikan','f_pekerjaan',
     'f_penyakit','f_jaminan','f_pelapor','f_hp','f_hubungan','f_keterangan']
    .forEach(id => { const el = document.getElementById(id); if (el) el.value = ''; });

    pickedLL = null;
    if (tempMarker) { mapLapor.removeLayer(tempMarker); tempMarker = null; }
    document.getElementById('coordPill').classList.remove('show');
    document.getElementById('coordText').textContent = '—';
    document.getElementById('locBox').classList.remove('filled');
    document.getElementById('locTitle').textContent = 'Belum dipilih — klik peta';
    document.getElementById('locVal').textContent   = 'Klik di peta untuk menentukan koordinat';
    document.getElementById('mapHint').textContent  = 'Klik titik lokasi tempat tinggal di peta';
    document.getElementById('mapHint').classList.remove('picked');
    document.getElementById('btnSubmit').disabled  = true;
    document.getElementById('btnSubmit').innerHTML = '📤 Kirim Laporan untuk Diverifikasi';
    updateSteps(2);
}

// =============================================
// TOAST — identik dengan index.php
// =============================================
function toast(msg, type) {
    const t = document.getElementById('toast');
    t.textContent = msg;
    t.className   = 'show' + (type ? ' ' + type : '');
    setTimeout(() => t.className = '', 3000);
}

// QR Code untuk halaman lapor.php itu sendiri
window.addEventListener('load', function() {
    const selfUrl = window.location.href;
    new QRCode(document.getElementById('self-qr'), {
        text: selfUrl,
        width: 100,
        height: 100,
        colorDark: '#0b2545',
        colorLight: '#ffffff',
        correctLevel: QRCode.CorrectLevel.M
    });
});
// Init
updateSteps(2);
</script>
</body>
</html>