@extends('layout.user')

@section('title', 'ভেন্ডর সার্চ')
@section('meta_description', 'approved ভেন্ডর খুঁজুন এবং তাদের প্রোডাক্ট, ক্যাটাগরি ও শপ প্রোফাইল দেখুন।')
@section('meta_keywords', 'vendor search, seller list, online vendor, Bangladesh')
@section('meta_robots', 'index,follow,max-image-preview:large,max-snippet:-1,max-video-preview:-1')

@section('content')
<div class="mx-auto max-w-6xl px-2 sm:px-3 md:px-4 mt-2 pb-10">
  @include('shop._reselling_policy_banner')

  <div class="mb-3 flex items-center justify-between">
    <h1 class="text-lg font-semibold text-slate-900">ভেন্ডর সার্চ</h1>
    <a href="{{ route('shop.index') }}" class="inline-flex items-center rounded-lg border border-slate-300 bg-white px-3 py-1.5 text-sm font-semibold text-slate-700">Back</a>
  </div>

  <form method="GET" class="mb-3">
    <div class="flex items-center gap-2">
      <input type="text" name="q" value="{{ $q }}" placeholder="ভেন্ডর নাম দিয়ে সার্চ করুন..."
             class="w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm">
      <button class="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-semibold text-white">Search</button>
    </div>
  </form>

  <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-3">
    @forelse($vendors as $v)
      <div class="rounded-xl border border-slate-200 bg-white p-3 shadow-sm">
        <div class="aspect-square rounded-lg bg-slate-50 overflow-hidden flex items-center justify-center">
          <img src="{{ $v->image_url }}" alt="{{ $v->vendor_name }}" class="h-full w-full object-cover">
        </div>
        <div class="mt-2 text-center text-sm font-bold text-slate-800 line-clamp-2">{{ $v->vendor_name }}</div>
        <a href="{{ route('shop.vendors.show', $v->id) }}"
           class="mt-2 block rounded-lg bg-indigo-600 py-1.5 text-center text-xs font-bold text-white">
          ভেন্ডর দেখুন
        </a>
      </div>
    @empty
      <div class="col-span-full rounded-xl border border-slate-200 bg-white p-5 text-center text-slate-500">কোনো ভেন্ডর পাওয়া যায়নি।</div>
    @endforelse
  </div>

  <div class="mt-3">{{ $vendors->links('vendor.pagination.custom-tailwind') }}</div>
</div>
@endsection
