<?php
/**
 *
 * @package Slider Premium
 */
?>
<?php $showContent = get_theme_mod('slider_section_show_content', 'on'); ?>
<div class="slider_section" id="slider">
    <?php
        $slider_img_display = get_theme_mod( 'slider_img_display', 'show' ); 
        if ( $slider_img_display === 'show' ) {
    ?>
        <div class="sliderleft-img">
            <img src="<?php echo get_template_directory_uri() ?>/images/mask.png" class="img-responsive" />
        </div>
        <div class="sliderright-img">
            <img src="<?php echo get_template_directory_uri() ?>/images/mask2.png" class="img-responsive" />
        </div>
    <?php } ?>
         <div class="swiper-container">
            <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(); 
                
                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 = 'Read More';
                }

                // $slider_subtitle = get_post_meta($post->ID,'slider_subtitle',false);
                // $slider_subtitle = $slider_subtitle[0];

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

            ?>
            <div class="swiper-slide">
                <div class="container"> 
                    <div class="imbx">
                        <?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]).'">';
                        }?>
                        
                        <?php if($showContent == 'on'){?>
                            <div class="slider_content" data-wow-duration="1s">
                                <div class="title wow bounceInDown"> <?php echo (get_the_title()); ?></div>
                                <div class="sub-title wow bounceInLeft"><?php echo $slider_subtitle; ?></div>
                                 <?php 
                                    if(!empty($pageLink)){ ?>
                                        <div class="slide-btna">
                                            <div class="btn5">  
                                                <a href="<?php echo $pageLink; ?>">
                                                    <?php echo($pageLinkTxt); ?> <i class="fa fa-long-arrow-right"></i>
                                                </a>
                                            </div>
                                        </div>
                                <?php }?>
                            </div>
                        <?php }?>
                    </div>
                </div>
            </div>
                    <?php
                endwhile;
            }else{ 
                for($i=0;$i<6;$i++){?>
                    <div class="swiper-slide">
                        <div class="container"> 
                        <div class="imbx">
                            <?php echo '<img class="slide-mainimg" alt="Slider" src="'. esc_html(get_template_directory_uri()) .'/images/slider-banner.png">';?>
                            
                            <?php if($showContent == 'on'){?>
                                <div class="slider_content" data-wow-duration="1s">
                                    <div data-swiper-parallax="300" class="title wow bounceInDown">Explore Our Finest</div>
                                    <div data-swiper-parallax="400" class="sub-title wow bounceInLeft">Selection of Wines</div>
                                    <div class="slide-btna ">
                                        <div class="btn5">
                                            <a href="#">
                                                <?php _e( 'See More', 'luzuk-premium' ); ?> 
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            <?php }?>
                        </div>
                        </div>
                    </div>
                <?php }
            }?>
        </div>
        <div class="swiper-button-next"><i class="fa fa-angle-right"></i></div>
        <div class="swiper-button-prev"><i class="fa fa-angle-left"></i></div>
    </div>
    <div class="container">
        <div class="sldier-imgbox">
            <div class="sliderarea-img">
                <?php 
                    $slider_image = get_theme_mod('slider_image');
                    if(!empty($slider_image)){
                        echo '<img alt="'. esc_html(get_the_title()) .'" src="'.esc_url($slider_image).'" class="img-responsive secondry-bg-img" />';
                    }else{
                        echo '<img src="'.get_template_directory_uri().'/images/slider_img.png" class="img-responsive" />';
                    }
                ?> 
            </div> 
        </div> 
    </div>  
</div>
<script>
        // $(document).ready(function() {
        //   $('.slider_section .owl-carousel').owlCarousel({
        //     refreshClass: 'owl-refresh',
        //     autoplayTimeout:7000,
        //     loop: true,
        //     margin: 30,
        //     autoHeight: true,
        //     autoWidth: false,
        //     autoplay: true,
        //     // animateOut: 'lightSpeedOut',
        //     // animateOut: 'slideOutDown',
        //     animateOut: 'fadeOutRight',
        //     animateIn: 'fadeInLeft',
        //     navText: [
        //             '<i class="fa fa-caret-left"></i> ',
        //             '<i class="fa fa-caret-right"></i>'
        //         ],
        //     responsiveClass: true,

        //     responsive: {
        //       0: {
        //         items: 1,
        //         nav: true,
        //         margin: 40
        //       },
        //       600: {
        //         items:1,
        //         nav: true,
        //         margin: 50
        //       },
        //       1000: {
        //         items:1,
        //         nav: true,
        //         loop: true,
        //         margin: 100
        //       }
        //     }
        //   })
        // })

</script>
<script type="text/javascript">
    $(document).ready(function() {
// Swiper: Slider
    new Swiper('.slider_section .swiper-container', {
        loop: true,
        // nextButton: '.swiper-button-next',
        // prevButton: '.swiper-button-prev',
        slidesPerView: 1,
        paginationClickable: true,
        spaceBetween: 20,
        autoplay: {
            delay: 6500,
            disableOnInteraction: false,
        },
        speed: 1000,
        parallax: true,
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        breakpoints: {
            1920: {
                slidesPerView: 1,
                spaceBetween: 30
            },
            1028: {
                slidesPerView: 1,
                spaceBetween: 30
            },
            480: {
                slidesPerView: 1,
                spaceBetween: 10
            }
        }
    });
});

</script>