{% extends "base.html" %}
{% block title %}Input Data Sasaran{% endblock %}
{% block sidebar %}
    <a href="/kader" class="sidebar-item"><i class="fas fa-home me-2"></i> Beranda</a>
    <div class="sidebar-heading">ENTRY DATA</div>
    <a href="/form_kader" class="sidebar-item active"><i class="fas fa-edit me-2"></i> Input Sasaran</a>
    <div class="sidebar-heading">DATA SAYA</div>
    <a href="/rekapitulasi" class="sidebar-item"><i class="fas fa-list me-2"></i> Rekapitulasi Sasaran</a>
{% endblock %}
{% block content %}
<div class="card">
    <div class="card-header bg-primary text-white"><h4 class="mb-0">Formulir Input BNBA 1000 HPK dan Sasaran B3</h4></div>
    <div class="card-body">
        <form id="formSasaran" action="/submit_sasaran" method="POST">
            <input type="hidden" name="kecamatan_sasaran" value="{{ session['kecamatan'] }}">

            <div class="form-section">1. Data Pelaporan & Dapur SPPG</div>
            <div class="row mb-3">
                <div class="col-md-6">
                    <label class="form-label">Bulan Pelaporan <span class="text-danger">*</span></label>
                    <select name="bulan_lapor" class="form-select" required>
                        <option value="">-- Pilih --</option>
                        {% for b in list_bulan %}
                        <option value="{{ b }}">{{ b }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-6">
                    <label class="form-label">Tahun Pelaporan <span class="text-danger">*</span></label>
                    <select name="tahun_lapor" class="form-select" required>
                        <option value="">-- Pilih --</option>
                        {% for t in list_tahun %}
                        <option value="{{ t }}">{{ t }}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>
            
            <div class="row mb-3">
                <div class="col-md-6">
                    <label class="form-label">Desa Dapur (lokasi dapur) <span class="text-danger">*</span></label>
                    <select name="desa_sasaran_wilayah" id="desa_sasaran_wilayah" class="form-select" required>
                        <option value="">-- Pilih Desa Dapur --</option>
                        {% for desa in DATA_WILAYAH.get(session['kecamatan'], {}).keys() %}
                        <option value="{{ desa }}">{{ desa }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-6">
                    <label class="form-label">Nama Dapur SPPG <span class="text-danger">*</span></label>
                    <select name="nama_dapur" id="nama_dapur" class="form-select" required>
                        <option value="">-- Pilih Desa Dapur Terlebih Dahulu --</option>
                        </select>
                </div>
            </div>

            <div class="row mb-3">
                <div class="col-md-6">
                    <label class="form-label">Alamat Dapur <span class="text-danger">*</span></label>
                    <input type="text" name="alamat_dapur" id="alamat_dapur" class="form-control" readonly required>
                </div>
                <div class="col-md-6">
                    <label class="form-label">Desa Sasaran (tempat tinggal sasaran) <span class="text-danger">*</span></label>
                    <select name="desa_sasaran" id="desa_sasaran" class="form-select" required>
                        <option value="">-- Pilih Desa Sasaran --</option>
                        {% for desa in DATA_WILAYAH.get(session['kecamatan'], {}).keys() %}
                        <option value="{{ desa }}">{{ desa }}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>
            
            <div class="form-section">2. Identitas Sasaran</div>
            <div class="row mb-3">
                <div class="col-md-4">
                    <label class="form-label">Kategori Sasaran <span class="text-danger">*</span></label>
                    <select name="kategori_Sasaran" id="kategori_sasaran" class="form-select" required onchange="toggleAnakFields()">
                        <option value="">-- Pilih --</option>
                        <option value="Balita Non-PAUD">Balita Non-PAUD</option>
                        <option value="Baduta">Baduta</option>
                        <option value="Ibu Hamil">Ibu Hamil</option>
                        <option value="Ibu Menyusui">Ibu Menyusui</option>
                    </select>
                </div>
                <div class="col-md-4">
                    <label class="form-label">Nama Ibu/Sasaran <span class="text-danger">*</span></label>
                    <input type="text" name="nama_Sasaran" class="form-control" oninput="this.value = this.value.toUpperCase()" required>
                </div>
                <div class="col-md-4">
                    <label class="form-label">Nama Ayah/Suami</label>
                    <input type="text" name="nama_ayah" class="form-control" oninput="this.value = this.value.toUpperCase()">
                </div>
            </div>
            <div class="row mb-3">
                <div class="col-md-6">
                    <label class="form-label">NIK Sasaran (16 digit)</label>
                    <input type="text" name="nik_Sasaran" class="form-control" maxlength="16" oninput="this.value=this.value.replace(/[^0-9]/g,'')">
                </div>
                <div class="col-md-6">
                    <label class="form-label">No. KK Sasaran (16 digit)</label>
                    <input type="text" name="kk_Sasaran" class="form-control" maxlength="16" oninput="this.value=this.value.replace(/[^0-9]/g,'')">
                </div>
            </div>
            <div class="row mb-3">
                <div class="col-md-4">
                    <label class="form-label">Tempat Lahir (Ibu)</label>
                    <input type="text" name="tempat_lahir" class="form-control" oninput="this.value = this.value.toUpperCase()">
                </div>
                <div class="col-md-4">
                    <label class="form-label">Tanggal Lahir (Ibu) <span class="text-danger">*</span></label>
                    <input type="date" name="tanggal_lahir" id="tgl_lahir_ibu" class="form-control" onchange="calcAge(this.value, 'usia_sasaran')" required>
                </div>
                <div class="col-md-4">
                    <label class="form-label">Usia Sasaran (otomatis)</label>
                    <input type="text" name="usia_sasaran" id="usia_sasaran" class="form-control" readonly>
                </div>
            </div>

            <div id="section_anak" style="display:none;">
                <div class="form-section">3. Identitas Anak</div>
                <div class="row mb-3">
                    <div class="col-md-6">
                        <label class="form-label">NIK Anak</label>
                        <input type="text" name="nik_anak" class="form-control input-anak" maxlength="16" oninput="this.value=this.value.replace(/[^0-9]/g,'')">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Nama Anak <span class="text-danger">*</span></label>
                        <input type="text" name="nama_anak" class="form-control input-anak" oninput="this.value = this.value.toUpperCase()">
                    </div>
                </div>
                <div class="row mb-3">
                    <div class="col-md-4">
                        <label class="form-label">Tempat Lahir Anak <span class="text-danger">*</span></label>
                        <input type="text" name="tempat_lahir_anak" class="form-control input-anak" oninput="this.value = this.value.toUpperCase()">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Tanggal Lahir Anak <span class="text-danger">*</span></label>
                        <input type="date" name="tanggal_lahir_anak" id="tgl_lahir_anak" class="form-control input-anak" onchange="calcAge(this.value, 'usia_anak')">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Usia Anak (otomatis)</label>
                        <input type="text" name="usia_anak" id="usia_anak" class="form-control" readonly>
                    </div>
                </div>
            </div>

            <div class="form-section">4. Alamat & Posyandu Sasaran</div>
            <div class="row mb-3">
                <div class="col-md-6">
                    <label class="form-label">Wilayah Posyandu <span class="text-danger">*</span></label>
                    <input type="text" name="wilayah_posyandu" class="form-control" oninput="this.value = this.value.toUpperCase()" required>
                </div>
                <div class="col-md-6">
                    <label class="form-label">Alamat Lengkap Sasaran <span class="text-danger">*</span></label>
                    <input type="text" name="alamat_sasaran" class="form-control" oninput="this.value = this.value.toUpperCase()" required>
                </div>
            </div>

            <div class="form-section">5. Data Klinis & Pengukuran</div>
            <div class="row mb-3">
                <div class="col-md-3">
                    <label class="form-label">Hamil Ke-</label>
                    <input type="number" name="hamil_ke" id="hamil_ke" class="form-control" placeholder="0">
                </div>
                <div class="col-md-3">
                    <label class="form-label">Usia Kehamilan (minggu)</label>
                    <input type="number" name="usia_kehamilan" id="usia_kehamilan" class="form-control" placeholder="0">
                </div>
                <div class="col-md-3">
                    <label class="form-label">Anak Ke-</label>
                    <input type="number" name="anak_ke" id="anak_ke" class="form-control" placeholder="0">
                </div>
                <div class="col-md-3">
                    <label class="form-label">Jenis Kontrasepsi</label>
                    <select name="jenis_kontrasepsi" class="form-select">
                        <option value="">-- Pilih --</option>
                        <option value="IUD">IUD</option>
                        <option value="Pil">Pil</option>
                        <option value="Suntik">Suntik</option>
                        <option value="Implan">Implan</option>
                        <option value="Kondom">Kondom</option>
                        <option value="MOW/MOP">MOW/MOP</option>
                        <option value="Tidak Pakai">Tidak Pakai</option>
                    </select>
                </div>
            </div>
            <div class="row mb-4">
                <div class="col-md-6">
                    <label class="form-label">Berat Badan (kg) <span class="text-danger">*</span></label>
                    <input type="number" step="0.01" name="berat_badan" class="form-control" required>
                </div>
                <div class="col-md-6">
                    <label class="form-label">Tinggi Badan (cm) <span class="text-danger">*</span></label>
                    <input type="number" step="0.01" name="tinggi_badan" class="form-control" required>
                </div>
            </div>

            <div class="d-flex justify-content-end">
                <button type="reset" class="btn btn-secondary me-2">Reset</button>
                <button type="submit" class="btn btn-primary">Simpan Data</button>
            </div>
        </form>
    </div>
</div>

<script>
    function calcAge(tgl, id) {
        const dob = new Date(tgl);
        if (!isNaN(dob)) {
            const today = new Date();
            let years = today.getFullYear() - dob.getFullYear();
            let months = today.getMonth() - dob.getMonth();
            if (months < 0 || (months === 0 && today.getDate() < dob.getDate())) {
                years--;
                months += 12;
            }
            if (today.getDate() < dob.getDate()) months--;
            if (months < 0) months = 11;
            document.getElementById(id).value = years <= 0 ? months + " Bulan" : (months === 0 ? years + " Tahun" : years + " Tahun " + months + " Bulan");
        }
    }
    
    function toggleAnakFields() {
        const kat = document.getElementById('kategori_sasaran').value;
        const section = document.getElementById('section_anak');
        const inputsAnak = document.querySelectorAll('.input-anak');
        const hamilKe = document.getElementById('hamil_ke');
        const usiaKehamilan = document.getElementById('usia_kehamilan');
        const anakKe = document.getElementById('anak_ke');
        const bb = document.querySelector('input[name="berat_badan"]');
        const tb = document.querySelector('input[name="tinggi_badan"]');
        if (kat === 'Ibu Hamil') {
            hamilKe.disabled = false;
            usiaKehamilan.disabled = false;
            anakKe.disabled = true;
            anakKe.value = ''; // Diubah agar kembali kosong (menampilkan placeholder)
            bb.disabled = true;
            tb.disabled = true;
            bb.required = false;
            tb.required = false;
            section.style.display = 'none';
            inputsAnak.forEach(i => i.required = false);
        } else if (['Ibu Menyusui', 'Balita Non-PAUD', 'Baduta'].includes(kat)) {
            hamilKe.disabled = true;
            hamilKe.value = ''; // Diubah agar kembali kosong (menampilkan placeholder)
            usiaKehamilan.disabled = true;
            usiaKehamilan.value = ''; // Diubah agar kembali kosong (menampilkan placeholder)
            anakKe.disabled = false;
            bb.disabled = false;
            tb.disabled = false;
            bb.required = true;
            tb.required = true;
            section.style.display = 'block';
            inputsAnak.forEach(i => { if (i.name !== 'nik_anak') i.required = true; });
        } else {
            hamilKe.disabled = false;
            usiaKehamilan.disabled = false;
            anakKe.disabled = false;
            bb.disabled = false;
            tb.disabled = false;
            bb.required = true;
            tb.required = true;
            section.style.display = 'none';
            inputsAnak.forEach(i => i.required = false);
        }
    }
    
    // ==============================================================================
    // PERBAIKAN: LOGIKA FILTER NAMA DAPUR & AUTO-FILL ALAMAT
    // ==============================================================================
    
    // Tarik semua data dapur dari backend ke dalam array JavaScript
    const allDapurData = [
        {% for d in data_dapur_db %}
        {
            nama: "{{ d[0] }}",
            desa: "{{ d[1] }}",
            alamat: "{{ d[2] | replace('\n', ' ') | replace('\r', '') }}"
        },
        {% endfor %}
    ];
    
    const desaDapurSelect = document.getElementById('desa_sasaran_wilayah');
    const namaDapurSelect = document.getElementById('nama_dapur');
    const alamatDapurInput = document.getElementById('alamat_dapur');
    
    function updateDapurOptions(selectedDesa) {
        // Kosongkan nama dapur dan alamat setiap kali desa berubah
        namaDapurSelect.innerHTML = '<option value="">-- Pilih Dapur --</option>';
        alamatDapurInput.value = '';
        
        let filteredDapur = allDapurData;
        if (selectedDesa) {
            filteredDapur = allDapurData.filter(d => d.desa === selectedDesa);
        }
        
        filteredDapur.forEach(d => {
            const opt = document.createElement('option');
            opt.value = d.nama;
            opt.text = d.nama;
            opt.setAttribute('data-alamat', d.alamat);
            namaDapurSelect.appendChild(opt);
        });
    }

    desaDapurSelect.addEventListener('change', function() {
        updateDapurOptions(this.value);
        
        // Auto-fill desa sasaran di bagian bawah jika masih kosong
        if (!document.getElementById('desa_sasaran').value) {
            document.getElementById('desa_sasaran').value = this.value;
        }
    });

    namaDapurSelect.addEventListener('change', function() {
        let selectedOpt = this.options[this.selectedIndex];
        alamatDapurInput.value = selectedOpt ? (selectedOpt.getAttribute('data-alamat') || '') : '';
    });

    // Inisialisasi awal saat halaman di-load
    document.addEventListener("DOMContentLoaded", function() {
        updateDapurOptions(desaDapurSelect.value);
    });

    // ==============================================================================
    // SCRIPT AJAX AGAR TIDAK RELOAD & MENAHAN DATA BAGIAN 1
    // ==============================================================================
    document.addEventListener("DOMContentLoaded", function() {
        const form = document.getElementById('formSasaran');
        if(form) {
            form.addEventListener('submit', function(e) {
                e.preventDefault();
                const btn = form.querySelector('button[type="submit"]');
                const original = btn.innerHTML;
                btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Menyimpan...';
                btn.disabled = true;
                
                fetch(form.action, {
                    method: form.method,
                    body: new FormData(form),
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                })
                .then(res => {
                    if (res.ok) {
                        if (typeof Toast !== 'undefined') {
                            Toast.fire({icon:'success', title:'Data Sasaran berhasil disimpan!'});
                        } else {
                            alert('Data Sasaran berhasil disimpan!');
                        }
                        
                        // Menahan nilai field di Bagian 1
                        const keepFields = [
                            'bulan_lapor', 'tahun_lapor', 'desa_sasaran_wilayah', 
                            'nama_dapur', 'alamat_dapur', 'desa_sasaran'
                        ];
                        
                        let savedData = {};
                        keepFields.forEach(name => {
                            let el = form.elements[name];
                            if(el) savedData[name] = el.value;
                        });
                        
                        form.reset();
                        
                        // Kembalikan nilai Bagian 1 yang sudah ditahan
                        keepFields.forEach(name => {
                            let el = form.elements[name];
                            if(el) el.value = savedData[name];
                        });

                        toggleAnakFields();
                        
                    } else {
                        if (typeof Toast !== 'undefined') {
                            Toast.fire({icon:'error', title:'Gagal menyimpan data!'});
                        } else {
                            alert('Gagal menyimpan data!');
                        }
                    }
                })
                .catch(err => {
                    console.error(err);
                    alert('Terjadi kesalahan jaringan saat menyimpan.');
                })
                .finally(() => {
                    btn.innerHTML = original;
                    btn.disabled = false;
                });
            });
        }
    });
</script>
{% endblock %}