<div class="space-y-6">
    <form wire:submit="save" class="space-y-8 divide-y divide-gray-200">
        {{-- Basic Information --}}
        <div class="space-y-6 sm:space-y-5">
            <div>
                <h3 class="text-lg font-medium leading-6 text-gray-900">Basic Information</h3>
                <p class="mt-1 max-w-2xl text-sm text-gray-500">
                    Provide the basic details about this ride.
                </p>
            </div>

            <div class="space-y-6 sm:space-y-5">
                {{-- Name --}}
                <div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:pt-5">
                    <label for="name" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">
                        Name
                    </label>
                    <div class="mt-1 sm:mt-0 sm:col-span-2">
                        <input type="text" 
                               id="name"
                               wire:model="state.name"
                               class="max-w-lg block w-full shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:max-w-xs sm:text-sm border-gray-300 rounded-md">
                        @error('state.name') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
                    </div>
                </div>

                {{-- Park --}}
                <div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:pt-5">
                    <label for="park_id" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">
                        Park
                    </label>
                    <div class="mt-1 sm:mt-0 sm:col-span-2">
                        <select id="park_id"
                                wire:model.live="state.park_id"
                                class="max-w-lg block focus:ring-primary-500 focus:border-primary-500 w-full shadow-sm sm:max-w-xs sm:text-sm border-gray-300 rounded-md">
                            <option value="">Select a park</option>
                            @foreach($this->parks as $park)
                                <option value="{{ $park->id }}">{{ $park->name }}</option>
                            @endforeach
                        </select>
                        @error('state.park_id') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
                    </div>
                </div>

                {{-- Park Area --}}
                <div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:pt-5">
                    <label for="park_area_id" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">
                        Park Area
                    </label>
                    <div class="mt-1 sm:mt-0 sm:col-span-2">
                        <select id="park_area_id"
                                wire:model="state.park_area_id"
                                class="max-w-lg block focus:ring-primary-500 focus:border-primary-500 w-full shadow-sm sm:max-w-xs sm:text-sm border-gray-300 rounded-md">
                            <option value="">Select an area</option>
                            @foreach($this->parkAreas as $area)
                                <option value="{{ $area->id }}">{{ $area->name }}</option>
                            @endforeach
                        </select>
                        @error('state.park_area_id') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
                    </div>
                </div>

                {{-- Category --}}
                <div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:pt-5">
                    <label for="category" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">
                        Category
                    </label>
                    <div class="mt-1 sm:mt-0 sm:col-span-2">
                        <select id="category"
                                wire:model.live="state.category"
                                class="max-w-lg block focus:ring-primary-500 focus:border-primary-500 w-full shadow-sm sm:max-w-xs sm:text-sm border-gray-300 rounded-md">
                            @foreach(App\Enums\RideCategory::cases() as $category)
                                <option value="{{ $category->value }}">{{ $category->label() }}</option>
                            @endforeach
                        </select>
                        @error('state.category') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
                    </div>
                </div>

                {{-- Status --}}
                <div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:pt-5">
                    <label for="status" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">
                        Status
                    </label>
                    <div class="mt-1 sm:mt-0 sm:col-span-2">
                        <select id="status"
                                wire:model="state.status"
                                class="max-w-lg block focus:ring-primary-500 focus:border-primary-500 w-full shadow-sm sm:max-w-xs sm:text-sm border-gray-300 rounded-md">
                            @foreach(App\Enums\RideStatus::cases() as $status)
                                <option value="{{ $status->value }}">{{ $status->label() }}</option>
                            @endforeach
                        </select>
                        @error('state.status') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
                    </div>
                </div>

                {{-- Description --}}
                <div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:pt-5">
                    <label for="description" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">
                        Description
                    </label>
                    <div class="mt-1 sm:mt-0 sm:col-span-2">
                        <textarea id="description"
                                  wire:model="state.description"
                                  rows="3"
                                  class="max-w-lg shadow-sm block w-full focus:ring-primary-500 focus:border-primary-500 sm:text-sm border border-gray-300 rounded-md"></textarea>
                        @error('state.description') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
                    </div>
                </div>
            </div>
        </div>

        {{-- Technical Details --}}
        <div class="pt-8 space-y-6 sm:space-y-5">
            <div>
                <h3 class="text-lg font-medium leading-6 text-gray-900">Technical Details</h3>
                <p class="mt-1 max-w-2xl text-sm text-gray-500">
                    Specify the technical specifications and requirements.
                </p>
            </div>

            <div class="space-y-6 sm:space-y-5">
                {{-- Manufacturer --}}
                <div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:pt-5">
                    <label for="manufacturer_id" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">
                        Manufacturer
                    </label>
                    <div class="mt-1 sm:mt-0 sm:col-span-2">
                        <select id="manufacturer_id"
                                wire:model="state.manufacturer_id"
                                class="max-w-lg block focus:ring-primary-500 focus:border-primary-500 w-full shadow-sm sm:max-w-xs sm:text-sm border-gray-300 rounded-md">
                            <option value="">Select a manufacturer</option>
                            @foreach($this->manufacturers as $manufacturer)
                                <option value="{{ $manufacturer->id }}">{{ $manufacturer->name }}</option>
                            @endforeach
                        </select>
                        @error('state.manufacturer_id') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
                    </div>
                </div>

                {{-- Designer --}}
                <div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:pt-5">
                    <label for="designer_id" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">
                        Designer
                    </label>
                    <div class="mt-1 sm:mt-0 sm:col-span-2">
                        <select id="designer_id"
                                wire:model="state.designer_id"
                                class="max-w-lg block focus:ring-primary-500 focus:border-primary-500 w-full shadow-sm sm:max-w-xs sm:text-sm border-gray-300 rounded-md">
                            <option value="">Select a designer</option>
                            @foreach($this->designers as $designer)
                                <option value="{{ $designer->id }}">{{ $designer->name }}</option>
                            @endforeach
                        </select>
                        @error('state.designer_id') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
                    </div>
                </div>

                {{-- Height Requirements --}}
                <div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:pt-5">
                    <div class="col-span-3 grid grid-cols-2 gap-4">
                        <div>
                            <label for="min_height_in" class="block text-sm font-medium text-gray-700">
                                Minimum Height (inches)
                            </label>
                            <div class="mt-1">
                                <input type="number"
                                       id="min_height_in"
                                       wire:model="state.min_height_in"
                                       class="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md">
                                @error('state.min_height_in') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
                            </div>
                        </div>
                        <div>
                            <label for="max_height_in" class="block text-sm font-medium text-gray-700">
                                Maximum Height (inches)
                            </label>
                            <div class="mt-1">
                                <input type="number"
                                       id="max_height_in"
                                       wire:model="state.max_height_in"
                                       class="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md">
                                @error('state.max_height_in') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Capacity and Duration --}}
                <div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:pt-5">
                    <div class="col-span-3 grid grid-cols-2 gap-4">
                        <div>
                            <label for="capacity_per_hour" class="block text-sm font-medium text-gray-700">
                                Capacity (per hour)
                            </label>
                            <div class="mt-1">
                                <input type="number"
                                       id="capacity_per_hour"
                                       wire:model="state.capacity_per_hour"
                                       class="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md">
                                @error('state.capacity_per_hour') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
                            </div>
                        </div>
                        <div>
                            <label for="ride_duration_seconds" class="block text-sm font-medium text-gray-700">
                                Duration (seconds)
                            </label>
                            <div class="mt-1">
                                <input type="number"
                                       id="ride_duration_seconds"
                                       wire:model="state.ride_duration_seconds"
                                       class="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md">
                                @error('state.ride_duration_seconds') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Coaster Stats (if applicable) --}}
        @if($state['category'] === App\Enums\RideCategory::ROLLER_COASTER->value)
            <div class="pt-8 space-y-6 sm:space-y-5">
                <div>
                    <h3 class="text-lg font-medium leading-6 text-gray-900">Roller Coaster Details</h3>
                    <p class="mt-1 max-w-2xl text-sm text-gray-500">
                        Additional specifications for roller coasters.
                    </p>
                </div>

                @include('livewire.partials._coaster-stats-form')
            </div>
        @endif

        {{-- Form Actions --}}
        <div class="pt-5">
            <div class="flex justify-end">
                <a href="{{ route('rides.index') }}" 
                   class="bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
                    Cancel
                </a>
                <button type="submit"
                        class="ml-3 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">
                    Save
                </button>
            </div>
        </div>
    </form>
</div>