<?php
require_once 'config.php';
$id = isset($_GET['id']) ? (int)$_GET['id'] : 0;
$berita = null;

if ($id > 0) {
    $stmt = $pdo->prepare("SELECT * FROM berita WHERE id = ?");
    $stmt->execute([$id]);
    $berita = $stmt->fetch(PDO::FETCH_ASSOC);
}

// Fungsi untuk membersihkan HTML dari tag berbahaya (cegah XSS)
function clean_html($html) {
    // Hapus tag yang berpotensi berbahaya
    $dangerous_tags = ['script', 'iframe', 'object', 'embed', 'applet', 'form', 'input', 'textarea', 'select', 'button'];
    foreach ($dangerous_tags as $tag) {
        $html = preg_replace('#<' . $tag . '[^>]*>.*?</' . $tag . '>#is', '', $html);
        $html = preg_replace('#<' . $tag . '[^>]*/?>#is', '', $html);
    }
    // Hapus event handler berbahaya (onclick, onerror, onload, dll)
    $html = preg_replace('/\s+on\w+\s*=\s*["\'][^"\']*["\']/i', '', $html);
    // Hapus javascript: di href
    $html = preg_replace('/href\s*=\s*["\']javascript:[^"\']*["\']/i', 'href="#"', $html);
    return $html;
}
?>
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title><?= $berita ? htmlspecialchars($berita['judul']) : 'Berita Tidak Ditemukan' ?> - SPAM Tirtha Kedawung</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>
        :root { --primary-sage: #5C8D89; --dark-sage: #3A6B69; --bg-color: #F4F7F6; }
        body { background: var(--bg-color); font-family: 'Segoe UI', sans-serif; color: #2f3440; margin: 0; padding: 0; }
        .header-back { 
            background: white; 
            padding: 15px; 
            border-bottom: 1px solid #eee; 
            position: sticky; 
            top: 0; 
            z-index: 100;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }
        .btn-back { 
            text-decoration: none; 
            color: var(--primary-sage); 
            font-weight: 700; 
            font-size: 0.95rem;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }
        .content-card { 
            background: white; 
            border-radius: 20px; 
            padding: 25px; 
            margin: 20px 15px; 
            box-shadow: 0 6px 20px rgba(0,0,0,0.04); 
        }
        .berita-img { 
            width: 100%; 
            max-height: 300px; 
            object-fit: cover; 
            border-radius: 15px; 
            margin-bottom: 20px; 
        }
        .berita-title { 
            font-size: 1.4rem; 
            font-weight: 800; 
            margin-bottom: 10px; 
            line-height: 1.3; 
            color: #2f3440;
        }
        .berita-meta { 
            font-size: 0.85rem; 
            color: #7a8190; 
            margin-bottom: 20px; 
            display: flex;
            align-items: center;
            gap: 12px;
            flex-wrap: wrap;
        }
        .badge-kat { 
            background: #E6F0EF; 
            color: var(--primary-sage); 
            padding: 5px 12px; 
            border-radius: 20px; 
            font-size: 0.8rem; 
            font-weight: 700;
            display: inline-block;
        }
        
        /* ===== Styling Konten HTML dari TinyMCE ===== */
        .berita-isi {
            font-size: 1rem;
            line-height: 1.8;
            color: #4a5568;
        }
        .berita-isi p {
            margin-bottom: 1em;
            text-align: justify;
        }
        .berita-isi h1, .berita-isi h2, .berita-isi h3, .berita-isi h4, 
        .berita-isi h5, .berita-isi h6 {
            color: #2f3440;
            margin-top: 1.5em;
            margin-bottom: 0.7em;
            font-weight: 700;
            line-height: 1.3;
        }
        .berita-isi h1 { font-size: 1.6rem; }
        .berita-isi h2 { font-size: 1.35rem; }
        .berita-isi h3 { font-size: 1.15rem; }
        .berita-isi h4 { font-size: 1.05rem; }
        .berita-isi ul, .berita-isi ol {
            margin-bottom: 1em;
            padding-left: 1.8em;
        }
        .berita-isi li {
            margin-bottom: 0.5em;
        }
        .berita-isi ul li {
            list-style-type: disc;
        }
        .berita-isi ol li {
            list-style-type: decimal;
        }
        .berita-isi blockquote {
            border-left: 4px solid var(--primary-sage);
            padding: 12px 18px;
            margin: 1.2em 0;
            background: #f0f7f6;
            border-radius: 0 8px 8px 0;
            font-style: italic;
            color: #5a6270;
        }
        .berita-isi table {
            width: 100%;
            border-collapse: collapse;
            margin: 1.2em 0;
            font-size: 0.95rem;
            overflow-x: auto;
            display: block;
        }
        .berita-isi table th, .berita-isi table td {
            border: 1px solid #ddd;
            padding: 10px 12px;
            text-align: left;
        }
        .berita-isi table th {
            background: #f0f7f6;
            font-weight: 700;
            color: var(--primary-sage);
        }
        .berita-isi table tr:nth-child(even) {
            background: #f9fafb;
        }
        .berita-isi img {
            max-width: 100%;
            height: auto;
            border-radius: 10px;
            margin: 12px 0;
            display: block;
        }
        .berita-isi a {
            color: var(--primary-sage);
            text-decoration: underline;
            font-weight: 600;
        }
        .berita-isi a:hover {
            color: var(--dark-sage);
        }
        .berita-isi strong, .berita-isi b {
            font-weight: 700;
            color: #2f3440;
        }
        .berita-isi em, .berita-isi i {
            font-style: italic;
        }
        .berita-isi code {
            background: #f0f0f0;
            padding: 2px 6px;
            border-radius: 4px;
            font-size: 0.9em;
            font-family: 'Courier New', monospace;
        }
        .berita-isi pre {
            background: #f5f5f5;
            padding: 12px;
            border-radius: 8px;
            overflow-x: auto;
            font-size: 0.9rem;
        }
        .berita-isi hr {
            border: none;
            border-top: 1px dashed #d0d7de;
            margin: 1.5em 0;
        }
        
        /* Responsive table wrapper */
        .table-responsive-custom {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }
        .table-responsive-custom table {
            display: table;
            min-width: 100%;
        }
        
        footer { 
            text-align: center; 
            padding: 20px; 
            font-size: 0.75rem; 
            color: #8d94a2;
            background: white;
            border-top: 1px solid #f0f0f0;
            margin-top: 20px;
        }
    </style>
</head>
<body>

<div class="header-back">
    <div class="container" style="max-width: 800px;">
        <a href="index.php" class="btn-back">
            <i class="fa-solid fa-arrow-left"></i> Kembali ke Beranda
        </a>
    </div>
</div>

<div class="container pb-5" style="max-width: 800px;">
    <?php if ($berita): ?>
        <div class="content-card">
            <?php if (!empty($berita['gambar'])): ?>
                <img src="<?= htmlspecialchars($berita['gambar']) ?>" class="berita-img" alt="Gambar Berita">
            <?php endif; ?>
            
            <span class="badge-kat mb-3"><?= ucfirst($berita['kategori']) ?></span>
            <h1 class="berita-title"><?= htmlspecialchars($berita['judul']) ?></h1>
            
            <div class="berita-meta">
                <span><i class="fa-regular fa-calendar me-1"></i> <?= date('d F Y', strtotime($berita['tgl_posting'])) ?></span>
                <?php if (!empty($berita['penulis'])): ?>
                    <span><i class="fa-regular fa-user me-1"></i> <?= htmlspecialchars($berita['penulis']) ?></span>
                <?php endif; ?>
            </div>
            
            <hr style="border-top: 1px dashed #e0e0e0;">
            
            <!-- Render HTML dengan aman -->
            <div class="berita-isi table-responsive-custom">
                <?= clean_html($berita['isi']) ?>
            </div>
        </div>
    <?php else: ?>
        <div class="content-card text-center py-5">
            <i class="fa-solid fa-newspaper fa-3x text-muted mb-3 opacity-50"></i>
            <h4 class="fw-bold">Berita Tidak Ditemukan</h4>
            <p class="text-muted">Berita yang Anda cari tidak ada atau telah dihapus.</p>
            <a href="index.php" class="btn mt-3" style="background: var(--primary-sage); color: white; border-radius: 12px; padding: 10px 25px; text-decoration: none;">Kembali ke Beranda</a>
        </div>
    <?php endif; ?>
</div>

<footer>
    <div class="d-flex align-items-center justify-content-center gap-2 flex-wrap">
        <img src="assets/uploads/logo/tirtha-kedawung.png" 
             alt="Logo Tirtha Kedawung" 
             style="height:20px; width:auto; object-fit:contain;">
        <span>&copy; 2026 <b>SPAM Tirtha Kedawung</b> - Transparansi untuk Masyarakat</span>
    </div>
</footer>

</body>
</html>