<?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';

$slug = $_GET['slug'] ?? '';
if(!$slug) { header('Location: edukasi'); exit; }

$db = getDB();
$stmt = $db->prepare("SELECT e.*, k.nama as nama_kategori, u.nama_lengkap as penulis FROM edukasi e LEFT JOIN kategori_edukasi k ON e.kategori_id = k.id LEFT JOIN users u ON e.created_by = u.id WHERE e.slug = ? AND e.is_published = 1");
$stmt->execute([$slug]);
$artikel = $stmt->fetch();

if(!$artikel) {
    setFlash('error', 'Artikel tidak ditemukan.');
    header('Location: edukasi');
    exit;
}

// Update views
$db->prepare("UPDATE edukasi SET views = views + 1 WHERE id = ?")->execute([$artikel['id']]);
?>
<?php require_once '../includes/header_user.php'; ?>

<div class="max-w-4xl mx-auto">
    <!-- Breadcrumb -->
    <nav class="flex text-sm text-gray-500 mb-6 font-medium" aria-label="Breadcrumb">
        <ol class="inline-flex items-center space-x-1 md:space-x-3">
            <li class="inline-flex items-center">
                <a href="profil" class="hover:text-primary transition-colors flex items-center">
                    <i class="fas fa-home mr-2"></i> Profil
                </a>
            </li>
            <li>
                <div class="flex items-center">
                    <i class="fas fa-chevron-right text-xs mx-2 text-gray-400"></i>
                    <a href="edukasi" class="hover:text-primary transition-colors">Edukasi</a>
                </div>
            </li>
            <li aria-current="page">
                <div class="flex items-center">
                    <i class="fas fa-chevron-right text-xs mx-2 text-gray-400"></i>
                    <span class="text-gray-800 truncate max-w-[150px] md:max-w-xs"><?= escape($artikel['judul']) ?></span>
                </div>
            </li>
        </ol>
    </nav>

    <article class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
        <!-- Header Image -->
        <?php if($artikel['gambar']): ?>
            <div class="w-full h-56 md:h-80 relative">
                <img src="<?= BASE_URL ?>/assets/uploads/edukasi/<?= escape($artikel['gambar']) ?>" class="w-full h-full object-cover" alt="Cover">
                <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
                <div class="absolute bottom-0 left-0 p-6 md:p-8 w-full">
                    <span class="bg-primary text-white text-xs font-bold px-3 py-1 rounded-full shadow-md mb-3 inline-block">
                        <?= escape($artikel['nama_kategori']) ?>
                    </span>
                    <h1 class="text-2xl md:text-3xl lg:text-4xl font-bold text-white leading-tight">
                        <?= escape($artikel['judul']) ?>
                    </h1>
                </div>
            </div>
        <?php else: ?>
            <div class="p-6 md:p-8 pb-0">
                <span class="bg-primary/10 text-primary text-xs font-bold px-3 py-1 rounded-full mb-3 inline-block">
                    <?= escape($artikel['nama_kategori']) ?>
                </span>
                <h1 class="text-2xl md:text-3xl lg:text-4xl font-bold text-gray-900 leading-tight">
                    <?= escape($artikel['judul']) ?>
                </h1>
            </div>
        <?php endif; ?>

        <!-- Meta info -->
        <div class="px-6 md:px-8 py-4 border-b border-gray-100 flex flex-wrap items-center gap-4 text-sm text-gray-500 font-medium">
            <div class="flex items-center gap-2">
                <div class="w-7 h-7 rounded-full bg-primary/10 text-primary flex items-center justify-center text-xs">
                    <i class="fas fa-user-edit"></i>
                </div>
                <span>Ditulis oleh <strong class="text-gray-800"><?= escape($artikel['penulis']) ?></strong></span>
            </div>
            <div class="flex items-center gap-2">
                <i class="fas fa-calendar-alt text-gray-400"></i>
                <span><?= formatDate($artikel['created_at']) ?></span>
            </div>
            <div class="flex items-center gap-2">
                <i class="fas fa-eye text-gray-400"></i>
                <span><?= $artikel['views'] + 1 ?> kali dibaca</span>
            </div>
        </div>

        <!-- Content -->
        <div class="p-6 md:p-8">
            <div class="prose prose-lg max-w-none text-gray-700 leading-relaxed space-y-4">
                <?php
                $content = escape($artikel['isi_konten']);
                $content = '<p>' . str_replace("\n\n", '</p><p>', $content) . '</p>';
                $content = str_replace("\n", '<br>', $content);
                echo $content;
                ?>
            </div>
            
            <div class="mt-8 pt-6 border-t border-gray-100 flex justify-between items-center">
                <a href="edukasi" class="inline-flex items-center gap-2 text-primary font-medium hover:text-primary-dark transition-colors">
                    <i class="fas fa-arrow-left"></i> Kembali ke Daftar Artikel
                </a>
            </div>
        </div>
    </article>
</div>

<style>
.prose p { margin-bottom: 1.5em; }
</style>

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