<div class="container mx-auto px-4 py-8">
    <div class="flex flex-col lg:flex-row gap-8">
        <!-- Filters Sidebar -->
        <div class="lg:w-1/4">
            <div class="bg-white p-6 rounded-lg shadow">
                <h2 class="text-xl font-bold mb-4">Filter Parks</h2>
                <div class="space-y-4">
                    <!-- Search with Autocomplete -->
                    <div class="flex flex-col">
                        <label class="text-sm font-medium text-gray-700">
                            Search
                        </label>
                        <div class="mt-1">
                            <livewire:autocomplete-component
                                type="park"
                                wire:model="search"
                            />
                        </div>
                    </div>

                    <!-- Location -->
                    <div class="flex flex-col">
                        <label for="location" class="text-sm font-medium text-gray-700">
                            Location
                        </label>
                        <div class="mt-1">
                            <input type="text"
                                   wire:model.live="location"
                                   id="location"
                                   class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
                                   placeholder="Filter by location...">
                        </div>
                    </div>

                    <!-- Rating Range -->
                    <div class="flex flex-col">
                        <label class="text-sm font-medium text-gray-700">Rating Range</label>
                        <div class="flex gap-2 mt-1">
                            <input type="number"
                                   wire:model.live="minRating"
                                   min="0"
                                   max="5"
                                   step="0.1"
                                   class="w-1/2 rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
                                   placeholder="Min">
                            <input type="number"
                                   wire:model.live="maxRating"
                                   min="0"
                                   max="5"
                                   step="0.1"
                                   class="w-1/2 rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
                                   placeholder="Max">
                        </div>
                    </div>

                    <!-- Minimum Rides -->
                    <div class="flex flex-col">
                        <label for="minRides" class="text-sm font-medium text-gray-700">
                            Minimum Rides
                        </label>
                        <div class="mt-1">
                            <input type="number"
                                   wire:model.live="minRides"
                                   id="minRides"
                                   min="0"
                                   class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
                                   placeholder="Minimum number of rides">
                        </div>
                    </div>

                    <!-- Minimum Coasters -->
                    <div class="flex flex-col">
                        <label for="minCoasters" class="text-sm font-medium text-gray-700">
                            Minimum Coasters
                        </label>
                        <div class="mt-1">
                            <input type="number"
                                   wire:model.live="minCoasters"
                                   id="minCoasters"
                                   min="0"
                                   class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
                                   placeholder="Minimum number of coasters">
                        </div>
                    </div>

                    <!-- Filter Actions -->
                    <div class="flex justify-between pt-2">
                        @if($filtersApplied)
                        <button wire:click="clearFilters"
                                type="button"
                                class="inline-flex justify-center py-2 px-4 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                            Clear Filters
                        </button>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        <!-- Results Section -->
        <div class="lg:w-3/4">
            <div class="bg-white rounded-lg shadow">
                <div class="p-6 border-b border-gray-200">
                    <div class="flex justify-between items-center">
                        <h2 class="text-xl font-bold">
                            Search Results
                            <span class="text-sm font-normal text-gray-500">({{ $results->total() }} found)</span>
                        </h2>
                    </div>
                </div>

                <div class="divide-y divide-gray-200">
                    @forelse($results as $park)
                    <div class="p-6 flex flex-col md:flex-row gap-4">
                        <!-- Park Image -->
                        <div class="md:w-48 h-32 bg-gray-200 rounded-lg overflow-hidden">
                            @if($park->photos->isNotEmpty())
                            <img src="{{ $park->photos->first()->image_url }}"
                                 alt="{{ $park->name }}"
                                 class="w-full h-full object-cover">
                            @else
                            <div class="w-full h-full flex items-center justify-center text-gray-400">
                                No Image
                            </div>
                            @endif
                        </div>

                        <!-- Park Details -->
                        <div class="flex-1">
                            <h3 class="text-lg font-semibold">
                                <a href="{{ route('parks.show', $park) }}" class="hover:text-blue-600">
                                    {{ $park->name }}
                                </a>
                            </h3>

                            <div class="mt-2 text-sm text-gray-600">
                                @if($park->formatted_location)
                                <p>{{ $park->formatted_location }}</p>
                                @endif
                            </div>

                            <div class="mt-2 flex flex-wrap gap-2">
                                @if($park->average_rating)
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                    {{ number_format($park->average_rating, 1) }} ★
                                </span>
                                @endif

                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                                    {{ $park->status->label() }}
                                </span>

                                @if($park->ride_count)
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
                                    {{ $park->ride_count }} Rides
                                </span>
                                @endif

                                @if($park->coaster_count)
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
                                    {{ $park->coaster_count }} Coasters
                                </span>
                                @endif
                            </div>

                            @if($park->description)
                            <p class="mt-2 text-sm text-gray-600 line-clamp-2">
                                {{ $park->description }}
                            </p>
                            @endif
                        </div>
                    </div>
                    @empty
                    <div class="p-6 text-center text-gray-500">
                        No parks found matching your criteria.
                    </div>
                    @endforelse
                </div>

                @if($results->hasPages())
                <div class="px-6 py-4 border-t border-gray-200">
                    {{ $results->links() }}
                </div>
                @endif
            </div>
        </div>
    </div>
</div>