<?= $this->extend('layout/template');?>
<?= $this->section('css') ?>

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

<?= $this->section('conten');?>

<main class="max-w-7xl mx-auto px-4 py-8">
    <div class="grid grid-cols-1 lg:grid-cols-4 gap-6 items-start">

        <!-- ===== KONTEN UTAMA (HALAMAN BACA) ===== -->
        <div class="lg:col-span-3 space-y-4">

            <!-- BAR DETAIL / NAVIGASI ATAS -->
            <div class="bg-gradient-to-r from-blue-50 to-sky-100/50 border border-sky-100 rounded-xl px-4 py-3 flex flex-wrap items-center justify-between gap-3 shadow-sm">
                <div class="flex items-center gap-3">
                    <!-- Tombol kembali otomatis mengarah ke halaman daftar tutorial -->
                    <a href="<?= base_url('tutorial'); ?>" class="bg-white hover:bg-slate-50 border border-slate-200 text-slate-700 text-[11px] font-bold py-1 px-3 rounded-lg shadow-sm transition">⬅ Kembali</a>
                    <div class="h-4 w-px bg-slate-300"></div>
                    <h2 class="text-xs font-bold text-slate-800 flex items-center gap-1.5 uppercase tracking-wide">
                        Membaca Tutorial <span>📖</span>
                    </h2>
                </div>
                <span class="bg-[#0099b8] text-white text-[9px] font-bold px-2 py-0.5 rounded-full tracking-wider uppercase">Pena Ilmu Hub</span>
            </div>

            <!-- AREA BACA KONTEN -->
            <div class="bg-white border border-slate-200/70 rounded-xl p-6 shadow-sm space-y-6">
                <!-- Header Dokumen -->
                <div class="border-b border-slate-100 pb-4">
                    <span class="text-[10px] font-bold uppercase tracking-wider text-[#0099b8] bg-sky-50 px-2 py-1 rounded">
                        Kategori: <?= esc($tutorial['kategori'] ?? 'Umum'); ?>
                    </span>
                    <h1 class="text-xl lg:text-2xl font-bold text-slate-800 mt-3 mb-2">
                        <?= esc($tutorial['judul'] ?? 'Judul Tidak Ditemukan'); ?>
                    </h1>
                    <p class="text-xs text-slate-400 font-medium flex flex-wrap items-center gap-4">
                        <span>
                            <i class="fa-regular fa-folder-open mr-1"></i> 
                            Jenis Dokumen: Panduan <?= esc($tutorial['kategori'] ?? ''); ?>
                        </span>
                        <span class="text-slate-300">|</span> <!-- Pembatas vertikal opsional -->
                        <span>
                            <i class="fa-regular fa-calendar mr-1"></i> 
                            Tanggal: <?= isset($tutorial['tanggal']) ? date('d M Y', strtotime($tutorial['tanggal'])) : 'Belum diatur'; ?>
                        </span>
                    </p>
                </div>

                <!-- Isi Materi Utama -->
                <div class="prose max-w-none prose-p:my-2 text-gray-800">
                    <?= $tutorial['isi_html'] ?? 'Tidak ada konten materi untuk tutorial ini.'; ?>
                </div>
            </div>
        </div>

        <!-- ===== SIDEBAR (Dibuat Statis & Bersih Tanpa Konflik JS) ===== -->
        <aside class="space-y-4">
            <div class="bg-white border border-slate-200/70 rounded-xl p-4 shadow-sm">
                <h4 class="text-xs font-bold text-slate-800 uppercase tracking-wide border-b border-slate-100 pb-2 mb-3">📋 Informasi Halaman</h4>
                <p class="text-[11px] text-slate-500 leading-relaxed font-medium">
                    Kamu sedang membaca dokumen resmi dari platform **Pena Ilmu Hub**. Gunakan panduan ini secara bijak untuk membantu proses belajar atau penyelesaian tugas Anda.
                </p>
            </div>

            <div class="sb-card">
                <div class="sb-head">
                    <span class="sb-head-icon"><i class="fa-solid fa-bolt text-amber-500"></i></span>
                    <span class="sb-head-label">Menu Cepat</span>
                </div>
                <a href="<?= base_url('tutorial'); ?>" class="doc-item">
                    <div class="doc-icon-wrap bg-blue-50"><i class="fa-solid fa-list text-blue-600"></i></div>
                    <div class="doc-meta">
                        <span class="doc-meta-name">Lihat Semua Tutorial</span>
                        <span class="doc-meta-sub">Kembali ke index utama</span>
                    </div>
                    <span class="doc-arrow"><i class="fa-solid fa-chevron-right text-[10px]"></i></span>
                </a>
            </div>
        </aside>
    </div>
</main>

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

<?= $this->section('myscript') ?>
<script>
    // Tag script dikosongkan karena data langsung di-render melalui server-side PHP.
    console.log("Mode membaca aktif.");
</script>


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