@section('page-title', __('language.newsandnotices'))
@extends('site.master')

@section('main-content')

<section class="af-hdr ">
    <div class="header-decoration position-absolute">
        <img src="{{ asset('site/img/shape_nate.svg') }}" alt="">
    </div>

    <div class="container position-relative" style="z-index: 9">
        <div class="row">
            <div class="col-sm-12">
                <h1 class="text-uppercase text-white fnt-fam-ser fs-2 fwc-700">
                    @lang('language.newsandnotices')
                </h1>

                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="list-inline-item">
                            <a class="text-white text-decoration-none" href="{{ URL::to('/') }}">
                                @lang('language.home')
                            </a>
                        </li>
                        <li class="list-inline-item current text-danger">
                            @lang('language.newsandnotices')

                            
                        </li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>

    <div class="decoration-pattern pattern-one position-absolute">
        <img src="{{ asset('site/img/breadcrumb_shape_pattern_1.svg') }}" alt="">
    </div>
    <div class="decoration-pattern pattern-two position-absolute">
        <img src="{{ asset('site/img/breadcrumb_shape_pattern_2.svg') }}" alt="">
    </div>
</section>

<section class="py-5 bg-light">
    <div class="container">
        <div class="row">

            {{-- LEFT FILTER --}}
            <div class="col-lg-3">
                <ul class="list-unstyled d-flex flex-row flex-lg-column gap-2">
                    @foreach ($categories as $item)
                        <li>
                            <a href="javascript:void(0)"
                               class="filter-item d-block px-3 text-decoration-none {{ request('category') == $item->slug ? 'active' : '' }}"
                               data-filter="{{ $item->slug }}">
                                <span class="filter-icons me-2">
                                    <i class="bi-arrow-right"></i>
                                </span>
                                <span>{{ $item->title }}</span>
                            </a>
                        </li>
                    @endforeach
                </ul>
            </div>

            {{-- RIGHT CONTENT --}}
            <div class="col-lg-9">
                <div class="mb-3">

                    <ul class="d-flex gap-3 w-100 flex-column" id="filter-results">
                        @foreach ($details as $item)

                      
                        <li class="position-relative py-3 px-2 d-flex gap-4 border-bottom result-item rounded text-hover-danger hover-shadow">

                            <div class="img-section-l bg-white d-flex align-items-start justify-content-center"
                                 style="width: 300px; height:200px; overflow: hidden;">
                                <img class="lazy"
                                     data-src="{{ asset($item->image ?? 'site/img/default.png') }}"
                                     alt="{{ $item->title }}"
                                     style="object-fit: contain; width: 100%; height: 100%;">
                            </div>

                            <div class="flex-grow-1 d-flex flex-column justify-content-between py-2" style="width: calc(100% - 300px)">
                                <span class="fwc-700 fs-5">
                                    {{ $item->title }}
                                </span>

                                @isset($item->published_date)
                                <div class="mt-2">
                                    <span class="fw-bold fs-7 text-custom-blue-dark2">
                                        {{ getNepaliDate($item->published_date) }}
                                    </span>
                                </div>
                                @endisset
                            </div>
                            <a href="{{ route('post.detailwithcategory', ['slug'=> $item->slug, 'postcategory'=> $item->categories->first()?->slug]) }}" class="stretched-link"></a>
                        </li>
                        @endforeach
                    </ul>
                </div>

                {{-- ✅ FIXED ID --}}
                <div id="pagination-container" class="pagination-container">
                    {{ $details->links() }}
                </div>

            </div>
        </div>
    </div>
</section>

@endsection


@push('scripts')
<script>
const filterItems = document.querySelectorAll('.filter-item');
const resultsContainer = document.getElementById('filter-results');
const paginationContainer = document.getElementById('pagination-container');


// ==============================
// LOAD PAGE (AJAX)
// ==============================
function loadPage(url, push = true) {
    resultsContainer.innerHTML = '<div class="loading-spinner"></div>';

    fetch(url, {
        headers: { 'X-Requested-With': 'XMLHttpRequest' }
    })
    .then(res => res.text())
    .then(html => {
        const parser = new DOMParser();
        const doc = parser.parseFromString(html, 'text/html');

        const newResults = doc.querySelector('#filter-results');
        const newPagination = doc.querySelector('#pagination-container');

        if (newResults) resultsContainer.innerHTML = newResults.innerHTML;
        if (newPagination) paginationContainer.innerHTML = newPagination.innerHTML;

        initializeLazyLoading();

        if (push) {
            history.pushState({}, '', url);
        }

        // ✅ re-sync active state after load
        setActiveFromURL();
    });
}


// ==============================
// FILTER CLICK
// ==============================
filterItems.forEach(item => {
    item.addEventListener('click', function () {
        const category = this.dataset.filter;

        const url = `?category=${category}`;
        loadPage(url);
    });
});


// ==============================
// PAGINATION CLICK
// ==============================
document.addEventListener('click', function(e) {
    if (e.target.closest('.pagination a')) {
        e.preventDefault();
        const url = e.target.closest('a').href;
        loadPage(url);
    }
});


// ==============================
// BACK / FORWARD FIX
// ==============================
window.addEventListener('popstate', function () {
    loadPage(window.location.href, false);
});


// ==============================
// ACTIVE STATE CONTROL
// ==============================
function setActiveFromURL() {
    const params = new URLSearchParams(window.location.search);
    const category = params.get('category');

    let found = false;

    filterItems.forEach(item => {
        if (item.dataset.filter === category) {
            item.classList.add('active');
            found = true;
        } else {
            item.classList.remove('active');
        }
    });

    // fallback → first item always active
    if (!found && filterItems.length > 0) {
        filterItems[0].classList.add('active');
    }
}


// ==============================
// INITIAL LOAD
// ==============================
function initPage() {
    const params = new URLSearchParams(window.location.search);
    const category = params.get('category');

    if (!category && filterItems.length > 0) {
        const firstCategory = filterItems[0].dataset.filter;

        history.replaceState({}, '', `?category=${firstCategory}`);
        loadPage(`?category=${firstCategory}`, false);
    } else {
        setActiveFromURL();
    }
}


// ==============================
// LAZY LOAD
// ==============================
function initializeLazyLoading() {
    const lazyImages = document.querySelectorAll('img.lazy');
    lazyImages.forEach(img => {
        if (img.dataset.src) {
            img.src = img.dataset.src;
            img.classList.remove('lazy');
        }
    });
}


// RUN
initPage();
</script>


<style>
.filter-item {
    color: #333;
    transition: all 0.3s ease;
    border-radius: 4px;
}

.filter-item.active {
    font-weight: 600;
    color: #0d6efd;
}

.filter-item.active .filter-icons i {
    transform: rotate(90deg);
}

.filter-icons i {
    transition: transform 0.3s ease;
}

#filter-results {
    min-height: 200px;
}

.loading-spinner {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #0d6efd;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 40px auto;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
</style>
@endpush