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

<?= $this->section('css') ?>
<style type="text/css">
	/* ===== TOOL CARD ===== */
	.tool-card {
		background: #fff;
		border: 1px solid #e2e8f0;
		border-radius: 14px;
		overflow: hidden;
		transition: box-shadow 0.15s, border-color 0.15s;
		display: flex;
		flex-direction: column;
	}
	.tool-card:hover { box-shadow: 0 4px 16px rgba(0,136,170,0.10); border-color: #7dd3fc; }

	.tool-thumb {
		height: 100px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 42px;
		position: relative;
	}
	.badge-gratis {
		position: absolute; top: 8px; right: 8px;
		background: #10b981; color: #fff;
		font-size: 8px; font-weight: 700;
		padding: 2px 7px; border-radius: 20px;
		letter-spacing: 0.05em; text-transform: uppercase;
	}
	.badge-ai {
		position: absolute; top: 8px; left: 8px;
		background: #7c3aed; color: #fff;
		font-size: 8px; font-weight: 700;
		padding: 2px 7px; border-radius: 20px;
	}

	.tool-body { padding: 10px 12px 6px; flex: 1; }
	.tool-cat { font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 4px; }
	.tool-title { font-size: 11.5px; font-weight: 700; color: #1e293b; line-height: 1.4; margin-bottom: 6px; }
	.tool-desc { font-size: 10.5px; color: #64748b; line-height: 1.55; margin-bottom: 7px; }

	.tool-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 6px; }
	.tool-tag { font-size: 9px; font-weight: 600; padding: 2px 7px; border-radius: 20px; background: #f1f5f9; color: #475569; }

	.tool-meta-row {
		display: flex; align-items: center; justify-content: space-between;
		font-size: 9.5px; color: #94a3b8; margin-top: 2px;
	}
	.tool-meta-row span { display: flex; align-items: center; gap: 3px; }

	.tool-btn {
		display: block; margin: 8px 12px 12px;
		padding: 7px 0; border-radius: 8px;
		border: 1.5px solid #0099b8;
		background: transparent; color: #0099b8;
		font-size: 11px; font-weight: 700;
		text-align: center; cursor: pointer;
		font-family: 'Inter', sans-serif;
		transition: background 0.12s, color 0.12s;
		text-decoration: none;
	}
	.tool-btn:hover { background: #0099b8; color: #fff; }

	
        /* ===== GRID ===== */
        .cards-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
        @media (max-width:900px) { .cards-grid { grid-template-columns: repeat(2,1fr); } }
        @media (max-width:600px) { .cards-grid { grid-template-columns: 1fr; } }
        .chips-scroll { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }

        .page-hero {
            border-radius: 14px; padding: 18px 20px; margin-bottom: 14px;
            background: linear-gradient(to right, #005580, #0088aa);
        }

</style>
<?= $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 ===== -->
		<div class="lg:col-span-3 space-y-4">

			<!-- BAR DETAIL -->
			<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">
					<a href="<?= base_url()?>" 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">⬅ Beranda</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">
						Alat Digital <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 Tools</span>
			</div>

			<!-- AREA KONTEN -->
			<div id="mainContent"></div>
		</div>

		<!-- ===== SIDEBAR ===== -->
		<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">📋 Dokumen & Template</h4>
                    <ul class="space-y-2 text-[11px] font-semibold text-slate-600">
                    <li class="flex items-center justify-between hover:text-[#0099b8] cursor-pointer transition">
                        <span class="flex items-center gap-2"><i class="fa-regular fa-file-word text-blue-600 text-sm w-4 text-center"></i> <a href="<?= base_url('dokumenfile/?type=word')?>">WORD</a></span>
                        <span class="bg-blue-50 text-blue-600 text-[9px] font-bold px-1.5 py-0.5 rounded"><?= $total_word ?></span>
                    </li>
                    <li class="flex items-center justify-between hover:text-[#0099b8] cursor-pointer transition">
                        <span class="flex items-center gap-2"><i class="fa-regular fa-file-excel text-emerald-600 text-sm w-4 text-center"></i> <a href="<?= base_url('dokumenfile/?type=excel')?>">EXCEL</a></span>
                        <span class="bg-emerald-50 text-emerald-600 text-[9px] font-bold px-1.5 py-0.5 rounded"><?= $total_xls ?></span>
                    </li>
                    <li class="flex items-center justify-between hover:text-[#0099b8] cursor-pointer transition">
                        <span class="flex items-center gap-2"><i class="fa-regular fa-file-powerpoint text-orange-600 text-sm w-4 text-center"></i> <a href="<?= base_url('dokumenfile/?type=ppt')?>">PPT</a></span>
                        <span class="bg-orange-50 text-orange-600 text-[9px] font-bold px-1.5 py-0.5 rounded"><?= $total_ppt ?></span>
                    </li>
                    <li class="flex items-center justify-between hover:text-[#0099b8] cursor-pointer transition">
                        <span class="flex items-center gap-2"><i class="fa-regular fa-file-pdf text-red-600 text-sm w-4 text-center"></i><a href="<?= base_url('dokumenfile/?type=pdf')?>"> PDF</a></span>
                        <span class="bg-red-50 text-red-600 text-[9px] font-bold px-1.5 py-0.5 rounded"><?= $total_pdf ?></span>
                    </li>
                    <li class="flex items-center justify-between hover:text-[#0099b8] cursor-pointer transition">
                        <span class="flex items-center gap-2"><i class="fa-regular fa-file-zipper text-purple-600 text-sm w-4 text-center"></i> <a href="<?= base_url('dokumenfile/?type=zip')?>">ZIP</a></span>
                        <span class="bg-purple-50 text-purple-600 text-[9px] font-bold px-1.5 py-0.5 rounded"><?= $total_zip ?></span>
                    </li>
                </ul>
                </div>

			
			<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>

			 <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>

            <!-- ARTIKEL 1: ADMINISTRASI / SEKOLAH -->
            <?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>

         <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>
        
		</aside>

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

<?= $this->section('myscript') ?>
<script>
/* ============================================================
   DATABASE ALAT DIGITAL
   Tambah alat baru cukup di sini.
============================================================ */
	const database = [
	{
		kategori: "Gambar",
		warnaBg: "#fef9c3",
		warnaKat: "#854d0e",
		icon: "🔲",
		judul: "Resize Image",
		deskripsi: "Ubah ukuran gambar ke dimensi tertentu. Pertahankan rasio aspek secara otomatis.",
		tags: ["JPG","PNG","WEBP"],
		isAI: false,
		dilihat: "3.2 Ribu",
		href: "<?= base_url('resize_tools')?>"
	},
	{
		kategori: "Gambar",
		warnaBg: "#fef3c7",
		warnaKat: "#92400e",
		icon: "🗜️",
		judul: "Compress Image",
		deskripsi: "Perkecil ukuran file gambar tanpa kehilangan kualitas berarti. Atur tingkat kompresi sesukamu.",
		tags: ["JPG","PNG","WEBP"],
		isAI: false,
		dilihat: "4.1 Ribu",
		href: "<?= base_url('compres_image')?>"
	},
	{
		kategori: "Gambar",
		warnaBg: "#e0f2fe",
		warnaKat: "#0369a1",
		icon: "🔄",
		judul: "Konversi Format",
		deskripsi: "Konversi gambar antar format JPG, PNG, WEBP dengan sekali klik. Atur kualitas output.",
		tags: ["JPG","PNG","WEBP","GIF"],
		isAI: false,
		dilihat: "2.8 Ribu",
		href: "<?= base_url('convert_image')?>"
	},
	{
		kategori: "Generator",
		warnaBg: "#f3e8ff",
		warnaKat: "#7c3aed",
		icon: "📱",
		judul: "QR Code Generator",
		deskripsi: "Buat QR Code dari URL, teks, nomor WhatsApp, atau telepon. Pilih warna & ukuran, download PNG.",
		tags: ["URL","Teks","WhatsApp","Telepon"],
		isAI: false,
		dilihat: "5.6 Ribu",
		href: "<?= base_url('create_qr')?>"
	},
	{
		kategori: "Generator",
		warnaBg: "#dcfce7",
		warnaKat: "#15803d",
		icon: "✍️",
		judul: "Tanda Tangan Dan Stempel Digital",
		deskripsi: "Buat TTD manual atau ekstrak foto TTD & Stempel dari kertas, ubah warna tinta, lalu unduh PNG transparan.",
		tags: ["PNG","Transparan"],
		isAI: true,
		dilihat: "7.4 Ribu",
		href: "<?= base_url('tandatangan')?>"
	},
	];

	let activeFilter = 'Semua';
	let searchQuery  = '';

/* ------- filter ------- */
	function getFiltered() {
		return database.filter(d => {
			const matchKat = activeFilter === 'Semua' || d.kategori === activeFilter;
			const matchSearch = !searchQuery ||
			d.judul.toLowerCase().includes(searchQuery.toLowerCase()) ||
			d.deskripsi.toLowerCase().includes(searchQuery.toLowerCase()) ||
			d.kategori.toLowerCase().includes(searchQuery.toLowerCase()) ||
			d.tags.some(t => t.toLowerCase().includes(searchQuery.toLowerCase()));
			return matchKat && matchSearch;
		});
	}

/* ------- card HTML ------- */
	function cardHTML(d) {
		const aiBadge = d.isAI ? `` : '';
		const tagHTML = d.tags.map(t => `<span class="tool-tag">${t}</span>`).join('');
		return `
		<div class="tool-card">
		<div class="tool-thumb" style="background:${d.warnaBg}">
		<span style="font-size:42px">${d.icon}</span>
		<span class="badge-gratis">Gratis</span>
		${aiBadge}
		</div>
		<div class="tool-body">
		<div class="tool-cat" style="color:${d.warnaKat}">${d.kategori}</div>
		<div class="tool-title">${d.judul}</div>
		<div class="tool-desc">${d.deskripsi}</div>
		<div class="tool-tags">${tagHTML}</div>
		<div class="tool-meta-row">
		<span><i class="fa-solid fa-eye fa-xs"></i> ${d.dilihat} dilihat</span>
		<span style="background:#f0fdf4;color:#15803d;font-size:9px;font-weight:700;padding:2px 7px;border-radius:20px">✅ Browser</span>
		</div>
		</div>
		<a href="${d.href}" class="tool-btn">
		+ Buka Alat
		</a>
		</div>
		`;
	}

/* ------- render utama ------- */
	function render() {
		const filtered = getFiltered();
		const kategoriList = ['Semua', ...new Set(database.map(d => d.kategori))];

		const chips = kategoriList.map(k =>
			`<button onclick="setFilter('${k}')" class="filter-chip ${k === activeFilter ? 'active-blue' : ''}">${k}</button>`
			).join('');

		const cards = filtered.length > 0
		? filtered.map(cardHTML).join('')
		: `<div class="col-span-3 text-center py-12 text-slate-400 text-sm font-medium">😕 Tidak ada alat yang cocok dengan pencarianmu.</div>`;

		document.getElementById('mainContent').innerHTML = `
		<!-- HERO MINI -->
		<div class="page-hero text-white" style="display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;">
		<div style="flex:1;min-width:160px;">
		<div style="font-size:15px;font-weight:700;margin-bottom:4px;">Alat Digital Gratis</div>
		<div style="font-size:11.5px;color:rgba(255,255,255,0.78);line-height:1.5;">
		Semua proses di browser — tidak ada file yang<br>dikirim ke server. Privat & aman.
		</div>
		</div>
		<div style="display:flex;gap:8px;flex-shrink:0;">
		<div style="background:rgba(255,255,255,0.15);border-radius:10px;padding:10px 18px;text-align:center;min-width:72px;">
		<div style="font-size:20px;font-weight:700;line-height:1;">${database.length}</div>
		<div style="font-size:9px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:rgba(255,255,255,0.75);margin-top:3px;">ALAT</div>
		</div>
		<div style="background:rgba(255,255,255,0.15);border-radius:10px;padding:10px 18px;text-align:center;min-width:72px;">
		<div style="font-size:20px;font-weight:700;line-height:1;">${new Set(database.map(d=>d.kategori)).size}</div>
		<div style="font-size:9px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:rgba(255,255,255,0.75);margin-top:3px;">KATEGORI</div>
		</div>
		<div style="background:rgba(255,255,255,0.15);border-radius:10px;padding:10px 18px;text-align:center;min-width:72px;">
		<div style="font-size:20px;font-weight:700;line-height:1;color:#4ade80;">🔒</div>
		<div style="font-size:9px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:rgba(255,255,255,0.75);margin-top:3px;">PRIVAT</div>
		</div>
		</div>
		</div>

		<!-- SEARCH -->
		<div class="search-wrap">
		<input type="text" id="mainSearch" placeholder="Cari alat digital..." value="${searchQuery.replace(/"/g,'&quot;')}" oninput="onSearch(this.value)">
		<button class="search-btn-blue"><i class="fa-solid fa-magnifying-glass fa-xs mr-1"></i> Cari</button>
		</div>

		<!-- CHIPS -->
		<div class="chips-scroll">${chips}</div>

		<!-- GRID -->
		<div class="cards-grid">${cards}</div>

		<!-- INFO PRIVASI -->
		<div style="background:#f0fdf4;border:1px solid #bbf7d0;border-radius:10px;padding:12px 16px;display:flex;align-items:center;gap:10px;margin-top:4px;font-size:11px;color:#166534;">
		<span style="font-size:18px;">🔒</span>
		<span><strong>Privasi & Keamanan:</strong> Semua alat memproses file sepenuhnya di dalam browser kamu. File tidak pernah diunggah ke server Pena Ilmu atau pihak ketiga manapun.</span>
		</div>
		`;

		renderSidebar();
	}

/* ------- sidebar ------- */
	function renderSidebar() {
    // daftar alat
		document.getElementById('sidebarAlat').innerHTML = database.map(d =>
			`<li class="flex items-center justify-between hover:text-[#0099b8] cursor-pointer transition" onclick="window.location='${d.href}'">
			<span class="flex items-center gap-2"><span style="font-size:13px">${d.icon}</span> ${d.judul}</span>
			<span class="text-slate-300"><i class="fa-solid fa-chevron-right text-[9px]"></i></span>
			</li>`
			).join('');

    // kategori
		const kategoriList = [...new Set(database.map(d => d.kategori))];
		document.getElementById('sidebarKategori').innerHTML = kategoriList.map(k => {
			const count = database.filter(d => d.kategori === k).length;
			return `<li class="flex items-center justify-between hover:text-[#0099b8] cursor-pointer transition" onclick="setFilter('${k}')">
			<span class="flex items-center gap-2"><span class="text-slate-300">•</span> ${k}</span>
			<span class="bg-blue-50 text-blue-600 text-[9px] font-bold px-1.5 py-0.5 rounded">${count}</span>
			</li>`;
		}).join('');
	}

/* ------- event handlers ------- */
	function setFilter(k) {
		activeFilter = k;
		render();
		document.getElementById('mainContent').scrollIntoView({ behavior:'smooth', block:'start' });
	}

	function onSearch(val) {
		searchQuery = val;
		render();
	}

	function doHeroSearch() {
		const val = document.getElementById('heroSearch').value;
		searchQuery = val;
		activeFilter = 'Semua';
		render();
		const ms = document.getElementById('mainSearch');
		if (ms) ms.value = val;
		document.getElementById('mainContent').scrollIntoView({ behavior:'smooth', block:'start' });
	}

/* ------- init ------- */
	window.onload = () => render();
</script>
<?= $this->endSection(); ?>