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

<div class="bg-white dark:bg-gray-800 shadow overflow-hidden sm:rounded-lg">
    {{-- Header --}}
    <div class="px-4 py-5 sm:px-6 border-b border-gray-200 dark:border-gray-700">
        <div class="flex justify-between items-start">
            <div>
                <h3 class="text-2xl font-bold leading-6 text-gray-900 dark:text-white">
                    {{ $ride->name }}
                </h3>
                <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                    {{ $ride->park->name }}
                    @if($ride->parkArea)
                        <span class="px-2">•</span>
                        {{ $ride->parkArea->name }}
                    @endif
                </p>
            </div>
            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full {{ $this->getStatusColorClasses() }}">
                {{ $ride->status->label() }}
            </span>
        </div>
    </div>

    {{-- Basic Information --}}
    <div class="px-4 py-5 sm:p-6 border-b border-gray-200 dark:border-gray-700">
        <dl class="grid grid-cols-1 md:grid-cols-2 gap-x-4 gap-y-8">
            <div>
                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Category</dt>
                <dd class="mt-1 text-sm text-gray-900 dark:text-white">{{ $ride->category->label() }}</dd>
            </div>

            <div>
                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Operating Period</dt>
                <dd class="mt-1 text-sm text-gray-900 dark:text-white">{{ $this->operatingPeriod }}</dd>
            </div>

            @if($ride->manufacturer)
            <div>
                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Manufacturer</dt>
                <dd class="mt-1 text-sm text-gray-900 dark:text-white">{{ $ride->manufacturer->name }}</dd>
            </div>
            @endif

            @if($ride->designer)
            <div>
                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Designer</dt>
                <dd class="mt-1 text-sm text-gray-900 dark:text-white">{{ $ride->designer->name }}</dd>
            </div>
            @endif

            @if($ride->rideModel)
            <div>
                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Model</dt>
                <dd class="mt-1 text-sm text-gray-900 dark:text-white">{{ $ride->rideModel->name }}</dd>
            </div>
            @endif
        </dl>

        @if($ride->description)
        <div class="mt-8">
            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Description</dt>
            <dd class="mt-1 text-sm text-gray-900 dark:text-white whitespace-pre-line">{{ $ride->description }}</dd>
        </div>
        @endif
    </div>

    {{-- Technical Details --}}
    <div class="px-4 py-5 sm:p-6 border-b border-gray-200 dark:border-gray-700">
        <h4 class="text-lg font-medium text-gray-900 dark:text-white mb-4">Technical Specifications</h4>
        <dl class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-4 gap-y-8">
            @if($ride->min_height_in)
            <div>
                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Minimum Height</dt>
                <dd class="mt-1 text-sm text-gray-900 dark:text-white">{{ $ride->min_height_in }} inches</dd>
            </div>
            @endif

            @if($ride->max_height_in)
            <div>
                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Maximum Height</dt>
                <dd class="mt-1 text-sm text-gray-900 dark:text-white">{{ $ride->max_height_in }} inches</dd>
            </div>
            @endif

            @if($ride->capacity_per_hour)
            <div>
                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Hourly Capacity</dt>
                <dd class="mt-1 text-sm text-gray-900 dark:text-white">{{ number_format($ride->capacity_per_hour) }} riders</dd>
            </div>
            @endif

            @if($ride->ride_duration_seconds)
            <div>
                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Ride Duration</dt>
                <dd class="mt-1 text-sm text-gray-900 dark:text-white">{{ $ride->ride_duration_seconds }} seconds</dd>
            </div>
            @endif
        </dl>
    </div>

    {{-- Roller Coaster Stats --}}
    @if($ride->coasterStats)
    <div class="px-4 py-5 sm:p-6">
        <div class="flex items-center justify-between mb-4">
            <h4 class="text-lg font-medium text-gray-900 dark:text-white">Roller Coaster Statistics</h4>
            <button type="button" 
                    wire:click="toggleCoasterStats"
                    class="inline-flex items-center px-3 py-1.5 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-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:bg-gray-600">
                {{ $showCoasterStats ? 'Hide Details' : 'Show Details' }}
            </button>
        </div>

        @if($showCoasterStats)
        <dl class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-4 gap-y-8">
            {{-- Track Details --}}
            <div>
                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Track Type</dt>
                <dd class="mt-1 text-sm text-gray-900 dark:text-white">{{ $ride->coasterStats->track_material->label() }}</dd>
            </div>

            <div>
                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Coaster Type</dt>
                <dd class="mt-1 text-sm text-gray-900 dark:text-white">{{ $ride->coasterStats->roller_coaster_type->label() }}</dd>
            </div>

            <div>
                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Launch Type</dt>
                <dd class="mt-1 text-sm text-gray-900 dark:text-white">{{ $ride->coasterStats->launch_type->label() }}</dd>
            </div>

            {{-- Physical Measurements --}}
            <div>
                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Height</dt>
                <dd class="mt-1 text-sm text-gray-900 dark:text-white">{{ $this->formatMeasurement($ride->coasterStats->height_ft, 'ft') }}</dd>
            </div>

            <div>
                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Length</dt>
                <dd class="mt-1 text-sm text-gray-900 dark:text-white">{{ $this->formatMeasurement($ride->coasterStats->length_ft, 'ft') }}</dd>
            </div>

            <div>
                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Speed</dt>
                <dd class="mt-1 text-sm text-gray-900 dark:text-white">{{ $this->formatMeasurement($ride->coasterStats->speed_mph, 'mph') }}</dd>
            </div>

            <div>
                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Max Drop</dt>
                <dd class="mt-1 text-sm text-gray-900 dark:text-white">{{ $this->formatMeasurement($ride->coasterStats->max_drop_height_ft, 'ft') }}</dd>
            </div>

            <div>
                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Inversions</dt>
                <dd class="mt-1 text-sm text-gray-900 dark:text-white">{{ $ride->coasterStats->inversions ?? 'N/A' }}</dd>
            </div>

            {{-- Train Configuration --}}
            @if($ride->coasterStats->train_style)
            <div class="col-span-full">
                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Train Style</dt>
                <dd class="mt-1 text-sm text-gray-900 dark:text-white">{{ $ride->coasterStats->train_style }}</dd>
            </div>
            @endif

            <div>
                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Number of Trains</dt>
                <dd class="mt-1 text-sm text-gray-900 dark:text-white">{{ $ride->coasterStats->trains_count ?? 'N/A' }}</dd>
            </div>

            <div>
                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Cars per Train</dt>
                <dd class="mt-1 text-sm text-gray-900 dark:text-white">{{ $ride->coasterStats->cars_per_train ?? 'N/A' }}</dd>
            </div>

            <div>
                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Seats per Car</dt>
                <dd class="mt-1 text-sm text-gray-900 dark:text-white">{{ $ride->coasterStats->seats_per_car ?? 'N/A' }}</dd>
            </div>
        </dl>
        @endif
    </div>
    @endif

    {{-- Actions --}}
    <div class="px-4 py-3 bg-gray-50 dark:bg-gray-700 text-right sm:px-6">
        <a href="{{ route('rides.edit', $ride) }}" 
           class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
            Edit Ride
        </a>
    </div>
</div>