@extends('web_theme::layout.main')

@section('title', 'Latest News | El DiDi Group')
@section('meta_description', 'Read the latest news and updates from El DiDi Group, covering our projects, partnerships, and industry insights.')

@section('content')
    <!-- Page Title -->
    <section class="page-title">
        <div class="content" style="background-image: url('{{ asset($newsHeaderImg) }}');">
        </div>

    </section>
    <!-- End Page Title -->

    <!-- News Section -->
    <section class="news-section">
        <div class="auto-container">

            <h1 class="page-title" style="text-align: center">News</h1>
            <br><br>
            <div class="row clearfix align-items-stretch" id="content-container">
                @foreach ($news as $item)
                    <div class="news-block-two col-lg-4 col-md-6 col-sm-12 d-flex">
                        <div class="inner-box h-100 d-flex flex-column wow fadeInLeft" data-wow-delay="300ms" data-wow-duration="1500ms">
                            <div class="image">
                                <a href="{{ route('web.news.show', $item->id) }}"><img src="{{ asset($item->photo) }}" alt="{{ $item->title}}" width="510" height="600" loading="lazy" style="aspect-ratio: 510/600;"/></a>
                                <div class="post-date">{{ strtoupper($item->created_at->format('d M Y')) }}</div>
                            </div>
                            <div class="lower-content flex-grow-1">
                                <h4><a href="{{ route('web.news.show', $item->id)}}">{{ $item->title }} </a>
                                </h4>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

            <!-- Button Box: Hidden by default, shown via JS when more items are available -->
            <div class="button-box text-center" id="load-more-button" style="display: none;">
                <button class="btn-style-two theme-btn" id="load-more"><span class="txt">View More Posts</span></button>
            </div>
            <i class="fa fa-bar-chart" aria-hidden="true"> Visitors Counter : <span class="post-views-count">{{$views->count}}</span></i>


        </div>
    </section>
    <!-- End News Section -->
@endsection

@section('pageScripts')
     <!-- JavaScript for AJAX loading -->
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            let page = 1;
            const perPage = 9;
            const contentType = 'news';

            // Check if more items can be loaded
            function checkLoadMoreButton(hasMore) {
                const loadMoreButton = document.getElementById('load-more-button');
                // Show button only if there are 9 items initially and more data is available
                const currentItems = document.querySelectorAll('#content-container .news-block-two').length;
                loadMoreButton.style.display = (currentItems >= perPage && hasMore) ? 'block' : 'none';
            }

            // Initial check (assume more data is available if 9 items are loaded)
            checkLoadMoreButton(true);

            // Handle load more button click
            document.getElementById('load-more').addEventListener('click', function () {
                page++;
                fetch("{{ route('web.loadMore') }}?content_type=" + contentType +"&page=" + page + "&per_page=" + perPage)
                    .then(response => response.json())
                    .then(data => {
                        const contentContainer = document.getElementById('content-container');
                        data.items.forEach(item => {
                            const itemHtml = `
                                <div class="news-block-two col-lg-4 col-md-6 col-sm-12 d-flex">
                                    <div class="inner-box h-100 d-flex flex-column wow fadeInLeft" data-wow-delay="300ms" data-wow-duration="1500ms">
                                        <div class="image">
                                            <a href="/news/${item.id}"><img src="${item.photo}" alt="${item.title}" width="510" height="600" loading="lazy" style="aspect-ratio: 510/600;"/></a>
                                            <div class="post-date">${item.created_at}</div>
                                        </div>
                                        <div class="lower-content flex-grow-1">
                                            <h4><a href="/news/${item.id}">${item.title}</a></h4>
                                        </div>
                                    </div>
                                </div>`;
                            contentContainer.insertAdjacentHTML('beforeend', itemHtml);
                        });
                        // Update button visibility based on whether more data is available
                        checkLoadMoreButton(data.has_more);
                    })
                    .catch(error => console.error('Error loading more news:', error));
            });
        });
    </script>
@endsection