{% extends "base.html" %}
{% block title %}Registrasi Dapur SPPG{% endblock %}

{% block content %}
<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 Daftar Dapur
    </div>
    <div class="card-body">
        <form method="GET" action="/registrasi_dapur">
            <div class="row g-3">
                <div class="col-md-5">
                    <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 Kecamatan --</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-5">
                    <label class="form-label fw-bold">Desa</label>
                    <select name="desa" class="form-select" onchange="this.form.submit()">
                        <option value="">-- Semua Desa --</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 d-flex align-items-end">
                    <button type="button" class="btn btn-success w-100" onclick="cetakExcelDapur()">
                        <i class="fas fa-file-excel me-1"></i> Cetak
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

<div class="d-flex justify-content-between mb-3">
    <div>
        <i class="fas fa-store-alt fa-2x text-success me-2"></i>
        <span class="fs-5 fw-bold">Daftar Dapur SPPG Terdaftar</span>
        <p class="text-muted small">Kelola unit dapur sehat atasi stunting</p>
    </div>
    <button class="btn btn-success h-50" data-bs-toggle="modal" data-bs-target="#modalTambahDapur">
        <i class="fas fa-plus me-1"></i> Tambah Dapur
    </button>
</div>

<div class="table-responsive">
    <table class="table table-bordered table-hover table-custom" id="tabelDapur">
        <thead class="table-light">
            <tr>
                <th>No</th>
                <th>Nama Dapur</th>
                <th>Kecamatan</th>
                <th>Desa</th>
                <th>Alamat</th>
                <th>Penanggung Jawab</th>
                <th>Aksi</th>
            </tr>
        </thead>
        <tbody>
            {% for d in data %}
            <tr>
                <td>{{ loop.index }}</td>
                <td class="fw-bold text-start">{{ d[1] }}</td>
                <td>{{ d[5] }}</td>
                <td>{{ d[2] }}</td>
                <td class="text-start">{{ d[3] }}</td>
                <td>{{ d[4] }}</td>
                <td><a href="javascript:void(0)" onclick="confirmDelete('/hapus_dapur/{{ d[0] }}')" class="btn btn-sm btn-danger"><i class="fas fa-trash"></i></a></td>
            </tr>
            {% else %}
            <tr><td colspan="7" class="text-center">Belum ada dapur terdaftar</td></tr>
            {% endfor %}
        </tbody>
    </table>
</div>

<div class="modal fade" id="modalTambahDapur" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <form action="/tambah_dapur" method="POST">
                <div class="modal-header bg-success text-white">
                    <h5 class="modal-title">Registrasi Dapur SPPG Baru</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-2">
                        <label class="form-label">Kecamatan</label>
                        <select name="kecamatan" id="kecamatan_dapur_reg" class="form-select" required 
                                onchange="updateDesaDropdown('kecamatan_dapur_reg', 'desa_dapur_reg')">
                            <option value="">-- Pilih Kecamatan --</option>
                            {% for k in DATA_WILAYAH.keys() %}
                            <option value="{{ k }}">{{ k }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="mb-2">
                        <label class="form-label">Desa / Kelurahan</label>
                        <select name="desa_kelurahan" id="desa_dapur_reg" class="form-select" required>
                            <option value="">-- Pilih Kecamatan dulu --</option>
                        </select>
                    </div>
                    <div class="mb-2">
                        <label class="form-label">Nama Dapur SPPG</label>
                        <input type="text" name="nama_dapur" class="form-control" required>
                    </div>
                    <div class="mb-2">
                        <label class="form-label">Alamat Lengkap</label>
                        <textarea name="alamat_lengkap" class="form-control" rows="2" required></textarea>
                    </div>
                    <div class="mb-2">
                        <label class="form-label">Penanggung Jawab (Kepala Dapur)</label>
                        <input type="text" name="penanggung_jawab" class="form-control" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-success">Simpan</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
// Fungsi untuk mengekspor tabel HTML ke file Excel
function cetakExcelDapur() {
    // 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 html = `<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Daftar Dapur SPPG Terdaftar</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">DAFTAR DAPUR SPPG TERDAFTAR</div>
        <div class="subtitle">
            Kecamatan: <b>${filterKec}</b> | Desa: <b>${filterDesa}</b>
        </div>
        <table>
            <thead>
                <tr>
                    <th>No</th>
                    <th>Nama Dapur</th>
                    <th>Kecamatan</th>
                    <th>Desa</th>
                    <th>Alamat Lengkap</th>
                    <th>Penanggung Jawab</th>
                </tr>
            </thead>
            <tbody>`;
            
    // Ambil data langsung dari baris tabel di layar
    document.querySelectorAll('#tabelDapur tbody tr').forEach((row) => {
        let cols = row.querySelectorAll('td');
        // Pastikan baris tersebut bukan baris "Belum ada dapur terdaftar" (yang colspan-nya 7)
        if(cols.length > 1) {
            html += `<tr>
                        <td>${cols[0].innerText}</td>
                        <td style="text-align: left;">${cols[1].innerText}</td>
                        <td>${cols[2].innerText}</td>
                        <td>${cols[3].innerText}</td>
                        <td style="text-align: left;">${cols[4].innerText}</td>
                        <td style="text-align: left;">${cols[5].innerText}</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 = `Daftar_Dapur_SPPG_${filterKec}.xls`;
    link.click();
    URL.revokeObjectURL(link.href);
}
</script>
{% endblock %}