From feff4cb11575ccc89135f9a6d9564ea65a1adc60 Mon Sep 17 00:00:00 2001
From: Constantin Simonis <constantin@simonis.lol>
Date: Tue, 25 Feb 2025 21:59:40 +0100
Subject: [PATCH] hide food select when selecting aftershow ticket

---
 assets/controllers/hide_food_controller.js | 23 ++++++++++++
 templates/ticket/_partials/_form.html.twig | 43 ++++++++++++++--------
 2 files changed, 50 insertions(+), 16 deletions(-)
 create mode 100644 assets/controllers/hide_food_controller.js

diff --git a/assets/controllers/hide_food_controller.js b/assets/controllers/hide_food_controller.js
new file mode 100644
index 0000000..d905cda
--- /dev/null
+++ b/assets/controllers/hide_food_controller.js
@@ -0,0 +1,23 @@
+import {Controller} from "@hotwired/stimulus";
+
+
+export default class extends Controller {
+    static targets = ['foodSelect', 'ticketSelect'];
+
+    prevValue;
+
+    connect() {
+        this.hide();
+    }
+
+    hide() {
+        if (this.ticketSelectTarget.value === '2') {
+            this.foodSelectTarget.disabled = true;
+            this.prevValue = this.foodSelectTarget.value;
+            this.foodSelectTarget.value = '0';
+        } else {
+            this.foodSelectTarget.disabled = false;
+            this.foodSelectTarget.value = this.prevValue ?? '';
+        }
+    }
+}
\ No newline at end of file
diff --git a/templates/ticket/_partials/_form.html.twig b/templates/ticket/_partials/_form.html.twig
index 199089f..90ac8c4 100644
--- a/templates/ticket/_partials/_form.html.twig
+++ b/templates/ticket/_partials/_form.html.twig
@@ -1,13 +1,17 @@
 <div class="bg-white/80 backdrop-blur-sm rounded-2xl border border-gray-100 p-5 hover:shadow-lg transition-all duration-300 group">
-    <div class="grid grid-cols-1 md:grid-cols-12 gap-3 md:gap-5">
+    <div class="grid grid-cols-1 md:grid-cols-12 gap-3 md:gap-5" data-controller="hide-food">
         <div class="md:col-span-3">
             <div class="mb-1.5 text-gray-600 font-medium text-sm">Ticket-Typ</div>
             <div class="relative group">
-                <twig:ux:icon name="mingcute:ticket-fill" class="absolute left-3.5 top-1/2 -translate-y-1/2 w-5 h-5 text-orange-400 pointer-events-none transition-colors group-hover:text-orange-500" />
-                <select name="ticket" 
+                <twig:ux:icon name="mingcute:ticket-fill"
+                              class="absolute left-3.5 top-1/2 -translate-y-1/2 w-5 h-5 text-orange-400 pointer-events-none transition-colors group-hover:text-orange-500"/>
+                <select name="ticket"
                         required
                         data-form-target="ticketType"
-                        class="w-full pl-11 pr-10 py-3.5 rounded-xl appearance-none bg-white border border-gray-200 text-gray-800 font-medium text-[15px] focus:border-orange-500 focus:ring-2 focus:ring-orange-200 transition-all hover:border-orange-300">
+                        class="w-full pl-11 pr-10 py-3.5 rounded-xl appearance-none bg-white border border-gray-200 text-gray-800 font-medium text-[15px] focus:border-orange-500 focus:ring-2 focus:ring-orange-200 transition-all hover:border-orange-300"
+                        data-action="hide-food#hide"
+                        data-hide-food-target="ticketSelect"
+                >
                     <option value="" disabled selected>Auswahl</option>
                     <option value="1">All-Inclusive Ticket</option>
                     <option value="2">After-Show Ticket</option>
@@ -15,7 +19,8 @@
                     <option value="4">Klein-Kind (0-6 Jahre)</option>
                 </select>
                 <div class="absolute inset-y-0 right-0 flex items-center pr-3.5 pointer-events-none">
-                    <twig:ux:icon name="mdi:chevron-down" class="w-5 h-5 text-orange-400 transition-colors group-hover:text-orange-500" />
+                    <twig:ux:icon name="mdi:chevron-down"
+                                  class="w-5 h-5 text-orange-400 transition-colors group-hover:text-orange-500"/>
                 </div>
             </div>
         </div>
