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

$pagetitle = 'Reports';
$activemenu = 'reports';
require 'header.php';
?>

<div class="dfp-stats-row">
  <div class="dfp-card" style="flex:1;min-width:280px;">
    <h3>Registrations (Last 30 Days)</h3>
    <canvas id="chartRegistrations" height="140"></canvas>
  </div>
  <div class="dfp-card" style="flex:1;min-width:280px;">
    <h3>Revenue (Last 30 Days)</h3>
    <canvas id="chartRevenue" height="140"></canvas>
  </div>
</div>

<div class="dfp-stats-row">
  <div class="dfp-card" style="flex:1;min-width:220px;">
    <h3>By Panchayat</h3>
    <canvas id="chartPanchayat" height="140"></canvas>
  </div>
  <div class="dfp-card" style="flex:1;min-width:220px;">
    <h3>By Status</h3>
    <canvas id="chartStatus" height="140"></canvas>
  </div>
</div>

<div class="dfp-card">
  <h3>Export</h3>
  <a class="btn btn-sm" href="admin_reportexport.php?type=villagers">Export Villagers (Excel)</a>
  <a class="btn btn-sm" href="admin_reportexport.php?type=payments">Export Payments (Excel)</a>
</div>

<?php require 'footer.php'; ?>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2/dist/chartjs-plugin-datalabels.min.js"></script>
<script>
Chart.register(ChartDataLabels);

// Distinct, high-contrast palette used across all report charts (reports are the one
// place in this app that intentionally break from the black & white UI theme).
var DFP_COLORS = ['#2563eb', '#16a34a', '#f59e0b', '#dc2626', '#7c3aed', '#0891b2', '#db2777', '#65a30d'];

$(function () {
  $.getJSON('ajax_admin_reportdata.php', function (resp) {
    if (!resp.success) { dfpToast('Failed to load report data', 'error'); return; }
    var d = resp.data;

    new Chart(document.getElementById('chartRegistrations').getContext('2d'), {
      type: 'line',
      data: { labels: d.dailylabels, datasets: [{ label: 'Registrations', data: d.dailycounts, borderColor: DFP_COLORS[0], backgroundColor: DFP_COLORS[0], tension: 0.25, fill: false, pointRadius: 3 }] },
      options: {
        plugins: {
          legend: { display: false },
          datalabels: {
            align: 'top', anchor: 'end', color: '#111', font: { size: 10, weight: 'bold' },
            formatter: function (v) { return v > 0 ? v : ''; }
          }
        },
        scales: { y: { beginAtZero: true, ticks: { precision: 0 } } }
      }
    });

    new Chart(document.getElementById('chartRevenue').getContext('2d'), {
      type: 'bar',
      data: { labels: d.dailylabels, datasets: [{ label: 'Revenue', data: d.dailyrevenue, backgroundColor: DFP_COLORS[1] }] },
      options: {
        plugins: {
          legend: { display: false },
          datalabels: {
            align: 'end', anchor: 'end', color: '#111', font: { size: 10, weight: 'bold' }, rotation: -90,
            formatter: function (v) { return v > 0 ? '₹' + v : ''; }
          }
        },
        scales: { y: { beginAtZero: true } }
      }
    });

    new Chart(document.getElementById('chartPanchayat').getContext('2d'), {
      type: 'bar',
      data: {
        labels: d.panchayatlabels,
        datasets: [{ label: 'Villagers', data: d.panchayatcounts, backgroundColor: d.panchayatlabels.map(function (_, i) { return DFP_COLORS[i % DFP_COLORS.length]; }) }]
      },
      options: {
        plugins: {
          legend: { display: false },
          datalabels: { align: 'end', anchor: 'end', color: '#111', font: { size: 12, weight: 'bold' } }
        },
        scales: { y: { beginAtZero: true, ticks: { precision: 0 } } }
      }
    });

    new Chart(document.getElementById('chartStatus').getContext('2d'), {
      type: 'pie',
      data: {
        labels: d.statuslabels,
        datasets: [{ data: d.statuscounts, backgroundColor: d.statuslabels.map(function (_, i) { return DFP_COLORS[i % DFP_COLORS.length]; }) }]
      },
      options: {
        plugins: {
          datalabels: {
            color: '#fff', font: { size: 12, weight: 'bold' },
            formatter: function (v, ctx) {
              var total = ctx.chart.data.datasets[0].data.reduce(function (a, b) { return a + b; }, 0);
              return total > 0 ? v + ' (' + Math.round((v / total) * 100) + '%)' : v;
            }
          }
        }
      }
    });
  });
});
</script>
<?php require 'footer2.php'; ?>
