@extends("layouts.app")

@section('title', '- Our Design Portfolio')
@section('meta_description', 'Explore our diverse range of interior design projects')

@section('content')
<div class="modern-projects">
    <!-- Projects Hero -->
    <section class="relative h-[50vh] bg-cover bg-center" style="background-image: url('{{ $projects->first()->featured_image_url ?? asset('images/projects-hero.jpg') }}')">
        <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center">
            <div class="text-center text-white max-w-3xl px-4">
                <h1 class="text-4xl md:text-5xl font-bold mb-6">Our Collections</h1>
                <p class="text-xl md:text-2xl opacity-80">Explore our diverse range of textiles designed for various applications and styles.</p>
            </div>
        </div>
    </section>

    <!-- Projects Grid with Filters -->
    <section class="py-16 bg-white">
        <div class="container mx-auto px-4">
            <!-- Category Filters -->
            <div class="flex flex-wrap justify-center gap-4 mb-12">
                <button data-filter="all" class="filter-btn bg-gray-200 text-gray-800 px-6 py-2 rounded-full hover:bg-primary-500 hover:text-white transition">
                    All Collections
                </button>
                @foreach($categories as $category)
                <button data-filter="{{ $category->slug }}" class="filter-btn bg-gray-200 text-gray-800 px-6 py-2 rounded-full hover:bg-primary-500 hover:text-white transition">
                    {{ $category->name }}
                </button>
                @endforeach
            </div>

            <!-- Projects Grid -->
            <div class="grid md:grid-cols-3 gap-8 projects-grid">
                @foreach($projects as $project)
                <div class="project-item" data-category="{{ $project->category->slug }}">
                    <div class="group relative overflow-hidden rounded-lg shadow-lg">
                    <img src="{{ $project->featured_image_url }}" alt="{{ $project->title }}" class="w-full h-64 object-cover transform group-hover:scale-110 transition duration-500">
                        <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-70 transition duration-500 flex flex-col items-center justify-center text-white text-center p-4">
                            <h3 class="text-xl font-bold opacity-0 group-hover:opacity-100 transform translate-y-4 group-hover:translate-y-0 transition duration-500">
                                {{ $project->title }}
                            </h3>
                            <p class="text-sm opacity-0 group-hover:opacity-100 mt-2 transform translate-y-4 group-hover:translate-y-0 transition duration-500 delay-100">
                                {{ $project->category->name }}
                            </p>
                            <a href="{{ route('projects.show', $project->slug) }}" class="opacity-0 group-hover:opacity-100 mt-4 px-6 py-2 border border-white rounded-full transform translate-y-4 group-hover:translate-y-0 transition duration-500 delay-200">
                                View Collection
                            </a>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>

            <!-- Pagination -->
            <div class="mt-12 flex justify-center">
                {{ $projects->links('vendor.pagination.tailwind') }}
            </div>
        </div>
    </section>
</div>

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const filterButtons = document.querySelectorAll('.filter-btn');
        const projectItems = document.querySelectorAll('.project-item');

        filterButtons.forEach(button => {
            button.addEventListener('click', function() {
                const filter = this.getAttribute('data-filter');

                // Remove active class from all buttons
                filterButtons.forEach(btn => btn.classList.remove('bg-primary-500', 'text-white'));
                this.classList.add('bg-primary-500', 'text-white');

                // Filter projects
                projectItems.forEach(item => {
                    if (filter === 'all' || item.getAttribute('data-category') === filter) {
                        item.style.display = 'block';
                    } else {
                        item.style.display = 'none';
                    }
                });
            });
        });
    });
</script>
@endpush
@endsection