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

<?= $this->section('conten');?>
<div class="max-w-7xl mx-auto px-4 py-8">
    <div class="grid grid-cols-1 lg:grid-cols-4 gap-6 items-start">

        <div class="lg:col-span-3 space-y-4">

            <!-- BAR HEADER -->
            <div class="bg-gradient-to-r from-blue-100 to-sky-200 border border-blue-200 rounded-xl p-4 flex items-center justify-between shadow-sm">
                <div class="flex items-center gap-3">
                    <a href="<?= base_url()?>" class="bg-white hover:bg-gray-100 text-gray-700 font-bold p-2 px-3 rounded-lg text-xs shadow transition border border-gray-300">
                        ⬅ Kembali
                    </a>
                    <div class="h-8 w-px bg-blue-300"></div>
                    <div class="flex items-center gap-2">
                        <h2 id="judul-halaman" class="text-xs md:text-sm font-bold text-slate-800 tracking-wide uppercase">DETAIL TEMPLATE DOKUMEN</h2>
                        <img id="ikon-halaman" src="word.png" class="w-5 h-5 inline object-contain" alt="Format Icon">
                    </div>
                </div>
                <span id="badge-format" class="text-[10px] bg-blue-600 text-white px-2.5 py-1 rounded-full font-bold">Format .Docx</span>
            </div>

            <!-- TAB MENU — pakai button bukan anchor, tidak reload -->
            <div class="flex flex-wrap gap-1.5 text-xs font-bold bg-white p-2.5 rounded-xl border border-gray-200 shadow-sm">
                <button onclick="switchType('word')"  id="btn-word"  class="tab-btn px-4 py-1.5 rounded transition">WORD</button>
                <button onclick="switchType('excel')" id="btn-excel" class="tab-btn px-4 py-1.5 rounded transition">EXCEL</button>
                <button onclick="switchType('ppt')"   id="btn-ppt"   class="tab-btn px-4 py-1.5 rounded transition">PPT</button>
                <button onclick="switchType('pdf')"   id="btn-pdf"   class="tab-btn px-4 py-1.5 rounded transition">PDF</button>
                <button onclick="switchType('zip')"   id="btn-zip"   class="tab-btn px-4 py-1.5 rounded transition">ZIP</button>
            </div>

            <!-- GRID KARTU DOKUMEN -->
            <div id="contentGrid" class="grid grid-cols-2 md:grid-cols-3 gap-4"></div>

            <!-- PAGINATION -->
            <div class="flex items-center justify-between pt-4 border-t border-slate-200">
                <span id="pageInfo" class="text-[11px] text-slate-400 font-medium">Menampilkan data</span>
                <div class="flex items-center gap-1.5">
                    <button onclick="changePage(-1)" id="btnPrev" class="px-2.5 py-1.5 bg-white border border-slate-200 rounded-lg text-xs font-medium text-slate-500 hover:bg-slate-50 disabled:opacity-40 disabled:cursor-not-allowed transition">Prev</button>
                    <div id="pageNumbers" class="flex gap-1"></div>
                    <button onclick="changePage(1)"  id="btnNext" class="px-2.5 py-1.5 bg-white border border-slate-200 rounded-lg text-xs font-medium text-slate-500 hover:bg-slate-50 disabled:opacity-40 disabled:cursor-not-allowed transition">Next</button>
                </div>
            </div>

        </div>

        <!-- SIDEBAR -->
        <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>
</div>
<?= $this->endSection(); ?>

