<!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>
    <!-- Use standard bootstrap for print if needed, but custom CSS is better for print control -->
    <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);
        }

        /* Print Media Query */
        @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;
                margin: 1.5cm;
            }
            .tp-section {
                page-break-inside: avoid;
                margin-bottom: 2rem;
            }
            table {
                page-break-inside: avoid;
            }
        }

        .kop-surat {
            text-align: center;
            border-bottom: 3px double #000;
            padding-bottom: 15px;
            margin-bottom: 20px;
        }

        .kop-surat h1 {
            font-size: 16pt;
            font-weight: bold;
            margin: 0;
            text-transform: uppercase;
        }

        .kop-surat h2 {
            font-size: 14pt;
            font-weight: bold;
            margin: 5px 0;
        }

        .kop-surat p {
            font-size: 11pt;
            margin: 0;
        }

        .info-table {
            width: 100%;
            margin-bottom: 20px;
        }
        
        .info-table td {
            padding: 3px 0;
            vertical-align: top;
        }
        
        .info-table td:nth-child(1) { width: 120px; font-weight: bold; }
        .info-table td:nth-child(2) { width: 15px; text-align: center; }

        .section-title {
            font-weight: bold;
            font-size: 12pt;
            margin-top: 20px;
            margin-bottom: 10px;
            text-transform: uppercase;
        }

        .tp-header {
            font-weight: bold;
            margin-bottom: 5px;
        }

        table.kktp-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 10px;
            margin-bottom: 10px;
        }

        table.kktp-table th, table.kktp-table td {
            border: 1px solid #000;
            padding: 8px;
            vertical-align: top;
        }

        table.kktp-table th {
            text-align: center;
            font-weight: bold;
            background-color: #f8f9fa !important;
            -webkit-print-color-adjust: exact;
        }

        .w-25 { width: 25% !important; }

        .signature-section {
            margin-top: 50px;
            page-break-inside: avoid;
        }
    </style>
