From ffebf613220522c96c9fcead5e92a2fbefaab042 Mon Sep 17 00:00:00 2001
From: Novy San87 <novysan87@smkn1-wonorejo.sch.id>
Date: Mon, 3 Aug 2026 17:44:17 +0700
Subject: [PATCH] Toggle Ambang SP: switch ala iOS dengan glow warna level
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Ukuran standar iOS (w-11 h-6, knob 20px) — konsisten dgn toggle halaman lain
- Knob bergeser penuh dengan transisi halus; track gradient warna level + glow
  saat aktif, slate + inset shadow saat nonaktif
- Reaktif via Alpine (x-model) — track & glow berubah langsung saat di-toggle
---
 resources/views/settings/thresholds.blade.php | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/resources/views/settings/thresholds.blade.php b/resources/views/settings/thresholds.blade.php
index a622a83..c2f8adf 100644
--- a/resources/views/settings/thresholds.blade.php
+++ b/resources/views/settings/thresholds.blade.php
@@ -59,13 +59,15 @@
                             </div>
 
                             <div class="flex items-center gap-1.5 flex-shrink-0">
-                                {{-- Toggle aktif --}}
-                                <label class="relative inline-flex items-center cursor-pointer p-1.5" title="{{ $t->is_active ? 'Klik untuk nonaktifkan' : 'Klik untuk aktifkan' }}">
+                                {{-- Toggle aktif (iOS-style + glow) --}}
+                                <label x-data="{ on: {{ $t->is_active ? 'true' : 'false' }} }" class="relative inline-flex items-center cursor-pointer p-1.5 select-none" title="{{ $t->is_active ? 'Klik untuk nonaktifkan' : 'Klik untuk aktifkan' }}">
                                     <input type="checkbox" name="thresholds[{{ $loop->index }}][is_active]" value="1"
-                                        {{ $t->is_active ? 'checked' : '' }}
-                                        class="sr-only peer">
-                                    <div class="w-9 h-5 bg-slate-200 rounded-full 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-slate-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:border-transparent"
-                                        style="{{ $t->is_active ? 'background-color: ' . $t->color : '' }}"></div>
+                                        {{ $t->is_active ? 'checked' : '' }} x-model="on" class="sr-only peer">
+                                    <div class="w-11 h-6 rounded-full transition-all duration-300"
+                                        :style="on ? 'background: linear-gradient(135deg, {{ $t->color }}, {{ $t->color }}cc); box-shadow: 0 0 14px 2px {{ $t->color }}4d;' : 'background-color: #e2e8f0; box-shadow: inset 0 1px 3px rgba(15,23,42,0.1);'">
+                                        <div class="absolute top-[2px] left-[2px] h-5 w-5 bg-white rounded-full shadow-md transition-all duration-300"
+                                            :class="on ? 'translate-x-5' : ''"></div>
+                                    </div>
                                 </label>
 
                                 {{-- Hapus --}}