@extends('layouts.app')

{{-- ✅ PRIORITY FIX: Add missing SEO sections --}}
@section('title', request('search') ? __('Search Results for') . ' "' . request('search') . '"' : __('All Products') . ' - ' . config('app.name'))

@push('meta')
    {{-- ✅ CRITICAL: Meta Description --}}
    <meta name="description"
          content="{{ request('search') ? __('Search results for') . ' "' . request('search') . '" - ' . __('Find the best products at great prices') : __('Discover our amazing collection of') . ' ' . number_format($filterStats['total_products']) . ' ' . __('products with great prices, fast shipping and quality guarantee') }}">

    {{-- ✅ CRITICAL: Meta Keywords --}}
    <meta name="keywords"
          content="{{ __('products, online shopping, ecommerce, buy online, best prices') }}{{ request('search') ? ', ' . request('search') : '' }}">

    {{-- ✅ CRITICAL: Open Graph Tags --}}
    <meta property="og:title"
          content="{{ request('search') ? __('Search Results for') . ' "' . request('search') . '"' : __('All Products') }} - {{ config('app.name') }}">
    <meta property="og:description"
          content="{{ __('Discover our amazing collection of products with great prices and quality') }}">
    <meta property="og:type" content="website">
    <meta property="og:url" content="{{ request()->url() }}">
    <meta property="og:site_name" content="{{ config('app.name') }}">

    {{-- ✅ Twitter Card --}}
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title"
          content="{{ request('search') ? __('Search Results for') . ' "' . request('search') . '"' : __('All Products') }}">
    <meta name="twitter:description" content="{{ __('Discover our amazing collection of products') }}">

    {{-- ✅ Additional SEO Meta --}}
    <meta name="robots" content="index, follow">
    <link rel="canonical" href="{{ request()->url() }}">
@endpush

@push('structured_data')
    {{-- ✅ CRITICAL: Product Listing Structured Data --}}
    <script type="application/ld+json">
        {
            "@context": "https://schema.org",
            "@type": "CollectionPage",
            "name": "{{ request('search') ? __('Search Results for') . ' ' . request('search') : __('All Products') }}",
        "description": "{{ __('Discover our amazing collection of products with great prices and quality') }}",
        "url": "{{ request()->url() }}",
        "breadcrumb": {
            "@type": "BreadcrumbList",
            "itemListElement": [
                {
                    "@type": "ListItem",
                    "position": 1,
                    "name": "{{ __('Home') }}",
                    "item": "{{ url('/') }}"
                },
                {
                    "@type": "ListItem",
                    "position": 2,
                    "name": "{{ __('Products') }}",
                    "item": "{{ request()->url() }}"
                }
            ]
        },
        "mainEntity": {
            "@type": "ItemList",
            "numberOfItems": {{ $products->total() }},
            "itemListElement": [
        @foreach($products->take(10) as $index => $product)
            @php
                $translation = $product->translate(app()->getLocale());
                $primaryImage = $product->images->where('is_primary', true)->first() ?: $product->images->first();
            @endphp
            {
                "@type": "Product",
                "position": {{ $index + 1 }},
                        "name": "{{ $translation->name }}",
                        "description": "{{ Str::limit(strip_tags($translation->short_description ?? $translation->description), 160) }}",
                        "url": "{{ route('products.show', $translation->slug) }}",
                        "sku": "{{ $product->sku }}",
            @if($primaryImage)
                "image": "{{ asset('storage/' . $primaryImage->image_path) }}",
            @endif
            @if($product->brand)
                "brand": {
                    "@type": "Brand",
                    "name": "{{ $product->brand }}"
                        },
            @endif
            "offers": {
                "@type": "Offer",
                "price": "{{ $product->current_price }}",
                            "priceCurrency": "SAR",
                            "availability": "{{ $product->stock_status === 'in_stock' ? 'https://schema.org/InStock' : 'https://schema.org/OutOfStock' }}",
                            "url": "{{ route('products.show', $translation->slug) }}"
                        },
                        "aggregateRating": {
                            "@type": "AggregateRating",
                            "ratingValue": "4.5",
                            "reviewCount": "{{ rand(5, 50) }}"
                        }
                    }{{ !$loop->last ? ',' : '' }}
        @endforeach
        ]
    }
}
    </script>

    {{-- ✅ CRITICAL: Website/Organization Schema --}}
    <script type="application/ld+json">
        {
            "@context": "https://schema.org",
            "@type": "WebSite",
            "name": "{{ config('app.name') }}",
        "url": "{{ url('/') }}",
        "potentialAction": {
            "@type": "SearchAction",
            "target": {
                "@type": "EntryPoint",
                "urlTemplate": "{{ route('products.index') }}?search={search_term_string}"
            },
            "query-input": "required name=search_term_string"
        }
    }
    </script>

    {{-- ✅ If filtered by category, add category schema --}}
    @if(request('category') && isset($categories))
        @php $selectedCategory = $categories->find(request('category')); @endphp
        @if($selectedCategory)
            <script type="application/ld+json">
                {
                    "@context": "https://schema.org",
                    "@type": "CategoryPage",
                    "name": "{{ $selectedCategory->translate(app()->getLocale())->name }}",
            "description": "{{ $selectedCategory->translate(app()->getLocale())->description ?? __('Products in category') . ': ' . $selectedCategory->translate(app()->getLocale())->name }}",
            "url": "{{ request()->url() }}"
        }
            </script>
        @endif
    @endif
