<section class="block ad-list-block">

    <div class="container">
        <div class="<?php if (get_theme_mod( 'charsoogh_ad_title_style' )) : echo get_theme_mod( 'charsoogh_ad_title_style'); else: echo 'section-title'; endif; ?> clearfix">
        <h2><?php if (get_theme_mod( 'charsoogh_ad_title' )) : echo get_theme_mod( 'charsoogh_ad_title'); else: echo __('Latest ads' , 'charsoogh'); endif; ?></h2>
        </div>
        <?php
        if (get_theme_mod( 'charsoogh_ad_index_show' )) : $ad_show = get_theme_mod( 'charsoogh_ad_index_show');
        else: $ad_show = 12;
        endif;
        $paged = 1;
        $args = array('post_type' => 'product' , 'post_status' => 'publish' ,'posts_per_page' => $ad_show , 'paged' => $paged , 'no_paging' => false );
        $wp_query = new WP_Query($args);
        ?>
        <?php if ( $wp_query->have_posts() ) : ?>
        <ul class="row items ad-listing">
            <?php while ( $wp_query->have_posts() ) : $wp_query->the_post(); ?>
            <?php wc_get_template_part( 'content', 'product' ); ?>
            <?php endwhile; ?>
         </ul>
       <?php else: ?>
       <p><?php _e('Sorry, the ad is not available' , 'charsoogh'); ?></p>
       <?php endif; ?>
         <?php if ( $wp_query->have_posts() ) : ?>
         <?php if($wp_query->max_num_pages != $paged): ?>
        <div class="center ad-load-more">
          <div class="ad-loading"><div class="ad-loader-show"></div></div>
            <div class="btn btn-primary btn-framed btn-rounded loadmore">
            <?php if (get_theme_mod( 'charsoogh_ad_more_text' )) : echo get_theme_mod( 'charsoogh_ad_more_text'); else: echo __('More Ad...' , 'charsoogh'); endif; ?>
            </div>
        </div>
      <?php endif; ?>
      <?php endif; ?>
    </div>

</section>

<script>
var ajaxurl = "<?php echo admin_url( 'admin-ajax.php' ); ?>";
var page = 2;
jQuery(function($) {
    $('body').on('click', '.loadmore', function() {
      jQuery(".ad-loading").css("display", "block");
      jQuery(".loadmore").hide();
        var data = {
            'action': 'load_posts_by_ajax',
            'page': page,
            'security': '<?php echo wp_create_nonce("load_more_posts"); ?>'
        };

        $.post(ajaxurl, data, function(response) {
            $('.ad-listing').append('<span class="scroll-span"></span>');
            $('.ad-listing').append(response);
            var allSelects = document.getElementsByClassName("scroll-span");
            var lastSelect = allSelects[allSelects.length-1];
            lastSelect.scrollIntoView(true);
            page++;
            $('[data-toggle="tooltip"]').tooltip();
            $(".ribbon-featured").each(function() {
                var thisText = $(this).text();
                $(this).html("");
                $(this).append(
                    "<div class='ribbon-start'></div>" +
                    "<div class='ribbon-content'>" + thisText + "</div>" +
                    "<div class='ribbon-end'>" +
                        "<figure class='ribbon-shadow'></figure>" +
                    "</div>"
                );
            });
            jQuery(".ad-loading").css("display", "none");
            jQuery(".loadmore").show();
        });
    });
});
</script>
