{% load static %}

<script>
document.addEventListener('alpine:init', () => {
    Alpine.data('rideForm', () => ({
        init() {
            // Handle form submission cleanup
            this.$el.addEventListener('submit', () => {
                this.clearAllSearchResults();
            });
        },

        selectManufacturer(id, name) {
            // Use AlpineJS $el to scope queries within component
            const manufacturerInput = this.$el.querySelector('#id_manufacturer');
            const manufacturerSearch = this.$el.querySelector('#id_manufacturer_search');
            const manufacturerResults = this.$el.querySelector('#manufacturer-search-results');
            
            if (manufacturerInput) manufacturerInput.value = id;
            if (manufacturerSearch) manufacturerSearch.value = name;
            if (manufacturerResults) manufacturerResults.innerHTML = '';
            
            // Update ride model search to include manufacturer
            const rideModelSearch = this.$el.querySelector('#id_ride_model_search');
            if (rideModelSearch) {
                rideModelSearch.setAttribute('hx-include', '[name="manufacturer"]');
            }
        },

        selectDesigner(id, name) {
            // Use AlpineJS $el to scope queries within component
            const designerInput = this.$el.querySelector('#id_designer');
            const designerSearch = this.$el.querySelector('#id_designer_search');
            const designerResults = this.$el.querySelector('#designer-search-results');
            
            if (designerInput) designerInput.value = id;
            if (designerSearch) designerSearch.value = name;
            if (designerResults) designerResults.innerHTML = '';
        },

        selectRideModel(id, name) {
            // Use AlpineJS $el to scope queries within component
            const rideModelInput = this.$el.querySelector('#id_ride_model');
            const rideModelSearch = this.$el.querySelector('#id_ride_model_search');
            const rideModelResults = this.$el.querySelector('#ride-model-search-results');
            
            if (rideModelInput) rideModelInput.value = id;
            if (rideModelSearch) rideModelSearch.value = name;
            if (rideModelResults) rideModelResults.innerHTML = '';
        },

        clearAllSearchResults() {
            // Use AlpineJS $el to scope queries within component
            const manufacturerResults = this.$el.querySelector('#manufacturer-search-results');
            const designerResults = this.$el.querySelector('#designer-search-results');
            const rideModelResults = this.$el.querySelector('#ride-model-search-results');
            
            if (manufacturerResults) manufacturerResults.innerHTML = '';
            if (designerResults) designerResults.innerHTML = '';
            if (rideModelResults) rideModelResults.innerHTML = '';
        },

        clearManufacturerResults() {
            // Use AlpineJS $el to scope queries within component
            const manufacturerResults = this.$el.querySelector('#manufacturer-search-results');
            if (manufacturerResults) manufacturerResults.innerHTML = '';
        },

        clearDesignerResults() {
            // Use AlpineJS $el to scope queries within component
            const designerResults = this.$el.querySelector('#designer-search-results');
            if (designerResults) designerResults.innerHTML = '';
        },

        clearRideModelResults() {
            // Use AlpineJS $el to scope queries within component
            const rideModelResults = this.$el.querySelector('#ride-model-search-results');
            if (rideModelResults) rideModelResults.innerHTML = '';
        }
    }));
});
</script>

