@extends('site.layouts.app')

@section('title', 'Trainings')

{{-- SEO Start  --}}

{{-- SEO End  --}}

@section('content')


    <section class="page12-banner">
        <div class="container-fluid px-0">

            <div class="bg1">
                <div class="col-lg-7 page-12-banner">
                    <h1 class="big">Trainings</h1>
                </div>

            </div>
            <div class="brd-crms">
                <div class="container">
                    <nav aria-label="breadcrumb ">
                        <ol class="breadcrumb align-items-baseline ps-4">

                            <li class="breadcrumb-item active" aria-current="page">Home</li>
                            <li class="breadcrumb-item ps-1"><a href="{{ route('home.blogs') }}">Trainings</a></li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>

    </section>


    <section class="page13-blogs">
        <div class="container">
            <div class="row py-50 page12-blogs-inner" id="blog-list">
                @if (count($allblogs) > 0)
                    @foreach ($allblogs as $item)
                        <div class="col-lg-4 mb-0">
                            <div class="page13-box1">
                                <a href="{{ route('blog.details', $item->slug) }}"><img class="img-fluid"
                                        src="{{ asset($item->image) }}" alt="{{ $item->title}}"></a>
                                <div class="date d-flex align-items-center py-2">
                                    <i class="fa fa-calendar-days"
                                        style="font-size: 13px;color:#ff9b26;margin-right: 8px;"></i>
                                    <p><strong>{{ $item->created_at->format('d') }}</strong>
                                        {{ $item->created_at->format('M') }}</p>
                                </div>
                                <div class="page13-content">
                                    <p> <a href="{{ route('blog.details', $item->slug) }}"
                                            class="page13-conten-hding">{{ $item->title }}</a></p>
                                    <p style="font-size: 15px;">{!! Str::limit(strip_tags($item->description), 150) !!}</p>
                                    <div class="page13-btn2">
                                        <a href="{{ route('blog.details', $item->slug) }}">Read More <i
                                                class="fa fa-arrow-right"></i></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach

                    {{-- No blogs found message start --}}
                @else
                    <div class="col-12 text-center">
                        <p>No blogs found.</p>
                    </div>
                @endif
                {{-- No blogs found message End --}}

          </div>
      </div>
  </section>

    <div class="col-12 page13-load text-center">
        <a href="javascript:void(0);" id="load-more-btn">Load More</a>
    </div>
    <br>
    <script>
        $(document).ready(function() {
            var page = 2; // Initial page number

            var blogsPerPage = 3; // Number of blogs per page

            $("#load-more-btn").on("click", function() {
                $.ajax({
                    url: "{{ route('loadMoreBlogs') }}",
                    method: "GET",
                    data: {
                        page: page
                    },
                    success: function(data) {
                        if (data.html) {
                            // Append new blogs below the "Load More" button
                            $("#blog-list").append(data.html);
                            page++; // Increment the page number
                            checkLoadMoreVisibility();
                        } else {
                            // No more blogs to load, hide the load more button
                            // $("#load-more-btn").hide();
                            $("#load-more-btn").text("No more blogs").attr("disabled", true);

                        }
                    },
                });
            });

            // // Check if there are no blogs on page load
            var noBlogs = {{ count($allblogs) }} === 0;
            if (noBlogs) {
                $("#load-more-btn").hide(); // Hide the "Load More" button initially
            }

            function checkLoadMoreVisibility() {
            var totalBlogs = {{ $allblogs->total() }}; // Total count of blogs
            var displayedBlogs = $("div#blog-list > div.col-lg-4").length; // Currently displayed blogs

            if (displayedBlogs >= totalBlogs) {
                $("#load-more-btn").hide(); // Hide if all blogs are displayed
            } else if (displayedBlogs % blogsPerPage !== 0) {
                $("#load-more-btn").text("No more blogs").attr("disabled", true); // Show a message if remaining blogs are less than a full page
            }
        }

        checkLoadMoreVisibility(); // Check button visibility on initial load

        });
    </script>

@endsection