<?= $this->extend('layouts/mobile') ?>

<?= $this->section('header') ?>
<?= view('layouts/_inner_header', ['title' => $title ?? 'Analytics']) ?>
<?= $this->endSection() ?>

<?= $this->section('content') ?>
<?php
$analytics = $analytics ?? [
    'status'   => ['is_empty' => true, 'pending' => ['count' => 0, 'percent_label' => '0'], 'completed' => ['count' => 0, 'percent_label' => '0']],
    'priority' => ['is_empty' => true, 'items' => []],
    'category' => ['is_empty' => true, 'items' => []],
];
$status               = $analytics['status'];
$priority             = $analytics['priority'];
$category             = $analytics['category'];
$emptyMessage         = $emptyMessage ?? 'No task data yet.';
$emptyCategoryMessage = $emptyCategoryMessage ?? 'No pending tasks yet.';
?>
<p class="page-lead">View at a glance how you've been keeping up with completing tasks in hand.</p>

<script type="application/json" id="analytics-data"><?= $analyticsJson ?? '{}' ?></script>

<section class="analytics-section" aria-labelledby="analytics-status-heading">
    <h2 id="analytics-status-heading" class="analytics-heading">Completed vs Pending</h2>
    <?php if (! empty($status['is_empty'])): ?>
        <p class="analytics-empty"><?= esc($emptyMessage) ?></p>
    <?php else: ?>
        <div class="analytics-block">
            <div class="analytics-chart-wrap">
                <canvas id="analytics-status-chart" aria-label="Completed versus pending occurrences"></canvas>
            </div>
            <ul class="analytics-legend">
                <li>
                    <span class="analytics-swatch" style="background:#e53935" aria-hidden="true"></span>
                    <div class="analytics-legend-text">
                        <div class="analytics-legend-label">Pending</div>
                        <div class="analytics-legend-meta"><?= esc($status['pending']['percent_label']) ?>% · <?= (int) $status['pending']['count'] ?></div>
                    </div>
                </li>
                <li>
                    <span class="analytics-swatch" style="background:#7cb342" aria-hidden="true"></span>
                    <div class="analytics-legend-text">
                        <div class="analytics-legend-label">Completed</div>
                        <div class="analytics-legend-meta"><?= esc($status['completed']['percent_label']) ?>% · <?= (int) $status['completed']['count'] ?></div>
                    </div>
                </li>
            </ul>
        </div>
    <?php endif; ?>
</section>

<section class="analytics-section" aria-labelledby="analytics-priority-heading">
    <h2 id="analytics-priority-heading" class="analytics-heading">Tasks by Priority</h2>
    <?php if (! empty($priority['is_empty'])): ?>
        <p class="analytics-empty"><?= esc($emptyMessage) ?></p>
    <?php else: ?>
        <div class="analytics-block">
            <div class="analytics-chart-wrap">
                <canvas id="analytics-priority-chart" aria-label="Occurrences by priority"></canvas>
            </div>
            <ul class="analytics-legend">
                <?php foreach ($priority['items'] as $item): ?>
                    <li>
                        <span class="analytics-swatch" style="background:<?= esc($item['color'], 'attr') ?>" aria-hidden="true"></span>
                        <div class="analytics-legend-text">
                            <div class="analytics-legend-label"><?= esc($item['label']) ?></div>
                            <div class="analytics-legend-meta"><?= esc($item['percent_label']) ?>% · <?= (int) $item['count'] ?></div>
                        </div>
                    </li>
                <?php endforeach; ?>
            </ul>
        </div>
    <?php endif; ?>
</section>

<section class="analytics-section" aria-labelledby="analytics-category-heading">
    <h2 id="analytics-category-heading" class="analytics-heading">Tasks by Category</h2>
    <?php if (! empty($category['is_empty'])): ?>
        <p class="analytics-empty"><?= esc(! empty($status['is_empty']) ? $emptyMessage : $emptyCategoryMessage) ?></p>
    <?php else: ?>
        <div class="analytics-block">
            <div class="analytics-chart-wrap">
                <canvas id="analytics-category-chart" aria-label="Pending occurrences by category"></canvas>
            </div>
            <ul class="analytics-legend">
                <?php foreach ($category['items'] as $item): ?>
                    <li>
                        <span class="analytics-swatch" style="background:<?= esc($item['color'], 'attr') ?>" aria-hidden="true"></span>
                        <div class="analytics-legend-text">
                            <div class="analytics-legend-label"><?= esc($item['name']) ?></div>
                            <div class="analytics-legend-meta"><?= esc($item['percent_label']) ?>% · <?= (int) $item['count'] ?></div>
                        </div>
                    </li>
                <?php endforeach; ?>
            </ul>
        </div>
    <?php endif; ?>
</section>
<?= $this->endSection() ?>