<form method="post" 
      id="ride-form" 
      class="space-y-6" 
      enctype="multipart/form-data"
      x-data="rideForm"
      x-init="init()">
    {% csrf_token %}

    <!-- Park Area -->
    {% if form.park_area %}
        <div class="space-y-2">
            <label for="{{ form.park_area.id_for_label }}" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                Park Area
            </label>
            {{ form.park_area }}
            {% if form.park_area.errors %}
                <div class="text-sm text-red-600 dark:text-red-400">
                    {{ form.park_area.errors }}
                </div>
            {% endif %}
        </div>
    {% endif %}

    <!-- Name -->
    <div class="space-y-2">
        <label for="{{ form.name.id_for_label }}" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
            Name *
        </label>
        {{ form.name }}
        {% if form.name.errors %}
            <div class="text-sm text-red-600 dark:text-red-400">
                {{ form.name.errors }}
            </div>
        {% endif %}
    </div>

    <!-- Manufacturer -->
    <div class="space-y-2">
        <div id="manufacturer-search-container" 
             class="relative"
             @click.outside="clearManufacturerResults()">
            <label for="{{ form.manufacturer_search.id_for_label }}" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                Manufacturer
            </label>
            {{ form.manufacturer_search }}
            {{ form.manufacturer }}
            <div id="manufacturer-search-results" class="relative"></div>
            {% if form.manufacturer.errors %}
                <div class="text-sm text-red-600 dark:text-red-400">
                    {{ form.manufacturer.errors }}
                </div>
            {% endif %}
        </div>
    </div>

    <!-- Designer -->
    <div class="space-y-2">
        <div id="designer-search-container" 
             class="relative"
             @click.outside="clearDesignerResults()">
            <label for="{{ form.designer_search.id_for_label }}" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                Designer
            </label>
            {{ form.designer_search }}
            {{ form.designer }}
            <div id="designer-search-results" class="relative"></div>
            {% if form.designer.errors %}
                <div class="text-sm text-red-600 dark:text-red-400">
                    {{ form.designer.errors }}
                </div>
            {% endif %}
        </div>
    </div>

    <!-- Ride Model -->
    <div class="space-y-2">
        <div id="ride-model-search-container" 
             class="relative"
             @click.outside="clearRideModelResults()">
            <label for="{{ form.ride_model_search.id_for_label }}" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                Ride Model
            </label>
            {{ form.ride_model_search }}
            {{ form.ride_model }}
            <div id="ride-model-search-results" class="relative"></div>
            {% if form.ride_model.errors %}
                <div class="text-sm text-red-600 dark:text-red-400">
                    {{ form.ride_model.errors }}
                </div>
            {% endif %}
        </div>
    </div>

    <!-- Model Name -->
    <div class="space-y-2">
        <label for="{{ form.model_name.id_for_label }}" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
            Model Name
        </label>
        {{ form.model_name }}
        {% if form.model_name.errors %}
            <div class="text-sm text-red-600 dark:text-red-400">
                {{ form.model_name.errors }}
            </div>
        {% endif %}
    </div>

    <!-- Category -->
    <div class="space-y-2">
        <label for="{{ form.category.id_for_label }}" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
            Category *
        </label>
        {{ form.category }}
        {% if form.category.errors %}
            <div class="text-sm text-red-600 dark:text-red-400">
                {{ form.category.errors }}
            </div>
        {% endif %}
    </div>

    <!-- Coaster Fields -->
    <div id="coaster-fields"></div>

    <!-- Status -->
    <div class="space-y-2">
        <label for="{{ form.status.id_for_label }}" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
            Status
        </label>
        {{ form.status }}
        {% if form.status.errors %}
            <div class="text-sm text-red-600 dark:text-red-400">
                {{ form.status.errors }}
            </div>
        {% endif %}
    </div>

    <!-- Opening Date -->
    <div class="space-y-2">
        <label for="{{ form.opening_date.id_for_label }}" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
            Opening Date
        </label>
        {{ form.opening_date }}
        {% if form.opening_date.errors %}
            <div class="text-sm text-red-600 dark:text-red-400">
                {{ form.opening_date.errors }}
            </div>
        {% endif %}
    </div>

    <!-- Closing Date -->
    <div class="space-y-2">
        <label for="{{ form.closing_date.id_for_label }}" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
            Closing Date
        </label>
        {{ form.closing_date }}
        {% if form.closing_date.errors %}
            <div class="text-sm text-red-600 dark:text-red-400">
                {{ form.closing_date.errors }}
            </div>
        {% endif %}
    </div>

    <!-- Status Since -->
    <div class="space-y-2">
        <label for="{{ form.status_since.id_for_label }}" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
            Status Since
        </label>
        {{ form.status_since }}
        {% if form.status_since.errors %}
            <div class="text-sm text-red-600 dark:text-red-400">
                {{ form.status_since.errors }}
            </div>
        {% endif %}
    </div>

    <!-- Min Height -->
    <div class="space-y-2">
        <label for="{{ form.min_height_in.id_for_label }}" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
            Minimum Height (inches)
        </label>
        {{ form.min_height_in }}
        {% if form.min_height_in.errors %}
            <div class="text-sm text-red-600 dark:text-red-400">
                {{ form.min_height_in.errors }}
            </div>
        {% endif %}
    </div>

    <!-- Max Height -->
    <div class="space-y-2">
        <label for="{{ form.max_height_in.id_for_label }}" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
            Maximum Height (inches)
        </label>
        {{ form.max_height_in }}
        {% if form.max_height_in.errors %}
            <div class="text-sm text-red-600 dark:text-red-400">
                {{ form.max_height_in.errors }}
            </div>
        {% endif %}
    </div>

    <!-- Capacity -->
    <div class="space-y-2">
        <label for="{{ form.capacity_per_hour.id_for_label }}" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
            Hourly Capacity
        </label>
        {{ form.capacity_per_hour }}
        {% if form.capacity_per_hour.errors %}
            <div class="text-sm text-red-600 dark:text-red-400">
                {{ form.capacity_per_hour.errors }}
            </div>
        {% endif %}
    </div>

    <!-- Ride Duration -->
    <div class="space-y-2">
        <label for="{{ form.ride_duration_seconds.id_for_label }}" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
            Ride Duration (seconds)
        </label>
        {{ form.ride_duration_seconds }}
        {% if form.ride_duration_seconds.errors %}
            <div class="text-sm text-red-600 dark:text-red-400">
                {{ form.ride_duration_seconds.errors }}
            </div>
        {% endif %}
    </div>

    <!-- Description -->
    <div class="space-y-2">
        <label for="{{ form.description.id_for_label }}" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
            Description
        </label>
        {{ form.description }}
        {% if form.description.errors %}
            <div class="text-sm text-red-600 dark:text-red-400">
                {{ form.description.errors }}
            </div>
        {% endif %}
    </div>

    <!-- Submit Button -->
    <div class="flex justify-end">
        <button type="submit" 
                class="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:bg-blue-500 dark:hover:bg-blue-600">
            {% if is_edit %}Save Changes{% else %}Add Ride{% endif %}
        </button>
    </div>
</form>