@extends('layouts.app')

@section('content')

    <div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl">
        <div class="md:flex">
            <div class="p-8">
                <form action="{{ route('search.results') }}" method="GET" class="mb-4">
                    <div class="flex">
                        <input type="text" name="query" placeholder="Enter search term..." class="flex-grow border rounded-l-md p-2 focus:outline-none focus:ring focus:border-blue-300">
                        <button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-r-md">
                            Search
                        </button>
                    </div>
                </form>

                @if(isset($results))
                    @if(count($results) > 0)
                        <ul class="list-disc list-inside">
                            @foreach($results as $result)
                                <li class="py-1">{{ $result['name'] }}</li>
                            @endforeach
                        </ul>
                    @else
                        <p class="text-gray-600">No results found.</p>
                    @endif
                @endif
            </div>
        </div>
    </div>

@endsection