@@ -23,18 +28,23 @@
         <div class="md:col-span-3">
             <div class="mb-1.5 text-gray-600 font-medium text-sm">Ernährung</div>
             <div class="relative group">
-                <twig:ux:icon name="mdi:food" class="absolute left-3.5 top-1/2 -translate-y-1/2 w-5 h-5 text-orange-400 pointer-events-none transition-colors group-hover:text-orange-500" />
-                <select name="food" 
+                <twig:ux:icon name="mdi:food"
+                              class="absolute left-3.5 top-1/2 -translate-y-1/2 w-5 h-5 text-orange-400 pointer-events-none transition-colors group-hover:text-orange-500"/>
+                <select name="food"
                         required
                         data-form-target="foodType"
-                        class="w-full pl-11 pr-10 py-3.5 rounded-xl appearance-none bg-white border border-gray-200 text-gray-800 font-medium text-[15px] focus:border-orange-500 focus:ring-2 focus:ring-orange-200 transition-all hover:border-orange-300">
+                        class="w-full pl-11 pr-10 py-3.5 rounded-xl appearance-none bg-white border border-gray-200 text-gray-800 font-medium text-[15px] focus:border-orange-500 focus:ring-2 focus:ring-orange-200 transition-all hover:border-orange-300 disabled:opacity-70 disabled:bg-gray-100 disabled:cursor-not-allowed disabled:border-gray-200 disabled:text-gray-500 disabled:hover:border-gray-200"
+                        data-hide-food-target="foodSelect"
+                >
                     <option value="" disabled selected>Auswahl</option>
+                    <option value="0" disabled>Keine</option>
                     <option value="1">Mit Fleisch</option>
                     <option value="2">Vegetarisch</option>
                     <option value="3">Vegan</option>
                 </select>
                 <div class="absolute inset-y-0 right-0 flex items-center pr-3.5 pointer-events-none">
-                    <twig:ux:icon name="mdi:chevron-down" class="w-5 h-5 text-orange-400 transition-colors group-hover:text-orange-500" />
+                    <twig:ux:icon name="mdi:chevron-down"
+                                  class="w-5 h-5 text-orange-400 transition-colors group-hover:text-orange-500"/>
                 </div>
             </div>
         </div>
@@ -42,22 +52,23 @@
         <div class="md:col-span-5">
             <div class="mb-1.5 text-gray-600 font-medium text-sm">Anmerkungen</div>
             <div class="relative group">
-                <twig:ux:icon name="mdi:note" class="absolute left-3.5 top-1/2 -translate-y-1/2 w-5 h-5 text-orange-400 pointer-events-none transition-colors group-hover:text-orange-500" />
-                <input type="text" 
+                <twig:ux:icon name="mdi:note"
+                              class="absolute left-3.5 top-1/2 -translate-y-1/2 w-5 h-5 text-orange-400 pointer-events-none transition-colors group-hover:text-orange-500"/>
+                <input type="text"
                        placeholder="Optional"
-                       name="note" 
+                       name="note"
                        data-form-target="note"
-                       class="w-full pl-11 pr-4 py-3.5 rounded-xl border border-gray-200 text-gray-800 text-[15px] placeholder-gray-400 focus:border-orange-500 focus:ring-2 focus:ring-orange-200 transition-all hover:border-orange-300" />
+                       class="w-full pl-11 pr-4 py-3.5 rounded-xl border border-gray-200 text-gray-800 text-[15px] placeholder-gray-400 focus:border-orange-500 focus:ring-2 focus:ring-orange-200 transition-all hover:border-orange-300"/>
             </div>
         </div>
 
         <div class="flex justify-end md:justify-center items-end md:col-span-1">
             <button data-action="form#removeEntry"
                     type="button"
-                    class="group/btn p-3 hover:bg-red-50 rounded-xl transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-red-200" 
+                    class="group/btn p-3 hover:bg-red-50 rounded-xl transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-red-200"
                     title="Ticket entfernen">
-                <twig:ux:icon name="mingcute:delete-fill" 
-                             class="w-5 h-5 text-red-400 group-hover/btn:text-red-500 transition-colors" />
+                <twig:ux:icon name="mingcute:delete-fill"
+                              class="w-5 h-5 text-red-400 group-hover/btn:text-red-500 transition-colors"/>
             </button>
         </div>
     </div>
-- 
2.47.2