@extends('layouts.app')

@section('content')
<div class="bg-gray-50 min-h-screen py-8">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        {{-- Search Header --}}
        <div class="mb-8">
            <h1 class="text-3xl font-bold text-gray-900 mb-4">Search Results</h1>
            <form action="{{ route('search') }}" method="GET" class="max-w-2xl">
                <div class="flex">
                    <input type="text" name="q" value="{{ request('q') }}" placeholder="Search for toys..."
                           class="flex-1 px-6 py-3 border border-r-0 rounded-l-full focus:ring-blue-500 focus:border-blue-500">
                    <button type="submit" class="px-8 py-3 bg-blue-600 text-white rounded-r-full hover:bg-blue-700 transition">
                        Search
                    </button>
                </div>
            </form>
            @if(request('q'))
            <p class="text-gray-600 mt-4">Showing results for "{{ request('q') }}"</p>
            @endif
        </div>

        {{-- Results --}}
        @if($products->count() > 0)
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
                @foreach($products as $product)
                    @include('components.product-card', ['product' => $product])
                @endforeach
            </div>
            
            <div class="mt-8">
                {{ $products->links() }}
            </div>
        @else
            <div class="text-center py-16 bg-white rounded-2xl">
                <svg class="w-16 h-16 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                </svg>
                <h3 class="text-lg font-medium text-gray-900 mb-2">No products found</h3>
                <p class="text-gray-600 mb-4">Try different keywords or browse our categories.</p>
                <a href="{{ route('shop') }}" class="inline-block bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition">
                    Browse All Products
                </a>
            </div>
        @endif
    </div>
</div>
@endsection