<?php
/**
 *
 * @package Slider Premium
 */
?>
<?php $showContent = get_theme_mod('slider_section_show_content', 'on'); ?>
<div id="slider" class="slider_section">
    <div class="slider-area">
        <div class="container">
            <div class="row">
                <div  class="owl-carousel">
                    <?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(); 
                        

                        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="item">
                        <div class="sliderimg">
                            <?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>
                        <!-- <?php
                        if($showContent == 'on'){
                            ?>
                        <div class="slider_content animated " >
                            <div class="title animated "><?php echo (get_the_title()); ?> </div>
                           <div class="text animated "></?php echo (get_the_content()); ?></div> 
                            <?php 
                            if(!empty($pageLink)){ ?>
                                <div class="slide-btna">
                                    <div class="btn5 btn1">  
                                        <a href="<?php echo $pageLink; ?>"> 
                                            <span> <?php echo($pageLinkTxt); ?> </span>
                                        </a>
                                    </div>
                                </div>
                            <?php }?>
                        </div>
                        <?php }?> -->
                    </div>
                            <?php
                        endwhile;
                    }else{ 
                    for($i=0;$i<6;$i++){?>
                    <div class="item">
                        <div class="sliderimg ">
                            <?php echo '<img class="slide-mainimg " alt="Slider" src="'. esc_html(get_template_directory_uri()) .'/images/slider1.jpg">';?>
                        </div>
                        <?php if($showContent == 'on'){?>
                            <div class="slider_content animated " >
                                <div class="title animated ">slider1</div>
                                <!-- <div class="text animated ">If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden.</div> -->
                                <!-- <div class="slide-btna ">
                                    <div class="btn5 btn1">
                                        <a href="#">
                                            <//?php _e( 'Shop Now', 'luzuk-premium' ); ?>
                                            
                                        </a>
                                    </div>
                                </div> -->
                            </div>
                        <?php }?>
                    </div>
                    <?php }
                }?>
                </div>
            </div>
        </div>
    </div>
    <script>
        $(document).ready(function() {
          $('#slider .owl-carousel').owlCarousel({
            refreshClass: 'owl-refresh',
            autoplayTimeout:5000,
            loop: true,
            margin: 0,
            autoHeight: true,
            autoWidth: false,
            autoplay: true,
            // animateIn: 'slideInLeft',
            // animateOut: 'slideOutRight',
             animateOut: 'lightSpeedOut',
            responsiveClass: true,
            navText: [
                    '<i class="fa fa-long-arrow-left" aria-hidden="true"></i> Pre',
                    'Next <i class="fa fa-long-arrow-right" aria-hidden="true"></i>'
                ],
            responsive: {
              0: {
                items: 1,
                nav: true,
              },
              600: {
                items:1,
                nav: true,
              },
              1000: {
                items:1,
                nav: true,
                loop: true,
              }
            }
          })
        })
    </script>
<div class="clearfix"></div>
</div>