{{-- ThrillWiki RidesListing: Django Parity Search & Filter Interface --}}
<div class="thrillwiki-rides-listing">
    {{-- Header Section --}}
    <div class="mb-6">
        <h1 class="text-2xl md:text-3xl lg:text-4xl font-bold text-gray-900 dark:text-white mb-2">
            Rides Directory
        </h1>
        <p class="text-gray-600 dark:text-gray-400 text-sm md:text-base">
            Discover and explore theme park rides from around the world
        </p>
    </div>

    {{-- Search & Filter Section --}}
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 mb-6">
        {{-- Main Search Bar --}}
        <div class="p-4 md:p-6">
            <div class="relative">
                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                    <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                    </svg>
                </div>
                <input
                    type="text"
                    wire:model.live.debounce.300ms="search"
                    placeholder="Search rides, parks, manufacturers, or designers..."
                    class="block w-full pl-10 pr-3 py-3 md:py-4 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm md:text-base"
                    style="min-height: 44px;"
                >
            </div>
        </div>

        {{-- Advanced Filters --}}
        <div class="border-t border-gray-200 dark:border-gray-700">
            <div class="p-4 md:p-6">
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
                    {{-- Category Filter --}}
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                            Category
                        </label>
                        <select
                            wire:model.live="category"
                            class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm"
                            style="min-height: 44px;"
                        >
                            <option value="">All Categories</option>
                            @foreach($filterOptions['categories'] as $value => $label)
                                <option value="{{ $value }}">{{ ucfirst($label) }}</option>
                            @endforeach
                        </select>
                    </div>

                    {{-- Status Filter --}}
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                            Status
                        </label>
                        <select
                            wire:model.live="status"
                            class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm"
                            style="min-height: 44px;"
                        >
                            <option value="">All Statuses</option>
                            @foreach($filterOptions['statuses'] as $value => $label)
                                <option value="{{ $value }}">{{ ucfirst($label) }}</option>
                            @endforeach
                        </select>
                    </div>

                    {{-- Manufacturer Filter --}}
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                            Manufacturer
                        </label>
                        <select
                            wire:model.live="manufacturerId"
                            class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm"
                            style="min-height: 44px;"
                        >
                            <option value="">All Manufacturers</option>
                            @foreach($filterOptions['manufacturers'] as $id => $name)
                                <option value="{{ $id }}">{{ $name }}</option>
                            @endforeach
                        </select>
                    </div>

                    {{-- Park Filter --}}
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                            Park
                        </label>
                        <select
                            wire:model.live="parkId"
                            class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm"
                            style="min-height: 44px;"
                        >
                            <option value="">All Parks</option>
                            @foreach($filterOptions['parks'] as $id => $name)
                                <option value="{{ $id }}">{{ $name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                {{-- Year Range Filters --}}
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mt-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                            Opening Year From
                        </label>
                        <input
                            type="number"
                            wire:model.live.debounce.500ms="openingYearFrom"
                            placeholder="e.g. 1990"
                            min="1800"
                            max="{{ date('Y') + 5 }}"
                            class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm"
                            style="min-height: 44px;"
                        >
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                            Opening Year To
                        </label>
                        <input
                            type="number"
                            wire:model.live.debounce.500ms="openingYearTo"
                            placeholder="e.g. 2024"
                            min="1800"
                            max="{{ date('Y') + 5 }}"
                            class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm"
                            style="min-height: 44px;"
                        >
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                            Min Height (cm)
                        </label>
                        <input
                            type="number"
                            wire:model.live.debounce.500ms="minHeight"
                            placeholder="e.g. 100"
                            min="0"
                            max="300"
                            class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm"
                            style="min-height: 44px;"
                        >
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                            Max Height (cm)
                        </label>
                        <input
                            type="number"
                            wire:model.live.debounce.500ms="maxHeight"
                            placeholder="e.g. 200"
                            min="0"
                            max="300"
                            class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm"
                            style="min-height: 44px;"
                        >
                    </div>
                </div>

                {{-- Clear Filters Button --}}
                @if($search || $category || $status || $manufacturerId || $openingYearFrom || $openingYearTo || $minHeight || $maxHeight || $parkId)
                    <div class="mt-4 flex justify-end">
                        <button
                            wire:click="clearFilters"
                            class="inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors duration-200"
                            style="min-height: 44px;"
                        >
                            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                            </svg>
                            Clear Filters
                        </button>
                    </div>
                @endif
            </div>
        </div>
    </div>

    {{-- Results Section --}}
    <div class="mb-6">
        {{-- Results Count & Loading State --}}
        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-4">
            <div class="text-sm text-gray-600 dark:text-gray-400 mb-2 sm:mb-0">
                @if($rides->total() > 0)
                    Showing {{ $rides->firstItem() }}-{{ $rides->lastItem() }} of {{ $rides->total() }} rides
                @else
                    No rides found
                @endif
            </div>
            
            <div wire:loading class="flex items-center text-sm text-gray-500 dark:text-gray-400">
                <svg class="animate-spin -ml-1 mr-2 h-4 w-4" fill="none" viewBox="0 0 24 24">
                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                </svg>
                Loading...
            </div>
        </div>

        {{-- Rides Grid --}}
        @if($rides->count() > 0)
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 md:gap-6">
                @foreach($rides as $ride)
                    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden hover:shadow-md transition-shadow duration-200">
                        {{-- Ride Image --}}
                        <div class="aspect-w-16 aspect-h-9 bg-gray-200 dark:bg-gray-700">
                            @if($ride->photos->count() > 0)
                                <img
                                    src="{{ $ride->photos->first()->url }}"
                                    alt="{{ $ride->name }}"
                                    class="w-full h-48 object-cover"
                                    loading="lazy"
                                >
                            @else
                                <div class="w-full h-48 flex items-center justify-center">
                                    <svg class="w-12 h-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                                    </svg>
                                </div>
                            @endif
                        </div>

                        {{-- Ride Info --}}
                        <div class="p-4">
                            <h3 class="font-semibold text-gray-900 dark:text-white text-lg mb-1 line-clamp-1">
                                {{ $ride->name }}
                            </h3>
                            
                            <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">
                                {{ $ride->park->name }}
                            </p>

                            @if($ride->ride_type)
                                <span class="inline-block px-2 py-1 text-xs font-medium bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 rounded-full mb-2">
                                    {{ ucfirst($ride->ride_type) }}
                                </span>
                            @endif

                            @if($ride->status)
                                <span class="inline-block px-2 py-1 text-xs font-medium rounded-full mb-2 ml-1
                                    @if($ride->status === 'operating') bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200
                                    @elseif($ride->status === 'closed') bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200
                                    @else bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200
                                    @endif">
                                    {{ ucfirst($ride->status) }}
                                </span>
                            @endif

                            @if($ride->description)
                                <p class="text-sm text-gray-600 dark:text-gray-400 line-clamp-2 mb-3">
                                    {{ $ride->description }}
                                </p>
                            @endif

                            {{-- Ride Details --}}
                            <div class="space-y-1 text-xs text-gray-500 dark:text-gray-400">
                                @if($ride->manufacturer)
                                    <div class="flex items-center">
                                        <span class="font-medium">Manufacturer:</span>
                                        <span class="ml-1">{{ $ride->manufacturer->name }}</span>
                                    </div>
                                @endif

                                @if($ride->opening_date)
                                    <div class="flex items-center">
                                        <span class="font-medium">Opened:</span>
                                        <span class="ml-1">{{ $ride->opening_date->format('Y') }}</span>
                                    </div>
                                @endif

                                @if($ride->height_requirement)
                                    <div class="flex items-center">
                                        <span class="font-medium">Height Req:</span>
                                        <span class="ml-1">{{ $ride->height_requirement }}cm</span>
                                    </div>
                                @endif
                            </div>

                            {{-- Action Button --}}
                            <div class="mt-4">
                                <a
                                    href="{{ route('rides.show', $ride) }}"
                                    class="block w-full text-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
                                    style="min-height: 44px; display: flex; align-items: center; justify-content: center;"
                                >
                                    View Details
                                </a>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

            {{-- Pagination --}}
            <div class="mt-8">
                {{ $rides->links() }}
            </div>
        @else
            {{-- Empty State --}}
            <div class="text-center py-12">
                <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 16.172a4 4 0 015.656 0M9 12h6m-6-4h6m2 5.291A7.962 7.962 0 0120 12a8 8 0 10-16 0 7.962 7.962 0 012 5.291z"></path>
                </svg>
                <h3 class="mt-2 text-sm font-medium text-gray-900 dark:text-white">No rides found</h3>
                <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                    Try adjusting your search criteria or filters.
                </p>
                @if($search || $category || $status || $manufacturerId || $openingYearFrom || $openingYearTo || $minHeight || $maxHeight || $parkId)
                    <div class="mt-6">
                        <button
                            wire:click="clearFilters"
                            class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-blue-600 bg-blue-100 hover:bg-blue-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:bg-blue-900 dark:text-blue-200 dark:hover:bg-blue-800"
                            style="min-height: 44px;"
                        >
                            Clear all filters
                        </button>
                    </div>
                @endif
            </div>
        @endif
    </div>
</div>

{{-- Custom Styles for Line Clamping --}}
<style>
.line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
</style>