<?php
/*
* Template Name: Blog List
*
* */
get_header(); ?>
    <section class="featured">
        <h3>Featured</h3>
        <?php
        $args = array( 'post_type' => 'post', 'posts_per_page' => 6 );
        $the_query = new WP_Query( $args );
        ?>
        <ul class="featured_ul">
            <?php if ( $the_query->have_posts() ) : ?>
            <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
                    <?php if (get_field('featured_post') == 'Yes'): ?>
                        <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
                    <?php endif; ?>
            <?php endwhile; ?>
            <?php endif; ?>
            <?php wp_reset_postdata(); ?>
        </ul>
        <?php
        if( have_rows('featured') ): ?>
            <ul class="featured_ul">
                <?php while ( have_rows('featured') ) : the_row(); ?>
                    <li><?php the_sub_field('fear_list'); ?></li>
                <?php endwhile; ?>
            </ul>
        <?php endif;
        wp_reset_postdata();
        ?>
    </section>
    <section class="blog_tabsec">
        <ul class="nav nav-tabs owl-carousel">
            <li class="sub-menu active" data-val="0"><a href="javascript:void(0)" >All Articles</a></li>
            <?php
                $post_cat = get_categories( array( 'taxonomy'   => 'category', 'hide_empty' => 0 ));
                //print_r($post_cat);
                foreach ($post_cat as $key => $value) {
                    echo '<li class="sub-menu" data-val="'.$value->term_id.'" ><a href="javascript:void(0);" >'.$value->name.'</a></li>';
                }
            ?>
            <!-- <li class="active"><a href="javascript:void(0)" data-val="all">All Articles</a></li>
            <li><a href="javascript:void(0)" data-val="Bitcoin">Bitcoin</a></li>
            <li><a href="javascript:void(0)" data-val="Featured">Featured</a></li>
            <li><a href="javascript:void(0)" data-val="Events">Events</a></li>
            <li><a href="javascript:void(0)" data-val="LITECOIN">LITECOIN</a></li>
            <li><a href="javascript:void(0)" data-val="OPINION">OPINION</a></li>
            <li><a href="javascript:void(0)" data-val="RESEARCH">RESEARCH</a></li>
            <li><a href="javascript:void(0)" data-val="RESEARCH1">RESEARCH1</a></li> -->
        </ul>
        <!-- Tab panes -->
        <div class="tab-content">
            <?php
                $page_for_posts = 5;
                $default_posts_per_page = 5;
                $paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;

                $args = array(
                    'post_type' => 'post',
                    'paged' => $paged,
                    'posts_per_page' => 5,
                );

                $my_posts = new WP_Query( $args );
                ?>
                <div id="main_content">
                    <?php
                    //print_r( $my_posts );
                    if ( $my_posts->have_posts() ) :
                        ?>

                        <?php while ( $my_posts->have_posts() ) : $my_posts->the_post();
                            //get_template_part( 'template-parts/content', get_post_format() );
                            ?>
                                <div class="blog_tablist all">
                                    <span class="b_date"><?php the_date(); ?></span>
                                    <a href="<?php the_permalink(); ?>"  class="title"><?php echo get_the_title(); ?></a>
                                    <?php the_excerpt(); ?>
                                    <ul class="blog_tag">
                                        <li>
                                            <div class="media">
                                                <div class="media-left">
                                                    <img src="<?= get_template_directory_uri(); ?>/img/b-man.png" alt=""/>
                                                </div>
                                                <div class="media-body">
                                                    <span><?php echo get_the_author_meta('first_name').' '.get_the_author_meta('last_name');?></span>
                                                </div>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="media">
                                                <div class="media-left">
                                                    <img src="<?= get_template_directory_uri(); ?>/img/b-folder.png" alt=""/>
                                                </div>
                                                <div class="media-body">
                                                    <span><?php
                                                        $category_detail=get_the_category();//$post->ID
                                                        foreach($category_detail as $cd){
                                                            echo $cd->cat_name;
                                                        }
                                                        ?></span>
                                                </div>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="media">
                                                <?php
                                                $tags = get_the_tags();
                                                if (!empty($tags)) : ?>
                                                    <div class="media-left">
                                                        <img src="<?= get_template_directory_uri(); ?>/img/b-tag.png" alt="tag-blue"/>
                                                    </div>
                                                    <div class="media-body">
                                                    <span>
                                                    <?php
                                                    $tagsCount = 1;
                                                    $numItems = count($tags);
                                                    foreach ( $tags as $tag ) { $tagsCount++;
                                                        $tag_link = get_tag_link( $tag->term_id ); ?>
                                                        <?php echo $tag->name; ?><?php if($numItems != $tagsCount - 1) { echo ","; } ?>

                                                        <?php
                                                    }
                                                    ?></span>
                                                    </div>
                                                <?php endif; ?>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            <?php
                        ?>
                        <?php endwhile ?>

                        <?php
                    endif;
                    ?>
                </div>
                    <?php
                if(  $my_posts->found_posts > $default_posts_per_page){ ?>
                    <div>
                        <input type="hidden" name="post_count" id="post_count" value="<?php echo $default_posts_per_page; ?>">
                        <input type="hidden" name="totalpost" id="totalpost" value="<?php echo wp_count_posts()->publish; ?>">
                        <input type="hidden" name="cat" id="cat" value="0">
                        <input type="hidden" name="pages" id="pages" value="1">

                    <div class="blog-load-more">
                        <div class="load_more" id="loadmore">
                            <button class="btn btn-default btn_theme">Load More</button><img style="display: none;" id="loader_img" src="<?php echo get_template_directory_uri().'/img/loading.gif'; ?>">
                        </div>
                    </div>
                </div>
                <?php }
            ?>
            <?php /*<div class="blog_tablist all Bitcoin active">
                <span class="b_date">Dec 3rd 2019</span>
                <a href="Blog_Detail.html" class="title">Sanctions Weren’t Discussed at North Korea Crypto Conference</a>
                <p>An Italian citizen who attended the North Korean cryptocurrency conference in April says the U.S. government’s charges against his friend and ethereum developer Virgil Griffith are overblown. </p>
                <ul class="blog_tag">
                    <li>
                        <div class="media">
                            <div class="media-left">
                                <img src="<?= get_template_directory_uri(); ?>/img/b-man.png" alt=""/>
                            </div>
                            <div class="media-body">
                                <span>David Johnstone</span>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="media">
                            <div class="media-left">
                                <img src="<?= get_template_directory_uri(); ?>/img/b-folder.png" alt=""/>
                            </div>
                            <div class="media-body">
                                <span>Events</span>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="media">
                            <div class="media-left">
                                <img src="<?= get_template_directory_uri(); ?>/img/b-tag.png" alt=""/>
                            </div>
                            <div class="media-body">
                                <span>Bitcoin, Conferance, Government</span>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="blog_tablist all">
                <span class="b_date">Nov 22nd 2019</span>
                <a href="#"  class="title">Welcoming Tony Sheng and The Next Steps For Multicoin Capital</a>
                <p>Today I’m excited to announce that Tony Sheng has joined Multicoin Capital as a Principal on the investment team.Back when Tushar and I met at NYU 11 years ago, we bonded</p>
                <ul class="blog_tag">
                    <li>
                        <div class="media">
                            <div class="media-left">
                                <img src="<?= get_template_directory_uri(); ?>/img/b-man.png" alt=""/>
                            </div>
                            <div class="media-body">
                                <span>Brian May</span>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="media">
                            <div class="media-left">
                                <img src="<?= get_template_directory_uri(); ?>/img/b-folder.png" alt=""/>
                            </div>
                            <div class="media-body">
                                <span>Business</span>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="media">
                            <div class="media-left">
                                <img src="<?= get_template_directory_uri(); ?>/img/b-tag.png" alt=""/>
                            </div>
                            <div class="media-body">
                                <span>Bitcoin, Conferance, Government</span>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="blog_tablist all">
                <span class="b_date">Nov 21st 2019</span>
                <a href="#"  class="title">The World Computer Should Be Logically Centralized</a>
                <p>Vitalik conceived Ethereum as the world computer: a single, composable, open, permissionless state machine that could run trust-minimized code. </p>
                <ul class="blog_tag">
                    <li>
                        <div class="media">
                            <div class="media-left">
                                <i class="fa fa-user"></i>
                            </div>
                            <div class="media-body">
                                <span>Jenny Shaw</span>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="media">
                            <div class="media-left">
                                <i class="fa fa-folder"></i>
                            </div>
                            <div class="media-body">
                                <span>Opinion</span>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="media">
                            <div class="media-left">
                                <i class="fa fa-tag"></i>
                            </div>
                            <div class="media-body">
                                <span>Bitcoin, Conferance, Government</span>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="blog_tablist Bitcoin">
                <span class="b_date">Nov 15th 2019</span>
                <a href="#"  class="title">Supporting Developers Building Web Scale Applications</a>
                <p>For developers, the value of properties #1 - 5 is clear. I’d like to highlight the importance of #6: having a single, global state that supports composable smart contracts.</p>
                <ul class="blog_tag">
                    <li>
                        <div class="media">
                            <div class="media-left">
                                <i class="fa fa-user"></i>
                            </div>
                            <div class="media-body">
                                <span>Rosa Lark</span>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="media">
                            <div class="media-left">
                                <i class="fa fa-folder"></i>
                            </div>
                            <div class="media-body">
                                <span>Programming</span>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="media">
                            <div class="media-left">
                                <i class="fa fa-tag"></i>
                            </div>
                            <div class="media-body">
                                <span>Bitcoin, Conferance, Government</span>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="blog_tablist Bitcoin">
                <span class="b_date">Nov 12th 2019</span>
                <a href="#"  class="title">The Separation of Time and State</a>
                <p>An Italian citizen who attended the North Korean cryptocurrency conference in April says the U.S. government’s charges against his friend and ethereum developer Virgil Griffith are overblown. </p>
                <ul class="blog_tag">
                    <li>
                        <div class="media">
                            <div class="media-left">
                                <i class="fa fa-user"></i>
                            </div>
                            <div class="media-body">
                                <span>David Johnstone</span>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="media">
                            <div class="media-left">
                                <i class="fa fa-folder"></i>
                            </div>
                            <div class="media-body">
                                <span>Events</span>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="media">
                            <div class="media-left">
                                <i class="fa fa-tag"></i>
                            </div>
                            <div class="media-body">
                                <span>Bitcoin, Conferance, Government</span>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>

            <div class="load_more">
                <button class="btn btn-default btn_theme">Load More</button>
            </div>*/ ?>
            <div class="text-center">
                <ul class="social_list">
                    <li>
                        <img src="<?= get_template_directory_uri(); ?>/img/ps-in.png" alt=""/> <span>linkedin.com</span>
                    </li>
                    <li>
                        <img src="<?= get_template_directory_uri(); ?>/img/ps-m.png" alt=""/> <span>medium.com</span>
                    </li>
                    <li>
                        <img src="<?= get_template_directory_uri(); ?>/img/ps-mail.png" alt=""/> <span>info@chromatic.capital</span>
                    </li>
                </ul>
            </div>
        </div>
    </section>
