alrahma_sunday_school/app/Views/slips/preview_list.php

<?php
$rows = $rows ?? [];
$groupedRows = [];
$dateOrder = [];

// Prepare data for grouping and chart
foreach ($rows as $r) {
  $dateKey = trim((string)($r['date'] ?? ''));
  if ($dateKey === '') $dateKey = 'Unknown Date';
  if (!array_key_exists($dateKey, $groupedRows)) {
    $groupedRows[$dateKey] = [];
    $dateOrder[] = $dateKey;
  }
  $groupedRows[$dateKey][] = $r;
}

// Prepare specific arrays for the Bar Chart
$chartData = [];
foreach ($dateOrder as $date) {
    $chartData[] = count($groupedRows[$date]);
}

$formatDateKey = function ($value) {
  if ($value === '' || $value === 'Unknown Date') return $value;
  if (preg_match('/^(\\d{1,2})\\/(\\d{1,2})\\/(\\d{4})(?:\\s.*)?$/', $value, $m)) {
    $mm = str_pad($m[1], 2, '0', STR_PAD_LEFT);
    $dd = str_pad($m[2], 2, '0', STR_PAD_LEFT);
    return $mm . '-' . $dd . '-' . $m[3];
  }
  if (preg_match('/^(\d{4})-(\d{2})-(\d{2})/', $value, $m)) {
    return $m[2] . '-' . $m[3] . '-' . $m[1];
  }
  try {
    return local_date($value, 'm-d-Y');
  } catch (Throwable $e) {
    return $value;
  }
};

$chartLabels = array_map($formatDateKey, $dateOrder);
?>

<?= $this->extend('layout/management_layout') ?>
<?= $this->section('content') ?>

<div class="container-fluid px-0 py-4">
  <div class="d-flex align-items-center justify-content-between flex-wrap gap-2 mb-3">
    <div>
        <h2 class="mb-0">Late Slip Preview</h2>
        <small class="text-muted">View and print student late slips</small>
    </div>
  </div>

  <form method="get" class="row gy-2 gx-3 align-items-end mb-4">
    <div class="col-md-4">
      <label class="form-label">School Year</label>
      <input type="text" class="form-control"
        name="school_year"
        value="<?= esc($school_year ?? ($_GET['school_year'] ?? '')) ?>"
        placeholder="e.g. 2025-2026">
    </div>
    <div class="col-md-3">
      <label class="form-label">Semester</label>
      <?php $semVal = strtolower(trim((string)($semester ?? ($_GET['semester'] ?? '')))); ?>
      <select name="semester" class="form-select" onchange="if(!this.value) this.removeAttribute('name')">
        <option value="">All Semesters</option>
        <option value="fall" <?= $semVal === 'fall'   ? 'selected' : '' ?>>Fall</option>
        <option value="spring" <?= $semVal === 'spring' ? 'selected' : '' ?>>Spring</option>
      </select>
    </div>
    <div class="col-md-2">
      <button type="submit" class="btn btn-primary w-100">Filter</button>
    </div>
  </form>

  <?php if (empty($rows)): ?>
    <div class="alert alert-light border">No slips found.</div>
  <?php else: ?>
    
    <div class="row mb-4">
        <div class="col-12">
            <div class="card shadow-sm border-0">
                <div class="card-header bg-white py-3">
                    <h5 class="card-title mb-0 fw-bold text-primary">Late Statistics by Date</h5>
                </div>
                <div class="card-body">
                    <div style="position: relative; height: 300px; width: 100%;">
                        <canvas id="lateChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <?php foreach ($dateOrder as $dateKey): ?>
      <?php $groupRows = $groupedRows[$dateKey] ?? []; ?>
      <div class="card mb-4">
        <div class="card-header d-flex align-items-center justify-content-between flex-wrap gap-2">
          <div class="fw-semibold">Date: <?= esc($formatDateKey($dateKey)) ?></div>
          <span class="badge bg-secondary"><?= count($groupRows) ?> slips</span>
        </div>
        <div class="table-responsive">
          <table class="table table-striped table-bordered align-middle w-100 slip-preview-table" data-no-mgmt-sticky>
            <thead class="table-light">
              <tr>
                <th>Student Name</th>
                <th>Time In</th>
                <th>Grade</th>
                <th>Reason</th>
                <th>School Year</th>
                <th>Semester</th>
                <th>Admin Name</th>
                <th>Action</th>
              </tr>
            </thead>
            <tbody>
              <?php foreach ($groupRows as $r): ?>
                <?php
                $sem = strtolower(trim((string)($r['semester'] ?? '')));
                if ($sem === '1') $sem = 'Fall';
                elseif ($sem === '2') $sem = 'Spring';
                elseif ($sem === '') $sem = '-';
                else $sem = ucfirst($sem);
                ?>
                <tr>
                  <td><?= esc($r['student_name'] ?? '') ?></td>
                  <td><?= esc($r['time_in'] ?? '') ?></td>
                  <td><?= esc($r['grade'] ?? '') ?></td>
                  <td><?= esc($r['reason'] ?? '') ?></td>
                  <td><?= esc($r['school_year'] ?? '') ?></td>
                  <td><?= esc($sem) ?></td>
                  <td><?= esc($r['admin_name'] ?? '') ?></td>
                  <td>
                    <form action="<?= site_url('slips/print') ?>" method="post" class="d-inline">
                      <?= csrf_field() ?>
                      <?php foreach (['student_name', 'date', 'time_in', 'grade', 'reason', 'school_year', 'semester', 'admin_name'] as $f): ?>
                        <input type="hidden" name="<?= esc($f) ?>" value="<?= esc($r[$f] ?? '', 'attr') ?>">
                      <?php endforeach; ?>
                      <button type="submit" class="btn btn-sm btn-primary">Print</button>
                    </form>
                  </td>
                </tr>
              <?php endforeach; ?>
            </tbody>
          </table>
        </div>
      </div>
    <?php endforeach; ?>
  <?php endif; ?>
</div>

<?= $this->endSection() ?>

<?= $this->section('scripts') ?>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const ctx = document.getElementById('lateChart').getContext('2d');
    
    // PHP to JS data conversion
    const labels = <?= json_encode($chartLabels) ?>;
    const counts = <?= json_encode($chartData) ?>;

    new Chart(ctx, {
        type: 'bar',
        data: {
            labels: labels,
            datasets: [{
                label: 'Slips per Day',
                data: counts,
                backgroundColor: 'rgba(13, 110, 253, 0.7)', // Bootstrap Primary Blue
                borderColor: 'rgb(13, 110, 253)',
                borderWidth: 1,
                borderRadius: 5,
                barThickness: 40
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: { display: false }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: { precision: 0 },
                    title: { display: true, text: 'Total Slips' }
                },
                x: {
                    title: { display: true, text: 'Recorded Dates' }
                }
            }
        }
    });
});
</script>
<?= $this->endSection() ?>