@extends('layouts.app')

@section('content')
<section class="py-16 md:py-24 bg-[#1a1614]">
    <div class="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12">
            <p class="text-[#c77d4a] uppercase tracking-[0.2em] text-xs mb-3">{{ __('catalog') }}</p>
            <h1 class="text-4xl md:text-5xl font-light text-white">{{ __('all_products') }}</h1>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
            {{-- Filters --}}
            <aside class="lg:col-span-1">
                <div class="bg-[#231e1b] rounded-xl p-6 sticky top-28">
                    <div class="flex items-center justify-between mb-6">
                        <h2 class="text-lg font-medium text-white">{{ __('filters') }}</h2>
                        @if(!empty($activeFilters))
                            <a href="{{ localized_route('products.index') }}" class="text-xs text-[#c77d4a] hover:text-white transition">{{ __('clear_filters') }}</a>
                        @endif
                    </div>

                    @if($filterAttributes->isEmpty())
                        <p class="text-sm text-white/50">{{ __('no_filters') }}</p>
                    @endif

                    <form method="GET" action="{{ localized_route('products.index') }}">
                        @foreach($filterAttributes as $attribute)
                            @if($attribute->values->isNotEmpty())
                                <div class="mb-6 pb-6 border-b border-white/10 last:border-0">
                                    <h3 class="text-sm font-medium text-white mb-3">{{ $attribute->name }}</h3>
                                    <div class="space-y-2">
                                        @foreach($attribute->values as $value)
                                            <label class="flex items-center gap-2 text-sm text-white/70 cursor-pointer hover:text-white transition">
                                                <input type="checkbox" name="filter[{{ $attribute->id }}][]" value="{{ $value->id }}" {{ in_array((string) $value->id, $activeFilters[$attribute->id] ?? []) ? 'checked' : '' }} class="accent-[#c77d4a]">
                                                <span>{{ $value->value }}</span>
                                            </label>
                                        @endforeach
                                    </div>
                                </div>
                            @endif
                        @endforeach

                        <button type="submit" class="w-full bg-[#c77d4a] hover:bg-[#b06b3d] text-white py-3 rounded text-sm font-medium uppercase transition">{{ __('apply') }}</button>
                    </form>
                </div>
            </aside>

            {{-- Products --}}
            <div class="lg:col-span-3">
                @if($products->isEmpty())
                    <div class="text-center py-20 bg-[#231e1b] rounded-xl">
                        <p class="text-white/60 mb-4">{{ __('no_products') }}</p>
                        @if(!empty($activeFilters))
                            <a href="{{ localized_route('products.index') }}" class="text-[#c77d4a] hover:text-white transition text-sm">{{ __('clear_filters') }}</a>
                        @endif
                    </div>
                @else
                    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                        @foreach($products as $product)
                            @include('partials.product-card', ['product' => $product])
                        @endforeach
                    </div>

                    <div class="mt-12">
                        {{ $products->links() }}
                    </div>
                @endif
            </div>
        </div>
    </div>
</section>
@endsection