From 5b7b203619e35b7f535f9c53b46236850b3270f9 Mon Sep 17 00:00:00 2001
From: pacnpal <183241239+pacnpal@users.noreply.github.com>
Date: Fri, 26 Sep 2025 14:32:10 -0400
Subject: [PATCH] Refactor add ride modal to utilize Alpine.js for state
 management. Improved modal open/close functionality and enhanced event
 handling for better user experience.

---
 templates/rides/partials/add_ride_modal.html | 114 ++++++++++++-------
 1 file changed, 73 insertions(+), 41 deletions(-)

diff --git a/templates/rides/partials/add_ride_modal.html b/templates/rides/partials/add_ride_modal.html
index 18b2da7d..6dddc242 100644
--- a/templates/rides/partials/add_ride_modal.html
+++ b/templates/rides/partials/add_ride_modal.html
@@ -1,47 +1,79 @@
-<!-- Add Ride Modal -->
-<div id="add-ride-modal" class="fixed inset-0 z-50 hidden overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
-    <div class="flex items-center justify-center min-h-screen p-4">
-        <!-- Background overlay -->
-        <div class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75" aria-hidden="true"></div>
+<script>
+document.addEventListener('alpine:init', () => {
+    Alpine.data('addRideModal', () => ({
+        isOpen: false,
+        
+        openModal() {
+            this.isOpen = true;
+        },
+        
+        closeModal() {
+            this.isOpen = false;
+        },
+        
+        handleBackdropClick(event) {
+            if (event.target === event.currentTarget) {
+                this.closeModal();
+            }
+        }
+    }));
+});
+</script>
 
-        <!-- Modal panel -->
-        <div class="relative w-full max-w-3xl p-6 mx-auto bg-white rounded-lg shadow-xl dark:bg-gray-800">
-            <div class="mb-6">
-                <h2 class="text-2xl font-bold text-gray-900 dark:text-white">
-                    Add Ride at {{ park.name }}
-                </h2>
-            </div>
+<div x-data="addRideModal()">
+    <!-- Add Ride Modal -->
+    <div x-show="isOpen" 
+         x-transition:enter="transition ease-out duration-300"
+         x-transition:enter-start="opacity-0"
+         x-transition:enter-end="opacity-100"
+         x-transition:leave="transition ease-in duration-200"
+         x-transition:leave-start="opacity-100"
+         x-transition:leave-end="opacity-0"
+         @click="handleBackdropClick($event)"
+         @keydown.escape.window="closeModal()"
+         class="fixed inset-0 z-50 overflow-y-auto" 
+         aria-labelledby="modal-title" 
+         role="dialog" 
+         aria-modal="true"
+         style="display: none;">
+        <div class="flex items-center justify-center min-h-screen p-4">
+            <!-- Background overlay -->
+            <div class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75" aria-hidden="true"></div>
 
-            <div id="modal-content">
-                {% include "rides/partials/ride_form.html" with modal=True %}
+            <!-- Modal panel -->
+            <div class="relative w-full max-w-3xl p-6 mx-auto bg-white rounded-lg shadow-xl dark:bg-gray-800"
+                 x-transition:enter="transition ease-out duration-300 transform"
+                 x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                 x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
+                 x-transition:leave="transition ease-in duration-200 transform"
+                 x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
+                 x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
+                <div class="mb-6">
+                    <h2 class="text-2xl font-bold text-gray-900 dark:text-white">
+                        Add Ride at {{ park.name }}
+                    </h2>
+                    <button @click="closeModal()" 
+                            class="absolute top-4 right-4 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
+                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+                        </svg>
+                    </button>
+                </div>
+
+                <div id="modal-content">
+                    {% include "rides/partials/ride_form.html" with modal=True %}
+                </div>
             </div>
         </div>
     </div>
+
+    <!-- Modal Toggle Button -->
+    <button type="button" 
+            @click="openModal()"
+            class="inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600">
+        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
+        </svg>
+        Add Ride
+    </button>
 </div>
-
-<!-- Modal Toggle Button -->
-<button type="button" 
-        onclick="openModal('add-ride-modal')"
-        class="inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600">
-    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
-    </svg>
-    Add Ride
-</button>
-
-<script>
-function openModal(modalId) {
-    document.getElementById(modalId).classList.remove('hidden');
-}
-
-function closeModal() {
-    document.getElementById('add-ride-modal').classList.add('hidden');
-}
-
-// Close modal when clicking outside
-document.getElementById('add-ride-modal').addEventListener('click', function(event) {
-    if (event.target === this) {
-        closeModal();
-    }
-});
-</script>