<?php
require_once __DIR__ . '/../config/session.php';
requireLogin();
if($_SESSION['role'] !== 'user') {
    header('Location: ' . BASE_URL . '/admin/dashboard');
    exit;
}
require_once __DIR__ . '/../config/config.php';
require_once __DIR__ . '/../functions/helper.php';

$db = getDB();

$kategori_id = $_GET['kategori'] ?? '';

$where = "WHERE e.is_published = 1";
$params = [];
if($kategori_id) {
    $where .= " AND e.kategori_id = ?";
    $params[] = $kategori_id;
}

$stmt = $db->prepare("SELECT e.*, k.nama as nama_kategori FROM edukasi e LEFT JOIN kategori_edukasi k ON e.kategori_id = k.id $where ORDER BY e.created_at DESC");
$stmt->execute($params);
$artikel = $stmt->fetchAll();

$kategori_list = $db->query("SELECT * FROM kategori_edukasi")->fetchAll();
?>
<?php require_once '../includes/header_user.php'; ?>

<div class="mb-8">
    <h2 class="text-2xl font-bold text-gray-800">Edukasi Kehamilan</h2>
    <p class="text-gray-500">Pusat informasi dan panduan menjaga kesehatan ibu dan janin.</p>
</div>

<!-- Filter Bar -->
<div class="bg-white rounded-2xl shadow-sm border border-gray-200 p-4 md:p-6 mb-8 flex flex-col sm:flex-row sm:items-center justify-between gap-4">
    <div class="text-gray-600 font-medium px-2">
        <i class="fas fa-filter text-primary mr-2"></i> Filter Kategori:
    </div>
    <div class="sm:w-72">
        <form method="GET" class="relative">
            <select name="kategori" class="w-full pl-4 pr-10 py-2.5 bg-gray-50 border border-gray-200 rounded-xl focus:ring-2 focus:ring-primary focus:border-primary text-gray-700 font-medium cursor-pointer appearance-none transition-colors" onchange="this.form.submit()">
                <option value="">Semua Kategori</option>
                <?php foreach($kategori_list as $k): ?>
                    <option value="<?= $k['id'] ?>" <?= $k['id']==$kategori_id?'selected':'' ?>><?= escape($k['nama']) ?></option>
                <?php endforeach; ?>
            </select>
            <div class="absolute inset-y-0 right-0 pr-4 flex items-center pointer-events-none">
                <i class="fas fa-chevron-down text-gray-400 text-sm"></i>
            </div>
        </form>
    </div>
</div>

<?php if(count($artikel)>0): ?>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
    <?php foreach($artikel as $a): ?>
        <div class="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden hover:shadow-md transition-all duration-300 group flex flex-col hover:-translate-y-0.5">
            <div class="relative h-44 overflow-hidden bg-gray-100">
                <?php if($a['gambar']): ?>
                    <img src="<?= BASE_URL ?>/assets/uploads/edukasi/<?= escape($a['gambar']) ?>" class="w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-500" alt="Image">
                <?php else: ?>
                    <div class="w-full h-full flex items-center justify-center text-gray-300">
                        <i class="fas fa-image text-4xl"></i>
                    </div>
                <?php endif; ?>
                <div class="absolute top-3 left-3">
                    <span class="bg-white/90 backdrop-blur-md text-primary text-xs font-bold px-3 py-1 rounded-full shadow-sm">
                        <?= escape($a['nama_kategori']) ?>
                    </span>
                </div>
            </div>
            <div class="p-5 flex flex-col flex-grow">
                <p class="text-xs text-gray-500 mb-2 flex items-center gap-2">
                    <i class="far fa-calendar-alt"></i> <?= formatDate($a['created_at']) ?>
                </p>
                <h3 class="text-lg font-bold text-gray-900 mb-2 line-clamp-2 group-hover:text-primary transition-colors leading-tight">
                    <a href="edukasi_detail?slug=<?= $a['slug'] ?>"><?= escape($a['judul']) ?></a>
                </h3>
                <p class="text-gray-600 text-sm mb-4 line-clamp-3 flex-grow leading-relaxed"><?= escape($a['ringkasan']) ?></p>
                
                <a href="edukasi_detail?slug=<?= $a['slug'] ?>" class="mt-auto w-full inline-flex justify-center items-center gap-2 px-4 py-2 bg-primary/5 hover:bg-primary text-primary hover:text-white text-sm font-bold rounded-xl transition-colors">
                    Mulai Membaca <i class="fas fa-arrow-right text-xs"></i>
                </a>
            </div>
        </div>
    <?php endforeach; ?>
</div>
<?php else: ?>
    <div class="bg-white rounded-2xl shadow-sm border border-gray-200 p-12 text-center">
        <div class="w-20 h-20 bg-gray-50 rounded-full flex items-center justify-center mx-auto mb-4">
            <i class="fas fa-search text-3xl text-gray-300"></i>
        </div>
        <h3 class="text-xl font-bold text-gray-800 mb-2">Artikel Tidak Ditemukan</h3>
        <p class="text-gray-500">Belum ada artikel edukasi untuk kategori yang dipilih saat ini.</p>
        <?php if($kategori_id): ?>
            <a href="edukasi" class="mt-4 inline-block px-6 py-2 bg-primary text-white font-medium rounded-lg hover:bg-primary-dark transition-colors">Lihat Semua Artikel</a>
        <?php endif; ?>
    </div>
<?php endif; ?>

<?php require_once '../includes/footer_user.php'; ?>
