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

@section('title', 'Our Group | El DiDi Group')

@section('meta_description', 'Explore El DiDi Group and subsidiaries, delivering expertise across multiple industries and sectors.')

@section('content')
    <!-- Page Title -->
    <section class="page-title">
        <div class="content" style="background-image: url('{{ asset($companiesHeaderImg) }}');">
        </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 Group</h1>
            <br><br>
            <div class="row clearfix justify-content-center" id="content-container">

                @foreach ($companies as $company)
                    <div class="col-lg-4 col-md-6 col-sm-12">
                        <div class="company-card">
                            <h5 class="lower-content">{{ $company->name }}</h5>
                            <div class="image">
                                <img src="{{ asset($company->photo) }}" alt="{{ $company->name }}" width="510" height="600" loading="lazy" style="aspect-ratio: 510/600;" />
                            </div>
                            @if (!empty($company->subtitle))
                                <p>
                                    {{ $company->subtitle }}
                                </p>
                            @endif
                            <a href="{{ route('web.companies.show', $company->id) }}">View Page</a>
                        </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 = 9;
            const contentType = 'companies';

            function checkLoadMoreButton(hasMore) {
                const loadMoreButton = document.getElementById('load-more-button');
                const currentItems = document.querySelectorAll('#content-container .company-card').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="col-lg-4 col-md-6 col-sm-12">
                            <div class="company-card">
                                <h5 class="lower-content">${item.name}</h5>
                                <div class="image">
                                    <img src="${item.photo}" alt="${item.name}" width="510" height="600" loading="lazy" style="aspect-ratio: 510/600;" />
                                </div>
                                ${item.subtitle ? `<p>${item.subtitle}</p>` : ''}
                                <a href="/our-group/${item.id}">View Page</a>
                            </div>
                        </div>`;
                            contentContainer.insertAdjacentHTML('beforeend', itemHtml);
                        });
                        checkLoadMoreButton(data.has_more);
                    })
                    .catch(error => console.error('Error loading more Groups:', error));
            });
        });
    </script>
@endsection