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

---
 .../partials/designer_search_results.html     | 35 +++++++++++++------
 1 file changed, 25 insertions(+), 10 deletions(-)

diff --git a/templates/rides/partials/designer_search_results.html b/templates/rides/partials/designer_search_results.html
index 0702480a..7069b51b 100644
--- a/templates/rides/partials/designer_search_results.html
+++ b/templates/rides/partials/designer_search_results.html
@@ -1,9 +1,32 @@
-<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('designerSearchResults', () => ({
+        selectDesigner(id, name) {
+            // Update designer fields using AlpineJS reactive approach
+            const designerInput = this.$el.closest('form').querySelector('#id_designer');
+            const searchInput = this.$el.closest('form').querySelector('#id_designer_search');
+            const resultsDiv = this.$el.closest('form').querySelector('#designer-search-results');
+            
+            if (designerInput) designerInput.value = id;
+            if (searchInput) searchInput.value = name;
+            if (resultsDiv) resultsDiv.innerHTML = '';
+            
+            // Dispatch custom event for parent component
+            this.$dispatch('designer-selected', { id, name });
+        }
+    }));
+});
+</script>
+
+<div x-data="designerSearchResults()" 
+     @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 designers %}
         {% for designer in designers %}
             <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="selectDesigner('{{ designer.id }}', '{{ designer.name|escapejs }}')">
+                    @click="selectDesigner('{{ designer.id }}', '{{ designer.name|escapejs }}')">
                 {{ designer.name }}
             </button>
         {% endfor %}
@@ -17,11 +40,3 @@
         </div>
     {% endif %}
 </div>
-
-<script>
-function selectDesigner(id, name) {
-    document.getElementById('id_designer').value = id;
-    document.getElementById('id_designer_search').value = name;
-    document.getElementById('designer-search-results').innerHTML = '';
-}
-</script>