

<?php $__env->startSection('content'); ?>
<?php use Carbon\Carbon; ?>

<section class="blog-content">
    <div class="posts" id="postsContainer">
        <?php $__currentLoopData = $titles; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $title): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
        <div class="post-card">
            <img src="<?php echo e($title->image ? asset($title->image) : asset('assets/images/banner/1.jpg')); ?>" alt="Blog Image">
            <a href="<?php echo e(route('blog.details', $title->slug)); ?>" class="post-title"><?php echo e($title->title); ?></a>
            <span class="category"><?php echo e($title->category->name); ?></span>
            <p class="excerpt">
                <?php if($title->headings->isNotEmpty()): ?>
                    <?php echo e(Str::limit($title->headings->first()->paragraphs->first()->content, 100)); ?>

                <?php else: ?>
                    No content available.
                <?php endif; ?>
            </p>
            <a href="<?php echo e(route('blog.details', $title->slug)); ?>" class="read-more">Read more →</a>
        </div>
        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
    </div>

    <div class="load-more text-center mt-4">
        <div id="loader" style="display:none;" class="text-center mt-3">
    <img src="" alt="Loading...">
    <!--<img src="<?php echo e(asset('assets/images/loader.gif')); ?>" alt="Loading...">-->
</div>

        <button id="loadMoreBtn" data-offset="<?php echo e(count($titles)); ?>" class="btn btn-primary">Load More</button>
    </div>
</section>
<!--<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>-->

<script>
    $('#loadMoreBtn').on('click', function () {
    const button = $(this);
    const offset = button.data('offset');

    $('#loader').show(); // Show loader

    $.ajax({
        url: '<?php echo e(route("blog.loadMore")); ?>',
        method: 'GET',
        data: { offset: offset },
        success: function (response) {
            $('#loader').hide(); // Hide loader

            if (response.posts.length === 0) {
                button.hide();
                $('#postsContainer').append('<p class="text-center text-muted mt-3">No more posts to load.</p>');
                return;
            }

            response.posts.forEach(post => {
                const postCard = `
                    <div class="post-card">
                        <img src="${post.image}" alt="Blog Image">
                        <a href="${post.url}" class="post-title">${post.title}</a>
                        <span class="category">${post.category}</span>
                        <p class="excerpt">${post.excerpt}</p>
                        <a href="${post.url}" class="read-more">Read more →</a>
                    </div>
                `;
                $('#postsContainer').append(postCard);
            });

            button.data('offset', offset + response.posts.length);
        },
        error: function (xhr, status, error) {
            $('#loader').hide(); // Hide loader on error
            console.error("AJAX Error: ", xhr.responseText);
            alert('Something went wrong while loading more posts.');
        }
    });
});

</script>



<?php $__env->stopSection(); ?>
<?php echo $__env->make('frontend.layouts.main', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH /home/ewx7upyjsani/public_html/androidwale.com/resources/views/index.blade.php ENDPATH**/ ?>