<?php
require_once 'includes/db.php';

$slug = isset($_GET['slug']) ? trim($_GET['slug']) : '';
$article = null;

if (!empty($slug)) {
    try {
        $stmt = $pdo->prepare("SELECT * FROM articles WHERE slug = ?");
        $stmt->execute([$slug]);
        $article = $stmt->fetch();
    } catch (Exception $e) {
        $article = null;
    }
}

if (!$article) {
    header("Location: blog.php");
    exit;
}

$page_title = $article['title'];
$page_desc = substr(strip_tags($article['content']), 0, 160);
require_once 'includes/header.php';

if (!isset($settings['menu_blog_visible']) || $settings['menu_blog_visible'] == 0) {
    header("Location: index.php");
    exit;
}

// Fetch other recent articles (excluding current)
try {
    $stmt = $pdo->prepare("SELECT * FROM articles WHERE id != ? ORDER BY id DESC LIMIT 3");
    $stmt->execute([$article['id']]);
    $recent_articles = $stmt->fetchAll();
} catch (Exception $e) {
    $recent_articles = [];
}
?>

<!-- Article Header Banner -->
<section style="background: linear-gradient(rgba(15, 23, 42, 0.8), rgba(15, 23, 42, 0.8)), url('assets/images/hero_bg.jpg') no-repeat center center/cover; padding: 120px 0 60px; text-align: center; color: var(--text-light);">
    <div class="container" style="max-width: 900px;">
        <h1 style="font-size: 36px; font-weight: 800; line-height: 1.3; margin-bottom: 20px;"><?php echo htmlspecialchars($article['title']); ?></h1>
        <div style="font-size: 14px; color: rgba(255, 255, 255, 0.8); display: flex; justify-content: center; gap: 20px; flex-wrap: wrap;">
            <span><i class="far fa-user" style="color: var(--primary); margin-right: 5px;"></i> <?php echo htmlspecialchars($article['author']); ?></span>
            <span><i class="far fa-calendar-alt" style="color: var(--primary); margin-right: 5px;"></i> <?php echo date('d M Y', strtotime($article['created_at'])); ?></span>
        </div>
    </div>
</section>

<!-- Main content -->
<section class="bg-alt">
    <div class="container" style="max-width: 1200px;">
        <div style="display: grid; grid-template-columns: 2.5fr 1.2fr; gap: 40px; align-items: start;">
            
            <!-- Article Body -->
            <div style="background: #ffffff; padding: 40px; border-radius: 12px; box-shadow: var(--shadow-md); border: 1px solid var(--border-color);">
                <div style="margin-bottom: 30px; border-radius: 8px; overflow: hidden; height: 400px; border: 1px solid var(--border-color);">
                    <?php 
                    $img_src = '';
                    if (!empty($article['image']) && file_exists('uploads/' . $article['image'])) {
                        $img_src = 'uploads/' . $article['image'];
                    } elseif (!empty($article['image']) && file_exists('assets/images/' . $article['image'])) {
                        $img_src = 'assets/images/' . $article['image'];
                    } else {
                        $img_src = get_article_fallback_image($article['slug']);
                    }
                    ?>
                    <img src="<?php echo $img_src; ?>" alt="<?php echo htmlspecialchars($article['title']); ?>" style="width: 100%; height: 100%; object-fit: cover;">
                </div>
                
                <div class="article-content-body" style="line-height: 1.9; color: var(--text-dark); font-size: 16px;">
                    <?php echo $article['content']; ?>
                </div>
                
                <div style="margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center;">
                    <a href="blog.php" style="color: var(--primary); font-weight: 700; text-decoration: none; font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px;">
                        <i class="fas fa-arrow-left"></i> Kembali ke Blog
                    </a>
                    
                    <!-- Share Button (WhatsApp) -->
                    <a href="https://api.whatsapp.com/send?text=<?php echo urlencode($article['title'] . ' ' . (isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on' ? "https" : "http") . "://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]"); ?>" target="_blank" style="background-color: #25d366; color: #fff; text-decoration:none; padding: 8px 18px; border-radius: 20px; font-weight: 600; font-size: 13px; display: inline-flex; align-items: center; gap: 8px;">
                        <i class="fab fa-whatsapp" style="font-size:16px;"></i> Bagikan Artikel
                    </a>
                </div>
            </div>
            
            <!-- Sidebar (Recent Articles) -->
            <div>
                <!-- Recent Posts Widget -->
                <div style="background: #ffffff; padding: 25px; border-radius: 12px; box-shadow: var(--shadow-sm); border: 1px solid var(--border-color); margin-bottom: 30px;">
                    <h3 style="font-size: 16px; font-weight: 700; color: var(--secondary); margin-bottom: 20px; border-bottom: 2px solid var(--primary); padding-bottom: 8px;">Artikel Terbaru</h3>
                    <div style="display: flex; flex-direction: column; gap: 20px;">
                        <?php if (count($recent_articles) > 0): ?>
                            <?php foreach ($recent_articles as $recent): ?>
                                <div style="display: flex; gap: 12px; align-items: center;">
                                    <!-- Mini Cover -->
                                    <div style="width: 70px; height: 50px; overflow: hidden; border-radius: 4px; border: 1px solid var(--border-color); flex-shrink: 0;">
                                        <?php 
                                        $rec_img = '';
                                        if (!empty($recent['image']) && file_exists('uploads/' . $recent['image'])) {
                                            $rec_img = 'uploads/' . $recent['image'];
                                        } elseif (!empty($recent['image']) && file_exists('assets/images/' . $recent['image'])) {
                                            $rec_img = 'assets/images/' . $recent['image'];
                                        } else {
                                            $rec_img = get_article_fallback_image($recent['slug']);
                                        }
                                        ?>
                                        <img src="<?php echo $rec_img; ?>" alt="<?php echo htmlspecialchars($recent['title']); ?>" style="width: 100%; height: 100%; object-fit: cover;">
                                    </div>
                                    <div>
                                        <h4 style="font-size: 13px; font-weight: 600; line-height: 1.3; margin-bottom: 4px;">
                                            <a href="blog-detail.php?slug=<?php echo htmlspecialchars($recent['slug']); ?>" style="color: var(--accent); text-decoration: none;">
                                                <?php echo htmlspecialchars($recent['title']); ?>
                                            </a>
                                        </h4>
                                        <span style="font-size: 10px; color: var(--text-muted);"><?php echo date('d M Y', strtotime($recent['created_at'])); ?></span>
                                    </div>
                                </div>
                            <?php endforeach; ?>
                        <?php else: ?>
                            <p style="font-size:13px; color: var(--text-muted);">Tidak ada artikel lain.</p>
                        <?php endif; ?>
                    </div>
                </div>
                
                <!-- CTA Widget -->
                <div style="background-color: var(--secondary); color: #fff; padding: 25px; border-radius: 12px; text-align: center; border: 1px solid var(--border-color);">
                    <h4 style="font-size: 16px; font-weight: 700; margin-bottom: 12px; color: var(--primary);">Butuh Agregat Material?</h4>
                    <p style="font-size: 13px; color: rgba(255,255,255,0.7); line-height: 1.5; margin-bottom: 20px;">Hubungi tim penjualan kami untuk mendapatkan penawaran harga terbaik batu split langsung dari tambang.</p>
                    <a href="https://wa.me/<?php echo $settings['whatsapp_number']; ?>" target="_blank" style="background-color: var(--primary); color: #1e293b; text-decoration:none; padding: 10px 20px; border-radius: 20px; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; display: block;">
                        Hubungi WhatsApp
                    </a>
                </div>
            </div>
            
        </div>
    </div>
</section>

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