@extends('client.layouts.app')
@section('content')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
   $(document).ready(function () {
    // Initialize nextPage
    var nextPage = 2;

    // Function to load more blogs
    function loadMoreBlogs(page) {
        $.ajax({
            url: '{{ route('load-more-blogs') }}',
            type: 'GET',
            data: { page: page },
            success: function (data) {
                // Append new blogs before the "View More" button
                $('#blog-list').append(data);
                // Increment nextPage
                nextPage++;
                // Update the "View More" button data attribute
                $('#load-more').data('page', nextPage);
            }
        });
    }

    // Click event for "View More" button
    $('#load-more').click(function () {
        // Use nextPage for the current click
        loadMoreBlogs(nextPage);
    });
});

</script>


<section class="about top-section blog-top">
    
    <div class="container">
        <div class="row">
            <div class="col-md-6 mx-auto text-center">
                <div class="title">
                    <h2>Our <b> Blogs</b></h2>
                    <p>Explore Startup Movers Blog for key insights and tips on entrepreneurship, financial management, and business growth strategies for startups and SMEs.</p>
<!--
                    <div class="banner_form mt-4">
                        <form>
                            <input type="text" class="form-control" name="" placeholder="Search Here">
                            <button class="btn btn-primary">Search</button>
                        </form>
                    </div>
-->
                </div>
            </div>
        </div>
    </div>
    
</section>

<section class="pt-0 blog-grid">
	<div class="container">
    <div class="row blog-grid-row" id="blog-list">
            @include('client.pages.services.blog_entries')
        </div>
		<div class="row">

		<div class="col-md-12 text-center">
			<button class="btn btn-outline-primary blog-view-more" id="load-more" data-page="2"> VIEW MORE</button>
			</div>
		</div>

	</div>
</section>

@endsection