From 07ab9f28f2499708631070bfbaeed1edaa668c36 Mon Sep 17 00:00:00 2001
From: pacnpal <183241239+pacnpal@users.noreply.github.com>
Date: Fri, 26 Sep 2025 14:29:37 -0400
Subject: [PATCH] Refactor manufacturer search results template to utilize
 Alpine.js for state management. Enhanced manufacturer selection handling and
 improved event dispatching for better user experience.

---
 .../partials/manufacturer_search_results.html | 47 ++++++++++++-------
 1 file changed, 31 insertions(+), 16 deletions(-)

diff --git a/templates/rides/partials/manufacturer_search_results.html b/templates/rides/partials/manufacturer_search_results.html
index f41ecff1..5899a9bc 100644
--- a/templates/rides/partials/manufacturer_search_results.html
+++ b/templates/rides/partials/manufacturer_search_results.html
@@ -1,9 +1,38 @@
-<div class="absolute z-50 w-full mt-1 bg-white border border-gray-300 rounded-lg shadow-lg dark:bg-gray-700 dark:border-gray-600" style="max-height: 240px; overflow-y: auto;">
+<script>
+document.addEventListener('alpine:init', () => {
+    Alpine.data('manufacturerSearchResults', () => ({
+        selectManufacturer(id, name) {
+            // Update manufacturer fields using AlpineJS reactive approach
+            const manufacturerInput = this.$el.closest('form').querySelector('#id_manufacturer');
+            const searchInput = this.$el.closest('form').querySelector('#id_manufacturer_search');
+            const resultsDiv = this.$el.closest('form').querySelector('#manufacturer-search-results');
+            
+            if (manufacturerInput) manufacturerInput.value = id;
+            if (searchInput) searchInput.value = name;
+            if (resultsDiv) resultsDiv.innerHTML = '';
+            
+            // Update ride model search to include manufacturer using HTMX
+            const rideModelSearch = this.$el.closest('form').querySelector('#id_ride_model_search');
+            if (rideModelSearch) {
+                rideModelSearch.setAttribute('hx-include', '[name="manufacturer"]');
+            }
+            
+            // Dispatch custom event for parent component
+            this.$dispatch('manufacturer-selected', { id, name });
+        }
+    }));
+});
+</script>
+
+<div x-data="manufacturerSearchResults()" 
+     @click.outside="$el.innerHTML = ''"
+     class="absolute z-50 w-full mt-1 bg-white border border-gray-300 rounded-lg shadow-lg dark:bg-gray-700 dark:border-gray-600" 
+     style="max-height: 240px; overflow-y: auto;">
     {% if manufacturers %}
         {% for manufacturer in manufacturers %}
             <button type="button"
                     class="w-full px-4 py-2 text-left text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-600"
-                    onclick="selectManufacturer('{{ manufacturer.id }}', '{{ manufacturer.name|escapejs }}')">
+                    @click="selectManufacturer('{{ manufacturer.id }}', '{{ manufacturer.name|escapejs }}')">
                 {{ manufacturer.name }}
             </button>
         {% endfor %}
@@ -17,17 +46,3 @@
         </div>
     {% endif %}
 </div>
-
-<script>
-function selectManufacturer(id, name) {
-    document.getElementById('id_manufacturer').value = id;
-    document.getElementById('id_manufacturer_search').value = name;
-    document.getElementById('manufacturer-search-results').innerHTML = '';
-    
-    // Update ride model search to include manufacturer
-    const rideModelSearch = document.getElementById('id_ride_model_search');
-    if (rideModelSearch) {
-        rideModelSearch.setAttribute('hx-include', '[name="manufacturer"]');
-    }
-}
-</script>