<?php
/**
 * Template part for displaying slider section
 *
 * @package HR Services
 * @subpackage hr_services
 */

$hr_services_slider_arrows = get_theme_mod('hr_services_slider_arrows', true);

?>
<?php if ($hr_services_slider_arrows) : ?>
  <section id="slider">
    <div class="container">
      <div class="item">
        <div class="row m-0">
          <div class="col-lg- col-md-5 col-12 slider-content-col align-self-center">
            <div class="carousel-caption">
              <div class="inner_carousel">
                <?php if (get_theme_mod('hr_services_slider_short_heading')) : ?>
                  <p class="slidetop-text mb-2 text-capitalize"><?php echo esc_html(get_theme_mod('hr_services_slider_short_heading')); ?></p>
                <?php endif; ?>
                <?php if ( get_theme_mod('hr_services_show_slider_title')) : ?>
                    <h1 class="my-md-3 mb-0"><?php echo esc_html(get_theme_mod('hr_services_show_slider_title')); ?></h1>
                <?php endif; ?>
                <?php if (get_theme_mod('hr_services_show_slider_content')) : ?>
                  <p class="slide-content"><?php echo esc_html(get_theme_mod('hr_services_show_slider_content')); ?></p>
                <?php endif; ?>
                <div class="more-btn mt-md-5 mt-2">
                  <?php if(get_theme_mod('hr_services_product_btn_text1','Explore Courses') != '' && get_theme_mod('hr_services_product_btn_link1')){ ?>
                    <a class="text-capitalize me-2 mb-md-0 mb-3 slider-btn1" href="<?php echo esc_url(get_theme_mod('hr_services_product_btn_link1')); ?>"><?php echo esc_html(get_theme_mod('hr_services_product_btn_text1','Explore More')); ?><span class="screen-reader-text"><?php echo esc_html(get_theme_mod('hr_services_product_btn_text1','Explore More')); ?></span></a>
                  <?php }?>
                  <div class="video-btn">
                    <?php
                    $HR_SERVICES_TEXT       = get_theme_mod( 'hr_services_product_btn_text2', 'Demo Video' );
                    $hr_services_video_link = get_theme_mod( 'hr_services_product_btn_link2' );
                    $hr_services_video_icon = get_theme_mod( 'hr_services_product_btn_icon2', 'fas fa-play' );

                    if ( ! empty( $HR_SERVICES_TEXT ) && ! empty( $hr_services_video_link ) ) : ?>
                      <div class="slider-btn2">
                        <!-- note: href="#" and data-video instead of direct URL -->
                        <a id="openBtn"
                           class="text-capitalize ms-lg-3 ms-md-0"
                           href="#"
                           data-video="<?php echo esc_url( $hr_services_video_link ); ?>">
                          <span class="btn-icon me-3">
                            <i class="main-video-icon <?php echo esc_attr( $hr_services_video_icon ); ?>"></i>
                          </span>
                          <span class="btn-text"><?php echo esc_html( $HR_SERVICES_TEXT ); ?></span>
                          <span class="screen-reader-text"><?php echo esc_html( $HR_SERVICES_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-7 col-md-7">
            <div class="slider-img-col">
              <?php
                $hr_services_banner_main_img = get_theme_mod('hr_services_banner_main_img');
                $hr_services_banner_main_img = get_stylesheet_directory_uri() . '/assets/images/slider-img.png'; 
              ?>
              <div class="<?php echo empty($hr_services_banner_main_img) ? 'no-image1' : ''; ?>">
                <?php if (!empty($hr_services_banner_main_img)) : ?>
                  <img class="main-img-slide" src="<?php echo esc_url($hr_services_banner_main_img); ?>" alt="<?php esc_attr_e('Background Image 1', 'hr-services'); ?>" />
                <?php else: ?>
                  <img class="main-img-slide" src="<?php echo esc_url($hr_services_banner_main_img); ?>" alt="<?php esc_attr_e('Default Background Image 1', 'hr-services'); ?>" />
                <?php endif; ?>
              </div>
              <div class="banner-content-img1">
                <?php
                  $hr_services_slider_img1 = get_theme_mod('hr_services_slider_img1');
                  $hr_services_slider_default_img1 = get_stylesheet_directory_uri() . '/assets/images/hr-graph1.png'; 
                ?>
                <div class="slider-map1 <?php echo empty($hr_services_slider_img1) ? 'no-image1' : ''; ?>">
                  <?php if (!empty($hr_services_slider_img1)) : ?>
                    <img src="<?php echo esc_url($hr_services_slider_img1); ?>" alt="<?php esc_attr_e('Background Image 1', 'hr-services'); ?>" />
                  <?php else: ?>
                    <img src="<?php echo esc_url($hr_services_slider_default_img1); ?>" alt="<?php esc_attr_e('Default Background Image 1', 'hr-services'); ?>" />
                  <?php endif; ?>
                </div>
              </div>
              <div class="banner-content-img2">
                <?php
                  $hr_services_slider_img2 = get_theme_mod('hr_services_slider_img2');
                  $hr_services_slider_default_img2 = get_stylesheet_directory_uri() . '/assets/images/hr-graph2.png'; 
                ?>
                <div class="slider-map2 <?php echo empty($hr_services_slider_img2) ? 'no-image1' : ''; ?>">
                  <?php if (!empty($hr_services_slider_img2)) : ?>
                    <img src="<?php echo esc_url($hr_services_slider_img2); ?>" alt="<?php esc_attr_e('Background Image 1', 'hr-services'); ?>" />
                  <?php else: ?>
                    <img src="<?php echo esc_url($hr_services_slider_default_img2); ?>" alt="<?php esc_attr_e('Default Background Image 1', 'hr-services'); ?>" />
                  <?php endif; ?>
                </div>
              </div>
              <div class="banner-content-img3">
                <?php 
                $hr_services_satisfy_percentage = get_theme_mod( 'hr_services_satisfy_employees_percentage', '' );
                if ( ! empty( $hr_services_satisfy_percentage ) ) :
                    $hr_services_satisfy_percentage = floatval( $hr_services_satisfy_percentage );

                    // Bigger circle
                    $hr_services_radius        = 60; // increase for bigger circle
                    $hr_services_circumference = 2 * M_PI * $hr_services_radius;
                    $hr_services_offset        = $hr_services_circumference - ( $hr_services_satisfy_percentage / 100 * $hr_services_circumference );
                ?>
                  <div class="satisfy-card d-flex align-items-center">
                    <div class="circle-progress">
                      <svg width="140" height="140" viewBox="0 0 140 140">
                        <circle cx="70" cy="70" r="<?php echo esc_attr( $hr_services_radius ); ?>"
                                stroke="rgba(255,255,255,0.25)" stroke-width="17" fill="none" />
                        <circle class="progress-ring" cx="70" cy="70" r="<?php echo esc_attr( $hr_services_radius ); ?>"
                                stroke="#FFFFFF" stroke-width="17" fill="none"
                                stroke-linecap="round"
                                stroke-dasharray="<?php echo esc_attr( $hr_services_circumference ); ?>"
                                stroke-dashoffset="<?php echo esc_attr( $hr_services_offset ); ?>" />
                      </svg>
                      <span class="inner-percent">
                        <?php echo esc_html( $hr_services_satisfy_percentage ) . esc_html__( '%', 'hr-services' ); ?>
                      </span>
                    </div>
                    <div class="satisfy-text">
                      <h4><?php esc_html_e( 'Satisfy Employees', 'hr-services' ); ?></h4>
                      <p><?php esc_html_e( 'Lorem Ipsum Is Simply Dummy Text Of The Printing.', 'hr-services' ); ?></p>
                    </div>
                  </div>
                <?php endif; ?>
              </div>
              <div class="social-box
                <?php
                  $hr_services_social_media_instagram = get_theme_mod( 'hr_services_social_media_instagram' );
                  $hr_services_social_media_youtube   = get_theme_mod( 'hr_services_social_media_youtube' );
                  $hr_services_social_media_dribbble  = get_theme_mod( 'hr_services_social_media_dribbble' );
                  $hr_services_social_media_twitter   = get_theme_mod( 'hr_services_social_media_twitter' );
                  $hr_services_social_media_facebook  = get_theme_mod( 'hr_services_social_media_facebook' );

                  $hr_services_has_social =
                    $hr_services_social_media_instagram ||
                    $hr_services_social_media_youtube   ||
                    $hr_services_social_media_dribbble  ||
                    $hr_services_social_media_twitter   ||
                    $hr_services_social_media_facebook;

                  echo $hr_services_has_social ? ' has-social' : '';
                ?>">
                <div class="text-lg-end text-md-center text-center align-self-center social-area mb-md-0 ps-lg-2">
                    <?php if ( $hr_services_has_social ) : ?>
                      <?php if ( $hr_services_social_media_instagram ) : ?>
                        <a target="_blank" href="<?php echo esc_url( $hr_services_social_media_instagram ); ?>">
                          <i class="fab fa-instagram"></i>
                          <span class="screen-reader-text">
                            <?php esc_html_e( 'Instagram', 'hr-services' ); ?>
                          </span>
                        </a>
                      <?php endif; ?>

                      <?php if ( $hr_services_social_media_youtube ) : ?>
                        <a target="_blank" href="<?php echo esc_url( $hr_services_social_media_youtube ); ?>">
                          <i class="fab fa-youtube"></i>
                          <span class="screen-reader-text">
                            <?php esc_html_e( 'YouTube', 'hr-services' ); ?>
                          </span>
                        </a>
                      <?php endif; ?>

                      <?php if ( $hr_services_social_media_dribbble ) : ?>
                        <a target="_blank" href="<?php echo esc_url( $hr_services_social_media_dribbble ); ?>">
                          <i class="fab fa-dribbble"></i>
                          <span class="screen-reader-text">
                            <?php esc_html_e( 'Dribbble', 'hr-services' ); ?>
                          </span>
                        </a>
                      <?php endif; ?>

                      <?php if ( $hr_services_social_media_twitter ) : ?>
                        <a target="_blank" href="<?php echo esc_url( $hr_services_social_media_twitter ); ?>">
                          <i class="fab fa-twitter"></i>
                          <span class="screen-reader-text">
                            <?php esc_html_e( 'Twitter', 'hr-services' ); ?>
                          </span>
                        </a>
                      <?php endif; ?>

                      <?php if ( $hr_services_social_media_facebook ) : ?>
                        <a target="_blank" href="<?php echo esc_url( $hr_services_social_media_facebook ); ?>">
                          <i class="fab fa-facebook-f"></i>
                          <span class="screen-reader-text">
                            <?php esc_html_e( 'Facebook', 'hr-services' ); ?>
                          </span>
                        </a>
                      <?php endif; ?>

                      <span class="social-follow-text">
                        <?php esc_html_e( 'Follow', 'hr-services' ); ?>
                      </span>

                    <?php endif; ?>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="clearfix"></div>
  </section>
<?php endif; ?>