<?php

  $sql = $koneksi->query("SELECT COUNT(id_pend) as pend  from tb_pdd where status='Ada'");
  while ($data= $sql->fetch_assoc()) {
    $pend=$data['pend'];
  }

  $sql = $koneksi->query("SELECT COUNT(id_kk) as kartu  from tb_kk");
  while ($data= $sql->fetch_assoc()) {
    $kartu=$data['kartu'];
  }

  $sql = $koneksi->query("SELECT COUNT(id_pend) as laki  from tb_pdd where jekel='LK' AND status='Ada'");
  while ($data= $sql->fetch_assoc()) {
    $laki=$data['laki'];
  }

  $sql = $koneksi->query("SELECT COUNT(id_pend) as prem  from tb_pdd where jekel='PR' AND status='Ada'");
  while ($data= $sql->fetch_assoc()) {
    $prem=$data['prem'];
  }

  $sql = $koneksi->query("SELECT COUNT(id_lahir) as lahir from tb_lahir");
  while ($data= $sql->fetch_assoc()) {
    $lahir=$data['lahir'];
  }

  $sql = $koneksi->query("SELECT COUNT(id_mendu) as mendu  from tb_mendu");
  while ($data= $sql->fetch_assoc()) {
    $mendu=$data['mendu'];
  }

  $sql = $koneksi->query("SELECT COUNT(id_datang) as datang  from tb_datang");
  while ($data= $sql->fetch_assoc()) {
    $datang=$data['datang'];
  }

  $sql = $koneksi->query("SELECT COUNT(id_pindah) as pindah  from tb_pindah");
  while ($data= $sql->fetch_assoc()) {
    $pindah=$data['pindah'];
  }

  // Demografi Umur
  $balita = 0; $anak = 0; $remaja = 0; $dewasa = 0; $lansia = 0;

  $sql_balita = $koneksi->query("SELECT COUNT(id_pend) as c FROM tb_pdd WHERE TIMESTAMPDIFF(YEAR, tgl_lh, CURDATE()) BETWEEN 0 AND 5 AND status='Ada'");
  if($d = $sql_balita->fetch_assoc()) $balita = $d['c'];

  $sql_anak = $koneksi->query("SELECT COUNT(id_pend) as c FROM tb_pdd WHERE TIMESTAMPDIFF(YEAR, tgl_lh, CURDATE()) BETWEEN 6 AND 12 AND status='Ada'");
  if($d = $sql_anak->fetch_assoc()) $anak = $d['c'];

  $sql_remaja = $koneksi->query("SELECT COUNT(id_pend) as c FROM tb_pdd WHERE TIMESTAMPDIFF(YEAR, tgl_lh, CURDATE()) BETWEEN 13 AND 17 AND status='Ada'");
  if($d = $sql_remaja->fetch_assoc()) $remaja = $d['c'];

  $sql_dewasa = $koneksi->query("SELECT COUNT(id_pend) as c FROM tb_pdd WHERE TIMESTAMPDIFF(YEAR, tgl_lh, CURDATE()) BETWEEN 18 AND 59 AND status='Ada'");
  if($d = $sql_dewasa->fetch_assoc()) $dewasa = $d['c'];

  $sql_lansia = $koneksi->query("SELECT COUNT(id_pend) as c FROM tb_pdd WHERE TIMESTAMPDIFF(YEAR, tgl_lh, CURDATE()) >= 60 AND status='Ada'");
  if($d = $sql_lansia->fetch_assoc()) $lansia = $d['c'];

  // Data Profil
  $sql_profil = "SELECT * FROM tb_profil WHERE id_profil='1'";
  $query_profil = mysqli_query($koneksi, $sql_profil);
  $data_profil = mysqli_fetch_array($query_profil,MYSQLI_BOTH);
?>

<?php if($data_profil): ?>
<div class="card card-primary card-outline mb-2">
    <div class="card-body p-2">
        <h5 class="text-center font-weight-bold mb-0">
            PEMERINTAH DESA <?php echo strtoupper($data_profil['nama_desa']); ?>
        </h5>
        <p class="text-center small text-muted mb-0">
            Kec. <?php echo $data_profil['kecamatan']; ?>, Kab. <?php echo $data_profil['kabupaten']; ?> | <?php echo $data_profil['alamat']; ?>
        </p>
    </div>
