create feat management role menu

resources/js/roles/index.js

@@ -18,10 +18,12 @@ class Roles {
                     name: "Action",
                     formatter: (cell) =>
                         gridjs.html(`
-                      <div class="d-flex justify-content-end gap-x-2">
-                      <a href="/roles/${cell}/edit" class="btn btn-yellow me-2">Update</a>
-                      <button class="btn btn-red btn-delete btn-delete-role" data-id="${cell}">Delete</button>
-                      `),
+                            <div class="d-flex justify-content-end gap-x-2">
+                                <a href="/roles/${cell}/edit" class="btn btn-yellow me-2">Update</a>
+                                <a href="/roles/role-menu/${cell}" class="btn btn-yellow me-2">Role Menu</a>
+                                <button class="btn btn-red btn-delete btn-delete-role" data-id="${cell}">Delete</button>
+                            <div>
+                        `),
                 },
             ],
             pagination: {

resources/js/roles/role_menu.js

@@ -0,0 +1,36 @@
+class RoleMenus {
+    init() {
+        this.initCheckboxRoles();
+    }
+
+    initCheckboxRoles() {
+        const childPermissions =
+            document.querySelectorAll(".child-permissions");
+
+        childPermissions.forEach((child) => {
+            child.addEventListener("change", function () {
+                const parentId = this.dataset.parentId;
+                const parentShow = document.querySelector(
+                    `input[name='permissions[${parentId}][allow_show]']`
+                );
+
+                if (parentShow) {
+                    // If any child permission is checked, check parent "Show"
+                    if (
+                        document.querySelectorAll(
+                            `.child-permission[data-parent-id="${parentId}"]:checked`
+                        ).length > 0
+                    ) {
+                        parentShow.checked = true;
+                    } else {
+                        parentShow.checked = false;
+                    }
+                }
+            });
+        });
+    }
+}
+
+document.addEventListener("DOMContentLoaded", function (event) {
+    new RoleMenus().init();
+});