<?php
require_once 'includes/config.php';
require_once 'includes/mailer.php';
requireLogin();
$uid    = $_SESSION['user_id'];
$period = $_GET['period'] ?? 'week';
$month  = (int)($_GET['month'] ?? date('n'));
$year   = (int)($_GET['year']  ?? date('Y'));

if ($period === 'week') {
    $dateFrom = date('Y-m-d', strtotime('monday this week'));
    $dateTo   = date('Y-m-d', strtotime('sunday this week'));
    $label    = 'Week of ' . date('M j', strtotime($dateFrom)) . ' – ' . date('M j, Y', strtotime($dateTo));
} else {
    $dateFrom = date("$year-" . str_pad($month,2,'0',STR_PAD_LEFT) . '-01');
    $dateTo   = date('Y-m-t', strtotime($dateFrom));
    $label    = date('F Y', strtotime($dateFrom));
}

// Study stats
$q = $pdo->prepare("SELECT COALESCE(SUM(duration_minutes),0) FROM study_sessions WHERE user_id=? AND date BETWEEN ? AND ?"); $q->execute([$uid,$dateFrom,$dateTo]); $totalMins = (int)$q->fetchColumn();
$q = $pdo->prepare("SELECT COUNT(DISTINCT date) FROM study_sessions WHERE user_id=? AND date BETWEEN ? AND ?"); $q->execute([$uid,$dateFrom,$dateTo]); $studyDays = (int)$q->fetchColumn();
$q = $pdo->prepare("SELECT COUNT(*) FROM study_sessions WHERE user_id=? AND date BETWEEN ? AND ?"); $q->execute([$uid,$dateFrom,$dateTo]); $sessions = (int)$q->fetchColumn();
$q = $pdo->prepare("SELECT COUNT(*),COALESCE(AVG(marks_obtained/total_marks*100),0) FROM marks WHERE user_id=? AND exam_date BETWEEN ? AND ?"); $q->execute([$uid,$dateFrom,$dateTo]); [$exams,$avgMark] = $q->fetch(PDO::FETCH_NUM);
$avgMark = round($avgMark,1);
$q = $pdo->prepare("SELECT COUNT(*) FROM tasks WHERE user_id=? AND status='completed' AND created_at BETWEEN ? AND ?"); $q->execute([$uid,$dateFrom." 00:00:00",$dateTo." 23:59:59"]); $tasksCompleted = (int)$q->fetchColumn();

// Subject breakdown
$subStats = $pdo->prepare("SELECT s.name, s.color, SUM(ss.duration_minutes) as mins, COUNT(*) as sessions FROM study_sessions ss JOIN subjects s ON ss.subject_id=s.id WHERE ss.user_id=? AND ss.date BETWEEN ? AND ? GROUP BY ss.subject_id ORDER BY mins DESC");
$subStats->execute([$uid,$dateFrom,$dateTo]); $subStats = $subStats->fetchAll();

// Daily breakdown
$dailyStats = $pdo->prepare("SELECT date, SUM(duration_minutes) as mins FROM study_sessions WHERE user_id=? AND date BETWEEN ? AND ? GROUP BY date ORDER BY date ASC");
$dailyStats->execute([$uid,$dateFrom,$dateTo]); $dailyStats = $dailyStats->fetchAll();

// Marks list
$marksList = $pdo->prepare("SELECT m.*, s.name as subject_name, s.color as color FROM marks m JOIN subjects s ON m.subject_id=s.id WHERE m.user_id=? AND m.exam_date BETWEEN ? AND ? ORDER BY m.exam_date DESC");
$marksList->execute([$uid,$dateFrom,$dateTo]); $marksList = $marksList->fetchAll();

// Achievements
$achEarned = $pdo->prepare("SELECT ad.title,ad.icon FROM user_achievements ua JOIN achievement_defs ad ON ua.achievement_id=ad.id WHERE ua.user_id=? AND ua.earned_at BETWEEN ? AND ?");
$achEarned->execute([$uid,$dateFrom." 00:00:00",$dateTo." 23:59:59"]); $achEarned = $achEarned->fetchAll();