<?= $this->section('myscript') ?>
<script type="text/javascript">



   // =============================================
    // KONFIGURASI TIAP TIPE FILE
    // =============================================
    const typeConfig = {
        word:  { judul: 'DETAIL TEMPLATE DOKUMEN',      ikon: '<?= base_url('asset/image/word.png')?>', badgeText: 'Format .Docx', badgeClass: 'bg-blue-600',    label: 'WORD',  labelClass: 'bg-blue-600'   },
        excel: { judul: 'DETAIL TEMPLATE SPREADSHEET',  ikon: '<?= base_url('asset/image/xl.png')?>',   badgeText: 'Format .Xlsx', badgeClass: 'bg-emerald-600', label: 'EXCEL', labelClass: 'bg-emerald-600' },
        ppt:   { judul: 'DETAIL TEMPLATE PRESENTASI',   ikon: '<?= base_url('asset/image/ppt.png')?>',  badgeText: 'Format .Pptx', badgeClass: 'bg-orange-600',  label: 'PPT',   labelClass: 'bg-orange-600'  },
        pdf:   { judul: 'DETAIL DOKUMEN PDF',            ikon: '<?= base_url('asset/image/pdf.png')?>',  badgeText: 'Format .Pdf',  badgeClass: 'bg-red-600',     label: 'PDF',   labelClass: 'bg-red-600'     },
        zip:   { judul: 'PAKET BUNDLE TEMPLATE (ZIP)',   ikon: '<?= base_url('asset/image/zip.png')?>',  badgeText: 'Format .Zip',  badgeClass: 'bg-amber-600',   label: 'ZIP',   labelClass: 'bg-amber-600'   },
    };

    // =============================================
    // DATABASE KONTEN — tambah item sesuai kebutuhan
    // =============================================
    const database = <?= json_encode($database); ?>;
    let currentType = 'word';
    let currentPage = 1;
    const itemsPerPage = 6;

    // =============================================
    // FUNGSI UTAMA SWITCH TAB (tanpa reload)
    // =============================================
    function switchType(type) {
        currentType = type;
        currentPage = 1;

        const cfg = typeConfig[type];

        // Update header bar
        document.getElementById('judul-halaman').innerText = cfg.judul;
        document.getElementById('ikon-halaman').src = cfg.ikon;
        const badge = document.getElementById('badge-format');
        badge.innerText = cfg.badgeText;
        badge.className = `text-[10px] ${cfg.badgeClass} text-white px-2.5 py-1 rounded-full font-bold`;

        // Update style tombol tab
        document.querySelectorAll('.tab-btn').forEach(btn => {
            btn.className = 'tab-btn px-4 py-1.5 rounded transition bg-gray-50 text-gray-600 hover:bg-gray-100';
        });
        document.getElementById(`btn-${type}`).className = 'tab-btn px-4 py-1.5 rounded transition bg-[#0099b8] text-white';

        // Update URL tanpa reload (opsional, biar bisa di-bookmark)
        history.replaceState(null, '', `?type=${type}`);

        renderContent();
    }

    // =============================================
    // RENDER KARTU KONTEN
    // =============================================
    function renderContent() {
        const cfg = typeConfig[currentType];
        const data = database[currentType];
        const startIndex = (currentPage - 1) * itemsPerPage;
        const paginatedItems = data.slice(startIndex, startIndex + itemsPerPage);

        const grid = document.getElementById('contentGrid');
        grid.innerHTML = paginatedItems.map((item, idx) => `
            <div class="bg-white border border-gray-200 rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-all duration-300 group">
            <div class="p-3 bg-slate-50 border-b border-gray-100 relative overflow-hidden">
            <div class="w-full h-32 bg-white border border-gray-200 rounded flex items-center justify-center overflow-hidden relative">
            <div class="p-4 text-left w-full space-y-1 select-none group-hover:scale-105 transition-transform duration-300">
            <div class="h-2 w-1/2 bg-gray-200 mb-2 rounded"></div>
            <div class="h-1.5 w-full bg-slate-100 rounded"></div>
            <div class="h-1.5 w-full bg-slate-100 rounded"></div>
            <div class="h-1.5 w-3/4 bg-slate-100 rounded"></div>
            </div>
            <div class="absolute inset-0 flex items-center justify-center pointer-events-none opacity-20 group-hover:opacity-30 transition-opacity">
            <img src="${cfg.ikon}" class="w-16 h-16 object-contain" alt="Icon">
            </div>
            </div>
            <span class="absolute top-4 right-4 ${cfg.labelClass} text-white text-[8px] font-bold p-1 px-1.5 rounded shadow-sm tracking-wider uppercase">
            ${cfg.label}
            </span>
            </div>
            <div class="p-3">
            <h4 class="text-xs font-bold text-gray-800 line-clamp-1 group-hover:text-blue-600 transition-colors">${item.n_dokumen}</h4>
            <div class="mt-3 flex items-center gap-1.5">
            <a href="https://docs.google.com/uc?export=download&id=${item.link_dokumen}" 
            target="_blank" 
            rel="noopener noreferrer"
            class="flex-1 bg-gray-800 hover:bg-black text-white text-[10px] py-1.5 rounded font-medium transition shadow-sm flex items-center justify-center gap-1">
            📥 Download
            </a>
            <a href="<?= base_url('detdoc')?>?id=${item.id}&type=${currentType}" class="flex-1 border border-gray-300 hover:bg-gray-50 text-gray-700 text-[10px] py-1.5 rounded font-medium transition text-center block">
            Preview
            </a>
            </div>
            </div>
            </div>
            `).join('');

        // Update info & pagination
        const totalItems = data.length;
        const realEnd = Math.min(startIndex + itemsPerPage, totalItems);
        document.getElementById('pageInfo').innerText = `Menampilkan ${startIndex + 1}–${realEnd} dari ${totalItems} template`;

        renderPagination();
    }

    // =============================================
    // RENDER PAGINATION
    // =============================================
    function renderPagination() {
        const totalPages = Math.ceil(database[currentType].length / itemsPerPage);

        document.getElementById('btnPrev').disabled = currentPage === 1;
        document.getElementById('btnNext').disabled = currentPage >= totalPages;

        const container = document.getElementById('pageNumbers');
        container.innerHTML = '';
        for (let i = 1; i <= totalPages; i++) {
            const btn = document.createElement('button');
            btn.innerText = i;
            btn.className = `w-7 h-7 text-xs font-bold rounded-lg transition ${i === currentPage ? 'bg-[#0099b8] text-white shadow-sm' : 'bg-white border border-slate-200 text-slate-600 hover:bg-slate-50'}`;
            btn.onclick = () => { currentPage = i; renderContent(); };
            container.appendChild(btn);
        }
    }

    function changePage(dir) {
        currentPage += dir;
        renderContent();
    }

    // =============================================
    // INISIALISASI — baca URL param jika ada
    // =============================================
    window.onload = () => {
        const urlParams = new URLSearchParams(window.location.search);
        const type = urlParams.get('type');
        switchType(type && typeConfig[type] ? type : 'word');
    };
</script>
<?= $this->endSection() ?>