<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= esc($title) ?></title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Times+New+Roman&display=swap');
        body { font-family: 'Times New Roman', Times, serif; font-size: 11pt; color: #000; background: #fff; line-height: 1.5; }
        .document-container { width: 29.7cm; padding: 1.5cm; margin: 1cm auto; background: white; box-shadow: 0 0 10px rgba(0,0,0,0.1); }
        @media print {
            body { background: none; }
            .document-container { margin: 0; padding: 1.5cm; box-shadow: none; width: 100%; }
            .no-print { display: none !important; }
            @page { size: landscape; }
        }
        .info-table { width: 100%; border-collapse: collapse; margin-bottom: 15px; }
        .info-table td { padding: 2px 0; vertical-align: top; }
        .info-table td:nth-child(1) { width: 140px; }
        .info-table td:nth-child(2) { width: 15px; text-align: center; }
        table.data-table { width: 100%; border-collapse: collapse; margin-top: 10px; margin-bottom: 15px; }
        table.data-table th, table.data-table td { border: 1px solid #000; padding: 6px; vertical-align: top; }
        table.data-table th { background: #e8e8e8; text-align: center; }
        .cp-text { text-align: justify; }
        .cp-number { width: 25px; vertical-align: top; }
        .ttd-table { width: 100%; text-align: center; margin-top: 30px; }
        .section-title { font-weight: bold; font-size: 12pt; margin-top: 15px; margin-bottom: 8px; }
    </style>
</head>
<body>
    <div class="no-print" style="text-align: center; margin-bottom: 10px;">
        <button class="btn btn-success" onclick="window.print()"><i class="bi bi-printer"></i> Cetak</button>
        <a href="/guru/learning-devices/tp/download-cp-tp/<?= $device['id'] ?>" class="btn btn-primary"><i class="bi bi-file-earmark-word"></i> Download DOC</a>
        <button class="btn btn-secondary" onclick="window.close()">Tutup</button>
    </div>

    <div class="document-container">
        <div style="text-align: center; margin-bottom: 15px; font-weight: bold; font-size: 13pt;">CAPAIAN PEMBELAJARAN (CP) DAN TUJUAN PEMBELAJARAN (TP)</div>

        <table class="info-table">
            <tr><td>Nama <?= esc($schoolTypeLabel) ?></td><td>:</td><td><b><?= esc($settings['school_name'] ?? '-') ?></b></td></tr>
            <tr><td>Mata Pelajaran</td><td>:</td><td><b><?= esc($device['subject_name']) ?></b></td></tr>
            <tr><td>Kelas / Fase</td><td>:</td><td><b>Kelas <?= esc($device['grade_name']) ?> / Fase <?= esc($device['phase']) ?></b></td></tr>
            <tr><td>Tahun Ajaran</td><td>:</td><td><b><?= esc($device['academic_year_name']) ?></b></td></tr>
        </table>

        <div class="section-title">Capaian Pembelajaran</div>
        <div>Pada akhir fase, murid mampu :</div>
        <table style="width: 100%; border-collapse: collapse; text-align: justify; margin-bottom: 15px;">
            <?php $lines = preg_split('/\n+/', trim($cpText)); $num = 0; ?>
            <?php foreach ($lines as $line): $line = trim($line); if (empty($line)) continue; $num++; $clean = preg_replace('/^\d+\s*[\.\)]\s*/', '', $line); ?>
            <tr><td style="width: 25px; vertical-align: top; padding: 1px 0;"><?= $num ?>.</td><td style="padding: 1px 0;"><?= esc($clean) ?></td></tr>
            <?php endforeach; if ($num == 0): ?>
            <tr><td colspan="2"><i>Teks CP belum diisi.</i></td></tr>
            <?php endif; ?>
        </table>

        <div class="section-title">Tujuan Pembelajaran</div>
        <table class="data-table">
            <tr><th style="width: 40px;">No</th><th style="width: 150px;">Elemen CP</th><th style="width: 200px;">Materi</th><th>Tujuan Pembelajaran</th></tr>
            <?php $no = 0; foreach ($chapters as $ci => $chap): ?>
                <?php $chapTps = $tpByChapter[$chap] ?? []; ?>
                <?php $elementName = ''; if (!empty($elements) && is_array($elements)) { $sel = $chapterCpMap[$ci] ?? ''; $elementName = $sel ?: ($elements[$ci % count($elements)]['name'] ?? ''); } ?>
                <?php if (empty($chapTps)): $no++; ?>
                <tr><td style="text-align: center;"><?= $no ?></td><td><?= esc($elementName) ?></td><td><b><?= esc($chap) ?></b></td><td>-</td></tr>
                <?php else: ?>
                    <?php foreach ($chapTps as $tpi => $tp): $no++; ?>
                    <tr>
                        <td style="text-align: center;"><?= $no ?></td>
                        <?php if ($tpi === 0): ?>
                            <td rowspan="<?= count($chapTps) ?>"><?= esc($elementName) ?></td>
                            <td rowspan="<?= count($chapTps) ?>"><b><?= esc($chap) ?></b></td>
                        <?php endif; ?>
                        <td><?= esc($tp['code']) ?>: <?= esc($tp['description']) ?></td>
                    </tr>
                    <?php endforeach; ?>
                <?php endif; ?>
            <?php endforeach; ?>
        </table>

        <!-- Tanda Tangan -->
        <table class="ttd-table">
            <tr>
                <td style="width: 50%;">Mengetahui,<br><?= ($device['school_type'] === 'madrasah') ? 'Kepala Madrasah' : 'Kepala Sekolah' ?></td>
                <td style="width: 50%;">.......................<br>Guru Mata Pelajaran</td>
            </tr>
            <tr><td style="height: 70px;"></td><td></td></tr>
            <tr>
                <td><strong><u><?= esc($settings['principal_name'] ?? $settings['headmaster_name'] ?? '..................................') ?></u></strong><br>NIP. <?= esc($settings['principal_nip'] ?? $settings['headmaster_nip'] ?? '........................') ?></td>
                <td><strong><u><?= esc($device['teacher_name'] ?? '..................................') ?></u></strong><br><?= esc(guess_id_label($device['teacher_nip'] ?? null)) ?>. <?= esc($device['teacher_nip'] ?? '........................') ?></td>
            </tr>
        </table>
    </div>
</body>
</html>
