thrillwiki_laravel/resources/views/livewire/park-list-component.blade.php

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <!-- Filters and Search -->
    <div class="bg-white shadow-sm ring-1 ring-gray-900/5 rounded-xl p-4 mb-6">
        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
            <!-- Search -->
            <div>
                <label for="search" class="block text-sm font-medium text-gray-700">Search</label>
                <div class="mt-1">
                    <input type="text" wire:model.live.debounce.300ms="search" id="search"
                        class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
                        placeholder="Search parks...">
                </div>
            </div>

            <!-- Status Filter -->
            <div>
                <label for="status" class="block text-sm font-medium text-gray-700">Status</label>
                <div class="mt-1">
                    <select wire:model.live="status" id="status"
                        class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
                        @foreach($statusOptions as $value => $label)
                            <option value="{{ $value }}">{{ $label }}</option>
                        @endforeach
                    </select>
                </div>
            </div>

            <!-- Operator Filter -->
            <div>
                <label for="operator" class="block text-sm font-medium text-gray-700">Operator</label>
                <div class="mt-1">
                    <select wire:model.live="operator" id="operator"
                        class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
                        @foreach($operatorOptions as $id => $name)
                            <option value="{{ $id }}">{{ $name }}</option>
                        @endforeach
                    </select>
                </div>
            </div>

            <!-- Sort -->
            <div>
                <label for="sort" class="block text-sm font-medium text-gray-700">Sort By</label>
                <div class="mt-1">
                    <select wire:model.live="sort" id="sort"
                        class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
                        @foreach($sortOptions as $value => $label)
                            <option value="{{ $value }}">{{ $label }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
        </div>
    </div>

    <!-- Parks Grid -->
    <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
        @forelse($parks as $park)
            <div class="bg-white shadow-sm ring-1 ring-gray-900/5 rounded-xl overflow-hidden">
                <div class="p-6">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-lg font-semibold text-gray-900">
                            <a href="{{ route('parks.show', $park) }}" class="hover:text-indigo-600">
                                {{ $park->name }}
                            </a>
                        </h3>
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {{ $park->status_classes }}">
                            {{ $park->status->label() }}
                        </span>
                    </div>

                    <div class="text-sm text-gray-500 mb-4">
                        {{ $park->brief_description }}
                    </div>

                    <div class="grid grid-cols-2 gap-4 text-sm">
                        <div>
                            <span class="text-gray-500">Operator:</span>
                            <span class="text-gray-900">{{ $park->operator?->name ?? 'Unknown' }}</span>
                        </div>
                        @if($park->opening_year)
                            <div>
                                <span class="text-gray-500">Opened:</span>
                                <span class="text-gray-900">{{ $park->opening_year }}</span>
                            </div>
                        @endif
                        @if($park->size_acres)
                            <div>
                                <span class="text-gray-500">Size:</span>
                                <span class="text-gray-900">{{ $park->size_display }}</span>
                            </div>
                        @endif
                        <div>
                            <span class="text-gray-500">Rides:</span>
                            <span class="text-gray-900">{{ $park->ride_count ?? 0 }}</span>
                        </div>
                    </div>

                    <div class="mt-4 flex justify-end space-x-3">
                        @if($park->website)
                            <a href="{{ $park->website_url }}" target="_blank" rel="noopener"
                                class="text-sm text-gray-500 hover:text-gray-900">
                                Visit Website
                            </a>
                        @endif
                        <a href="{{ route('parks.edit', $park) }}"
                            class="text-sm text-indigo-600 hover:text-indigo-900">
                            Edit
                        </a>
                    </div>
                </div>
            </div>
        @empty
            <div class="col-span-full text-center py-12">
                <h3 class="text-lg font-medium text-gray-900">No parks found</h3>
                <p class="mt-2 text-sm text-gray-500">Try adjusting your filters or search terms.</p>
            </div>
        @endforelse
    </div>

    <!-- Pagination -->
    <div class="mt-6">
        {{ $parks->links() }}
    </div>

    <!-- Create Button -->
    <div class="fixed bottom-6 right-6">
        <a href="{{ route('parks.create') }}"
            class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
            <svg class="-ml-1 mr-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
            </svg>
            Add Park
        </a>
    </div>
</div>