@extends('layouts.store')
@section('title', __('app.shop') . ' - ' . __('app.site_name'))

@section('content')
<div class="bg-gradient-hero text-white py-12 mb-8 relative overflow-hidden">
    <div class="absolute inset-0 opacity-15">
        <div class="absolute top-0 right-0 w-64 h-64 bg-lavender-400 rounded-full blur-3xl"></div>
    </div>
    <div class="max-w-7xl mx-auto px-4 relative z-10">
        <h1 class="text-4xl font-display font-bold mb-2">{{ __('app.shop') }}</h1>
        <nav class="text-brand-200 text-sm">
            <a href="{{ route('home') }}" class="hover:text-white transition-colors">{{ __('app.home') }}</a>
            <span class="mx-2 opacity-50">/</span>
            <span class="text-white">{{ __('app.shop') }}</span>
        </nav>
    </div>
</div>
<div class="max-w-7xl mx-auto px-4 pb-16">
    <div class="flex flex-col lg:flex-row gap-8">
        <aside class="lg:w-72 shrink-0">
            <form method="GET" action="{{ route('shop') }}" class="bg-white rounded-2xl shadow-sm border border-brand-100/50 p-6 sticky top-28 space-y-5">
                <h3 class="font-bold text-brand-800 text-lg mb-2">{{ __('app.filter') }}</h3>
                <div><label class="block text-sm font-semibold text-brand-700 mb-1.5">{{ __('app.search') }}</label><input type="text" name="search" value="{{ request('search') }}" placeholder="{{ __('app.search') }}" class="input-luxury text-sm"></div>
                <div><label class="block text-sm font-semibold text-brand-700 mb-1.5">{{ __('app.category') }}</label>
                    <select name="category" class="input-luxury text-sm"><option value="">{{ __('app.all_categories') }}</option>@foreach($categories as $cat)<option value="{{ $cat->id }}" @selected(request('category') == $cat->id)>{{ $cat->t('name') }}</option>@endforeach</select>
                </div>
                <div class="grid grid-cols-2 gap-3">
                    <div><label class="text-xs font-semibold text-brand-500">{{ __('app.min_price') }}</label><input type="number" name="min_price" value="{{ request('min_price') }}" min="0" step="0.01" class="input-luxury text-sm"></div>
                    <div><label class="text-xs font-semibold text-brand-500">{{ __('app.max_price') }}</label><input type="number" name="max_price" value="{{ request('max_price') }}" min="0" step="0.01" class="input-luxury text-sm"></div>
                </div>
                <div><label class="block text-sm font-semibold text-brand-700 mb-1.5">{{ __('app.sort_by') }}</label>
                    <select name="sort" class="input-luxury text-sm"><option value="latest" @selected(request('sort')=='latest')>{{ __('app.latest') }}</option><option value="price_asc" @selected(request('sort')=='price_asc')>{{ __('app.price_low_high') }}</option><option value="price_desc" @selected(request('sort')=='price_desc')>{{ __('app.price_high_low') }}</option><option value="name" @selected(request('sort')=='name')>{{ __('app.by_name') }}</option></select>
                </div>
                <button type="submit" class="btn-primary w-full !rounded-xl">{{ __('app.filter') }}</button>
                @if(request()->hasAny(['search','category','min_price','max_price','sort']))
                    <a href="{{ route('shop') }}" class="block text-center text-sm text-brand-400 hover:text-brand-600 font-medium transition-colors">{{ __('app.all_categories') }}</a>
                @endif
            </form>
        </aside>
        <div class="flex-1">
            @if($products->count())
                <div class="grid grid-cols-2 md:grid-cols-3 gap-6">@foreach($products as $product)@include('store.partials.product-card', ['product' => $product])@endforeach</div>
                <div class="mt-10">{{ $products->links() }}</div>
            @else
                <div class="text-center py-28">
                    <div class="w-24 h-24 mx-auto bg-brand-50 rounded-full flex items-center justify-center mb-6"><svg class="w-12 h-12 text-brand-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg></div>
                    <p class="text-xl font-bold text-brand-400 mb-2">{{ __('app.no_products') }}</p>
                </div>
            @endif
        </div>
    </div>
</div>
@endsection