<?php 
/**
 * view_post.php - ইমেজ সাইজ ছোট করা হয়েছে এবং সাইডবার স্টিকি করা হয়েছে
 */

include('db_config.php');
include('header.php'); 

$post_id = isset($_GET['id']) ? (int)$_GET['id'] : 0;

// ডাটাবেস থেকে পোস্ট আনা
$sql = "SELECT * FROM blogs WHERE id = '$post_id' AND status = 'Published' LIMIT 1";
$result = mysqli_query($conn, $sql);
$post = mysqli_fetch_assoc($result);

if (!$post) {
    echo "<div class='container' style='padding:100px 15px; text-align:center;'><h2>পোস্টটি পাওয়া যায়নি।</h2></div>";
    include('footer.php');
    exit;
}

// সাম্প্রতিক পোস্ট
$recent_sql = "SELECT id, title, featured_image, created_at FROM blogs WHERE status = 'Published' AND id != '$post_id' ORDER BY created_at DESC LIMIT 5";
$recent_result = mysqli_query($conn, $recent_sql);
?>
<style>
    .blog-title-section {
        background: #fff;
        width: 100%;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
        padding: 5px 20px;
    }
</style>
<div class="container" style="max-width: 1200px; padding: 40px 15px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start;">
    
    <!-- মূল কন্টেন্ট এরিয়া -->
    <div style="flex: 3; min-width: 300px; margin-top: -30px;">
        <nav style="margin-bottom: 10px;">
            <a href="blog.php" style="text-decoration: none; color: #57a03a; font-size: 14px; font-weight: bold;">&larr; ব্লগে ফিরে যান</a>
        </nav>

        <!-- ১. ছবি সবার উপরে (সাইজ ছোট করা হয়েছে) -->
        <?php if(!empty($post['featured_image'])): ?>
            <div style="margin-bottom: 5px;"> <!-- ছবির উইডথ এখানে সীমিত করা হয়েছে -->
                <img src="<?php echo htmlspecialchars($post['featured_image']); ?>" 
                     alt="<?php echo htmlspecialchars($post['title']); ?>" 
                     style="width: 100%; height: 400px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.08);">
            </div>
        <?php endif; ?>
        <div class="blog-title-section">
        <!-- ২. টাইটেল এবং মেটা ডাটা -->
        <h1 style="font-size: 28px; color: #1a1a1a; margin-bottom: 0px; line-height: 1.3;">
            <?php echo htmlspecialchars($post['title']); ?>
        </h1>
        
        <div style="color: #666; font-size: 14px; margin-bottom: 5px; display: flex; gap: 15px; align-items: center;">
            <span style="display: flex; align-items: center; gap: 5px;">
                <svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/></svg>
                <?php echo htmlspecialchars($post['author']); ?>
            </span>
            <span style="display: flex; align-items: center; gap: 5px;">
                <svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/></svg>
                <?php echo date('d M, Y', strtotime($post['created_at'])); ?>
            </span>
        </div>
        </div>

        <hr style="border: 0; border-top: 1px solid #eee; margin-bottom: 30px;">

        <!-- ৩. বিস্তারিত বর্ণনা -->
        <div class="post-content" style="font-size: 17px; line-height: 1.8; color: #333; text-align: justify;">
            <?php echo $post['content']; ?>
        </div>
    </div>

    <!-- ৪. স্টিকি সাইডবার -->
    <div style="flex: 1; min-width: 280px; max-width: 350px; position: sticky; top: 80px;">
        <div style="background: #fff; padding: 10px; border: 1px solid #eaeaea; border-radius: 12px; box-shadow: 0 2px 15px rgba(0,0,0,0.03);">
            <h3 style="font-size: 18px; margin-bottom: 20px; color: #1a1a1a; border-left: 4px solid #57a03a; padding-left: 12px; font-weight: 600;">সাম্প্রতিক খবর</h3>
            
            <div style="display: flex; flex-direction: column; gap: 12px;">
                <?php while($recent = mysqli_fetch_assoc($recent_result)): ?>
                    <a href="view_post.php?id=<?php echo $recent['id']; ?>" class="recent-item" style="text-decoration: none; display: flex; gap: 12px; align-items: flex-start; background: #f9f9f9; padding: 10px; border-radius: 8px; border: 1px solid #f0f0f0; transition: all 0.2s ease;">
                        <img src="<?php echo htmlspecialchars($recent['featured_image']); ?>" 
                             style="width: 70px; height: 55px; object-fit: cover; border-radius: 6px; flex-shrink: 0; background: #f0f0f0;">
                        <div style="flex: 1;">
                            <h4 style="margin: 0; font-size: 14px; color: #333; line-height: 1.4; font-weight: 500; transition: color 0.2s;">
                                <?php echo htmlspecialchars($recent['title']); ?>
                            </h4>
                            <small style="color: #999; font-size: 11px;"><?php echo date('d M, Y', strtotime($recent['created_at'])); ?></small>
                        </div>
                    </a>
                <?php endwhile; ?>
            </div>
        </div>
    </div>
</div>

<style>
/* লিঙ্কের ওপর হোভার ইফেক্ট */
.recent-item:hover {
    background: #f0f7ed !important;
    border-color: #dcedd5 !important;
    transform: translateY(-2px);
}
.recent-item:hover h4 {
    color: #57a03a !important;
}
/* কন্টেন্টের ভেতর ছবির জন্য ফিক্স */
.post-content img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 8px;
    margin: 20px 0;
}
</style>

<?php include('footer.php'); ?>