@extends('layouts.master')

@section('title', 'Products | Setara Group')

@push('styles')
    <style>
        /* Product Interactive Animations */
        .product-image-container {
            transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
            overflow: hidden;
        }

        .product-image-container:hover {
            transform: translateY(-10px); box-shadow: 0 20px 50px -12px var(--glow-color);
        }

        .product-image-container img {
            transition: transform 0.8s ease;
        }

        .product-image-container:hover img {
            transform: scale(1.1) !important;
        }

        .mini-thumb {
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            position: relative;
            z-index: 1;
        }

        .mini-thumb:hover {
            transform: scale(1.15) rotate(3deg);
            z-index: 50;
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
            border-color: var(--accent) !important;
            opacity: 1 !important;
        }
    </style>
@endpush

@section('content')
    <!-- Page Header -->
    <header class="pt-32 pb-16 text-center relative overflow-hidden">
        <div class="absolute inset-0 bg-hero-glow pointer-events-none"></div>
        <h1 class="text-4xl md:text-5xl font-bold mb-4 tracking-tight"><span class="text-gradient">PRODUCT
                PORTFOLIO</span>
        </h1>
        <p class="text-secondary font-light tracking-wide max-w-3xl mx-auto leading-relaxed">
            Discover Moon Readywears Limited. Where style and quality converge. With years of expertise in garment
            manufacturing, our trendsetting portfolio caters to your every fashion need.
        </p>
    </header>

    <!-- Partners / Clients (Optional/Static for now) -->
    <section class="py-12 border-b border-white/5 bg-white/5 mb-16">
        <div class="container mx-auto px-6 overflow-hidden">
            <p class="text-center text-secondary text-sm uppercase tracking-widest mb-8">Trusted by Global Brands</p>
            <div
                class="client-logos-container flex flex-wrap justify-center items-center gap-8 md:gap-16 transition-all duration-300">
                @foreach($clients as $client)
                    @if($client->logo)
                        <img src="{{ asset('storage/' . $client->logo) }}" alt="{{ $client->name }}" class="h-12 md:h-16 object-contain theme-logo" title="{{ $client->name }}">
                    @else
                        <span class="text-xl font-bold text-secondary/50 uppercase tracking-widest">{{ $client->name }}</span>
                    @endif
                @endforeach
            </div>
        </div>
    </section>

    <!-- Content -->
    <section class="pb-24">
        <div class="container mx-auto px-6 max-w-6xl space-y-24">
            @foreach($categories as $index => $category)
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center group">
                    <div class="space-y-6 {{ $index % 2 != 0 ? 'order-1 lg:order-2' : 'order-1 lg:order-1' }}">
                        <h2 class="text-3xl font-bold text-foreground">
                            <span class="border-b-4 border-primary pb-2">{{ $category->name }}</span>
                        </h2>
                        <p class="text-secondary leading-relaxed">
                            {{ $category->description }}
                        </p>
                        
                        <!-- Mini Gallery Grid from subcategories/products -->
                        <div class="grid grid-cols-3 gap-4 pt-4">
                            @php $count = 0; @endphp
                            @foreach($category->subcategories as $sub)
                                @foreach($sub->products as $product)
                                    @if($count < 2)
                                        @php 
                                            $productImages = collect([$product->main_image])->concat($product->images->pluck('image_path'))->filter()->join(',');
                                        @endphp
                                        <div class="h-24 rounded-lg bg-white/5 border border-white/10 overflow-hidden cursor-pointer mini-thumb gallery-trigger" 
                                            data-category="{{ $product->name }}" 
                                            data-images="{{ $productImages }}">
                                            <img src="{{ asset('storage/'.$product->main_image) }}" class="w-full h-full object-cover opacity-70">
                                        </div>
                                        @php $count++; @endphp
                                    @endif
                                @endforeach
                            @endforeach
                            @if($category->products->count() > 2)
                                @php 
                                    $allCategoryImages = $category->products->map(function($p) {
                                        return collect([$p->main_image])->concat($p->images->pluck('image_path'));
                                    })->flatten()->filter()->unique()->join(',');
                                @endphp
                                <div class="h-24 rounded-lg bg-white/5 border border-white/10 flex items-center justify-center cursor-pointer hover:bg-white/10 transition-all mini-thumb gallery-trigger"
                                    data-category="{{ $category->name }}" 
                                    data-images="{{ $allCategoryImages }}">
                                    <span class="text-xs text-primary font-bold">Show All</span>
                                </div>
                            @endif
                        </div>
                    </div>
                    
                    <div class="rounded-3xl overflow-hidden glass-card p-2 product-image-container {{ $index % 2 != 0 ? 'order-2 lg:order-1' : 'order-2 lg:order-2' }} h-[500px]">
                        @php 
                            $categoryImages = $category->products->map(function($p) {
                                return collect([$p->main_image])->concat($p->images->pluck('image_path'));
                            })->flatten()->filter()->unique()->join(',');
                        @endphp
                        <img src="{{ asset('storage/' . ($category->image ?? 'default.jpg')) }}" alt="{{ $category->name }}" class="w-full h-full object-cover rounded-2xl cursor-pointer gallery-trigger"
                            data-category="{{ $category->name }}" 
                            data-images="{{ $categoryImages }}">
                    </div>
                </div>
            @endforeach
        </div>
    </section>

    <!-- Gallery Modal (Same as static, but dynamic triggers) -->
    <div id="gallery-modal" class="fixed inset-0 z-[100] hidden opacity-0 transition-opacity duration-300 ease-in-out">
        <div class="absolute inset-0 bg-black/90 backdrop-blur-md" id="modal-backdrop"></div>
        <button id="modal-close" class="absolute top-6 right-6 z-[110] text-white/50 hover:text-primary transition-colors p-2">
            <i class="fas fa-times text-2xl"></i>
        </button>
        <div class="absolute inset-0 flex flex-col items-center justify-center p-4 md:p-8 pointer-events-none">
            <div class="relative w-full max-w-5xl aspect-video flex items-center justify-center pointer-events-auto">
                <button id="nav-prev" class="absolute left-0 md:-left-12 z-10 w-10 h-10 rounded-full bg-white/5 border border-white/10 flex items-center justify-center text-white hover:bg-primary transition-all">
                    <i class="fas fa-chevron-left"></i>
                </button>
                <img id="main-image" src="" alt="Gallery" class="max-w-full max-h-full object-contain rounded-lg shadow-2xl opacity-0 scale-95 transition-all duration-300">
                <button id="nav-next" class="absolute right-0 md:-right-12 z-10 w-10 h-10 rounded-full bg-white/5 border border-white/10 flex items-center justify-center text-white hover:bg-primary transition-all">
                    <i class="fas fa-chevron-right"></i>
                </button>
            </div>
            <div class="absolute top-6 left-6 z-[110] pointer-events-auto">
                <h3 id="gallery-title" class="text-xl md:text-2xl font-bold text-white mb-1 uppercase"></h3>
                <p id="gallery-counter" class="text-primary text-sm font-mono"></p>
            </div>
            <div class="absolute bottom-6 left-0 w-full px-4 pointer-events-auto">
                <div id="thumbnails-container" class="flex space-x-3 overflow-x-auto pb-4 justify-center max-w-6xl mx-auto"></div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script>
    const modal = document.getElementById('gallery-modal');
    const mainImage = document.getElementById('main-image');
    const thumbnailsContainer = document.getElementById('thumbnails-container');
    const galleryTitle = document.getElementById('gallery-title');
    const galleryCounter = document.getElementById('gallery-counter');
    const btnClose = document.getElementById('modal-close');
    const btnPrev = document.getElementById('nav-prev');
    const btnNext = document.getElementById('nav-next');
    const backdrop = document.getElementById('modal-backdrop');

    let currentImages = [];
    let currentIndex = 0;

    document.querySelectorAll('.gallery-trigger').forEach(trigger => {
        trigger.addEventListener('click', () => {
            const category = trigger.getAttribute('data-category');
            const imgs = trigger.getAttribute('data-images').split(',').filter(i => i !== '');
            if(imgs.length === 0) return;
            
            currentImages = imgs.map(i => `{{ asset('storage') }}/${i}`);
            currentIndex = 0;
            galleryTitle.textContent = category;
            openGallery();
        });
    });

    function openGallery() {
        renderModalContent();
        modal.classList.remove('hidden');
        setTimeout(() => modal.classList.remove('opacity-0'), 10);
        document.body.style.overflow = 'hidden';
    }

    function closeModal() {
        modal.classList.add('opacity-0');
        setTimeout(() => {
            modal.classList.add('hidden');
            document.body.style.overflow = '';
        }, 300);
    }

    function renderModalContent() {
        mainImage.classList.add('opacity-0', 'scale-95');
        setTimeout(() => {
            mainImage.src = currentImages[currentIndex];
            mainImage.classList.remove('opacity-0', 'scale-95');
        }, 300);

        galleryCounter.textContent = `${currentIndex + 1} / ${currentImages.length}`;

        thumbnailsContainer.innerHTML = currentImages.map((src, idx) => `
            <div onclick="setIndex(${idx})" class="w-16 h-16 md:w-20 md:h-20 flex-shrink-0 cursor-pointer rounded-lg border-2 overflow-hidden transition-all duration-300 ${idx === currentIndex ? 'border-primary opacity-100 scale-105' : 'border-transparent opacity-50'}">
                <img src="${src}" class="w-full h-full object-cover">
            </div>
        `).join('');
    }

    window.setIndex = (idx) => { currentIndex = idx; renderModalContent(); };
    btnNext.onclick = () => { currentIndex = (currentIndex + 1) % currentImages.length; renderModalContent(); };
    btnPrev.onclick = () => { currentIndex = (currentIndex - 1 + currentImages.length) % currentImages.length; renderModalContent(); };
    btnClose.onclick = backdrop.onclick = closeModal;

    document.addEventListener('keydown', (e) => {
        if (modal.classList.contains('hidden')) return;
        if (e.key === 'Escape') closeModal();
        if (e.key === 'ArrowRight') btnNext.onclick();
        if (e.key === 'ArrowLeft') btnPrev.onclick();
    });
</script>
@endpush