<?php get_header('inner');

if (have_posts()) : while (have_posts()) : the_post(); ?>
    <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-9">
                <div class="bg-white">
                    <div class="lg:col-span-12">
                        <h2 class="text-black">
                            <?php the_title(); ?>
                        </h2>
                        <div class="grid grid-cols-12 my-6">
                            <div class="col-span-6 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 class="col-span-6 flex items-center justify-end">
                                <a href="<?php echo get_permalink(111); ?>" class="back-btn">Back To List</a>
                            </div>
                        </div>

                        <?php if (has_post_thumbnail()) : ?>
                            <?php the_post_thumbnail('full', array('class' => 'h-80 w-full object-cover object-top rounded-xl')); ?>
                        <?php endif; ?>

                        <div class="text-sm my-8">
                            <?php the_content(); ?>
                        </div>
                    </div>
                </div>

                <!-- Related Posts Section -->
                <div class="grid grid-cols-12 my-6">
                    <div class="col-span-6 flex items-center text-black">
                      <?php // Get current post categories
                      $categories = get_the_category();
                      $category_ids = array();
                      foreach ($categories as $category) {
                          $category_ids[] = $category->term_id;
                      }

                      // Query related posts
                      $related_args = array(
                          'post_type' => 'post',
                          'posts_per_page' => 3,
                          'post__not_in' => array(get_the_ID()),
                          'category__in' => $category_ids,
                          'orderby' => 'rand'
                      );

                      $related_posts = new WP_Query($related_args);

                      if ($related_posts->have_posts()) : ?>
                        <h3 class="text-xl text-black">Also Read...</h3>
                      <?php endif; ?>
                    </div>
                    <div class="col-span-6 flex items-center justify-end">
                        <a href="<?php echo get_permalink(111); ?>" class="back-btn">Back To List</a>
                    </div>
                </div>

                <div class="lg:grid lg:grid-cols-12 lg:gap-4">
                    <?php
                    // Get current post categories
                    $categories = get_the_category();
                    $category_ids = array();
                    foreach ($categories as $category) {
                        $category_ids[] = $category->term_id;
                    }

                    // Query related posts
                    $related_args = array(
                        'post_type' => 'post',
                        'posts_per_page' => 3,
                        'post__not_in' => array(get_the_ID()),
                        'category__in' => $category_ids,
                        'orderby' => 'rand'
                    );

                    $related_posts = new WP_Query($related_args);

                    if ($related_posts->have_posts()) :
                        while ($related_posts->have_posts()) : $related_posts->the_post();
                            $has_thumbnail = has_post_thumbnail();
                    ?>
                            <div class="col-span-4">
                                <a href="<?php the_permalink(); ?>">
                                    <div class="p-5 bg-white border border-gray-600 rounded-lg mt-6 blog-rd-mr">
                                        <div class="lg:grid lg:grid-cols-12">
                                            <?php if ($has_thumbnail) : ?>
                                                <div class="lg:col-span-12">
                                                    <?php the_post_thumbnail('large', array('class' => 'h-60 w-full object-cover rounded-xl')); ?>
                                                </div>
                                                <div class="lg:col-span-12 my-6">
                                            <?php else : ?>
                                                <div class="lg:col-span-12">
                                            <?php endif; ?>
                                                <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">
                                                <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>
                                        </div>
                                    </div>
                                </a>
                            </div>
                    <?php
                        endwhile;
                        wp_reset_postdata();
                    endif;
                    ?>
                </div>
            </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'
                    ));

                    $current_cats = wp_get_post_categories(get_the_ID());
                    ?>
                    <a href="<?php echo get_permalink(get_option('page_for_posts')); ?>">
                        <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">
                            All Blogs
                        </div>
                    </a>

                    <?php foreach($categories as $category) : ?>
                        <a href="<?php echo get_category_link($category->term_id); ?>">
                            <div class="<?php echo in_array($category->term_id, $current_cats) ? 'active' : ''; ?> 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
    endwhile;
endif;

get_footer(); ?>