{# Modern Filter Interface - timestamp: 2025-08-29 #}
{% load static %}
{% load widget_tweaks %}

<div class="space-y-6">
    {# Search Section #}
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
        <div class="p-4">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center">
                <svg class="w-5 h-5 mr-2 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                </svg>
                Search
            </h3>
            
            <form hx-get="{% url 'parks:park_list' %}"
                  hx-target="#results-container"
                  hx-trigger="input changed delay:500ms, submit"
                  hx-indicator="#loading-indicator"
                  hx-swap="outerHTML"
                  hx-push-url="true"
                  class="space-y-4">
                
                <div class="relative">
                    <input type="text"
                           name="search"
                           value="{{ request.GET.search|default:'' }}"
                           placeholder="Search parks by name, location..."
                           class="w-full pl-10 pr-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors">
                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                        <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                        </svg>
                    </div>
                </div>
            </form>
        </div>
    </div>

    {# Filters Section #}
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
        <div class="p-4">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center">
                <svg class="w-5 h-5 mr-2 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.414A1 1 0 013 6.707V4z"/>
                </svg>
                Filters
            </h3>
            
            <form id="filter-form"
                  hx-get="{% url 'parks:park_list' %}"
                  hx-target="#results-container"
                  hx-trigger="change delay:300ms, submit"
                  hx-indicator="#loading-indicator"
                  hx-swap="outerHTML"
                  hx-push-url="true"
                  class="space-y-6">
                
                {# Preserve search term #}
                {% if request.GET.search %}
                    <input type="hidden" name="search" value="{{ request.GET.search }}">
                {% endif %}
                
                {# Status Filter #}
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Status
                    </label>
                    <select name="status" 
                            class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors">
                        <option value="">All Status</option>
                        <option value="OPERATING" {% if request.GET.status == 'OPERATING' %}selected{% endif %}>Operating</option>
                        <option value="CLOSED_TEMP" {% if request.GET.status == 'CLOSED_TEMP' %}selected{% endif %}>Temporarily Closed</option>
                        <option value="CLOSED_PERM" {% if request.GET.status == 'CLOSED_PERM' %}selected{% endif %}>Permanently Closed</option>
                        <option value="UNDER_CONSTRUCTION" {% if request.GET.status == 'UNDER_CONSTRUCTION' %}selected{% endif %}>Under Construction</option>
                        <option value="DEMOLISHED" {% if request.GET.status == 'DEMOLISHED' %}selected{% endif %}>Demolished</option>
                        <option value="RELOCATED" {% if request.GET.status == 'RELOCATED' %}selected{% endif %}>Relocated</option>
                    </select>
                </div>
                
                {# Operator Filter #}
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Operator
                    </label>
                    <select name="operator" 
                            class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors">
                        <option value="">All Operators</option>
                        <option value="cedar-fair" {% if request.GET.operator == 'cedar-fair' %}selected{% endif %}>Cedar Fair</option>
                        <option value="six-flags" {% if request.GET.operator == 'six-flags' %}selected{% endif %}>Six Flags</option>
                        <option value="disney" {% if request.GET.operator == 'disney' %}selected{% endif %}>Disney</option>
                        <option value="universal" {% if request.GET.operator == 'universal' %}selected{% endif %}>Universal</option>
                        <option value="busch-gardens" {% if request.GET.operator == 'busch-gardens' %}selected{% endif %}>Busch Gardens</option>
                        <option value="knott's" {% if request.GET.operator == 'knotts' %}selected{% endif %}>Knott's</option>
                        <option value="herschend" {% if request.GET.operator == 'herschend' %}selected{% endif %}>Herschend</option>
                    </select>
                </div>
                
                {# Rating Filter #}
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Minimum Rating
                    </label>
                    <select name="min_rating" 
                            class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors">
                        <option value="">Any Rating</option>
                        <option value="1" {% if request.GET.min_rating == '1' %}selected{% endif %}>1+ Stars</option>
                        <option value="2" {% if request.GET.min_rating == '2' %}selected{% endif %}>2+ Stars</option>
                        <option value="3" {% if request.GET.min_rating == '3' %}selected{% endif %}>3+ Stars</option>
                        <option value="4" {% if request.GET.min_rating == '4' %}selected{% endif %}>4+ Stars</option>
                        <option value="5" {% if request.GET.min_rating == '5' %}selected{% endif %}>5+ Stars</option>
                        <option value="6" {% if request.GET.min_rating == '6' %}selected{% endif %}>6+ Stars</option>
                        <option value="7" {% if request.GET.min_rating == '7' %}selected{% endif %}>7+ Stars</option>
                        <option value="8" {% if request.GET.min_rating == '8' %}selected{% endif %}>8+ Stars</option>
                        <option value="9" {% if request.GET.min_rating == '9' %}selected{% endif %}>9+ Stars</option>
                    </select>
                </div>
                
                {# Ride Count Filter #}
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Minimum Rides
                    </label>
                    <input type="number" 
                           name="min_rides" 
                           value="{{ request.GET.min_rides|default:'' }}"
                           min="0" 
                           placeholder="Any number"
                           class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors">
                </div>
                
                {# Coaster Count Filter #}
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Minimum Coasters
                    </label>
                    <input type="number" 
                           name="min_coasters" 
                           value="{{ request.GET.min_coasters|default:'' }}"
                           min="0" 
                           placeholder="Any number"
                           class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors">
                </div>
                
                {# Opening Year Filter #}
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Opening Year
                    </label>
                    <input type="number" 
                           name="opening_year" 
                           value="{{ request.GET.opening_year|default:'' }}"
                           min="1800" 
                           max="2030" 
                           placeholder="Any year"
                           class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors">
                </div>
                
                {# Size Filter #}
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Minimum Size (acres)
                    </label>
                    <input type="number" 
                           name="min_size" 
                           value="{{ request.GET.min_size|default:'' }}"
                           min="0" 
                           step="0.1"
                           placeholder="Any size"
                           class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors">
                </div>
                
                {# Special Features #}
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
                        Special Features
                    </label>
                    <div class="space-y-3">
                        <label class="flex items-center">
                            <input type="checkbox" 
                                   name="has_roller_coasters" 
                                   value="true"
                                   {% if request.GET.has_roller_coasters %}checked{% endif %}
                                   class="rounded border-gray-300 dark:border-gray-600 text-blue-600 focus:ring-blue-500 focus:ring-2">
                            <span class="ml-2 text-sm text-gray-700 dark:text-gray-300">Has Roller Coasters</span>
                        </label>
                        
                        <label class="flex items-center">
                            <input type="checkbox" 
                                   name="has_water_rides" 
                                   value="true"
                                   {% if request.GET.has_water_rides %}checked{% endif %}
                                   class="rounded border-gray-300 dark:border-gray-600 text-blue-600 focus:ring-blue-500 focus:ring-2">
                            <span class="ml-2 text-sm text-gray-700 dark:text-gray-300">Has Water Rides</span>
                        </label>
                        
                        <label class="flex items-center">
                            <input type="checkbox" 
                                   name="family_friendly" 
                                   value="true"
                                   {% if request.GET.family_friendly %}checked{% endif %}
                                   class="rounded border-gray-300 dark:border-gray-600 text-blue-600 focus:ring-blue-500 focus:ring-2">
                            <span class="ml-2 text-sm text-gray-700 dark:text-gray-300">Family Friendly</span>
                        </label>
                    </div>
                </div>
            </form>
        </div>
    </div>

    {# Sort & View Options #}
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
        <div class="p-4">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center">
                <svg class="w-5 h-5 mr-2 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"/>
                </svg>
                Sort By
            </h3>
            
            <form hx-get="{% url 'parks:park_list' %}"
                  hx-target="#results-container"
                  hx-trigger="change"
                  hx-indicator="#loading-indicator"
                  hx-swap="outerHTML"
                  hx-push-url="true">
                
                {# Preserve all current filters #}
                {% for key, value in request.GET.items %}
                    {% if key != 'sort' and key != 'view_mode' %}
                        <input type="hidden" name="{{ key }}" value="{{ value }}">
                    {% endif %}
                {% endfor %}
                
                <select name="sort" 
                        class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors">
                    <option value="name" {% if request.GET.sort == 'name' or not request.GET.sort %}selected{% endif %}>Name A-Z</option>
                    <option value="-name" {% if request.GET.sort == '-name' %}selected{% endif %}>Name Z-A</option>
                    <option value="-average_rating" {% if request.GET.sort == '-average_rating' %}selected{% endif %}>Highest Rated</option>
                    <option value="average_rating" {% if request.GET.sort == 'average_rating' %}selected{% endif %}>Lowest Rated</option>
                    <option value="-opening_date" {% if request.GET.sort == '-opening_date' %}selected{% endif %}>Newest</option>
                    <option value="opening_date" {% if request.GET.sort == 'opening_date' %}selected{% endif %}>Oldest</option>
                    <option value="-ride_count" {% if request.GET.sort == '-ride_count' %}selected{% endif %}>Most Rides</option>
                    <option value="-coaster_count" {% if request.GET.sort == '-coaster_count' %}selected{% endif %}>Most Coasters</option>
                    <option value="-size" {% if request.GET.sort == '-size' %}selected{% endif %}>Largest</option>
                    <option value="size" {% if request.GET.sort == 'size' %}selected{% endif %}>Smallest</option>
                </select>
            </form>
        </div>
    </div>

    {# Clear Filters Button #}
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
        <div class="p-4">
            <button type="button"
                    onclick="clearAllFilters()"
                    class="w-full px-4 py-3 bg-gradient-to-r from-red-500 to-pink-500 hover:from-red-600 hover:to-pink-600 text-white font-medium rounded-lg transition-all duration-200 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 flex items-center justify-center">
                <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
                </svg>
                Clear All Filters
            </button>
        </div>
    </div>
</div>

{# Loading Indicator #}
<div id="loading-indicator" class="htmx-indicator fixed top-4 right-4 z-50">
    <div class="bg-blue-600 text-white px-4 py-2 rounded-lg shadow-lg flex items-center">
        <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
        </svg>
        Loading...
    </div>
</div>

<script>
function clearAllFilters() {
    // Navigate to the base URL without any query parameters
    window.location.href = "{% url 'parks:park_list' %}";
}

// Enhanced form handling
document.addEventListener('DOMContentLoaded', function() {
    // Auto-submit forms on change with debouncing
    const forms = document.querySelectorAll('#filter-form, form[hx-trigger*="change"]');
    forms.forEach(form => {
        let timeout;
        form.addEventListener('change', function(e) {
            clearTimeout(timeout);
            timeout = setTimeout(() => {
                htmx.trigger(form, 'submit');
            }, 300);
        });
    });
    
    // Handle search input with longer delay
    const searchInput = document.querySelector('input[name="search"]');
    if (searchInput) {
        let searchTimeout;
        searchInput.addEventListener('input', function(e) {
            clearTimeout(searchTimeout);
            searchTimeout = setTimeout(() => {
                htmx.trigger(e.target.closest('form'), 'submit');
            }, 500);
        });
    }
});
</script>
