@extends('website.includes.layout')
@section('meta_title', $cms->meta_title ?? '')
@section('meta_keyword', $cms->meta_keyword ?? '')
@section('meta_description', $cms->meta_description ?? '')
@section('image', $cms->image ?? '')
@section('content')

@include('website.sections.breadcumb', [
   'heading' => $cms->heading,
   'pagename' => $cms->pagename,
   'breadcumb_image' => showImage($cms->image ?? '', $cms->image_webp ?? '')
])

<section class="blog-section-acs py-5">
    <div class="container">

        <!-- heading -->
        <div class="text-center mb-4">
        <h2 class="blog-title">{{ $home_settings->blog_heading ?? '' }}</h2>
            <p class="blog-sub text-center">{!!  $home_settings->blog_detail ?? '' !!}</p>
        </div>

  

<div class="row m-0" id="blogList">
    @include('website.sections.blogs', ['blogs' => $blogs])
</div>

<div class="text-center mt-4">
    <button id="loadMore" class="btn btn-primary px-4 py-2" data-page="1">
        Load More
    </button>
</div>


    </div>
</section>

@if(!empty($banner))
@include('website.sections.banner', ['banner' => $banner])
@endif
@endsection

@push('scripts') 
<script> 
$(document).ready(function () {
    $('#loadMore').on('click', function () {
        let btn = $(this);
        let page = btn.data('page') + 1;

        btn.prop('disabled', true).text('Loading...');

        $.ajax({
            url: "{{ route('blogs') }}", 
            method: "GET",
            data: { page: page },
            success: function (res) {
                if (res.html !== "") {
                    $("#blogList").append(res.html);
                    btn.data('page', page);
                }

                if (!res.hasMore) {
                    btn.hide();
                }

                btn.prop('disabled', false).text('Load More');
            },
            error: function () {
                btn.prop('disabled', false).text('Load More');
                alert("Something went wrong!");
            }
        });
    });
});
</script>
@endpush