@extends('layouts.shop')

@section('title', 'Catálogo | BasePro Shop')

@section('content')
<div class="relative bg-muted/30 py-16 overflow-hidden">
    <!-- Background Decor -->
    <div class="absolute top-0 right-0 -translate-y-1/2 translate-x-1/4 w-96 h-96 bg-primary/5 rounded-full blur-3xl pointer-events-none"></div>
    <div class="absolute bottom-0 left-0 translate-y-1/2 -translate-x-1/4 w-72 h-72 bg-blue-500/5 rounded-full blur-3xl pointer-events-none"></div>

    <div class="container mx-auto px-4 md:px-8 relative">
        <div class="flex flex-col md:flex-row md:items-end justify-between gap-6">
            <div class="space-y-2">
                <h1 class="text-4xl md:text-5xl font-extrabold  text-foreground">Catálogo de Productos</h1>
                <p class="text-muted-foreground max-w-2xl text-lg">
                    Explora nuestra selección exclusiva. Calidad premium diseñada para tu estilo de vida.
                </p>
            </div>
            <div class="hidden md:flex items-center gap-2 text-sm font-medium text-muted-foreground bg-background/50 backdrop-blur-sm px-4 py-2 rounded-full border">
                <span class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></span>
                Sincronizado en tiempo real
            </div>
        </div>
    </div>
</div>

