From a43c40dd92452b24cafb369834d80c10b53e217e Mon Sep 17 00:00:00 2001
From: Afiq Hamzah <afiq.hamzah@pkb.net.my>
Date: Thu, 30 May 2024 12:11:40 +0800
Subject: [PATCH] Change different color when selecting either v1 or v2

---
 .../tetapan/payable-ujrah-branches.blade.php  | 50 +++++++++++++++++--
 1 file changed, 47 insertions(+), 3 deletions(-)

diff --git a/resources/views/tetapan/payable-ujrah-branches.blade.php b/resources/views/tetapan/payable-ujrah-branches.blade.php
index a4a8494..f602b3c 100644
--- a/resources/views/tetapan/payable-ujrah-branches.blade.php
+++ b/resources/views/tetapan/payable-ujrah-branches.blade.php
@@ -70,10 +70,13 @@
                                         <div class="flex items-center">
                                             @php
                                             $selected = $cawangan->cawangan_information->version ?? '';
+                                            $select_color_v1 = 'bg-green-500 text-white';
+                                            $select_color_v2 = 'bg-indigo-500 text-white';
                                             @endphp
-                                            <select name="version_tawarruq" data-tawarruq-version-branch="{{ $cawangan->kodcaw }}" class="mt-1 block w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
-                                                <option {{ $selected === 'v1' ? 'selected' : '' }} value="v1">v1</option>
-                                                <option {{ $selected === 'v2' ? 'selected' : '' }} value="v2">v2</option>
+
+                                            <select name="version_tawarruq" data-tawarruq-version-branch="{{ $cawangan->kodcaw }}" class="mt-1 block w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 {{$selected == 'v1' ? $select_color_v1 : $select_color_v2}}">
+                                                <option {{ $selected === 'v1' ? 'selected' : '' }} value="v1" class="bg-white text-black">v1</option>
+                                                <option {{ $selected === 'v2' ? 'selected' : '' }} value="v2" class="bg-white text-black">v2</option>
                                             </select>
                                         </div>
                                     </div>
@@ -182,4 +185,45 @@
 
         });
     </script>
+    <script>
+        document.addEventListener("DOMContentLoaded", function() {
+
+            const removeStylingClass = function(element, prefixes) {
+                prefixes.forEach(prefix => {
+                    const classesToRemove = [];
+
+                    // Find classes that start with the prefix
+                    element.classList.forEach(className => {
+                        if (className.startsWith(prefix)) {
+                            classesToRemove.push(className);
+                        }
+                    });
+
+                    // Remove the found classes
+                    classesToRemove.forEach(className => {
+                        element.classList.remove(className);
+                    });
+
+                });
+            };
+
+            const select_version = document.querySelectorAll('select[name="version_tawarruq"]').forEach(x => {
+                x.addEventListener('input', (event) => {
+                    let element = event.target;
+
+                    removeStylingClass(element, ['bg-', 'text-']);
+
+                    if(element.value === 'v1'){
+                        element.classList.add('bg-green-500');
+                    }
+
+                    if(element.value === 'v2'){
+                        element.classList.add('bg-indigo-500');
+                    }
+
+                    element.classList.add('text-white');
+                })
+            });
+        });
+    </script>
     @endpush