{% extends "base.html" %}
{% block title %}Rekapitulasi Sasaran{% endblock %}

{% block content %}
<style>
    body, .main-content, .card, .table, .form-label, .modal-content { font-size: 14px; }
    .table-custom th, .table-custom td { font-size: 13px; padding: 8px 10px; }
    .btn-sm { font-size: 12px; padding: 4px 10px; }
    .form-control, .form-select { font-size: 13px; }
    .card-header, .modal-header { font-size: 15px; font-weight: 600; }
    .form-section { font-size: 13px; font-weight: 600; }
    .badge { font-size: 11px; }
    .detail-grid .row { margin-bottom: 10px; }
    .detail-grid .col-label { font-weight: 600; color: #0b3d91; }
    .edit-grid .row { margin-bottom: 12px; }
    .edit-grid label { font-weight: 600; margin-bottom: 0; }
    .edit-grid .col-label { font-weight: 600; padding-top: 6px; text-align: right; }
    .edit-grid .col-input { padding-left: 15px; }
</style>

<div class="card shadow-sm border-0 mb-4">
    <div class="card-header bg-primary text-white">
        <i class="fas fa-filter me-2"></i> Filter Pencarian
    </div>
    <div class="card-body">
        <form method="GET" action="/rekapitulasi">
            <div class="row g-3">
                <div class="col-md-2">
                    <label class="form-label fw-bold">Kecamatan</label>
                    {% if session['role'] == 'superadmin' %}
                    <select name="kecamatan" class="form-select" onchange="this.form.submit()">
                        <option value="">-- Semua --</option>
                        {% for k in DATA_WILAYAH.keys() %}
                        <option value="{{ k }}" {% if k == kec_filter %}selected{% endif %}>{{ k }}</option>
                        {% endfor %}
                    </select>
                    {% else %}
                    <input type="text" class="form-control" value="{{ session['kecamatan'] }}" disabled>
                    <input type="hidden" name="kecamatan" value="{{ session['kecamatan'] }}">
                    {% endif %}
                </div>
                <div class="col-md-2">
                    <label class="form-label fw-bold">Desa</label>
                    <select name="desa" class="form-select" onchange="this.form.submit()">
                        <option value="">-- Semua --</option>
                        {% for d in DATA_WILAYAH.get(kec_filter or session['kecamatan'], {}).keys() %}
                        <option value="{{ d }}" {% if d == desa_filter %}selected{% endif %}>{{ d }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label fw-bold">Posyandu</label>
                    <select name="posyandu" class="form-select" onchange="this.form.submit()">
                        <option value="">-- Semua --</option>
                        {% for p in list_posyandu %}
                        <option value="{{ p }}" {% if p == posyandu_filter %}selected{% endif %}>{{ p }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label fw-bold">Bulan</label>
                    <select name="bulan" class="form-select" onchange="this.form.submit()">
                        <option value="">-- Semua --</option>
                        {% for b in list_bulan %}
                        <option value="{{ b }}" {% if b == bulan_filter %}selected{% endif %}>{{ b }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label fw-bold">Tahun</label>
                    <select name="tahun" class="form-select" onchange="this.form.submit()">
                        <option value="">-- Semua --</option>
                        {% for t in list_tahun %}
                        <option value="{{ t }}" {% if t == tahun_filter %}selected{% endif %}>{{ t }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label fw-bold">Cari NIK / Nama</label>
                    <input type="text" name="q" class="form-control" value="{{ search_query }}" placeholder="NIK atau Nama...">
                </div>
            </div>
            <div class="row mt-3">
                <div class="col-12 text-end">
                    <button type="submit" class="btn btn-primary btn-sm"><i class="fas fa-search me-1"></i> Terapkan Filter</button>
                    <a href="/rekapitulasi" class="btn btn-secondary btn-sm"><i class="fas fa-times me-1"></i> Reset</a>
                    <button type="button" class="btn btn-success btn-sm" onclick="exportFullExcel()"><i class="fas fa-file-excel me-1"></i>  Excel</button>
                </div>
            </div>
        </form>
    </div>
</div>

<div class="table-responsive">
    <table class="table table-bordered table-hover table-custom" id="tabelRekap">
        <thead class="table-primary">
            <tr>
                <th>No</th>
                <th>NIK Sasaran</th>
                <th>Nama Sasaran</th>
                <th>Kategori</th>
                <th>Periode</th>
                <th>Desa</th>
                <th>Posyandu</th>
                <th width="200">Aksi</th>
            </tr>
        </thead>
        <tbody>
            {% for row in data %}
            <tr>
                <td>{{ loop.index }}</td>
                <td class="fw-bold">{{ row[9] }}</td>
                <td class="text-start">{{ row[7] }}</td>
                <td>
                    {% if row[6] in ['Balita Non-PAUD','Baduta'] %}
                    <span class="badge bg-info text-dark">{{ row[6] }}</span>
                    {% elif row[6] == 'Ibu Hamil' %}
                    <span class="badge bg-warning text-dark">{{ row[6] }}</span>
                    {% else %}
                    <span class="badge bg-primary">{{ row[6] }}</span>
                    {% endif %}
                </td>
                <td>{{ row[1] }} {{ row[2] }}</td>
                <td>{{ row[12] }}</td>
                <td>{{ row[14] }}</td>
                <td>
                    <button class="btn btn-sm btn-info" data-bs-toggle="modal" data-bs-target="#detailModal{{ row[0] }}"><i class="fas fa-search"></i> Lihat</button>
                    {% if session['role'] != 'dapur' %}
                    <button class="btn btn-sm btn-warning" data-bs-toggle="modal" data-bs-target="#editModal{{ row[0] }}"><i class="fas fa-edit"></i> Edit</button>
                    <button class="btn btn-sm btn-danger" onclick="confirmDelete('/hapus_sasaran/{{ row[0] }}')"><i class="fas fa-trash"></i> Hapus</button>
                    {% endif %}
                </td>
            </tr>

            <div class="modal fade" id="detailModal{{ row[0] }}" tabindex="-1">
                <div class="modal-dialog modal-lg modal-dialog-scrollable">
                    <div class="modal-content">
                        <div class="modal-header bg-info text-white">
                            <h5 class="modal-title"><i class="fas fa-search me-2"></i> Detail Sasaran: {{ row[7] }}</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                        </div>
                        <div class="modal-body detail-grid">
                            <div class="row mb-2"><div class="col-md-6 col-label">Bulan Pelaporan:</div><div class="col-md-6">{{ row[1] }}</div></div>
                            <div class="row mb-2"><div class="col-md-6 col-label">Tahun Pelaporan:</div><div class="col-md-6">{{ row[2] }}</div></div>
                            <div class="row mb-2"><div class="col-md-6 col-label">Nama Dapur SPPG:</div><div class="col-md-6">{{ row[3] }}</div></div>
                            <div class="row mb-2"><div class="col-md-6 col-label">Desa Dapur:</div><div class="col-md-6">{{ row[4] }}</div></div>
                            <div class="row mb-2"><div class="col-md-6 col-label">Alamat Dapur:</div><div class="col-md-6">{{ row[5] }}</div></div>
                            <hr>
                            <div class="row mb-2"><div class="col-md-6 col-label">Kategori Sasaran:</div><div class="col-md-6">{{ row[6] }}</div></div>
                            <div class="row mb-2"><div class="col-md-6 col-label">Nama Ibu/Sasaran:</div><div class="col-md-6">{{ row[7] }}</div></div>
                            <div class="row mb-2"><div class="col-md-6 col-label">Nama Ayah/Suami:</div><div class="col-md-6">{{ row[8] }}</div></div>
                            <div class="row mb-2"><div class="col-md-6 col-label">NIK Sasaran:</div><div class="col-md-6">{{ row[9] }}</div></div>
                            <div class="row mb-2"><div class="col-md-6 col-label">No. KK Sasaran:</div><div class="col-md-6">{{ row[10] }}</div></div>
                            <div class="row mb-2"><div class="col-md-6 col-label">Usia Sasaran:</div><div class="col-md-6">{{ row[15] }}</div></div>
                            <div class="row mb-2"><div class="col-md-6 col-label">Tempat Lahir (Ibu):</div><div class="col-md-6">{{ row[24] }}</div></div>
                            <div class="row mb-2"><div class="col-md-6 col-label">Tanggal Lahir (Ibu):</div><div class="col-md-6">{{ row[25] }}</div></div>
                            {% if row[6] != 'Ibu Hamil' and row[26] %}
                            <hr>
                            <div class="row mb-2"><div class="col-md-6 col-label">NIK Anak:</div><div class="col-md-6">{{ row[30] }}</div></div>
                            <div class="row mb-2"><div class="col-md-6 col-label">Nama Anak:</div><div class="col-md-6">{{ row[26] }}</div></div>
                            <div class="row mb-2"><div class="col-md-6 col-label">Tempat Lahir Anak:</div><div class="col-md-6">{{ row[27] }}</div></div>
                            <div class="row mb-2"><div class="col-md-6 col-label">Tanggal Lahir Anak:</div><div class="col-md-6">{{ row[28] }}</div></div>
                            <div class="row mb-2"><div class="col-md-6 col-label">Usia Anak:</div><div class="col-md-6">{{ row[29] }}</div></div>
                            {% endif %}
                            <hr>
                            <div class="row mb-2"><div class="col-md-6 col-label">Desa Sasaran:</div><div class="col-md-6">{{ row[12] }}</div></div>
                            <div class="row mb-2"><div class="col-md-6 col-label">Wilayah Posyandu:</div><div class="col-md-6">{{ row[14] }}</div></div>
                            <div class="row mb-2"><div class="col-md-6 col-label">Alamat Lengkap Sasaran:</div><div class="col-md-6">{{ row[13] }}</div></div>
                            <div class="row mb-2"><div class="col-md-6 col-label">Hamil Ke-:</div><div class="col-md-6">{{ row[16] }}</div></div>
                            <div class="row mb-2"><div class="col-md-6 col-label">Usia Kehamilan (Minggu):</div><div class="col-md-6">{{ row[17] }}</div></div>
                            <div class="row mb-2"><div class="col-md-6 col-label">Anak Ke-:</div><div class="col-md-6">{{ row[18] }}</div></div>
                            <div class="row mb-2"><div class="col-md-6 col-label">Berat Badan (Kg):</div><div class="col-md-6">{{ row[19] }}</div></div>
                            <div class="row mb-2"><div class="col-md-6 col-label">Tinggi Badan (Cm):</div><div class="col-md-6">{{ row[20] }}</div></div>
                            <div class="row mb-2"><div class="col-md-6 col-label">Jenis Kontrasepsi:</div><div class="col-md-6">{{ row[21] }}</div></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal fade" id="editModal{{ row[0] }}" tabindex="-1">
                <div class="modal-dialog modal-xl modal-dialog-scrollable">
                    <div class="modal-content">
                        <form action="/update_sasaran/{{ row[0] }}" method="POST">
                            <div class="modal-header bg-warning">
                                <h5 class="modal-title"><i class="fas fa-edit me-2"></i> Edit Data Sasaran: {{ row[7] }}</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                            </div>
                            <div class="modal-body edit-grid">
                                <div class="form-section">1. Data Pelaporan & Dapur SPPG</div>
                                <div class="row mb-2">
                                    <div class="col-md-4 col-label">Bulan Pelaporan</div>
                                    <div class="col-md-8 col-input"><select name="bulan_lapor" class="form-control" required>{% for b in list_bulan %}<option value="{{ b }}" {% if row[1]==b %}selected{% endif %}>{{ b }}</option>{% endfor %}</select></div>
                                </div>
                                <div class="row mb-2">
                                    <div class="col-md-4 col-label">Tahun Pelaporan</div>
                                    <div class="col-md-8 col-input"><select name="tahun_lapor" class="form-control" required>{% for t in list_tahun %}<option value="{{ t }}" {% if row[2]==t %}selected{% endif %}>{{ t }}</option>{% endfor %}</select></div>
                                </div>
                                <div class="row mb-2">
                                    <div class="col-md-4 col-label">Nama Dapur SPPG</div>
                                    <div class="col-md-8 col-input"><input type="text" name="nama_dapur" value="{{ row[3] }}" class="form-control" required></div>
                                </div>
                                <div class="row mb-2">
                                    <div class="col-md-4 col-label">Alamat Dapur</div>
                                    <div class="col-md-8 col-input"><input type="text" name="alamat_dapur" value="{{ row[5] }}" class="form-control" required></div>
                                </div>
                                <div class="row mb-2">
                                    <div class="col-md-4 col-label">Desa Dapur (Desa Sasaran Wilayah)</div>
                                    <div class="col-md-8 col-input"><input type="text" name="desa_sasaran_wilayah" value="{{ row[4] }}" class="form-control" required></div>
                                </div>
                                <div class="row mb-2">
                                    <div class="col-md-4 col-label">Desa Sasaran (Tempat Tinggal)</div>
                                    <div class="col-md-8 col-input"><input type="text" name="desa_sasaran" value="{{ row[12] }}" class="form-control" required></div>
                                </div>

                                <div class="form-section">2. Identitas Sasaran (Penerima Manfaat)</div>
                                <div class="row mb-2">
                                    <div class="col-md-4 col-label">Kategori Sasaran</div>
                                    <div class="col-md-8 col-input"><select name="kategori_Sasaran" class="form-control" required>{% for kat in ['Balita Non-PAUD','Baduta','Ibu Hamil','Ibu Menyusui'] %}<option value="{{ kat }}" {% if row[6]==kat %}selected{% endif %}>{{ kat }}</option>{% endfor %}</select></div>
                                </div>
                                <div class="row mb-2">
                                    <div class="col-md-4 col-label">Nama Ibu/Sasaran</div>
                                    <div class="col-md-8 col-input"><input type="text" name="nama_Sasaran" value="{{ row[7] }}" class="form-control" required></div>
                                </div>
                                <div class="row mb-2">
                                    <div class="col-md-4 col-label">Nama Ayah / Suami</div>
                                    <div class="col-md-8 col-input"><input type="text" name="nama_ayah" value="{{ row[8] }}" class="form-control"></div>
                                </div>
                                <div class="row mb-2">
                                    <div class="col-md-4 col-label">NIK Sasaran (16 Digit)</div>
                                    <div class="col-md-8 col-input"><input type="text" name="nik_Sasaran" value="{{ row[9] }}" class="form-control" maxlength="16"></div>
                                </div>
                                <div class="row mb-2">
                                    <div class="col-md-4 col-label">No. KK Sasaran (16 Digit)</div>
                                    <div class="col-md-8 col-input"><input type="text" name="kk_Sasaran" value="{{ row[10] }}" class="form-control" maxlength="16"></div>
                                </div>
                                <div class="row mb-2">
                                    <div class="col-md-4 col-label">Usia Sasaran (Otomatis)</div>
                                    <div class="col-md-8 col-input"><input type="text" name="usia_sasaran" id="usia_sasaran_edit_{{ row[0] }}" value="{{ row[15] }}" class="form-control" readonly></div>
                                </div>
                                <div class="row mb-2">
                                    <div class="col-md-4 col-label">Tempat Lahir (Ibu)</div>
                                    <div class="col-md-8 col-input"><input type="text" name="tempat_lahir" value="{{ row[24] }}" class="form-control"></div>
                                </div>
                                <div class="row mb-2">
                                    <div class="col-md-4 col-label">Tanggal Lahir (Ibu)</div>
                                    <div class="col-md-8 col-input"><input type="date" name="tanggal_lahir" id="tgl_lahir_edit_{{ row[0] }}" value="{{ row[25] }}" class="form-control" required onchange="calculateAgeUniversal(this.value, 'usia_sasaran_edit_{{ row[0] }}')"></div>
                                </div>

                                <div id="edit_anak_section_{{ row[0] }}" style="display: {% if row[6] != 'Ibu Hamil' %}block{% else %}none{% endif %};">
                                    <div class="form-section bg-light border-info">3. Identitas Anak</div>
                                    <div class="row mb-2">
                                        <div class="col-md-4 col-label">NIK Anak (Jika Ada)</div>
                                        <div class="col-md-8 col-input"><input type="text" name="nik_anak" value="{{ row[30] }}" class="form-control" maxlength="16"></div>
                                    </div>
                                    <div class="row mb-2">
                                        <div class="col-md-4 col-label">Nama Anak</div>
                                        <div class="col-md-8 col-input"><input type="text" name="nama_anak" value="{{ row[26] }}" class="form-control"></div>
                                    </div>
                                    <div class="row mb-2">
                                        <div class="col-md-4 col-label">Tempat Lahir Anak</div>
                                        <div class="col-md-8 col-input"><input type="text" name="tempat_lahir_anak" value="{{ row[27] }}" class="form-control"></div>
                                    </div>
                                    <div class="row mb-2">
                                        <div class="col-md-4 col-label">Tanggal Lahir Anak</div>
                                        <div class="col-md-8 col-input"><input type="date" name="tanggal_lahir_anak" id="tgl_lahir_anak_edit_{{ row[0] }}" value="{{ row[28] }}" class="form-control" onchange="calculateAgeUniversal(this.value, 'usia_anak_edit_{{ row[0] }}')"></div>
                                    </div>
                                    <div class="row mb-2">
                                        <div class="col-md-4 col-label">Usia Anak (Otomatis)</div>
                                        <div class="col-md-8 col-input"><input type="text" name="usia_anak" id="usia_anak_edit_{{ row[0] }}" value="{{ row[29] }}" class="form-control" readonly></div>
                                    </div>
                                </div>

                                <div class="form-section">4. Alamat & Posyandu Sasaran</div>
                                <div class="row mb-2">
                                    <div class="col-md-4 col-label">Wilayah Posyandu</div>
                                    <div class="col-md-8 col-input"><input type="text" name="wilayah_posyandu" value="{{ row[14] }}" class="form-control" required></div>
                                </div>
                                <div class="row mb-2">
                                    <div class="col-md-4 col-label">Alamat Lengkap Sasaran</div>
                                    <div class="col-md-8 col-input"><input type="text" name="alamat_sasaran" value="{{ row[13] }}" class="form-control" required></div>
                                </div>

                                <div class="form-section">5. Data Klinis & Pengukuran</div>
                                <div class="row mb-2">
                                    <div class="col-md-4 col-label">Hamil Ke-</div>
                                    <div class="col-md-8 col-input"><input type="number" name="hamil_ke" value="{{ row[16] }}" class="form-control"></div>
                                </div>
                                <div class="row mb-2">
                                    <div class="col-md-4 col-label">Usia Kehamilan (Minggu)</div>
                                    <div class="col-md-8 col-input"><input type="number" name="usia_kehamilan" value="{{ row[17] }}" class="form-control"></div>
                                </div>
                                <div class="row mb-2">
                                    <div class="col-md-4 col-label">Anak Ke-</div>
                                    <div class="col-md-8 col-input"><input type="number" name="anak_ke" value="{{ row[18] }}" class="form-control"></div>
                                </div>
                                <div class="row mb-2">
                                    <div class="col-md-4 col-label">Jenis Kontrasepsi</div>
                                    <div class="col-md-8 col-input">
                                        <select name="jenis_kontrasepsi" class="form-control">
                                            <option value="">-- Pilih --</option>
                                            <option value="IUD" {% if row[21]=='IUD' %}selected{% endif %}>IUD</option>
                                            <option value="Pil" {% if row[21]=='Pil' %}selected{% endif %}>Pil</option>
                                            <option value="Suntik" {% if row[21]=='Suntik' %}selected{% endif %}>Suntik</option>
                                            <option value="Implan" {% if row[21]=='Implan' %}selected{% endif %}>Implan</option>
                                            <option value="Kondom" {% if row[21]=='Kondom' %}selected{% endif %}>Kondom</option>
                                            <option value="MOW/MOP" {% if row[21]=='MOW/MOP' %}selected{% endif %}>MOW/MOP</option>
                                            <option value="Tidak Pakai" {% if row[21]=='Tidak Pakai' %}selected{% endif %}>Tidak Pakai</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="row mb-2">
                                    <div class="col-md-4 col-label">Berat Badan (Kg)</div>
                                    <div class="col-md-8 col-input"><input type="number" step="0.01" name="berat_badan" value="{{ row[19] }}" class="form-control" required></div>
                                </div>
                                <div class="row mb-2">
                                    <div class="col-md-4 col-label">Tinggi Badan (Cm)</div>
                                    <div class="col-md-8 col-input"><input type="number" step="0.01" name="tinggi_badan" value="{{ row[20] }}" class="form-control" required></div>
                                </div>
                                <input type="hidden" name="kecamatan_sasaran" value="{{ row[23] }}">
                                <input type="hidden" name="desa_kelurahan" value="{{ row[4] }}">
                            </div>
                            <div class="modal-footer">
                                <button type="submit" class="btn btn-primary btn-sm"><i class="fas fa-save"></i> Simpan Perubahan</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            {% endfor %}
        </tbody>
    </table>
</div>

<script>
    const fullData = {{ data | tojson | safe }};

    function exportFullExcel() {
        // Menangkap filter yang sedang aktif
        let filterKec = "{{ kec_filter if kec_filter else (session['kecamatan'] if session['kecamatan'] != 'SEMUA' else 'Semua Kecamatan') }}";
        let filterDesa = "{{ desa_filter if desa_filter else 'Semua Desa' }}";
        let filterPosyandu = "{{ posyandu_filter if posyandu_filter else 'Semua Posyandu' }}";
        let filterBulan = "{{ bulan_filter if bulan_filter else 'Semua Bulan' }}";
        let filterTahun = "{{ tahun_filter if tahun_filter else 'Semua Tahun' }}";

        let html = `<!DOCTYPE html>
        <html>
        <head>
            <meta charset="UTF-8">
            <title>Data Sasaran Lengkap</title>
            <style>
                table { border-collapse: collapse; width: 100%; font-family: Arial, sans-serif; }
                th { background-color: #0b3d91; color: white; border: 1px solid #000; padding: 8px; text-align: center; vertical-align: middle; font-size: 12px; }
                td { border: 1px solid #000; padding: 6px; text-align: center; vertical-align: middle; font-size: 11px; }
                .title { font-size: 16pt; font-weight: bold; text-align: center; margin-bottom: 5px; }
                .subtitle { font-size: 11pt; text-align: center; margin-bottom: 15px; }
            </style>
        </head>
        <body>
            <div class="title">DATA SASARAN 1000 HPK DAN MBG B3 (LENGKAP)</div>
            <div class="subtitle">
                Periode: <b>${filterBulan} ${filterTahun}</b> | Kecamatan: <b>${filterKec}</b> | Desa: <b>${filterDesa}</b> | Posyandu: <b>${filterPosyandu}</b>
            </div>
            <table>
                <thead>
                    <tr>
                        <th>No</th>
                        <th>Bulan</th><th>Tahun</th><th>Nama Dapur</th><th>Desa Dapur</th><th>Alamat Dapur</th>
                        <th>Kategori</th><th>Nama Ibu</th><th>Nama Ayah</th><th>NIK Ibu</th><th>KK</th>
                        <th>Tempat Lahir Ibu</th><th>Tanggal Lahir Ibu</th><th>Usia Ibu</th>
                        <th>Nama Anak</th><th>NIK Anak</th><th>Tempat Lahir Anak</th><th>Tanggal Lahir Anak</th><th>Usia Anak</th>
                        <th>Desa Sasaran</th><th>Alamat Sasaran</th><th>Wilayah Posyandu</th>
                        <th>Hamil Ke-</th><th>Usia Kehamilan</th><th>Anak Ke-</th>
                        <th>Berat Badan (kg)</th><th>Tinggi Badan (cm)</th><th>Jenis Kontrasepsi</th>
                        <th>Kecamatan</th><th>Input Oleh</th>
                    </tr>
                </thead>
                <tbody>`;
        
        fullData.forEach((row, idx) => {
            let no = idx+1;
            let bulan = row[1] || '';
            let tahun = row[2] || '';
            let nama_dapur = row[3] || '';
            let desa_dapur = row[4] || '';
            let alamat_dapur = row[5] || '';
            let kategori = row[6] || '';
            let nama_ibu = row[7] || '';
            let nama_ayah = row[8] || '';
            let nik_ibu = row[9] || '';
            let kk = row[10] || '';
            
            let tempat_lahir_ibu = row[24] || '';
            let tgl_lahir_ibu = row[25] || '';
            let usia_ibu = row[15] || '';
            
            let nama_anak = row[26] || '';
            let nik_anak = row[30] || '';
            let tempat_lahir_anak = row[27] || '';
            let tgl_lahir_anak = row[28] || '';
            let usia_anak = row[29] || '';
            
            let desa_sasaran = row[12] || '';
            let alamat_sasaran = row[13] || '';
            let posyandu = row[14] || '';
            let hamil_ke = row[16] || 0;
            let usia_kehamilan = row[17] || 0;
            let anak_ke = row[18] || 0;
            let berat = row[19] || 0;
            let tinggi = row[20] || 0;
            let kontrasepsi = row[21] || '';
            
            let kecamatan = row[23] || '';
            let input_oleh = row[22] || '';

            // Kolom dengan teks/nama/alamat diberi gaya text-align: left agar lebih rapi saat dibaca
            html += `<tr>
                        <td>${no}</td>
                        <td>${bulan}</td><td>${tahun}</td>
                        <td style="text-align: left;">${nama_dapur}</td>
                        <td>${desa_dapur}</td>
                        <td style="text-align: left;">${alamat_dapur}</td>
                        <td>${kategori}</td>
                        <td style="text-align: left;">${nama_ibu}</td>
                        <td style="text-align: left;">${nama_ayah}</td>
                        <td style="mso-number-format:'\\@';">${nik_ibu}</td>
                        <td style="mso-number-format:'\\@';">${kk}</td>
                        <td style="text-align: left;">${tempat_lahir_ibu}</td>
                        <td>${tgl_lahir_ibu}</td><td>${usia_ibu}</td>
                        <td style="text-align: left;">${nama_anak}</td>
                        <td style="mso-number-format:'\\@';">${nik_anak}</td>
                        <td style="text-align: left;">${tempat_lahir_anak}</td>
                        <td>${tgl_lahir_anak}</td><td>${usia_anak}</td>
                        <td>${desa_sasaran}</td>
                        <td style="text-align: left;">${alamat_sasaran}</td>
                        <td style="text-align: left;">${posyandu}</td>
                        <td>${hamil_ke}</td><td>${usia_kehamilan}</td><td>${anak_ke}</td>
                        <td>${berat}</td><td>${tinggi}</td><td>${kontrasepsi}</td>
                        <td>${kecamatan}</td><td>${input_oleh}</td>
                    </tr>`;
        });
        html += `</tbody></table></body></html>`;
        
        const blob = new Blob([html], { type: "application/vnd.ms-excel" });
        const link = document.createElement("a");
        link.href = URL.createObjectURL(blob);
        link.download = `Data_Sasaran_Lengkap_${filterKec}.xls`;
        link.click();
        URL.revokeObjectURL(link.href);
    }

    function calculateAgeUniversal(tglInputVal, ageOutputId) {
        const dob = new Date(tglInputVal);
        if(!isNaN(dob.getTime())) {
            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;
            const usiaInput = document.getElementById(ageOutputId);
            if(usiaInput) usiaInput.value = (years <= 0) ? months + " Bulan" : (months === 0 ? years + " Tahun" : years + " Tahun " + months + " Bulan");
        }
    }
</script>
{% endblock %}