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


<?= $this->section('conten');?>
	<div class="main-area">

        <!-- TOPBAR -->
        <div class="topbar">
            <div class="flex items-center gap-4">
                <button class="topbar-icon-btn"><i class="fa-solid fa-bars"></i></button>
                <h1 class="text-lg font-bold text-slate-800">Dashboard</h1>
            </div>
            <div class="flex items-center gap-2">
                <button class="topbar-icon-btn">
                    <i class="fa-regular fa-bell"></i>
                    <span class="notif-dot">3</span>
                </button>
                <button class="topbar-icon-btn">
                    <i class="fa-regular fa-envelope"></i>
                    <span class="notif-dot green">2</span>
                </button>
                <div class="h-7 w-px bg-slate-200 mx-2"></div>
                <div class="flex items-center gap-2.5 cursor-pointer">
                    <div class="w-9 h-9 rounded-full bg-gradient-to-br from-[#0099b8] to-[#0066cc] flex items-center justify-center text-white text-sm font-bold">A</div>
                    <div class="hidden md:block">
                        <div class="text-xs font-bold text-slate-700">Administrator</div>
                        <div class="text-[10px] text-slate-400">Super Admin</div>
                    </div>
                    <i class="fa-solid fa-chevron-down text-slate-400 text-xs ml-1"></i>
                </div>
            </div>
        </div>

        <div class="p-7 space-y-6">

            <!-- WELCOME + DATE -->
            <div class="flex flex-wrap items-center justify-between gap-4">
                <div>
                    <h2 class="text-2xl font-bold text-slate-800">Selamat datang, Administrator!</h2>
                    <p class="text-sm text-slate-500 mt-1">Berikut ringkasan data pada website Pena Ilmu.</p>
                </div>
                <div class="date-pill">
                    <i class="fa-regular fa-calendar text-[#0099b8]"></i> 30 Juni 2026
                </div>
            </div>

            <!-- STAT CARDS -->
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
                <div class="stat-card2 s-blue">
                    <div class="stat-icon2 i-blue"><i class="fa-solid fa-file-lines"></i></div>
                    <div>
                        <div class="stat-title2">Total Dokumen</div>
                        <div class="stat-value2">120</div>
                        <div class="stat-delta2"><i class="fa-solid fa-arrow-up"></i> 12 dari bulan lalu</div>
                    </div>
                </div>
                <div class="stat-card2 s-indigo">
                    <div class="stat-icon2 i-indigo"><i class="fa-solid fa-graduation-cap"></i></div>
                    <div>
                        <div class="stat-title2">Total Tutorial</div>
                        <div class="stat-value2">35</div>
                        <div class="stat-delta2"><i class="fa-solid fa-arrow-up"></i> 5 dari bulan lalu</div>
                    </div>
                </div>
                <div class="stat-card2 s-purple">
                    <div class="stat-icon2 i-purple"><i class="fa-solid fa-book-open"></i></div>
                    <div>
                        <div class="stat-title2">Total Buku</div>
                        <div class="stat-value2">80</div>
                        <div class="stat-delta2"><i class="fa-solid fa-arrow-up"></i> 8 dari bulan lalu</div>
                    </div>
                </div>
                <div class="stat-card2 s-teal">
                    <div class="stat-icon2 i-teal"><i class="fa-solid fa-users"></i></div>
                    <div>
                        <div class="stat-title2">Total Pengguna</div>
                        <div class="stat-value2">245</div>
                        <div class="stat-delta2"><i class="fa-solid fa-arrow-up"></i> 25 dari bulan lalu</div>
                    </div>
                </div>
            </div>

            <!-- BARIS 2: STATISTIK + DOKUMEN TERPOPULER + RINGKASAN KATEGORI -->


            <!-- BARIS 3: TABEL DOKUMEN TERBARU + AKSI CEPAT + AKTIVITAS -->
<!-- BARIS 3 : CAROUSEL DOKUMEN -->

<div class="grid grid-cols-1 gap-5 items-start">
    <!-- PANEL CAROUSEL -->
    <div class="panel2 overflow-hidden rounded-xl bg-white shadow-sm border border-slate-200">
        
            <div class="relative overflow-hidden rounded-xl">
                <img 
                src="<?= base_url('asset/image/carausel.png')?>"
                alt="Banner Pena Ilmu"
                class="w-full h-[200px] object-cover rounded-xl"
                >
           </div>
    </div>
    <!-- KOLOM KANAN: AKSI CEPAT + AKTIVITAS -->

</div>
            <!-- FOOTER -->
            <div class="flex items-center justify-between pt-2 text-[11px] text-slate-400 font-medium">
                <span>&copy; 2026 Pena Ilmu. All rights reserved.</span>
                <span>Versi 1.0.0</span>
            </div>

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