</div>
<?php endif; ?>

<div class="row">
	<div class="col-lg-3 col-6">
		<!-- small box -->
		<div class="small-box bg-info">
			<div class="inner">
				<h3>
					<?php echo $pend;  ?>
				</h3>

				<p>Penduduk</p>
			</div>
			<div class="icon">
				<i class="ion ion-person-add"></i>
			</div>
			<a href="index.php?page=data-pend" class="small-box-footer">Selengkapnya
				<i class="fas fa-arrow-circle-right"></i>
			</a>
		</div>
	</div>
	<!-- ./col -->
	<div class="col-lg-3 col-6">
		<!-- small box -->
		<div class="small-box bg-success">
			<div class="inner">
				<h3>
					<?php echo $kartu;  ?>
				</h3>

				<p>Kartu Keluarga</p>
			</div>
			<div class="icon">
				<i class="ion ion-card"></i>
			</div>
			<a href="index.php?page=data-kartu" class="small-box-footer">Selengkapnya
				<i class="fas fa-arrow-circle-right"></i>
			</a>
		</div>
	</div>
	<!-- ./col -->
	<div class="col-lg-3 col-6">
		<!-- small box -->
		<div class="small-box bg-red">
			<div class="inner">
				<h3>
					<?php echo $laki;  ?>
				</h3>

				<p>Laki-laki</p>
			</div>
			<div class="icon">
				<i class="ion ion-male"></i>
			</div>
			<a href="index.php?page=data-pend&jekel=LK" class="small-box-footer">Selengkapnya
				<i class="fas fa-arrow-circle-right"></i>
			</a>
		</div>
	</div>
	<!-- ./col -->
	<div class="col-lg-3 col-6">
		<!-- small box -->
		<div class="small-box bg-warning">
			<div class="inner">
				<h3>
					<?php echo $prem;  ?>
				</h3>

				<p>Perempuan</p>
			</div>
			<div class="icon">
				<i class="ion ion-female"></i>
			</div>
			<a href="index.php?page=data-pend&jekel=PR" class="small-box-footer">Selengkapnya
				<i class="fas fa-arrow-circle-right"></i>
			</a>
		</div>
	</div>

	<div class="col-lg-3 col-6">
		<!-- small box -->
		<div class="small-box bg-info">
			<div class="inner">
				<h3>
					<?php echo $lahir;  ?>
				</h3>

				<p>Lahir</p>
			</div>
			<div class="icon">
				<i class="ion ion-android-happy"></i>
			</div>
			<a href="index.php?page=data-lahir" class="small-box-footer">Selengkapnya
				<i class="fas fa-arrow-circle-right"></i>
			</a>
		</div>
	</div>
	<!-- ./col -->
	<div class="col-lg-3 col-6">
		<!-- small box -->
		<div class="small-box bg-success">
			<div class="inner">
				<h3>
					<?php echo $mendu;  ?>
				</h3>

				<p>Meninggal</p>
			</div>
			<div class="icon">
				<i class="ion ion-android-sad"></i>
			</div>
			<a href="index.php?page=data-mendu" class="small-box-footer">Selengkapnya
				<i class="fas fa-arrow-circle-right"></i>
			</a>
		</div>
	</div>
	<!-- ./col -->
	<div class="col-lg-3 col-6">
		<!-- small box -->
		<div class="small-box bg-red">
			<div class="inner">
				<h3>
					<?php echo $datang;  ?>
				</h3>

				<p>Pendatang</p>
			</div>
			<div class="icon">
				<i class="ion ion-android-download"></i>
			</div>
			<a href="index.php?page=data-datang" class="small-box-footer">Selengkapnya
				<i class="fas fa-arrow-circle-right"></i>
			</a>
		</div>
	</div>
	<!-- ./col -->
	<div class="col-lg-3 col-6">
		<!-- small box -->
		<div class="small-box bg-warning">
			<div class="inner">
				<h3>
					<?php echo $pindah;  ?>
				</h3>

				<p>Pindah</p>
			</div>
			<div class="icon">
				<i class="ion ion-android-upload"></i>
			</div>
			<a href="index.php?page=data-pindah" class="small-box-footer">Selengkapnya
				<i class="fas fa-arrow-circle-right"></i>
			</a>
		</div>
	</div>

