<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Data Pasien ISPA & PNEUMONIA</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <link href="https://cdn.datatables.net/1.13.4/css/dataTables.bootstrap4.min.css" rel="stylesheet">

    <style>
        /* ========================================================
           1. CSS CORE RESPONSIVE (ANTI HALAMAN JEBOL)
           ======================================================== */
        body,
        html {
            overflow-x: hidden !important;
            width: 100%;
            max-width: 100vw;
        }

        @media (max-width: 991.98px) {
            #layoutSidenav_content {
                padding-left: 0 !important;
                margin-left: 0 !important;
                width: 100% !important;
                max-width: 100vw !important;
            }

            .container-fluid {
                padding-left: 10px !important;
                padding-right: 10px !important;
            }
        }

        #layoutSidenav_content {
            width: 100%;
            max-width: 100vw;
            overflow-x: hidden !important;
        }

        /* Memaksa Tabel dan Card agar menyesuaikan layar */
        table,
        table.dataTable {
            min-width: 0 !important;
            width: 100% !important;
            border-collapse: collapse !important;
        }

        .card {
            width: 100% !important;
            max-width: 100% !important;
            min-width: 0 !important;
            overflow-x: hidden;
        }

        /* SCROLL HORIZONTAL CSS (STABIL DI ANDROID) */
        .table-responsive {
            width: 100% !important;
            max-width: 100% !important;
            overflow-x: auto !important;
            -webkit-overflow-scrolling: touch;
            border: none;
        }

        /* ========================================================
           2. STYLING KOTAK FILTER
           ======================================================== */
        .filter-wrapper {
            background-color: #f8f9fa;
            border-radius: 8px;
            padding: 15px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        }

        /* Responsive Grid Button */
        @media (max-width: 768px) {
            .filter-wrapper .form-group {
                margin-bottom: 12px;
            }

            .btn-group-custom {
                display: flex;
                flex-direction: column;
                gap: 10px;
                width: 100%;
                margin-top: 10px;
            }

            .btn-group-custom button {
                width: 100%;
                margin-left: 0 !important;
            }

            div.dataTables_wrapper div.dataTables_filter input {
                width: 140px !important;
            }
        }

        @media (min-width: 769px) {
            .btn-group-custom {
                display: flex;
                gap: 10px;
                align-items: flex-end;
                height: 100%;
                padding-bottom: 2px;
            }
        }
    </style>
</head>

