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

{% block title %}Add Park - ThrillWiki{% endblock %}

{% block content %}
<div class="container px-4 mx-auto">
    <div class="max-w-3xl mx-auto">
        <div class="p-6 bg-white rounded-lg shadow dark:bg-gray-800">
            <h1 class="mb-6 text-3xl font-bold text-gray-900 dark:text-white">Add Park</h1>

            <form method="post" class="space-y-6">
                {% csrf_token %}
                
                <!-- Hidden fields -->
                {{ form.country }}
                {{ form.region }}
                {{ form.city }}
                
                <!-- Name field -->
                <div>
                    <label for="{{ form.name.id_for_label }}" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
                        Name
                    </label>
                    <div>
                        {{ form.name }}
                    </div>
                    {% if form.name.errors %}
                        <div class="mt-1 text-sm text-red-600 dark:text-red-400">
                            {{ form.name.errors }}
                        </div>
                    {% endif %}
                </div>

                <!-- Location fields -->
                <div>
                    <label for="{{ form.country_name.id_for_label }}" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
                        Country
                    </label>
                    <div>
                        {{ form.country_name }}
                    </div>
                    {% if form.country_name.errors %}
                        <div class="mt-1 text-sm text-red-600 dark:text-red-400">
                            {{ form.country_name.errors }}
                        </div>
                    {% endif %}
                </div>

                <div>
                    <label for="{{ form.region_name.id_for_label }}" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
                        Region/State
                    </label>
                    <div>
                        {{ form.region_name }}
                    </div>
                    {% if form.region_name.errors %}
                        <div class="mt-1 text-sm text-red-600 dark:text-red-400">
                            {{ form.region_name.errors }}
                        </div>
                    {% endif %}
                </div>

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

                <!-- Other fields -->
                {% for field in form %}
                    {% if field.name not in 'name,country,region,city,country_name,region_name,city_name' %}
                    <div>
                        <label for="{{ field.id_for_label }}" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
                            {{ field.label }}
                        </label>
                        <div>
                            {{ field }}
                        </div>
                        {% if field.help_text %}
                            <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">{{ field.help_text }}</p>
                        {% endif %}
                        {% if field.errors %}
                            <div class="mt-1 text-sm text-red-600 dark:text-red-400">
                                {{ field.errors }}
                            </div>
                        {% endif %}
                    </div>
                    {% endif %}
                {% endfor %}

                {% if not user.role == 'MODERATOR' and not user.role == 'ADMIN' and not user.role == 'SUPERUSER' %}
                <div class="space-y-4">
                    <div>
                        <label for="reason" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
                            Reason for Addition
                        </label>
                        <textarea name="reason"
                                  id="reason"
                                  class="w-full border-gray-300 rounded-lg form-textarea dark:border-gray-600 dark:bg-gray-700 dark:text-white"
                                  rows="3"
                                  required
                                  placeholder="Please explain why you're adding this park and provide any relevant details."></textarea>
                    </div>
                    <div>
                        <label for="source" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">
                            Source (Optional)
                        </label>
                        <input type="text"
                               name="source"
                               id="source"
                               class="w-full border-gray-300 rounded-lg form-input dark:border-gray-600 dark:bg-gray-700 dark:text-white"
                               placeholder="Link to official website, news article, or other source">
                    </div>
                </div>
                {% endif %}

                <div class="flex justify-end space-x-4">
                    <a href="{% url 'parks:park_list' %}" class="px-4 py-2 text-gray-700 bg-gray-200 rounded-lg hover:bg-gray-300 dark:bg-gray-600 dark:text-gray-200 dark:hover:bg-gray-500">
                        Cancel
                    </a>
                    <button type="submit" class="px-4 py-2 text-white bg-blue-600 rounded-lg hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600">
                        Submit
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/awesomplete/1.1.5/awesomplete.min.css" />
<style>
    .awesomplete {
        width: 100%;
    }
    .awesomplete > ul {
        @apply bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg shadow-lg;
    }
    .awesomplete > ul > li {
        @apply px-4 py-2 cursor-pointer text-gray-700 dark:text-gray-300;
    }
    .awesomplete > ul > li:hover,
    .awesomplete > ul > li[aria-selected="true"] {
        @apply bg-gray-100 dark:bg-gray-600;
    }
    .awesomplete mark {
        @apply bg-blue-100 dark:bg-blue-900;
    }
</style>
{% endblock %}

{% block extra_js %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/awesomplete/1.1.5/awesomplete.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Helper function to initialize Awesomplete
    function initAwesomplete(input, url, params = {}) {
        if (!input) return null;
        
        var awesomplete = new Awesomplete(input, {
            minChars: 1,
            maxItems: 10,
            autoFirst: true
        });

        input.addEventListener('input', function() {
            // Build query parameters
            const queryParams = new URLSearchParams({
                q: this.value,
                ...Object.fromEntries(
                    Object.entries(params).map(([key, value]) => [key, typeof value === 'function' ? value() : value])
                )
            });

            fetch(`${url}?${queryParams}`)
                .then(response => response.json())
                .then(data => {
                    awesomplete.list = data;
                });
        });

        return awesomplete;
    }

    // Initialize Awesomplete for each location field
    var countryInput = document.getElementById('id_country_name');
    var regionInput = document.getElementById('id_region_name');
    var cityInput = document.getElementById('id_city_name');
    var countryHidden = document.getElementById('id_country');
    var regionHidden = document.getElementById('id_region');
    var cityHidden = document.getElementById('id_city');

    var countryAwesomplete = initAwesomplete(countryInput, '/parks/ajax/countries/');

    if (regionInput) {
        var regionAwesomplete = initAwesomplete(regionInput, '/parks/ajax/regions/', {
            country: () => countryInput ? countryInput.value : ''
        });

        // Clear dependent fields when country changes
        countryInput.addEventListener('awesomplete-select', function(event) {
            regionInput.value = '';
            regionHidden.value = '';
            if (cityInput) {
                cityInput.value = '';
                cityHidden.value = '';
            }
        });
    }

    if (cityInput) {
        var cityAwesomplete = initAwesomplete(cityInput, '/parks/ajax/cities/', {
            country: () => countryInput ? countryInput.value : '',
            region: () => regionInput ? regionInput.value : ''
        });

        // Clear city when region changes
        regionInput.addEventListener('awesomplete-select', function(event) {
            cityInput.value = '';
            cityHidden.value = '';
        });
    }
});
</script>
{% endblock %}