</head>
<body>

    <!-- Floating Print & Download Buttons -->
    <div class="no-print position-fixed top-0 end-0 p-3" style="z-index: 1000;">
        <a href="/guru/learning-devices/kktp/download-kktp/<?= $device['id'] ?>" class="btn btn-success shadow rounded-pill px-4 py-2 me-2">
            <i class="bi bi-file-earmark-word me-2"></i> Download DOC
        </a>
        <button onclick="window.print()" class="btn btn-primary shadow rounded-pill px-4 py-2">
            <i class="bi bi-printer me-2"></i> Cetak Dokumen
        </button>
    </div>

    <div class="document-container">
        <?php
        $bimbinganMax = $intervals['bimbingan'] ?? 59;
        $cukupMin = $bimbinganMax + 1;
        $cukupMax = $intervals['cukup'] ?? 69;
        $baikMin = $cukupMax + 1;
        $baikMax = $intervals['baik'] ?? 84;
        $sangatBaikMin = $baikMax + 1;
        ?>
        
        <!-- Header - langsung judul tanpa KOP -->
        <div style="text-align: center; margin-bottom: 15px;">
            <div style="font-size: 13pt; font-weight: bold;">KRITERIA KETERCAPAIAN TUJUAN PEMBELAJARAN (KKTP)</div>
        </div>

        <!-- Identitas - borderless table agar : lurus -->
        <table style="width: 100%; border-collapse: collapse; margin-bottom: 15px;">
            <tr>
                <td style="width: 140px; padding: 2px 0; vertical-align: top;">Nama <?= ($device['school_type'] === 'madrasah') ? 'Madrasah' : 'Sekolah' ?></td>
                <td style="width: 15px; padding: 2px 0; text-align: center;">:</td>
                <td style="padding: 2px 0;"><b><?= esc($settings['school_name'] ?? '-') ?></b></td>
            </tr>
            <tr>
                <td style="padding: 2px 0; vertical-align: top;">Fase / Kelas</td>
                <td style="padding: 2px 0; text-align: center;">:</td>
                <td style="padding: 2px 0;"><b>Fase <?= esc($device['phase']) ?> / Kelas <?= esc($device['grade_name']) ?></b></td>
            </tr>
            <tr>
                <td style="padding: 2px 0; vertical-align: top;">Mata Pelajaran</td>
                <td style="padding: 2px 0; text-align: center;">:</td>
                <td style="padding: 2px 0;"><b><?= esc($device['subject_name']) ?></b></td>
            </tr>
            <tr>
                <td style="padding: 2px 0; vertical-align: top;">Tahun Ajaran</td>
                <td style="padding: 2px 0; text-align: center;">:</td>
                <td style="padding: 2px 0;"><b><?= esc($device['academic_year_name']) ?></b></td>
            </tr>
            <tr>
                <td style="padding: 2px 0; vertical-align: top;">Penyusun</td>
                <td style="padding: 2px 0; text-align: center;">:</td>
                <td style="padding: 2px 0;"><b><?= esc($teacher['name']) ?></b></td>
            </tr>
        </table>

        <!-- Bagian A: Pendekatan -->
        <div class="section-title">A. Pendekatan dan Cara Penggunaan KKTP</div>
        <p style="text-align: justify; margin-bottom: 10px;">
            Kriteria Ketercapaian Tujuan Pembelajaran (KKTP) ini disusun menggunakan pendekatan kombinasi: (1) deskripsi kriteria kualitatif yang menjelaskan capaian peserta didik pada empat level, dan (2) interval nilai/skor kuantitatif (skala 0–100) sebagai pedoman konversi hasil asesmen (tes tulis, praktik, atau produk) ke dalam laporan hasil belajar.
        </p>
        <p style="margin-bottom: 10px;">Empat level pencapaian yang digunakan secara konsisten untuk seluruh TP adalah sebagai berikut:</p>
        
        <table class="kktp-table" style="margin-bottom: 15px;">
            <tr>
                <th style="width: 20%;">Level Pencapaian</th>
                <th style="width: 20%;">Interval Nilai</th>
                <th>Makna</th>
            </tr>
            <tr>
                <td style="text-align: center; font-weight: bold;">Perlu Bimbingan</td>
                <td style="text-align: center;">0 – <?= $bimbinganMax ?></td>
                <td>Peserta didik belum menguasai sebagian besar indikator TP dan memerlukan pembelajaran remedial secara intensif.</td>
            </tr>
            <tr>
                <td style="text-align: center; font-weight: bold;">Cukup</td>
                <td style="text-align: center;"><?= $cukupMin ?> – <?= $cukupMax ?></td>
                <td>Peserta didik mulai menguasai sebagian indikator TP, namun masih memerlukan bimbingan/remedial pada beberapa indikator.</td>
            </tr>
            <tr>
                <td style="text-align: center; font-weight: bold;">Baik</td>
                <td style="text-align: center;"><?= $baikMin ?> – <?= $baikMax ?></td>
                <td>Peserta didik menguasai sebagian besar indikator TP dan telah memenuhi kriteria ketercapaian (tuntas).</td>
            </tr>
            <tr>
                <td style="text-align: center; font-weight: bold;">Sangat Baik</td>
                <td style="text-align: center;"><?= $sangatBaikMin ?> – 100</td>
                <td>Peserta didik menguasai seluruh indikator TP secara konsisten dan dapat diberikan pengayaan.</td>
            </tr>
        </table>

        <p style="text-align: justify; margin-bottom: 30px;">
            Ketuntasan TP ditetapkan pada batas minimal nilai <?= $baikMin ?> (level "Baik"). Peserta didik yang memperoleh nilai di bawah <?= $baikMin ?> pada suatu TP wajib mengikuti pembelajaran remedial, sedangkan peserta didik yang mencapai level "Sangat Baik" (&ge; <?= $sangatBaikMin ?>) dapat diberikan pengayaan.
        </p>

        <!-- Bagian B: KKTP per TP -->
        <div class="section-title">B. KKTP per Tujuan Pembelajaran (TP)</div>
        <p style="text-align: justify; margin-bottom: 20px;">
            Setiap TP berikut dilengkapi indikator ketercapaian (acuan penyusunan instrumen asesmen) serta rubrik kriteria pada empat level pencapaian beserta interval nilainya.
        </p>

        <?php if (empty($kktps)): ?>
            <div style="padding: 20px; border: 1px dashed #ccc; text-align: center; margin-bottom: 30px;">
                Belum ada data KKTP yang disusun atau di-generate untuk perangkat ini.
            </div>
        <?php else: ?>
            <?php foreach ($kktps as $k): ?>
                <div class="tp-section">
                    <div class="tp-header"><?= esc($k['code']) ?> : <?= esc($k['tp_description']) ?></div>
                    <div style="margin-bottom: 10px;">
                        <div style="font-weight: bold; margin-bottom: 3px;">Indikator Ketercapaian:</div>
                        <table style="width: 100%; border-collapse: collapse; text-align: justify;">
                            <?php $indicatorLines = explode("\n", $k['indicators']); $no = 0; ?>
                            <?php foreach ($indicatorLines as $indLine): $indLine = trim($indLine); if (empty($indLine)) continue; $no++; ?>
                            <tr><td style="width: 20px; vertical-align: top; padding: 1px 0;"><?= $no ?>.</td><td style="padding: 1px 0;"><?= esc($indLine) ?></td></tr>
                            <?php endforeach; ?>
                        </table>
                    </div>
                    
                    <table class="kktp-table">
                        <tr>
                            <th class="w-25">Perlu Bimbingan<br>(0 - <?= $bimbinganMax ?>)</th>
                            <th class="w-25">Cukup<br>(<?= $cukupMin ?> - <?= $cukupMax ?>)</th>
                            <th class="w-25">Baik<br>(<?= $baikMin ?> - <?= $baikMax ?>)</th>
                            <th class="w-25">Sangat Baik<br>(<?= $sangatBaikMin ?> - 100)</th>
                        </tr>
                        <tr>
                            <td><?= nl2br(esc($k['rubric_bimbingan'])) ?></td>
                            <td><?= nl2br(esc($k['rubric_cukup'])) ?></td>
                            <td><?= nl2br(esc($k['rubric_baik'])) ?></td>
                            <td><?= nl2br(esc($k['rubric_sangat_baik'])) ?></td>
                        </tr>
                    </table>
                </div>
            <?php endforeach; ?>
        <?php endif; ?>

        <!-- Bagian C: Catatan -->
        <div class="section-title">C. Catatan Implementasi</div>
        <table style="width: 100%; border-collapse: collapse; text-align: justify; margin-bottom: 40px;">
            <tr><td style="padding: 2px 0 4px 15px; vertical-align: top; width: 20px;">1.</td><td style="padding: 2px 0 4px 5px;">KKTP ini digunakan sebagai acuan penyusunan instrumen asesmen formatif dan sumatif (tes tulis, lisan, praktik, proyek, maupun produk) pada setiap TP <?= esc($device['subject_name']) ?> Kelas <?= esc($device['grade_name']) ?>.</td></tr>
            <tr><td style="padding: 2px 0 4px 15px; vertical-align: top;">2.</td><td style="padding: 2px 0 4px 5px;">Guru dapat mengembangkan indikator ketercapaian menjadi kisi-kisi soal atau rubrik penilaian yang lebih rinci sesuai bentuk asesmen yang digunakan.</td></tr>
            <tr><td style="padding: 2px 0 4px 15px; vertical-align: top;">3.</td><td style="padding: 2px 0 4px 5px;">Skor akhir suatu TP dapat diperoleh dari rata-rata beberapa bentuk asesmen (tes tulis, tugas, praktik) sesuai kebijakan satuan pendidikan.</td></tr>
            <tr><td style="padding: 2px 0 4px 15px; vertical-align: top;">4.</td><td style="padding: 2px 0 4px 5px;">KKTP ini bersifat dinamis dan dapat disesuaikan oleh guru mata pelajaran berdasarkan hasil evaluasi pembelajaran dan karakteristik murid di <?= esc($settings['school_name'] ?? 'Sekolah') ?>.</td></tr>
        </table>

        <!-- Tanda Tangan -->
        <div class="signature-section">
            <table style="width: 100%; text-align: center;">
                <tr>
                    <td style="width: 33%;">Mengetahui,<br><?= ($device['school_type'] === 'madrasah') ? 'Kepala Madrasah' : 'Kepala Sekolah' ?></td>
                    <td style="width: 34%;"></td>
                    <td style="width: 33%;">
                        <?= esc($settings['city'] ?? 'Kota') ?>, ....................... <?= date('Y') ?><br>
                        Guru Mata Pelajaran
                    </td>
                </tr>
                <tr>
                    <td style="height: 80px;"></td>
                    <td></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></td>
                    <td>
                        <strong><u><?= esc($teacher['name']) ?></u></strong><br>
                        <?= esc(teacher_id_label($teacher['status_kepegawaian'] ?? null)) ?>. <?= esc($teacher['nip'] ?: '........................') ?>
                    </td>
                </tr>
            </table>
        </div>

    </div>

</body>
</html>
