@extends('frontend.layouts.main')

@section('content')
<main class="home">
    <!-- Banner Section -->
    <section class="lyt-section bs-banner blog-banner typ-light-bg-background">
        <div class="container">
            <div class="row typ-align-center">
                <div class="col-lg-6">
                    <div class="text-wrapper">
                        <h1 class="bs-heading typ-blog-banner-font mrgB15"><span class="green-text">Blog</span> Hub
                        </h1>
                        <p class="bs-para">Your go-to source for education, and career insights: driving success for students and institutions alike.
                        </p>
                    </div>
                </div>
                <div class="col-lg-6 typ-img-flexCenter">
                    <img src="assets/images/blog/adobe.png" class="img-fluid" alt="blog">
                </div>
            </div>
        </div>
    </section>

    <!-- Second Section -->
    <section class="lyt-section typ-opportunities" id="scroll">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="bs-form">
                        <div class="input-group">
                            <input type="text" class="form-control serchbox-clr" id="searchblog"
                                placeholder="What are you looking for ?" aria-label="Recipient's username"
                                aria-describedby="button-addon4">
                            <div class="search-logo">
                                <a href="#" class="typ-searchbtn"><span class="icon icon-search"></span></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row g-4" id="resource-container">
                @foreach($blogs as $blog)
                <div class="col-lg-3 col-md-4">
                    <a class="bs-card typ-blog-card" href="{{ route('blog.detail',[$blog->slug])}}">
                        <div class="blog-card-img">
                            <img src="{{$blog->thumbnail_image}}" class="blog-img img-fluid" alt="blog-img">
                        </div>
                        <div class="card-body blog-body">
                            <div class="date-time-detail">
                                <p class="date">{{date('M d, Y', strtotime($blog->postdate))}}</p>
                                <p class="reading-time">{{$blog->reading_time}}min read</p>
                            </div>
                            <div class="card-title">
                                <p class="title-txt">{{ Illuminate\Support\Str::limit(strip_tags($blog->title),
                                    $limit = 50, $end = '...') }}</p>
                            </div>
                            <div class="card-desc">
                                <p class="desc-txt">{{ Illuminate\Support\Str::limit(strip_tags($blog->description),
                                    $limit = 100, $end = '...') }}</p>
                            </div>
                        </div>
                    </a>
                </div>
                @endforeach

            </div>

            <div class="row" id="paginationHide">
                            <div class="col-md-12 text-center ">
                            <button id="loadMoreBtn" class="bs-btn typ-theme-V2" style="margin-top: 10px;">Load More</button>
                                <!-- <nav class="bs-pagination" aria-label="Page navigation example">
                                    <ul class="pagination justify-content-end">
                                        <li class="page-item">{{$blogs->links()}}</li>
                                        </li>
                                    </ul>
                                </nav> -->
                            </div>
                        </div>

        </div>
    </section>


</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $('#searchblog').keyup(function () {
            var term = $(this).val();
            console.log("term>>>", term);

            $.ajax({
                url: "{{ route('getrblogsearch.data') }}",
                method: 'POST',
                data: { term: term },
                success: function (response) {
                    if (response.status == 200) {
                        console.log(' response:', response);
                        if (response.pagination == '') {
                            // alert("csscs");
                            $("#paginationHide").hide();
                            updateJobContainer(response);
                        } else {
                            $("#paginationHide").show();
                            updateJobContainerpagination(response, response.pagination);
                        }
                    } else {
                        $('#resource-container').html('Data Not Found');
                        $("#paginationHide").hide();
                    }
                },
                error: function (error) {
                    console.error('AJAX error:', error);
                }
            });

        });
    });
    let currentPage = 1;

