@section('page_title', 'Blog – Education Tips and Updates | Aliz College')
@section('description', 'Read informative Blogs at Aliz College. Read articles on education, learning tips and student life to stay updated and grow your knowledge daily.')
@section('keywords',  'Education Tips, Education Updates ')
@section('tags', 'Education Tips, Education Updates')
@extends('frontend.layouts.app')
@section('content')

    <!-- Hero Section -->
{{--    <div id="admissionHeroCarousel" class="carousel slide" data-bs-ride="carousel" data-aos="fade-in" style="margin-top: 100px">--}}
{{--        <div class="carousel-inner">--}}
{{--            <div class="carousel-item-admission active">--}}
{{--                <img src="{{asset("assets/images/programs_hero.png")}}" class="hero-image d-block w-100"--}}
{{--                     alt="Banner Image">--}}
{{--                <div class="hero-gradient-overlay-program"></div>--}}
{{--                <div class="carousel-caption-admission text-start">--}}
{{--                    <div class="container">--}}
{{--                        <div class="row">--}}
{{--                            <div class="col-lg-6 col-md-8 col-sm-12">--}}
{{--                                <div class="hero-text-box" data-aos="fade-up" data-aos-delay="200">--}}
{{--                                    <h1 class="hero-title-text" data-aos="zoom-in" data-aos-delay="300">--}}
{{--                                        <span class="highlight" style="font-family: 'Poppins', sans-serif;">Stay updated with the latest news, insights, and stories from Aliz College</span>--}}
{{--                                    </h1>--}}
{{--                                </div>--}}
{{--                            </div>--}}
{{--                        </div>--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--            </div>--}}
{{--        </div>--}}
{{--    </div>--}}
    {{--Hero Section--}}

    <div class="container-fluid p-0" style="margin-top: 100px">
        <div class="position-relative d-flex align-items-center banner-wrapper">
            <img src="{{asset("assets/images/programs_hero.png")}}"
                 class="img-fluid w-100 banner-img"
                 alt="Blogs Banner">
            <div class="hero-gradient-overlay-program z-1"></div>

            <div class="position-absolute text-start banner-text z-3">
                <p class="h1 text-white fw-bold m-0">Blogs</p>
            </div>
        </div>
    </div>


    <!-- Blog Posts -->
    <section class="blog-section">
        <div class="container">

{{--            <div class="section-title">--}}
                <h1 class="h3 fw-bolder " style="color: #211C72">Aliz College Blogs – Education Tips & Student Experience and Career Advice</h1>
                <p style="text-align: justify">Explore Aliz college blogs to discover Education tips for students, student experiences, and career advice for students. Read helpful articles that support academic growth. Stay inspired with Blogs designed to guide your learning journey.</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="{{ !empty($blog->cover_image) ? asset('storage/' . $blog->cover_image) : 'https://images.unsplash.com/photo-1427504494785-3a9ca7044f45?w=600' }}"
                                    alt="">
                            </a>
                            <div class="blog-content">
                                <h2 class="h6 blog-title">
                                    <a href="{{route('blog.show',$blog->slug)}}"
                                       class="text-black blog-link text-decoration-none"
                                       data-blog-id="{{$blog->id}}">
                                        {{$blog->name}}
                                    </a>
                                </h2>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

{{--            <div class="row text-center text-md-start" id="blogList">--}}
{{--                @forelse($blogs as $blog)--}}

{{--                    <!-- Blog Card -->--}}
{{--                    <div class="col-lg-3 col-md-4 mb-3 blog-item">--}}
{{--                        <div class="single-blog">--}}
{{--                            <img src="{{ !empty($blog->cover_image) ? asset('storage/' . $blog->cover_image) : 'https://images.unsplash.com/photo-1427504494785-3a9ca7044f45?w=600' }}"--}}
{{--                                 alt="{{ $blog->name }}"--}}
{{--                                 class="blog-card-img" data-blog-id="{{$blog->id}}">--}}
{{--                            <div class="blog-content">--}}
{{--                                <h2 class="h6 blog-title">--}}
{{--                                    <a href="{{route('blog.show',$blog->slug)}}"--}}
{{--                                       class="text-black blog-link text-decoration-none"--}}
{{--                                       data-blog-id="{{$blog->id}}">--}}
{{--                                        {{$blog->name}}--}}
{{--                                    </a>--}}
{{--                                </h2>--}}
{{--                            </div>--}}
{{--                        </div>--}}
{{--                    </div>--}}

{{--                @empty--}}

{{--                @endforelse--}}
{{--            </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>
    </section>

@endsection

@push('footer-scripts')
    <script>
        // Smooth scroll
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if(target) {
                    target.scrollIntoView({
                        behavior: 'smooth'
                    });
                }
            });
        });
    </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;

                $("#blogList").empty();
                $("#noMoreBlogs").hide();
                $("#noResults").hide();
                $("#loadingIndicator").show();

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

                        if (response.html && response.html.trim() !== '') {
                            $("#blogList").html(response.html);
                            hasMore = response.hasMore;

                            if (!hasMore && response.count > 0) {
                                $("#noMoreBlogs").show();
                            }
                        } else {
                            // No results found
                            $("#noResults").show();
                            hasMore = false;
                        }
                    },
                    error: function (xhr, status, error) {
                        console.error('Error searching blogs:', error);
                        $("#loadingIndicator").hide();
                        $("#blogList").html('<div class="col-12"><p class="text-danger text-center">Error loading blogs. Please try again.</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