@extends('website.layout')

@section('title') {{$title}} @endsection
@section('meta') {{$meta}} @endsection

@section('content')
			
<!-- Team Section Start -->
<section class="team-wrap bg-sand">
                    <div class="container">
                        <div class="row" id="dynamic-list">
                   @include('website.lists.programs_list')
							  </div>
                     @if($total > 12)
    <div class="text-center mt-4">
        <button id="load-more" class="btn btn-primary-outline" data-page="2" >Load More</button>
    </div>
@endif
                    </div>
                </section>
                <!-- Team Section End -->


@endsection

@section('customjs')
<script>
$(document).ready(function() {
    $('#load-more').on('click', function() {
        var $button = $(this);
        var page = $button.data('page');
        $button.text('Loading...').prop('disabled', true);

        $.ajax({
            url: "{{ route('programsPost') }}",
            type: "POST",
            data: {
                _token: "{{ csrf_token() }}",
                page: page
            },
            success: function(response) {
                if (response.html) {
                    $('#dynamic-list').append(response.html);
                    page++; 
                    $button.data('page', page); 
                    if (response.hasMore) {
                        $button.text('Load More').prop('disabled', false);
                    } else {
                        $button.hide(); 
                    }
                } else {
                    $button.hide();
                }
            },
            error: function() {
                $button.text('Load More').prop('disabled', false);
                alert('Error loading more events.');
            }
        });
    });
});
</script>
@endsection