{% extends "base.html" %}
{% block title %}Form Input Realisasi Dapur{% endblock %}
{% block sidebar %}
    <a href="/dapur" class="sidebar-item"><i class="fas fa-home me-2"></i> Beranda</a>
    <div class="sidebar-heading">PEMANTAUAN</div>
    <a href="/rekapitulasi" class="sidebar-item"><i class="fas fa-eye me-2"></i> Lihat Sasaran</a>
    <div class="sidebar-heading">PELAPORAN</div>
    <a href="/form_dapur" class="sidebar-item active"><i class="fas fa-edit me-2"></i> Input Realisasi Dapur</a>
    <a href="/arsip_laporan" class="sidebar-item"><i class="fas fa-history me-2"></i> Arsip Laporan</a>
{% endblock %}
{% block content %}
<div class="card">
    <div class="card-header bg-primary text-white text-center py-3">
        <h4 class="mb-0">Formulir Pelaporan Realisasi Dapur</h4>
        <p class="mb-0 small">Sistem Informasi MBG B3 - Rekap Realisasi Distribusi</p>
    </div>
    <div class="card-body">
        <form id="formDapur" action="/tambah_laporan_dapur" method="POST">
            <div class="form-section">1. Data Wilayah Dapur</div>
            <div class="row mb-3">
                <div class="col-md-4">
                    <label class="form-label">Kabupaten</label>
                    <select class="form-select" name="kabupaten_dapur" required>
                        <option value="SUKABUMI">KABUPATEN SUKABUMI</option>
                    </select>
                </div>
                <div class="col-md-4">
                    <label class="form-label">Kecamatan</label>
                    {% if session.get('kecamatan') and session['kecamatan'] != 'SEMUA' %}
                    <input type="text" class="form-control fw-bold bg-light" value="{{ session['kecamatan'] }}" readonly>
                    <input type="hidden" name="kecamatan_dapur" id="kec_dapur_form" value="{{ session['kecamatan'] }}">
                    {% else %}
                    <select class="form-select" name="kecamatan_dapur" id="kec_dapur_form" required onchange="updateDesaDapur()">
                        <option value="">-- Pilih Kecamatan --</option>
                        {% for kec in DATA_WILAYAH.keys() %}
                        <option value="{{ kec }}">{{ kec }}</option>
                        {% endfor %}
                    </select>
                    {% endif %}
                </div>
                <div class="col-md-4">
                    <label class="form-label">Desa / Kelurahan</label>
                    <select class="form-select" name="desa_dapur" id="desa_dapur_form" required>
                        <option value="">-- Pilih Kecamatan Dulu --</option>
                    </select>
                </div>
            </div>

            <div class="form-section">2. Periode & Data Dapur SPPG</div>
            <div class="row mb-3">
                <div class="col-md-6">
                    <label class="form-label">Bulan Pelaporan</label>
                    <select class="form-select" name="bulan_lapor" required>
                        {% for b in list_bulan %}
                        <option value="{{ b }}">{{ b }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-6">
                    <label class="form-label">Tahun Pelaporan</label>
                    <select class="form-select" name="tahun_lapor" required>
                        {% 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">Nama Dapur</label>
                    <select class="form-select" name="nama_dapur" id="nama_dapur" required>
                        <option value="">-- Pilih Desa Terlebih Dahulu --</option>
                    </select>
                </div>
                <div class="col-md-6">
                    <label class="form-label">Alamat Dapur (RT/RW)</label>
                    <input type="text" class="form-control" name="alamat_dapur" id="alamat_dapur" readonly required>
                </div>
            </div>

            <div class="form-section">3. Realisasi Distribusi Sasaran</div>
            <div class="row mb-3">
                <div class="col-md-2"><label class="form-label">Balita Non-PAUD</label><input type="number" class="form-control calc-sasaran" name="jml_balita" min="0" required></div>
                <div class="col-md-2"><label class="form-label">Baduta</label><input type="number" class="form-control calc-sasaran" name="jml_baduta" min="0" required></div>
                <div class="col-md-2"><label class="form-label">Ibu Hamil</label><input type="number" class="form-control calc-sasaran" name="jml_bumil" min="0" required></div>
                <div class="col-md-3"><label class="form-label">Ibu Menyusui</label><input type="number" class="form-control calc-sasaran" name="jml_busui" min="0" required></div>
                <div class="col-md-3"><label class="form-label fw-bold text-success">Total Sasaran</label><input type="number" class="form-control fw-bold text-success" id="total_sasaran" name="total_sasaran" readonly></div>
            </div>

            <div class="form-section">4. Rincian Pelaksanaan Distribusi</div>
            <div class="row mb-3">
                <div class="col-md-6"><label class="form-label">SPPG Mendistribusikan MBG 3B</label><select class="form-select" name="distribusi_mbg" required><option value="">-- Pilih --</option><option value="Ya">Ya</option><option value="Tidak">Tidak</option></select></div>
                <div class="col-md-6"><label class="form-label">Pemberian Makanan UPF</label><select class="form-select" name="pemberian_upf" required><option value="">-- Pilih --</option><option value="Ya">Ya</option><option value="Tidak">Tidak</option></select></div>
                <div class="col-md-4"><label class="form-label">Frekuensi Distribusi MBG 3B</label><select class="form-select" name="frek_distribusi" required><option value="">-- Pilih --</option><option value="1 Hari">1 Hari</option><option value="2 Hari">2 Hari</option><option value="3 Hari">3 Hari</option><option value="4 Hari">4 Hari</option><option value="5 Hari">5 Hari</option><option value="6 Hari">6 Hari</option><option value="7 Hari">7 Hari</option><option value="Tidak">Tidak</option></select></div>
                <div class="col-md-4"><label class="form-label">Frekuensi Sasaran 3B Menerima MBG</label><select class="form-select" name="frek_sasaran" required><option value="">-- Pilih --</option><option value="1 Hari">1 Hari</option><option value="2 Hari">2 Hari</option><option value="3 Hari">3 Hari</option><option value="4 Hari">4 Hari</option><option value="5 Hari">5 Hari</option><option value="6 Hari">6 Hari</option><option value="7 Hari">7 Hari</option><option value="Tidak">Tidak</option></select></div>
                <div class="col-md-4"><label class="form-label">Frekuensi Menu Makanan Basah</label><select class="form-select" name="frek_makanan_basah" required><option value="">-- Pilih --</option><option value="1 Hari">1 Hari</option><option value="2 Hari">2 Hari</option><option value="3 Hari">3 Hari</option><option value="4 Hari">4 Hari</option><option value="5 Hari">5 Hari</option><option value="6 Hari">6 Hari</option><option value="7 Hari">7 Hari</option><option value="Tidak">Tidak</option></select></div>
            </div>

            <div class="form-section">5. Data Kader & Insentif</div>
            <div class="row mb-3">
                <div class="col-md-6"><label class="form-label">Status Insentif Kader</label><select class="form-select" name="insentif_kader" required><option value="">-- Pilih Status --</option><option value="Terima sesuai juknis">Terima sesuai juknis</option><option value="Terima Tidak sesuai juknis">Terima Tidak sesuai juknis</option><option value="Belum Terima">Belum Terima</option></select></div>
                <div class="col-md-6"><label class="form-label">Nominal Insentif</label><input type="number" class="form-control" name="nominal_insentif" min="0" required></div>
                <div class="col-md-4"><label class="form-label">Jml. Anggota TPK</label><input type="number" class="form-control" name="jml_anggota_tpk" min="0"></div>
                <div class="col-md-4"><label class="form-label">Jml. Anggota TPK Distribusi MBG 3B</label><input type="number" class="form-control" name="jml_tpk_distribusi" min="0"></div>
                <div class="col-md-4"><label class="form-label">Jml. Kader (Non TPK) Distribusi MBG 3B</label><input type="number" class="form-control" name="jml_kader_lain" min="0"></div>
            </div>
            <hr>
            <div class="d-flex justify-content-end"><button type="reset" class="btn btn-outline-secondary me-2">Reset</button><button type="submit" class="btn btn-primary"><i class="fas fa-paper-plane me-1"></i> Simpan Laporan</button></div>
        </form>
    </div>
</div>

<script>
    const wilayahData = {{ DATA_WILAYAH | tojson | safe }};
    
    // Konversi format data dapur dari backend (termasuk variabel desa)
    const allDapur = [
        {% for dapur in data_dapur_db %}
        {
            nama: "{{ dapur[0] }}",
            desa: "{{ dapur[1] }}",
            alamat: "{{ dapur[2] | replace('\n', ' ') | replace('\r', '') }}"
        },
        {% endfor %}
    ];

    function updateDesaDapur() {
        const kec = document.getElementById('kec_dapur_form').value;
        const desaSelect = document.getElementById('desa_dapur_form');
        
        desaSelect.innerHTML = '<option value="">-- Pilih Desa --</option>';
        
        // Reset Dapur & Alamat jika kecamatan berubah
        document.getElementById('nama_dapur').innerHTML = '<option value="">-- Pilih Desa Terlebih Dahulu --</option>';
        document.getElementById('alamat_dapur').value = '';

        if (kec && wilayahData[kec]) {
            Object.keys(wilayahData[kec]).forEach(desa => {
                desaSelect.innerHTML += `<option value="${desa}">${desa}</option>`;
            });
        }
    }

    document.addEventListener("DOMContentLoaded", function() {
        const desaSelectEl = document.getElementById('desa_dapur_form');
        const dapurSelectEl = document.getElementById('nama_dapur');
        const inputAlamat = document.getElementById('alamat_dapur');
        const kecField = document.getElementById('kec_dapur_form');

        // Jika kecamatan terkunci (hidden input), langsung muat data desanya saat halaman diakses
        if (kecField && kecField.tagName === 'INPUT' && kecField.value) {
            updateDesaDapur();
        }

        // Event saat Desa dipilih
        desaSelectEl.addEventListener('change', function() {
            const selectedDesa = this.value;
            dapurSelectEl.innerHTML = '<option value="">-- Pilih Nama Dapur --</option>';
            inputAlamat.value = '';

            if(selectedDesa) {
                let filteredDapur = allDapur.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);
                    dapurSelectEl.appendChild(opt);
                });
            }
            dapurSelectEl.innerHTML += '<option value="Belum Punya Dapur SPPG">Belum Punya Dapur SPPG</option>';
        });

        // Event saat Dapur dipilih
        dapurSelectEl.addEventListener('change', function() {
            const selectedOpt = this.options[this.selectedIndex];
            inputAlamat.value = (selectedOpt && selectedOpt.value !== "Belum Punya Dapur SPPG" && selectedOpt.value !== "")
                ? (selectedOpt.getAttribute('data-alamat') || '')
                : '';
        });

        const sasaranInputs = document.querySelectorAll('.calc-sasaran');
        const totalSasaranInput = document.getElementById('total_sasaran');
        
        sasaranInputs.forEach(inp => inp.addEventListener('input', () => { 
            let total = 0; 
            sasaranInputs.forEach(i => total += parseInt(i.value) || 0); 
            totalSasaranInput.value = total; 
        }));

        const form = document.getElementById('formDapur');
        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) {
                    // Reset formulir setelah data tersimpan
                    form.reset();
                    
                    // Kembalikan dropdown wilayah sesuai status akun
                    if (kecField.tagName === 'INPUT') {
                        // Jika akun terkunci ke 1 kecamatan, panggil ulang desa
                        updateDesaDapur();
                    } else {
                        // Jika superadmin, kosongkan kembali form desa
                        document.getElementById('desa_dapur_form').innerHTML = '<option value="">-- Pilih Kecamatan Dulu --</option>';
                    }
                    
                    document.getElementById('nama_dapur').innerHTML = '<option value="">-- Pilih Desa Terlebih Dahulu --</option>';
                    document.getElementById('alamat_dapur').value = '';
                    
                    Toast.fire({icon:'success', title:'Laporan tersimpan! Formulir dikosongkan otomatis.'});
                } else {
                    Toast.fire({icon:'error', title:'Gagal menyimpan laporan!'});
                }
            })
            .catch(err => {
                console.error(err);
                Toast.fire({icon:'error', title:'Terjadi kesalahan jaringan.'});
            })
            .finally(() => {
                btn.innerHTML = original;
                btn.disabled = false;
            });
        });
    });
</script>
{% endblock %}