@section('title', 'School Life & Learning Tips | University Cambridge School Blogs')
@section('description', 'Explore expert articles on modern teaching, character building, and school updates. Stay informed with the latest educational trends from University Cambridge School.')
@extends('frontend.layouts.app')
@section('content')
    <style>
        /* search bar */
        .search-wrapper{
            position:relative;
        }
        .search-wrapper input{
            width:100%;
            padding:14px 45px;
            border-radius:30px;
            border:1px solid #ddd;
            font-size:16px;
        }
        .search-icon{
            position:absolute;
            left:15px;
            top:50%;
            transform:translateY(-50%);
            color:#999;
        }
        .clear-icon{
            position:absolute;
            right:15px;
            top:50%;
            transform:translateY(-50%);
            color:red;
            cursor:pointer;
            display:none;
        }

        /* blog cards */
        .blog-card{
            /*border-radius:12px;*/
            overflow:hidden;
            box-shadow:0 0 15px rgba(0,0,0,0.08);
            background:#fff;
            transition:.3s;
        }
        .blog-card:hover{ transform:translateY(-5px); }

        .blog-title{
            font-size:16px;
            font-weight:700;
            font-family:sans-serif !important;
        }

        .read-btn{
            color:#0d6efd;
            font-weight:600;
        }
        /* Search input focus red outline */
        .search-wrapper input:focus{
            outline:none;
            border:2px solid red;
            box-shadow:0 0 0 3px rgba(255,0,0,0.15);
        }

    </style>
    <!--==============================
    Breadcumb
============================== -->
    <div class="breadcumb-wrapper " data-bg-src="{{asset('frontend/coreui/assets/img/breadcumb/breadcumb-bg.jpg')}}">
        <div class="container z-index-common">
            <div class="breadcumb-content">
                <h1 class="breadcumb-title">Blogs</h1>
                <p class="breadcumb-text">Linking life to learning</p>
                <div class="breadcumb-menu-wrap">
                    <ul class="breadcumb-menu">
                        <li><a href="{{route('front.home')}}">Home</a></li>
                        <li>Blogs</li>
                    </ul>
                </div>
            </div>
        </div>
    </div><!--==============================
    Blog Area
    ==============================-->
    <section class="space-top space-extra-bottom">
        <div class="container">

            <!-- PAGE HEADING -->
            <div class="text-center mb-5">
                <h1 class="fs-1">UCSF Blogs – Educational Insights & Student Life</h1>
                <p class="fs-5" style="text-align: center">Explore the information about modern teaching, character building,
                    and school updates. <br>We share expert insights to support student growth and link
                    life to learning for every child.</p>
            </div>

            <!-- SEARCH BAR -->
            <div class="row justify-content-center mb-5">
                <div class="col-lg-6 col-md-8 col-12">
                    <form action="{{route('front.blog')}}" method="GET">
                        <div class="search-wrapper">
                            <i class="fa fa-search search-icon"></i>

                            <input type="text" name="search" id="searchInput"
                                   value="{{request('search')}}"
                                   placeholder="Search blogs..." />

                            <i class="fa fa-times clear-icon" id="clearSearch"></i>
                        </div>
                    </form>
                </div>
            </div>

            <!-- BLOGS GRID -->
            <div class="row" id="blog-container">
                @include('frontend.partials.blog_cards')
            </div>

            <div id="loading" class="text-center mt-4" style="display:none">
                <h4>Loading more blogs...</h4>
            </div>

        </div>
    </section>

@endsection

@push('head-scripts')
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "CollectionPage",
  "name": "Blog - University Cambridge School Faisalabad",
  "description": "Read our latest blog articles about education, school life, and academic insights at University Cambridge School Faisalabad.",
  "url": "{{ route('front.blog') }}",
  "mainEntity": {
    "@type": "CollegeOrUniversity",
    "name": "University Cambridge School Faisalabad",
    "url": "{{ url('/') }}"
  }
}
</script>
@endpush

@push('footer-scripts')
    <script>
        let input = document.getElementById('searchInput');
        let clearBtn = document.getElementById('clearSearch');

        input.addEventListener('input', ()=>{
            clearBtn.style.display = input.value ? 'block' : 'none';
        });

        clearBtn.addEventListener('click', ()=>{
            input.value='';
            clearBtn.style.display='none';
        });
    </script>
{{--    <script>--}}
{{--        let searchTimer;--}}
{{--        let searchInput = document.getElementById("searchInput");--}}

{{--        searchInput.addEventListener("input", function () {--}}

{{--            clearTimeout(searchTimer);--}}

{{--            // wait 500ms after user stops typing--}}
{{--            searchTimer = setTimeout(() => {--}}

{{--                // if input empty → reload full blog page--}}
{{--                if (this.value.trim() === '') {--}}
{{--                    window.location.href = "{{ route('front.blog') }}";--}}
{{--                    return;--}}
{{--                }--}}

{{--                // submit form--}}
{{--                this.form.submit();--}}

{{--            }, 500); // debounce time--}}
{{--        });--}}
{{--    </script>--}}



    <script>
        let page = 2;
        let loading = false;
        let lastPage = {{ $blogs->lastPage() }};

        window.addEventListener('scroll', function () {

            if (loading) return;
            if (page > lastPage) {
                document.getElementById('loading').innerHTML = "No more blogs";
                return;
            }

            const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
            const windowHeight = window.innerHeight;
            const docHeight = document.documentElement.scrollHeight;

            if (scrollTop + windowHeight >= docHeight - 150) {

                loading = true;
                document.getElementById('loading').style.display = 'block';

                let url = new URL(window.location.href);
                url.searchParams.set('page', page);

                fetch(url, {
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest' // ⭐ VERY IMPORTANT
                    }
                })
                    .then(res => res.text())
                    .then(data => {

                        // if empty response stop forever
                        if (!data.trim()) {
                            document.getElementById('loading').innerHTML = "No more blogs";
                            return;
                        }

                        document.getElementById('blog-container')
                            .insertAdjacentHTML('beforeend', data);

                        page++;
                        loading = false;
                        document.getElementById('loading').style.display = 'none';
                    });
            }
        });
    </script>

    <script>
        document.addEventListener("click", function(e) {

            let link = e.target.closest(".blog-link");
            if (!link) return;

            e.preventDefault(); // stop instant redirect

            let blogId = link.dataset.id;
            let url = link.href;

            fetch("{{ route('track.blog.view') }}", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                    "X-CSRF-TOKEN": "{{ csrf_token() }}"
                },
                body: JSON.stringify({ blog_id: blogId })
            })
                .finally(() => {
                    // redirect after tracking
                    window.location = url;
                });

        });
    </script>




@endpush