thrillwiki_laravel/resources/views/parks/show.blade.php

<x-app-layout>
    <x-slot name="title">{{ $park->name }}</x-slot>
    
    <div class="container mx-auto px-4 py-8">
    <div class="mb-6">
        <div class="flex flex-wrap items-center justify-between">
            <div>
                <h1 class="text-3xl font-bold text-gray-900 dark:text-white">{{ $park->name }}</h1>
                <div class="flex items-center mt-2 text-sm text-gray-600 dark:text-gray-300">
                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {{ $park->status_classes }} mr-2">
                        {{ $park->status->name }}
                    </span>
                    @if ($park->operator)
                        <span>Operated by <a href="{{ route('operators.show', $park->operator) }}" class="text-blue-600 dark:text-blue-400 hover:underline">{{ $park->operator->name }}</a></span>
                    @endif
                </div>
            </div>
            
            <div class="mt-4 md:mt-0 flex space-x-2">
                <a href="{{ route('parks.edit', $park) }}" class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:bg-gray-600">
                    <svg class="-ml-1 mr-2 h-5 w-5 text-gray-500 dark:text-gray-300" 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="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
                    </svg>
                    Edit Park
                </a>
            </div>
        </div>
    </div>
    
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Main Content -->
        <div class="lg:col-span-2 space-y-6">
            <!-- Featured Photo -->
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
                <div class="aspect-video bg-gray-100 dark:bg-gray-700">
                    <img 
                        src="{{ $park->featured_photo_url }}" 
                        alt="{{ $park->name }}" 
                        class="w-full h-full object-cover"
                    >
                </div>
            </div>
            
            <!-- Description -->
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
                <h2 class="text-xl font-semibold mb-4 text-gray-900 dark:text-white">About {{ $park->name }}</h2>
                <div class="prose dark:prose-invert max-w-none">
                    @if ($park->description)
                        <p>{{ $park->description }}</p>
                    @else
                        <p class="text-gray-500 dark:text-gray-400">No description available.</p>
                    @endif
                </div>
            </div>
            
            <!-- Photo Gallery -->
            <livewire:photo-gallery-component :park="$park" />
        </div>
        
        <!-- Sidebar -->
        <div class="space-y-6">
            <!-- Park Info -->
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
                <h2 class="text-lg font-semibold mb-4 text-gray-900 dark:text-white">Park Information</h2>
                
                <dl class="space-y-3 text-sm">
                    @if ($park->opening_date)
                        <div class="flex justify-between">
                            <dt class="font-medium text-gray-500 dark:text-gray-400">Opened:</dt>
                            <dd class="text-gray-900 dark:text-white">{{ $park->opening_date->format('F j, Y') }}</dd>
                        </div>
                    @endif
                    
                    @if ($park->closing_date)
                        <div class="flex justify-between">
                            <dt class="font-medium text-gray-500 dark:text-gray-400">Closed:</dt>
                            <dd class="text-gray-900 dark:text-white">{{ $park->closing_date->format('F j, Y') }}</dd>
                        </div>
                    @endif
                    
                    @if ($park->size_acres)
                        <div class="flex justify-between">
                            <dt class="font-medium text-gray-500 dark:text-gray-400">Size:</dt>
                            <dd class="text-gray-900 dark:text-white">{{ $park->size_display }}</dd>
                        </div>
                    @endif
                    
                    @if ($park->operating_season)
                        <div class="flex justify-between">
                            <dt class="font-medium text-gray-500 dark:text-gray-400">Season:</dt>
                            <dd class="text-gray-900 dark:text-white">{{ $park->operating_season }}</dd>
                        </div>
                    @endif
                    
                    @if ($park->website)
                        <div class="flex justify-between">
                            <dt class="font-medium text-gray-500 dark:text-gray-400">Website:</dt>
                            <dd class="text-gray-900 dark:text-white">
                                <a href="{{ $park->website_url }}" target="_blank" rel="noopener noreferrer" class="text-blue-600 dark:text-blue-400 hover:underline">
                                    Visit Website
                                </a>
                            </dd>
                        </div>
                    @endif
                    
                    <div class="flex justify-between">
                        <dt class="font-medium text-gray-500 dark:text-gray-400">Location:</dt>
                        <dd class="text-gray-900 dark:text-white">{{ $park->formatted_location ?: 'Unknown' }}</dd>
                    </div>
                </dl>
            </div>
            
            <!-- Statistics -->
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
                <h2 class="text-lg font-semibold mb-4 text-gray-900 dark:text-white">Statistics</h2>
                
                <dl class="space-y-3 text-sm">
                    <div class="flex justify-between">
                        <dt class="font-medium text-gray-500 dark:text-gray-400">Total Rides:</dt>
                        <dd class="text-gray-900 dark:text-white">{{ $park->total_rides ?: 0 }}</dd>
                    </div>
                    
                    <div class="flex justify-between">
                        <dt class="font-medium text-gray-500 dark:text-gray-400">Roller Coasters:</dt>
                        <dd class="text-gray-900 dark:text-white">{{ $park->total_coasters ?: 0 }}</dd>
                    </div>
                    
                    <div class="flex justify-between">
                        <dt class="font-medium text-gray-500 dark:text-gray-400">Flat Rides:</dt>
                        <dd class="text-gray-900 dark:text-white">{{ $park->total_flat_rides ?: 0 }}</dd>
                    </div>
                    
                    <div class="flex justify-between">
                        <dt class="font-medium text-gray-500 dark:text-gray-400">Water Rides:</dt>
                        <dd class="text-gray-900 dark:text-white">{{ $park->total_water_rides ?: 0 }}</dd>
                    </div>
                    
                    <div class="flex justify-between">
                        <dt class="font-medium text-gray-500 dark:text-gray-400">Areas:</dt>
                        <dd class="text-gray-900 dark:text-white">{{ $park->total_areas ?: 0 }}</dd>
                    </div>
                </dl>
            </div>
            
            <!-- Location -->
            @if ($park->location)
                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
                    <livewire:location.location-map-component :location="$park->location" :height="300" />
                </div>
            @endif
            
            <!-- Photo Upload -->
            <livewire:photo-upload-component :park="$park" />
            
            <!-- Photo Management -->
            <livewire:photo-manager-component :park="$park" />
            
            <!-- Featured Photo Selector -->
            <livewire:featured-photo-selector-component :park="$park" />
        </div>
    </div>
    </div>
</x-app-layout>