@extends('layouts.main')

@section('title', 'Our Projects')

@section('content')
    <!-- Breadcrumb -->
    <x-breadcrumb title="Our Projects" />

    <section class="py-24 bg-white">
        <div class="container mx-auto px-4">
            <!-- Filter -->
            <div class="flex flex-wrap gap-4 mb-16 justify-center reveal">
                <a href="{{ route('projects.index') }}" class="px-8 py-3 {{ !request('category') || request('category') == 'All' ? 'bg-[#CC2128] text-white' : 'bg-gray-50 text-gray-500' }} font-bold uppercase tracking-widest text-xs shadow-lg transition-all">All Projects</a>
                @foreach(['Industrial', 'Commercial', 'Residential'] as $cat)
                    <a href="{{ route('projects.index', ['category' => $cat]) }}" class="px-8 py-3 {{ request('category') == $cat ? 'bg-[#CC2128] text-white' : 'bg-gray-50 text-gray-500 hover:bg-gray-100' }} font-bold uppercase tracking-widest text-xs transition-all">{{ $cat }}</a>
                @endforeach
            </div>

            <div id="project-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10 reveal reveal-delay-1">
                @forelse ($projects as $project)
                    @include('partials.project-card', ['project' => $project])
                @empty
                    <div class="col-span-full py-20 text-center">
                        <p class="text-gray-400 font-black uppercase tracking-widest">{{ __t('No projects found in this category.') }}</p>
                    </div>
                @endforelse
            </div>

            <div class="mt-20 text-center {{ !$projects->hasMorePages() ? 'hidden' : '' }}" id="load-more-container">
                <button id="load-more" 
                        data-next-page="{{ $projects->nextPageUrl() }}"
                        class="px-12 py-5 bg-gray-900 text-white font-black uppercase tracking-widest text-sm hover:bg-[#CC2128] transition-all transform hover:-translate-y-1 shadow-2xl disabled:opacity-50 disabled:cursor-not-allowed">
                    <span class="button-text">{{ __t('Load More Projects') }}</span>
                    <span class="loading-spinner hidden">
                        <svg class="animate-spin h-5 w-5 text-white inline-block" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                        </svg>
                    </span>
                </button>
            </div>
        </div>
    </section>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const loadMoreBtn = document.getElementById('load-more');
            const projectContainer = document.getElementById('project-container');
            const loadMoreContainer = document.getElementById('load-more-container');

            if (loadMoreBtn) {
                loadMoreBtn.addEventListener('click', function() {
                    const nextPageUrl = loadMoreBtn.getAttribute('data-next-page');
                    if (!nextPageUrl) return;

                    // Show loading state
                    loadMoreBtn.disabled = true;
                    loadMoreBtn.querySelector('.button-text').classList.add('hidden');
                    loadMoreBtn.querySelector('.loading-spinner').classList.remove('hidden');

                    fetch(nextPageUrl, {
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest'
                        }
                    })
                    .then(response => response.json())
                    .then(data => {
                        // Append new projects
                        projectContainer.insertAdjacentHTML('beforeend', data.html);

                        // Update button
                        if (data.hasMore) {
                            loadMoreBtn.setAttribute('data-next-page', data.nextPageUrl);
                        } else {
                            loadMoreContainer.classList.add('hidden');
                        }
                    })
                    .catch(error => {
                        console.error('Error loading projects:', error);
                    })
                    .finally(() => {
                        // Reset loading state
                        loadMoreBtn.disabled = false;
                        loadMoreBtn.querySelector('.button-text').classList.remove('hidden');
                        loadMoreBtn.querySelector('.loading-spinner').classList.add('hidden');
                    });
                });
            }
        });
    </script>
        </div>
    </section>
@endsection