<?php
/**
 *
 * @package Slider Premium
 */
?>
<?php $showContent = get_theme_mod('slider_section_show_content', 'on'); ?>
<div id="slider" class="slider_section">
    <div class="msli-oly"></div>
    <div class="container">
    <div class="slider-area">
        <div class="row">
                <?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()){
                ?>
                
               <div class="swiper-container slider-top">
                <div class="swiper-wrapper">
                     <?php
                        while($query->have_posts()) : $query->the_post(); 
                        

                        if( get_theme_mod('slider_areaOpacity',true) ) {
                            $slider_areaOpacity = 'opacity:'.esc_attr(get_theme_mod('slider_areaOpacity')).';';
                        }
                        if( get_theme_mod('slider_Tfontsize',true) ) {
                            $slider_Tfontsize = 'font-size:'.esc_attr(get_theme_mod('slider_Tfontsize')).';';
                        }

                        $pageLink = '';
                        $slider_btn_link = get_post_meta($post->ID,'slider_btn_link',false);
                        $sliderBtnTxt = get_post_meta($post->ID,'sliderBtnTxt',false);
                        if(!empty($slider_btn_link) && is_array($slider_btn_link)){
                            $pageLink = esc_url(get_permalink($slider_btn_link[0]));
                        }
                        if(!empty($sliderBtnTxt) && is_array($sliderBtnTxt)){
                            $pageLinkTxt = $sliderBtnTxt[0];
                        }else{
                            $pageLinkTxt = 'Start Free Trial';
                        }

                        // $sliderchangedate = get_post_meta($post->ID, 'sliderchangedate', false);
                        // $sliderdatetext = !empty($sliderchangedate[0]) ? $sliderchangedate[0] : '';

                        ?>
                        <div class="swiper-slide">
                            <div class="swiper-slide-container">
                                <?php
                                if($showContent == 'on'){
                                    ?>
                                <div class="slider_content">
                                    <div class="title  "><?php echo (get_the_title()); ?> </div>
                                    <div class="text "><?php echo luzuk_excerpt( get_the_content() , 109 ); ?></div>
                                    <?php 
                                    if(!empty($pageLink)){ ?>
                                        <div class="slide-btna">
                                            <div class="btn5">  
                                                <a href="<?php echo $pageLink; ?>"> 
                                                    <?php echo($pageLinkTxt); ?> 
                                                    <span>
                                                    <svg fill="#000000" height="25px" width="25px" viewBox="0 0 32 32"><path d="M19,25.6c-0.3,0-0.5-0.1-0.8-0.2c-0.8-0.3-1.2-1-1.2-1.8V20H5c-1.1,0-2-0.9-2-2v-4c0-1.1,0.9-2,2-2h12V8.4 c0-0.8,0.5-1.5,1.2-1.8C19,6.3,19.8,6.4,20.4,7l8.3,8.3c0.4,0.4,0.4,1,0,1.4L20.4,25C20,25.4,19.5,25.6,19,25.6z"></path> 
                                                    </svg>
                                                    </span>
                                                </a>
                                            </div>
                                        </div>
                                    <?php }?>
                                </div>
                                <?php }?>
                            </div>
                        </div>
                        <?php endwhile; ?>
                    </div>
                </div>
                <div class="swiper-container slider-thumbs">
                    <div class="swiper-wrapper">
                <?php
                    while($query->have_posts()) : $query->the_post(); 
                    

                    if( get_theme_mod('slider_areaOpacity',true) ) {
                        $slider_areaOpacity = 'opacity:'.esc_attr(get_theme_mod('slider_areaOpacity')).';';
                    }
                    if( get_theme_mod('slider_Tfontsize',true) ) {
                        $slider_Tfontsize = 'font-size:'.esc_attr(get_theme_mod('slider_Tfontsize')).';';
                    }

                    $pageLink = '';
                    $slider_btn_link = get_post_meta($post->ID,'slider_btn_link',false);
                    $sliderBtnTxt = get_post_meta($post->ID,'sliderBtnTxt',false);
                    if(!empty($slider_btn_link) && is_array($slider_btn_link)){
                        $pageLink = esc_url(get_permalink($slider_btn_link[0]));
                    }
                    if(!empty($sliderBtnTxt) && is_array($sliderBtnTxt)){
                        $pageLinkTxt = $sliderBtnTxt[0];
                    }else{
                        $pageLinkTxt = 'Start Free Trial';
                    }

                    // $sliderchangedate = get_post_meta($post->ID, 'sliderchangedate', false);
                    // $sliderdatetext = !empty($sliderchangedate[0]) ? $sliderchangedate[0] : '';

                    ?>
                        <div class="swiper-slide">
                            <div class="swiper-slide-container">
                                <?php 
                                    if(has_post_thumbnail()){
                                        $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>
                        </div>
                    <?php endwhile; ?>
                    </div>
                  </div>
             <?php
            }else{ 
            ?>
                <div class="swiper-container slider-thumbs">
                    <div class="swiper-wrapper">
                         <?php for($i=0;$i<6;$i++){?>
                            <div class="swiper-slide">
                                <div class="swiper-slide-container">
                                    <?php echo '<img class="slide-mainimg" alt="Slider" src="'. esc_html(get_template_directory_uri()) .'/images/slider1.jpg">';?>
                                </div>
                            </div>
                        <?php } ?>
                    </div>
                </div>
                 <div class="swiper-container slider-top">
                    <div class="swiper-wrapper">
                        <?php for($i=0;$i<6;$i++){?>
                            <div class="swiper-slide">
                                <div class="swiper-slide-container">
                                    <?php if($showContent == 'on'){?>
                                    <div class="slider_content animated " >
                                        <div class="slider-overlay"></div>
                                        <div class="title animated ">Creating Spaces That Inspire</div>
                                        <div class="text animated ">There are many variations of passages Lorem Ipsum but the majority have suffered alteration in some form, by</div>
                                        <div class="slide-btna ">
                                            <div class="btn5">
                                                <a href="#">
                                                    <?php _e( 'Read More', 'luzuk-premium' ); ?>
                                                    <span>
                                                        <svg height="25px" width="25px" viewBox="0 0 32 32"><path d="M19,25.6c-0.3,0-0.5-0.1-0.8-0.2c-0.8-0.3-1.2-1-1.2-1.8V20H5c-1.1,0-2-0.9-2-2v-4c0-1.1,0.9-2,2-2h12V8.4 c0-0.8,0.5-1.5,1.2-1.8C19,6.3,19.8,6.4,20.4,7l8.3,8.3c0.4,0.4,0.4,1,0,1.4L20.4,25C20,25.4,19.5,25.6,19,25.6z"></path> </svg>
                                                    </span>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                <?php }?>
                                </div>
                            </div>
                         <?php } ?>
                        </div>
                </div>
                <?php 
            }?>
        </div>
        </div>
    </div>
</div>
<div class="clearfix"></div>
<script>
    jQuery(document).ready(function($) {
      var sliderTop = new Swiper('.slider-top', {
      spaceBetween: 10,
      // navigation: {
      //   nextEl: '.swiper-button-next',
      //   prevEl: '.swiper-button-prev',
      // },
      loop: true,
      loopedSlides: 3,
       breakpoints: {
        768: {
          direction: 'vertical',
        }
      }
    });
    var sliderThumbs = new Swiper('.slider-thumbs', {
      spaceBetween: 10,
      centeredSlides: true,
      slidesPerView: 3,
      // touchRatio: 0.2,
      slideToClickedSlide: true,
      loop: true,
        autoplay: {
            delay: 3500,
            disableOnInteraction: false,
            pauseOnMouseEnter: true,
        },
      loopedSlides: 3
    });
    sliderTop.controller.control = sliderThumbs;
    sliderThumbs.controller.control = sliderTop;

    });
</script>