<?php ?>
<div id="<?php echo $this->get_id(); ?>" class="dynamic-header-tab-2 layout-2">

    <?php
    /**
     * Argument
     * for query post
     * ================
     */
    $count = 1;
    $acive_args = array(
        'cat' => $cat_id,
        'orderby'	=> 'date',
        'order'		=> 'DESC',
        'post_type' =>  'post',
        'showposts'	=> 1,
        'post__not_in' => get_option("sticky_posts"),
    );
    $args = array(
        'cat' => $cat_id,
        'orderby'	=> 'date',
        'order'		=> 'DESC',
        'post_type' =>  'post',
        'showposts'	=> $post_num_to_show,
        'post__not_in' => get_option("sticky_posts"),
    );
    $query = new WP_Query($args);
    $active_query = new WP_Query($acive_args);
    ?>
    <div class="dynamic-recent-post-tab">
        <div class="active-post-content">
            <?php if($active_query->have_posts()): ?>
                <?php while($active_query->have_posts()): ?>
                    <?php $active_query->the_post();
                    $content = apply_filters( 'the_content', get_the_content() );
                    $video = false;
                    /**
                     * Only get video from the content if a playlist isn't present.
                     */
                    if (false === strpos($content, 'wp-playlist-script')) {
                        $video = get_media_embedded_in_content($content, array('video', 'object', 'embed', 'iframe'));
                    }
                    if($video){
                        preg_match('/src="([^"]+)"/', $video[0], $match);
                        $url = $match[1];
                        $new_url = str_replace('embed/', 'watch?v=', $url);
                    }else{
                        $new_url = '#';
                    }
                    ?>
                    <div class="post-data" style="
                            background-image: url(<?php echo get_the_post_thumbnail_url(get_the_ID(), $featured_thumbnail_size)?>);
                            ">
                        <div class="post-cat">
                            <?php magmax_limited_cateory_with_seperator_for_elements(get_the_ID()); ?>
                        </div>
                        <div class="post-title">
                            <a href="<?php the_permalink(); ?>" class="dynamic-post-title">
                                <h3><?php the_title(); ?></h3>
                            </a>
                        </div>
                        <?php
                        if('video' == get_post_format(get_the_ID())):?>
                            <a class="<?php echo $video[0] ? 'video-post-popup' : 'video-post-icon'; ?>"
                               href="<?php echo $new_url ? $new_url : '#'; ?>">
                                <img  src="<?php echo get_template_directory_uri(). '/dist/images/play-button-bold.png'; ?>" alt="<?php echo esc_attr('play-button', 'widgetkit-pro'); ?>">
                            </a>
                        <?php endif;
                        ?>
                    </div>
                <?php endwhile; ?>
            <?php endif; ?>
        </div>
    <?php
    if($query->have_posts()):
        ?>
        <div class="cat-post-list-wrapper owl-carousel">
            <?php
            while($query->have_posts()):
                $query->the_post();
                $content = apply_filters( 'the_content', get_the_content() );
                $video = false;
                /**
                 * Only get video from the content if a playlist isn't present.
                 */
                if (false === strpos($content, 'wp-playlist-script')) {
                    $video = get_media_embedded_in_content($content, array('video', 'object', 'embed', 'iframe'));
                }
                if($video){
                    preg_match('/src="([^"]+)"/', $video[0], $match);
                    $url = $match[1];
                    $new_url = str_replace('embed/', 'watch?v=', $url);
                }else{
                    $new_url = '#';
                }
                ?>
                    <div data-rootId="<?php echo $this->get_id(); ?>"
                         data-id="<?php echo get_the_ID(); ?>"
                         data-featuredThumb="<?php echo $featured_thumbnail_size; ?>"
                         class="regular-post <?php echo ( 1 == $count ) ? 'active' : ''; ?>">
                        <div class="regular-post-wrapper <?php echo esc_html($regular_post_style); ?>">
                            <?php if(has_post_thumbnail()): ?>
                                <div class="post-thumb">
                                    <a href="<?php the_permalink(); ?>">
                                        <?php the_post_thumbnail($regular_thumbnail_size ); ?>
                                    </a>
                                    <?php
                                    if('video' == get_post_format(get_the_ID())):?>
                                        <a class="<?php echo $video[0] ? 'video-post-popup' : 'video-post-icon'; ?>"
                                           href="<?php echo $new_url ? $new_url : '#'; ?>">
                                            <img  src="<?php echo get_template_directory_uri(). '/dist/images/play-button-bold.png'; ?>" alt="<?php echo esc_attr('play-button', 'widgetkit-pro'); ?>">
                                        </a>
                                    <?php endif;
                                    ?>
                                </div>
                            <?php endif; ?>
                            <div class="post-data">
                                <div class="post-cat">
                                    <?php magmax_limited_cateory_with_seperator_for_elements(get_the_ID()); ?>
                                </div>
                                <div class="post-title">
                                    <a href="<?php the_permalink(); ?>" class="regular-post-title regular-title">
                                        <h3><?php magmax_title($title_word); ?></h3>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                <?php
                $count++;
            endwhile;
            wp_reset_postdata();
            ?>
        </div>
        <?php
    endif;
    ?>
    </div>
    <script>
        jQuery(function($){
            $('.video-post-popup').magnificPopup({
                disableOn: 700,
                type: 'iframe',
                mainClass: 'mfp-fade',
                removalDelay: 160,
                preloader: false,
                fixedContentPos: false
            });
            /**
             * Enable Carousel
             * =================
             */
            $(".dynamic-header-tab-2 .cat-post-list-wrapper").owlCarousel({
                pagination: true,
                dots:false,
                loop:true,
                items:<?php echo $post_column; ?>,
                nav: true,
                navClass: ['owl-carousel-left','owl-carousel-right'],
                navText: ['<i class="fa fa-angle-left fa-fw""></i>', '<i class="fa fa-angle-right fa-fw"></i>'],
                margin:15,
                autoplay:false,
                responsive:{
                    0:{
                        items:1
                    },
                    600:{
                        items:1
                    },
                    1000:{
                        items:<?php echo $post_column; ?>
                    }
                }
            });
        });
    </script>

    <?php  //wp_reset_query(); ?>
</div>