// Weekly email
if ($period === 'week' && date('N') === '1' && !isset($_GET['no_mail'])) {
    $streakQ = $pdo->prepare("SELECT COUNT(*) FROM (SELECT DISTINCT date FROM study_sessions WHERE user_id=? AND date >= DATE_SUB(CURDATE(), INTERVAL 30 DAY) ORDER BY date DESC) t");
    $streakQ->execute([$uid]); $streakDays = (int)$streakQ->fetchColumn();
    $weeklyGoalMins = 35 * 60;
    $goalPct = $weeklyGoalMins > 0 ? min(100, round($totalMins / $weeklyGoalMins * 100)) : 0;
    $topSubject = !empty($subStats) ? $subStats[0]['name'] : 'N/A';
    $subjectList = array_map(fn($s) => ['name' => $s['name'], 'hours' => round($s['mins']/60, 1)], $subStats);
    $userEmail = $_SESSION['user_email'] ?? '';
    $userName  = $_SESSION['user_name']  ?? '';
    if ($userEmail) {
        sendWeeklyReport($userEmail, $userName, [
            'total_hours'    => round($totalMins / 60, 1),
            'total_sessions' => $sessions,
            'top_subject'    => $topSubject,
            'streak_days'    => $streakDays,
            'goal_percent'   => $goalPct,
            'subjects'       => $subjectList,
        ]);
    }
}

$totalHours = floor($totalMins / 60);
$totalMinRem = $totalMins % 60;
$avgPerDay = $studyDays > 0 ? round($totalMins / $studyDays) : 0;

require_once 'includes/header.php';
renderHeader('Report', 'report');
?>

<style>
/* ── Page header ──────────────────────────────── */
.rp-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.rp-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary);
  font-family: 'Sora', sans-serif;
  letter-spacing: -.3px;
}
.rp-label { font-size: 13px; color: var(--text-muted); margin-top: 4px; }

/* ── Period switcher ─────────────────────────── */
.rp-controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.period-tabs {
  display: flex;
  gap: 4px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 3px;
}
.period-tab {
  padding: 6px 16px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
  font-family: inherit;
}
.period-tab.active {
  background: var(--bg-card);
  color: var(--text-primary);
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.month-tabs {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
}
.month-tab {
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
  font-family: inherit;
}
.month-tab:hover { border-color: var(--accent); color: var(--accent); }
.month-tab.active { background: rgba(99,102,241,.12); border-color: rgba(99,102,241,.4); color: var(--accent); }

/* ── Stat cards ──────────────────────────────── */
.rp-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}
.rp-stat {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  overflow: hidden;
}
.rp-stat::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  border-radius: 14px 14px 0 0;
}
.rp-stat-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.rp-stat-val {
  font-size: 24px;
  font-weight: 800;
  color: var(--text-primary);
  font-family: 'Sora', sans-serif;
  letter-spacing: -.5px;
  line-height: 1;
}
.rp-stat-label {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
}

/* ── Grid layouts ────────────────────────────── */
.rp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
@media (max-width: 768px) { .rp-grid { grid-template-columns: 1fr; } }

/* ── Card shared ─────────────────────────────── */
.rp-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}
.rp-card-header {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.rp-card-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}
.rp-card-body { padding: 16px 18px; }

/* ── Subject progress bars ───────────────────── */
.sub-row { margin-bottom: 14px; }
.sub-row:last-child { margin-bottom: 0; }
.sub-row-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  gap: 8px;
}
.sub-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 7px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
.sub-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.sub-time { font-size: 12px; color: var(--text-muted); flex-shrink: 0; }
.sub-bar-wrap {
  height: 7px;
  background: var(--bg-secondary);
  border-radius: 99px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.sub-bar-fill {
  height: 100%;
  border-radius: 99px;
  transition: width .6s cubic-bezier(.4,0,.2,1);
}

/* ── Exam results table ──────────────────────── */
.rp-table {
  width: 100%;
  border-collapse: collapse;
}
.rp-table th {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 10px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  background: var(--bg-secondary);
}
.rp-table td {
  padding: 12px 16px;
  font-size: 13px;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.rp-table tr:last-child td { border-bottom: none; }
.rp-table tr:hover td { background: rgba(255,255,255,.02); }
.grade-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 24px;
  padding: 0 8px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .3px;
}

/* ── Achievement chips ───────────────────────── */
.ach-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(245,158,11,.08);
  border: 1px solid rgba(245,158,11,.2);
  border-radius: 10px;
  padding: 8px 14px;
  transition: all .15s;
}
.ach-chip:hover { background: rgba(245,158,11,.14); border-color: rgba(245,158,11,.35); }

