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

<?= $this->section('conten');?>
<!-- KONTEN AREA UTAMA -->
<div class="max-w-7xl mx-auto px-4 py-8">
    <!-- GRID UTAMA (Membagi Kiri 3 Kolom & Kanan 1 Kolom) -->
    <div class="grid grid-cols-1 lg:grid-cols-4 gap-6 items-start">

        <!-- SISI KIRI: PREVIEW & DETAIL (Lebar 3 Kolom) -->
        <div class="lg:col-span-3 space-y-4">

            <!-- BUTTON KEMBALI -->
            <div class="flex items-center justify-between">
                <a href="<?= base_url('dokumenfile')?>" class="inline-flex items-center gap-1.5 bg-white hover:bg-gray-100 text-gray-700 border border-gray-300 rounded-lg p-2 px-4 text-xs font-bold shadow-sm transition">
                    ⬅ Kembali ke Daftar Dokumen
                </a>
            </div>

            <!-- BLOK DETAIL UTAMA -->
            <div class="bg-white border border-gray-200 rounded-xl p-6 shadow-sm space-y-6">

                <!-- HEADER INFORMASI TEMPLATE -->
                <div class="border-b border-gray-100 pb-4">
                    <div class="flex items-center gap-2 mb-2">
                        <span class="text-[10px] bg-blue-100 text-blue-700 px-2 py-0.5 rounded font-bold uppercase tracking-wider"><?= esc($dokumen['t_dokumen']); ?></span>
                        <span class="text-[10px] bg-gray-100 text-gray-600 px-2 py-0.5 rounded font-medium">Format: <?= esc($dokumen['t_dokumen']); ?></span>
                    </div>
                    <h2 class="text-xl font-bold text-gray-900 md:text-2xl"><?= esc($dokumen['n_dokumen']); ?></h2>
                </div>

                <!-- LAYOUT 2 COLUMN (PREVIEW & DESKRIPSI) -->
                <div class="grid grid-cols-1 md:grid-cols-5 gap-6">

                    <!-- SUB-KOLOM IFRAME PREVIEW (2 KOLOM) -->
                    <div class="md:col-span-2 space-y-3">
                        <div class="rounded-2xl p-3 bg-gradient-to-br from-slate-100 to-white border border-gray-200 shadow-lg relative overflow-hidden">
                            <!-- Header Preview -->
                            <div class="flex items-center justify-between mb-3 px-2">
                                <div class="flex items-center gap-2">
                                    <div class="w-8 h-8 rounded-lg bg-emerald-600 flex items-center justify-center text-white text-xs">
                                        📄
                                    </div>
                                    <div>
                                        <p class="text-xs font-bold text-gray-700">Document Preview</p>
                                        <p class="text-[10px] text-gray-400">Mode tampilan saja</p>
                                    </div>
                                </div>
                                <span class="bg-emerald-600 text-white text-[9px] font-bold px-3 py-1 rounded-full shadow">LIVE</span>
                            </div>

                            <!-- Iframe Box -->
                            <div class="w-full aspect-[3/4] bg-white rounded-xl overflow-hidden shadow-inner border border-gray-200 relative select-none" oncontextmenu="return false;">
                                <!-- Pastikan URL Google Drive menggunakan ID yang dinamis -->
                                <iframe src="https://drive.google.com/file/d/<?= esc($dokumen['link_dokumen']); ?>/preview" class="w-full h-full border-0 pointer-events-auto" allow="autoplay" sandbox="allow-scripts allow-same-origin allow-forms" loading="lazy"></iframe>
                                <!-- Overlay anti copy -->
                                <div class="absolute inset-0 pointer-events-none"></div>
                            </div>
                        </div>
                        <p class="text-[10px] text-gray-400 text-center mt-3 italic">Gunakan zoom untuk membaca dokumen lebih jelas</p>
                    </div>

                    <!-- SUB-KOLOM DESKRIPSI & DOWNLOAD (3 KOLOM) -->
                    <div class="md:col-span-3 flex flex-col justify-between space-y-4">
                        <div class="space-y-3">
                            <h3 class="text-xs font-bold text-gray-900 uppercase tracking-wider">Tentang Dokumen Ini</h3>
                            <div class="text-xs text-gray-600 leading-relaxed space-y-2">
                                <?= $dokumen['deskripsi']; ?>
                            </div>

                            <!-- DETAIL METADATA FILE -->
                            <div class="bg-slate-50 border border-gray-100 rounded-lg p-3 pt-2">
                                <h4 class="text-[11px] font-bold text-gray-700 mb-2">Informasi File:</h4>
                                <table class="w-full text-[11px] text-gray-600">
                                    <tbody>
                                        <tr>
                                            <td class="py-1 font-medium w-24">Ukuran File</td>
                                            <td class="py-1 text-gray-900">: <?= esc($dokumen['ukuran']); ?> MB</td>
                                        </tr>
                                        <tr>
                                            <td class="py-1 font-medium">Lisensi</td>
                                            <td class="py-1 text-emerald-600 font-semibold">: Gratis</td>
                                        </tr>
                                        <tr>
                                            <td class="py-1 font-medium">Kecocokan</td>
                                            <td class="py-1 text-gray-900">: Aplikasi <?= esc($dokumen['t_dokumen']); ?> </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <!-- RUNNING DOWNLOAD ACTION -->
                        <div class="pt-4 border-t border-gray-100">
                            <p class="text-[11px] text-gray-400 mb-2">Klik tombol di bawah ini untuk mengunduh berkas:</p>
                            <div class="flex flex-col sm:flex-row gap-2">
                                <a href="https://docs.google.com/uc?export=download&id=<?= esc($dokumen['link_dokumen']); ?>" 
                                 target="_blank" 
                                 rel="noopener noreferrer" 
                                 class="flex-1 bg-[#007f98] hover:bg-[#00657a] text-white text-xs font-bold py-3 px-4 rounded-lg shadow-sm transition flex items-center justify-center gap-2 text-center">
                                 📥 DOWNLOAD TEMPLATE (<?= strtoupper(esc($dokumen['t_dokumen'])); ?>)
                             </a>
                         </div>
                     </div>
                 </div> <!-- AKHIR SUB-KOLOM DESKRIPSI -->

             </div> <!-- AKHIR LAYOUT 2 COLUMN -->
         </div> <!-- AKHIR BLOK DETAIL UTAMA -->
     </div> <!-- AKHIR SISI KIRI -->


     <!-- SISI KANAN: SIDEBAR REKOMENDASI (Lebar 1 Kolom) -->
     <div class="space-y-4">

        <!-- ===== tutorial ===== -->
         <div class="sb-card">
            <div class="sb-head">
                <span class="sb-head-icon"><i class="fa-solid fa-fire text-blue-600"></i></span>
                <span class="sb-head-label">Tutorial Terbaru</span>
                <span class="sb-badge badge-hot">Populer</span>
            </div>

            <!-- tutorial -->
            <?php foreach ($tutorial_terbaru as $doc) : ?>
            <a href="<?= base_url('baca_tutorial/' . $doc['id']); ?>" class="artikel-item flex items-center gap-3 p-3 hover:bg-slate-50 transition border-b border-slate-100 last:border-0">
                <div class="art-thumb flex items-center justify-center w-9 h-9 rounded-lg bg-blue-50 shrink-0">
                    <i class="fa-solid fa-book-open text-blue-600 text-sm"></i>
                </div>
                <div class="flex-1 flex flex-col min-w-0">
                    <span class="art-title text-xs font-semibold text-slate-700 truncate"><?= ucfirst(esc($doc['judul'])); ?><</span>
                    <span class="art-sub text-[10px] text-slate-400 mt-0.5"><i class="fa-regular fa-clock text-[9px] mr-0.5"></i> <?= ucfirst(esc($doc['kategori'])); ?> </span>
                </div>
            </a>
             <?php endforeach; ?>
        </div>



        <!-- ===== pojok ilmu ===== -->
          <div class="sb-card">
            <div class="sb-head">
                <span class="sb-head-icon"><i class="fa-solid fa-display text-amber-500 text-sm"></i></span>
                <span class="sb-head-label">Pojok Ilmu Terbaru</span>
                <span class="sb-badge badge-hot">Baru</span>
            </div>

            <!-- pojok ilmu -->
            <?php foreach ($pojok_terbaru as $doc) : ?>
            <a href="<?= base_url('baca_pojok/' . $doc['id']); ?>" class="artikel-item flex items-center gap-3 p-3 hover:bg-slate-50 transition border-b border-slate-100 last:border-0">
                <div class="art-thumb flex items-center justify-center w-9 h-9 rounded-lg bg-blue-50 shrink-0">
                    <i class="fa-regular fa-lightbulb text-amber-500 text-sm"></i>
                </div>
                <div class="flex-1 flex flex-col min-w-0">
                    <span class="art-title text-xs font-semibold text-slate-700 truncate"><?= ucfirst(esc($doc['judul'])); ?></span>
                    <span class="art-sub text-[10px] text-slate-400 mt-0.5"><i class="fa-regular fa-clock text-[9px] mr-0.5"></i> <?= ucfirst(esc($doc['kategori'])); ?> </span>
                </div>
            </a>
             <?php endforeach; ?>
        </div>


        <!-- ===== infografis ===== -->
          <div class="sb-card">
            <div class="sb-head">
                <span class="sb-head-icon"><i class="fa-solid fa-images text-purple-600 text-sm"></i></span>
                <span class="sb-head-label">Infografis Terbaru</span>
                <span class="sb-badge badge-hot">Baru</span>
            </div>

            <!-- infograafis -->
            <?php foreach ($info_terbaru as $row) : ?>
            <a href="<?= base_url('lihat_infografis/' . $row['id']); ?>" class="artikel-item flex items-center gap-3 p-3 hover:bg-slate-50 transition border-b border-slate-100 last:border-0">
                <div class="art-thumb flex items-center justify-center w-9 h-9 rounded-lg bg-blue-50 shrink-0">
                    <i class="fa-regular fa-image text-purple-600 text-sm"></i>
                </div>
                <div class="flex-1 flex flex-col min-w-0">
                    <span class="art-title text-xs font-semibold text-slate-700 truncate"><?= ucfirst(esc($row['judul'])); ?></span>
                    <span class="art-sub text-[10px] text-slate-400 mt-0.5"><i class="fa-regular fa-clock text-[9px] mr-0.5"></i> <?= ucfirst(esc($row['kategori'])); ?> </span>
                </div>
            </a>
             <?php endforeach; ?>
        </div>


    </div>
</div> <!-- AKHIR GRID UTAMA -->
</div> <!-- AKHIR KONTEN AREA UTAMA -->

<!-- Script Proteksi Konten -->
<script>
    document.addEventListener("copy", e => e.preventDefault());
    document.addEventListener("cut", e => e.preventDefault());
    document.addEventListener("contextmenu", e => e.preventDefault());
</script>
<?= $this->endSection(); ?>