@section('title', 'Medical Education Blogs for Students and Careers | AUMDC')
@section('description', 'Read AUMDC Blogs to explore insights on MBBS and BDS education, student experiences, study tips and career advice for aspiring medical students.')
@section('keywords', 'AUMDC Blogs,Education Blogs')
@section('tags', 'AUMDC Blogs,Education Blogs')
@extends('front.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:18px;
            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);
        }
        /*.banner-text p {*/
        /*    font-size: 100px;*/
        /*}*/

        .banner-wrapper{
            min-height: 220px;
        }

        .banner-img{
            height: 30vw;
            max-height: 420px;
            min-height: 200px;
            object-fit: cover;
        }

        .banner-text{
            width: 100%;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
        }

        .banner-text p{
            font-size: clamp(28px, 6vw, 70px); /* ⭐ responsive font */
            letter-spacing: 1px;
        }

    </style>
    {{--    Banner Section  --}}
    <div class="container-fluid p-0">
        <div class="position-relative d-flex align-items-center banner-wrapper">
            <img src="{{asset('front/images/blog/blogs-banner.png')}}"
                 class="img-fluid w-100 banner-img"
                 alt="Blogs Banner">

            <div class="h1 position-absolute text-start banner-text">
                <p class="text-center text-white fw-bold">Blogs</p>
            </div>
        </div>
    </div>
    <section class="blog-area pt-100 pb-70">
        <div class="container">

            <!-- PAGE HEADING -->
            <div class="text-center mb-5">
                <h1 class="fw-bold">Medical Education Blogs for Students and Careers | AUMDC</h1>
                <p class="fs-4" style="text-align: justify">Explore AUMDC blogs to stay updated on medical education, healthcare updates, and student career guidance. Read informative articles and tips for academic development for students. Stay engaged with our blogs that support your learning and professional journey.</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('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('front.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('js')
    <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