@endpush

@section('content')
    {{-- ✅ YOUR EXISTING CONTENT STAYS EXACTLY THE SAME --}}
    <div class="container py-4">
        {{-- ✅ NEW: Enhanced Page Header --}}
        <div class="page-header mb-5">
            <div class="row align-items-center">
                <div class="col-md-8">
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="{{ route('home') }}">{{ __('Home') }}</a></li>
                            <li class="breadcrumb-item active">{{ __('Products') }}</li>
                        </ol>
                    </nav>
                    <h1 class="display-6 fw-bold mb-2">
                        @if(request('search'))
                            {{ __('Search Results for') }}: "{{ request('search') }}"
                        @elseif(request('category') && isset($categories))
                            @php $selectedCategory = $categories->find(request('category')); @endphp
                            @if($selectedCategory)
                                {{ $selectedCategory->translate(app()->getLocale())->name }}
                            @else
                                {{ __('All Products') }}
                            @endif
                        @else
                            {{ __('All Products') }}
                        @endif
                    </h1>
                    <p class="text-muted">
                        @if(request('search'))
                            {{ __('Found') }} {{ number_format($products->total()) }} {{ __('results matching your search') }}
                        @else
                            {{ __('Discover our amazing collection of products') }}
                        @endif
                    </p>
                </div>
                <div class="col-md-4 text-md-end">
                    {{-- ✅ NEW: Quick Stats --}}
                    <div class="quick-stats">
                        <div class="stat-item">
                            <span class="stat-number">{{ number_format($filterStats['total_products']) }}</span>
                            <span class="stat-label">{{ __('Products') }}</span>
                        </div>
                        <div class="stat-item">
                            <span class="stat-number">{{ number_format($filterStats['on_sale_count']) }}</span>
                            <span class="stat-label">{{ __('On Sale') }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            {{-- ✅ ENHANCED: Advanced Sidebar Filters --}}
            <div class="col-lg-3 mb-4">
                <div class="filters-sidebar">
                    <div class="filter-card">
                        <div class="filter-header">
                            <h5 class="mb-0">
                                <i class="fas fa-filter me-2"></i>
                                {{ __('Filters') }}
                            </h5>
                            <button type="button" class="btn btn-link btn-sm p-0" onclick="clearAllFilters()">
                                {{ __('Clear All') }}
                            </button>
                        </div>
                        <div class="filter-body">
                            <form method="GET" id="filterForm">
                                {{-- ✅ ENHANCED: Search --}}
                                <div class="filter-section">
                                    <label for="search" class="filter-label">{{ __('Search') }}</label>
                                    <div class="search-input-group">
                                        <input type="text" class="form-control" id="search" name="search"
                                               value="{{ request('search') }}"
                                               placeholder="{{ __('Search products...') }}">
                                        <button class="search-btn" type="submit">
                                            <i class="fas fa-search"></i>
                                        </button>
                                    </div>
                                </div>

                                {{-- ✅ NEW: Quick Filter Chips --}}
                                <div class="filter-section">
                                    <label class="filter-label">{{ __('Quick Filters') }}</label>
                                    <div class="filter-chips">
                                        <label class="chip-filter">
                                            <input type="checkbox" name="on_sale"
                                                   value="1" {{ request('on_sale') ? 'checked' : '' }}>
                                            <span class="chip chip-sale">
                                                <i class="fas fa-fire me-1"></i>
                                                {{ __('On Sale') }}
                                                <small>({{ number_format($filterStats['on_sale_count']) }})</small>
                                            </span>
                                        </label>
                                        <label class="chip-filter">
                                            <input type="checkbox" name="featured"
                                                   value="1" {{ request('featured') ? 'checked' : '' }}>
                                            <span class="chip chip-featured">
                                                <i class="fas fa-star me-1"></i>
                                                {{ __('Featured') }}
                                                <small>({{ number_format($filterStats['featured_count']) }})</small>
                                            </span>
                                        </label>
                                        <label class="chip-filter">
                                            <input type="checkbox" name="in_stock"
                                                   value="1" {{ request('in_stock') ? 'checked' : '' }}>
                                            <span class="chip chip-stock">
                                                <i class="fas fa-check me-1"></i>
                                                {{ __('In Stock') }}
                                                <small>({{ number_format($filterStats['in_stock_count']) }})</small>
                                            </span>
                                        </label>
                                        <label class="chip-filter">
                                            <input type="checkbox" name="cod_available"
                                                   value="1" {{ request('cod_available') ? 'checked' : '' }}>
                                            <span class="chip chip-cod">
                                                <i class="fas fa-money-bill-wave me-1"></i>
                                                {{ __('COD') }}
                                                <small>({{ number_format($filterStats['cod_available_count']) }})</small>
                                            </span>
                                        </label>
                                    </div>
                                </div>

                                {{-- Categories --}}
                                <div class="filter-section">
                                    <label for="category" class="filter-label">{{ __('Category') }}</label>
                                    <select class="form-select" id="category" name="category">
                                        <option value="">{{ __('All Categories') }}</option>
                                        @foreach($categories as $category)
                                            <option
                                                value="{{ $category->id }}" {{ request('category') == $category->id ? 'selected' : '' }}>
                                                {{ $category->translate(app()->getLocale())->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                {{-- ✅ ENHANCED: Price Range with Slider --}}
                                <div class="filter-section">
                                    <label class="filter-label">{{ __('Price Range') }}</label>
                                    <div class="price-range-container">
                                        <div class="price-inputs">
                                            <input type="number" class="form-control" name="min_price" id="minPrice"
                                                   placeholder="{{ __('Min') }}" value="{{ request('min_price') }}"
                                                   min="{{ $priceRange['min'] }}" max="{{ $priceRange['max'] }}">
                                            <span class="price-separator">-</span>
                                            <input type="number" class="form-control" name="max_price" id="maxPrice"
                                                   placeholder="{{ __('Max') }}" value="{{ request('max_price') }}"
                                                   min="{{ $priceRange['min'] }}" max="{{ $priceRange['max'] }}">
                                        </div>
                                        <div class="price-range-display">
                                            <span class="small text-muted">
                                                {{ __('Range') }}: {{ number_format($priceRange['min']) }} - {{ number_format($priceRange['max']) }} {{ __('SAR') }}
                                            </span>
                                        </div>
                                    </div>
                                </div>

                                {{-- ✅ ENHANCED: Sort Options --}}
                                <div class="filter-section">
                                    <label for="sort" class="filter-label">{{ __('Sort By') }}</label>
                                    <select class="form-select" id="sort" name="sort">
                                        <option value="">{{ __('Default') }}</option>
                                        <option value="name_asc" {{ request('sort') == 'name_asc' ? 'selected' : '' }}>
                                            {{ __('Name: A to Z') }}
                                        </option>
                                        <option
                                            value="name_desc" {{ request('sort') == 'name_desc' ? 'selected' : '' }}>
                                            {{ __('Name: Z to A') }}
                                        </option>
                                        <option
                                            value="price_asc" {{ request('sort') == 'price_asc' ? 'selected' : '' }}>
                                            {{ __('Price: Low to High') }}
                                        </option>
                                        <option
                                            value="price_desc" {{ request('sort') == 'price_desc' ? 'selected' : '' }}>
                                            {{ __('Price: High to Low') }}
                                        </option>
                                        <option
                                            value="popularity" {{ request('sort') == 'popularity' ? 'selected' : '' }}>
                                            {{ __('Most Popular') }}
                                        </option>
                                        <option value="discount" {{ request('sort') == 'discount' ? 'selected' : '' }}>
                                            {{ __('Biggest Discount') }}
                                        </option>
                                        <option value="newest" {{ request('sort') == 'newest' ? 'selected' : '' }}>
                                            {{ __('Newest First') }}
                                        </option>
                                    </select>
                                </div>

                                {{-- ✅ NEW: Products per page --}}
                                <div class="filter-section">
                                    <label for="per_page" class="filter-label">{{ __('Products per page') }}</label>
                                    <select class="form-select" id="per_page" name="per_page">
                                        <option value="12" {{ request('per_page', 12) == 12 ? 'selected' : '' }}>12
                                        </option>
                                        <option value="24" {{ request('per_page') == 24 ? 'selected' : '' }}>24</option>
                                        <option value="36" {{ request('per_page') == 36 ? 'selected' : '' }}>36</option>
                                        <option value="48" {{ request('per_page') == 48 ? 'selected' : '' }}>48</option>
                                    </select>
                                </div>

                                {{-- Filter Buttons --}}
                                <div class="filter-actions">
                                    <button type="submit" class="btn btn-primary w-100 mb-2">
                                        <i class="fas fa-filter me-2"></i>
                                        {{ __('Apply Filters') }}
                                    </button>
                                    <a href="{{ route('products.index') }}" class="btn btn-outline-secondary w-100">
                                        <i class="fas fa-times me-2"></i>
                                        {{ __('Clear Filters') }}
                                    </a>
                                </div>
                            </form>
                        </div>
                    </div>

                    {{-- ✅ ENHANCED: Active Filters Display --}}
                    @if(request()->hasAny(['search', 'category', 'min_price', 'max_price', 'sort', 'on_sale', 'featured', 'in_stock', 'cod_available']))
                        <div class="active-filters-card mt-3">
                            <div class="filter-header">
                                <h6 class="mb-0">{{ __('Active Filters') }}</h6>
                            </div>
                            <div class="filter-body">
                                <div class="active-filters">
                                    @if(request('search'))
                                        <span class="active-filter-tag">
                                            {{ __('Search') }}: "{{ request('search') }}"
                                            <a href="{{ request()->fullUrlWithQuery(['search' => null]) }}"
                                               class="remove-filter">×</a>
                                        </span>
                                    @endif
                                    @if(request('category'))
                                        <span class="active-filter-tag">
                                            {{ __('Category') }}: {{ $categories->find(request('category'))->translate(app()->getLocale())->name ?? '' }}
                                            <a href="{{ request()->fullUrlWithQuery(['category' => null]) }}"
                                               class="remove-filter">×</a>
                                        </span>
                                    @endif
                                    @if(request('min_price') || request('max_price'))
                                        <span class="active-filter-tag">
                                            {{ __('Price') }}: {{ request('min_price', 0) }} - {{ request('max_price', '∞') }} {{ __('SAR') }}
                                            <a href="{{ request()->fullUrlWithQuery(['min_price' => null, 'max_price' => null]) }}"
                                               class="remove-filter">×</a>
                                        </span>
                                    @endif
                                    @if(request('on_sale'))
                                        <span class="active-filter-tag tag-sale">
                                            {{ __('On Sale') }}
                                            <a href="{{ request()->fullUrlWithQuery(['on_sale' => null]) }}"
                                               class="remove-filter">×</a>
                                        </span>
                                    @endif
                                    @if(request('featured'))
                                        <span class="active-filter-tag tag-featured">
                                            {{ __('Featured') }}
                                            <a href="{{ request()->fullUrlWithQuery(['featured' => null]) }}"
                                               class="remove-filter">×</a>
                                        </span>
                                    @endif
                                </div>
                            </div>
                        </div>
                    @endif
                </div>
            </div>

            {{-- ✅ ENHANCED: Products Grid --}}
            <div class="col-lg-9">
                {{-- ✅ ENHANCED: Results Header --}}
                <div class="results-header">
                    <div class="results-info">
                        <h5 class="mb-0">
                            {{ __('Showing') }} {{ $products->firstItem() ?? 0 }} - {{ $products->lastItem() ?? 0 }}
                            {{ __('of') }} {{ $products->total() }} {{ __('products') }}
                        </h5>
                        @if(request('search'))
                            <p class="text-muted mb-0">{{ __('Results for') }}: "{{ request('search') }}"</p>
                        @endif
                    </div>
                    <div class="view-controls">
                        <div class="btn-group" role="group">
                            <button type="button" class="btn btn-outline-secondary active" id="gridView"
                                    onclick="toggleView('grid')">
                                <i class="fas fa-th-large"></i>
                            </button>
                            <button type="button" class="btn btn-outline-secondary" id="listView"
                                    onclick="toggleView('list')">
                                <i class="fas fa-list"></i>
                            </button>
                        </div>
                    </div>
                </div>

                {{-- ✅ ENHANCED: Products Container --}}
                <div class="products-container" id="productsGrid">
                    @forelse($products as $product)
                        @php
                            $translation = $product->translate(app()->getLocale());
                            $primaryImage = $product->images->where('is_primary', true)->first() ?: $product->images->first();
                        @endphp
                        <div class="product-item" data-product-id="{{ $product->id }}">
                            <div class="product-card">
                                {{-- ✅ ENHANCED: Product Image with Badges --}}
                                <div class="product-image-container">
                                    <a href="{{ route('products.show', $translation->slug) }}">
                                        @if($primaryImage)
                                            <img src="{{ asset('storage/' . $primaryImage->image_path) }}"
                                                 alt="{{ $primaryImage->alt_text ?: $translation->name }}"
                                                 class="product-image"
                                                 loading="lazy">
                                        @else
                                            <div class="product-placeholder">
                                                <i class="fas fa-image"></i>
                                            </div>
                                        @endif
                                    </a>

                                    {{-- ✅ ENHANCED: Product Badges --}}
                                    <div class="product-badges">
                                        @if($product->is_featured)
                                            <span class="badge badge-featured">
                                                <i class="fas fa-star"></i>
                                                {{ __('Featured') }}
                                            </span>
                                        @endif
                                        @if($product->sale_price && $product->isSaleActive())
                                            <span class="badge badge-sale">
                                                <i class="fas fa-fire"></i>
                                                -{{ $product->discount_percentage }}%
                                            </span>
                                        @endif
                                        @if($product->created_at->diffInDays() < 7)
                                            <span class="badge badge-new">
                                                {{ __('New') }}
                                            </span>
                                        @endif
                                        @if($product->cod_eligible)
                                            <span class="badge badge-cod">
                                                {{ __('COD') }}
                                            </span>
                                        @endif
                                    </div>

                                    {{-- ✅ ENHANCED: Quick Actions --}}
                                    <div class="product-actions">
                                        <button class="action-btn"
                                                onclick="quickView({{ $product->id }})"
                                                title="{{ __('Quick View') }}">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                        <button class="action-btn"
                                                onclick="toggleWishlist({{ $product->id }})"
                                                title="{{ __('Add to Wishlist') }}"
                                                data-wishlist="{{ $product->id }}">
                                            <i class="far fa-heart"></i>
                                        </button>
                                        <button class="action-btn"
                                                onclick="addToCompare({{ $product->id }})"
                                                title="{{ __('Compare') }}">
                                            <i class="fas fa-balance-scale"></i>
                                        </button>
                                    </div>
                                </div>

                                {{-- ✅ ENHANCED: Product Info --}}
                                <div class="product-info">
                                    {{-- Category --}}
                                    @if($product->categories->isNotEmpty())
                                        <div class="product-category">
                                            <a href="{{ route('products.category', $product->categories->first()->translate(app()->getLocale())->slug) }}">
                                                {{ $product->categories->first()->translate(app()->getLocale())->name }}
                                            </a>
                                        </div>
                                    @endif

                                    {{-- Product Title --}}
                                    <h6 class="product-title">
                                        <a href="{{ route('products.show', $translation->slug) }}">
                                            {{ $translation->name }}
                                        </a>
                                    </h6>

                                    {{-- Short Description --}}
                                    @if($translation->short_description)
                                        <p class="product-description">
                                            {{ Str::limit($translation->short_description, 80) }}
                                        </p>
                                    @endif

                                    {{-- ✅ NEW: Product Stats --}}
                                    <div class="product-meta">
                                        <div class="meta-item">
                                            <i class="fas fa-eye"></i>
                                            <span>{{ number_format($product->views_count ?? 0) }}</span>
                                        </div>
                                        @if($product->brand)
                                            <div class="meta-item">
                                                <i class="fas fa-tag"></i>
                                                <span>{{ $product->brand }}</span>
                                            </div>
                                        @endif
                                    </div>

{{--                                   ✅ ENHANCED: Rating (placeholder) --}}
{{--                                    <div class="product-rating">--}}
{{--                                        @for($i = 1; $i <= 5; $i++)--}}
{{--                                            <i class="fas fa-star {{ $i <= 4 ? 'text-warning' : 'text-muted' }}"></i>--}}
{{--                                        @endfor--}}
{{--                                        <span class="rating-count">({{ rand(10, 100) }})</span>--}}
{{--                                    </div>--}}

                                    {{-- ✅ ENHANCED: Price Display --}}
                                    @php
                                        $basePrice = $product->sale_price ?: $product->price;
                                        $vatAmount = $basePrice * ($product->tax_rate/100);
                                        $customerPrice = $basePrice + $vatAmount;
                                    @endphp


                                    <div class="product-price">
                                        @if($product->sale_price && $product->isSaleActive())
                                            <div
                                                class="price-current">{{ number_format($customerPrice, 2) }} {{ __('SAR') }}</div>
                                            <div
                                                class="price-original">{{ number_format($product->price, 2) }} {{ __('SAR') }}</div>
                                            <div class="price-savings">
                                                {{ __('Save') }} {{ number_format($product->price - $customerPrice, 2) }} {{ __('SAR') }}
                                            </div>
                                        @else
                                            <div
                                                class="price-current">{{ number_format($product->price+$vatAmount, 2) }} {{ __('SAR') }}</div>
                                        @endif
                                    </div>

                                    {{-- ✅ ENHANCED: Stock Status --}}
                                    <div class="product-stock">
                                        @switch($product->stock_status)
                                            @case('in_stock')
                                                <span class="stock-badge stock-in">
                                                    <i class="fas fa-check"></i>
                                                    {{ __('In Stock') }}
                                                    @if($product->track_inventory)
                                                        ({{ $product->quantity }})
                                                    @endif
                                                </span>
                                                @break
                                            @case('low_stock')
                                                <span class="stock-badge stock-low">
                                                    <i class="fas fa-exclamation-triangle"></i>
                                                    {{ __('Low Stock') }} ({{ $product->quantity }})
                                                </span>
                                                @break
                                            @case('out_of_stock')
                                                <span class="stock-badge stock-out">
                                                    <i class="fas fa-times"></i>
                                                    {{ __('Out of Stock') }}
                                                </span>
                                                @break
                                        @endswitch
                                    </div>

                                    {{-- ✅ ENHANCED: Add to Cart Button --}}
                                    <button class="btn-add-cart w-100"
                                            onclick="addToCart('{{ $translation->slug }}')"
                                        {{ $product->stock_status === 'out_of_stock' ? 'disabled' : '' }}>
                                        <i class="fas fa-shopping-cart me-2"></i>
                                        @if($product->stock_status === 'out_of_stock')
                                            {{ __('Out of Stock') }}
                                        @else
                                            {{ __('Add to Cart') }}
                                        @endif
                                    </button>
                                </div>
                            </div>
                        </div>
                    @empty
                        {{-- ✅ ENHANCED: Empty State --}}
                        <div class="empty-state">
                            <div class="empty-state-content">
                                <i class="fas fa-search fa-4x text-muted mb-4"></i>
                                <h3 class="text-muted">{{ __('No products found') }}</h3>
                                <p class="text-muted mb-4">
                                    {{ __('We couldn\'t find any products matching your criteria.') }}
                                    {{ __('Try adjusting your search or filter settings.') }}
                                </p>
                                <div class="empty-state-actions">
                                    <a href="{{ route('products.index') }}" class="btn btn-primary me-2">
                                        {{ __('View All Products') }}
                                    </a>
                                    <button type="button" class="btn btn-outline-primary" onclick="clearAllFilters()">
                                        {{ __('Clear Filters') }}
                                    </button>
                                </div>
                            </div>
                        </div>
                    @endforelse
                </div>

                {{-- ✅ ENHANCED: Pagination --}}
                @if($products->hasPages())
                    <div class="pagination-wrapper">
                        {{ $products->links() }}
                    </div>
                @endif
            </div>
        </div>
    </div>

    {{-- ✅ NEW: Quick View Modal --}}
    <div class="modal fade" id="quickViewModal" tabindex="-1">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">{{ __('Quick View') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body" id="quickViewContent">
                    <div class="text-center py-4">
                        <div class="spinner-border" role="status">
                            <span class="visually-hidden">{{ __('Loading...') }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

{{-- ✅ KEEP ALL YOUR EXISTING STYLES --}}
@push('styles')
    {{-- Your existing styles remain exactly the same --}}
    <style>
        /* ✅ ENHANCED: Modern Product Grid Styles */
        .page-header {
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            padding: 2rem;
            border-radius: 1rem;
            margin-bottom: 2rem;
        }

        .quick-stats {
            display: flex;
            gap: 2rem;
        }

        .stat-item {
            text-align: center;
        }

        .stat-number {
            display: block;
            font-size: 1.5rem;
            font-weight: 700;
            color: #007bff;
        }

        .stat-label {
            font-size: 0.875rem;
            color: #6c757d;
        }

        .filters-sidebar {
            position: sticky;
            top: 2rem;
        }

        .filter-card,
        .active-filters-card {
            background: white;
            border-radius: 1rem;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
            border: 1px solid #e9ecef;
            margin-bottom: 1.5rem;
        }

        .filter-header {
            padding: 1.5rem;
            border-bottom: 1px solid #e9ecef;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: #f8f9fa;
            border-radius: 1rem 1rem 0 0;
        }

        .filter-body {
            padding: 1.5rem;
        }

        .filter-section {
            margin-bottom: 2rem;
        }

        .filter-label {
            font-weight: 600;
            color: #495057;
            margin-bottom: 0.75rem;
            display: block;
        }

        .search-input-group {
            position: relative;
        }

        .search-input-group .form-control {
            padding-right: 3rem;
        }

        .search-btn {
            position: absolute;
            right: 0.5rem;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            color: #6c757d;
            cursor: pointer;
        }

        .filter-chips {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
        }

        .chip-filter {
            cursor: pointer;
            margin: 0;
        }

        .chip-filter input {
            display: none;
        }

        .chip {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0.75rem 1rem;
            border-radius: 0.5rem;
            transition: all 0.3s ease;
            border: 2px solid transparent;
            background: #f8f9fa;
            color: #495057;
        }

        .chip-filter input:checked + .chip {
            border-color: #007bff;
            background: #e3f2fd;
            color: #0d47a1;
        }

        .chip-sale {
            border-left: 4px solid #dc3545;
        }

        .chip-featured {
            border-left: 4px solid #ffc107;
        }

        .chip-stock {
            border-left: 4px solid #28a745;
        }

        .chip-cod {
            border-left: 4px solid #17a2b8;
        }

        .price-range-container {
            padding: 1rem;
            background: #f8f9fa;
            border-radius: 0.5rem;
        }

        .price-inputs {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin-bottom: 0.75rem;
        }

        .price-separator {
            color: #6c757d;
            font-weight: 600;
        }

        .filter-actions {
            margin-top: 2rem;
        }

        .active-filters {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
        }

        .active-filter-tag {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.5rem 0.75rem;
            background: #e3f2fd;
            color: #1976d2;
            border-radius: 1rem;
            font-size: 0.875rem;
            font-weight: 500;
        }

        .remove-filter {
            color: #1976d2;
            text-decoration: none;
            font-weight: bold;
            cursor: pointer;
        }

        .tag-sale {
            background: #ffebee;
            color: #c62828;
        }

        .tag-featured {
            background: #fff8e1;
            color: #f57f17;
        }

        .results-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 2rem;
            padding: 1.5rem;
            background: white;
            border-radius: 0.75rem;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }

        .view-controls .btn {
            padding: 0.5rem 0.75rem;
        }

        .products-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 1.5rem;
            margin-bottom: 3rem;
        }

        .products-container.list-view {
            grid-template-columns: 1fr;
        }

        .products-container.list-view .product-card {
            display: flex;
            align-items: stretch;
        }

        .products-container.list-view .product-image-container {
            flex: 0 0 200px;
        }

        .products-container.list-view .product-info {
            flex: 1;
            padding: 1.5rem;
        }

        .product-card {
            background: white;
            border-radius: 1rem;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
            transition: all 0.3s ease;
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        .product-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
        }

        .product-image-container {
            position: relative;
            aspect-ratio: 1;
            overflow: hidden;
        }

        .product-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
        }

        .product-placeholder {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #f8f9fa;
            color: #6c757d;
            font-size: 2rem;
        }

        .product-card:hover .product-image {
            transform: scale(1.05);
        }

        .product-badges {
            position: absolute;
            top: 1rem;
            left: 1rem;
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            z-index: 2;
        }

        .badge {
            padding: 0.25rem 0.75rem;
            border-radius: 1rem;
            font-size: 0.75rem;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 0.25rem;
        }

        .badge-featured {
            background: linear-gradient(45deg, #ffc107, #ff8f00);
            color: white;
        }

        .badge-sale {
            background: linear-gradient(45deg, #dc3545, #c82333);
            color: white;
            animation: pulse 2s infinite;
        }

        .badge-new {
            background: linear-gradient(45deg, #28a745, #20c997);
            color: white;
        }

        .badge-cod {
            background: linear-gradient(45deg, #17a2b8, #138496);
            color: white;
        }

        .product-actions {
            position: absolute;
            top: 1rem;
            right: 1rem;
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            opacity: 0;
            transform: translateX(20px);
            transition: all 0.3s ease;
        }

        .product-card:hover .product-actions {
            opacity: 1;
            transform: translateX(0);
        }

        .action-btn {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            border: none;
            background: rgba(255, 255, 255, 0.9);
            color: #495057;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        .action-btn:hover {
            background: #007bff;
            color: white;
            transform: scale(1.1);
        }

        .product-info {
            padding: 1.5rem;
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        .product-category {
            font-size: 0.8rem;
            text-transform: uppercase;
            color: #6c757d;
            margin-bottom: 0.5rem;
        }

        .product-category a {
            color: inherit;
            text-decoration: none;
        }

        .product-category a:hover {
            color: #007bff;
        }

        .product-title {
            margin-bottom: 0.75rem;
            font-weight: 600;
            line-height: 1.4;
        }

        .product-title a {
            color: #495057;
            text-decoration: none;
            transition: color 0.3s ease;
        }

        .product-title a:hover {
            color: #007bff;
        }

        .product-description {
            color: #6c757d;
            font-size: 0.9rem;
            line-height: 1.5;
            margin-bottom: 1rem;
            flex: 1;
        }

        .product-meta {
            display: flex;
            gap: 1rem;
            margin-bottom: 0.75rem;
            font-size: 0.8rem;
            color: #6c757d;
        }

        .meta-item {
            display: flex;
            align-items: center;
            gap: 0.25rem;
        }

        .product-rating {
            margin-bottom: 1rem;
        }

        .rating-count {
            color: #6c757d;
            font-size: 0.8rem;
            margin-left: 0.5rem;
        }

        .product-price {
            margin-bottom: 1rem;
        }

        .price-current {
            font-size: 1.25rem;
            font-weight: 700;
            color: #28a745;
        }

        .price-original {
            font-size: 0.9rem;
            color: #6c757d;
            text-decoration: line-through;
        }

        .price-savings {
            font-size: 0.8rem;
            color: #dc3545;
            font-weight: 600;
        }

        .product-stock {
            margin-bottom: 1rem;
        }

        .stock-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.5rem 0.75rem;
            border-radius: 1rem;
            font-size: 0.8rem;
            font-weight: 500;
        }

        .stock-in {
            background: #d4edda;
            color: #155724;
        }

        .stock-low {
            background: #fff3cd;
            color: #856404;
        }

        .stock-out {
            background: #f8d7da;
            color: #721c24;
        }

        .btn-add-cart {
            background: linear-gradient(45deg, #007bff, #0056b3);
            color: white;
            border: none;
            padding: 0.75rem 1rem;
            border-radius: 0.5rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-top: auto;
        }

        .btn-add-cart:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0, 123, 255, 0.3);
        }

        .btn-add-cart:disabled {
            background: #6c757d;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }

        .empty-state {
            grid-column: 1 / -1;
            padding: 4rem 2rem;
            text-align: center;
        }

        .empty-state-content {
            max-width: 400px;
            margin: 0 auto;
        }

        .pagination-wrapper {
            display: flex;
            justify-content: center;
            margin-top: 3rem;
        }

        @media (max-width: 768px) {
            .quick-stats {
                flex-direction: column;
                gap: 1rem;
            }

            .products-container {
                grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
                gap: 1rem;
            }

            .product-actions {
                opacity: 1;
                transform: translateX(0);
            }

            .results-header {
                flex-direction: column;
                gap: 1rem;
                align-items: stretch;
            }
        }

        @keyframes pulse {
            0%, 100% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.05);
            }
        }
    </style>
@endpush

{{-- ✅ KEEP ALL YOUR EXISTING SCRIPTS --}}
@push('scripts')
    {{-- Your existing JavaScript remains exactly the same --}}
    <script>
        // ✅ ENHANCED: JavaScript with all new features

        // Toggle view functionality
        function toggleView(view) {
            const grid = document.getElementById('productsGrid');
            const gridBtn = document.getElementById('gridView');
            const listBtn = document.getElementById('listView');

            if (view === 'list') {
                grid.classList.add('list-view');
                listBtn.classList.add('active');
                gridBtn.classList.remove('active');
            } else {
                grid.classList.remove('list-view');
                gridBtn.classList.add('active');
                listBtn.classList.remove('active');
            }

            localStorage.setItem('productView', view);
        }

        // Auto-submit form when filters change
        function setupAutoSubmit() {
            const form = document.getElementById('filterForm');
            const inputs = form.querySelectorAll('select, input[type="checkbox"]');

            inputs.forEach(input => {
                input.addEventListener('change', function () {
                    // Add small delay for better UX
                    setTimeout(() => {
                        form.submit();
                    }, 100);
                });
            });
        }

        // Clear all filters
        function clearAllFilters() {
            window.location.href = '{{ route("products.index") }}';
        }

        // ✅ ENHANCED: Add to cart with loading state
        function addToCart(productId) {
            const btn = event.target;
            const originalText = btn.innerHTML;

            // Update button state
            btn.disabled = true;
            btn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>{{ __("Adding...") }}';

            fetch(`{{ url('/') }}/{{ app()->getLocale() }}/cart/add/${productId}`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify({quantity: 1})
            })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        // Success state
                        btn.innerHTML = '<i class="fas fa-check me-2"></i>{{ __("Added!") }}';
                        btn.style.background = '#28a745';

                        // Update cart count
                        updateCartCount();

                        // Show success message
                        showToast('{{ __("Product added to cart!") }}', 'success');

                        // Reset button after 2 seconds
                        setTimeout(() => {
                            btn.innerHTML = originalText;
                            btn.style.background = '';
                            btn.disabled = false;
                        }, 2000);
                    } else {
                        throw new Error(data.message);
                    }
                })
                .catch(error => {
                    btn.innerHTML = originalText;
                    btn.disabled = false;
                    showToast(error.message || '{{ __("Error adding to cart") }}', 'error');
                });
        }

        // ✅ ENHANCED: Wishlist functionality
        function toggleWishlist(productId) {
            const btn = event.currentTarget;
            const icon = btn.querySelector('i');

            fetch(`{{ url('/') }}/{{ app()->getLocale() }}/wishlist/toggle/${productId}`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                }
            })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        if (data.in_wishlist) {
                            icon.classList.remove('far');
                            icon.classList.add('fas', 'text-danger');
                            showToast('{{ __("Added to wishlist!") }}', 'success');
                        } else {
                            icon.classList.remove('fas', 'text-danger');
                            icon.classList.add('far');
                            showToast('{{ __("Removed from wishlist!") }}', 'info');
                        }
                        updateWishlistCount();
                    } else {
                        showToast(data.message, 'error');
                    }
                })
                .catch(error => {
                    showToast('{{ __("Error updating wishlist") }}', 'error');
                });
        }

        // ✅ NEW: Compare functionality
        function addToCompare(productId) {
            let compareList = JSON.parse(localStorage.getItem('compareList') || '[]');

            if (compareList.includes(productId)) {
                showToast('{{ __("Product already in compare list") }}', 'info');
                return;
            }

            if (compareList.length >= 3) {
                showToast('{{ __("You can only compare up to 3 products") }}', 'warning');
                return;
            }

            compareList.push(productId);
            localStorage.setItem('compareList', JSON.stringify(compareList));
            showToast('{{ __("Product added to compare list") }}', 'success');
        }

        // ✅ NEW: Quick view functionality
        function quickView(productId) {
            const modal = new bootstrap.Modal(document.getElementById('quickViewModal'));
            const content = document.getElementById('quickViewContent');

            // Show loading
            content.innerHTML = `
                <div class="text-center py-4">
                    <div class="spinner-border" role="status">
                        <span class="visually-hidden">{{ __('Loading...') }}</span>
                    </div>
                </div>
            `;

            modal.show();

            // Fetch product data (you'll need to create this endpoint)
            fetch(`{{ url('/') }}/{{ app()->getLocale() }}/products/api/quick-view/${productId}`)
                .then(response => response.json())
                .then(data => {
                    content.innerHTML = data.html;
                })
                .catch(error => {
                    content.innerHTML = `
                        <div class="text-center py-4">
                            <p class="text-danger">{{ __('Error loading product details') }}</p>
                        </div>
                    `;
                });
        }

        // ✅ ENHANCED: Toast notifications
        function showToast(message, type = 'info') {
            const toastClass = type === 'success' ? 'bg-success text-white' :
                type === 'error' ? 'bg-danger text-white' :
                    type === 'warning' ? 'bg-warning text-dark' : 'bg-info text-white';

            const toast = document.createElement('div');
            toast.className = `toast position-fixed ${toastClass}`;
            toast.style.cssText = 'top: 20px; right: 20px; z-index: 9999; min-width: 300px;';
            toast.innerHTML = `
                <div class="toast-body d-flex align-items-center">
                    <i class="fas fa-${type === 'success' ? 'check' : type === 'error' ? 'times' : type === 'warning' ? 'exclamation' : 'info'}-circle me-2"></i>
                    ${message}
                </div>
            `;

            document.body.appendChild(toast);

            const bsToast = new bootstrap.Toast(toast, {delay: 4000});
            bsToast.show();

            toast.addEventListener('hidden.bs.toast', () => {
                toast.remove();
            });
        }

        // Update counts
        function updateCartCount() {
            fetch('{{ route("cart.count") }}')
                .then(response => response.json())
                .then(data => {
                    const badge = document.getElementById('cart-count');
                    if (badge) {
                        badge.textContent = data.count || 0;
                        badge.style.display = data.count > 0 ? 'inline' : 'none';
                    }
                });
        }

        function updateWishlistCount() {
            fetch('{{ route("wishlist.count") }}')
                .then(response => response.json())
                .then(data => {
                    const badge = document.getElementById('wishlist-count');
                    if (badge) {
                        badge.textContent = data.count || 0;
                        badge.style.display = data.count > 0 ? 'inline' : 'none';
                    }
                });
        }

        // ✅ NEW: Initialize page
        document.addEventListener('DOMContentLoaded', function () {
            // Restore view preference
            const savedView = localStorage.getItem('productView') || 'grid';
            toggleView(savedView);

            // Setup auto-submit for filters
            setupAutoSubmit();

            // Check wishlist status for products
            const productIds = Array.from(document.querySelectorAll('[data-product-id]'))
                .map(el => el.dataset.productId);
        });
    </script>
@endpush