<?php $this->start('body');
    include __DIR__ . '/_dash_header.php';
    include __DIR__ . '/_kpi_strip.php';
?>

<div class="row g-3">
  <div class="col-lg-7">
    <div class="card border-0 shadow-sm h-100"><div class="card-body">
      <div class="d-flex justify-content-between align-items-baseline mb-2">
        <h6 class="text-uppercase text-muted small mb-0">Top suppliers by spend &middot; YTD</h6>
        <a href="<?= PROOT; ?>Suppliers" class="small text-decoration-none">Suppliers &rarr;</a>
      </div>
      <div id="c-top" style="min-height: 300px;"></div>
    </div></div>
  </div>
  <div class="col-lg-5">
    <div class="card border-0 shadow-sm h-100"><div class="card-body">
      <div class="d-flex justify-content-between align-items-baseline mb-2">
        <h6 class="text-uppercase text-muted small mb-0">Payables aging</h6>
        <a href="<?= PROOT; ?>AgedPayables" class="small text-decoration-none">All &rarr;</a>
      </div>
      <div id="c-aging" style="min-height: 260px;"></div>
    </div></div>
  </div>
</div>

<div class="row g-3 mt-1">
  <div class="col-lg-7">
    <div class="card border-0 shadow-sm h-100"><div class="card-body">
      <div class="d-flex justify-content-between align-items-baseline mb-2">
        <h6 class="text-uppercase text-muted small mb-0">Bill vs Payment volume &middot; 6 months</h6>
        <a href="<?= PROOT; ?>SupplierBills" class="small text-decoration-none">Bills &rarr;</a>
      </div>
      <div id="c-vol" style="min-height: 260px;"></div>
    </div></div>
  </div>
  <div class="col-lg-5">
    <div class="card border-0 shadow-sm h-100"><div class="card-body">
      <div class="d-flex justify-content-between align-items-baseline mb-2">
        <h6 class="text-uppercase text-muted small mb-0">Avg days to pay</h6>
      </div>
      <div id="c-dtp" style="min-height: 260px;"></div>
    </div></div>
  </div>
</div>

<!-- Zone 4 · Activity -->
<div class="row g-3 mt-1">
  <div class="col-12"><?php include __DIR__ . '/_feed_bills.php'; ?></div>
</div>

<div class="row g-3 mt-1">
  <div class="col-12">
    <div class="card border-0 shadow-sm"><div class="card-body">
      <h6 class="text-uppercase text-muted small mb-3">Procurement shortcuts</h6>
      <div class="d-flex flex-wrap gap-2">
        <a href="<?= PROOT; ?>SupplierBills" class="btn btn-sm btn-outline-primary"><i class="fas fa-file-invoice me-1"></i>Supplier bills</a>
        <a href="<?= PROOT; ?>SupplierPayments/record" class="btn btn-sm btn-outline-primary"><i class="fas fa-money-bill-transfer me-1"></i>Record payment</a>
        <a href="<?= PROOT; ?>AgedPayables" class="btn btn-sm btn-outline-primary"><i class="fas fa-clock me-1"></i>Aged payables</a>
        <a href="<?= PROOT; ?>SupplierStatements" class="btn btn-sm btn-outline-primary"><i class="fas fa-file-invoice-dollar me-1"></i>Statements</a>
        <a href="<?= PROOT; ?>Suppliers/add" class="btn btn-sm btn-outline-primary"><i class="fas fa-plus me-1"></i>Add supplier</a>
        <a href="<?= PROOT; ?>WorkRequests" class="btn btn-sm btn-outline-primary"><i class="fas fa-hand-paper me-1"></i>Work requests</a>
      </div>
    </div></div>
  </div>
</div>

<?php $this->end(); $this->start('section_js'); ?>
<script>
document.addEventListener('DOMContentLoaded', function () {
  new PacificChart('#c-top',   'bar',
    <?= json_encode(array_merge($this->data['charts']['top']   ?? [], ['tzs' => true, 'horizontal' => true, 'distributed' => true, 'colors' => 'penta'])); ?>);
  new PacificChart('#c-aging', 'donut',
    <?= json_encode(array_merge($this->data['charts']['aging'] ?? [], ['tzs' => true, 'colors' => 'aging'])); ?>);
  new PacificChart('#c-vol',   'bar',
    <?= json_encode(array_merge($this->data['charts']['vol']   ?? [], ['colors' => 'duo'])); ?>);
  new PacificChart('#c-dtp',   'line',
    <?= json_encode(array_merge($this->data['charts']['dtp']   ?? [], ['suffix' => 'd'])); ?>);
});
</script>
<?php $this->end(); ?>
