<?php
/**
 * Template part for displaying about section
 *
 * @package Finix Investment Firm
 * @subpackage finix_investment_firm
 */

$finix_investment_firm_static_image = get_stylesheet_directory_uri() . '/assets/images/about-img.png';

if (get_theme_mod('finix_investment_firm_service_enable', true) != '') : ?>
<section id="service" class="my-5">
    <div class="container">
        <?php
        $finix_investment_firm_about_page_id = absint(get_theme_mod('finix_investment_firm_about_page'));
        if ($finix_investment_firm_about_page_id != 0) : 
            $finix_investment_firm_args = array(
                'post_type' => 'page',
                'p' => $finix_investment_firm_about_page_id
            );
            $finix_investment_firm_query = new WP_Query($finix_investment_firm_args);
            if ($finix_investment_firm_query->have_posts()) :
                while ($finix_investment_firm_query->have_posts()) : $finix_investment_firm_query->the_post(); ?>
                  <div class="row">
                    <div class="col-lg-6 col-md-6 align-self-center">
                      <div class="about-image1">
                        <div class="about-main-box mb-3">
                          <?php if (has_post_thumbnail()) { ?>
                              <img src="<?php the_post_thumbnail_url('full'); ?>" />
                          <?php } else { ?>
                              <img src="<?php echo esc_url($finix_investment_firm_static_image); ?>" />
                          <?php } ?>

                          <?php
                          $finix_investment_firm_about_bg = get_theme_mod('finix_investment_firm_about_bg');
                          $finix_investment_firm_default_img = get_stylesheet_directory_uri() . '/assets/images/about-bg.png'; 
                          ?>
                        </div>
                        <div class="first-abt-img">
                          <div class="<?php echo empty($finix_investment_firm_about_bg) ? 'no-image1' : ''; ?>">
                          <?php if (!empty($finix_investment_firm_about_bg)) : ?>
                            <img class="left-img-abt" src="<?php echo esc_url($finix_investment_firm_about_bg); ?>" alt="<?php esc_attr_e('Background Image 1', 'finix-investment-firm'); ?>" />
                          <?php else: ?>
                            <img class="left-img-abt" src="<?php echo esc_url($finix_investment_firm_default_img); ?>" alt="<?php esc_attr_e('Default Background Image 1', 'finix-investment-firm'); ?>" />
                          <?php endif; ?>
                          </div>
                        </div>
                        <div class="hr-logo">
                          <?php
                            $finix_investment_firm_abt_bg1 = get_theme_mod('finix_investment_firm_abt_bg1');
                            $finix_investment_firm_default_hr_img = get_stylesheet_directory_uri() . '/assets/images/about-bg1.png'; 
                          ?>
                          <div class="<?php echo empty($finix_investment_firm_abt_bg1) ? 'no-image1' : ''; ?>">
                            <?php if (!empty($finix_investment_firm_abt_bg1)) : ?>
                              <img src="<?php echo esc_url($finix_investment_firm_abt_bg1); ?>" alt="<?php esc_attr_e('Background Image 1', 'finix-investment-firm'); ?>" />
                            <?php else: ?>
                              <img src="<?php echo esc_url($finix_investment_firm_default_hr_img); ?>" alt="<?php esc_attr_e('Default Background Image 1', 'finix-investment-firm'); ?>" />
                            <?php endif; ?>
                          </div>
                        </div>
                        <div class="last-bg"></div>
                      </div>
                    </div>
                    <div class="col-lg-6 col-md-6 image-abt position-relative align-self-center">
                      <div class="match-heading position-relative">
                        <?php if (get_theme_mod('finix_investment_firm_service_sub_heading') != '') : ?>
                          <h2 class="serv-short m-0 text-uppercase"><?php echo esc_html(get_theme_mod('finix_investment_firm_service_sub_heading')); ?></h2>
                        <?php endif; ?>
                      </div>
                      <h3 class="mt-3 mb-2">
                        <a href="<?php the_permalink(); ?>">
                          <?php echo esc_html( get_the_title() ); ?>
                        </a>
                      </h3>
                      <p class="mb-2 abt-content"><?php echo esc_html(wp_trim_words(get_the_content(), 55)); ?></p>
                      <?php if (get_theme_mod('finix_investment_firm_tab_heading1') != '' || get_theme_mod('finix_investment_firm_tab_heading2') != '') : ?>
                        <div class="main-bottom-box mt-2">
                          <div class="row">
                            <?php for ($finix_investment_firm_i = 1; $finix_investment_firm_i <= 2; $finix_investment_firm_i++) : ?>
                              <?php if (get_theme_mod('finix_investment_firm_tab_heading' . $finix_investment_firm_i) != '') : ?>
                                <div class="col-md-6 bottom-tab-details align-items-center py-2">
                                  <?php
                                  $finix_investment_firm_icon_class = get_theme_mod('finix_investment_firm_tab_icon' . $finix_investment_firm_i);
                                  if (!$finix_investment_firm_icon_class) {
                                      $finix_investment_firm_icon_class = 'fas fa-award'; // Default icon
                                  }
                                  ?>
                                  <i class="me-2 <?php echo esc_attr($finix_investment_firm_icon_class); ?>"></i>
                                  <h3 class="my-1"><?php echo esc_html(get_theme_mod('finix_investment_firm_tab_heading' . $finix_investment_firm_i)); ?></h3>
                                  <p class="m-0 abt-content-para"><?php echo esc_html(get_theme_mod('finix_investment_firm_tab_para' . $finix_investment_firm_i)); ?></p> 
                                </div>
                              <?php endif; ?>
                            <?php endfor; ?>
                          </div>
                        </div>
                      <?php endif; ?>
                      <div class="about-button text-md-start mt-4 mb-3">
                        <a class="know-more d-flex" href="<?php echo esc_url( get_permalink() ); ?>" target="_blank"><span class="abt-btn text-capitalize"><?php esc_html_e( 'Read More', 'finix-investment-firm' ); ?></span><i class="fas fa-arrow-right"></i></a>
                      </div>
                    </div>
                  </div>
                <?php endwhile;
                wp_reset_postdata();
            endif;
        endif; ?>
    </div>
</section>
<?php endif; ?>