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

$finix_investment_firm_slider_arrows = get_theme_mod('finix_investment_firm_slider_arrows', true);
?>

<?php if ($finix_investment_firm_slider_arrows) : ?>
  <section id="slider" style="background-image: url('<?php echo get_stylesheet_directory_uri(); ?>/assets/images/slider-bg.png');">
    <div class="container">
      <div class="item">
        <div class="row m-0">
          <div class="col-lg-7 col-md-7 col-12 slider-content-col align-self-center">
            <div class="carousel-caption">
              <div class="inner_carousel">
                <?php if (get_theme_mod('finix_investment_firm_slider_short_heading')) : ?>
                  <p class="slidetop-text mb-3 text-capitalize"><?php echo esc_html(get_theme_mod('finix_investment_firm_slider_short_heading')); ?></p>
                <?php endif; ?>
                <div class="slider-main-title">
                  <?php if ( $finix_investment_firm_full_title = get_theme_mod('finix_investment_firm_show_slider_title') ) : 
                    $finix_investment_firm_title_words = explode(' ', $finix_investment_firm_full_title);
                    $finix_investment_firm_left_text = implode(' ', array_slice($finix_investment_firm_title_words, 0, 3));  // First 3 words
                    $finix_investment_firm_right_text = implode(' ', array_slice($finix_investment_firm_title_words, 3));   // Everything after
                  ?>
                    <h1><span><?php echo esc_html($finix_investment_firm_left_text); ?></span><?php 
                        $finix_investment_firm_avatars_img = get_theme_mod('finix_investment_firm_slider_title_img', get_template_directory_uri() . '/assets/images/slider-title.png');
                      ?><span class="title-img mx-3"><img src="<?php echo esc_url($finix_investment_firm_avatars_img); ?>" alt="<?php esc_attr_e('Investment Team', 'finix-investment-firm'); ?>" /></span><span><?php echo esc_html($finix_investment_firm_right_text); ?></span></h1>
                  <?php endif; ?>
                </div>
                <?php if (get_theme_mod('finix_investment_firm_show_slider_content')) : ?>
                  <p class="slide-content"><?php echo esc_html(get_theme_mod('finix_investment_firm_show_slider_content')); ?></p>
                <?php endif; ?>
                <div class="more-btn mt-md-5 mt-2">
                  <?php if(get_theme_mod('finix_investment_firm_product_btn_text1','Sign up for free') != '' && get_theme_mod('finix_investment_firm_product_btn_link1')){ ?>
                    <a class="text-capitalize me-2 mb-md-0 mb-3 slider-btn1" href="<?php echo esc_url(get_theme_mod('finix_investment_firm_product_btn_link1')); ?>"><span><?php echo esc_html(get_theme_mod('finix_investment_firm_product_btn_text1','Sign up for free')); ?></span><i class="fas fa-arrow-right"></i><span class="screen-reader-text"><?php echo esc_html(get_theme_mod('finix_investment_firm_product_btn_text1','Sign up for free')); ?></span></a>
                  <?php }?>
                  <div class="video-btn">
                    <?php
                    $finix_investment_firm_text       = get_theme_mod( 'finix_investment_firm_product_btn_text2', 'Watch Videos' );
                    $finix_investment_firm_video_link = get_theme_mod( 'finix_investment_firm_product_btn_link2' );
                    $finix_investment_firm_video_icon = get_theme_mod( 'finix_investment_firm_product_btn_icon2', 'fas fa-play' );

                    if ( ! empty( $finix_investment_firm_text ) && ! empty( $finix_investment_firm_video_link ) ) : ?>
                      <div class="slider-btn2">
                        <!-- note: href="#" and data-video instead of direct URL -->
                        <a id="openBtn"
                           class="text-capitalize ms-xl-3 ms-lg-2 ms-md-0"
                           href="#"
                           data-video="<?php echo esc_url( $finix_investment_firm_video_link ); ?>">
                          <span class="btn-text me-xl-3 me-2"><?php echo esc_html( $finix_investment_firm_text ); ?></span>
                          <span class="btn-icon">
                            <i class="main-video-icon <?php echo esc_attr( $finix_investment_firm_video_icon ); ?>"></i>
                          </span>
                          <span class="screen-reader-text"><?php echo esc_html( $finix_investment_firm_text ); ?></span> 
                        </a>
                      </div>
                    <?php endif; ?>
                    <div class="overlay" id="videoOverlay">
                      <div class="popup">
                        <span class="close-btn"><i class="fas fa-times"></i></span>
                        <!-- src empty; set from JS -->
                        <iframe id="videoFrame"
                                width="100%"
                                height="100%"
                                src=""
                                frameborder="0"
                                allowfullscreen></iframe>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-lg-5 col-md-5">
            <div class="slider-img-col">
              <?php
                $finix_investment_firm_banner_main_img = get_theme_mod('finix_investment_firm_banner_main_img');
                $finix_investment_firm_banner_main_img = get_stylesheet_directory_uri() . '/assets/images/slider-img.png'; 
              ?>
              <div class="<?php echo empty($finix_investment_firm_banner_main_img) ? 'no-image1' : ''; ?>">
                <?php if (!empty($finix_investment_firm_banner_main_img)) : ?>
                  <img class="main-img-slide" src="<?php echo esc_url($finix_investment_firm_banner_main_img); ?>" alt="<?php esc_attr_e('Background Image 1', 'finix-investment-firm'); ?>" />
                <?php else: ?>
                  <img class="main-img-slide" src="<?php echo esc_url($finix_investment_firm_banner_main_img); ?>" alt="<?php esc_attr_e('Default Background Image 1', 'finix-investment-firm'); ?>" />
                <?php endif; ?>
              </div>
              <div class="banner-content-img1">
                <?php
                  $finix_investment_firm_slider_img1 = get_theme_mod('finix_investment_firm_slider_img1');
                  $finix_investment_firm_slider_default_img1 = get_stylesheet_directory_uri() . '/assets/images/slider-logo.png'; 
                ?>
                <div class="slider-map1 <?php echo empty($finix_investment_firm_slider_img1) ? 'no-image1' : ''; ?>">
                  <?php if (!empty($finix_investment_firm_slider_img1)) : ?>
                    <img src="<?php echo esc_url($finix_investment_firm_slider_img1); ?>" alt="<?php esc_attr_e('Background Image 1', 'finix-investment-firm'); ?>" />
                  <?php else: ?>
                    <img src="<?php echo esc_url($finix_investment_firm_slider_default_img1); ?>" alt="<?php esc_attr_e('Default Background Image 1', 'finix-investment-firm'); ?>" />
                  <?php endif; ?>
                </div>
              </div>
              <div class="banner-content-img2">
                <?php
                  $finix_investment_firm_slider_img2 = get_theme_mod('finix_investment_firm_slider_img2');
                  $finix_investment_firm_slider_default_img2 = get_stylesheet_directory_uri() . '/assets/images/slider-graph.png'; 
                ?>
                <div class="slider-map2 <?php echo empty($finix_investment_firm_slider_img2) ? 'no-image1' : ''; ?>">
                  <?php if (!empty($finix_investment_firm_slider_img2)) : ?>
                    <img src="<?php echo esc_url($finix_investment_firm_slider_img2); ?>" alt="<?php esc_attr_e('Background Image 1', 'finix-investment-firm'); ?>" />
                  <?php else: ?>
                    <img src="<?php echo esc_url($finix_investment_firm_slider_default_img2); ?>" alt="<?php esc_attr_e('Default Background Image 1', 'finix-investment-firm'); ?>" />
                  <?php endif; ?>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="clearfix"></div>
  </section>
<?php endif; ?>