$(document).ready(function () {
    $('#loadMoreBtn').on('click', function () {
        currentPage++; // Increment the current page
        performAjaxRequest(currentPage);
    });
});   
function performAjaxRequest(page) {
    $.ajax({
        url: "{{ route('getblogsdd.data') }}",
        method: 'POST',
        data: {
            page: page,
            _token: '{{ csrf_token() }}'
        },
        success: function (response) {
            if (response.status == 200) {
                console.log('Response:', response);
                updateBlogContainer(response);

                // Check if the last page has been reached
                if (response.data.data.length < 12) { // Assuming 12 is your pagination size
                    $('#loadMoreBtn').hide(); // Hide the "Load More" button
                }
            } else {
                $('#resource-container').html('Data Not Found');
                $('#loadMoreBtn').hide(); // Hide the "Load More" button if no data
            }
        },
        error: function (error) {
            console.error('AJAX error:', error);
            $('#loadMoreBtn').hide(); // Hide the "Load More" button on error
        }
    });
}


    function formatfostedDate(dateString) {
        var date = new Date(dateString);
        var options = { month: 'long', day: 'numeric', year: 'numeric' };
        return date.toLocaleDateString('en-US', options);
    }

    function updateJobContainer(response) {
        // console.log("responseqqq>>>",response);
        var container = $('#resource-container');
        container.empty();
        var jobDetailsUrl = @json(route('blog.detail', ['slug_placeholder']));

        response.data.data.forEach(function (item) {
            var plainTextDescription = item.description.replace(/<[^>]*>?/gm, '');
            var truncatedDescription = plainTextDescription.length > 100 ? plainTextDescription.substring(0, 100) + '...' : plainTextDescription;

            var plainTextTitle = item.title.replace(/<[^>]*>?/gm, '');
            var truncatedTitle = plainTextTitle.length > 50 ? plainTextTitle.substring(0, 50) + '...' : plainTextTitle;

            var cardHtml = '<div class="col-lg-3 col-md-4">' +
                '<a class="bs-card typ-blog-card" href="' + jobDetailsUrl.replace('slug_placeholder', item.slug) + '">' +
                '<div class="blog-card-img">' +
                '<img src="' + item.thumbnail_image + '" class="blog-img img-fluid" alt="blog-img">' +
                '</div>' +
                '<div class="card-body blog-body">' +
                '<div class="date-time-detail">' +
                '<p class="date">' + formatfostedDate(item.postdate) + '</p>' +
                '<p class="reading-time">' + item.reading_time + 'min read </p>' +
                '</div>' +
                '<div class="card-title">' +
                '<p class="title-txt">' + truncatedTitle + '</p>' +
                '</div>' +
                '<div class="card-desc">' +
                '<p class="desc-txt">' + truncatedDescription + '</p>' +
                '</div>' +
                '</div>' +
                '</a>' +
                '</div>';

            container.append(cardHtml);

        });
    }

    function updateBlogContainer(response) {
        // console.log("responseqqq>>>",response);
        var container = $('#resource-container');
        container.empty();
        var jobDetailsUrl = @json(route('blog.detail', ['slug_placeholder']));

        response.data.data.forEach(function (item) {
            var plainTextDescription = item.description.replace(/<[^>]*>?/gm, '');
            var truncatedDescription = plainTextDescription.length > 100 ? plainTextDescription.substring(0, 100) + '...' : plainTextDescription;

            var plainTextTitle = item.title.replace(/<[^>]*>?/gm, '');
            var truncatedTitle = plainTextTitle.length > 50 ? plainTextTitle.substring(0, 50) + '...' : plainTextTitle;
            var cardHtml = '<div class="col-lg-3 col-md-4">' +
                '<a class="bs-card typ-blog-card" href="' + jobDetailsUrl.replace('slug_placeholder', item.slug) + '">' +
                '<div class="blog-card-img">' +
                '<img src="' + item.thumbnail_image + '" class="blog-img img-fluid" alt="blog-img">' +
                '</div>' +
                '<div class="card-body blog-body">' +
                '<div class="date-time-detail">' +
                '<p class="date">' + formatfostedDate(item.postdate) + '</p>' +
                '<p class="reading-time">' + item.reading_time + 'min read </p>' +
                '</div>' +
                '<div class="card-title">' +
                '<p class="title-txt">' + truncatedTitle + '</p>' +
                '</div>' +
                '<div class="card-desc">' +
                '<p class="desc-txt">' + truncatedDescription + '</p>' +
                '</div>' +
                '</div>' +
                '</a>' +
                '</div>';

            container.append(cardHtml);

        });
        $('html, body').animate({
        scrollTop: $('#scroll').offset().top
    }, 1000);
    }

    function updateJobContainerpagination(response, pagination) {
        // console.log("responseqqq>>>",response);
        var container = $('#resource-container');
        container.empty();
        var jobDetailsUrl = @json(route('blog.detail', ['slug_placeholder']));

        response.data.data.forEach(function (item) {
            var plainTextDescription = item.description.replace(/<[^>]*>?/gm, '');
            var truncatedDescription = plainTextDescription.length > 100 ? plainTextDescription.substring(0, 100) + '...' : plainTextDescription;

            var plainTextTitle = item.title.replace(/<[^>]*>?/gm, '');
            var truncatedTitle = plainTextTitle.length > 50 ? plainTextTitle.substring(0, 50) + '...' : plainTextTitle;
            
            var cardHtml = '<div class="col-lg-3 col-md-4">' +
                '<a class="bs-card typ-blog-card" href="' + jobDetailsUrl.replace('slug_placeholder', item.slug) + '">' +
                '<div class="blog-card-img">' +
                '<img src="' + item.thumbnail_image + '" class="blog-img img-fluid" alt="blog-img">' +
                '</div>' +
                '<div class="card-body blog-body">' +
                '<div class="date-time-detail">' +
                '<p class="date">' + formatfostedDate(item.postdate) + '</p>' +
                '<p class="reading-time">' + item.reading_time + 'min read </p>' +
                '</div>' +
                '<div class="card-title">' +
                '<p class="title-txt">' + truncatedTitle + '</p>' +
                '</div>' +
                '<div class="card-desc">' +
                '<p class="desc-txt">' + truncatedDescription + '</p>' +
                '</div>' +
                '</div>' +
                '</a>' +
                '</div>';

            container.append(cardHtml);

        });
        $('.bs-pagination ul').html($(pagination).html());
    }

    function updateBlogContainerpagination(response, pagination) {
        // console.log("responseqqq>>>",response);
        var container = $('#resource-container');
        container.empty();
        var jobDetailsUrl = @json(route('blog.detail', ['slug_placeholder']));

        response.data.data.forEach(function (item) {
            var plainTextDescription = item.description.replace(/<[^>]*>?/gm, '');
            var truncatedDescription = plainTextDescription.length > 100 ? plainTextDescription.substring(0, 100) + '...' : plainTextDescription;

            var plainTextTitle = item.title.replace(/<[^>]*>?/gm, '');
            var truncatedTitle = plainTextTitle.length > 50 ? plainTextTitle.substring(0, 50) + '...' : plainTextTitle;

            var cardHtml = '<div class="col-lg-3 col-md-4">' +
                '<a class="bs-card typ-blog-card" href="' + jobDetailsUrl.replace('slug_placeholder', item.slug) + '">' +
                '<div class="blog-card-img">' +
                '<img src="' + item.thumbnail_image + '" class="blog-img img-fluid" alt="blog-img">' +
                '</div>' +
                '<div class="card-body blog-body">' +
                '<div class="date-time-detail">' +
                '<p class="date">' + formatfostedDate(item.postdate) + '</p>' +
                '<p class="reading-time">' + item.reading_time + 'min read </p>' +
                '</div>' +
                '<div class="card-title">' +
                '<p class="title-txt">' + truncatedTitle + '</p>' +
                '</div>' +
                '<div class="card-desc">' +
                '<p class="desc-txt">' + truncatedDescription + '</p>' +
                '</div>' +
                '</div>' +
                '</a>' +
                '</div>';

            container.append(cardHtml);

        });
        $('.bs-pagination ul').html($(pagination).html());
        $('html, body').animate({
        scrollTop: $('#scroll').offset().top
    }, 1000);
    }

    $(document).ready(function () {
        $(document).on('click', '.pagination a', function(event) {
            event.preventDefault();
            $('.pagination a').removeClass('active'); // Remove active class from all pagination links
            $(this).addClass('active');
            var page = $(this).attr('href').split('page=')[1];
            currentPage = page;
            performAjaxRequest(currentPage);
        });
    });

</script>
@endsection