<?php
/**
 * Template Name: post Page
 */
?>
<?php
    get_header();
    $featured_post = get_field('featured_post');
    $company_logo = get_field('company_logo', 'option');
?>

<section class="all-posts-container">
    <div class="container">
        <h1 class="mt-5">The Medicalalert Blog</h1>
        <div class="featured-post" style="margin-top: 2rem;">
            <?php if( $featured_post ) : ?>
                <div class="col">
                    <div class="d-flex justify-content-center align-items-center featured-img">
                        <?php
                            $featured_image_id  = get_post_thumbnail_id($featured_post->ID);
                            $featured_image    = wp_get_attachment_image_src($featured_image_id,'full', false, '');
                            $featured_alt_text = get_post_meta($featured_image_id,'_wp_attachment_image_alt', true); 
                        ?>

                        <?php if( !empty( $featured_image ) ) : ?>
                            <img class="img-fluid" src="<?php echo $featured_image[0]; ?>" alt="<?php echo $featured_alt_text; ?>" />
                        <?php else : ?>
                                <div class="d-flex justify-content-center align-items-center img-placeholder">
                                    <img class="img-fluid" src="<?php echo $company_logo['url']; ?>" alt="<?php echo $company_logo['alt'] ?>" />
                                </div>
                         <?php endif; ?>
                      </div>
                      <div class="featured-post-content">
                          <a href="<?php echo get_permalink( $featured_post->ID ); ?>">
                              <h4><?php echo esc_html( $featured_post->post_title ); ?></h4>
                          </a>
                          <p><?php echo custom_excerpt($featured_post->post_content); ?></p>
                          <a class="featured-post-link" href="<?php echo get_permalink( $featured_post->ID ); ?>">Read More</a>
                      </div>
                  </div>
              <?php endif; ?>
          </div>

    <div class="post-list">
        <?php
            $paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;
            $args_post = array(
                    'post_type' => 'post',
                    'posts_per_page' => 10,
                    'paged' => $paged
            );
            $the_query = new WP_Query( $args_post );
        ?>

        <?php if ( $the_query->have_posts() ) : ?>

        <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
            <div class="row d-flex justify-content-center align-items-center gy-5 post-item">
                <div class="col-12 col-lg-4">
                    <div class="post-img">
                        <?php
                            $image_id = get_post_thumbnail_id( $post->ID, 'medium' );
                            $alt_text = get_post_meta( $image_id , '_wp_attachment_image_alt', true );
                        ?>
                        <?php if( !empty(get_the_post_thumbnail()) ) : ?>
                            <a href="<?php the_permalink(); ?>">
                                <img class="img-fluid" src="<?php echo the_post_thumbnail_url( $image_id, 'medium' ); ?>" alt="<?php echo $alt_text; ?>" />
                            </a>    
                        <?php else : ?>
                            <div class="d-flex justify-content-center align-items-center img-placeholder">
                                <img class="img-fluid" src="<?php echo $company_logo['url']; ?>" alt="<?php echo $company_logo['alt'] ?>" />
                            </div>
                        <?php endif; ?>
                    </div>
                </div>
                <div class="col-12 col-lg-6">
                    <div class="post-content">
                        <small><?php the_time('F jS, Y') ?></small>
                        <a href="<?php the_permalink(); ?>">
                            <h4><?php echo the_title(); ?></h4>
                        </a>
                        <p><?php the_excerpt(); ?></p>
                    </div>
                </div>
            </div>
        <?php endwhile; ?>

        <div class="row py-4 d-flex justify-content-center post-pagination">
            <div class="col-6">
                <h4 class="button--primary text-center"><?php next_posts_link( '< Previous', $the_query->max_num_pages ); ?></h4>
            </div>
            <div class="col-6">
                <h4 class="button--primary text-center"><?php previous_posts_link( 'Next >' ); ?></h4>
            </div>
        </div>

        <?php wp_reset_postdata(); ?>

        <?php else:  ?>
            <div class="row">
                <div class="col">
                    <h4 class="text-center"><?php _e( 'Sorry, no posts matched your criteria.' ); ?></h4>
                </div>
            </div>
        <?php endif; ?>

    </div>
</section>

<!-- Category section BEGIN -->
<section class="container my-4 post-categories-container">
    <?php 
        $category_name = $category->name;
        $categories = get_categories( array(
            'taxonomy'   => 'category', 
            'orderby'    => 'name',
            'parent'     => 0,
            'hide_empty' => 0, 
        ) );
    ?>
    <div class="row mb-2">
        <div class="col">
            <h3 class="category-title">Explore more topics</h3>
        </div>
    </div>
    <div class="row post-category-list">
        <?php foreach($categories as $category) { 
            $category_name = $category->name;
            if( strtolower( $category_name ) != 'uncategorized' ) { ?>
                <div class="col-12 col-md-4">
                    <h4 class="category-item"><a href="<?php echo esc_url( get_category_link( $category->term_id ) ); ?>"><?php echo $category->name; ?></a></h4>
                </div>
            <?php } ?>   
        <?php } ?> 
    </div>    
</section>   
<!-- Category section END -->

<?php get_footer(); ?>
