@extends('frontend.layouts.app')
@section('page_title', 'Ignite School System Blogs – Shaping Future-Ready Learners')
@section('description', 'Discover how IGSS blends technology with student-centered learning. Read our latest articles on academic excellence, creative arts, and personal growth for kids.')
@section('keywords', 'IGSS blogs,School news IGSS,Latest IGSS articles and posts')
@section('content')
    {{--    Banner Section  --}}
    <div class="container-fluid p-0 hero-section-about-page">
        <div class="position-relative w-100" style="height: 380px;" data-aos="fade-down" data-aos-delay="200">
            <img src="{{ asset('assets/img/g_img-2.jpg') }}" alt="Breadcrumb" class="w-100 h-100 object-fit-cover">
            <div
                class="position-absolute top-0 start-0 w-100 h-100 d-flex flex-column justify-content-center align-items-center text-center"
                style="background: rgba(0, 47, 108, 0.85);">
                <div class="position-absolute text-start banner-text">
                    <p class="h1 text-white fw-bold m-0">Blogs</p>
                </div>
            </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 class="fw-bold" style="color: var(--theme-color)">IGSS Blogs – Educational Insights, Student Life & Learning Tips</h1>
                <p style="font-size: 20px; text-align: center">Welcome to the IGSS Blog. Discover expert educational advice, school updates, and tips
                    for student success. From modern teaching methods to personal growth, we empower the leaders of tomorrow.</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($blogs as $blog)
                    <div class="col-lg-3 col-md-4 blog-item">
                        <div class="single-blog">
                            <a href="{{route('blog.show',$blog['slug'])}}"
                               class="blog-link"
                               data-blog-id="{{$blog['id']}}">
                                <img src="{{ $blog['image'] }}" alt="{{ $blog['title'] }}">
                            </a>
                            <div class="blog-content">
                                <h2 class="h6 blog-title">
                                    <a href="{{route('blog.show',$blog['slug'])}}"
                                       class="text-black blog-link fw-bold text-decoration-none"
                                       data-blog-id="{{$blog['id']}}">
                                        {{$blog['title']}}
                                    </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('footer-scripts')
    <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') }}',
                    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') }}',
                    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