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


@section('title', 'Our Partners | El DiDi Group')
@section('meta_description', 'Discover our esteemed partners and their exceptional contributions to our success.')

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

    <!-- Team Section Two -->
    <section class="team-section-two style-two">
        <div class="auto-container">
            <h1 class="page-title" style="text-align: center">Our Partners</h1>
            <br><br>
            <div class="row clearfix" id="content-container">

                @foreach ($partners as $partner)
                    <div class="team-block col-lg-3 col-md-4 col-sm-6">
                        <div class="inner-box">
                            <div class="image">
                                <a href="{{ route('web.partners.show', $partner->id) }}"><img
                                        src="{{ asset($partner->photo) }}" alt="Photo" width="510" height="600" loading="lazy" style="aspect-ratio: 510/600;"/></a>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

            <!-- Button Box -->
            {{-- <div class="button-box text-center">
				<a class="btn-style-two theme-btn" href="{{ route('web.companies') }}"><span class="txt">View More</span></a>
			</div> --}}
            <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</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 Team Section Two -->
@endsection

@section('pageScripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            let page = 1;
            const perPage = 12;
            const contentType = 'partners';

            function checkLoadMoreButton(hasMore) {
                const loadMoreButton = document.getElementById('load-more-button');
                const currentItems = document.querySelectorAll('#content-container .team-block').length;
                loadMoreButton.style.display = (currentItems >= perPage && hasMore) ? 'block' : 'none';
            }

            checkLoadMoreButton(true);

            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="team-block col-lg-3 col-md-4 col-sm-6">
                <div class="inner-box">
                    <div class="image">
                        <a href="{{ url('partners') }}/${item.id}">
                            <img src="${item.photo}" alt="Photo" width="510" height="600" loading="lazy" style="aspect-ratio: 510/600;"/>
                        </a>
                    </div>
                </div>
            </div>`;
                            contentContainer.insertAdjacentHTML('beforeend', itemHtml);
                        });
                        checkLoadMoreButton(data.has_more);
                    })
                    .catch(error => console.error('Error loading more partners:', error));
            });
        });
    </script>
@endsection