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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard Demografi Alamat</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>


<div id="layoutSidenav_content">
    <main>
        <div class="container-fluid px-4">
            <h1 class="mt-4" id="judulPasien">Dashboard Demografi Alamat</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 Alamat</li>
            </ol>
            <!-- Filter Tanggal -->
            <div class="card mb-4">
                <div class="card-body">
                    <form action="<?= base_url('demografialamat/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: 40px 10px 10px 10px;">Tampil Data Demografi Pasien</h2>
            <div class="card">
                <div class="card-header">
                    <h3 style="text-align: center;" class="card-title">Demografi Kabupaten</h3>
                </div>
                <div class="card-body">
                </div class="table-responsive">
                <table id="table1" class="table table-striped table-bordered table-hover">
                    <thead>
                        <tr>
                            <th>Nama Kota/Kabupaten</th>
                            <th style="text-align: center;">Jumlah</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php
                        $no = 1;
                        if (isset($demokabupatenkota->response)) {
                            foreach ($demokabupatenkota->response as $a) {
                        ?>
                                <tr>
                                    <td><?= $a->nm_kota ?></td>
                                    <td style="text-align: center;"><?= $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 style="margin: 20px 10px 10px 10px;" class="row">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <h3 style="text-align: center;" class="card-title">Demografi Kecamatan</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>Nama Kota</th>
                                        <th>Nama Kecamatan</th>
                                        <th>Jumlah</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <?php
                                    $no = 1;
                                    if (isset($demokecamatan->response)) {
                                        foreach ($demokecamatan->response as $a) {
                                    ?>
                                            <tr>
                                                <td><?= $a->nm_kota ?></td>
                                                <td><?= $a->nama_kecamatan ?></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">Demografi Desa</h3>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table id="table3" class="table table-striped table-bordered table-hover">
                                <thead>
                                    <tr>
                                        <th>Nama Kota/Kabupaten</th>
                                        <th>Kecamatan</th>
                                        <th>Desa</th>
                                        <th>Jumlah</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <?php
                                    $no = 1;
                                    if (isset($demodesa->response)) {
                                        foreach ($demodesa->response as $a) {
                                    ?>
                                            <tr>
                                                <td><?= $a->nm_kota ?></td>
                                                <td><?= $a->nama_kecamatan ?></td>
                                                <td><?= $a->nm_desa ?></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 TAMPIL DATA TABEL DEMOGRAFI  -->
</div>
</footer>
</div>
</div>

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

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.bundle.min.js"></script>

<!-- 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>

</body>

</html>