{% extends 'base/base.html' %}
{% load static %}

{% block title %}{% if is_edit %}Edit{% else %}Add{% endif %} Ride - ThrillWiki{% endblock %}

{% block content %}
<div class="container px-4 py-8 mx-auto">
    <div class="max-w-4xl mx-auto">
        <h1 class="mb-6 text-3xl font-bold">
            {% if is_edit %}Edit {{ object.name }}{% else %}Add New Ride{% endif %}
            {% if park %}
            <div class="mt-2 text-lg font-normal text-gray-600 dark:text-gray-400">
                at <a href="{% url 'parks:park_detail' park.slug %}" class="text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300">{{ park.name }}</a>
            </div>
            {% endif %}
        </h1>

        <form method="post" enctype="multipart/form-data" class="space-y-6" x-data="{ 
            status: '{{ form.instance.status|default:'OPERATING' }}',
            clearResults(containerId) {
                const container = document.getElementById(containerId);
                if (container && !container.contains(event.target)) {
                    container.querySelector('[id$=search-results]').innerHTML = '';
                }
            },
            handleStatusChange(event) {
                this.status = event.target.value;
                if (this.status === 'CLOSING') {
                    document.getElementById('id_closing_date').required = true;
                } else {
                    document.getElementById('id_closing_date').required = false;
                }
            },
            showClosingDate() {
                return ['CLOSING', 'SBNO', 'CLOSED_PERM', 'DEMOLISHED', 'RELOCATED'].includes(this.status);
            }
        }">
            {% csrf_token %}

            {% if not park %}
            {# Park Selection - Only shown when creating from global view #}
            <div class="p-6 bg-white rounded-lg shadow dark:bg-gray-800">
                <h2 class="mb-4 text-xl font-semibold">Park Information</h2>
                <div class="space-y-4">
                    <div id="park-search-container" class="relative" @click.outside="clearResults('park-search-container')">
                        <label for="{{ form.park_search.id_for_label }}" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
                            Park *
                        </label>
                        {{ form.park_search }}
                        {{ form.park }}
                        <div id="park-search-results" class="relative"></div>
                        {% if form.park.errors %}
                            <div class="mt-1 text-sm text-red-600 dark:text-red-400">
                                {{ form.park.errors }}
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>
            {% endif %}

            {# Basic Information #}
            <div class="p-6 bg-white rounded-lg shadow dark:bg-gray-800">
                <h2 class="mb-4 text-xl font-semibold">Basic Information</h2>
                <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
                    <div class="col-span-2">
                        <label for="{{ form.name.id_for_label }}" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
                            Name *
                        </label>
                        {{ form.name }}
                        {% if form.name.errors %}
                            <div class="mt-1 text-sm text-red-600 dark:text-red-400">
                                {{ form.name.errors }}
                            </div>
                        {% endif %}
                    </div>

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

                    <div id="coaster-fields" class="col-span-2"></div>
                </div>
            </div>

            {# Manufacturer and Model #}
            <div class="p-6 bg-white rounded-lg shadow dark:bg-gray-800">
                <h2 class="mb-4 text-xl font-semibold">Manufacturer and Model</h2>
                <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
                    <div id="manufacturer-search-container" class="relative" @click.outside="clearResults('manufacturer-search-container')">
                        <label for="{{ form.manufacturer_search.id_for_label }}" class="block mb-1 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>
                    </div>

                    <div id="designer-search-container" class="relative" @click.outside="clearResults('designer-search-container')">
                        <label for="{{ form.designer_search.id_for_label }}" class="block mb-1 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>
                    </div>

                    <div id="ride-model-search-container" class="relative col-span-2" @click.outside="clearResults('ride-model-search-container')">
                        <label for="{{ form.ride_model_search.id_for_label }}" class="block mb-1 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>
                    </div>
                </div>
            </div>

            {# Status and Dates #}
            <div class="p-6 bg-white rounded-lg shadow dark:bg-gray-800">
                <h2 class="mb-4 text-xl font-semibold">Status and Dates</h2>
                <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
                    <div>
                        <label for="{{ form.status.id_for_label }}" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
                            Status
                        </label>
                        {{ form.status }}
                    </div>

                    <div>
                        <label for="{{ form.status_since.id_for_label }}" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
                            Status Since
                        </label>
                        {{ form.status_since }}
                    </div>

                    <div>
                        <label for="{{ form.opening_date.id_for_label }}" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
                            Opening Date
                        </label>
                        {{ form.opening_date }}
                    </div>

                    <div x-show="showClosingDate()">
                        <label for="{{ form.closing_date.id_for_label }}" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
                            Closing Date <span x-show="status === 'CLOSING'" class="text-red-600">*</span>
                        </label>
                        {{ form.closing_date }}
                    </div>

                    <div x-show="status === 'CLOSING'" class="col-span-2">
                        <label for="{{ form.post_closing_status.id_for_label }}" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
                            Status After Closing *
                        </label>
                        {{ form.post_closing_status }}
                    </div>
                </div>
            </div>

            {# Specifications #}
            <div class="p-6 bg-white rounded-lg shadow dark:bg-gray-800">
                <h2 class="mb-4 text-xl font-semibold">Specifications</h2>
                <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
                    <div>
                        <label for="{{ form.min_height_in.id_for_label }}" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
                            Minimum Height (inches)
                        </label>
                        {{ form.min_height_in }}
                    </div>

                    <div>
                        <label for="{{ form.max_height_in.id_for_label }}" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
                            Maximum Height (inches)
                        </label>
                        {{ form.max_height_in }}
                    </div>

                    <div>
                        <label for="{{ form.capacity_per_hour.id_for_label }}" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
                            Hourly Capacity
                        </label>
                        {{ form.capacity_per_hour }}
                    </div>

                    <div>
                        <label for="{{ form.ride_duration_seconds.id_for_label }}" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
                            Ride Duration (seconds)
                        </label>
                        {{ form.ride_duration_seconds }}
                    </div>
                </div>
            </div>

            {# Description #}
            <div class="p-6 bg-white rounded-lg shadow dark:bg-gray-800">
                <h2 class="mb-4 text-xl font-semibold">Description</h2>
                <div>
                    <label for="{{ form.description.id_for_label }}" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
                        Description
                    </label>
                    {{ form.description }}
                </div>
            </div>

            {# Submission Details #}
            <div class="p-6 bg-white rounded-lg shadow dark:bg-gray-800">
                <h2 class="mb-4 text-xl font-semibold">Submission Details</h2>
                <div class="space-y-4">
                    <div>
                        <label class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
                            Reason for Changes
                        </label>
                        <textarea name="reason" rows="2"
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg form-textarea dark:border-gray-600 dark:bg-gray-700 dark:text-white"
                            placeholder="Explain why you're making these changes"></textarea>
                    </div>
                    <div>
                        <label class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
                            Source
                        </label>
                        <input type="text" name="source"
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg form-input dark:border-gray-600 dark:bg-gray-700 dark:text-white"
                            placeholder="Where did you get this information?">
                    </div>
                </div>
            </div>

            {# Submit Button #}
            <div class="flex justify-end">
                <button type="submit" class="px-6 py-2 text-white bg-blue-600 rounded-lg hover:bg-blue-700 dark:hover:bg-blue-800">
                    {% if is_edit %}Save Changes{% else %}Add Ride{% endif %}
                </button>
            </div>
        </form>
    </div>
</div>
{% endblock %}