<?php
/*
Template Name: Blog
*/
get_header('inner');

if (have_posts()) : the_post();

// Get the category filter if set
$category = isset($_GET['category']) ? sanitize_text_field($_GET['category']) : '';

// Query parameters
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args = array(
    'post_type' => 'post',
    'posts_per_page' => 4,
    'paged' => $paged
);

// Add category filter if selected
if (!empty($category)) {
    $args['category_name'] = $category;
}

$blog_query = new WP_Query($args);
?>

<div class="mt-16">
    <div class="container px-4 sm:px-8 lg:grid lg:grid-cols-12 lg:gap-4">
        <div class="lg:col-span-12">
            <h2 class="uppercase text-black">Latest Blogs</h2>
        </div>
        <div class="lg:col-span-9">
            <?php
            if ($blog_query->have_posts()) :
                $count = 0;
                while ($blog_query->have_posts()) : $blog_query->the_post();
                    $count++;
                    $has_thumbnail = has_post_thumbnail();
                    ?>
                    <a href="<?php the_permalink(); ?>">
                        <div class="p-5 bg-white border border-gray-600 rounded-lg <?php echo $count > 1 ? 'mt-6' : ''; ?>">
                            <?php if ($has_thumbnail) : ?>
                                <div class="lg:grid lg:grid-cols-12 my-3.5">
                                    <div class="lg:col-span-4 overflow-hidden md:mr-5">
                                        <?php the_post_thumbnail('large', array('class' => 'h-60 w-full object-cover rounded-xl')); ?>
                                    </div>
                                    <div class="lg:col-span-8">
                            <?php endif; ?>

                            <div class="lg:col-span-12">
                                <div class="flex items-center text-black">
                                    <img src="<?php echo get_template_directory_uri(); ?>/images/date.png" alt="" class="mr-2.5" />
                                    <?php echo get_the_date('d M Y'); ?>
                                </div>
                            </div>
                            <div class="lg:col-span-12 my-3.5">
                                <h3 class="text-xl text-black">
                                    <?php the_title(); ?>
                                </h3>
                                <p class="text-sm mt-3">
                                    <?php echo wp_trim_words(get_the_excerpt(), 50); ?>
                                </p>
                            </div>

                            <?php if ($has_thumbnail) : ?>
                                    </div>
                                </div>
                            <?php endif; ?>
                        </div>
                    </a>
                <?php
                endwhile;

                // Pagination
                if ($blog_query->max_num_pages > 1) : ?>
                    <div class="flex flex-col space-y-4 items-center justify-center mt-6">
                        <nav aria-label="Page navigation example">
                            <ul class="flex items-center gap-2 h-8 text-sm">
                                <?php if ($paged > 1) : ?>
                                    <li>
                                        <a href="<?php echo get_pagenum_link($paged - 1); ?>"
                                           class="flex items-center justify-center px-3 h-8 ms-0 leading-tight bg-white border border-e-0 border-gray-300 rounded-s-lg hover:bg-gray-100 text-lg hover:text-gray-700 text-white dark:hover:bg-gray-700 dark:hover:text-white rounded green-bg">
                                            <span class="sr-only">Previous</span>
                                            <svg class="w-2.5 h-2.5 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
                                                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 1 1 5l4 4"/>
                                            </svg>
                                        </a>
                                    </li>
                                <?php endif; ?>

                                <?php
                                for ($i = 1; $i <= $blog_query->max_num_pages; $i++) :
                                    $is_current = $paged == $i;
                                ?>
                                    <li>
                                        <a href="<?php echo get_pagenum_link($i); ?>"
                                           class="flex items-center justify-center px-3 h-8 leading-tight <?php echo $is_current ? 'green-bg text-white' : 'text-gray-500 light-bg'; ?> border border-gray-300 text-base font-medium hover:bg-gray-100 hover:text-gray-700 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white rounded">
                                            <?php echo $i; ?>
                                        </a>
                                    </li>
                                <?php endfor; ?>

                                <?php if ($paged < $blog_query->max_num_pages) : ?>
                                    <li>
                                        <a href="<?php echo get_pagenum_link($paged + 1); ?>"
                                           class="flex items-center justify-center px-3 h-8 ms-0 leading-tight bg-white border border-e-0 border-gray-300 rounded-s-lg hover:bg-gray-100 text-lg hover:text-gray-700 text-white dark:hover:bg-gray-700 dark:hover:text-white rounded green-bg">
                                            <span class="sr-only">Next</span>
                                            <svg class="w-2.5 h-2.5 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
                                                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
                                            </svg>
                                        </a>
                                    </li>
                                <?php endif; ?>
                            </ul>
                        </nav>
                    </div>
                <?php endif;

                wp_reset_postdata();
            else : ?>
                <div class="p-5 bg-white border border-gray-600 rounded-lg">
                    <p class="text-center">No posts found.</p>
                </div>
            <?php endif; ?>
        </div>

        <div class="lg:col-span-3 mt-6 lg:mt-0">
          <!-- Categories Sidebar -->
          <div class="p-5 bg-white border border-gray-300 rounded-lg gap-y-3 grid blog-side">
            <h3 class="text-xl text-black mb-3">Categories</h3>
            <?php
            $categories = get_categories(array(
                'orderby' => 'name',
                'order' => 'ASC'
            ));
            ?>
            <a href="<?php echo get_permalink(get_option('page_for_posts')); ?>">
                <div class="<?php echo is_home() ? 'active' : ''; ?> w-full hover:bg-black border border-gray-400 rounded-full py-3.5 text-center text-base text-black hover:text-white">
                    All Blogs
                </div>
            </a>

            <?php foreach($categories as $category) : ?>
                <a href="<?php echo get_category_link($category->term_id); ?>">
                    <div class="w-full hover:bg-black border border-gray-400 rounded-full py-3.5 text-center text-base text-black hover:text-white">
                        <?php echo esc_html($category->name); ?>
                    </div>
                </a>
            <?php endforeach; ?>
          </div>

            <!-- Get Involved Section -->
            <!--
            <div class="p-5 bs-blog-side border border-gray-300 rounded-lg gap-y-3 grid blog-side mt-6">
                <h3 class="text-xl text-white mb-3">Get involved in the <br/>club!</h3>
                <p class="text-sm font-light text-white">
                    To continue developing the club, we need help from more people who want to get involved. Read more about the roles we are looking for help with and how you can help!
                </p>
                <a href="#">
                    <div class="mt-3 w-full green-bg hover:bg-white rounded-full py-3.5 text-center text-base text-white hover:text-black">
                        Progress
                    </div>
                </a>
            </div>
            -->

            <!-- Social Media Section -->
            <!--
            <div class="p-5 bg-white border border-gray-300 rounded-lg gap-y-3 grid blog-side mt-6">
                <h3 class="text-xl text-black text-center">Follow Us</h3>
                <div class="w-full flex justify-center blog-scl">
                    <ul>
                        <li><a href="#"><img src="<?php echo get_template_directory_uri(); ?>/images/instagram.png" /></a></li>
                        <li><a href="#"><img src="<?php echo get_template_directory_uri(); ?>/images/facebook.png" /></a></li>
                        <li><a href="#"><img src="<?php echo get_template_directory_uri(); ?>/images/linkedin.png" /></a></li>
                    </ul>
                </div>
            </div>
            -->
            
        </div>
    </div>
</div>

<?php endif;

get_footer(); ?>