<div id="layoutSidenav_content">
    <main>
        <div class="container-fluid px-4">
            <h1 class="mt-4" id="judulPasien">Data Demografi Jenis Kelamin</h1>
            <ol class="breadcrumb mb-4">
                <li class="breadcrumb-item"><a href="index.html">Dashboard</a></li>
                <li class="breadcrumb-item active">Tampil Data Demografi Jenis Kelamin</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">
                            <!-- <div class="input-group-append btn-container">
                                    <button type="submit" class="btn btn-primary ml-2 ">Filter</button>
                                    <button id="downloadButton" class="btn btn-success ml-2" style="display: none;">Download Excel</button>
                                </div> -->
                            <form id="filterForm" class="row g-1">
                                <div class="row">
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="tgl_awal">Tanggal Awal</label>
                                            <input type="date" id="tanggal_awal" name="TGL_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="TGL_AKHIR" class="form-control" value="<?= $tgl_akhir ?>" required style="max-width: 300px;" />
                                                <button style="margin-left: 10px;" type="submit" class="btn btn-primary ml-3 ">Submit</button>
                                                <button id="downloadButton" class="btn btn-success ml-3" style="display: none; margin-left: 10px;">Download Excel</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                            <!-- <div class="row mt-5">
                                    <div class="col-md-12 d-flex justify-content-end align-items-start">
                                        <button id="downloadButton" class="btn btn-success" style="display: none;  ">Download Excel</button>
                                    </div>
                                </div> -->
                        </div>
                    </div>
                </div>
            </div>
            <div class="input-group-append btn-container">
                <!-- <button type="submit" class="btn btn-primary ml-2 ">Filter</button> -->
                <!-- <button id="downloadButton" class="btn btn-success ml-2" style="display: none;">Download Excel</button> -->
            </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="<?php echo base_url('assets_/js/scripts.js'); ?>"></script>
<script src="https://cdn.jsdelivr.net/npm/simple-datatables@7.1.2/dist/umd/simple-datatables.min.js" crossorigin="anonymous"></script>
<script src="<?php echo base_url('assets_/js/datatables-simple-demo.js'); ?>"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    $(document).ready(function() {
        $('#filterForm').on('submit', function(event) {
            event.preventDefault(); // Mencegah refresh halaman
            $('#loadingIcon').show(); // Tampilkan ikon loading
            $('#tableContainer').hide(); // Sembunyikan tabel sebelum memulai pengambilan data

            $.ajax({
                url: '<?= base_url("demografijeniskelamin/tampiljeniskelamin") ?>',
                type: 'POST',
                data: {
                    TANGGAL_AWAL: $('#tanggal_awal').val(),
                    TANGGAL_AKHIR: $('#tanggal_akhir').val()
                },
                success: function(response) {
                    $('#loadingIcon').hide(); // Sembunyikan ikon loading setelah permintaan selesai

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

                        // Periksa status dan data
                        if (data && Array.isArray(data.response)) {
                            const list = data.response;

                            // Hancurkan DataTable sebelumnya jika sudah ada
                            if ($.fn.DataTable.isDataTable('#datatablesSimple')) {
                                $('#datatablesSimple').DataTable().destroy();
                            }

                            if (list.length > 0) {
                                let html = '<table id="datatablesSimple" class="table table-striped table-bordered"><thead><tr><th>Jenis Kelamin</th><th>Jumlah</th></tr></thead><tbody>';

                                // Looping untuk menampilkan data
                                list.forEach(item => {
                                    // const formattedDate = new Date(item.tgl_registrasi).toISOString().split('T')[0];

                                    html += `<tr>
                                    <td>${item.nm_jenis_kelamin}</td>
                                    <td>${item.qty}</td>
                                </tr>`;
                                });
                                html += '</tbody></table>';
                                $('#tableContainer').html(html).show(); // Tampilkan tabel hasil

                                // Tampilkan tombol download
                                $('#downloadButton').show();
                            } else {
                                $('#tableContainer').html('<p>Tidak ada data yang ditemukan.</p>').show();
                                $('#downloadButton').hide(); // Sembunyikan tombol download jika tidak ada data
                            }
                        } else {
                            $('#tableContainer').html('<p>Tidak ada data yang ditemukan.</p>').show();
                            $('#downloadButton').hide(); // Sembunyikan tombol download jika tidak ada data
                        }

                        // Ubah URL tanpa menyegarkan halaman
                        history.replaceState(null, '', '<?= base_url("dashboard/demografijeniskelamin") ?>');
                    } catch (e) {
                        console.error("Error parsing JSON: ", e);
                        $('#tableContainer').html('<p>Terjadi kesalahan saat memproses data.</p>').show();
                        $('#downloadButton').hide(); // Sembunyikan tombol download jika terjadi kesalahan
                    }
                },
                error: function(xhr, status, error) {
                    $('#loadingIcon').hide(); // Sembunyikan ikon loading jika terjadi error
                    console.error("AJAX Error: ", error);
                }
            });
        });

        // Event untuk tombol download
        $('#downloadButton').on('click', function() {
            const tanggalAwal = $('#tanggal_awal').val();
            const tanggalAkhir = $('#tanggal_akhir').val();
            window.location.href = `<?= base_url("demografijeniskelamin/unduh") ?>?TANGGAL_AWAL=${tanggalAwal}&TANGGAL_AKHIR=${tanggalAkhir}`;
        });
    });
</script>
</body>

</html>