<?php
require 'db.php';
require 'functions.php';
requireRole(['rnduser']);

$pagetitle = 'Dashboard';
$activemenu = 'dashboard';
require 'header.php';
?>

<div class="dfp-stats-row" id="dfpStatsRow">
  <div class="dfp-stat-box"><div class="num" id="statCompleted">-</div><div class="lbl">Completed Registrations</div></div>
  <div class="dfp-stat-box"><div class="num" id="statActive">-</div><div class="lbl">Active Passes</div></div>
  <div class="dfp-stat-box"><div class="num" id="statPrinted">-</div><div class="lbl">Physical Passes Printed</div></div>
  <div class="dfp-stat-box"><div class="num" id="statExpiring">-</div><div class="lbl">Expiring in 30 days</div></div>
</div>

<div class="dfp-card">
  <h3>Registrations by Panchayat</h3>
  <canvas id="panchayatChart" height="90"></canvas>
</div>

<?php require 'footer.php'; ?>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
var panchayatChart = null;

function dfpRenderDashboard(data) {
  $('#statCompleted').text(data.completed);
  $('#statActive').text(data.active);
  $('#statPrinted').text(data.printed);
  $('#statExpiring').text(data.expiring);

  var ctx = document.getElementById('panchayatChart').getContext('2d');
  if (panchayatChart) {
    panchayatChart.data.labels = data.panchayatlabels;
    panchayatChart.data.datasets[0].data = data.panchayatcounts;
    panchayatChart.update();
  } else {
    panchayatChart = new Chart(ctx, {
      type: 'bar',
      data: { labels: data.panchayatlabels, datasets: [{ label: 'Completed', data: data.panchayatcounts, backgroundColor: '#111111' }] },
      options: { plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true, ticks: { precision: 0 } } } }
    });
  }
}

$(function () {
  dfpStartAutoRefresh('ajax_rnd_dashboardstats.php', dfpRenderDashboard, 60000);
});
</script>
<?php require 'footer2.php'; ?>
