{% extends "base.html" %}
{% block title %}Rekap Laporan Kader{% endblock %}

{% block sidebar %}
    {% if session['role'] == 'kader' %}
        <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"><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>
    {% elif session['role'] == 'dapur' %}
        <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"><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>
    {% elif session['role'] == 'plkb' %}
        <a href="/plkb" class="sidebar-item"><i class="fas fa-home me-2"></i> Beranda</a>
        <div class="sidebar-heading">MANAJEMEN DATA</div>
        <a href="/rekapitulasi" class="sidebar-item"><i class="fas fa-list me-2"></i> Sasaran 1000 HPK</a>
        <a href="/arsip_laporan" class="sidebar-item"><i class="fas fa-file-excel me-2"></i> Rekap Laporan Dapur</a>
        <a href="/rekap_laporan_kader" class="sidebar-item"><i class="fas fa-users me-2"></i> Rekap Laporan Kader</a>
    {% elif session['role'] == 'superadmin' %}
        <div class="text-center py-3 border-bottom">
            <img src="{% if session.get('foto_profil') %}/static/uploads/{{ session['foto_profil'] }}{% else %}https://ui-avatars.com/api/?name={{ session['nama_lengkap'] }}&background=fdbb2d&color=1e293b&rounded=true&size=60&bold=true{% endif %}" width="60" height="60" class="rounded-circle mb-2">
            <h6 class="text-dark fw-bold">{{ session['nama_lengkap'] }}</h6>
            <small class="text-warning bg-dark px-2 rounded">Superadmin</small>
        </div>
        <a href="/superadmin" class="sidebar-item"><i class="fas fa-desktop me-2"></i> Kontrol Panel</a>
        <div class="sidebar-heading">MASTER DATA</div>
        <a href="/manajemen_akun" class="sidebar-item"><i class="fas fa-users-cog me-2"></i> Manajemen Akun</a>
        <a href="/registrasi_dapur" class="sidebar-item"><i class="fas fa-store-alt me-2"></i> Registrasi Dapur</a>
        <div class="sidebar-heading">MONITORING</div>
        <a href="/rekapitulasi" class="sidebar-item"><i class="fas fa-database me-2"></i> Semua Data Sasaran</a>
        <a href="/arsip_laporan" class="sidebar-item"><i class="fas fa-archive me-2"></i> Arsip Laporan Dapur</a>
        <a href="/rekap_laporan_kader" class="sidebar-item"><i class="fas fa-users me-2"></i> Rekap Laporan Kader</a>
    {% endif %}
{% endblock %}

{% block content %}
<div class="card mb-4">
    <div class="card-header bg-primary text-white">
        <i class="fas fa-filter me-2"></i> Filter Rekapitulasi Laporan Kader
    </div>
    <div class="card-body">
        <form method="GET" action="/rekap_laporan_kader">
            <div class="row g-3">
                <div class="col-md-3">
                    <label class="form-label fw-bold">Kecamatan</label>
                    {% if session['role'] == 'superadmin' %}
                    <select name="kecamatan" class="form-select">
                        <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-3">
                    <label class="form-label fw-bold">Desa</label>
                    <select name="desa" class="form-select">
                        <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">Bulan</label>
                    <select name="bulan" class="form-select">
                        <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">
                        <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 d-flex align-items-end">
                    <button type="submit" class="btn btn-primary w-100">Filter</button>
                </div>
            </div>
        </form>
    </div>
</div>

<div class="d-flex justify-content-between mb-3">
    <h5><i class="fas fa-users me-2"></i> Rekapitulasi Sasaran per Posyandu</h5>
    <div>
        {% if kec_filter or desa_filter or bulan_filter or tahun_filter %}
        <a href="/rekap_laporan_kader" class="btn btn-sm btn-danger me-2">Reset</a>
        {% endif %}
        <button class="btn btn-sm btn-success" onclick="cetakExcel()"><i class="fas fa-file-excel"></i> Excel</button>
    </div>
</div>

<div class="table-responsive">
    <table class="table table-bordered table-hover table-custom" id="tabelRekapKader">
        <thead class="table-light">
            <tr>
                <th>No</th>
                <th>Nama Posyandu</th>
                <th>Balita Non-PAUD</th>
                <th>Baduta</th>
                <th>Ibu Hamil</th>
                <th>Ibu Menyusui</th>
                <th>Total Sasaran</th>
                <th>Periode</th>
            </tr>
        </thead>
        <tbody>
            {% for row in data %}
            <tr>
                <td>{{ loop.index }}</td>
                <td class="text-start fw-bold">{{ row[0] }}</td>
                <td>{{ row[1] }}</td>
                <td>{{ row[2] }}</td>
                <td>{{ row[3] }}</td>
                <td>{{ row[4] }}</td>
                <td><span class="badge bg-success">{{ row[5] }}</span></td>
                <td>{{ row[6] }} {{ row[7] }}</td>
            </tr>
            {% else %}
            <tr><td colspan="8" class="text-center">Belum ada data</td></tr>
            {% endfor %}
        </tbody>
    </table>
</div>

<script>
function cetakExcel() {
    // Menangkap filter yang sedang aktif dari Jinja ke dalam variabel JavaScript
    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 filterBulan = "{{ bulan_filter if bulan_filter else 'Semua Bulan' }}";
    let filterTahun = "{{ tahun_filter if tahun_filter else 'Semua Tahun' }}";

    // Membangun struktur HTML untuk file Excel
    let html = `<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <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">REKAPITULASI LAPORAN KADER</div>
        <div class="subtitle">
            Kecamatan: <b>${filterKec}</b> | Desa: <b>${filterDesa}</b><br>
            Periode: <b>${filterBulan} ${filterTahun}</b>
        </div>
        <table>
            <thead>
                <tr>
                    <th>No</th>
                    <th>Nama Posyandu</th>
                    <th>Balita Non-PAUD</th>
                    <th>Baduta</th>
                    <th>Ibu Hamil</th>
                    <th>Ibu Menyusui</th>
                    <th>Total Sasaran</th>
                    <th>Periode</th>
                </tr>
            </thead>
            <tbody>`;

    document.querySelectorAll('#tabelRekapKader tbody tr').forEach((row, i) => {
        let cols = row.querySelectorAll('td');
        // Hanya memproses baris yang memiliki data valid (bukan baris "Belum ada data")
        if(cols.length >= 7) {
            html += `<tr>
                <td>${i+1}</td>
                <td style="text-align: left;">${cols[1].innerText}</td>
                <td>${cols[2].innerText}</td>
                <td>${cols[3].innerText}</td>
                <td>${cols[4].innerText}</td>
                <td>${cols[5].innerText}</td>
                <td>${cols[6].innerText}</td>
                <td>${cols[7].innerText}</td>
            </tr>`;
        }
    });

    html += `</tbody></table></body></html>`;

    // Proses download file
    const blob = new Blob([html], {type: 'application/vnd.ms-excel'});
    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = `Rekap_Kader_${filterKec}.xls`;
    link.click();
    URL.revokeObjectURL(link.href);
}
</script>
{% endblock %}