@extends('layouts.shop')

@section('title', 'Shop - Area 51 Booze')

@section('content')
<div class="container mx-auto px-4 py-8">
    <!-- Filters Section -->
    <div class="mb-8 bg-white p-6 rounded-lg shadow-md">
        <div class="grid md:grid-cols-4 gap-4">
            <!-- Category Filter -->
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">Category</label>
                <select 
                    x-model="categoryFilter"
                    @change="applyFilters()"
                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                >
                    <option value="">All Categories</option>
                    @foreach($categories as $category)
                        <option value="{{ $category->id }}" {{ request('category') == $category->id ? 'selected' : '' }}>
                            {{ $category->name }}
                        </option>
                    @endforeach
                </select>
            </div>
            
            <!-- Price Range -->
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">Min Price</label>
                <input 
                    type="number" 
                    x-model="minPrice"
                    @input.debounce.500ms="applyFilters()"
                    placeholder="0"
                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                    value="{{ request('min_price') }}"
                >
            </div>
            
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">Max Price</label>
                <input 
                    type="number" 
                    x-model="maxPrice"
                    @input.debounce.500ms="applyFilters()"
                    placeholder="1000"
                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                    value="{{ request('max_price') }}"
                >
            </div>
            
            <!-- Sort By -->
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">Sort By</label>
                <select 
                    x-model="sortBy"
                    @change="applyFilters()"
                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                >
                    <option value="name_asc" {{ request('order') == 'name_asc' ? 'selected' : '' }}>Name A-Z</option>
                    <option value="name_desc" {{ request('order') == 'name_desc' ? 'selected' : '' }}>Name Z-A</option>
                    <option value="price_asc" {{ request('order') == 'price_asc' ? 'selected' : '' }}>Price Low-High</option>
                    <option value="price_desc" {{ request('order') == 'price_desc' ? 'selected' : '' }}>Price High-Low</option>
                </select>
            </div>
        </div>
    </div>

    <!-- Search Results Info -->
    @if(request('q'))
        <div class="mb-6">
            <p class="text-gray-600">
                Showing results for "<strong>{{ request('q') }}</strong>"
                @if(isset($products))
                    ({{ $products->total() }} products found)
                @endif
            </p>
        </div>
    @endif

    <!-- Products Grid -->
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
        @if(isset($products) && $products->count() > 0)
            @foreach($products as $product)
                <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300">
                    <!-- Product Image -->
                    <div class="relative">
                        <img 
                            src="{{ $product->image_url }}" 
                            alt="{{ $product->name }}" 
                            class="w-full h-48 object-cover cursor-pointer"
                            @click="showProduct({
                                id: {{ $product->id }},
                                name: '{{ addslashes($product->name) }}',
                                price: {{ $product->price }},
                                image: '{{ $product->image_url }}',
                                description: '{{ addslashes($product->description ?? '') }}',
                                stock: {{ $product->stock }},
                                unit: '{{ $product->unit }}',
                                pricing_type: '{{ $product->pricing_type }}',
                                min_quantity: {{ $product->min_quantity ?? 1 }}
                            })"
                        >
                        
                        <!-- Stock Badge -->
                        @if($product->stock <= 0)
                            <div class="absolute top-2 right-2 bg-red-500 text-white px-2 py-1 rounded text-xs">
                                Out of Stock
                            </div>
                        @elseif($product->stock <= 10)
                            <div class="absolute top-2 right-2 bg-orange-500 text-white px-2 py-1 rounded text-xs">
                                Low Stock
                            </div>
                        @endif
                    </div>

                    <!-- Product Info -->
                    <div class="p-4">
                        <h3 class="text-lg font-semibold text-gray-800 mb-2 line-clamp-2">{{ $product->name }}</h3>
                        <p class="text-xl font-bold text-blue-600 mb-3">
                            ${{ number_format($product->price, 2) }} 
                            <span class="text-sm text-gray-500">per {{ $product->unit }}</span>
                        </p>
                        
                        <!-- Quick Add to Cart -->
                        <div class="flex items-center justify-between">
                            <button 
                                @click="addToCart({{ $product->id }}, 1)"
                                {{ $product->stock <= 0 ? 'disabled' : '' }}
                                class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition-colors disabled:bg-gray-300 disabled:cursor-not-allowed flex-1 mr-2"
                            >
                                <i class="fas fa-cart-plus mr-2"></i>
                                Add to Cart
                            </button>
                            
                            <button 
                                @click="showProduct({
                                    id: {{ $product->id }},
                                    name: '{{ addslashes($product->name) }}',
                                    price: {{ $product->price }},
                                    image: '{{ $product->image_url }}',
                                    description: '{{ addslashes($product->description ?? '') }}',
                                    stock: {{ $product->stock }},
                                    unit: '{{ $product->unit }}',
                                    pricing_type: '{{ $product->pricing_type }}',
                                    min_quantity: {{ $product->min_quantity ?? 1 }}
                                })"
                                class="bg-gray-200 text-gray-700 px-3 py-2 rounded hover:bg-gray-300 transition-colors"
                            >
                                <i class="fas fa-eye"></i>
                            </button>
                        </div>
                    </div>
                </div>
            @endforeach
        @else
            <!-- No Products Found -->
            <div class="col-span-full text-center py-12">
                <i class="fas fa-search text-6xl text-gray-300 mb-4"></i>
                <h3 class="text-xl font-semibold text-gray-600 mb-2">No products found</h3>
                <p class="text-gray-500">
                    @if(request('q'))
                        Try adjusting your search terms or filters.
                    @else
                        Check back later for new products.
                    @endif
                </p>
            </div>
        @endif
    </div>

    <!-- Pagination -->
    @if(isset($products) && $products->hasPages())
        <div class="mt-12 flex justify-center">
            {{ $products->appends(request()->query())->links() }}
        </div>
    @endif
</div>

<script>
    // Extend the Alpine.js data with filter functionality
    document.addEventListener('alpine:init', () => {
        Alpine.data('shopApp', () => ({
            ...window.shopApp(),
            categoryFilter: '{{ request("category") }}',
            minPrice: '{{ request("min_price") }}',
            maxPrice: '{{ request("max_price") }}',
            sortBy: '{{ request("order", "name_asc") }}',

            applyFilters() {
                const params = new URLSearchParams();
                
                if (this.searchQuery) params.set('q', this.searchQuery);
                if (this.categoryFilter) params.set('category', this.categoryFilter);
                if (this.minPrice) params.set('min_price', this.minPrice);
                if (this.maxPrice) params.set('max_price', this.maxPrice);
                if (this.sortBy) params.set('order', this.sortBy);
                
                const url = this.searchQuery ? '/shop/search' : '/shop';
                window.location.href = `${url}?${params.toString()}`;
            }
        }));
    });
</script>
@endsection