<?php
// category.php - Blog Posts by Category
// File location: /bidwheels.net/blog/category.php

require_once '../includes/functions.php';
require_once '../includes/header.php';

$category = isset($_GET['name']) ? sanitize($_GET['name']) : '';

if (empty($category)) {
    redirect('/blog/index.php');
}

$page = isset($_GET['page']) ? (int)$_GET['page'] : 1;
$offset = ($page - 1) * BLOG_POSTS_PER_PAGE;

$posts = fetchAll("
    SELECT * FROM blog_posts 
    WHERE category = '$category'
    ORDER BY created_at DESC
    LIMIT $offset, " . BLOG_POSTS_PER_PAGE
);

$total = getCount('blog_posts', "category = '$category'");
$total_pages = ceil($total / BLOG_POSTS_PER_PAGE);

// Get all categories for sidebar
$categories = fetchAll("
    SELECT category, COUNT(*) as count 
    FROM blog_posts 
    WHERE category IS NOT NULL AND category != ''
    GROUP BY category 
    ORDER BY count DESC
");
?>

<div class="container">
    <div class="blog-category-page" style="padding: 40px 0;">
        <div class="breadcrumb" style="margin-bottom: 20px;">
            <a href="<?php echo SITE_URL; ?>/index.php">Home</a> / 
            <a href="index.php">Blog</a> / 
            <span><?php echo htmlspecialchars($category); ?></span>
        </div>
        
        <h1 style="margin-bottom: 20px;">Category: <?php echo htmlspecialchars($category); ?></h1>
        <p style="margin-bottom: 30px; color: #666;"><?php echo $total; ?> posts found</p>
        
        <div class="blog-layout" style="display: grid; grid-template-columns: 1fr 280px; gap: 30px;">
            <!-- Main Content -->
            <div class="blog-content">
                <?php if (count($posts) > 0): ?>
                    <div class="blog-list">
                        <?php foreach ($posts as $post): ?>
                            <div class="blog-post-item" style="background: white; border-radius: 10px; overflow: hidden; margin-bottom: 30px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); display: flex;">
                                <?php if ($post['featured_image']): ?>
                                    <div class="post-image" style="width: 200px; flex-shrink: 0;">
                                        <img src="<?php echo SITE_URL; ?>/uploads/blog/<?php echo $post['featured_image']; ?>" alt="<?php echo htmlspecialchars($post['title']); ?>" style="width: 100%; height: 100%; object-fit: cover;">
                                    </div>
                                <?php endif; ?>
                                <div class="post-info" style="padding: 20px; flex: 1;">
                                    <h2 style="margin-bottom: 10px;"><?php echo htmlspecialchars($post['title']); ?></h2>
                                    <div class="post-meta" style="margin-bottom: 15px; color: #666; font-size: 13px;">
                                        <span><i class="fas fa-calendar"></i> <?php echo date('M d, Y', strtotime($post['created_at'])); ?></span>
                                        <?php if ($post['tags']): ?>
                                            <span style="margin-left: 15px;"><i class="fas fa-tags"></i> <?php echo htmlspecialchars($post['tags']); ?></span>
                                        <?php endif; ?>
                                    </div>
                                    <p><?php echo substr(strip_tags($post['content']), 0, 200); ?>...</p>
                                    <a href="post.php?id=<?php echo $post['id']; ?>" class="read-more" style="display: inline-block; margin-top: 15px; color: #e63946; text-decoration: none;">Continue Reading <i class="fas fa-arrow-right"></i></a>
                                </div>
                            </div>
                        <?php endforeach; ?>
                    </div>
                    
                    <!-- Pagination -->
                    <?php if ($total_pages > 1): ?>
                        <div class="pagination" style="display: flex; justify-content: center; gap: 10px; margin-top: 30px;">
                            <?php for ($i = 1; $i <= $total_pages; $i++): ?>
                                <a href="?name=<?php echo urlencode($category); ?>&page=<?php echo $i; ?>" 
                                   style="padding: 8px 15px; background: <?php echo $i == $page ? '#e63946' : 'white'; ?>; color: <?php echo $i == $page ? 'white' : '#333'; ?>; border: 1px solid #ddd; text-decoration: none; border-radius: 5px;">
                                    <?php echo $i; ?>
                                </a>
                            <?php endfor; ?>
                        </div>
                    <?php endif; ?>
                    
                <?php else: ?>
                    <div class="no-posts" style="text-align: center; padding: 60px; background: white; border-radius: 10px;">
                        <i class="fas fa-folder-open" style="font-size: 60px; color: #ccc; margin-bottom: 20px;"></i>
                        <h3>No posts in this category</h3>
                        <a href="index.php" class="btn btn-primary" style="display: inline-block; margin-top: 15px;">Browse All Posts</a>
                    </div>
                <?php endif; ?>
            </div>
            
            <!-- Sidebar -->
            <aside class="blog-sidebar">
                <div class="sidebar-widget" style="background: white; padding: 20px; border-radius: 10px; margin-bottom: 20px;">
                    <h3 style="margin-bottom: 15px;">Categories</h3>
                    <ul style="list-style: none; padding: 0;">
                        <?php foreach ($categories as $cat): ?>
                            <li style="margin-bottom: 10px;">
                                <a href="category.php?name=<?php echo urlencode($cat['category']); ?>" style="color: <?php echo $cat['category'] == $category ? '#e63946' : '#333'; ?>; text-decoration: none;">
                                    <?php echo htmlspecialchars($cat['category']); ?> (<?php echo $cat['count']; ?>)
                                </a>
                            </li>
                        <?php endforeach; ?>
                    </ul>
                </div>
            </aside>
        </div>
    </div>
</div>

<style>
@media (max-width: 768px) {
    .blog-layout {
        grid-template-columns: 1fr !important;
    }
    .blog-post-item {
        flex-direction: column;
    }
    .blog-post-item .post-image {
        width: 100%;
        height: 200px;
    }
}
</style>

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