<?php
require_once 'config.php';

if (!isset($_GET['id'])) {
    header("Location: index.php"); exit;
}

$id = $_GET['id'];

// 1. Ambil Berita Utama
$stmt = $pdo->prepare("SELECT * FROM berita WHERE id_berita = ?");
$stmt->execute([$id]);
$b = $stmt->fetch();

if (!$b) { 
    echo "<script>alert('Berita tidak ditemukan!'); window.location='index.php';</script>"; 
    exit; 
}

// 2. Ambil Navigasi: Berita Selanjutnya (ID yang lebih besar)
$next_stmt = $pdo->prepare("SELECT id_berita, judul FROM berita WHERE id_berita > ? ORDER BY id_berita ASC LIMIT 1");
$next_stmt->execute([$id]);
$next_post = $next_stmt->fetch();

// 3. Ambil Berita Lainnya (Arsip Singkat untuk Sidebar)
$arsip = $pdo->query("SELECT id_berita, judul, tgl_posting FROM berita WHERE id_berita != $id ORDER BY tgl_posting DESC LIMIT 5")->fetchAll();
?>

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= htmlspecialchars($b['judul']) ?> - 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>
        body { background-color: #f8f9fa; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
        .article-content { line-height: 1.8; font-size: 1.1rem; color: #333; }
        .article-content img { max-width: 100%; height: auto; border-radius: 10px; }
        .hero-img { width: 100%; max-height: 450px; object-fit: cover; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
        .sidebar-card { border: none; border-radius: 12px; transition: 0.3s; }
        .sidebar-card:hover { transform: translateX(5px); }
        .sticky-top-custom { top: 80px; }
    </style>
</head>
<body>

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

<div class="container mb-5">
    <div class="row g-4">
        <div class="col-lg-8">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-2">
                    <li class="breadcrumb-item"><a href="index.php" class="text-decoration-none">Beranda</a></li>
                    <li class="breadcrumb-item active"><?= $b['kategori'] ?></li>
                </ol>
            </nav>
            
            <h1 class="fw-bold mb-3"><?= htmlspecialchars($b['judul']) ?></h1>
            
            <div class="d-flex align-items-center text-muted small mb-4">
                <span class="me-3"><i class="fa fa-calendar-alt me-1"></i> <?= date('d M Y', strtotime($b['tgl_posting'])) ?></span>
                <span><i class="fa fa-tag me-1"></i> <?= $b['kategori'] ?></span>
            </div>

            <?php if($b['gambar']): ?>
                <img src="assets/img/berita/<?= $b['gambar'] ?>" class="hero-img mb-5" alt="Gambar Berita">
            <?php endif; ?>

            <div class="article-content bg-white p-4 p-md-5 rounded-4 shadow-sm mb-5">
                <?= $b['isi'] ?>
            </div>

            <div class="row g-3 mt-5">
                <div class="col-6">
                    <a href="berita_arsip.php" class="btn btn-outline-dark w-100 py-2 rounded-pill shadow-sm">
                        <i class="fa fa-th-large me-2"></i> Arsip Berita
                    </a>
                </div>

                <div class="col-6 text-end">
                    <?php if($next_post): ?>
                        <a href="detail_berita.php?id=<?= $next_post['id_berita'] ?>" class="btn btn-primary w-100 py-2 rounded-pill shadow-sm">
                            Berikutnya <i class="fa fa-chevron-right ms-2"></i>
                        </a>
                    <?php else: ?>
                        <a href="index.php" class="btn btn-light w-100 py-2 rounded-pill shadow-sm text-muted">
                            Kembali ke Beranda
                        </a>
                    <?php endif; ?>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="sticky-top sticky-top-custom">
                <h5 class="fw-bold mb-3 border-start border-4 border-primary ps-3">Baca Juga</h5>
                <?php foreach($arsip as $a): ?>
                    <a href="detail_berita.php?id=<?= $a['id_berita'] ?>" class="text-decoration-none text-dark">
                        <div class="card sidebar-card mb-3 shadow-sm">
                            <div class="card-body p-3">
                                <h6 class="fw-bold mb-1" style="font-size: 0.95rem;"><?= htmlspecialchars($a['judul']) ?></h6>
                                <small class="text-muted"><?= date('d M Y', strtotime($a['tgl_posting'])) ?></small>
                            </div>
                        </div>
                    </a>
                <?php endforeach; ?>

                <div class="card border-0 bg-primary text-white p-4 rounded-4 mt-4 shadow">
                    <h6 class="fw-bold"><i class="fa fa-lock me-2"></i>Akses Sistem</h6>
                    <p class="small opacity-75">Kelola data posyandu dan kesehatan balita melalui dashboard.</p>
                    <a href="login.php" class="btn btn-light btn-sm fw-bold w-100">Masuk ke Dashboard</a>
                </div>
            </div>
        </div>
    </div>
</div>

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

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>