<div class="container mx-auto px-4 md:px-8 py-12 flex flex-col md:flex-row gap-8" 
     x-data="catalogComponent()">
    
    <!-- Mobile Filter Toggle -->
    <div class="md:hidden mb-4">
        <button @click="mobileFiltersOpen = !mobileFiltersOpen" class="w-full flex items-center justify-center gap-2 rounded-md border border-input bg-background px-4 py-2 text-sm font-medium shadow-sm hover:bg-accent hover:text-accent-foreground">
            <svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/></svg>
            Filtrar Productos
        </button>
    </div>

    <!-- Sidebar Filters (Responsive Off-Canvas) -->
    <aside class="fixed inset-y-0 left-0 z-50 w-3/4 max-w-xs bg-background p-6 shadow-2xl transition-transform duration-300 ease-in-out -translate-x-full md:relative md:translate-x-0 md:bg-transparent md:p-0 md:shadow-none md:w-64 md:block flex-shrink-0 overflow-y-auto md:top-0"
           :class="{ 'translate-x-0': mobileFiltersOpen, '-translate-x-full': !mobileFiltersOpen }"
           x-cloak>
        
        <div class="flex justify-between items-center md:hidden mb-6">
            <h2 class="text-lg font-bold">Filtros</h2>
            <button @click="mobileFiltersOpen = false" class="p-2 hover:bg-muted rounded-full">
                <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
            </button>
        </div>

        <div class="md:bg-card/50 md:backdrop-blur-sm md:border md:rounded-3xl md:p-6 md:shadow-xl md:shadow-primary/5">
            <!-- Search Form -->
            <form action="{{ route('shop.catalog') }}" method="GET" class="relative mb-6">
                <!-- Preserve other filters -->
                @if(request('category')) <input type="hidden" name="category" value="{{ request('category') }}"> @endif
                @if(request('brand')) <input type="hidden" name="brand" value="{{ request('brand') }}"> @endif
                
                <div class="relative">
                    <input 
                        type="text" 
                        name="search" 
                        value="{{ request('search') }}"
                        placeholder="Buscar..." 
                        class="flex h-11 w-full rounded-xl border border-input bg-muted/50 px-3 py-2 text-sm shadow-inner transition-all focus:bg-background focus:ring-2 focus:ring-primary/20 pl-10 pr-8"
                    >
                    <svg class="w-4 h-4 absolute left-3.5 top-3.5 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" 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>
                    
                    @if(request('search'))
                        <a href="{{ route('shop.catalog', request()->except(['search', 'page'])) }}" class="absolute right-2 top-2.5 text-muted-foreground hover:text-foreground" title="Limpiar búsqueda">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
                        </a>
                    @endif
                </div>
            </form>

            <!-- Active Filters Summary -->
            @if(request('category') || request('brand') || request('search') || request('on_sale'))
                <div class="mb-6 pb-6 border-b">
                    <div class="flex items-center justify-between mb-2">
                        <h3 class="font-semibold text-sm">Filtros Activos</h3>
                        <a href="{{ route('shop.catalog') }}" class="text-xs text-destructive hover:underline">Borrar todo</a>
                    </div>
                    <div class="flex flex-wrap gap-2">
                        @if(request('on_sale'))
                            <span class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold bg-primary/10 text-primary border-transparent">
                                En Oferta
                                <a href="{{ route('shop.catalog', request()->except(['on_sale', 'page'])) }}" class="ml-1 hover:text-primary/80">×</a>
                            </span>
                        @endif
                        @if(request('category'))
                            <span class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold bg-primary/10 text-primary border-transparent">
                                Cat: {{ request('category') }}
                                <a href="{{ route('shop.catalog', request()->except(['category', 'page'])) }}" class="ml-1 hover:text-primary/80">×</a>
                            </span>
                        @endif
                        @if(request('brand'))
                            <span class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold bg-primary/10 text-primary border-transparent">
                                Marca: {{ request('brand') }}
                                <a href="{{ route('shop.catalog', request()->except(['brand', 'page'])) }}" class="ml-1 hover:text-primary/80">×</a>
                            </span>
                        @endif
                        @if(request('search'))
                            <span class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold bg-primary/10 text-primary border-transparent">
                                "{{ request('search') }}"
                                <a href="{{ route('shop.catalog', request()->except(['search', 'page'])) }}" class="ml-1 hover:text-primary/80">×</a>
                            </span>
                        @endif
                    </div>
                </div>
            @endif



            <div class="space-y-4">
                <h3 class="font-semibold flex items-center gap-2">Categorías</h3>
                <div class="flex flex-col gap-1 max-h-[500px] overflow-y-auto scrollbar-thin pr-2">
                    <a href="{{ route('shop.catalog', request()->except(['category', 'page'])) }}" class="text-sm hover:text-primary mb-2 {{ !request('category') ? 'font-bold text-primary' : 'text-muted-foreground' }}">
                        Todas
                    </a>
                    
                    @foreach($categories as $cat)
                        @include('shop.partials.category-item', ['category' => $cat, 'level' => 0, 'expandedSlugs' => $expandedSlugs ?? []])
                    @endforeach
                </div>
            </div>

            <div class="pt-6 border-t mt-6">
                <!-- Offers Toggle -->
                 <a href="{{ route('shop.catalog', array_merge(request()->except(['on_sale', 'page']), ['on_sale' => request('on_sale') ? null : '1'])) }}" 
                   class="flex items-center justify-between p-3 rounded-lg border transition-colors {{ request('on_sale') ? 'bg-primary/5 border-primary' : 'bg-card hover:bg-accent' }}">
                    <div class="flex items-center gap-3">
                        <div class="flex h-5 w-5 items-center justify-center rounded border {{ request('on_sale') ? 'bg-primary border-primary text-primary-foreground' : 'border-input' }}">
                            @if(request('on_sale'))
                                <svg class="h-3.5 w-3.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                            @endif
                        </div>
                        <span class="text-sm font-medium">Solo Ofertas</span>
                    </div>
                    <span class="text-xs font-bold text-destructive">%</span>
                </a>
            </div>

            <div class="space-y-4 pt-6 border-t mt-6">
                <h3 class="font-semibold text-sm uppercase  text-muted-foreground/70">Marcas</h3>
                <div class="flex flex-wrap gap-2">
                    @foreach($brands as $brand)
                        <a href="{{ route('shop.catalog', array_merge(request()->except('page'), ['brand' => $brand->slug])) }}" 
                           class="inline-flex items-center rounded-full border px-3 py-1 text-xs font-medium transition-all duration-200 border-border hover:border-primary/50 {{ request('brand') == $brand->slug ? 'bg-primary text-primary-foreground shadow-md scale-105' : 'bg-background text-muted-foreground hover:bg-accent' }}">
                            {{ $brand->name }}
                        </a>
                    @endforeach
                </div>
            </div>
        </div>
    </aside>

    <!-- Overlay for Mobile Sidebar -->
    <div x-show="mobileFiltersOpen" @click="mobileFiltersOpen = false" class="fixed inset-0 z-40 bg-background/80 backdrop-blur-sm md:hidden" x-transition.opacity x-cloak></div>

    <!-- Product Grid -->
    <div class="flex-1">
        
        <!-- Sorting Toolbar -->
        <div class="flex justify-end mb-6">
            <form id="sortForm" action="{{ route('shop.catalog') }}" method="GET" class="flex items-center gap-2">
                <!-- Preserve other filters -->
                @if(request('category')) <input type="hidden" name="category" value="{{ request('category') }}"> @endif
                @if(request('brand')) <input type="hidden" name="brand" value="{{ request('brand') }}"> @endif
                @if(request('search')) <input type="hidden" name="search" value="{{ request('search') }}"> @endif
                @if(request('on_sale')) <input type="hidden" name="on_sale" value="1"> @endif
                
                <label for="sort" class="text-sm font-medium text-muted-foreground">Ordenar por:</label>
                <div class="relative">
                    <select name="sort" id="sort" onchange="this.form.submit()" 
                            class="h-9 rounded-md border border-input bg-background pl-3 pr-10 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50">
                        <option value="latest" {{ request('sort') == 'latest' ? 'selected' : '' }}>Más Recientes</option>
                        <option value="price_asc" {{ request('sort') == 'price_asc' ? 'selected' : '' }}>Precio: Menor a Mayor</option>
                        <option value="price_desc" {{ request('sort') == 'price_desc' ? 'selected' : '' }}>Precio: Mayor a Menor</option>
                        <option value="name_asc" {{ request('sort') == 'name_asc' ? 'selected' : '' }}>Nombre: A-Z</option>
                    </select>
                </div>
            </form>
        </div>

        @if($products->isEmpty())
            <div class="text-center py-20 text-muted-foreground">
                No se encontraron productos con estos filtros.
            </div>
        @else
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
                @foreach($products as $product)
                    <div class="group relative flex flex-col" 
                         x-data="{ shown: false }" 
                         x-intersect="shown = true"
                         x-intersect:leave="shown = false"> 
                        <div :class="shown ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-12'"
                             :style="{ transitionDelay: ({{ $loop->index }} % 4) * 100 + 'ms' }"
                             class="relative rounded-2xl border bg-card text-card-foreground shadow-sm transition-all duration-1000 ease-out hover:shadow-2xl hover:-translate-y-2 overflow-hidden flex flex-col h-full ring-1 ring-border/50">
                            <!-- Image Container -->
                            <div class="aspect-[4/5] bg-muted relative overflow-hidden">
                                <a href="{{ route('shop.show', $product->slug) }}" class="block w-full h-full">
                                    @if($product->image_path)
                                        <img 
                                            src="{{ $product->image_path }}" 
                                            alt="{{ $product->name }}" 
                                            class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
                                            loading="lazy"
                                        >
                                    @else
                                        <div class="w-full h-full flex items-center justify-center text-muted-foreground bg-muted/50">
                                            <svg class="w-12 h-12 opacity-20" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                                        </div>
                                    @endif
                                </a>

                                <!-- Quick View Overlay (Glassmorphism) -->
                                <div class="absolute inset-x-0 bottom-4 px-4 translate-y-12 opacity-0 group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-300">
                                    <button @click.prevent="openQuickView({{ $product->id }})" 
                                            class="w-full py-2.5 bg-background/90 backdrop-blur-md rounded-xl text-xs font-bold shadow-lg hover:bg-primary hover:text-primary-foreground transition-colors flex items-center justify-center gap-2">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
                                        Vista Rápida
                                    </button>
                                </div>

                                <!-- Offer Badge (Integrated Premium Design) -->
                                @if($product->compare_price && $product->compare_price > 0)
                                    @php
                                        $discount = round((($product->compare_price - $product->price) / $product->compare_price) * 100);
                                    @endphp
                                    <div class="absolute top-3 left-3 transform transition-transform duration-300 hover:scale-110">
                                        <span class="bg-red-600 text-white text-[10px] font-black px-3 py-1.5 rounded-full shadow-lg uppercase  border border-white/10 flex items-center gap-2">
                                            Oferta 
                                            <span class="bg-white/20 px-1.5 py-0.5 rounded-md text-[9px] font-black tracking-normal">-{{ $discount }}%</span>
                                        </span>
                                    </div>
                                @endif
                                
                                <!-- Brand floating tag -->
                                @if($product->brand)
                                    <div class="absolute top-3 right-3">
                                        <span class="bg-background/80 backdrop-blur-sm text-sm font-bold px-3 py-1 rounded-xl border shadow-sm text-foreground/80">
                                            {{ $product->brand->name }}
                                        </span>
                                    </div>
                                @endif
                            </div>

                            <!-- Content -->
                            <div class="p-5 flex flex-col flex-1 bg-gradient-to-b from-transparent to-muted/5">
                                @if($product->category)
                                    <div class="flex items-center gap-1.5 mb-2">
                                        <span class="w-1 h-1 rounded-full bg-primary/50"></span>
                                        <span class="text-[10px] font-bold text-muted-foreground uppercase tracking-widest">{{ $product->category->name }}</span>
                                    </div>
                                @endif
                                
                                <a href="{{ route('shop.show', $product->slug) }}" class="flex-1">
                                    <h3 class="font-bold text-base leading-tight mb-3 hover:text-primary transition-colors line-clamp-2" title="{{ $product->name }}">
                                        {{ $product->name }}
                                    </h3>
                                </a>

                                <div class="flex items-center justify-between mt-auto pt-4 border-t border-border/40">
                                    <div class="flex flex-col">
                                        @if($product->compare_price)
                                            <span class="text-xs text-muted-foreground line-through opacity-60">
                                                ${{ number_format($product->compare_price, 2) }}
                                            </span>
                                        @endif
                                        <span class="font-extrabold text-xl text-foreground">
                                            ${{ number_format($product->price, 2) }}
                                        </span>
                                    </div>
                                    <button 
                                        @click.prevent="$dispatch('add-to-cart', { product: { id: {{ $product->id }}, name: '{{ addslashes($product->name) }}', price: {{ $product->price }}, image: '{{ $product->image_path }}', stock: {{ $product->stock }} } })"
                                        class="p-2.5 bg-primary text-primary-foreground rounded-xl shadow-lg shadow-primary/20 hover:scale-110 active:scale-95 transition-all"
                                        title="Agregar al Carrito">
                                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 4v16m8-8H4"/></svg>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

            <!-- Pagination -->
            <div class="mt-8">
                {{ $products->links() }}
            </div>
        @endif
    </div>

    <!-- Global Quick View Modal -->
    <div x-show="quickViewOpen" class="fixed inset-0 z-[60] flex items-center justify-center p-4 md:p-8" x-cloak>
        <div class="absolute inset-0 bg-background/80 backdrop-blur-sm" @click="quickViewOpen = false"></div>
        <div class="relative bg-card w-full max-w-4xl max-h-[90vh] overflow-y-auto rounded-lg shadow-2xl animate-in fade-in zoom-in duration-200 border" @click.stop>
            <button @click="quickViewOpen = false" class="absolute top-4 right-4 z-10 p-2 bg-background/50 rounded-full hover:bg-background transition-colors">
                <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
            </button>
            <div x-html="quickViewContent"></div>
        </div>
    </div>
</div>
@push('scripts')
<script>
    function catalogComponent() {
        return {
            mobileFiltersOpen: false,
            quickViewOpen: false,
            quickViewContent: '',
            loadingQuickView: false,
            
            async openQuickView(id) {
                this.loadingQuickView = true;
                this.quickViewOpen = true;
                this.quickViewContent = `
                    <div class="p-8 space-y-4">
                        <div class="aspect-square w-full skeleton rounded-xl"></div>
                        <div class="h-8 w-3/4 skeleton rounded-lg"></div>
                        <div class="h-4 w-full skeleton rounded-md"></div>
                        <div class="h-4 w-5/6 skeleton rounded-md"></div>
                    </div>
                `;
                
                try {
                    const response = await fetch('/shop/quick-view/' + id);
                    if (!response.ok) throw new Error('Error al cargar');
                    this.quickViewContent = await response.text();
                } catch (e) {
                    this.quickViewContent = '<div class="p-8 text-center text-red-500 font-bold">No se pudo cargar el producto.</div>';
                } finally {
                    this.loadingQuickView = false;
                }
            }
        }
    }
</script>
@endpush
@endsection