From 916a9e36dfdf2d49c9a64dd967e1271d6c6d9b60 Mon Sep 17 00:00:00 2001
From: Bro <bro@local>
Date: Fri, 24 Jul 2026 19:31:48 +0700
Subject: [PATCH] fix: checkbox toggle pake peer-checked CSS, gak perlu JS
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Sebelum: onclick + onchange JS — checkbox gak berfungsi
Sesudah: peer-checked:opacity-100 — murni CSS, klik langsung
berfungsi, icon centang muncul/sembunyi otomatis
---
 resources/views/settings/permissions.blade.php | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/resources/views/settings/permissions.blade.php b/resources/views/settings/permissions.blade.php
index e4e67a0..6af05d9 100644
--- a/resources/views/settings/permissions.blade.php
+++ b/resources/views/settings/permissions.blade.php
@@ -112,18 +112,14 @@
                                                         <i class="fa-solid fa-lock text-xs text-blue-400"></i>
                                                     </div>
                                                 @else
-                                                    <label class="relative inline-flex items-center justify-center w-9 h-9 rounded-lg border-2 transition-all duration-150 cursor-pointer
-                                                        {{ $checked ? 'bg-blue-500 border-blue-500 shadow-sm shadow-blue-200' : 'bg-white border-gray-200 hover:border-blue-300 hover:bg-blue-50' }}"
-                                                        onclick="this.querySelector('input').click(); return false;">
+                                                    <label class="relative inline-flex items-center justify-center w-9 h-9 rounded-lg border-2 transition-all duration-150 cursor-pointer select-none
+                                                        {{ $checked ? 'bg-blue-500 border-blue-500 shadow-sm shadow-blue-200' : 'bg-white border-gray-200 hover:border-blue-300 hover:bg-blue-50' }}">
                                                         <input type="checkbox"
                                                             name="permissions[{{ $role }}][]"
                                                             value="{{ $perm->id }}"
                                                             {{ $checked ? 'checked' : '' }}
-                                                            onchange="this.parentElement.className = 'relative inline-flex items-center justify-center w-9 h-9 rounded-lg border-2 transition-all duration-150 cursor-pointer ' + (this.checked ? 'bg-blue-500 border-blue-500 shadow-sm shadow-blue-200' : 'bg-white border-gray-200 hover:border-blue-300 hover:bg-blue-50');"
-                                                            class="sr-only">
-                                                        @if($checked)
-                                                            <i class="fa-solid fa-check text-white text-xs"></i>
-                                                        @endif
+                                                            class="peer sr-only">
+                                                        <i class="fa-solid fa-check text-white text-xs peer-checked:opacity-100 opacity-0 transition-opacity duration-150"></i>
                                                     </label>
                                                 @endif
                                             </td>