@extends('layouts.app')

@php
    $pageTitle = isset($query) ? "Search: $query"
        : (isset($category) ? $category->name . ' Supplier Nairobi Kenya'
        : (isset($brand)    ? $brand->name . ' Products Kenya'
        : 'Networking Equipment Supplier Nairobi'));
    $pageDesc = isset($category)
        ? 'Buy ' . $category->name . ' in Nairobi, Kenya from ECA Networks. Competitive prices, fast delivery. Call +254 720 309 309 or request a quote.'
        : 'Shop fiber optic cables, MikroTik routers, CCTV cameras, structured cabling and ISP equipment in Nairobi. ECA Networks — Kenya\'s trusted supplier.';
@endphp
@section('title', $pageTitle . ' — ECA Networks')
@section('meta_description', $pageDesc)
@section('meta_keywords', (isset($category) ? $category->name . ' Kenya, ' : '') . 'networking equipment Nairobi, fiber optic cable Kenya, MikroTik Kenya, CCTV supplier Kenya, ECA Networks')

@push('schema')
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {"@type":"ListItem","position":1,"name":"Home","item":"{{ url('/') }}"},
    @if(isset($category))
    {"@type":"ListItem","position":2,"name":"Products","item":"{{ route('products.index') }}"},
    {"@type":"ListItem","position":3,"name":"{{ addslashes($category->name) }}","item":"{{ url()->current() }}"}
    @elseif(isset($brand))
    {"@type":"ListItem","position":2,"name":"Products","item":"{{ route('products.index') }}"},
    {"@type":"ListItem","position":3,"name":"{{ addslashes($brand->name) }}","item":"{{ url()->current() }}"}
    @else
    {"@type":"ListItem","position":2,"name":"Products","item":"{{ route('products.index') }}"}
    @endif
  ]
}
</script>
@endpush

