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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Data Demografi Jenis Kelamin Per Poli</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <style>
        #downloadButton {
            margin-left: 10px;
        }

        @media (max-width: 768px) {
            .container {
                width: 100%;
            }

            .form-group {
                margin-bottom: 10px;
            }

            .btn-container {
                margin-top: 10px;
            }
        }

        @media (min-width: 769px) and (max-width: 1024px) {
            .container {
                width: 80%;
            }

            #downloadButton {
                margin-top: 10px;
                /* Memberikan jarak pada tombol download di bawah form */
            }
        }

        @media (min-width: 1025px) {
            .container {
                width: 60%;
            }
        }
    </style>
</head>

<body>
    <div id="layoutSidenav_content">
        <main>
            <div class="container-fluid px-4">
                <h1 class="mt-4" id="judulPasien">Data Demografi Jenis Kelamin Pasien Per Poli</h1>
                <ol class="breadcrumb mb-4">
                    <li class="breadcrumb-item"><a href="index.html">Dashboard</a></li>
                    <li class="breadcrumb-item active">Tampil Data Demograsi Jenis Kelamin Per Poli</li>
                </ol>
                <!-- Filter Tanggal -->

                <div class="row">
                    <div class="col-md-12">
                        <div class="card mb-4" style="width:100%; height:auto">
                            <div class="card-body">
                                <form id="filterForm" class="row g-1">
                                    <div class="row">
                                        <div class="col-md-2">
                                            <div class="form-group">
                                                <label for="tgl_awal">Tanggal Awal</label>
                                                <input type="date" id="tanggal_awal" name="tanggal_awal" class="form-control" value="<?= $tgl_awal ?>" required style="max-width: 100%;" />
                                            </div>
                                        </div>
                                        <div class="col-md-7">
                                            <div class="form-group">
                                                <label for="tgl_akhir">Tanggal Akhir</label>
                                                <div class="input-group">
                                                    <input type="date" id="tanggal_akhir" name="tanggal_akhir" class="form-control" value="<?= $tgl_akhir ?>" required style="max-width: 150px;" />
                                                    <!-- Atribut 'required' dihapus agar form bisa disubmit tanpa memilih poli -->
                                                    <select id="kd_jenispoli" name="kd_jenispoli" class="custom-select" style="max-width: 350px; margin-left: 15px">
                                                        <option style="margin-center" value="" selected > -- Terpilih Semua Poli  --</option>
                                                        <option value="RAD">RADIOLOGI</option>
                                                        <option value="LAB">LABORATORIUM</option>
                                                        <option value="HCR">HOME CARE</option>
                                                        <option value="KBS">KLINIK BEDAH SARAF</option>
                                                        <option value="MCU">MCU</option>
                                                        <option value="IGD">INSTALASI GAWAT DARURAT</option>
                                                        <option value="FAW">UROLOGI</option>
                                                        <option value="OBG">KLINIK KEBIDANAN DAN KANDUNGAN</option>
                                                        <option value="KLT">KLINIK KULIT DAN KELAMIN</option>
                                                        <option value="ORT">KLINIK ORTHOPAEDI</option>
                                                        <option value="KPR">KLINIK PARU</option>
                                                        <option value="KRM">KLINIK REHAB MEDIK</option>
                                                        <option value="KSA">KLINIK SARAF</option>
                                                        <option value="KTT">KLINIK THT</option>
                                                        <option value="KAA">KLINIK ANAK</option>
                                                        <option value="KPD">KLINIK PENYAKIT DALAM</option>
                                                        <option value="KET">KLINIK ESTETIKA</option>
                                                        <option value="KUU">KLINIK UMUM</option>
                                                        <option value="VAK">KLINIK VAKSIN</option>
                                                        <option value="KFS">KLINIK FISIOTERAPI</option>
                                                        <option value="KGG">KLINIK GIGI</option>
                                                        <option value="KJN">KLINIK JANTUNG</option>
                                                    </select>
                                                    <button type="submit" class="btn btn-primary ml-2 ">Submit</button>
                                                    <button type="button" id="downloadButton" class="btn btn-success ml-2" style="display: none;">Download Excel</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="result" class="table-responsive">
                   <div id="loadingIcon" style="display: none;">
                        <center><img src="<?= base_url('assets_/assets/img/loading-new.gif') ?>" alt="Loading..." /></center>
                    </div>
                    <div class="table-responsive" id="tableContainer" style="display: none;">
                        <!-- Tabel akan dimasukkan di sini setelah pemrosesan -->
                    </div>
                </div>
            </div>
        </main>
        <footer class="py-4 bg-light mt-auto">
            <div class="container-fluid px-4">
                <div class="d-flex align-items-center justify-content-between small">
                    <div class="text-muted">Copyright &copy; By IT Support RSU Ananda Purwokerto 2024</div>
                    <div>
                        <a href="#">Privacy Policy</a>
                        &middot;
                        <a href="#">Terms &amp; Conditions</a>
                    </div>
                </div>
            </div>
        </footer>
    </div>


    <!-- Jquery -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <!-- DataTables JS -->
    <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/simple-datatables@7.1.2/dist/umd/simple-datatables.min.js" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        $(document).ready(function() {

            // --- PERBAIKAN UTAMA: FUNGSI DIKELUARKAN DARI EVENT SUBMIT ---
            // Fungsi untuk memproses response AJAX yang berhasil
            function handleAjaxSuccess(response) {
                $('#loadingIcon').hide();
                try {
                    const data = JSON.parse(response);
                    if (data && Array.isArray(data.response)) {
                        const list = data.response;
                        if ($.fn.DataTable.isDataTable('#datatablesSimple')) {
                            $('#datatablesSimple').DataTable().destroy();
                        }
                        if (list.length > 0) {
                            let tableHeaders = '<th>Jenis Kelamin</th><th>Jumlah</th>';
                           let html = `<table id="datatablesSimple" class="table table-striped table-bordered"><thead><tr>${tableHeaders}</tr></thead><tbody>`;
                            list.forEach(item => {
                                html += `<tr>
                                    <td>${item.nm_jenis_kelamin}</td>
                                    <td>${item.qty}</td>
                                </tr>`;
                            });
                            html += '</tbody></table>';
                            $('#tableContainer').html(html).show();
                            $('#datatablesSimple').DataTable({
                                "order": [
                                    [0, "asc"]
                                ],
                                "columnDefs": [{
                                    // Terapkan kelas "text-center" ke kolom target
                                    "className": "text-center",
                                    // Targetkan kolom pertama (indeks 0) dan kedua (indeks 1)
                                    // Ini akan menengahkan header dan isi sel pada kolom tersebut
                                    "targets": [0, 1] 
                                }]

                            });
                            $('#downloadButton').show();
                        } else {
                            $('#tableContainer').html('<p class="text-center">Tidak ada data yang ditemukan.</p>').show();
                        }
                    } else {
                        $('#tableContainer').html('<p class="text-center">Format data tidak sesuai.</p>').show();
                    }
                } catch (e) {
                    console.error("Error parsing JSON: ", e, "Response:", response);
                    $('#tableContainer').html('<p class="text-center">Terjadi kesalahan saat memproses data. Cek console untuk detail.</p>').show();
                }
            }

            // Fungsi untuk menangani error pada saat AJAX request
            function handleAjaxError(xhr, status, error) {
                $('#loadingIcon').hide();
                console.error("AJAX Error: ", status, error, xhr.responseText);
                $('#tableContainer').html('<p class="text-center">Gagal terhubung ke server (Error: ' + xhr.status + '). Pastikan URL API benar dan server berjalan.</p>').show();
            }

            // Event handler untuk saat form di-submit
            $('#filterForm').on('submit', function(event) {
                event.preventDefault(); // Mencegah refresh halaman
                $('#loadingIcon').show();
                $('#tableContainer').hide();
                $('#downloadButton').hide();

                const tanggalAwal = $('#tanggal_awal').val();
                const tanggalAkhir = $('#tanggal_akhir').val();
                const kdPoli = $('#kd_jenispoli').val();

                if (kdPoli && kdPoli !== "") {
                    // PANGGIL API UNTUK DATA PER POLI
                    console.log("Mengambil data per poli...");
                    $.ajax({
                        url: '<?= base_url("demojeniskelpoli/tampildemojeniskelpoli") ?>',
                        type: 'POST',
                        data: {
                            TANGGAL_AWAL: tanggalAwal,
                            TANGGAL_AKHIR: tanggalAkhir,
                            KD_POLIKLINIK: kdPoli
                        },
                        success: handleAjaxSuccess,
                        error: handleAjaxError
                    });
                } else {
                    // PANGGIL API UNTUK SEMUA DATA
                    console.log("Mengambil semua data...");
                    $.ajax({
                        url: '<?= base_url("demojeniskelpoli/tampildemojeniskelpoliall") ?>',
                        type: 'POST',
                        data: {
                            TANGGAL_AWAL: tanggalAwal,
                            TANGGAL_AKHIR: tanggalAkhir
                        },
                        success: handleAjaxSuccess,
                        error: handleAjaxError
                    });
                }
            });


            // Event handler untuk tombol download
            $('#downloadButton').on('click', function() {
                const tanggalAwal = $('#tanggal_awal').val();
                const tanggalAkhir = $('#tanggal_akhir').val();
                const kdPoli = $('#kd_jenispoli').val();
                
                let downloadUrl = '';

                if (kdPoli && kdPoli !== "") {
                    // Menggunakan PHP untuk generate URL download per poli
                    downloadUrl = '<?= base_url("demojeniskelpoli/unduhdatajeniskelperpoli") ?>' + `?TANGGAL_AWAL=${tanggalAwal}&TANGGAL_AKHIR=${tanggalAkhir}&KD_POLIKLINIK=${kdPoli}`;
                } else {
                    // Menggunakan PHP untuk generate URL download semua data
                    downloadUrl = '<?= base_url("demojeniskelpoli/unduhdatajeniskelalldata") ?>' + `?TANGGAL_AWAL=${tanggalAwal}&TANGGAL_AKHIR=${tanggalAkhir}`;
                }
                
                console.log("Mengarahkan ke URL download:", downloadUrl);
                window.location.href = downloadUrl;
            });
        });
    </script>
</body>

</html>