/* ── Empty ───────────────────────────────────── */
.rp-empty {
  text-align: center;
  padding: 36px 16px;
  color: var(--text-muted);
  font-size: 13px;
}

/* ── Print ───────────────────────────────────── */
@media print {
  .sidebar, .topbar { display: none !important; }
  .main-content { margin-left: 0 !important; }
  body { background: #fff !important; color: #000 !important; }
  .rp-card, .rp-stat { border: 1px solid #ddd !important; background: #fff !important; break-inside: avoid; }
  .rp-stat-val, .rp-card-title, .rp-title { color: #000 !important; }
  .rp-stat-label, .rp-label, .sub-time { color: #666 !important; }
}
</style>

<!-- Page Header -->
<div class="rp-header">
  <div>
    <div class="rp-title">
      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" style="color:var(--accent);margin-right:8px;vertical-align:-3px"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>
      Study Report
    </div>
    <div class="rp-label">📅 <?= htmlspecialchars($label) ?></div>
  </div>

  <div class="rp-controls">
    <!-- Period tabs -->
    <div class="period-tabs">
      <button class="period-tab <?= $period==='week'?'active':'' ?>" onclick="location.href='?period=week'">This Week</button>
      <button class="period-tab <?= $period==='month'?'active':'' ?>" onclick="location.href='?period=month&month=<?= $month ?>&year=<?= $year ?>'">Monthly</button>
    </div>

    <?php if ($period === 'month'): ?>
    <!-- Month selector -->
    <div class="month-tabs">
      <?php for ($m = 1; $m <= 12; $m++): ?>
      <button class="month-tab <?= $m===$month?'active':'' ?>" onclick="location.href='?period=month&month=<?= $m ?>&year=<?= $year ?>'">
        <?= date('M', mktime(0,0,0,$m,1)) ?>
      </button>
      <?php endfor; ?>
    </div>
    <?php endif; ?>

    <button class="btn btn-secondary btn-sm" onclick="window.print()" style="flex-shrink:0">
      <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" style="margin-right:5px"><polyline points="6 9 6 2 18 2 18 9"/><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"/><rect x="6" y="14" width="12" height="8"/></svg>
      Print
    </button>
  </div>
</div>

<!-- Summary Stats -->
<div class="rp-stats">
  <div class="rp-stat" style="--c:rgba(56,189,248,1)">
    <style>.rp-stat:nth-child(1)::before{background:linear-gradient(90deg,#38bdf8,#6366f1)}</style>
    <div class="rp-stat-icon" style="background:rgba(56,189,248,.12)">⏱️</div>
    <div class="rp-stat-val"><?= $totalHours ?>h <?= $totalMinRem ?>m</div>
    <div class="rp-stat-label">Total Study Time</div>
  </div>
  <div class="rp-stat">
    <style>.rp-stat:nth-child(2)::before{background:linear-gradient(90deg,#818cf8,#a855f7)}</style>
    <div class="rp-stat-icon" style="background:rgba(129,140,248,.12)">📅</div>
    <div class="rp-stat-val"><?= $studyDays ?></div>
    <div class="rp-stat-label">Days Studied</div>
  </div>
  <div class="rp-stat">
    <style>.rp-stat:nth-child(3)::before{background:linear-gradient(90deg,#34d399,#06b6d4)}</style>
    <div class="rp-stat-icon" style="background:rgba(52,211,153,.12)">📝</div>
    <div class="rp-stat-val"><?= $sessions ?></div>
    <div class="rp-stat-label">Study Sessions</div>
  </div>
  <div class="rp-stat">
    <style>.rp-stat:nth-child(4)::before{background:linear-gradient(90deg,#fbbf24,#f97316)}</style>
    <div class="rp-stat-icon" style="background:rgba(251,191,36,.12)">🎯</div>
    <div class="rp-stat-val"><?= $avgMark ?>%</div>
    <div class="rp-stat-label">Avg Score <?php if ($exams): ?><span style="font-size:11px;color:var(--text-muted)">(<?= $exams ?> exams)</span><?php endif; ?></div>
  </div>
  <div class="rp-stat">
    <style>.rp-stat:nth-child(5)::before{background:linear-gradient(90deg,#f472b6,#a855f7)}</style>
    <div class="rp-stat-icon" style="background:rgba(244,114,182,.12)">✅</div>
    <div class="rp-stat-val"><?= $tasksCompleted ?></div>
    <div class="rp-stat-label">Tasks Completed</div>
  </div>
  <div class="rp-stat">
    <style>.rp-stat:nth-child(6)::before{background:linear-gradient(90deg,#2dd4bf,#6366f1)}</style>
    <div class="rp-stat-icon" style="background:rgba(45,212,191,.12)">📊</div>
    <div class="rp-stat-val"><?= floor($avgPerDay/60) ?>h <?= $avgPerDay%60 ?>m</div>
    <div class="rp-stat-label">Avg Per Study Day</div>
  </div>
</div>

<!-- Charts row -->
<div class="rp-grid" style="margin-bottom:14px">
  <!-- Daily chart -->
  <div class="rp-card">
    <div class="rp-card-header">
      <div class="rp-card-title">
        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" style="color:var(--accent)"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/></svg>
        Daily Study Time
      </div>
    </div>
    <div class="rp-card-body">
      <?php if ($dailyStats): ?>
      <div style="height:190px"><canvas id="dailyChart"></canvas></div>
      <?php else: ?>
      <div class="rp-empty">📈 No sessions this period</div>
      <?php endif; ?>
    </div>
  </div>

  <!-- Subject breakdown -->
  <div class="rp-card">
    <div class="rp-card-header">
      <div class="rp-card-title">
        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" style="color:var(--accent)"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg>
        Subject Breakdown
      </div>
    </div>
    <div class="rp-card-body">
      <?php if ($subStats):
        $maxMins = max(array_column($subStats,'mins'));
        foreach ($subStats as $s):
          $pct = $maxMins > 0 ? round(($s['mins'] / $maxMins) * 100) : 0;
          $h = floor($s['mins']/60); $m = $s['mins']%60;
      ?>
      <div class="sub-row">
        <div class="sub-row-top">
          <div class="sub-name">
            <span class="sub-dot" style="background:<?= htmlspecialchars($s['color']) ?>"></span>
            <?= htmlspecialchars($s['name']) ?>
          </div>
          <span class="sub-time"><?= $h ?>h <?= $m ?>m · <?= $s['sessions'] ?> sessions</span>
        </div>
        <div class="sub-bar-wrap">
          <div class="sub-bar-fill" style="width:<?= $pct ?>%;background:<?= htmlspecialchars($s['color']) ?>"></div>
        </div>
      </div>
      <?php endforeach; else: ?>
      <div class="rp-empty">📚 No study sessions this period</div>
      <?php endif; ?>
    </div>
  </div>
</div>

<!-- Exam results -->
<?php if ($marksList): ?>
<div class="rp-card" style="margin-bottom:14px">
  <div class="rp-card-header">
    <div class="rp-card-title">
      <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" style="color:var(--accent)"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
      Exam Results
    </div>
    <span style="font-size:12px;color:var(--text-muted)"><?= count($marksList) ?> exams</span>
  </div>
  <div style="overflow-x:auto">
    <table class="rp-table">
      <thead>
        <tr>
          <th>Date</th>
          <th>Exam</th>
          <th>Subject</th>
          <th>Score</th>
          <th>Grade</th>
        </tr>
      </thead>
      <tbody>
        <?php foreach ($marksList as $m):
          $pct   = round(($m['marks_obtained']/$m['total_marks'])*100);
          $grade = $pct>=75?'A':($pct>=65?'B':($pct>=55?'C':($pct>=40?'S':'F')));
          $gc    = $pct>=75?['#34d399','rgba(16,185,129,.15)','rgba(16,185,129,.25)']:
                   ($pct>=55?['#fbbf24','rgba(245,158,11,.15)','rgba(245,158,11,.25)']:
                             ['#f87171','rgba(239,68,68,.15)','rgba(239,68,68,.25)']);
        ?>
        <tr>
          <td style="color:var(--text-primary);font-weight:600"><?= date('M j, Y', strtotime($m['exam_date'])) ?></td>
          <td style="color:var(--text-primary)"><?= htmlspecialchars($m['exam_name']) ?></td>
          <td>
            <span style="display:inline-flex;align-items:center;gap:6px">
              <span class="sub-dot" style="background:<?= htmlspecialchars($m['color'] ?? '#6366f1') ?>"></span>
              <?= htmlspecialchars($m['subject_name']) ?>
            </span>
          </td>
          <td>
            <span style="font-weight:700;color:var(--text-primary)"><?= $m['marks_obtained'] ?>/<?= $m['total_marks'] ?></span>
            <span style="color:var(--text-muted);font-size:12px"> (<?= $pct ?>%)</span>
          </td>
          <td>
            <span class="grade-pill" style="color:<?= $gc[0] ?>;background:<?= $gc[1] ?>;border:1px solid <?= $gc[2] ?>"><?= $grade ?></span>
          </td>
        </tr>
        <?php endforeach; ?>
      </tbody>
    </table>
  </div>
</div>
<?php endif; ?>

<!-- Achievements earned -->
<?php if ($achEarned): ?>
<div class="rp-card" style="margin-bottom:14px">
  <div class="rp-card-header">
    <div class="rp-card-title">
      <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" style="color:#fbbf24"><circle cx="12" cy="8" r="6"/><path d="M15.477 12.89L17 22l-5-3-5 3 1.523-9.11"/></svg>
      Achievements Earned This Period
    </div>
  </div>
  <div class="rp-card-body">
    <div style="display:flex;flex-wrap:wrap;gap:8px">
      <?php foreach ($achEarned as $a): ?>
      <div class="ach-chip">
        <span style="font-size:20px"><?= $a['icon'] ?></span>
        <span style="font-size:13px;font-weight:600;color:var(--text-primary)"><?= htmlspecialchars($a['title']) ?></span>
      </div>
      <?php endforeach; ?>
    </div>
  </div>
</div>
<?php endif; ?>

<?php require_once 'includes/footer.php'; renderFooter(); ?>

<script>
<?php if ($dailyStats): ?>
const dailyMins   = <?= json_encode(array_column($dailyStats,'mins')) ?>;
const dailyLabels = <?= json_encode(array_map(fn($d) => date('M j', strtotime($d['date'])), $dailyStats)) ?>;

const ctx = document.getElementById('dailyChart');
if (ctx) {
  new Chart(ctx.getContext('2d'), {
    type: 'bar',
    data: {
      labels: dailyLabels,
      datasets: [{
        data: dailyMins,
        backgroundColor: 'rgba(99,102,241,.25)',
        borderColor: '#6366f1',
        borderWidth: 2,
        borderRadius: 7,
        hoverBackgroundColor: 'rgba(99,102,241,.45)',
      }]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      plugins: { legend: { display: false }, tooltip: {
        callbacks: {
          label: ctx => {
            const m = ctx.raw;
            return Math.floor(m/60) + 'h ' + (m%60) + 'm';
          }
        }
      }},
      scales: {
        x: { grid: { display: false }, ticks: { color: 'var(--text-muted)', font: { size: 11 } } },
        y: {
          grid: { color: 'rgba(255,255,255,.04)' },
          ticks: {
            color: 'var(--text-muted)',
            callback: v => Math.floor(v/60) + 'h',
            font: { size: 11 }
          },
          beginAtZero: true
        }
      }
    }
  });
}
<?php endif; ?>
</script>