<?php
/**
 * Template part for displaying slider section
 *
 * @package DigitalX Agencies
 * @subpackage digitalx_agencies
 */

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

<?php if ($digitalx_agencies_slider_arrows) : ?>
  <section id="slider">
    <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('digitalx_agencies_slider_short_heading')) : ?>
                  <p class="slidetop-text mb-3 text-capitalize"><?php echo esc_html(get_theme_mod('digitalx_agencies_slider_short_heading')); ?></p>
                <?php endif; ?>
                <div class="slider-main-title">
                  <?php if (get_theme_mod('digitalx_agencies_show_slider_title')) : ?>
                  <h1 class="slider-heading mb-3 text-capitalize"><?php echo esc_html(get_theme_mod('digitalx_agencies_show_slider_title')); ?></h1>
                <?php endif; ?>
                </div>
                <?php if (get_theme_mod('digitalx_agencies_show_slider_content')) : ?>
                  <p class="slide-content"><?php echo esc_html(get_theme_mod('digitalx_agencies_show_slider_content')); ?></p>
                <?php endif; ?>
                <div class="more-btn mt-md-4 mt-2">
                  <?php
                  $digitalx_agencies_btn1_text = get_theme_mod('digitalx_agencies_product_btn_text1', 'Get Started');
                  $digitalx_agencies_btn1_link = get_theme_mod('digitalx_agencies_product_btn_link1');

                  $digitalx_agencies_btn2_text = get_theme_mod('digitalx_agencies_product_btn_text2', 'Explore More');
                  $digitalx_agencies_btn2_link = get_theme_mod('digitalx_agencies_product_btn_link2');
                  ?>

                  <?php if ( ! empty($digitalx_agencies_btn1_text) && ! empty($digitalx_agencies_btn1_link) ) : ?>
                    <a class="text-capitalize me-3 mb-md-0 mb-3 slider-btn1" href="<?php echo esc_url($digitalx_agencies_btn1_link); ?>">
                      <span>
                        <?php echo esc_html($digitalx_agencies_btn1_text); ?>
                        <i class="fas fa-arrow-right ms-1" aria-hidden="true"></i>
                      </span>
                      <span class="screen-reader-text"><?php echo esc_html($digitalx_agencies_btn1_text); ?></span>
                    </a>
                  <?php endif; ?>

                  <?php if ( ! empty($digitalx_agencies_btn2_text) && ! empty($digitalx_agencies_btn2_link) ) : ?>
                    <a class="text-capitalize mb-md-0 mb-3 slider-btn2" href="<?php echo esc_url($digitalx_agencies_btn2_link); ?>">
                      <span><?php echo esc_html($digitalx_agencies_btn2_text); ?></span>
                      <span class="screen-reader-text"><?php echo esc_html($digitalx_agencies_btn2_text); ?></span>
                    </a>
                  <?php endif; ?>
                </div>
              </div>
            </div>
          </div>
          <div class="col-lg-5 col-md-5">
            <div class="slider-img-col">
              <?php
                $digitalx_agencies_banner_main_img = get_theme_mod('digitalx_agencies_banner_main_img');
                $digitalx_agencies_banner_main_img = get_template_directory_uri() . '/assets/images/slider-img.png';
              ?>
              <div class="<?php echo empty($digitalx_agencies_banner_main_img) ? 'no-image1' : ''; ?>">
                <?php if (!empty($digitalx_agencies_banner_main_img)) : ?>
                  <img class="main-img-slide" src="<?php echo esc_url($digitalx_agencies_banner_main_img); ?>" alt="<?php esc_attr_e('Background Image 1', 'digitalx-agencies'); ?>" />
                <?php else: ?>
                  <img class="main-img-slide" src="<?php echo esc_url($digitalx_agencies_banner_main_img); ?>" alt="<?php esc_attr_e('Default Background Image 1', 'digitalx-agencies'); ?>" />
                <?php endif; ?>
              </div>

              <!-- marjeting text -->
              <div class="main-marketing-label">
                <div class="marketing-text">
                  <?php if (get_theme_mod('digitalx_agencies_slider_marketing_text', 'Marketing')) { ?>
                    <p class="marketing-title"><?php echo esc_html(get_theme_mod('digitalx_agencies_slider_marketing_text', 'Marketing')); ?></p>
                  <?php } ?>
                </div>
              </div>
              <div class="banner-content-img1">
                <div class="slider-logo-video">
                  <?php
                    $digitalx_agencies_slider_img1 = get_theme_mod('digitalx_agencies_slider_img1');
                    $digitalx_agencies_slider_default_img1 = get_template_directory_uri() . '/assets/images/slider-logo.png'; 
                  ?>
                  <div class="slider-map1 <?php echo empty($digitalx_agencies_slider_img1) ? 'no-image1' : ''; ?>">
                    <?php if (!empty($digitalx_agencies_slider_img1)) : ?>
                      <img src="<?php echo esc_url($digitalx_agencies_slider_img1); ?>" alt="<?php esc_attr_e('Background Image 1', 'digitalx-agencies'); ?>" />
                    <?php else: ?>
                      <img src="<?php echo esc_url($digitalx_agencies_slider_default_img1); ?>" alt="<?php esc_attr_e('Default Background Image 1', 'digitalx-agencies'); ?>" />
                    <?php endif; ?>
                    <div class="video-btn">
                      <div class="video-main-inner">
                      <?php
                      $digitalx_agencies_video_link = get_theme_mod( 'digitalx_agencies_video_btn_link2' );
                      $digitalx_agencies_video_icon = get_theme_mod( 'digitalx_agencies_product_btn_icon2', 'fas fa-play' );

                      if ( !empty( $digitalx_agencies_video_link ) ) : ?>
                        <div class="video-btn2">
                          <!-- note: href="#" and data-video instead of direct URL -->
                          <a id="openBtn"
                             class="text-capitalize"
                             href="#"
                             data-video="<?php echo esc_url( $digitalx_agencies_video_link ); ?>">
                            <span class="btn-icon">
                              <i class="main-video-icon <?php echo esc_attr( $digitalx_agencies_video_icon ); ?>"></i>
                            </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="banner-content-img2">
                <?php
                  $digitalx_agencies_slider_img2 = get_theme_mod('digitalx_agencies_slider_img2');
                  $digitalx_agencies_slider_default_img2 = get_template_directory_uri() . '/assets/images/slider-graph.png'; 
                ?>
                <div class="slider-map2 <?php echo empty($digitalx_agencies_slider_img2) ? 'no-image1' : ''; ?>">
                  <?php if (!empty($digitalx_agencies_slider_img2)) : ?>
                    <img src="<?php echo esc_url($digitalx_agencies_slider_img2); ?>" alt="<?php esc_attr_e('Background Image 1', 'digitalx-agencies'); ?>" />
                  <?php else: ?>
                    <img src="<?php echo esc_url($digitalx_agencies_slider_default_img2); ?>" alt="<?php esc_attr_e('Default Background Image 1', 'digitalx-agencies'); ?>" />
                  <?php endif; ?>
                </div>
              </div>

              <?php 
              if ( get_theme_mod('digitalx_agencies_banner_main_tab_heading') !== '' ) : ?>
              <div class="banner-content-main">
                <?php 
                $digitalx_agencies_main_tab_heading = get_theme_mod('digitalx_agencies_banner_main_tab_heading', '');
                $digitalx_agencies_main_tab_para    = get_theme_mod('digitalx_agencies_banner_main_tab_para', '');
                $digitalx_agencies_icon_class       = get_theme_mod('digitalx_agencies_banner_main_tab_icon', 'fas fa-star');

                if ( $digitalx_agencies_main_tab_heading !== '' ) : ?>
                    <div class="main-abt-sentences">
                        <div class="main-banner-tab-details align-items-center">
                            <i class="<?php echo esc_attr($digitalx_agencies_icon_class); ?>"></i>
                            <div class="main-abt-content">
                                <h4 class="m-0"><?php echo esc_html($digitalx_agencies_main_tab_heading); ?></h4>
                                <?php if ( $digitalx_agencies_main_tab_para !== '' ) : ?>
                                    <p class="mb-0"><?php echo esc_html($digitalx_agencies_main_tab_para); ?></p>
                                <?php endif; ?>
                            </div>
                        </div>
                    </div>
                <?php endif; ?>
              </div>
            <?php endif; ?>
            
            </div>
          </div>
        </div>
      </div>
    </div>

    <?php if ( get_theme_mod('digitalx_agencies_bottom_text1') ) { ?>
      <div class="slider-bottom-main1">
        <div class="container">
          <div class="main-bottom1 owl-carousel owl-theme">
            <div class="item">
              <p class="serv-bottom1 py-md-2 py-1 mb-0">
                <i class="fas fa-star"></i>
                <span><?php echo esc_html( get_theme_mod('digitalx_agencies_bottom_text1') ); ?></span>
              </p>
            </div>
          </div>
        </div>
      </div>
    <?php } ?>

    <?php if ( get_theme_mod('digitalx_agencies_bottom_text2') ) { ?>
      <div class="slider-bottom-main2">
        <div class="container">
          <div class="main-bottom2 owl-carousel owl-theme">
            <div class="item">
              <p class="serv-bottom2 py-md-2 py-1 mb-0">
                <i class="fas fa-star"></i>
                <span><?php echo esc_html( get_theme_mod('digitalx_agencies_bottom_text2') ); ?></span>
              </p>
            </div>
          </div>
        </div>
      </div>
    <?php } ?>
    <div class="clearfix"></div>
  </section>
 
<?php endif; ?>