From 0a451e0c014b876cef2a7381c0912987ac56af1f Mon Sep 17 00:00:00 2001
From: "Joseph.Rawlings" <root0091@gmail.com>
Date: Mon, 1 Dec 2025 12:49:35 -0500
Subject: [PATCH] feat: implement custom toggle switch for firewall
 enable/disable functionality in Proxmox view, enhancing user interaction and
 visual appeal

---
 .../Servers/Proxmox/views/firewall.blade.php  | 71 ++++++++++++++++---
 1 file changed, 62 insertions(+), 9 deletions(-)

diff --git a/extensions/Servers/Proxmox/views/firewall.blade.php b/extensions/Servers/Proxmox/views/firewall.blade.php
index 3bdc50b9a..7bd1067de 100644
--- a/extensions/Servers/Proxmox/views/firewall.blade.php
+++ b/extensions/Servers/Proxmox/views/firewall.blade.php
@@ -1,5 +1,55 @@
 <x-proxmox::layout :server="$server" view="firewall" :status="$status" :status-polling="true" :status-polling-interval="'2s'">
 
+<style>
+    .firewall-toggle-switch {
+        position: relative;
+        display: inline-block;
+        width: 44px;
+        height: 24px;
+    }
+    .firewall-toggle-switch input {
+        opacity: 0;
+        width: 0;
+        height: 0;
+    }
+    .firewall-toggle-slider {
+        position: absolute;
+        cursor: pointer;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background-color: #e5e7eb;
+        transition: 0.3s;
+        border-radius: 24px;
+    }
+    .dark .firewall-toggle-slider {
+        background-color: #374151;
+    }
+    .firewall-toggle-slider:before {
+        position: absolute;
+        content: "";
+        height: 18px;
+        width: 18px;
+        left: 3px;
+        bottom: 3px;
+        background-color: white;
+        transition: 0.3s;
+        border-radius: 50%;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
+    }
+    .firewall-toggle-switch input:checked + .firewall-toggle-slider {
+        background-color: #2563eb;
+    }
+    .firewall-toggle-switch input:checked + .firewall-toggle-slider:before {
+        transform: translateX(20px);
+    }
+    .firewall-toggle-switch input:disabled + .firewall-toggle-slider {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+</style>
+
 <div class="space-y-6">
     <!-- Firewall Status Card -->
     <div class="bg-background border border-neutral rounded-lg p-6">
@@ -13,15 +63,18 @@
                     <p class="text-sm text-base/60 mt-1">Enable or disable the firewall for this virtual machine</p>
                 </div>
             </div>
-            <label class="inline-flex items-center cursor-pointer">
-                <input 
-                    type="checkbox" 
-                    wire:model.live="firewallEnabled"
-                    wire:click="toggleFirewall"
-                    :disabled="loading"
-                    class="sr-only peer">
-                <div class="relative w-11 h-6 bg-gray-200 dark:bg-gray-700 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
-            </label>
+            <div class="flex items-center gap-3">
+                <span class="text-sm font-medium text-base/70">Disabled</span>
+                <label class="firewall-toggle-switch" wire:loading.attr="disabled" wire:target="toggleFirewall">
+                    <input 
+                        type="checkbox" 
+                        wire:model="firewallEnabled"
+                        wire:change="toggleFirewall"
+                        wire:loading.attr="disabled">
+                    <span class="firewall-toggle-slider"></span>
+                </label>
+                <span class="text-sm font-medium text-base/70">Enabled</span>
+            </div>
         </div>
         @if($error)
             <div class="bg-error/10 border border-error/30 rounded-lg p-3 mt-4">