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

    <div class="swiper-container " data-swiper-autoplay="2000">
        <div class="swiper-wrapper">
        <?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(); 
            
                    $sliderBtnTxt = get_post_meta($post->ID, 'sliderBtnTxt', false);
                    $sliderBtnTxt = !empty($sliderBtnTxt[0]) ? $sliderBtnTxt[0] : '';

                    $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]));
                            }

            $id = get_the_ID();
        ?>
        <div class="swiper-slide">
            <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="up-brd"></div>
                    <div class="low-brd"></div>
                     <?php if( get_theme_mod('slider_animation_display','show' ) == 'show') : ?>
                    <div class="s-move"> 
                       <?php 
                            $smv1_image = get_theme_mod('smv1_image');
                            if(!empty($smv1_image)){
                                echo '<img alt="'. esc_html(get_the_title()) .'" src="'.esc_url($smv1_image).'" class="img-responsive secondry-bg-img" />';
                            }else{
                                echo '<img  src="'.get_template_directory_uri().'/images/smv1.png" class="img-responsive svm1" />';
                            }
                        ?> 

                        <?php 
                            $smv2_image = get_theme_mod('smv2_image');
                            if(!empty($smv2_image)){
                                echo '<img alt="'. esc_html(get_the_title()) .'" src="'.esc_url($smv2_image).'" class="img-responsive secondry-bg-img" />';
                            }else{
                                echo '<img  src="'.get_template_directory_uri().'/images/smv2.png" class="img-responsive svm2" />';
                            }
                        ?> 

                        <?php 
                            $smv3_image = get_theme_mod('smv3_image');
                            if(!empty($smv3_image)){
                                echo '<img alt="'. esc_html(get_the_title()) .'" src="'.esc_url($smv3_image).'" class="img-responsive secondry-bg-img" />';
                            }else{
                                echo '<img  src="'.get_template_directory_uri().'/images/smv3.png" class="img-responsive svm3" />';
                            }
                        ?>

                        <?php 
                            $smv4_image = get_theme_mod('smv4_image');
                            if(!empty($smv4_image)){
                                echo '<img alt="'. esc_html(get_the_title()) .'" src="'.esc_url($smv4_image).'" class="img-responsive secondry-bg-img" />';
                            }else{
                                echo '<img  src="'.get_template_directory_uri().'/images/smv4.png" class="img-responsive svm4" />';
                            }
                        ?>
                   </div>
                   <?php endif ?>
                </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="slide-text animated fadeInLeft">
                    <?php echo (get_the_content()); ?>
                </div> 
                <div class="slider-btn animated fadeInRight">
                    <ul>
                    
                    <?php if ($pageLink) { ?>        
                    <li>
                        <div class="sliderbtn"> 
                            <div class="ht-slide-cap-descmore"> 
                                <a class="secondry-bg" href="<?php echo $pageLink; ?>"><?php echo ($sliderBtnTxt); ?><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32" xml:space="preserve"><style></style><path d="M7 28a.999.999 0 0 1-1-1V5a1 1 0 0 1 1.521-.854l18 11a1.001 1.001 0 0 1 0 1.708l-18 11A1 1 0 0 1 7 28zM8 6.783v18.434L23.082 16 8 6.783z"/></svg>
                                        
                                    <div class="stars_an">
                                        <div class="starsinn"></div>
                                    </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="swiper-slide">
            <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 class="s-gradient"></div>
                    <div class="up-brd"></div>
                    <div class="low-brd"></div>
                </div>
            </div>
            <?php if($showContent == 'on'){?>
            <div class="ht-slide-caption">
                <div class="ht-slide-cap-title animated fadeInLeft ">Coding Confidence <span>Starts</span> Here</div>
                <div class="slide-text animated fadeInRight">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected </div> 
                <div class="slider-btn animated fadeInLeft">    
                    <ul>
                        <li>
                            <div class="sliderbtn"> 
                                <a class="secondry-bg" href="#"><?php _e( 'contact us', 'luzuk-premium' ); ?><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32" xml:space="preserve"><style></style><path d="M7 28a.999.999 0 0 1-1-1V5a1 1 0 0 1 1.521-.854l18 11a1.001 1.001 0 0 1 0 1.708l-18 11A1 1 0 0 1 7 28zM8 6.783v18.434L23.082 16 8 6.783z"/></svg>
                                    <div class="stars_an">
                                        <div class="starsinn"></div>
                                    </div>
                                </a>
                            </div>
                        </li>   
                    </ul>
                </div> 
            </div>
            <?php }?>   
        </div>
        <?php }
        }?>
        
    </div>
    <div class="swiper-pagination"></div>
        <div class="swiperarrowbtn">
            <!-- If we need navigation buttons -->
            <div class="swiper-button-prev"> <i class="fa fa-angle-left" ></i></div>
            <div class="swiper-button-next"><i class="fa fa-angle-right" ></i></div>
        </div>
    </div>
</div>
  <script>
          $(document).ready(function () {
    //initialize swiper when document ready  
    var mySwiper = new Swiper ('#slider_section .swiper-container', {
      // Optional parameters
      direction: 'horizontal', 
      loop: true,
      
      nextButton: '.swiper-button-next',
      prevButton: '.swiper-button-prev',
      // mousewheelControl: true,
      // keyboardControl: true,

        pagination: '.swiper-pagination',
        paginationClickable: true,
        spaceBetween: 0,
        autoplay: 4500,
        autoplayDisableOnInteraction: true,
        speed: 1400,
        slidesPerView:'auto',
        visibilityFullFit: true,
        autoResize: false,
        initialSlide : 2,
        loop : true,
        loopedSlides : 20,
    })        
  });
    </script>