<?php
/**
 *
 * @package Slider Premium
 */
?>
<?php $showContent = get_theme_mod('slider_section_show_content', 'on'); ?>
<div id="slider_section">

    <div id="big" class="owl-carousel owl-theme">
        <?php
        $args = array( 'post_type' => 'slider', 'orderby'   => 'id', 'order' => 'DESC',);
        if(!empty($pageId)){
            $args['page_id'] = absint($pageId);
        }
        $text = '';
        $query = new WP_Query($args);
        if($query->have_posts()){
            while($query->have_posts()) : $query->the_post(); 
            
                     // $slider1btntext = get_post_meta($post->ID, 'slider1btntext', false);
                     // $test_slider1btntext = !empty($slider1btntext[0]) ? $slider1btntext[0] : '';

            $id = get_the_ID();
        ?>
        <div class="item">
            <div class="sliderimg animated fadeInRight">
                <div class="slidimgbx">
                    <?php 
                        $total_slider_image = wp_get_attachment_image_src(get_post_thumbnail_id(),'full');  
                    echo '<img class="slide-mainimg" alt="'. esc_html(get_the_title()) .'" src="'.esc_url($total_slider_image[0]).'">';
                    ?>
                    <div class="s-gradient"></div>
                    <div class="sli-oly"></div>
                </div>
            </div>
                    
            <?php
            if($showContent == 'on'){
                ?>                   
            <div class="ht-slide-caption">  
                <div class="ht-slide-cap-title animated fadeInRight">
                    <?php echo (get_the_title()); ?>
                   
                </div>
                <!-- <div class="ht-slide-cap-desc animated fadeInLeft">
                    </?php echo (get_the_content()); ?>
                </div>  --> 
                <!-- <div class="slider-btn animated fadeInRight">
                    <ul>
                     </?php
                        $sliderbtn1url = get_post_meta($post->ID, 'sliderbtn1url', false);
                        $slider1_btn_url = !empty($sliderbtn1url[0]) ? $sliderbtn1url[0] : '';
                    ?>
                    </?php if ($slider1_btn_url) { ?>        
                    <li>
                        <div class="sliderbtn"> 
                            <div class="ht-slide-cap-descmore"> 
                                <a class="secondry-bg" href="</?php echo $slider1_btn_url; ?>"></?php echo ($test_slider1btntext); ?><div class="btn-brd"></div></a>
                            </div>
                        </div>
                    </li>
                    </?php } ?>
                    </?php
                    $designation = get_post_meta($post->ID, 'designation', false);
                    $slider2_btn_url = !empty($designation[0]) ? $designation[0] : '';

                    ?>
                    </ul>
                </div> -->
            </div>
        <?php }?>
                        
        </div>
            <?php
                endwhile;
            }else{ 
                for($i=0;$i<2;$i++){?>
        <div class="item">
            <div class="sliderimg animated fadeInRight">
                <div  class="slidimgbx">
                    <?php echo '<img class="slide-mainimg" alt="Slider" src="'. esc_html(get_template_directory_uri()) .'/images/slider.jpg">';?>
                </div>
            </div>
            <?php if($showContent == 'on'){?>
            <div class="ht-slide-caption">
                <div class="ht-slide-cap-title animated fadeInLeft ">EXPLORE THE WORLD </div>
                <!-- <div class="ht-slide-cap-desc animated fadeInRight"></div> -->
                <!-- <div class="slider-btn animated fadeInLeft">    
                    <ul>
                        <li>
                            <div class="sliderbtn"> 
                                <div class="ht-slide-cap-descmore"> 
                                    <a class="secondry-bg" href="#"></?php _e( 'CONTACT US', 'luzuk-premium' ); ?><div class="btn-brd"></div></a>
                                </div>
                            </div>
                        </li>   
                    </ul>
                </div> -->
            </div>
            <?php }?>   
        </div>
        <?php }
        }?> 
        </div>
        <div class="thumb-area">
            <div class="container pd-0">
            <div class="row">
                <div class="col-md-5 col-sm-1">
                </div>
                <div class="col-md-7 col-sm-11 col-xs-12">
                    <div class="thumb-slide">
                        <div class="thumb-content">
                            <div id="thumbs" class="owl-carousel owl-theme">
                                <?php
                                     $args = array('post_type' => 'slider');
                                    while ($query->have_posts()) : $query->the_post();
                                      $slider_image = wp_get_attachment_image_src(get_post_thumbnail_id(), 'full');
                                      $id = get_the_ID();
                                ?>
                                  <div class="item" data-item="0">
                                    <div class="thumb-img">
                                        <?php
                                            if (has_post_thumbnail()) {
                                              $image_url = $slider_image[0];
                                            } else {
                                              $image_url = get_template_directory_uri() . '/images/about1.jpg';
                                            }
                                        ?>
                                        <img  src="<?php echo esc_url($image_url); ?>" alt="<?php the_title(); ?>" />
                                    </div>
                                  </div>
                                <?php
                                    endwhile;
                                ?>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            </div>
        </div>
        <!-- </div> -->
</div>
<script>
    $(document).ready(function() {
      var bigimage = $("#big");
      var thumbs = $("#thumbs");
      //var totalslides = 10;
      var syncedSecondary = true;

      bigimage
        .owlCarousel({
        items: 1,
        slideSpeed: 4000,
        nav: true,
        autoplay: true,
        dots: false,
        loop: true,
        responsiveRefreshRate: 200,
        animateOut: 'fadeOutRight',
        animateIn: 'fadeInLeft',
        navText: [
          '<i class="fa fa-chevron-left" aria-hidden="true"></i>',
          '<i class="fa fa-chevron-right" aria-hidden="true"></i>'
        ]
      })
        .on("changed.owl.carousel", syncPosition);

      thumbs
        .on("initialized.owl.carousel", function() {
        thumbs
          .find(".owl-item")
          .eq(0)
          .addClass("current");
      })
        .owlCarousel({
        items: 4,
        dots: false,
        nav: true,
        navText: [
          '<i class="fa fa-angle-double-left" aria-hidden="true"></i>',
          '<i class="fa fa-angle-double-right" aria-hidden="true"></i>'
        ],
        smartSpeed: 200,
        slideSpeed: 500,
        slideBy: 3,
        responsiveRefreshRate: 100
      })
        .on("changed.owl.carousel", syncPosition2);

      function syncPosition(el) {

        //to disable loop, comment this block
        var count = el.item.count - 1;
        var current = Math.round(el.item.index - el.item.count / 2 - 0.5);

        if (current < 0) {
          current = count;
        }
        if (current > count) {
          current = 0;
        }
        //to this
        thumbs
          .find(".owl-item")
          .removeClass("current")
          .eq(current)
          .addClass("current");
        var onscreen = thumbs.find(".owl-item.active").length - 1;
        var start = thumbs
        .find(".owl-item.active")
        .first()
        .index();
        var end = thumbs
        .find(".owl-item.active")
        .last()
        .index();

        if (current > end) {
          thumbs.data("owl.carousel").to(current, 100, true);
        }
        if (current < start) {
          thumbs.data("owl.carousel").to(current - onscreen, 100, true);
        }
      }

      function syncPosition2(el) {
        if (syncedSecondary) {
          var number = el.item.index;
          bigimage.data("owl.carousel").to(number, 100, true);
        }
      }

      thumbs.on("click", ".owl-item", function(e) {
        e.preventDefault();
        var number = $(this).index();
        bigimage.data("owl.carousel").to(number, 300, true);
      });
    });
</script>

