@extends('layouts.modern')

@section('title', 'Collection - ' . setting('store_name'))

@section('content')
<div class="bg-slate-950 min-h-screen text-white pt-40 pb-20">
    <div class="max-w-7xl mx-auto px-6">
        <!-- Header -->
        <div class="mb-24 animate-reveal">
            <h1 class="font-modern text-5xl sm:text-7xl font-black tracking-tighter mb-8 leading-none">Curated Collection.</h1>
            <p class="text-slate-500 max-w-2xl text-lg font-medium leading-relaxed">Discover our exclusive range of products, designed for those who appreciate the finer details of modern craftsmanship.</p>
        </div>

        <div class="flex flex-col lg:flex-row gap-20">
            <!-- Sidebar -->
            <div class="lg:w-64 flex-shrink-0 animate-reveal" style="animation-delay: 0.1s">
                <div class="sticky top-40 space-y-16">
                    <div>
                        <h3 class="text-[10px] font-black uppercase tracking-[0.4em] text-white/30 mb-8">Categories</h3>
                        <div class="space-y-4">
                            <a href="{{ url('/shop') }}" class="flex items-center justify-between group transition-all">
                                <span class="text-sm font-bold {{ !request('category') ? 'text-primary' : 'text-slate-500 group-hover:text-white' }}">All Items</span>
                                <span class="text-[9px] font-black text-white/10 group-hover:text-white/40">{{ $totalProductsCount ?? '' }}</span>
                            </a>
                            @foreach($categories as $category)
                                <a href="{{ url('/shop?category=' . $category->slug) }}" class="flex items-center justify-between group transition-all">
                                    <span class="text-sm font-bold {{ request('category') == $category->slug ? 'text-primary' : 'text-slate-500 group-hover:text-white' }}">{{ $category->name }}</span>
                                    <span class="text-[9px] font-black text-white/10 group-hover:text-white/40">{{ $category->products_count }}</span>
                                </a>
                            @endforeach
                        </div>
                    </div>

                    <div>
                        <h3 class="text-[10px] font-black uppercase tracking-[0.4em] text-white/30 mb-8">Sort By</h3>
                        <select onchange="window.location.href = this.value" class="w-full bg-white/5 border border-white/10 rounded-2xl text-xs font-bold text-white px-5 py-4 focus:ring-1 focus:ring-primary focus:border-primary appearance-none">
                            <option value="{{ request()->fullUrlWithQuery(['sort' => 'latest']) }}" {{ request('sort') == 'latest' ? 'selected' : '' }}>New Arrivals</option>
                            <option value="{{ request()->fullUrlWithQuery(['sort' => 'price_low']) }}" {{ request('sort') == 'price_low' ? 'selected' : '' }}>Price: Low to High</option>
                            <option value="{{ request()->fullUrlWithQuery(['sort' => 'price_high']) }}" {{ request('sort') == 'price_high' ? 'selected' : '' }}>Price: High to Low</option>
                        </select>
                    </div>
                </div>
            </div>

            <!-- Grid -->
            <div class="flex-grow">
                @if($products->isEmpty())
                    <div class="bg-white/5 border border-dashed border-white/10 rounded-[3rem] py-32 text-center">
                        <p class="text-slate-500 font-bold">No products found in this selection.</p>
                        <a href="{{ url('/shop') }}" class="mt-8 inline-block text-xs font-black uppercase tracking-widest text-primary hover:text-white">Reset Filters</a>
                    </div>
                @else
                    <div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-x-10 gap-y-20">
                        @foreach($products as $product)
                            <div class="group flex flex-col animate-reveal" style="animation-delay: {{ ($loop->index % 12) * 0.1 }}s">
                                <a href="{{ url('/shop/' . $product->slug) }}" class="relative aspect-[3/4] rounded-[3rem] overflow-hidden bg-white/5 mb-8 group-hover:shadow-[0_40px_80px_rgba(139,92,246,0.15)] transition-all duration-700">
                                    <img src="{{ $product->primaryImage?->image_path ? asset('storage/' . $product->primaryImage->image_path) : 'https://placehold.co/600x800?text=' . $product->name }}" 
                                         alt="{{ $product->name }}" 
                                         class="w-full h-full object-cover grayscale group-hover:grayscale-0 group-hover:scale-110 transition-all duration-1000">
                                    
                                    <div class="absolute top-6 left-6 flex flex-col gap-2">
                                        @if($product->price_was)
                                            <span class="px-4 py-1.5 bg-red-500 text-white text-[9px] font-black uppercase tracking-widest rounded-xl">Sale</span>
                                        @endif
                                        @if($product->is_featured)
                                            <span class="px-4 py-1.5 bg-primary text-white text-[9px] font-black uppercase tracking-widest rounded-xl">Featured</span>
                                        @endif
                                    </div>
                                </a>
                                
                                <div class="px-2">
                                    <p class="text-[9px] font-black uppercase tracking-[0.3em] text-white/30 mb-3">{{ $product->category->name }}</p>
                                    <h3 class="text-xl font-black mb-3 group-hover:text-primary transition-colors">
                                        <a href="{{ url('/shop/' . $product->slug) }}">{{ $product->name }}</a>
                                    </h3>
                                    <div class="flex items-center gap-4">
                                        <span class="text-2xl font-black">Rp {{ number_format($product->price, 0, ',', '.') }}</span>
                                        @if($product->price_was)
                                            <span class="text-sm text-white/20 line-through">Rp {{ number_format($product->price_was, 0, ',', '.') }}</span>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>

                    <div class="mt-32 pt-20 border-t border-white/5 modern-pagination">
                        {{ $products->links() }}
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>

<style>
    .modern-pagination .pagination { @apply flex gap-3; }
    .modern-pagination .page-link { @apply w-12 h-12 flex items-center justify-center rounded-xl bg-white/5 border border-white/10 text-xs font-black transition-all hover:bg-primary hover:border-primary; }
    .modern-pagination .page-item.active .page-link { @apply bg-primary border-primary; }
</style>
@endsection