@section('title', 'MTH Blogs – Disease Prevention & Modern Medical Care')
@section('description', 'Read the latest from MTH on maternal health, disease prevention, and clinical innovations. Serving humanity through expert healthcare and social welfare')
@section('keywords', 'Madinah Teaching Hospital News and Events MTH hospital news Recent activities at Madinah Teaching Hospital What recent events have been held at Madinah Teaching Hospital?')
@section('tags', 'Madinah Teaching Hospital News and Events, MTH hospital news, Recent activities at Madinah Teaching Hospital, What recent events have been held at Madinah Teaching Hospital?')
@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;
        }
        h2 {
            font-weight: 400;
             line-height: 21px;
        }

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

            <div class="h1 position-absolute text-start banner-text">
                <p class="ms-5 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 fs-2">MTH Health Blogs – Medical Insights, Patient Care & Wellness Tips</h1>
                <p class="fs-5">Welcome to the MTH Blogs. Explore expert medical advice, clinical updates,
                    and practical health tips.<br> From specialized hospital services to everyday wellness.</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="ri-search-line search-icon"></i>

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

                            <i class="ri-close-line 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('footer-scripts')
{{--    <script>--}}
{{--        $(function () {--}}
{{--            $('.is_active_event').addClass('active');--}}
{{--        });--}}
{{--    </script>--}}
    <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 = {{ $record->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('blog.track-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