<?php
CSF::createWidget( 'anasayfa_top_new_manset', array(
    'title'       => 'Anasayfa (Üst) Tam Boyut Manşet 2',
    'classname'   => 'anasayfa-top-new-manset'
) );

if( ! function_exists( 'anasayfa_top_new_manset' ) ) {
    function anasayfa_top_new_manset( $args, $instance ) {
        global $bp_options;
        $anasayfa_manset = new WP_Query( array(
            'posts_per_page' => 12,
            'meta_key'        => 'bh_anasayfa_slider',
            'meta_query'    => array(
                'key'            => 'bh_anasayfa_slider',
                'value'        => 'on'
            ),
            'orderby' => 'desc',
        ) );
        ?>
        <script src="<?php bloginfo("template_directory")?>/js/owl.carousel.min.js" type="text/javascript"></script>
        <script src="<?php bloginfo("template_directory")?>/js/owl.carousel2.thumbs.js" type="text/javascript"></script>
        <style>
            .mansetMobile {float:left;width:100%;height:235px;position:relative;margin-bottom:20px;}
            .mansetMobile .mansetMItem {float:left;width:100%;height:100%;position:relative;overflow:hidden;}
            .mansetMobile .mansetMItem a.thumb {float:left;width:100%;height:100%;position:relative;overflow:hidden;}
            .mansetMobile .mansetMItem a.thumb:before {position:absolute;bottom:0;left:0;right:0;width:100%;height:100%;content:"";box-shadow:inset 0px -133px 70px -25px rgba(0,0,0,.9);-webkit-box-shadow:inset 0px -133px 70px -25px rgba(0,0,0,.9);-moz-box-shadow:inset 0px -133px 70px -25px rgba(0,0,0,.9);z-index:3}
            .mansetMobile .mansetMItem a.title {position:absolute;width:calc(100% - 46px);bottom:20px;left:23px;z-index:4;color:#FFF;font-family:'Roboto',sans-serif;font-weight:600;line-height:30px;font-size:22px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
            .mansetMobile .owl-dots {position:relative;left:0;right:0;padding:0;margin:10px auto auto;bottom:0px;height:22px;display:table;text-align:center;}
            .mansetMobile .owl-dots .owl-dot {width:14px;height:14px;float:left;margin:0 4px;border:2px solid #656565;border-radius:100%;}
            .mansetMobile .owl-dots .owl-dot.active {background:#656565;border-color:#656565;}
            <?php if(wp_is_mobile()){
                ?>
            .owl-carousel .owl-item img{height: 242px;}
            <?php
        }?>

        </style>




        <div class="fWidthSlide mobile-gizle">

            <div id="big" class="owl-carousel">
                <?php
                foreach($anasayfa_manset->posts as $key=>$value) :
                    $post_id = $value->ID;
                    $title = get_the_title($post_id);

                    $meta = get_post_meta( $value->ID, 'bh_meta', true );
                    ?>
                    <div class="itemSlide">
                        <a href="<?=get_the_permalink($post_id)?>" class="thumb">
                            <?php

                            if(!empty($meta['tam_boyut_link'])):
                                echo '<img src="'.$meta['tam_boyut_link'].'" style="height: 465px"  class="lazy" />';
                            else:
                                echo '<img src="'.get_the_post_thumbnail_url( $post_id, '', array( 'alt' => get_the_title($post_id) ) ).'" alt="'.get_the_title($post_id).'" style="height: 465px"  class="lazy" />';
                            endif;


                            ?>
                            <span class="swiper-overlay"><h3><?=$title?></h3></span>
                        </a>
                    </div>
                <?php
                endforeach;
                ?>




            </div>

            <div id="thumbs" class="owl-carousel">
                <?php
                foreach($anasayfa_manset->posts as $key=>$value) :
                    $post_id = $value->ID;
                    $title = get_the_title($post_id);

                    $meta = get_post_meta( $value->ID, 'bh_meta', true );
                    if($key+1 < 10){
                        $num = '0';
                    }else{
                        $num = '';
                    }
                    ?>
                    <div class="itemSlidePag">
                        <i><?=$num?><?=$key+1?></i>
                        <span><?=$title?></span>
                    </div>
                <?php endforeach; ?>



            </div>



        </div>

        <script>


            var sync1 = $(".fWidthSlide #big");
            var sync2 = $(".fWidthSlide #thumbs");
            var slidesPerPage = 4;
            var syncedSecondary = false;
            sync1.owlCarousel({
                items : 1,
                slideSpeed : 2000,
                nav: false,
                autoplay: true,
                dots: true,
                loop: true,
                responsiveRefreshRate : 200,
                navText: ['<svg width="100%" height="100%" viewBox="0 0 11 20"><path style="fill:none;stroke-width: 1px;stroke: #fff;" d="M9.554,1.001l-8.607,8.607l8.607,8.606"/></svg>','<svg width="100%" height="100%" viewBox="0 0 11 20" version="1.1"><path style="fill:none;stroke-width: 1px;stroke: #fff;" d="M1.054,18.214l8.606,-8.606l-8.606,-8.607"/></svg>'],
            }).on('changed.owl.carousel', syncPosition);
            sync2.on('initialized.owl.carousel linked.to.owl.carousel', function() {
                sync2.find('.owl-item.current').removeClass('current');
                var current = sync2.find('.owl-item.active.center').length ? sync2.find('.owl-item.active.center') : sync2.find('.owl-item.active').eq(0);
                current.addClass('current');
            })
                .owlCarousel({
                    items : slidesPerPage,
                    dots: true,
                    nav: false,
                    smartSpeed: 200,
                    slideSpeed : 500,
                    slideBy: slidesPerPage,
                    responsiveRefreshRate : 100
                }).on('changed.owl.carousel', syncPosition2);
            function syncPosition(el) {
                var count = el.item.count-1;
                var current = Math.round(el.item.index - (el.item.count/2) - .5);
                if(current < 0) {
                    current = count;
                }
                if(current > count) {
                    current = 0;
                }
                sync2
                    .find(".owl-item")
                    .removeClass("current")
                    .eq(current)
                    .addClass("current");
                var onscreen = sync2.find('.owl-item.active').length - 1;
                var start = sync2.find('.owl-item.active').first().index();
                var end = sync2.find('.owl-item.active').last().index();

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

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

            sync2.on("click", ".owl-item", function(e){
                e.preventDefault();
                var number = $(this).index();
                sync1.data('owl.carousel').to(number, 300, true);
            });

        </script>
<?php if(wp_is_mobile()): ?>
        <div class="four-manset" style="padding-left: 0px !important; padding-right: 0px !important;">
            <div class="four-manset-pagination">
                <ul>
                    <?php foreach($anasayfa_manset->posts as $key=>$value) :
                        $post_id = $value->ID;
                        $title = get_the_title($post_id);
                        $meta = get_post_meta( $value->ID, 'bh_meta', true );
                        ?>
                        <li class="<?php if($key == 0): ?>active<?php endif; ?>">
                            <img src="<?=get_the_post_thumbnail_url( $post_id, '', array( 'alt' => get_the_title($post_id) ) )?>" alt="<?=get_the_title($post_id)?>">
                        </li>

                    <?php endforeach; ?>
                </ul>
            </div>

            <div id="owl-four-manset" class="owl-carousel">
                <?php foreach($anasayfa_manset->posts as $key=>$value) :
                    $post_id = $value->ID;
                    $title = get_the_title($post_id);
                    $meta = get_post_meta( $value->ID, 'bh_meta', true );
                    ?>
                    <div>
                        <a href="<?=get_the_permalink($post_id);?>">
                            <img src="<?=get_the_post_thumbnail_url( $post_id, '', array( 'alt' => get_the_title($post_id) ) )?>" alt="<?=get_the_title($post_id)?>" class="lazy loading" data-was-processed="true">
                            <strong><?=$title ?></strong>
                        </a>
                    </div>
                <?php endforeach; ?>
            </div>
        </div>
<?php endif; ?>

        <?php

    }
}

?>