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


@php
    $title = 'Reference List | El DiDi Group';
    $description = 'Explore our reference projects completed by El DiDi Group across various locations and clients.';
    $ogImage = !empty($projects->first()->main_photo)
        ? asset('system/storage/app/public/project/' . $projects->first()->main_photo)
        : asset('themes/web/assets/images/logo.png');
@endphp

@section('title', $title)
@section('meta_description', $description)
@section('og_image', $ogImage)

@section('content')
	<!-- Page Title -->
    <section class="page-title">
    	<div class="content" style="background-image: url('{{ asset($productHeaderImg) }}')">
		</div>
    </section>
    <!-- End Page Title -->
	
	<!-- Projects Section Two -->
	<section class="projects-section-two">
		<div class="auto-container">
            <h1 class="page-title" style="text-align: center">Reference List</h1>
            <br><br>
			<!-- MixitUp Gallery -->
            <div class="mixitup-gallery">
                
                <div class="row clearfix align-items-stretch" id="content-container">
					@foreach ($projects as $project)
						<div class="gallery-block-two col-lg-4 col-md-6 col-sm-12 d-flex">
							<div class="inner-box h-100 d-flex flex-column">
								<div class="image">
									<a href="{{ route('web.projects.show', ['id' => $project->id])}}"><img src="{{ asset('system/storage/app/public/project/'. $project->main_photo)}}" alt="{{ $project->title }}" width="510" height="600" loading="lazy" style="aspect-ratio: 510/600;" /></a>
								</div>
								<div class="lower-content flex-grow-1">
									<h5><a href="{{ route('web.projects.show', ['id' => $project->id])}}">{{ $project->title }}</a></h5>
									<div class="designation">Client: <span>{{ $project->client }}</span></div>
									<div class="designation">Location : <span>{{ $project->location }}</span></div>
									{{-- <div class="designation">Year: <span>{{$project->created_at->format('Y')}}</span></div> --}}
									@if (!empty($project->description))
										<div class="sub-title">{{ \Illuminate\Support\Str::limit(strip_tags($project->description), 30, '...') }}</div>
									@endif
									<div class="designation"><a href="{{ route('web.projects.show', ['id' => $project->id])}}">learn more</a></div>
								</div>
							</div>
						</div>
					@endforeach
				</div>
				
				<!-- Button Box -->
				<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 Projects</span>
					</button>
				</div>
				
			</div>
			
		</div>
	</section>
	<!-- End Projects Section Two -->
	
@endsection

@section('pageScripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        let page = 1;
        const perPage = 3; // Match your pagination
        const contentType = 'projects';
        const projectType = '{{ $type }}'; // Get the current type from controller

        // Check if more items can be loaded
        function checkLoadMoreButton(hasMore) {
            const loadMoreButton = document.getElementById('load-more-button');
            const currentItems = document.querySelectorAll('#content-container .gallery-block-two').length;
            loadMoreButton.style.display = (currentItems >= perPage && hasMore) ? 'block' : 'none';
        }

        // Initial check
        const initialItemCount = document.querySelectorAll('#content-container .gallery-block-two').length;
        checkLoadMoreButton(initialItemCount >= perPage);

        // Handle load more button click
        document.getElementById('load-more').addEventListener('click', function () {
            page++;
            const url = "{{ route('web.loadMore') }}" + 
                "?content_type=" + contentType +
                "&project_type=" + projectType +
                "&page=" + page + 
                "&per_page=" + perPage;

            fetch(url)
                .then(response => response.json())
                .then(data => {
                    const contentContainer = document.getElementById('content-container');
                    data.items.forEach(item => {
                        const descriptionHtml = item.description 
                            ? `<div class="sub-title">${item.description}</div>` 
                            : '';
                        
                        const itemHtml = `
                            <div class="gallery-block-two col-lg-4 col-md-6 col-sm-12 d-flex">
                                <div class="inner-box h-100 d-flex flex-column">
                                    <div class="image">
                                        <a href="/projects/${item.id}">
                                            <img src="${item.photo}" alt="${item.title}" width="510" height="600" loading="lazy" style="aspect-ratio: 510/600;" />
                                        </a>
                                    </div>
                                    <div class="lower-content flex-grow-1">
                                        <h5><a href="/projects/${item.id}">${item.title}</a></h5>
                                        <div class="designation">Client: <span>${item.client}</span></div>
                                        <div class="designation">Location: <span>${item.location}</span></div>
                                        ${descriptionHtml}
                                        <div class="designation">
                                            <a href="/projects/${item.id}">learn more</a>
                                        </div>
                                    </div>
                                </div>
                            </div>`;
                        contentContainer.insertAdjacentHTML('beforeend', itemHtml);
                    });
                    
                    // Update button visibility
                    checkLoadMoreButton(data.has_more);
                })
                .catch(error => console.error('Error loading more projects:', error));
        });
    });
</script>
@endsection