@extends('layouts.app')

@section('content')
<div class="mb-6">
    <nav class="flex items-center gap-2 text-sm">
        <a href="{{ route('home') }}" class="text-gray-500 hover:text-[#0C951E]">Home</a>
        <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
        </svg>
        <span class="text-gray-900 font-medium">{{ $category }}</span>
    </nav>
</div>

<div class="mb-8">
    <h1 class="text-3xl font-bold text-gray-900 mb-2">{{ $category }}</h1>
    <p class="text-gray-600">{{ $brands->count() }} brand tersedia</p>
</div>

<!-- Search Filter -->
<div class="mb-6">
    <div class="relative max-w-md">
        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
            <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <circle cx="11" cy="11" r="8" stroke-width="2"/>
                <path d="m21 21-4.35-4.35" stroke-width="2"/>
            </svg>
        </div>
        <input type="text" id="search-input" placeholder="Cari brand..." class="block w-full pl-10 pr-3 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-[#0C951E] focus:border-[#0C951E]">
    </div>
</div>

<!-- Brands Grid -->
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4" id="brands-grid">
    @foreach($brands as $brand)
    <a href="{{ route('products.show', $brand->slug) }}" class="brand-item group bg-white rounded-xl overflow-hidden hover:shadow-lg transition-all border border-gray-100" data-name="{{ strtolower($brand->brand) }}">
        <div class="aspect-square bg-gradient-to-br from-gray-100 to-gray-200 relative overflow-hidden">
            @if($brand->image_url)
            <img src="{{ $brand->image_url }}" alt="{{ $brand->brand }}" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
            <div class="absolute inset-0 w-full h-full bg-gradient-to-br from-gray-100 to-gray-200 hidden items-center justify-center">
                <svg class="w-16 h-16 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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"></path>
                </svg>
            </div>
            @else
            <div class="absolute inset-0 w-full h-full flex items-center justify-center">
                <svg class="w-16 h-16 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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"></path>
                </svg>
            </div>
            @endif
        </div>
        <div class="p-3">
            <h3 class="font-semibold text-gray-900 group-hover:text-[#0C951E] text-sm mb-1 truncate">{{ $brand->brand }}</h3>
            @if($brand->developer)
            <p class="text-xs text-gray-500 truncate">{{ $brand->developer }}</p>
            @endif
            <p class="text-xs text-gray-600 mt-1">{{ $brand->products_count }} Produk</p>
        </div>
    </a>
    @endforeach
</div>

@if($brands->isEmpty())
<div class="text-center py-12">
    <svg class="w-20 h-20 mx-auto text-gray-300 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
    </svg>
    <h3 class="text-xl font-semibold text-gray-900 mb-2">Belum ada brand</h3>
    <p class="text-gray-500">Kategori ini belum memiliki brand</p>
</div>
@endif

@push('scripts')
<script>
document.getElementById('search-input').addEventListener('input', function(e) {
    const search = e.target.value.toLowerCase();
    document.querySelectorAll('.brand-item').forEach(item => {
        const name = item.getAttribute('data-name');
        item.style.display = name.includes(search) ? '' : 'none';
    });
});
</script>
@endpush
@endsection