{% extends "base.html" %}
{% block title %}Arsip Laporan Dapur{% 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 Histori Laporan Dapur
    </div>
    <div class="card-body">
        <form method="GET" action="/arsip_laporan">
            <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" id="filter_kecamatan">
                        <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" id="filter_desa">
                        <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"><i class="fas fa-search"></i> Filter</button>
                </div>
            </div>
        </form>
    </div>
</div>

<div class="d-flex justify-content-between mb-3">
    <h5><i class="fas fa-list-alt me-2"></i> Data Laporan Dapur</h5>
    <div>
        {% if kec_filter or desa_filter or bulan_filter or tahun_filter %}
        <a href="/arsip_laporan" class="btn btn-sm btn-danger me-2">Reset</a>
        {% endif %}
        <button class="btn btn-sm btn-danger" onclick="cetakPDF()"><i class="fas fa-file-pdf"></i> PDF</button>
        <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="tabelLaporan">
        <thead class="table-light">
            <tr>
                <th>No</th>
                <th>Periode</th>
                <th>Nama Dapur</th>
                <th>Balita</th>
                <th>Baduta</th>
                <th>Ibu Hamil</th>
                <th>Ibu Menyusui</th>
                <th>Total</th>
                <th>Aksi</th>
            </tr>
        </thead>
        <tbody>
            {% for row in data %}
            <tr>
                <td>{{ loop.index }}</td>
                <td><strong>{{ row[1] }} {{ row[2] }}</strong></td>
                <td class="text-start">{{ row[3] }}</td>
                <td>{{ row[5] }}</td>
                <td>{{ row[6] }}</td>
                <td>{{ row[7] }}</td>
                <td>{{ row[8] }}</td>
                <td><span class="badge bg-success">{{ row[9] }}</span></td>
                <td><a href="javascript:void(0)" onclick="confirmDelete('/hapus_laporan/{{ row[0] }}')" class="btn btn-sm btn-danger"><i class="fas fa-trash"></i></a></td>
            </tr>
            {% else %}
            <tr><td colspan="9" class="text-center">Belum ada laporan</td></tr>
            {% endfor %}
        </tbody>
    </table>
</div>

<script>
function cetakPDF() {
    let printWindow = window.open('', '_blank');
    let html = '<html><head><title>Laporan Dapur</title><style>table,th,td{border:1px solid #000; border-collapse:collapse; padding:8px;}</style></head><body>';
    html += '<h3>Laporan Realisasi Dapur</h3>';
    html += document.getElementById('tabelLaporan').outerHTML;
    html += '</body></html>';
    printWindow.document.write(html);
    printWindow.document.close();
    printWindow.print();
}

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">ARSIP LAPORAN REALISASI DAPUR</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>Periode</th>
                    <th>Nama Dapur</th>
                    <th>Balita</th>
                    <th>Baduta</th>
                    <th>Ibu Hamil</th>
                    <th>Ibu Menyusui</th>
                    <th>Total</th>
                </tr>
            </thead>
            <tbody>`;

    document.querySelectorAll('#tabelLaporan tbody tr').forEach((row, i) => {
        let cols = row.querySelectorAll('td');
        // Hanya memproses baris yang memiliki data valid (bukan baris "Belum ada laporan")
        if(cols.length >= 8) {
            html += `<tr>
                <td>${i+1}</td>
                <td>${cols[1].innerText}</td>
                <td style="text-align: left;">${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 = `Laporan_Dapur_${filterKec}.xls`;
    link.click();
    URL.revokeObjectURL(link.href);
}
</script>
{% endblock %}