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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard Demografi Usia</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>

<body>
    <div id="layoutSidenav_content">
        <main>
            <div class="container-fluid px-4">
                <h1 class="mt-4" id="judulPasien">Dashboard Demografi Usia</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 Usia</li>
                </ol>
                <!-- Filter Tanggal -->
                <div class="card mb-4">
                    <div class="card-body">
                        <form action="<?= base_url('demografiusia/tampildata') ?>" method="POST" name="form-input-data">
                            <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="tanggal_awal" class="form-control" value="<?= $tgl_awal ?>" required style="max-width: 100;" />
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <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: 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>
                            <!-- <button style="margin-top: 20px;" id="export-btn">Export to JPG</button> -->
                        </form>
                    </div>
                </div>



                <!-- TAMPIL TABEL RAWAT JALAN  -->
                <h2 style="margin-top: 10px; text-align: center;">Demografi Usia kurang dari 1 - 3 Tahun </h2>
                <div class="row">
                    <div style="margin-top: 20px ;" class="col-md-6">
                        <div id="gambar">
                            <div class="card">
                                <div class="card-header">
                                    <h3 style="text-align: center;" class="card-title">Usia Kurangdari 1 Tahun</h3>
                                </div>
                                <div class="card-body">
                                    <div class="table-responsive">
                                        <table id="table1" class="table table-striped table-bordered table-hover">
                                            <thead>
                                                <tr style="text-align: center;">
                                                    <th>Hari</th>
                                                    <th>Bulan</th>
                                                    <th>Jumlah</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <?php
                                                $no = 1;
                                                if (isset($usiakurang1thn->response)) {
                                                    foreach ($usiakurang1thn->response as $a) {
                                                ?>
                                                        <tr style="text-align: center;">
                                                            <td><?= $a->hari ?></td>
                                                            <td><?= $a->bulan ?></td>
                                                            <td><?= $a->qty ?></td>
                                                        </tr>
                                                    <?php
                                                    }
                                                } else {
                                                    ?>
                                                    <tr style="text-align: center;">
                                                        <td colspan="2" style="text-align: center;">Data tidak ditemukan</td>
                                                    <tr>
                                                    <?php
                                                }
                                                    ?>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div style="margin-top: 20px ;" class="col-md-6">
                        <div class="card">
                            <div class="card-header">
                                <h3 style="text-align: center;" class="card-title">Usia 1 - 3 Tahun</h3>
                            </div>
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table id="table2" class="table table-striped table-bordered table-hover">
                                        <thead>
                                            <tr style="text-align: center;">
                                                <th>Umur</th>
                                                <th>Jumlah</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <?php
                                            $no = 1;
                                            if (isset($usia1sampai3thn->response)) {
                                                foreach ($usia1sampai3thn->response as $a) {
                                            ?>
                                                    <tr style="text-align: center;">
                                                        <td><?= $a->umur ?></td>
                                                        <td><?= $a->qty ?></td>
                                                    </tr>
                                                <?php
                                                }
                                            } else {
                                                ?>
                                                <tr>
                                                    <td colspan="2" style="text-align: center;">Data tidak ditemukan</td>
                                                <tr>
                                                <?php
                                            }
                                                ?>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- USIA 3 -5 -->

                <h2 style="margin-top: 30px; text-align: center;"> Demografi Usia 3 - 18 Tahun </h2>
                <div style="margin-top: 20px ;" class="row">
                    <div class="col-md-6">
                        <div class="card">
                            <div class="card-header">
                                <h3 style="text-align: center;" class="card-title">Usia 3 - 5 Tahun</h3>
                            </div>
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table id="table3" class="table table-striped table-bordered table-hover">
                                        <thead>
                                            <tr style="text-align: center;">
                                                <th>Umur</th>
                                                <th>Jumlah</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <?php
                                            $no = 1;
                                            if (isset($usia3sampai5thn->response)) {
                                                foreach ($usia3sampai5thn->response as $a) {
                                            ?>
                                                    <tr style="text-align: center;">
                                                        <td><?= $a->umur ?></td>
                                                        <td><?= $a->qty ?></td>
                                                    </tr>
                                                <?php
                                                }
                                            } else {
                                                ?>
                                                <tr>
                                                    <td colspan="2" style="text-align: center;">Data tidak ditemukan</td>
                                                <tr>
                                                <?php
                                            }
                                                ?>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="card">
                            <div class="card-header">
                                <h3 style="text-align: center;" class="card-title">Usia 5- 18 Tahun</h3>
                            </div>
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table id="table4" class="table table-striped table-bordered table-hover">
                                        <thead>
                                            <tr style="text-align: center;">
                                                <th>Umur</th>
                                                <th>Jumlah</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <?php
                                            $no = 1;
                                            if (isset($usia5sampai18thn->response)) {
                                                foreach ($usia5sampai18thn->response as $a) {
                                            ?>
                                                    <tr style="text-align: center;">
                                                        <td><?= $a->umur ?></td>
                                                        <td><?= $a->qty ?></td>
                                                    </tr>
                                                <?php
                                                }
                                            } else {
                                                ?>
                                                <tr>
                                                    <td colspan="2" style="text-align: center;">Data tidak ditemukan</td>
                                                <tr>
                                                <?php
                                            }
                                                ?>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- USIA 18-58 TAHUN -->
                <h2 style="margin-top: 30px; text-align: center; "> Demografi Usia 18 - 58 Tahun Lebih</h2>
                <div style="margin-top: 20px ;" class="row">
                    <div class="col-md-6">
                        <div class="card">
                            <div class="card-header">
                                <h3 style="text-align: center;" class="card-title">Usia 18 - 58 Tahun</h3>
                            </div>
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table id="table5" class="table table-striped table-bordered table-hover">
                                        <thead>
                                            <tr style="text-align: center;">
                                                <th>Umur</th>
                                                <th>Jumlah</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <?php
                                            $no = 1;
                                            if (isset($usia18sampai58thn->response)) {
                                                foreach ($usia18sampai58thn->response as $a) {
                                            ?>
                                                    <tr style="text-align: center;">
                                                        <td><?= $a->umur ?></td>
                                                        <td><?= $a->qty ?></td>
                                                    </tr>
                                                <?php
                                                }
                                            } else {
                                                ?>
                                                <tr>
                                                    <td colspan="2" style="text-align: center;">Data tidak ditemukan</td>
                                                <tr>
                                                <?php
                                            }
                                                ?>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- END OF USIA 18-58 TAHUN -->

                    <!-- USIA 58 TAHUN LEBIH -->
                    <div class="col-md-6">
                        <div class="card">
                            <div class="card-header">
                                <h3 style="text-align: center;" class="card-title">Usia Lebih dari 58 Tahun</h3>
                            </div>
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table id="table6" class="table table-striped table-bordered table-hover">
                                        <thead>
                                            <tr style="text-align: center;">
                                                <th>Umur</th>
                                                <th>Jumlah</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <?php
                                            $no = 1;
                                            if (isset($usia58thnlebih->response)) {
                                                foreach ($usia58thnlebih->response as $a) {
                                            ?>
                                                    <tr style="text-align: center;">
                                                        <td><?= $a->umur ?></td>
                                                        <td><?= $a->qty ?></td>
                                                    </tr>
                                                <?php
                                                }
                                            } else {
                                                ?>
                                                <tr>
                                                    <td colspan="2" style="text-align: center;">Data tidak ditemukan</td>
                                                <tr>
                                                <?php
                                            }
                                                ?>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- END OF USIA 58 TAHUN LEBIH -->
            </div>
        </main>
    </div>

    <script>
        $(document).ready(function() {
            $('#table1').DataTable();
            $('#table2').DataTable();
            $('#table3').DataTable();
            $('#table4').DataTable();
            $('#table5').DataTable();
            $('#table6').DataTable();
        });
    </script>

</body>

</html>