</div>

<div class="row mt-4">
    <!-- Left Col: Chart -->
    <div class="col-lg-6">
        <div class="card card-info h-100">
            <div class="card-body">
                <canvas id="donutChart" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>
            </div>
        </div>
    </div>

    <!-- Right Col: Demographics -->
    <div class="col-lg-6">
        <div class="row">
            <!-- Balita -->
            <div class="col-lg-4 col-6">
                <div class="small-box bg-info">
                    <div class="inner">
                        <h3><?php echo $balita; ?></h3>
                        <p>Balita (0-5)</p>
                    </div>
                    <div class="icon"><i class="fas fa-baby"></i></div>
                    <a href="index.php?page=data-pend&kategori=Balita" class="small-box-footer">Info <i class="fas fa-arrow-circle-right"></i></a>
                </div>
            </div>
            <!-- Anak -->
            <div class="col-lg-4 col-6">
                <div class="small-box bg-success">
                    <div class="inner">
                        <h3><?php echo $anak; ?></h3>
                        <p>Anak (6-12)</p>
                    </div>
                    <div class="icon"><i class="fas fa-child"></i></div>
                    <a href="index.php?page=data-pend&kategori=Anak" class="small-box-footer">Info <i class="fas fa-arrow-circle-right"></i></a>
                </div>
            </div>
            <!-- Remaja -->
            <div class="col-lg-4 col-6">
                <div class="small-box bg-purple">
                    <div class="inner">
                        <h3><?php echo $remaja; ?></h3>
                        <p>Remaja (13-17)</p>
                    </div>
                    <div class="icon"><i class="fas fa-user-graduate"></i></div>
                    <a href="index.php?page=data-pend&kategori=Remaja" class="small-box-footer">Info <i class="fas fa-arrow-circle-right"></i></a>
                </div>
            </div>
            <!-- Dewasa -->
            <div class="col-lg-6 col-6">
                <div class="small-box bg-primary">
                    <div class="inner">
                        <h3><?php echo $dewasa; ?></h3>
                        <p>Dewasa (18-59)</p>
                    </div>
                    <div class="icon"><i class="fas fa-user-tie"></i></div>
                    <a href="index.php?page=data-pend&kategori=Dewasa" class="small-box-footer">Info <i class="fas fa-arrow-circle-right"></i></a>
                </div>
            </div>
            <!-- Lansia -->
            <div class="col-lg-6 col-6">
                <div class="small-box bg-secondary">
                    <div class="inner">
                        <h3><?php echo $lansia; ?></h3>
                        <p>Lansia (>60)</p>
                    </div>
                    <div class="icon"><i class="fas fa-blind"></i></div>
                    <a href="index.php?page=data-pend&kategori=Lansia" class="small-box-footer">Info <i class="fas fa-arrow-circle-right"></i></a>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        // Data from PHP
        var donutChartCanvas = $('#donutChart').get(0).getContext('2d')
        var donutData        = {
            labels: [
                'Balita', 
                'Anak-anak',
                'Remaja', 
                'Dewasa', 
                'Lansia'
            ],
            datasets: [
                {
                data: [
                    <?php echo $balita; ?>, 
                    <?php echo $anak; ?>, 
                    <?php echo $remaja; ?>, 
                    <?php echo $dewasa; ?>, 
                    <?php echo $lansia; ?>
                ],
                backgroundColor : ['#17a2b8', '#28a745', '#6f42c1', '#007bff', '#6c757d'],
                }
            ]
        }
        var donutOptions     = {
            maintainAspectRatio : false,
            responsive : true,
            plugins: {
                title: {
                    display: true,
                    text: 'Komposisi Penduduk Berdasarkan Usia',
                    font: {
                        size: 16
                    }
                },
                legend: {
                    display: true,
                    position: 'right'
                }
            }
        }
        new Chart(donutChartCanvas, {
            type: 'doughnut',
            data: donutData,
            options: donutOptions
        })
    });
</script>