<?php
/**
 * Template part for displaying the services section
 *
 * @package SAAS Agency
 * @subpackage SAAS Agency
 */
?>

<?php 
$saas_agency_static_image = get_template_directory_uri() . '/assets/images/about-img.png';
if (get_theme_mod('saas_agency_show_hide_sec', true)) : ?>
<section id="service-sec" class="my-md-5 my-3 px-md-0 px-3 position-relative">
  <div class="container-fuild">
    <div class="row">
      <div class="col-lg-6 col-md-5">
        <div class="mb-5 serv-main-head">
          <?php if ($saas_agency_heading = get_theme_mod('saas_agency_our_sec_heading_section')) : ?>
          <h2 class="sec-heading my-2 text-uppercase text-start"><?php echo esc_html($saas_agency_heading); ?></h2>
          <?php endif; ?>
          <?php if ($saas_agency_detailserv = get_theme_mod('saas_agency_our_sec_details')) : ?>
          <p class="serv-details mb-2"><?php echo esc_html($saas_agency_detailserv); ?></p>
          <?php endif; ?>
          <?php 
          $saas_agency_star_rating = get_theme_mod('saas_agency_star_rating', ''); 
          if (!empty($saas_agency_star_rating)) : ?>
          <div class="star-rating my-2">
            <?php for ($saas_agency_i = 1; $saas_agency_i <= 5; $saas_agency_i++) {
              echo ($saas_agency_i <= $saas_agency_star_rating) ? '<i class="fas fa-star"></i>' : '<i class="far fa-star"></i>';
            } ?>
          </div>
          <?php endif; ?>
          <?php if (get_theme_mod('saas_agency_about_page')) : ?>
          <div class="select-page">
            <?php
            $saas_agency_about_page_id = absint(get_theme_mod('saas_agency_about_page'));
            if ($saas_agency_about_page_id) :
              $saas_agency_args = array('post_type' => 'page','p' => $saas_agency_about_page_id);
              $saas_agency_query = new WP_Query($saas_agency_args);
              if ($saas_agency_query->have_posts()) :
                while ($saas_agency_query->have_posts()) : $saas_agency_query->the_post(); ?>
                <div class="row">
                  <div class="col-lg-2 col-md-3 col-3 image-abt mb-3">
                    <div class="about-block position-relative">
                      <div class="about-image1 mb-3">
                        <div class="thumbnail position-relative">
                          <?php if (has_post_thumbnail()) :
                            the_post_thumbnail('full', array('alt' => esc_attr(get_the_title())));
                          else : ?>
                          <img src="<?php echo esc_url($saas_agency_static_image); ?>" alt="<?php esc_attr_e('Placeholder', 'saas-agency'); ?>" />
                          <?php endif; ?>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="col-lg-10 col-md-9 col-9">
                    <div class="match-heading">
                      <h3 class="mb-1 text-capitalize">
                        <a href="<?php echo esc_url(get_permalink()); ?>"><?php echo esc_html(get_the_title()); ?></a>
                      </h3>
                      <?php 
                      $saas_agency_sub_heading = get_theme_mod('saas_agency_service_add_designation');
                      if ($saas_agency_sub_heading) : ?>
                      <p class="abt-title m-1"><?php echo esc_html($saas_agency_sub_heading); ?></p>
                      <?php endif; ?>
                    </div>
                  </div>
                  <p class="abt-content pb-1"><?php echo esc_html(wp_trim_words(get_the_content(), 58, '...')); ?></p>
                </div>
                <?php endwhile; wp_reset_postdata(); endif; endif; ?>
          </div>
          <?php endif; ?>
          <?php if (get_theme_mod('saas_agency_header_learn_more_link') && get_theme_mod('saas_agency_header_learn_more_button', 'Learn More!')) : ?>
          <div class="serv-btn mt-3">
            <a href="<?php echo esc_url(get_theme_mod('saas_agency_header_learn_more_link')); ?>" class="learn-more">
              <span class="head-btn text-capitalize"><?php echo esc_html(get_theme_mod('saas_agency_header_learn_more_button', 'Learn More!')); ?></span>
            </a>
          </div>
          <?php endif; ?>
        </div>
      </div>
      <div class="col-lg-6 col-md-7 p-0">
        <div class="about-image thumbnail position-relative">
          <?php $saas_agency_about_bg = get_theme_mod('saas_agency_about_bg'); ?>
          <div class="image-wrapper <?php echo empty($saas_agency_about_bg) ? 'no-image' : ''; ?>">
            <?php if (!empty($saas_agency_about_bg)) : ?>
              <img src="<?php echo esc_url($saas_agency_about_bg); ?>" alt="<?php esc_attr_e('Background Image', 'saas-agency'); ?>" />
            <?php endif; ?>
            <div class="background-overlay"></div>
          </div>
          <?php $saas_agency_youtube_url = get_theme_mod('saas_agency_youtube_url', '');
          if (!empty($saas_agency_youtube_url)) : ?>
          <a href="<?php echo esc_url($saas_agency_youtube_url); ?>" class="youtube-icon-overlay" target="_blank" rel="noopener">
            <i class="fas fa-play"></i>
          </a>
          <?php endif; ?>
        </div>
      </div>
    </div>
  </div>
</section>
<?php endif; ?>