<div class="content-header">
  <div class="container-fluid">
    <h4 class="mb-2">Selamat Datang, <?= html_escape($nama); ?></h4>
    <p class="text-muted mb-0">Ringkasan operasional hari ini</p>
  </div>
</div>

<section class="content">
  <div class="container-fluid">

    <div class="row">
      <div class="col-lg-4 col-12">
        <div class="small-box bg-info">
          <div class="inner">
            <h3><?= (int)$total_pasien; ?></h3>
            <p>Jumlah Pasien Aktif</p>
          </div>
          <div class="icon"><i class="fas fa-users"></i></div>
          <a href="<?= site_url('registrasi');?>" class="small-box-footer">Lihat data <i class="fas fa-arrow-circle-right"></i></a>
        </div>
      </div>
      <div class="col-lg-4 col-12">
        <div class="small-box bg-success">
          <div class="inner">
            <h3><?= (int)$total_pendaftaran; ?></h3>
            <p>Total Pendaftaran</p>
          </div>
          <div class="icon"><i class="fas fa-file-medical"></i></div>
          <a href="<?= site_url('registrasi');?>" class="small-box-footer">Lihat data <i class="fas fa-arrow-circle-right"></i></a>
        </div>
      </div>
      <div class="col-lg-4 col-12">
        <div class="small-box bg-warning">
          <div class="inner">
            <h3><?= (int)$total_pendaftaran_poli; ?></h3>
            <p>Jumlah Pendaftaran Poli</p>
          </div>
          <div class="icon"><i class="fas fa-notes-medical"></i></div>
          <a href="<?= site_url('registrasi');?>" class="small-box-footer">Lihat data <i class="fas fa-arrow-circle-right"></i></a>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-lg-6">
        <div class="card">
          <div class="card-header"><i class="fas fa-chart-line"></i> Pendaftaran (7 Hari Terakhir)</div>
          <div class="card-body"><canvas id="chartRegistrasi7"></canvas></div>
        </div>
      </div>
      <div class="col-lg-6">
        <div class="card">
          <div class="card-header"><i class="fas fa-chart-bar"></i> Pasien Per Bulan (12 Bulan)</div>
          <div class="card-body"><canvas id="chartPasien12"></canvas></div>
        </div>
      </div>
    </div>

  </div>
</section>

<!-- Chart.js (boleh disatukan di layout jika dipakai di banyak halaman) -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
<script>
  const labels7  = <?= json_encode($labels7); ?>;
  const values7  = <?= json_encode($values7); ?>;
  const labels12 = <?= json_encode($labels12); ?>;
  const values12 = <?= json_encode($values12); ?>;

  new Chart(document.getElementById('chartRegistrasi7'), {
    type:'line', data:{ labels:labels7, datasets:[{ label:'Pendaftaran', data:values7, fill:false, tension:.3 }] },
    options:{ responsive:true, plugins:{legend:{display:false}}, scales:{ y:{ beginAtZero:true, ticks:{precision:0} } } }
  });

  new Chart(document.getElementById('chartPasien12'), {
    type:'bar', data:{ labels:labels12, datasets:[{ label:'Pasien Baru', data:values12 }] },
    options:{ responsive:true, plugins:{legend:{display:false}}, scales:{ y:{ beginAtZero:true, ticks:{precision:0} } } }
  });
</script>
