<?php
require_once 'config.php';

// Ambil kategori dari URL jika ada
$kat_filter = isset($_GET['kategori']) ? $_GET['kategori'] : '';

// Query dasar
$query = "SELECT * FROM berita";
$params = [];

if ($kat_filter) {
    $query .= " WHERE kategori = ?";
    $params[] = $kat_filter;
}

$query .= " ORDER BY tgl_posting DESC";
$stmt = $pdo->prepare($query);
$stmt->execute($params);
$all_berita = $stmt->fetchAll();

// Ambil daftar kategori untuk sidebar filter
$categories = $pdo->query("SELECT kategori, COUNT(*) as total FROM berita GROUP BY kategori")->fetchAll();
?>

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Arsip Berita - Posyandu Desa</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        .news-card { border: none; transition: 0.3s; border-radius: 15px; overflow: hidden; }
        .news-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important; }
        .cat-badge { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 1px; }
        .filter-link { transition: 0.2s; border-radius: 8px; }
        .filter-link:hover, .filter-link.active { background: #0d6efd; color: white !important; }
    </style>
</head>
<body class="bg-light">

<nav class="navbar navbar-dark bg-primary shadow-sm sticky-top">
    <div class="container">
        <a class="navbar-brand fw-bold" href="index.php"><i class="fa fa-arrow-left me-2"></i>Beranda</a>
    </div>
</nav>

<div class="container py-5">
    <div class="row g-4">
        <div class="col-lg-3">
            <div class="card border-0 shadow-sm p-3 rounded-4">
                <h6 class="fw-bold mb-3">Kategori Berita</h6>
                <div class="list-group list-group-flush">
                    <a href="berita_arsip.php" class="list-group-item list-group-item-action border-0 filter-link <?= !$kat_filter ? 'active' : '' ?>">
                        Semua Berita
                    </a>
                    <?php foreach($categories as $cat): ?>
                    <a href="berita_arsip.php?kategori=<?= urlencode($cat['kategori']) ?>" 
                       class="list-group-item list-group-item-action border-0 d-flex justify-content-between align-items-center filter-link <?= $kat_filter == $cat['kategori'] ? 'active' : '' ?>">
                        <?= $cat['kategori'] ?>
                        <span class="badge rounded-pill bg-light text-dark border"><?= $cat['total'] ?></span>
                    </a>
                    <?php endforeach; ?>
                </div>
            </div>
        </div>

        <div class="col-lg-9">
            <?php if($kat_filter): ?>
                <h4 class="fw-bold mb-4">Menampilkan Kategori: <span class="text-primary"><?= htmlspecialchars($kat_filter) ?></span></h4>
            <?php else: ?>
                <h4 class="fw-bold mb-4">Semua Berita Terbaru</h4>
            <?php endif; ?>

            <div class="row g-4">
                <?php if (empty($all_berita)): ?>
                    <div class="col-12 text-center py-5">
                        <i class="fa fa-newspaper fa-4x text-muted mb-3"></i>
                        <p class="text-muted">Belum ada berita dalam kategori ini.</p>
                    </div>
                <?php endif; ?>

                <?php foreach($all_berita as $b): ?>
                <div class="col-md-6">
                    <div class="card news-card shadow-sm h-100">
                        <?php if($b['gambar']): ?>
                            <img src="assets/img/berita/<?= $b['gambar'] ?>" class="card-img-top" style="height: 200px; object-fit: cover;">
                        <?php endif; ?>
                        <div class="card-body p-4">
                            <span class="badge bg-primary-subtle text-primary cat-badge mb-2 px-3 py-2"><?= $b['kategori'] ?></span>
                            <h5 class="fw-bold"><?= htmlspecialchars($b['judul']) ?></h5>
                            <p class="text-muted small mb-4"><?= substr(strip_tags($b['isi']), 0, 120) ?>...</p>
                            <div class="d-flex justify-content-between align-items-center mt-auto">
                                <small class="text-muted"><i class="fa fa-calendar-alt me-1"></i> <?= date('d M Y', strtotime($b['tgl_posting'])) ?></small>
                                <a href="detail_berita.php?id=<?= $b['id_berita'] ?>" class="btn btn-sm btn-primary rounded-pill px-3">Baca</a>
                            </div>
                        </div>
                    </div>
                </div>
                <?php endforeach; ?>
            </div>
        </div>
    </div>
</div>

<footer class="bg-white py-4 border-top mt-5">
    <div class="container text-center">
        <p class="text-muted small mb-0">&copy; 2026 POSYANDU DESA. Melayani sepenuh hati.</p>
    </div>
</footer>

</body>
</html>