<?php use App\Helpers\Helper; ?>
<div class="d-flex justify-content-between align-items-center mb-4">
  <h1 class="admin-page-title">Income & Expense Report <?= $year ?></h1>
  <div class="d-flex gap-2">
    <form method="GET" class="d-flex gap-2">
      <select name="year" class="form-select form-select-sm" style="width:100px">
        <?php for($y=date('Y');$y>=date('Y')-5;$y--): ?><option value="<?= $y ?>" <?= $year==$y?'selected':'' ?>><?= $y ?></option><?php endfor; ?>
      </select>
      <button class="btn btn-sm btn-primary">Filter</button>
    </form>
    <button onclick="window.print()" class="btn btn-outline-primary btn-sm"><i class="bi bi-printer me-1"></i>Print</button>
    <a href="<?= APP_URL ?>/admin/reports" class="btn btn-outline-secondary btn-sm"><i class="bi bi-arrow-left me-1"></i>Back</a>
  </div>
</div>

<div class="row g-3 mb-4">
  <div class="col-md-4"><div class="admin-stat-card"><div class="stat-icon-wrap green"><i class="bi bi-graph-up"></i></div><div><div class="stat-val" style="font-size:1.1rem"><?= Helper::money($totals['income']) ?></div><div class="stat-lbl">Total Income</div></div></div></div>
  <div class="col-md-4"><div class="admin-stat-card"><div class="stat-icon-wrap red"><i class="bi bi-graph-down"></i></div><div><div class="stat-val" style="font-size:1.1rem"><?= Helper::money($totals['expense']) ?></div><div class="stat-lbl">Total Expenses</div></div></div></div>
  <div class="col-md-4"><div class="admin-stat-card"><div class="stat-icon-wrap <?= $totals['profit']>=0?'purple':'red' ?>"><i class="bi bi-cash-stack"></i></div><div><div class="stat-val" style="font-size:1.1rem;color:<?= $totals['profit']>=0?'#7c3aed':'#dc2626' ?>"><?= Helper::money($totals['profit']) ?></div><div class="stat-lbl">Net Profit</div></div></div></div>
</div>

<div class="chart-card mb-4">
  <div class="chart-title mb-3">Monthly Breakdown (<?= $year ?>)</div>
  <div style="height:300px">
    <canvas id="incExpChart" data-values='<?= json_encode(['labels'=>array_column($chartData,'month'),'income'=>array_column($chartData,'income'),'expense'=>array_column($chartData,'expense')]) ?>'></canvas>
  </div>
</div>

<div class="data-card">
  <div class="table-responsive">
    <table class="table mb-0">
      <thead><tr><th>Month</th><th>Income (TZS)</th><th>Expenses (TZS)</th><th>Net (TZS)</th></tr></thead>
      <tbody>
        <?php foreach ($chartData as $row): ?>
        <tr>
          <td class="fw-600"><?= $row['month'] ?></td>
          <td class="text-success fw-600"><?= number_format($row['income']) ?></td>
          <td class="text-danger"><?= number_format($row['expense']) ?></td>
          <td class="<?= ($row['income']-$row['expense'])>=0?'text-primary fw-600':'text-danger' ?>"><?= number_format($row['income']-$row['expense']) ?></td>
        </tr>
        <?php endforeach; ?>
      </tbody>
      <tfoot class="table-light fw-700">
        <tr><td>TOTAL</td><td class="text-success"><?= number_format($totals['income']) ?></td><td class="text-danger"><?= number_format($totals['expense']) ?></td><td class="text-primary"><?= number_format($totals['profit']) ?></td></tr>
      </tfoot>
    </table>
  </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function(){
  var c = document.getElementById('incExpChart');
  if(c){ var d=JSON.parse(c.dataset.values);
    new Chart(c,{type:'bar',data:{labels:d.labels,datasets:[
      {label:'Income',data:d.income,backgroundColor:'rgba(22,163,74,0.7)',borderRadius:4},
      {label:'Expenses',data:d.expense,backgroundColor:'rgba(220,38,38,0.7)',borderRadius:4}
    ]},options:{responsive:true,maintainAspectRatio:false,plugins:{legend:{position:'top'}},scales:{x:{grid:{display:false}},y:{grid:{color:'rgba(0,0,0,0.04)'},ticks:{callback:function(v){return 'TZS '+Number(v).toLocaleString();}}}}}});
  }
});
</script>
<style>@media print{.admin-topbar,.admin-sidebar,.d-flex.mb-4{display:none!important}.admin-main{margin:0}}</style>
