<?php
/**
 * The carousel with background template
 * If you want to override this template by your custom template in the theme folder,
 * just create the 'sliderkits' folder in the theme folder,
 * then, copy this file to sliderkits folder.
 * @version 1.0.0
 * @package SliderKits
 */

 $autoplay         =   $sk_data->autoplay;
 $autoplaySpeed    =   $sk_data->autoplaySpeed;
 $infinite         =   $sk_data->infinite;
 $swipe            =   $sk_data->swipe;
 $touchMove        =   $sk_data->touchMove;
 $speed            =   $sk_data->speed;
 $slides           =   $sk_data->slides;

 $default_slider_config = json_encode([
   'autoplay' => $autoplay === 'true'? true: false,
   'autoplaySpeed' => $autoplaySpeed,
   'infinite' => $infinite === 'true'? true: false,
   'dots' => false,
   'arrows' => 'false',
   'swipe'  => $swipe === 'true'? true: false,
   'speed'  => $speed,
   'touchMove' => $touchMove === 'true'? true: false,
   'fade'   => false,
   'lazyLoad' => 'ondemand',
   'slidesToShow' => 1,
   'asNavFor' => '.sk-carousel-img-side,.sk-carousel-background',
   'responsive' => [
     [
       "breakpoint" => 767,
       "settings" => [
         "arrows" => true
       ]
     ]
   ]
 ]);
 ?>
<?php if( $slides ) : ?>
<div class="sk-carousel-with-background">
  <div class="container">
      <div class="row">
        <!--text slider-->
        <div class="col-md-4">
          <div class="sk-slick sk-slick-default sk-carousel-text-side" data-slick='<?php echo esc_attr( $default_slider_config );?>'>
            <?php foreach( $slides as $item ): ?>
            <div class="sk-slick-item d-flex align-items-center elementor-repeater-item-<?php echo esc_attr( $item['_id'] ); ?>"">
              <div class="sk-slick-item__container pe-5">
                <?php if( $item['title'] ): ?>
                <h1 class="sk-heading sk-wrap-lines"><?php echo wp_kses_post( $item['title'] ); ?></h1>
                <?php endif;?>

                <?php if( $item['subtitle'] ): ?>
                <h2 class="sk-subheading sk-wrap-lines"><?php echo wp_kses_post( $item['subtitle'] ); ?></h2>
                <?php endif;?>

                <?php if( $item['paragraph'] ): ?>
                <div class="sk-content sk-wrap-lines">
                   <?php echo wp_kses_post( $item['paragraph'] ); ?>
                </div>
                <?php endif;?>

                <?php
                  if( $item['button_text'] ):
                  $target = $item['button_link']['is_external'] ? 'target="_blank"' : '';
                ?>
                <div class="sk-button-container">
                  <a href="<?php echo esc_url( $item['button_link']['url'] );?>" class="elementor-button sk-button elementor-animation-<?php echo esc_attr( $item['button_hover_animation'] ); ?>" <?php echo esc_html( $target );?>><?php echo esc_html( $item['button_text'] ); ?></a>
                </div>
                <?php endif; ?>
              </div>
            </div>
            <?php endforeach?>
          </div>
        </div>

        <!--carousel-->
        <div class="col-md-8 d-flex align-items-center">
          <div class="sk-slick sk-slick-carousel sk-carousel-img-side" data-slick='{"slidesToShow": 3, "focusOnSelect": true, "dots": true, "arrows": false, "fade": false, "infinite": false, "lazyLoad": "ondemand", "asNavFor": ".sk-carousel-text-side,.sk-carousel-background", "waitForAnimate": true, "responsive":[{"breakpoint": 767,"settings":{"slidesToShow": 1,"dots": false}}]}'>
            <?php foreach( $slides as $item ): ?>
            <div class="sk-slick-item d-flex align-items-center ps-md-3 elementor-repeater-item-<?php echo esc_attr( $item['_id'] ); ?>"">
              <div class="sk-slick-item__container">
                  <div class="sk-img-side">
                    <?php
                     $thumbnail_url = $item['slide_picture']['url'];
                     if( $thumbnail_url !== '' ):
                    ?><img class="lazyload" src="<?php echo wp_get_attachment_image_url( $item['slide_picture']['id'], 'thumbnail' );?>" data-src="<?php echo esc_attr( $thumbnail_url );?>" alt="<?php echo esc_attr( $item['title'] )?>" />
                    <?php endif; ?>
                  </div>
              </div>
            </div>
            <?php endforeach;?>
        </div>
    </div>
  </div>

  <!--bg-->
  <div class="sk-slick sk-carousel-background elementor-repeater-item-<?php echo esc_attr( $item['_id'] ); ?>" data-slick='{"slidesToShow": 1, "dots": false, "arrows": false, "fade": true, "infinite": false, "lazyLoad": "ondemand", "asNavFor": ".sk-carousel-img-side,.sk-carousel-text-side", "waitForAnimate": true}'>
    <?php foreach( $slides as $item ): ?>
    <div>
      <div class="sk-carousel-overlay"></div>
      <?php
       $picture_url = $item['picture']['url'];
       if( $picture_url !== '' ):
      ?>
      <img src="<?php echo esc_url( $picture_url ); ?>" alt="<?php echo esc_url( $item['title'] ); ?>" />
      <?php endif; ?>
    </div>
    <?php endforeach;?>
  </div>
</div>
<?php endif; ?>