@section('content')
<div class="max-w-7xl mx-auto px-4 py-8">
    <!-- Breadcrumb -->
    <nav class="text-sm text-gray-500 mb-6 flex items-center gap-2">
        <a href="{{ route('home') }}" class="hover:text-electric-blue">Home</a>
        <i class="fas fa-chevron-right text-xs"></i>
        <span class="text-navy font-medium">
            @if(isset($query)) Search: "{{ $query }}"
            @elseif(isset($category)) {{ $category->name }}
            @elseif(isset($brand)) {{ $brand->name }}
            @else All Products
            @endif
        </span>
    </nav>

    <div class="flex gap-8">
        <!-- Sidebar -->
        <aside class="hidden lg:block w-64 shrink-0">
            <form method="GET" action="{{ route('products.index') }}" id="filterForm">
                <!-- Categories -->
                <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-5 mb-4">
                    <h3 class="font-semibold text-navy mb-4 flex items-center gap-2">
                        <i class="fas fa-tags text-electric-blue"></i> Categories
                    </h3>
                    <ul class="space-y-2">
                        <li>
                            <a href="{{ route('products.index') }}" class="flex items-center gap-2 text-sm py-1 rounded-lg hover:text-electric-blue transition-colors {{ !request('category') ? 'text-electric-blue font-semibold' : 'text-gray-600' }}">
                                <i class="fas fa-circle text-xs"></i> All Categories
                            </a>
                        </li>
                        @foreach($categories as $cat)
                        <li>
                            <a href="{{ route('products.category', $cat->slug) }}" class="flex items-center justify-between text-sm py-1.5 rounded-lg hover:text-electric-blue transition-colors {{ isset($category) && $category->id === $cat->id ? 'text-electric-blue font-semibold' : 'text-gray-600' }}">
                                <span class="flex items-center gap-2">
                                    <i class="fas fa-chevron-right text-xs text-gray-400"></i> {{ $cat->name }}
                                </span>
                                <span class="text-xs bg-gray-100 text-gray-500 rounded-full px-2 py-0.5">{{ $cat->products_count ?? '' }}</span>
                            </a>
                            @if($cat->children->count())
                            <ul class="ml-4 mt-1 space-y-1">
                                @foreach($cat->children as $child)
                                <li>
                                    <a href="{{ route('products.category', $child->slug) }}" class="text-xs text-gray-500 hover:text-electric-blue py-1 block">— {{ $child->name }}</a>
                                </li>
                                @endforeach
                            </ul>
                            @endif
                        </li>
                        @endforeach
                    </ul>
                </div>

                <!-- Brands -->
                <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-5 mb-4">
                    <h3 class="font-semibold text-navy mb-4 flex items-center gap-2">
                        <i class="fas fa-trademark text-electric-blue"></i> Brands
                    </h3>
                    <ul class="space-y-2">
                        @foreach($brands->take(10) as $b)
                        <li>
                            <label class="flex items-center gap-2 text-sm text-gray-600 cursor-pointer hover:text-navy">
                                <input type="checkbox" name="brand[]" value="{{ $b->slug }}"
                                    {{ in_array($b->slug, (array)request('brand', [])) ? 'checked' : '' }}
                                    class="rounded border-gray-300 text-electric-blue focus:ring-electric-blue"
                                    onchange="document.getElementById('filterForm').submit()">
                                {{ $b->name }}
                            </label>
                        </li>
                        @endforeach
                    </ul>
                </div>

                <!-- Price Range -->
                <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-5 mb-4">
                    <h3 class="font-semibold text-navy mb-4 flex items-center gap-2">
                        <i class="fas fa-tag text-electric-blue"></i> Price Range (KES)
                    </h3>
                    <div class="flex gap-2 mb-3">
                        <input type="number" name="price_min" value="{{ request('price_min') }}" placeholder="Min" class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-electric-blue">
                        <input type="number" name="price_max" value="{{ request('price_max') }}" placeholder="Max" class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-electric-blue">
                    </div>
                    <button type="submit" class="w-full bg-electric-blue text-white py-2 rounded-lg text-sm font-medium hover:bg-blue-dark transition-colors">
                        Apply Filter
                    </button>
                </div>
            </form>
        </aside>

        <!-- Main Content -->
        <div class="flex-1 min-w-0">
            <!-- Top Bar -->
            <div class="flex items-center justify-between mb-6 bg-white rounded-2xl shadow-sm border border-gray-100 px-5 py-3">
                <p class="text-sm text-gray-600">
                    Showing <strong>{{ $products->firstItem() ?? 0 }}-{{ $products->lastItem() ?? 0 }}</strong> of <strong>{{ $products->total() }}</strong> products
                </p>
                <div class="flex items-center gap-3">
                    <label class="text-sm text-gray-600">Sort by:</label>
                    <form method="GET" action="{{ route('products.index') }}">
                        @foreach(request()->except('sort') as $key => $val)
                            @if(is_array($val))
                                @foreach($val as $v)
                                    <input type="hidden" name="{{ $key }}[]" value="{{ $v }}">
                                @endforeach
                            @else
                                <input type="hidden" name="{{ $key }}" value="{{ $val }}">
                            @endif
                        @endforeach
                        <select name="sort" onchange="this.form.submit()" class="border border-gray-200 rounded-lg px-3 py-1.5 text-sm focus:outline-none focus:border-electric-blue">
                            <option value="newest" {{ request('sort','newest') === 'newest' ? 'selected' : '' }}>Newest</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="featured" {{ request('sort') === 'featured' ? 'selected' : '' }}>Featured</option>
                        </select>
                    </form>
                </div>
            </div>

            <!-- Products Grid -->
            @if($products->count())
            <div class="grid grid-cols-2 md:grid-cols-3 gap-4 mb-8">
                @foreach($products as $product)
                    @include('components.product-card', ['product' => $product])
                @endforeach
            </div>

            <!-- Pagination -->
            <div class="flex justify-center">
                {{ $products->links() }}
            </div>
            @else
            <div class="text-center py-20 bg-white rounded-2xl shadow-sm border border-gray-100">
                <i class="fas fa-search text-6xl text-gray-200 mb-4"></i>
                <h3 class="text-xl font-semibold text-gray-600 mb-2">No products found</h3>
                <p class="text-gray-400 mb-6">Try adjusting your filters or search terms.</p>
                <a href="{{ route('products.index') }}" class="bg-electric-blue text-white px-6 py-2.5 rounded-xl font-medium hover:bg-blue-dark transition-colors">
                    Browse All Products
                </a>
            </div>
            @endif
        </div>
    </div>
</div>
@endsection