<script type="text/javascript">
var ajaxurl = "<?php echo admin_url( 'admin-ajax.php' ); ?>";

jQuery(document).ready(function(){
    jQuery('#loadmore').on('click', function() {
        var page = ( parseInt( jQuery('#pages').val()) + parseInt(1) );
        jQuery('#loader_img').show();
        var cat_id = parseInt(jQuery('#cat').val());
        var counts = parseInt(jQuery('#post_count').val())*(parseInt(page));
        var total_counts = parseInt(jQuery('#totalpost').val());
        var data = {
            'action': 'load_posts_cat',
            'cat' : cat_id,
            'page': page,
            'security': '<?php echo wp_create_nonce("load_more_posts"); ?>'
        };
        jQuery.post(ajaxurl, data, function(response) {
            jQuery('#loader_img').hide();
            var response_data = response.split('||');
            if(response_data[0]){
                console.log( response_data[0] );
                jQuery('#pages').val(page);
                jQuery('#main_content').append(response_data[0]);
                if(counts >= total_counts){
                    jQuery('#loadmore').hide();  
                }
                 if(counts >= response_data[1]){
                    jQuery('#loadmore').hide();  
                }
            }else{
                jQuery('#loadmore').hide();
            }   
            page++;
        });
    });
    jQuery( '.blog_tabsec li.sub-menu' ).on('click',function(){
        jQuery('#pages').val(1);
        jQuery('#loadmore').hide();  
        //jQuery('#loadmore').show();  
        var page = 1;
        var cat_id = jQuery(this).attr('data-val');
        var counts = parseInt(jQuery('#post_count').val())*(parseInt(page));
        var total_counts = parseInt(jQuery('#totalpost').val());
        var data = {
            'action': 'load_posts_cat',
            'cat' : cat_id,
            'page': page,
            'security': '<?php echo wp_create_nonce("load_more_posts"); ?>'
        };
        jQuery.post(ajaxurl, data, function(response) {
            var response_data = response.split('||');
            jQuery('#main_content').empty();
            if(response_data[0]){
                jQuery('#cat').val(cat_id);
                console.log( response_data[0] );
                console.log( response_data[1] );
                jQuery('#main_content').append(response_data[0]);

                if(counts > total_counts){
                    jQuery('#loadmore').hide();  
                }
                if(counts >= response_data[1]){
                    jQuery('#loadmore').hide();  
                }else{
                    jQuery('#loadmore').show();
                }
            }else{
                jQuery('#loadmore').hide();
            }
            page++;
        });
    });
});
</script>
<?php get_footer();