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

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

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

    <!-- News Section -->
    <section class="news-section">
        <div class="auto-container">
            <div class="row clearfix" id="videos-container">
                @foreach ($videos as $video)
                    <div class="news-block-two col-lg-6 col-md-6 col-sm-12">
                        @if (!empty($video->url))
                            <iframe width="100%" height="350" src="{{ $video->url }}" title="{{ $video->title }}"
                                frameborder="0"
                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                                referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
                        @endif
                        @if (!empty($video->title))
                            <h4 class="text-center mt-2">{{ $video->title }}</h4>
                        @endif
                    </div>
                @endforeach
            </div>

            {{-- Load more button --}}
            <div class="button-box text-center" id="load-more-button"
                style="{{ $videos->hasMorePages() ? '' : 'display:none;' }}">
                <button class="btn-style-two theme-btn" id="load-more">
                    <span class="txt">View More</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')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            let page = 1;
            const perPage = 6;
            const contentType = 'videos';

            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 videosContainer = document.getElementById('videos-container');
                        data.items.forEach(item => {
                            const titleHtml = item.title ? `<h4 class="text-center mt-2">${item.title}</h4>` : '';
                            const videoHtml = `
                            <div class="news-block-two col-lg-6 col-md-6 col-sm-12">
                                <iframe width="100%" height="350"
                                    src="${item.url}"
                                    title="${item.title}"
                                    frameborder="0"
                                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                                    referrerpolicy="strict-origin-when-cross-origin"
                                    allowfullscreen>
                                </iframe>
                                ${titleHtml}
                            </div>`;
                            videosContainer.insertAdjacentHTML('beforeend', videoHtml);
                        });

                        // Hide button if no more
                        if (!data.has_more) {
                            document.getElementById('load-more-button').style.display = 'none';
                        }
                    })
                    .catch(error => console.error('Error loading more videos:', error));
            });
        });
    </script>
@endsection