<!DOCTYPE html>
<html lang="id">
<head>
    <?php helper('logo'); ?>
    <link rel="icon" type="image/png" href="<?= getLogo('sekolah') ?>">
    <meta charset="UTF-8">
    <title>Preview Grid Landscape — <?= esc($year['name']) ?></title>
    <style>
        /* ── TOOLBAR ── */
        #toolbar {
            position: fixed; top: 0; left: 0; right: 0; z-index: 999;
            background: #1e2a3a; color: #fff;
            display: flex; align-items: center; gap: 10px;
            padding: 9px 20px; font-family: sans-serif; font-size: 13px;
            box-shadow: 0 2px 8px rgba(0,0,0,.4);
        }
        #toolbar .title { flex: 1; font-weight: 600; font-size: 13px; }
        #toolbar a.back { color: #94b8d4; text-decoration: none; font-size: 12px; }
        #toolbar a.back:hover { color: #fff; }
        .btn { border: none; padding: 6px 16px; border-radius: 5px; cursor: pointer; font-size: 13px; font-weight: 600; text-decoration: none; display: inline-block; }
        .btn-pdf  { background: #dc3545; color: #fff; }
        .btn-pdf:hover  { background: #b02a37; color: #fff; }
        .btn-print { background: #198754; color: #fff; }
        .btn-print:hover { background: #146c43; }

        /* ── PAGE ── */
        body { margin: 0; padding: 58px 0 24px; background: #dde3ea; font-family: 'Segoe UI', Arial, sans-serif; font-size: 9px; color: #222; }
        .page-wrap {
            width: 277mm; margin: 18px auto; background: #fff;
            padding: 8mm 8mm 6mm; box-shadow: 0 3px 16px rgba(0,0,0,.18);
            border-radius: 2px;
        }

        /* ── HEADER ── */
        .doc-school { text-align: center; font-size: 11.5px; font-weight: 700; margin: 0 0 1px; text-transform: uppercase; letter-spacing: .03em; }
        .doc-title  { text-align: center; font-size: 13px; font-weight: 700; text-transform: uppercase; margin: 0; letter-spacing: .05em; }
        .doc-sub    { text-align: center; font-size: 10px; margin: 1px 0 6px; color: #444; }
        .divider    { border: none; border-top: 2px solid #343a40; margin: 0 0 5px; }

        /* ── GRID ── */
        table.grid-outer { width: 100%; border-collapse: separate; border-spacing: 3px; table-layout: fixed; }
        table.grid-outer > tr > td { width: 25%; vertical-align: top; padding: 0; }

        .month-box {
            border: 1px solid #adb5bd;
            border-radius: 3px;
            overflow: hidden;
            display: flex; flex-direction: column;
            height: 100%;
            box-shadow: 0 1px 3px rgba(0,0,0,.08);
        }
        .month-name {
            background: #343a40; color: #fff;
            text-align: center; font-weight: 700; font-size: 8.5px;
            padding: 3px 0; letter-spacing: .04em; flex-shrink: 0;
        }

        table.mini-cal { width: 100%; border-collapse: collapse; table-layout: fixed; flex: 1; }
        table.mini-cal th {
            background: #f1f3f5; font-size: 7px; font-weight: 600;
            text-align: center; padding: 2px 0; border-bottom: 1px solid #dee2e6;
            color: #495057;
        }
        table.mini-cal th.dow-min { color: #c00; }
        table.mini-cal td {
            text-align: center; font-size: 7.5px; padding: 0;
            height: 13px; border: none;
        }
        table.mini-cal tr:not(:last-child) td { border-bottom: 1px solid #f0f0f0; }
        table.mini-cal td.dow-min  { color: #c00; }
        table.mini-cal td.blank    { background: #fafafa; }
        table.mini-cal td.fill     { background: #f8f9fa; }

        /* ── LEGEND ── */
        .legend-wrap { margin-top: 5px; }
        table.legend { width: 100%; border-collapse: collapse; }
        table.legend td {
            border: 1px solid #ced4da; padding: 2px 5px;
            font-size: 7.5px; vertical-align: middle;
        }
        .swatch {
            display: inline-block; width: 10px; height: 10px;
            border-radius: 2px; border: 1px solid rgba(0,0,0,.15);
            vertical-align: middle; margin-right: 3px; flex-shrink: 0;
        }
        .leg-code { font-weight: 700; }

        /* ── FOOTER ── */
        .doc-footer { font-size: 7px; color: #888; margin-top: 4px; }

        /* ── PRINT ── */
        @media print {
            @page { size: A4 landscape; margin: 8mm; }
            #toolbar { display: none !important; }
            body { background: #fff; padding: 0; }
            .page-wrap { box-shadow: none; margin: 0; padding: 0; width: auto; border-radius: 0; }
        }
    </style>
</head>
<body>

<div id="toolbar">
    <span class="title">👁 Preview Grid Landscape — Kalender Pendidikan <?= esc($year['name']) ?></span>
    <?php
    $backUrl = in_array(session()->get('user_role'), ['superadmin', 'admin'])
        ? "/academic-calendar?academic_year_id=" . $year['id']
        : "/guru/dashboard";
    ?>
    <a class="back" href="<?= $backUrl ?>">← Kembali</a>
    <a class="btn btn-pdf" href="/academic-calendar/print-grid/<?= $year['id'] ?>/landscape" target="_blank">⬇ Unduh PDF</a>
    <button class="btn btn-print" onclick="window.print()">🖨 Cetak</button>
</div>

<div class="page-wrap">
    <?= view('letter/_kop', ['letterSettings' => $letterSettings, 'schoolSettings' => $schoolSettings]) ?>
    <div class="doc-title">Kalender Pendidikan</div>
    <div class="doc-sub">Tahun Ajaran <?= esc($year['name']) ?></div>

    <table class="grid-outer">
    <?php foreach (array_chunk($months, 4) as $rowMonths): ?>
        <tr>
        <?php foreach ($rowMonths as $m): ?>
            <td>
                <div class="month-box">
                    <div class="month-name"><?= cal_indo_month($m['month']) . ' ' . $m['year'] ?></div>
                    <table class="mini-cal">
                        <tr>
                            <?php foreach ([0,1,2,3,4,5,6] as $dow): ?>
                                <th class="<?= $dow===0 ? 'dow-min' : '' ?>"><?= cal_indo_day_short($dow) ?></th>
                            <?php endforeach; ?>
                        </tr>
                        <?php
                            $weeks = cal_month_matrix($m['year'], $m['month']);
                            foreach ($weeks as $week):
                        ?>
                            <tr>
                            <?php foreach ($week as $idx => $cell): ?>
                                <?php
                                    if ($cell['date'] === null) {
                                        echo '<td class="blank"></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'] ?? $idx) === 0) {
                                        $cls = 'dow-min';
                                    }
                                ?>
                                <td class="<?= $cls ?>" style="<?= $style ?>"><?= $cell['day'] ?></td>
                            <?php endforeach; ?>
                            </tr>
                        <?php endforeach; ?>
                        <?php
                            // Padding baris kosong agar semua bulan setinggi 6 baris
                            for ($er = count($weeks); $er < 6; $er++):
                        ?>
                            <tr><?php for ($ec=0;$ec<7;$ec++) echo '<td class="fill"></td>'; ?></tr>
                        <?php endfor; ?>
                    </table>
                </div>
            </td>
        <?php endforeach; ?>
        <?php for ($i=count($rowMonths);$i<4;$i++) echo '<td></td>'; ?>
        </tr>
    <?php endforeach; ?>
    </table>

    <!-- LEGEND -->
    <div class="legend-wrap">
        <table class="legend">
        <?php foreach (array_chunk($categories, 4) as $row): ?>
            <tr>
            <?php foreach ($row as $c): ?>
                <td style="width:25%;">
                    <span class="swatch" style="background:<?= esc($c['color']) ?>"></span>
                    <span class="leg-code"><?= esc($c['code']) ?></span> — <?= esc($c['name']) ?>
                </td>
            <?php endforeach; ?>
            <?php for ($i=count($row);$i<4;$i++) echo '<td></td>'; ?>
            </tr>
        <?php endforeach; ?>
        </table>
    </div>

    <div class="doc-footer">Sumber acuan: <?= esc($settings['source_reference'] ?? '') ?></div>
</div>
</body>
</html>