thrillwiki_laravel/resources/views/livewire/ride-list.blade.php

<div class="space-y-4">
    {{-- Control Panel --}}
    <div class="bg-white dark:bg-gray-800 shadow sm:rounded-lg p-4">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            {{-- Search --}}
            <div>
                <label for="search" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Search</label>
                <input type="search" 
                       id="search"
                       wire:model.live="search"
                       class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white sm:text-sm"
                       placeholder="Search rides...">
            </div>

            {{-- Category Filter --}}
            <div>
                <label for="category" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Category</label>
                <select id="category"
                        wire:model.live="category"
                        class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white sm:text-sm">
                    <option value="">All Categories</option>
                    @foreach($this->categories as $value => $label)
                        <option value="{{ $value }}">{{ $label }}</option>
                    @endforeach
                </select>
            </div>

            {{-- View Toggle --}}
            <div class="flex items-end justify-end">
                <button type="button" 
                        wire:click="toggleView"
                        class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:bg-gray-600">
                    <span>{{ $viewMode === 'grid' ? 'Switch to List' : 'Switch to Grid' }}</span>
                </button>
            </div>
        </div>
    </div>

    {{-- Rides List/Grid --}}
    <div>
        @if($viewMode === 'grid')
            {{-- Grid View --}}
            <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
                @foreach($rides as $ride)
                    <div class="bg-white dark:bg-gray-800 shadow overflow-hidden sm:rounded-lg">
                        <div class="px-4 py-5 sm:p-6">
                            <div class="flex justify-between items-start">
                                <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">
                                    <a href="{{ route('rides.show', $ride) }}" class="hover:text-primary-600 dark:hover:text-primary-400">
                                        {{ $ride->name }}
                                    </a>
                                </h3>
                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-{{ $ride->status === 'OPERATING' ? 'green' : 'red' }}-100 text-{{ $ride->status === 'OPERATING' ? 'green' : 'red' }}-800">
                                    {{ $ride->status->label() }}
                                </span>
                            </div>
                            <div class="mt-2">
                                <p class="text-sm text-gray-500 dark:text-gray-400">
                                    {{ $ride->park->name }}
                                </p>
                                @if($ride->parkArea)
                                    <p class="text-sm text-gray-500 dark:text-gray-400">
                                        {{ $ride->parkArea->name }}
                                    </p>
                                @endif
                            </div>
                            <div class="mt-3 flex justify-between items-center">
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                                    {{ $ride->category->label() }}
                                </span>
                                @if($ride->average_rating)
                                    <span class="inline-flex items-center text-sm text-yellow-500">
                                        <svg class="h-5 w-5 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                                        </svg>
                                        {{ number_format($ride->average_rating, 1) }}
                                    </span>
                                @endif
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        @else
            {{-- List View --}}
            <div class="bg-white dark:bg-gray-800 shadow overflow-hidden sm:rounded-lg">
                <ul class="divide-y divide-gray-200 dark:divide-gray-700">
                    @foreach($rides as $ride)
                        <li class="px-4 py-4 sm:px-6 hover:bg-gray-50 dark:hover:bg-gray-700">
                            <div class="flex items-center justify-between">
                                <div class="flex-1 min-w-0">
                                    <h3 class="text-sm font-medium text-gray-900 dark:text-white truncate">
                                        <a href="{{ route('rides.show', $ride) }}" class="hover:text-primary-600 dark:hover:text-primary-400">
                                            {{ $ride->name }}
                                        </a>
                                    </h3>
                                    <div class="mt-2 flex">
                                        <div class="flex items-center text-sm text-gray-500 dark:text-gray-400">
                                            {{ $ride->park->name }}
                                            @if($ride->parkArea)
                                                <span class="px-2">•</span>
                                                {{ $ride->parkArea->name }}
                                            @endif
                                        </div>
                                    </div>
                                </div>
                                <div class="flex flex-col items-end">
                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-{{ $ride->status === 'OPERATING' ? 'green' : 'red' }}-100 text-{{ $ride->status === 'OPERATING' ? 'green' : 'red' }}-800">
                                        {{ $ride->status->label() }}
                                    </span>
                                    <span class="mt-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                                        {{ $ride->category->label() }}
                                    </span>
                                </div>
                            </div>
                        </li>
                    @endforeach
                </ul>
            </div>
        @endif
    </div>

    {{-- Pagination --}}
    <div class="mt-4">
        {{ $rides->links() }}
    </div>
</div>