<?php
/**
 * Template part for displaying the services section
 *
 * @package Job Seeker Resume
 * @subpackage job_seeker_resume
 */

// Get the courses setting.
$job_seeker_resume_courses = get_theme_mod('job_seeker_resume_courses_setting', true);

if ($job_seeker_resume_courses == '1') {
?>
<section id="cat-list">
  <div class="container-fuild">
    <div class="text-start main-sec-title">
      <?php if (get_theme_mod('job_seeker_resume_offer_section_text')) { ?>
        <p class="serv-description mb-2"><?php echo esc_html(get_theme_mod('job_seeker_resume_offer_section_text')); ?></p>
      <?php } ?>
      <?php if (get_theme_mod('job_seeker_resume_offer_section_tittle')) { ?>
        <h2 class="my-2"><?php echo esc_html(get_theme_mod('job_seeker_resume_offer_section_tittle')); ?></h2>
      <?php } ?>
    </div>
    <div class="row mt-4">
      <?php
        // Get the selected post category and number of posts to show.
        $job_seeker_resume_post_category = get_theme_mod('job_seeker_resume_offer_section_category');
        $job_seeker_resume_posts_to_show = get_theme_mod('job_seeker_resume_posts_to_show', 2);

        if ($job_seeker_resume_post_category) {
          // Query for posts in the selected category.
          $job_seeker_resume_page_query = new WP_Query(array(
            'category_name' => esc_html($job_seeker_resume_post_category),
            'posts_per_page' => $job_seeker_resume_posts_to_show
          ));

          if ($job_seeker_resume_page_query->have_posts()) {
            $job_seeker_resume_post_count = 0;

            // Define alternate colors.
            $job_seeker_resume_colors = ['odd-date', 'even-date'];

            // Loop through the posts.
            while ($job_seeker_resume_page_query->have_posts()) : $job_seeker_resume_page_query->the_post();
              $job_seeker_resume_post_count++;
              $job_seeker_resume_is_even = ($job_seeker_resume_post_count % 2 == 0);
              $job_seeker_resume_color_class = $job_seeker_resume_colors[$job_seeker_resume_post_count % 2]; // Alternate colors
      ?>
        <div class="col-lg-6 col-md-6">
          <div class="cat-inner-box d-flex flex-wrap mb-3">
            <?php if (!$job_seeker_resume_is_even) { // Odd posts: Content first, then Image ?>
              <div class="col-lg-6 col-md-6 align-self-center">
                <div class="mainserv-content pe-md-3">
                  <p class="post-date-main mt-0 mb-1 text-<?php echo esc_attr($job_seeker_resume_color_class); ?>">
                    <span class="post-month"><?php echo esc_html(get_the_date('M')); ?></span>
                    <span class="post-day"><?php echo esc_html(get_the_date('d')); ?></span>
                  </p>
                  <h3 class="my-lg-4 my-2">
                    <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                  </h3>
                  <div class="post-read-btn">
                    <a href="<?php echo esc_url(get_permalink()); ?>">
                        <i class="fas fa-arrow-right" aria-hidden="true"></i>
                        <span class="screen-reader-text"><?php esc_html_e('Read More', 'job-seeker-resume'); ?></span>
                    </a>
                  </div>
                </div>
              </div>
              <div class="col-lg-6 col-md-6 align-self-center">
                <?php if (has_post_thumbnail()) : ?>
                  <img src="<?php echo esc_url(get_the_post_thumbnail_url()); ?>" alt="<?php the_title_attribute(); ?>"/>
                <?php else : ?>
                  <div class="course-color"></div>
                <?php endif; ?>
              </div>
            <?php } else { // Even posts: Image first, then Content ?>
              <div class="col-lg-6 col-md-6 align-self-center">
                <?php if (has_post_thumbnail()) : ?>
                  <img src="<?php echo esc_url(get_the_post_thumbnail_url()); ?>" alt="<?php the_title_attribute(); ?>"/>
                <?php else : ?>
                  <div class="course-color"></div>
                <?php endif; ?>
              </div>
              <div class="col-lg-6 col-md-6 align-self-center">
                <div class="mainserv-content ps-md-3">
                  <p class="post-date-main mt-0 mb-1 text-<?php echo esc_attr($job_seeker_resume_color_class); ?>">
                    <span class="post-month"><?php echo esc_html(get_the_date('M')); ?></span>
                    <span class="post-day"><?php echo esc_html(get_the_date('d')); ?></span>
                  </p>
                  <h3 class="my-lg-4 my-2">
                    <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                  </h3>
                  <div class="post-read-btn">
                    <a href="<?php echo esc_url(get_permalink()); ?>">
                        <i class="fas fa-arrow-right" aria-hidden="true"></i>
                        <span class="screen-reader-text"><?php esc_html_e('Read More', 'job-seeker-resume'); ?></span>
                    </a>
                  </div>
                </div>
              </div>
            <?php } ?>
          </div>
        </div>
      <?php 
          endwhile;
            wp_reset_postdata(); // Reset post data after the custom query.
          } else {
            // Optionally display a message if no posts are found.
            echo '<div class="no-postfound">' . esc_html__('No courses found.', 'job-seeker-resume') . '</div>';
          }
        }
      ?>
    </div>
  </div>
</section>
<?php 
} // End of the if statement for courses.
?>