<body class="bg-light">
    <div id="layoutSidenav_content">
        <main>
            <div class="container-fluid px-4">
                <h1 class="mt-4" id="judulPasien">Data Pasien ISPA & PNEUMONIA</h1>
                <ol class="breadcrumb mb-4">
                    <li class="breadcrumb-item"><a href="index.html">Dashboard</a></li>
                    <li class="breadcrumb-item active">Tampil Data Pasien ISPA & PNEUMONIA</li>
                </ol>
                <div class="card mb-4 border-0 shadow-sm">
                    <div class="card-body filter-wrapper">
                        <form id="filterForm">
                            <div class="row g-2 align-items-end">
                                <div class="col-12 col-md-3 col-lg-2">
                                    <label for="tanggal_awal" class="form-label text-muted small fw-bold mb-1">Tanggal Awal</label>
                                    <input type="date" id="tanggal_awal" name="tanggal_awal" class="form-control" value="<?= $tgl_awal ?>" required />
                                </div>
                                <div class="col-12 col-md-3 col-lg-2">
                                    <label for="tanggal_akhir" class="form-label text-muted small fw-bold mb-1">Tanggal Akhir</label>
                                    <input type="date" id="tanggal_akhir" name="tanggal_akhir" class="form-control" value="<?= $tgl_akhir ?>" required />
                                </div>
                                <div class="col-12 col-md-6 col-lg-8">
                                    <div class="btn-group-custom mt-3 mt-md-0">
                                        <button type="submit" class="btn btn-primary px-4 shadow-sm"><i class="fas fa-search me-1"></i>Tampilkan</button>
                                        <button type="button" id="downloadButton" class="btn btn-success px-4 shadow-sm" style="display: none;"><i class="fas fa-file-excel me-1"></i> Download Excel</button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

                <div class="card border-0 shadow-sm mb-5">
                    <div class="card-body p-2 p-md-3">
                        <div id="result">
                            <div id="loadingIcon" style="display: none;" class="py-5 text-center">
                                <div class="spinner-border text-primary" role="status"></div>
                                <p class="mt-2 text-muted small fw-bold">Mengambil Data...</p>
                            </div>
                            <div id="summaryContainer" style="display: none;" class="mb-4"></div>
                            <div id="tableContainer" style="display: none;"></div>
                        </div>
                    </div>
                </div>

            </div>
        </main>

        <footer class="py-4 bg-light mt-auto border-top">
            <div class="container-fluid px-4">
                <div class="d-flex align-items-center justify-content-between small text-muted">
                    <div>Copyright &copy; IT RSU Ananda Purwokerto 2024</div>
                </div>
            </div>
        </footer>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.4/js/dataTables.bootstrap4.min.js"></script>

    <script>
        $(document).ready(function() {
            $('#filterForm').on('submit', function(event) {
                event.preventDefault();
                $('#loadingIcon').show();
                $('#summaryContainer').hide();
                $('#tableContainer').hide();

                $.ajax({
                    // Sesuaikan URL controller AJAX ini jika nama fungsinya berbeda
                    url: '<?= base_url("pasienispa/tampildataispa") ?>',
                    type: 'POST',
                    data: {
                        TANGGAL_AWAL: $('#tanggal_awal').val(),
                        TANGGAL_AKHIR: $('#tanggal_akhir').val()
                    },
                    success: function(response) {
                        $('#loadingIcon').hide();

                        try {
                            const data = JSON.parse(response);

                            if (data && Array.isArray(data.response)) {
                                const list = data.response;
                                const agg = data.agg && (Array.isArray(data.agg) ? data.agg[0] : data.agg) || {};
                                const safeValue = value => (value !== undefined && value !== null && value !== '') ? value : '-';

                                if ($.fn.DataTable.isDataTable('#datatablesSimple')) {
                                    $('#datatablesSimple').DataTable().destroy();
                                }

                                const summaryHtml = `
                                <div class="row gx-2 gy-3" id="summaryCards">
                                    <div class="col-12 col-md-4">
                                        <div class="card border-left-primary shadow-sm h-100">
                                            <div class="card-body">
                                                <div class="text-muted small mb-1">Jumlah Sasaran Balita</div>
                                                <div class="h5 mb-0 font-weight-bold text-primary">${safeValue(agg.jml_sasaran_balita)}</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-4">
                                        <div class="card border-left-success shadow-sm h-100">
                                            <div class="card-body">
                                                <div class="text-muted small mb-1">Estimasi Temuan</div>
                                                <div class="h5 mb-0 font-weight-bold text-success">${safeValue(agg.estimasi_temuan)}</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-4">
                                        <div class="card border-left-warning shadow-sm h-100">
                                            <div class="card-body">
                                                <div class="text-muted small mb-1">Target Penemuan Kasus</div>
                                                <div class="h5 mb-0 font-weight-bold text-warning">${safeValue(agg.target_penemuan_kasus)}</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            `;

                                const tableHtmlParts = [];

                                if (list.length > 0) {
                                    tableHtmlParts.push(`
                                <div class="table-responsive w-100">
                                    <table id="datatablesSimple" class="table table-striped table-hover table-bordered text-nowrap w-100">
                                        <thead class="thead-dark text-center">
                                            <tr>
                                                <th>No urut</th>
                                                <th>Kelompok Penyakit</th>
                                                <th>Total</th>
                                                <th> < 1 Tahun (Laki-laki)</th>
                                                <th> < 1 Tahun (Perempuan)</th>
                                                <th> < 1 Tahun (Total)</th>
                                                <th> < 5 Tahun (Laki-laki)</th>
                                                <th> < 5 Tahun (Perempuan)</th>
                                                <th> < 5 Tahun (Total)</th>
                                                <th>Usia 5–9 (Laki-laki)</th>
                                                <th>Usia 5–9 (Perempuan)</th>
                                                <th>Usia 5–9 (Total)</th>
                                                <th>Usia 10–18 (Laki-laki)</th>
                                                <th>Usia 10–18 (Perempuan)</th>
                                                <th>Usia 10–18 (Total)</th>
                                                <th>Usia 19–59 (Laki-laki)</th>
                                                <th>Usia 19–59 (Perempuan)</th>
                                                <th>Usia 19–59 (Total)</th>
                                                <th>≥ 60 Tahun (Laki-laki)</th>
                                                <th>≥ 60 Tahun (Perempuan)</th>
                                                <th>≥ 60 Tahun (Total)</th>
                                                <th>Total Laki-laki</th>
                                                <th>Total Perempuan</th>
                                            </tr>
                                        </thead>
                                        <tbody>`);

                                    list.forEach(item => {
                                        tableHtmlParts.push(`<tr>
                                        <td class="text-center text-muted">${safeValue(item.urut)}</td>
                                        <td class="font-weight-bold">${safeValue(item.kelompok_penyakit)}</td>
                                        <td class="text-center font-weight-bold text-primary">${safeValue(item.total)}</td>
                                        <td class="text-center">${safeValue(item.lt1_l)}</td>
                                        <td class="text-center">${safeValue(item.lt1_p)}</td>
                                        <td class="text-center">${safeValue(item.lt5_tot)}</td>
                                        <td class="text-center">${safeValue(item.lt_1_5_l)}</td>
                                        <td class="text-center">${safeValue(item.lt_1_5_p)}</td>
                                        <td class="text-center font-weight-bold">${safeValue(item.lt_1_5_tot)}</td>
                                        <td class="text-center">${safeValue(item.usia_5_9_l)}</td>
                                        <td class="text-center">${safeValue(item.usia_5_9_p)}</td>
                                        <td class="text-center font-weight-bold">${safeValue(item.usia_5_9_tot)}</td>
                                        <td class="text-center">${safeValue(item.usia_10_18_l)}</td>
                                        <td class="text-center">${safeValue(item.usia_10_18_p)}</td>
                                        <td class="text-center font-weight-bold">${safeValue(item.usia_10_18_tot)}</td>
                                        <td class="text-center">${safeValue(item.usia_19_59_l)}</td>
                                        <td class="text-center">${safeValue(item.usia_19_59_p)}</td>
                                        <td class="text-center font-weight-bold">${safeValue(item.usia_19_59_tot)}</td>
                                        <td class="text-center">${safeValue(item.l60_l)}</td>
                                        <td class="text-center">${safeValue(item.l60_p)}</td>
                                        <td class="text-center font-weight-bold">${safeValue(item.l60_tot)}</td>
                                        <td class="text-center text-success font-weight-bold">${safeValue(item.total_l)}</td>
                                        <td class="text-center text-success font-weight-bold">${safeValue(item.total_p)}</td>
                                    </tr>`);
                                    });
                                    tableHtmlParts.push('</tbody></table></div>');

                                    $('#tableContainer').html(tableHtmlParts.join('')).show();
                                    $('#datatablesSimple').DataTable({
                                        "scrollX": true,
                                        "order": [
                                            [0, "asc"]
                                        ],
                                        "language": {
                                            "url": "//cdn.datatables.net/plug-ins/1.10.24/i18n/Indonesian.json"
                                        }
                                    });
                                    $('#downloadButton').show();
                                } else {
                                    $('#tableContainer').html('<div class="alert alert-info text-center">Tidak ada data ditemukan.</div>').show();
                                    $('#downloadButton').hide();
                                }

                                $('#summaryContainer').html(summaryHtml).show();
                            } else {
                                $('#tableContainer').html('<div class="alert alert-warning text-center">Respon data tidak valid.</div>').show();
                                $('#summaryContainer').hide();
                                $('#downloadButton').hide();
                            }

                        } catch (e) {
                            console.error("Error parsing JSON: ", e);
                            $('#tableContainer').html('<div class="alert alert-danger text-center">Terjadi kesalahan format data dari server.</div>').show();
                            $('#summaryContainer').hide();
                            $('#downloadButton').hide();
                        }
                    },
                    error: function(xhr, status, error) {
                        $('#loadingIcon').hide();
                        console.error("AJAX Error: ", error);
                        $('#tableContainer').html('<div class="alert alert-danger text-center">Gagal terhubung ke server.</div>').show();
                        $('#summaryContainer').hide();
                        $('#downloadButton').hide();
                    }
                });
            });

            // Event Tombol Download (Menggunakan Route Sesuai Permintaan)
            $('#downloadButton').on('click', function() {
                const tanggalAwal = $('#tanggal_awal').val();
                const tanggalAkhir = $('#tanggal_akhir').val();
                // URL Download diperbarui
                window.location.href = `<?= base_url("pasienispa/unduhdataispa") ?>?TANGGAL_AWAL=${tanggalAwal}&TANGGAL_AKHIR=${tanggalAkhir}`;
            });
        });
    </script>
</body>

</html>