@extends('front.layouts.master-auth')

@section('content')
<section class="page-content blog-category-page">
    <div class="container">

        <div class="page-title-cont">
            @if(isset($breadcrumbs) && is_array($breadcrumbs) && count($breadcrumbs) > 0)
                <x-breadcrumb :items="$breadcrumbs" />
            @endif
            <h1 class="page-title">
                <span class="skill-page-badge">@lang('Blog')</span>
                {{ $category->name }}
            </h1>
        </div>

        <div id="category-blogs-results">
            @if($blogs->count() > 0)
                <div class="projectoffers-cont">
                    <div class="blog-grid">
                        @foreach($blogs as $blog)
                            @include('front.blog._blog_card', ['blog' => $blog])
                        @endforeach
                    </div>
                </div>
                <div class="pagination-cont">
                    {{ $blogs->withQueryString()->links('front.pagination') }}
                </div>
            @else
                <div class="page-404">
                    <div class="img-404">
                        <img src="{{ asset('front/images/404.png') }}" alt="@lang('No Items Found')" class="img-fluid" loading="lazy" decoding="async">
                    </div>
                    <h2 class="title-404">
                        @lang('No Items Found')
                    </h2>
                </div>
            @endif
        </div>

    </div>
</section>

<script>
(function() {
    var pageUrl = '{{ url()->current() }}';

    function fetchPage(url) {
        var container = document.getElementById('category-blogs-results');
        if (!container) return;
        container.style.opacity = '0.5';

        var xhr = new XMLHttpRequest();
        xhr.open('GET', url, true);
        xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
        xhr.onload = function() {
            if (xhr.status === 200) {
                try {
                    var data = JSON.parse(xhr.responseText);
                    container.innerHTML = data.html;
                    container.style.opacity = '1';
                    bindPagination();
                } catch(err) {
                    container.style.opacity = '1';
                }
            } else {
                container.style.opacity = '1';
            }
        };
        xhr.send();
    }

    function bindPagination() {
        var container = document.getElementById('category-blogs-results');
        if (!container) return;
        container.querySelectorAll('.pagination a').forEach(function(link) {
            link.addEventListener('click', function(e) {
                e.preventDefault();
                history.pushState({}, '', this.href);
                fetchPage(this.href);
            });
        });
    }

    bindPagination();

    window.addEventListener('popstate', function() {
        fetchPage(window.location.href);
    });
})();
</script>
@endsection