Refactor ride filters and forms to use AlpineJS for state management and HTMX for AJAX interactions

- Enhanced filter sidebar with AlpineJS for collapsible sections and localStorage persistence.
- Removed custom JavaScript in favor of AlpineJS for managing filter states and interactions.
- Updated ride form to utilize AlpineJS for handling manufacturer, designer, and ride model selections.
- Simplified search script to leverage AlpineJS for managing search input and suggestions.
- Improved error handling for HTMX requests with minimal JavaScript.
- Refactored ride form data handling to encapsulate logic within an AlpineJS component.

templates/maps/partials/location_card.html

@@ -3,7 +3,8 @@
      {% if location.id %}data-location-id="{{ location.id }}"{% endif %}
      {% if location.type %}data-location-type="{{ location.type }}"{% endif %}
      {% if location.latitude and location.longitude %}data-lat="{{ location.latitude }}" data-lng="{{ location.longitude }}"{% endif %}
-     {% if clickable %}onclick="{{ onclick_action|default:'window.location.href=\''|add:location.get_absolute_url|add:'\'' }}"{% endif %}>
+     x-data="locationCard()"
+     {% if clickable %}@click="handleCardClick('{{ location.get_absolute_url }}')"{% endif %}>
     
     <!-- Card Header -->
     <div class="flex items-start justify-between mb-3">
@@ -69,7 +70,7 @@
         {% endif %}
         
         {% if show_map_action %}
-            <button onclick="showOnMap('{{ location.type }}', {{ location.id }})" 
+            <button @click="showOnMap('{{ location.type }}', {{ location.id }})" 
                     class="px-3 py-2 text-sm text-green-600 border border-green-600 rounded-lg hover:bg-green-50 dark:hover:bg-green-900 transition-colors"
                     title="Show on map">
                 <i class="fas fa-map-marker-alt"></i>
@@ -77,7 +78,7 @@
         {% endif %}
         
         {% if show_trip_action %}
-            <button onclick="addToTrip({{ location|safe }})" 
+            <button @click="addToTrip({{ location|safe }})" 
                     class="px-3 py-2 text-sm text-purple-600 border border-purple-600 rounded-lg hover:bg-purple-50 dark:hover:bg-purple-900 transition-colors"
                     title="Add to trip">
                 <i class="fas fa-plus"></i>
@@ -297,50 +298,55 @@ This would be in templates/maps/partials/park_card_content.html
 }
 </style>
 
-<!-- Location Card JavaScript -->
 <script>
-// Global functions for location card actions
-window.showOnMap = function(type, id) {
-    // Emit custom event for map integration
-    const event = new CustomEvent('showLocationOnMap', {
-        detail: { type, id }
-    });
-    document.dispatchEvent(event);
-};
-
-window.addToTrip = function(locationData) {
-    // Emit custom event for trip integration
-    const event = new CustomEvent('addLocationToTrip', {
-        detail: locationData
-    });
-    document.dispatchEvent(event);
-};
-
-// Handle location card selection
-document.addEventListener('DOMContentLoaded', function() {
-    document.addEventListener('click', function(e) {
-        const card = e.target.closest('.location-card');
-        if (card && card.dataset.locationId) {
-            // Remove previous selections
+document.addEventListener('alpine:init', () => {
+    Alpine.data('locationCard', () => ({
+        selected: false,
+        
+        init() {
+            // Listen for card selection events
+            this.$el.addEventListener('click', (e) => {
+                if (this.$el.dataset.locationId) {
+                    this.handleCardSelection();
+                }
+            });
+        },
+        
+        handleCardClick(url) {
+            if (url) {
+                window.location.href = url;
+            }
+        },
+        
+        showOnMap(type, id) {
+            // Emit custom event for map integration using AlpineJS approach
+            this.$dispatch('showLocationOnMap', { type, id });
+        },
+        
+        addToTrip(locationData) {
+            // Emit custom event for trip integration using AlpineJS approach
+            this.$dispatch('addLocationToTrip', locationData);
+        },
+        
+        handleCardSelection() {
+            // Remove previous selections using AlpineJS approach
             document.querySelectorAll('.location-card.selected').forEach(c => {
                 c.classList.remove('selected');
             });
             
-            // Add selection to clicked card
-            card.classList.add('selected');
+            // Add selection to this card
+            this.$el.classList.add('selected');
+            this.selected = true;
             
-            // Emit selection event
-            const event = new CustomEvent('locationCardSelected', {
-                detail: {
-                    id: card.dataset.locationId,
-                    type: card.dataset.locationType,
-                    lat: card.dataset.lat,
-                    lng: card.dataset.lng,
-                    element: card
-                }
+            // Emit selection event using AlpineJS $dispatch
+            this.$dispatch('locationCardSelected', {
+                id: this.$el.dataset.locationId,
+                type: this.$el.dataset.locationType,
+                lat: this.$el.dataset.lat,
+                lng: this.$el.dataset.lng,
+                element: this.$el
             });
-            document.dispatchEvent(event);
         }
-    });
+    }));
 });
-</script>
+</script>