@extends('layouts.app')

@section('title', 'Katalog Produk - ' . setting('store_name'))

@section('content')
<div class="bg-white min-h-screen">
    <!-- Shop Header -->
    <div class="bg-slate-50 border-b border-slate-100 pt-32 pb-16">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="max-w-3xl">
                <nav class="flex mb-6 text-xs font-black uppercase tracking-[0.2em] text-slate-400" aria-label="Breadcrumb">
                    <ol class="flex items-center space-x-2">
                        <li><a href="{{ url('/') }}" class="hover:text-primary transition-colors">Beranda</a></li>
                        <li><svg class="h-4 w-4" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" /></svg></li>
                        <li class="text-slate-900">Katalog Toko</li>
                    </ol>
                </nav>
                <h1 class="text-4xl sm:text-5xl font-black text-slate-900 mb-6">Jelajahi Koleksi Kami</h1>
                <p class="text-lg text-slate-500 leading-relaxed">Temukan produk terbaik yang dikurasi khusus untuk memenuhi standar gaya hidup Anda yang eksklusif.</p>
            </div>
        </div>
    </div>

    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
        <div class="flex flex-col lg:flex-row gap-12">
            
            <!-- Sidebar Filters (Desktop) -->
            <div class="hidden lg:block w-64 flex-shrink-0">
                <div class="sticky top-32 space-y-12">
                    <!-- Categories -->
                    <div>
                        <h3 class="text-xs font-black uppercase tracking-[0.2em] text-slate-900 mb-6">Kategori</h3>
                        <div class="space-y-3">
                            <a href="{{ url('/shop') }}" class="flex items-center justify-between group">
                                <span class="text-sm font-bold {{ !request('category') ? 'text-primary' : 'text-slate-500 group-hover:text-primary' }} transition-colors">Semua Produk</span>
                                <span class="text-[10px] font-black text-slate-300">{{ $totalProductsCount ?? '' }}</span>
                            </a>
                            @foreach($categories as $category)
                                <a href="{{ url('/shop?category=' . $category->slug) }}" class="flex items-center justify-between group">
                                    <span class="text-sm font-bold {{ request('category') == $category->slug ? 'text-primary' : 'text-slate-500 group-hover:text-primary' }} transition-colors">{{ $category->name }}</span>
                                    <span class="text-[10px] font-black text-slate-300">{{ $category->products_count }}</span>
                                </a>
                            @endforeach
                        </div>
                    </div>

                    <!-- Price Filter (Placeholder) -->
                    <div>
                        <h3 class="text-xs font-black uppercase tracking-[0.2em] text-slate-900 mb-6">Urutkan</h3>
                        <div class="space-y-2">
                            <select onchange="window.location.href = this.value" class="w-full bg-slate-50 border-none rounded-xl text-sm font-bold text-slate-700 focus:ring-2 focus:ring-primary/20 py-3 px-4">
                                <option value="{{ request()->fullUrlWithQuery(['sort' => 'latest']) }}" {{ request('sort') == 'latest' ? 'selected' : '' }}>Terbaru</option>
                                <option value="{{ request()->fullUrlWithQuery(['sort' => 'price_low']) }}" {{ request('sort') == 'price_low' ? 'selected' : '' }}>Harga: Rendah ke Tinggi</option>
                                <option value="{{ request()->fullUrlWithQuery(['sort' => 'price_high']) }}" {{ request('sort') == 'price_high' ? 'selected' : '' }}>Harga: Tinggi ke Rendah</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Product Grid -->
            <div class="flex-grow">
                <!-- Mobile Filters Toggle -->
                <div class="lg:hidden flex items-center justify-between mb-8 pb-8 border-b border-slate-100">
                    <p class="text-sm font-bold text-slate-500">Menampilkan <span class="text-slate-900">{{ $products->total() }}</span> Produk</p>
                    <button class="flex items-center gap-2 px-4 py-2 bg-slate-100 rounded-xl text-xs font-black uppercase tracking-widest text-slate-900">
                        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"/></svg>
                        Filter
                    </button>
                </div>

                <!-- Active Filter Tags -->
                @if(request('category') || request('q'))
                    <div class="flex flex-wrap gap-2 mb-8">
                        @if(request('category'))
                            <a href="{{ request()->fullUrlWithQuery(['category' => null]) }}" class="inline-flex items-center gap-2 px-3 py-1.5 bg-primary/10 text-primary text-[10px] font-black uppercase rounded-lg">
                                Category: {{ request('category') }}
                                <svg class="h-3 w-3" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" /></svg>
                            </a>
                        @endif
                        @if(request('q'))
                            <a href="{{ request()->fullUrlWithQuery(['q' => null]) }}" class="inline-flex items-center gap-2 px-3 py-1.5 bg-primary/10 text-primary text-[10px] font-black uppercase rounded-lg">
                                Search: {{ request('q') }}
                                <svg class="h-3 w-3" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" /></svg>
                            </a>
                        @endif
                    </div>
                @endif

                @if($products->isEmpty())
                    <div class="text-center py-20 bg-slate-50 rounded-[3rem] border border-dashed border-slate-200">
                        <div class="w-20 h-20 bg-white rounded-3xl flex items-center justify-center mx-auto mb-6 text-slate-300">
                            <svg class="h-10 w-10" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg>
                        </div>
                        <h2 class="text-xl font-bold text-slate-900 mb-2">Produk tidak ditemukan</h2>
                        <p class="text-slate-500 text-sm">Coba ubah kata kunci atau filter pencarian Anda.</p>
                        <a href="{{ url('/shop') }}" class="inline-block mt-8 text-sm font-black uppercase tracking-widest text-primary hover:underline underline-offset-8">Kembali ke Katalog</a>
                    </div>
                @else
                    <div class="grid grid-cols-2 xl:grid-cols-3 gap-x-8 gap-y-16">
                        @foreach($products as $product)
                            <div class="group flex flex-col animate-reveal" style="animation-delay: {{ ($loop->index % 12) * 0.05 }}s">
                                <a href="{{ url('/shop/' . $product->slug) }}" class="relative aspect-[3/4] rounded-[2rem] overflow-hidden bg-slate-50 mb-6 premium-shadow">
                                    <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 transition-transform duration-700 group-hover:scale-110">
                                    
                                    <!-- Badges -->
                                    <div class="absolute top-5 left-5 flex flex-col gap-2">
                                        @if($product->price_was)
                                            <span class="px-3 py-1 bg-red-500 text-white text-[9px] font-black uppercase tracking-widest rounded-lg">Sale</span>
                                        @endif
                                        @if($product->is_featured)
                                            <span class="px-3 py-1 bg-primary text-white text-[9px] font-black uppercase tracking-widest rounded-lg">Featured</span>
                                        @endif
                                    </div>
                                </a>
                                
                                <div class="px-1">
                                    <p class="text-[10px] font-black uppercase tracking-[0.2em] text-slate-400 mb-2">{{ $product->category->name }}</p>
                                    <h3 class="text-lg font-black text-slate-900 mb-2 group-hover:text-primary transition-all">
                                        <a href="{{ url('/shop/' . $product->slug) }}">{{ $product->name }}</a>
                                    </h3>
                                    <div class="flex items-center gap-3">
                                        <span class="text-xl font-black text-primary">Rp {{ number_format($product->price, 0, ',', '.') }}</span>
                                        @if($product->price_was)
                                            <span class="text-xs text-slate-400 line-through">Rp {{ number_format($product->price_was, 0, ',', '.') }}</span>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>

                    <!-- Pagination -->
                    <div class="mt-20 pt-10 border-t border-slate-100">
                        {{ $products->links() }}
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection