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

<?= $this->section('content') ?>

<div class="row g-3 mb-3">
    <div class="col-12">
        <div class="card border-0 shadow-sm">
            <div class="card-body d-flex align-items-center justify-content-between py-3 flex-wrap gap-2">
                <div>
                    <h5 class="mb-0 fw-semibold text-primary">
                        <i class="bi bi-grid-3x3 me-2"></i>Kalender Pendidikan (Grid)
                    </h5>
                    <small class="text-muted">Tahun Ajaran <strong><?= esc($year['name']) ?></strong></small>
                </div>
                <div>
                    <a href="/academic-calendar/preview-grid/<?= $year['id'] ?>/landscape" target="_blank" class="btn btn-sm btn-success">
                        <i class="bi bi-printer me-1"></i>Preview & Cetak
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- GRID TAHUNAN -->
<div class="row g-3">
    <?php foreach ($months as $m): ?>
        <div class="col-12 col-sm-6 col-md-4 col-xl-3">
            <div class="card h-100 shadow-sm border border-light-subtle month-box overflow-hidden">
                <div class="month-name text-center text-white py-2 fw-bold" style="background: #2b3a4a; font-size: 0.85rem; letter-spacing: 0.03em;">
                    <?= cal_indo_month($m['month']) . ' ' . $m['year'] ?>
                </div>
                <div class="card-body p-0">
                    <table class="mini-cal w-100 text-center mb-0" style="table-layout: fixed; border-collapse: collapse;">
                        <thead>
                            <tr class="bg-light border-bottom">
                                <?php foreach ([0,1,2,3,4,5,6] as $dow): ?>
                                    <th class="py-1.5 text-muted fw-semibold <?= $dow===0 ? 'text-danger' : '' ?>" style="font-size: 0.72rem;">
                                        <?= cal_indo_day_short($dow) ?>
                                    </th>
                                <?php endforeach; ?>
                            </tr>
                        </thead>
                        <tbody>
                            <?php
                                $weeks = cal_month_matrix($m['year'], $m['month']);
                                foreach ($weeks as $week):
                            ?>
                                <tr class="border-bottom border-light-subtle">
                                <?php foreach ($week as $cell): ?>
                                    <?php
                                        if ($cell['date'] === null) {
                                            echo '<td class="blank bg-light bg-opacity-25" style="height: 30px;"></td>';
                                            continue;
                                        }
                                        $info  = $dayMap[$cell['date']] ?? null;
                                        $style = ''; $cls = '';
                                        if ($info) {
                                            $style = 'background:' . esc($info['color']) . ';';
                                            $style .= (int)$info['is_libur'] === 1 ? 'color:#fff;font-weight:700;' : 'color:#000;';
                                        } elseif ($cell['col'] === 0) {
                                            $cls = 'text-danger fw-bold';
                                            $style = 'background: rgba(220, 53, 69, 0.05);';
                                        }
                                    ?>
                                    <td class="<?= $cls ?> align-middle" style="<?= $style ?> height: 30px; font-size: 0.8rem;" <?php if ($info): ?>title="<?= esc($info['title']) ?>" data-bs-toggle="tooltip" data-bs-placement="top"<?php endif; ?>>
                                        <?= $cell['day'] ?>
                                    </td>
                                <?php endforeach; ?>
                                </tr>
                            <?php endforeach; ?>
                            <?php
                                // Padding baris kosong agar semua bulan setinggi 6 baris agar rapi
                                for ($er = count($weeks); $er < 6; $er++):
                            ?>
                                <tr class="border-bottom border-light-subtle">
                                    <?php for ($ec=0;$ec<7;$ec++) echo '<td class="fill bg-light bg-opacity-10" style="height: 30px;"></td>'; ?>
                                </tr>
                            <?php endfor; ?>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    <?php endforeach; ?>
</div>

<!-- LEGENDA -->
<div class="card mt-4 border-0 shadow-sm">
    <div class="card-header bg-white fw-semibold py-2">
        <i class="bi bi-info-circle me-1 text-primary"></i> Keterangan Kategori Kegiatan
    </div>
    <div class="card-body py-3">
        <div class="row g-2">
            <?php foreach ($categories as $c): ?>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                    <div class="d-flex align-items-center p-2 border rounded bg-light bg-opacity-25 h-100">
                        <span class="d-inline-block rounded me-2" style="width:18px;height:18px;background:<?= esc($c['color']) ?>; flex-shrink: 0; border: 1px solid rgba(0,0,0,0.1);"></span>
                        <div class="text-truncate">
                            <strong class="small" style="font-size: 0.8rem;"><?= esc($c['code']) ?></strong>
                            <span class="text-muted d-block text-truncate" style="font-size: 0.72rem;" title="<?= esc($c['name']) ?>"><?= esc($c['name']) ?></span>
                        </div>
                    </div>
                </div>
            <?php endforeach; ?>
        </div>
        <?php if (!empty($settings['source_reference'])): ?>
            <div class="mt-3 text-muted small border-top pt-2" style="font-size: 0.72rem;">
                Sumber acuan: <?= esc($settings['source_reference']) ?>
            </div>
        <?php endif; ?>
    </div>
</div>

<style>
/* Responsive tweaks */
.month-box {
    transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.month-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.08) !important;
}
</style>

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