@extends('layouts.app')

@section('title', $vendor->shop_name)

@section('content')
<div class="max-w-7xl mx-auto px-4 py-8">
    {{-- Vendor Header --}}
    <div class="bg-white rounded-xl shadow-sm p-6 mb-6 flex items-center gap-6">
        <img src="{{ $vendor->logo_url }}" alt="{{ $vendor->shop_name }}" class="w-20 h-20 object-cover rounded-xl">
        <div>
            <h1 class="text-2xl font-bold text-gray-800">{{ $vendor->shop_name }}</h1>
            <p class="text-gray-500 text-sm mt-1">{{ $vendor->description }}</p>
            <p class="text-xs text-gray-400 mt-1">{{ $vendor->city }}, {{ $vendor->country }}</p>
        </div>
    </div>

    <div class="flex flex-col lg:flex-row gap-8">
        <aside class="w-full lg:w-64 flex-shrink-0">
            <form method="GET" class="bg-white rounded-xl shadow-sm p-5 space-y-5">
                <h3 class="font-bold text-gray-800">Filters</h3>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Category</label>
                    <select name="category" class="w-full border border-gray-300 rounded px-2 py-1 text-sm">
                        <option value="">All Categories</option>
                        @foreach($categories as $cat)
                        <option value="{{ $cat->id }}" {{ request('category') == $cat->id ? 'selected' : '' }}>{{ $cat->name }}</option>
                        @endforeach
                    </select>
                </div>
                <button type="submit" class="w-full bg-red-600 text-white py-2 rounded-lg hover:bg-red-700 text-sm font-medium">Apply</button>
            </form>
        </aside>
        <div class="flex-1">
            <p class="text-sm text-gray-500 mb-4">{{ $products->total() }} products from this vendor</p>
            @if($products->count() > 0)
            <div class="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-4">
                @foreach($products as $product)
                    @include('components.product-card', ['product' => $product])
                @endforeach
            </div>
            <div class="mt-6">{{ $products->links() }}</div>
            @else
            <div class="text-center py-16 bg-white rounded-xl">
                <p class="text-gray-500">No products from this vendor yet.</p>
            </div>
            @endif
        </div>
    </div>
</div>
@endsection