@section('title', 'GIU Blog | Stay Updated with Campus Life')
@section('description', 'GIU Blog shares  campus life.')
@section('keywords', 'GIU Blog, GIU Student Achievements News, Blog')
@section('tags', 'GIU Blog, GIU Student Achievements News, Blog')
@extends('front.new.layouts.app')
@section('content')
    {{--    Banner Section  --}}
    <div class="container-fluid p-0">
        <div class="position-relative d-flex align-items-center banner-wrapper">
            <img src="{{'front/images/new-giu/news-events/giu-blog-banner.png'}}"
                 class="img-fluid w-100 banner-img"
                 alt="Blogs Banner">

            <div class="position-absolute text-start banner-text">
                <p class="h1 text-white fw-bold m-0">Blogs</p>
            </div>
        </div>
    </div>
    {{--End of Banner Section--}}
    <!-- Start Blog Area -->
    <div class="blog-area pt-5 pb-5">
        <div class="container">
            <div class="section-title-blog">
                <h1 style="color: var(--green)">Blog</h1>
                <p style="font-size: 20px">See our latest news blog</p>
            </div>
            <!-- Search Bar -->
            <div class="blog-search-wrapper my-4">
                <div class="blog-search-box">
                    <i class="ri-search-line search-icon"></i>
                    <input type="text" id="blogSearch" placeholder="Search blogs...">
                    <i class="ri-close-line clear-icon" id="clearSearch"></i>
                </div>
            </div>

            <div class="row text-center text-md-start" id="blogList">
                @foreach($record as $news)
                    <div class="col-lg-3 col-md-4 blog-item">
                        <div class="single-blog">
                            <a href="{{route('blog-details',$news->slug)}}"
                               class="blog-link"
                               data-blog-id="{{$news->id}}">
                                <img src="{{ URL('/') }}/front/images/new-giu/blog/{{ $news->img }}" alt="">
                            </a>
                            <div class="blog-content">
                                <h2 class="h6 blog-title">
                                    <a href="{{route('blog-details',$news->slug)}}"
                                       class="text-black blog-link fw-bold"
                                       data-blog-id="{{$news->id}}">
                                        {{$news->name}}
                                    </a>
                                </h2>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

            <div class="text-center py-4" id="loadingIndicator" style="display: none;">
                <div class="spinner-border text-primary" role="status">
                    <span class="visually-hidden">Loading...</span>
                </div>
                <p class="mt-2">Loading more blogs...</p>
            </div>

            <div class="text-center py-4" id="noMoreBlogs" style="display: none;">
                <p class="text-muted"></p>
            </div>

            <div class="text-center py-4" id="noResults" style="display: none;">
                <p class="text-muted"></p>
            </div>

        </div>
    </div>
    <!-- End Blog Area -->
@endsection
@push('js')
    <script>
        $(function () {
            $('.is_active_event').addClass('active');
        });
    </script>

    <script>
        $(document).ready(function () {
            let searchInput = $("#blogSearch");
            let clearBtn = $("#clearSearch");
            let page = 1;
            let loading = false;
            let hasMore = true;
            let searchQuery = '';
            let searchTimeout;


            $(document).on('click', '.blog-link', function(e) {
                e.preventDefault();

                let blogId = $(this).data('blog-id');
                let blogUrl = $(this).attr('href');

                $.ajax({
                    url: '{{ route('blog.track-view') }}',
                    type: 'POST',
                    data: {
                        blog_id: blogId,
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        console.log('View tracked successfully');
                    },
                    error: function(xhr, status, error) {
                        console.error('Error tracking view:', error);
                    },
                    complete: function() {
                        // Navigate to blog details page after tracking
                        window.location.href = blogUrl;
                    }
                });
            });

            // ========================================
            // SEARCH FUNCTIONALITY
            // ========================================
            searchInput.on("keyup", function () {
                let value = $(this).val().trim();

                clearTimeout(searchTimeout);

                if (value.length > 0) {
                    clearBtn.show();
                } else {
                    clearBtn.hide();
                }

                searchTimeout = setTimeout(function() {
                    searchQuery = value;
                    performSearch();
                }, 500);
            });

            clearBtn.on("click", function () {
                searchInput.val("");
                searchQuery = '';
                clearBtn.hide();
                performSearch();
            });

            function performSearch() {
                page = 1;
                loading = false;
                hasMore = true;

                $("#noMoreBlogs").hide();
                $("#noResults").hide();
                $("#blogList").css('opacity', '0.5');
                $("#loadingIndicator").show();

                $.ajax({
                    url: '{{ route('blog-post') }}',
                    type: 'GET',
                    data: {
                        search: searchQuery,
                        page: 1
                    },
                    headers: { 'X-Requested-With': 'XMLHttpRequest' },
                    success: function (response) {
                        $("#loadingIndicator").hide();
                        $("#blogList").css('opacity', '1');

                        if (response.html && response.html.trim() !== '') {
                            // Only replace the HTML once we actually have the response
                            $("#blogList").html(response.html);
                            hasMore = response.hasMore;

                            if (!hasMore && response.count > 0) {
                                $("#noMoreBlogs").show();
                            }
                        } else {
                            $("#blogList").empty(); // Only empty if there are truly no results
                            $("#noResults").show();
                            hasMore = false;
                        }
                    },
                    error: function (xhr, status, error) {
                        $("#loadingIndicator").hide();
                        $("#blogList").css('opacity', '1');
                        console.error('Error searching blogs:', error);
                        $("#blogList").html('<div class="col-12"><p class="text-danger text-center">Error loading blogs.</p></div>');
                    }
                });
            }

            // ========================================
            // INFINITE SCROLL
            // ========================================
            $(window).scroll(function () {
                if (loading || !hasMore) {
                    return;
                }

                if ($(window).scrollTop() + $(window).height() >= $(document).height() - 300) {
                    loadMoreBlogs();
                }
            });

            function loadMoreBlogs() {
                loading = true;
                page++;

                $("#loadingIndicator").show();

                $.ajax({
                    url: '{{ route('blog-post') }}',
                    type: 'GET',
                    data: {
                        page: page,
                        search: searchQuery
                    },
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    },
                    success: function (response) {
                        if (response.html && response.html.trim() !== '') {
                            $("#blogList").append(response.html);
                            hasMore = response.hasMore;

                            if (!hasMore) {
                                $("#noMoreBlogs").show();
                            }
                        } else {
                            hasMore = false;
                            $("#noMoreBlogs").show();
                        }
                    },
                    error: function (xhr, status, error) {
                        console.error('Error loading blogs:', error);
                        hasMore = false;

                        // Show error message to user
                        $("#loadingIndicator").hide();
                        if (page > 1) {
                            $("#noMoreBlogs").html('<p class="text-danger">Error loading blogs. Please try again.</p>').show();
                        }
                    },
                    complete: function () {
                        $("#loadingIndicator").hide();
                        loading = false;
                    }
                });
            }
        });
    </script>
@endpush