thrillwiki_laravel/resources/views/livewire/area-statistics-component.blade.php

<div class="bg-white shadow-sm ring-1 ring-gray-900/5 rounded-xl overflow-hidden">
    <!-- Basic Statistics -->
    <div class="p-6">
        <div class="flex items-center justify-between mb-4">
            <h3 class="text-lg font-medium text-gray-900">Area Statistics</h3>
            <div class="flex space-x-2">
                <button wire:click="toggleDetails" class="text-sm text-indigo-600 hover:text-indigo-900">
                    {{ $showDetails ? 'Hide Details' : 'Show Details' }}
                </button>
                <button wire:click="toggleHistorical" class="text-sm text-indigo-600 hover:text-indigo-900">
                    {{ $showHistorical ? 'Hide Historical' : 'Show Historical' }}
                </button>
            </div>
        </div>

        <!-- Ride Counts -->
        <div class="grid grid-cols-2 gap-4 sm:grid-cols-4 mb-6">
            <div>
                <span class="text-sm font-medium text-gray-500">Total Rides</span>
                <p class="mt-1 text-2xl font-semibold text-gray-900">{{ $area->ride_count }}</p>
            </div>
            <div>
                <span class="text-sm font-medium text-gray-500">Coasters</span>
                <p class="mt-1 text-2xl font-semibold text-gray-900">{{ $area->coaster_count }}</p>
            </div>
            <div>
                <span class="text-sm font-medium text-gray-500">Rating</span>
                <p class="mt-1 text-2xl font-semibold text-gray-900">{{ $area->rating_display }}</p>
            </div>
            <div>
                <span class="text-sm font-medium text-gray-500">Daily Capacity</span>
                <p class="mt-1 text-2xl font-semibold text-gray-900">{{ $area->formatted_daily_capacity }}</p>
            </div>
        </div>

        <!-- Detailed Statistics -->
        @if($showDetails)
            <div class="border-t border-gray-200 pt-6">
                <h4 class="text-sm font-medium text-gray-900 mb-4">Ride Distribution</h4>
                
                <!-- Distribution Chart -->
                <div class="space-y-4">
                    <div class="flex items-center">
                        <span class="text-sm font-medium text-gray-500 w-24">Coasters</span>
                        <div class="flex-1 h-4 bg-gray-100 rounded-full overflow-hidden">
                            <div class="h-full bg-indigo-600 rounded-full" style="width: {{ $ridePercentages['coasters'] }}%"></div>
                        </div>
                        <span class="ml-2 text-sm text-gray-500">{{ $ridePercentages['coasters'] }}%</span>
                    </div>
                    <div class="flex items-center">
                        <span class="text-sm font-medium text-gray-500 w-24">Flat Rides</span>
                        <div class="flex-1 h-4 bg-gray-100 rounded-full overflow-hidden">
                            <div class="h-full bg-blue-600 rounded-full" style="width: {{ $ridePercentages['flat_rides'] }}%"></div>
                        </div>
                        <span class="ml-2 text-sm text-gray-500">{{ $ridePercentages['flat_rides'] }}%</span>
                    </div>
                    <div class="flex items-center">
                        <span class="text-sm font-medium text-gray-500 w-24">Water Rides</span>
                        <div class="flex-1 h-4 bg-gray-100 rounded-full overflow-hidden">
                            <div class="h-full bg-cyan-600 rounded-full" style="width: {{ $ridePercentages['water_rides'] }}%"></div>
                        </div>
                        <span class="ml-2 text-sm text-gray-500">{{ $ridePercentages['water_rides'] }}%</span>
                    </div>
                </div>

                <!-- Additional Details -->
                <div class="mt-6 grid grid-cols-2 gap-4">
                    <div>
                        <span class="text-sm font-medium text-gray-500">Peak Wait Time</span>
                        <p class="mt-1 text-lg font-medium text-gray-900">{{ $area->formatted_peak_wait_time }}</p>
                    </div>
                    <div>
                        <span class="text-sm font-medium text-gray-500">Operating Status</span>
                        <p class="mt-1 text-lg font-medium {{ $area->isOperating() ? 'text-green-600' : 'text-red-600' }}">
                            {{ $area->isOperating() ? 'Operating' : 'Closed' }}
                        </p>
                    </div>
                </div>
            </div>
        @endif

        <!-- Historical Statistics -->
        @if($showHistorical)
            <div class="border-t border-gray-200 pt-6">
                <h4 class="text-sm font-medium text-gray-900 mb-4">Historical Data</h4>
                
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <span class="text-sm font-medium text-gray-500">Total Rides Operated</span>
                        <p class="mt-1 text-lg font-medium text-gray-900">{{ $historicalStats['total_operated'] }}</p>
                    </div>
                    <div>
                        <span class="text-sm font-medium text-gray-500">Retired Rides</span>
                        <p class="mt-1 text-lg font-medium text-gray-900">{{ $historicalStats['retired_count'] }}</p>
                    </div>
                    <div>
                        <span class="text-sm font-medium text-gray-500">Last New Ride</span>
                        <p class="mt-1 text-lg font-medium text-gray-900">{{ $historicalStats['last_addition'] }}</p>
                    </div>
                    <div>
                        <span class="text-sm font-medium text-gray-500">Retirement Rate</span>
                        <p class="mt-1 text-lg font-medium text-gray-900">{{ $historicalStats['retirement_rate'] }}%</p>
                    </div>
                </div>
            </div>
        @endif
    </div>
</div>