{{-- Physical Dimensions --}}
<div class="space-y-6 sm:space-y-5">
    <div class="sm:grid sm:grid-cols-2 sm:gap-4">
        <div>
            <label for="height_ft" class="block text-sm font-medium text-gray-700">
                Height (feet)
            </label>
            <div class="mt-1">
                <input type="number"
                       step="0.01"
                       id="height_ft"
                       wire:model="coasterStats.height_ft"
                       class="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md">
                @error('coasterStats.height_ft') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
            </div>
        </div>
        <div>
            <label for="length_ft" class="block text-sm font-medium text-gray-700">
                Length (feet)
            </label>
            <div class="mt-1">
                <input type="number"
                       step="0.01"
                       id="length_ft"
                       wire:model="coasterStats.length_ft"
                       class="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md">
                @error('coasterStats.length_ft') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
            </div>
        </div>
    </div>

    <div class="sm:grid sm:grid-cols-2 sm:gap-4">
        <div>
            <label for="speed_mph" class="block text-sm font-medium text-gray-700">
                Speed (mph)
            </label>
            <div class="mt-1">
                <input type="number"
                       step="0.01"
                       id="speed_mph"
                       wire:model="coasterStats.speed_mph"
                       class="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md">
                @error('coasterStats.speed_mph') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
            </div>
        </div>
        <div>
            <label for="max_drop_height_ft" class="block text-sm font-medium text-gray-700">
                Max Drop Height (feet)
            </label>
            <div class="mt-1">
                <input type="number"
                       step="0.01"
                       id="max_drop_height_ft"
                       wire:model="coasterStats.max_drop_height_ft"
                       class="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md">
                @error('coasterStats.max_drop_height_ft') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
            </div>
        </div>
    </div>
</div>

{{-- Track Configuration --}}
<div class="space-y-6 sm:space-y-5 mt-6">
    <div class="sm:grid sm:grid-cols-2 sm:gap-4">
        <div>
            <label for="track_material" class="block text-sm font-medium text-gray-700">
                Track Material
            </label>
            <div class="mt-1">
                <select id="track_material"
                        wire:model="coasterStats.track_material"
                        class="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md">
                    @foreach(App\Enums\TrackMaterial::cases() as $material)
                        <option value="{{ $material->value }}">{{ $material->label() }}</option>
                    @endforeach
                </select>
                @error('coasterStats.track_material') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
            </div>
        </div>
        <div>
            <label for="roller_coaster_type" class="block text-sm font-medium text-gray-700">
                Coaster Type
            </label>
            <div class="mt-1">
                <select id="roller_coaster_type"
                        wire:model="coasterStats.roller_coaster_type"
                        class="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md">
                    @foreach(App\Enums\RollerCoasterType::cases() as $type)
                        <option value="{{ $type->value }}">{{ $type->label() }}</option>
                    @endforeach
                </select>
                @error('coasterStats.roller_coaster_type') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
            </div>
        </div>
    </div>

    <div class="sm:grid sm:grid-cols-2 sm:gap-4">
        <div>
            <label for="inversions" class="block text-sm font-medium text-gray-700">
                Number of Inversions
            </label>
            <div class="mt-1">
                <input type="number"
                       id="inversions"
                       wire:model="coasterStats.inversions"
                       class="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md">
                @error('coasterStats.inversions') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
            </div>
        </div>
        <div>
            <label for="launch_type" class="block text-sm font-medium text-gray-700">
                Launch Type
            </label>
            <div class="mt-1">
                <select id="launch_type"
                        wire:model="coasterStats.launch_type"
                        class="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md">
                    @foreach(App\Enums\LaunchType::cases() as $type)
                        <option value="{{ $type->value }}">{{ $type->label() }}</option>
                    @endforeach
                </select>
                @error('coasterStats.launch_type') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
            </div>
        </div>
    </div>
</div>

{{-- Train Configuration --}}
<div class="space-y-6 sm:space-y-5 mt-6">
    <div>
        <label for="train_style" class="block text-sm font-medium text-gray-700">
            Train Style
        </label>
        <div class="mt-1">
            <input type="text"
                   id="train_style"
                   wire:model="coasterStats.train_style"
                   class="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md">
            @error('coasterStats.train_style') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
        </div>
    </div>

    <div class="sm:grid sm:grid-cols-3 sm:gap-4">
        <div>
            <label for="trains_count" class="block text-sm font-medium text-gray-700">
                Number of Trains
            </label>
            <div class="mt-1">
                <input type="number"
                       id="trains_count"
                       wire:model="coasterStats.trains_count"
                       class="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md">
                @error('coasterStats.trains_count') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
            </div>
        </div>
        <div>
            <label for="cars_per_train" class="block text-sm font-medium text-gray-700">
                Cars per Train
            </label>
            <div class="mt-1">
                <input type="number"
                       id="cars_per_train"
                       wire:model="coasterStats.cars_per_train"
                       class="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md">
                @error('coasterStats.cars_per_train') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
            </div>
        </div>
        <div>
            <label for="seats_per_car" class="block text-sm font-medium text-gray-700">
                Seats per Car
            </label>
            <div class="mt-1">
                <input type="number"
                       id="seats_per_car"
                       wire:model="coasterStats.seats_per_car"
                       class="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md">
                @error('coasterStats.seats_per_car') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
            </div>
        </div>
    </div>
</div>