<?php
    /* Template Name: Blog Template 2 */
?>
<?php get_header(3); ?>
<?php 
    $blog_subtitle = get_field("blog_subtitle");
    $time_read = get_field("time_read");
?>
<div class="main blog-page">
    <div class="container">
        <div class="page-header">
            <h1 class="blog-title"><?php the_title(); ?></h1>
            <?php if(!empty($blog_subtitle)): ?>
            <p class="blog-subtitle"><?php echo $blog_subtitle ?></p>
            <?php endif; ?>
        </div>

        <!-- Swiper Container -->
        <div class="swiper-container swiper-category">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><a href="#" class="category-btn" data-category="all" data-active="true">All</a></div>
                
                <?php 
                $categories = get_categories(array(
                    'hide_empty' => false, 
                ));

                foreach ($categories as $category) :
                    if ($category->slug !== 'uncategorized') :
                ?>
                        <div class="swiper-slide"><a href="#" class="category-btn" data-category="<?php echo $category->slug; ?>"><?php echo $category->name; ?></a></div>
                <?php 
                    endif;
                endforeach; 
                ?>
            </div>

            <div class="swiper-button-next">
                <img src="https://stillviral.com/wp-content/uploads/2025/03/arrow-right-circle_svgrepo.com-1-1.svg" alt="Next">
            </div>
            <div class="swiper-button-prev">
                <img src="https://stillviral.com/wp-content/uploads/2025/03/arrow-right-circle_svgrepo.com-1-2.svg" alt="Previous">
            </div>
        	</div>

        
        <!-- Post Container -->
        <div id="post-container" class="post-container">
            <?php
            $args = array(
                'post_type' => 'post',
                'posts_per_page' => 10, 
                'paged' => get_query_var('paged') ? get_query_var('paged') : 1, 
            );
            $query = new WP_Query($args);

            if ($query->have_posts()) :
                while ($query->have_posts()) : $query->the_post();
                    $category = get_the_category()[0]->name; 
                    $category_class = strtolower(str_replace(' ', '-', $category)); 
            ?>
                <div class="post-card <?php echo esc_attr($category_class); ?>">
                    <div class="post-header">
                        <img src="<?php the_post_thumbnail_url(); ?>" alt="<?php the_title(); ?>" class="post-feature-image">
                    </div>
                    <div class="post-info">
                    	<?php
						$category = get_the_category();
						$brand_color = '';
						$color_class = 'color-default';
						$time_read = get_field('time_read');

						if (!empty($category)) {
							$category_id = $category[0]->term_id;
							$brand_color = get_field('brand_color', 'category_' . $category_id); 

							if ($brand_color) {
								$color_class = 'color-' . esc_attr($brand_color);
							}
						}
						?>
						<div class="post-meta">
							<?php if ($category || $time_read): ?>
								<?php if ($category): ?>
									<span class="category <?php echo esc_attr($color_class); ?>">
										<?php echo esc_html($category[0]->name); ?>
									</span>
								<?php endif; ?>
								<?php if ($time_read): ?>
									<span class="time-read">
										<?php if ($category); ?>
										<?php echo esc_html($time_read); ?>
									</span>
								<?php endif; ?>
							<?php endif; ?>
						</div>

                        <h3><?php the_title(); ?></h3>
						<div class="author-posted">
							<div class="author-info">
								<img src="<?php echo get_avatar_url(get_the_author_meta('ID')); ?>" alt="Author Avatar" class="author-avatar">
								<span class="author-name"><?php the_author(); ?></span>
							</div>
							<div class="post-time">
								<span>Last Update: <?php the_modified_date(); ?></span>
							</div>
						</div>
                        
                        <a href="<?php the_permalink(); ?>" class="post-link">Learn More</a>
                    </div>
                </div>
            <?php
                endwhile;
                wp_reset_postdata();
            else :
                echo '<p>No posts found.</p>';
            endif;
            ?>
        </div>
        
        <div class="pagination">
			<?php
			$current_page = max(1, get_query_var('paged')); 
			$total_pages  = $query->max_num_pages;

			$pagination = paginate_links(array(
				'total'     => $total_pages,
				'current'   => $current_page,
				'prev_text' => '<img src="https://stillviral.com/wp-content/uploads/2025/03/Icon.svg" alt="Previous" class="pagination-icon prev">',
				'next_text' => '<img src="https://stillviral.com/wp-content/uploads/2025/03/Icon.svg" alt="Next" class="pagination-icon next">',
				'type'      => 'array',
			));

			echo '<nav>';

			if ($current_page == 1) {
				echo '<span class="pagination-disabled prev">
						<img src="https://stillviral.com/wp-content/uploads/2025/03/Icon.svg" alt="Previous" class="pagination-icon prev">
					  </span>';
			}

			foreach ($pagination as $link) {
				echo $link;
			}

			if ($current_page == $total_pages) {
				echo '<span class="pagination-disabled next">
						<img src="https://stillviral.com/wp-content/uploads/2025/03/Icon.svg" alt="Next" class="pagination-icon next">
					  </span>';
			}

			echo '</nav>';
			?>
		</div>
    </div>
</div>

<?php get_footer(3); ?>