   <%- header %>
   <!-- pre-rendered navbar inserted -->
   <main class="dashboard-main">
     <%- navbar %>
     <!-- pre-rendered navbar inserted -->

  <div class="container-fluid pt-20">
    <!-- Breadcrumb Navigation -->
    <%- include('../../partials/utils/title.ejs', {title: "Roles And Permission"}) %>

    <% 
       const breadcrumbs = [
         { label: "Dashboard", href: "/admin/dashboard", icon: "bi bi-house-door" },
          { label: "Roles And Permission" }
       ];
     %>

    <%- include('../../partials/utils/breadcrumb', { breadcrumbs }) %>

    <div class="card shadow-sm border-0">
      <div class="card-header text-white d-flex justify-content-between align-items-center">
        <div>
          <h6 class="mb-0" style="font-size: 20px; display: flex; justify-content: center; align-items: center;">
            <i class="fas fa-user-shield me-2"></i>&nbsp;
            <div>
              <p style="font-size: 18px;">Role Permission Management</p>
              <small class="text-black" style="margin-top: -10px; font-size: 12px;">Select a role to configure its permissions</small>
            </div>
          </h6>

        </div>
        <button class="btn btn-sm btn-light helpModal" data-bs-toggle="modal" data-bs-target="#helpModal">
          <i class="fas fa-question-circle me-1"></i> Help
        </button>
      </div>

      <div class="card-body">
        <!-- Role Selection View (Cards) -->
        <div id="roleSelectionView">
          <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4">
            <% roles.forEach((role, index) => { %>
            <div class="col">
              <div class="card role-card h-100" data-role-id="<%= role.id %>" data-bs-toggle="tooltip" data-bs-placement="top" title="Click to edit permissions">
                <div class="card-body text-center">
                  <div class="role-icon mb-3">
                    <i class="fas fa-<%= role.icon || 'user-tag' %> fa-3x text-<%= role.color || 'primary' %>"></i>
                  </div>
                  <h5 class="card-title mb-1">
                    <%= role.name %>
                    <% if(role.is_default) { %>
                    <span class="badge bg-info ms-1">Default</span>
                    <% } %>
                  </h5>
                  <p class="card-text text-muted small mb-2">
                    <%= role.description || 'No description provided' %>
                  </p>
                  <div class="d-flex justify-content-center small">
                    <span class="badge bg-light text-dark me-2">
                      <i class="fas fa-users me-1"></i> <%= role.user_count || 0 %> users
                    </span>
                    <span class="badge bg-light text-dark">
                      <i class="fas fa-key me-1"></i> <%= (role.permissions || []).filter(p => p.can_view).length %> perms
                    </span>
                  </div>
                </div>
                <div class="card-footer bg-transparent border-top-0">
                  <button class="btn btn-sm btn-outline-primary w-100 edit-role-btn">
                    <i class="fas fa-edit me-1"></i> Configure
                  </button>
                </div>
              </div>
            </div>
            <% }) %>

            <!-- Add New Role Card -->
            <div class="col">
              <div class="card h-100 add-role-card">
                <div class="card-body d-flex flex-column justify-content-center align-items-center">
                  <i class="fas fa-plus-circle fa-3x text-muted mb-3"></i>
                  <h5 class="card-title text-muted">Add New Role</h5>
                  <button class="btn btn-outline-secondary mt-2" onclick="window.location.href='/admin/roles'">
                    Create Role
                  </button>

                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Permission Edit View (Hidden Initially) -->
        <div id="permissionEditView" class="d-none">
          <div class="d-flex justify-content-between align-items-center mb-4">
            <button class="btn btn-outline-secondary back-to-roles">
              <i class="fas fa-arrow-left me-1"></i> Back to Roles
            </button>
            <h4 class="mb-0 text-center">
              <span id="currentRoleName" style="font-size: 24px !important; font-weight: 700 !important;"></span>
              <span class="badge bg-info ms-2 d-none" id="defaultRoleBadge">Default</span>
            </h4>
            <div class="text-end">
              <button class="btn btn-primary" id="savePermissionsBtn">
                Save Changes
              </button>
            </div>
          </div>

          <div class="row">
            <div class="col-md-12 col-lg-12">
              <div class="">
                <div class="card-header bg-light d-flex justify-content-between align-items-center">
                  <h6 class="mb-0">
                    <i class="fas fa-key me-1" style="font-size: 18px;"></i> <span style="font-size:18px">
                      Permission Settings
                    </span>
                  </h6>
                  <div>
                    <button class="btn btn-sm btn-outline-success me-2" id="selectAllBtn">
                      <i class="fas fa-check-circle me-1"></i> Select All
                    </button>
                    <button class="btn btn-sm btn-outline-danger" id="deselectAllBtn">
                      <i class="fas fa-times-circle me-1"></i> Clear All
                    </button>
                  </div>
                </div>
                <div class="card-body">
                  <div id="permissionSections">
                    <!-- Permission sections will be loaded by JavaScript -->
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>


  <!-- Help Modal -->
  <div class="modal fade" id="helpModal" tabindex="-1" aria-labelledby="helpModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header bg-primary text-white">
          <h5 class="modal-title" id="helpModalLabel">
            <i class="fas fa-question-circle me-2"></i>Permission Management Help
          </h5>
          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="col-md-6">
              <h6><i class="fas fa-info-circle text-primary me-2"></i>How to Use</h6>
              <ul class="small">
                <li><strong>Card View:</strong> Click any role card to edit its permissions</li>
                <li><strong>Quick Nav:</strong> Use the left sidebar to jump to specific permission sections</li>
                <li><strong>Bulk Actions:</strong> Use "Select All/Clear All" for quick permission changes</li>
                <li><strong>Mobile Friendly:</strong> All features work on mobile devices with responsive layouts</li>
              </ul>

              <h6 class="mt-4"><i class="fas fa-check-circle text-success me-2"></i>Permission Types</h6>
              <ul class="small">
                <li><strong>View:</strong> Ability to see the content</li>
                <li><strong>Create:</strong> Ability to add new items</li>
                <li><strong>Edit:</strong> Ability to modify existing items</li>
                <li><strong>Delete:</strong> Ability to remove items</li>
              </ul>
            </div>
            <div class="col-md-6">
              <h6><i class="fas fa-lightbulb text-warning me-2"></i>Tips & Tricks</h6>
              <ul class="small">
                <li>Start with the default role first when setting up permissions</li>
                <li>Use the "Reset" button to revert unsaved changes</li>
                <li>Create role templates for common permission sets</li>
                <li>Review permissions after major system updates</li>
              </ul>

              <h6 class="mt-4"><i class="fas fa-exclamation-triangle text-danger me-2"></i>Warning</h6>
              <p class="small text-danger">Changing permissions may immediately affect what users can access. Consider notifying affected users of significant changes.</p>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
</main>

<script>
  // Permission data structure
  const menuStructure = <%- JSON.stringify(menuJson) %>;
  const allRoles = <%- JSON.stringify(roles) %>;

  document.addEventListener('DOMContentLoaded', function() {
    // Initialize tooltips
    const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    tooltipTriggerList.map(function(tooltipTriggerEl) {
      return new bootstrap.Tooltip(tooltipTriggerEl);
    });

    // Current editing state
    let currentRoleId = null;
    let originalPermissions = {};
    let modifiedPermissions = {};

    // DOM elements
    const roleSelectionView = document.getElementById('roleSelectionView');
    const permissionEditView = document.getElementById('permissionEditView');
    const permissionSections = document.getElementById('permissionSections');
    const currentRoleName = document.getElementById('currentRoleName');
    const defaultRoleBadge = document.getElementById('defaultRoleBadge');
    const savePermissionsBtn = document.getElementById('savePermissionsBtn');
    const selectAllBtn = document.getElementById('selectAllBtn');
    const deselectAllBtn = document.getElementById('deselectAllBtn');

    // Switch to permission edit view
    function showPermissionEdit(roleId) {
      currentRoleId = roleId;
      const role = allRoles.find(r => r.id == roleId);

      // Update UI
      roleSelectionView.classList.add('d-none');
      permissionEditView.classList.remove('d-none');
      currentRoleName.textContent = role.name;
      defaultRoleBadge.classList.toggle('d-none', !role.is_default);

      // Load permissions
      loadPermissionsForRole(role);

      // Scroll to top
      window.scrollTo({
        top: 0,
        behavior: 'smooth'
      });
    }

    // Switch back to role selection
    function showRoleSelection() {
      permissionEditView.classList.add('d-none');
      roleSelectionView.classList.remove('d-none');
      currentRoleId = null;
      originalPermissions = {};
      modifiedPermissions = {};
    }

    // Load permissions for a role
    function loadPermissionsForRole(role) {
      // Clear previous content
      permissionSections.innerHTML = '';

      // Store original permissions
      originalPermissions = {};
      (role.permissions || []).forEach(perm => {
        originalPermissions[perm.menu_key] = {
          view: perm.can_view,
          create: perm.can_create,
          edit: perm.can_edit,
          delete: perm.can_delete
        };
      });
      modifiedPermissions = JSON.parse(JSON.stringify(originalPermissions));

      // Generate permission sections
      let sectionsHtml = '';
      let sectionIndex = 0;

      function generatePermissionSections(menuData, prefix = '', level = 0) {
        if (!menuData || typeof menuData !== 'object') return '';

        let sectionHtml = '';
        for (const [key, item] of Object.entries(menuData)) {
          if (!item?.title) continue;

          const fullKey = prefix ? `${prefix}.${key}` : key;
          const sectionId = `section-${sectionIndex++}`;
          const hasChildren = item.multiple && typeof item.multiple === 'object';
          const isParent = level === 0;

          // Generate child permissions first to know if they exist
          let childPermissions = '';
          if (hasChildren) {
            childPermissions = generatePermissionSections(item.multiple, fullKey, level + 1);
          }

          sectionHtml += `
    <div class="permission-section mb-3 ${isParent ? 'parent-permission' : 'child-permission d-none'}" 
         id="${sectionId}" data-key="${fullKey}" data-level="${level}">
      <div class="card border-0 shadow-sm" style="font-size:18px !important;">
        <div class="card-header bg-${isParent ? 'light' : 'light'} text-${isParent ? 'dark' : 'dark'} d-flex justify-content-between align-items-center">
          <div class="d-flex align-items-center">
            <h5 class="mb-0" style="font-size:18px !important;">
              <i class="fas fa-${isParent ? 'folder' : 'file-alt'} me-2"></i>
              ${item.title}
            </h5>
          </div>
          ${hasChildren && isParent ? `
            <button class="expand-toggle-btn btn btn-sm ${isParent ? 'btn-outline-dark' : 'btn-outline-secondary'}">
              <span class="expand-icon">
                <i class="fas fa-chevron-right"></i>
              </span>
              <span class="expand-text">Expand</span>
            </button>
          ` : ''}
        </div>

        <div class="card-body">
          <div class="table-responsive">
            <table class="table table-hover align-middle">
              <thead class="table-light">
                <tr>
                  <th width="40%">Permission</th>
                  <th width="20%" class="text-center">Access</th>
                  <th width="40%">Description</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td class="fw-semibold">View</td>
                  <td class="text-center">
                    <div class="form-check form-switch d-inline-block">
                      <input type="checkbox" class="form-check-input permission-toggle view-perm" 
                             data-key="${fullKey}" data-perm="view"
                             ${modifiedPermissions[fullKey]?.view ? 'checked' : ''}>
                    </div>
                  </td>
                  <td class="text-muted small">View this section</td>
                </tr>
                <tr>
                  <td class="fw-semibold">Create</td>
                  <td class="text-center">
                    <div class="form-check form-switch d-inline-block">
                      <input type="checkbox" class="form-check-input permission-toggle create-perm" 
                             data-key="${fullKey}" data-perm="create"
                             ${modifiedPermissions[fullKey]?.create ? 'checked' : ''}
                             ${!modifiedPermissions[fullKey]?.view ? 'disabled' : ''}>
                    </div>
                  </td>
                  <td class="text-muted small">Add new items</td>
                </tr>
                <tr>
                  <td class="fw-semibold">Edit</td>
                  <td class="text-center">
                    <div class="form-check form-switch d-inline-block">
                      <input type="checkbox" class="form-check-input permission-toggle edit-perm" 
                             data-key="${fullKey}" data-perm="edit"
                             ${modifiedPermissions[fullKey]?.edit ? 'checked' : ''}
                             ${!modifiedPermissions[fullKey]?.view ? 'disabled' : ''}>
                    </div>
                  </td>
                  <td class="text-muted small">Modify existing items</td>
                </tr>
                <tr>
                  <td class="fw-semibold">Delete</td>
                  <td class="text-center">
                    <div class="form-check form-switch d-inline-block">
                      <input type="checkbox" class="form-check-input permission-toggle delete-perm" 
                             data-key="${fullKey}" data-perm="delete"
                             ${modifiedPermissions[fullKey]?.delete ? 'checked' : ''}
                             ${!modifiedPermissions[fullKey]?.view ? 'disabled' : ''}>
                    </div>
                  </td>
                  <td class="text-muted small">Remove items</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
    ${childPermissions}
    `;
        }
        return sectionHtml;
      }

      sectionsHtml = generatePermissionSections(menuStructure);
      permissionSections.innerHTML = sectionsHtml;

      // Initialize new tooltips
      const newTooltips = [].slice.call(permissionEditView.querySelectorAll('[data-bs-toggle="tooltip"]'));
      newTooltips.map(function(tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl);
      });

      // Initialize permission toggles
      initPermissionToggles();
      
      // Initialize parent-child permission states on page load
      initializeParentChildStates();
    }

    // Initialize parent-child permission states
    function initializeParentChildStates() {
      // Get all parent permissions (keys without dots)
      const allToggles = document.querySelectorAll('.permission-toggle');
      const parentKeys = new Set();
      
      allToggles.forEach(toggle => {
        const key = toggle.getAttribute('data-key');
        const parts = key.split('.');
        if (parts.length === 1) {
          parentKeys.add(key);
        }
      });
      
      // For each parent, check and disable children if parent is disabled
      parentKeys.forEach(parentKey => {
        ['view', 'create', 'edit', 'delete'].forEach(permType => {
          const parentToggle = document.querySelector(`.permission-toggle[data-key="${parentKey}"][data-perm="${permType}"]`);
          if (parentToggle && !parentToggle.checked) {
            // Parent is disabled, disable all children
            const childToggles = document.querySelectorAll(`.child-permission[data-key^="${parentKey}."] .permission-toggle[data-perm="${permType}"]`);
            childToggles.forEach(childToggle => {
              childToggle.disabled = true;
            });
          }
        });
      });
    }

    // Initialize permission toggle functionality

    // Initialize permission toggle functionality
    function initPermissionToggles() {
      // Add toggle children functionality
      document.querySelectorAll('.expand-toggle-btn').forEach(btn => {
        btn.addEventListener('click', function(e) {
          e.stopPropagation();
          const parentSection = this.closest('.permission-section');
          const parentKey = parentSection.getAttribute('data-key');

          // Toggle button state
          this.classList.toggle('expanded');
          const icon = this.querySelector('.expand-icon i');
          icon.classList.toggle('fa-chevron-right');
          icon.classList.toggle('fa-chevron-down');

          // Update text
          const textSpan = this.querySelector('.expand-text');
          textSpan.textContent = this.classList.contains('expanded') ? 'Collapse' : 'Expand';

          // Toggle children
          const directChildren = Array.from(document.querySelectorAll(`.child-permission[data-key^="${parentKey}."]`))
            .filter(el => {
              const key = el.getAttribute('data-key');
              return key.split('.').length === parentKey.split('.').length + 1;
            });

          directChildren.forEach(child => {
            child.classList.toggle('d-none');
          });
        });
      });

      // Handle permission toggle changes
      document.querySelectorAll('.permission-toggle').forEach(toggle => {
        toggle.addEventListener('change', function() {
          const permKey = this.getAttribute('data-key');
          const permType = this.getAttribute('data-perm');
          const isViewPermission = permType === 'view';
          const isChecked = this.checked;

          // Update modified permissions
          if (!modifiedPermissions[permKey]) {
            modifiedPermissions[permKey] = {
              view: false,
              create: false,
              edit: false,
              delete: false
            };
          }
          modifiedPermissions[permKey][permType] = isChecked;

          if (isViewPermission) {
            // Handle view permission changes
            handleViewPermissionChange(permKey, isChecked);
          } else {
            // For other permissions (create/edit/delete)
            if (isChecked) {
              // Ensure view is checked first
              ensureViewIsChecked(permKey);
              // Propagate this permission to all children
              propagatePermissionToChildren(permKey, permType, isChecked);
            } else {
              // When unchecking a parent permission, uncheck all children
              propagatePermissionToChildren(permKey, permType, isChecked);
            }
          }

          // Update UI state
          updatePermissionUIState(permKey);
        });
      });

      // Propagate permission changes to all children
      function propagatePermissionToChildren(parentKey, permType, isChecked) {
        const childPermissions = document.querySelectorAll(`.child-permission[data-key^="${parentKey}."] .permission-toggle[data-perm="${permType}"]`);

        childPermissions.forEach(childToggle => {
          const childKey = childToggle.getAttribute('data-key');

          // If parent is being disabled, disable child
          if (!isChecked) {
            childToggle.checked = false;
            childToggle.disabled = true;
          } else {
            // If parent is being enabled, enable child toggle (but don't auto-check)
            childToggle.disabled = false;
          }

          if (!modifiedPermissions[childKey]) {
            modifiedPermissions[childKey] = {
              view: false,
              create: false,
              edit: false,
              delete: false
            };
          }
          
          // Update the permission state
          if (!isChecked) {
            modifiedPermissions[childKey][permType] = false;
          } else {
            modifiedPermissions[childKey][permType] = childToggle.checked;
          }

          // Ensure child view is checked if we're setting other permissions
          if (permType !== 'view' && isChecked && childToggle.checked) {
            const childViewToggle = document.querySelector(`.permission-toggle[data-key="${childKey}"][data-perm="view"]`);
            if (childViewToggle && !childViewToggle.checked) {
              childViewToggle.checked = true;
              modifiedPermissions[childKey].view = true;
            }
          }
        });
      }

      // Handle view permission changes
      function handleViewPermissionChange(permKey, isChecked) {
        // Get all child permissions with the same key prefix
        const childPermissions = document.querySelectorAll(`.child-permission[data-key^="${permKey}."] .permission-toggle`);

        childPermissions.forEach(childToggle => {
          const childKey = childToggle.getAttribute('data-key');
          const childPermType = childToggle.getAttribute('data-perm');

          if (isChecked) {
            // When view is checked, enable all child view permissions
            if (childPermType === 'view') {
              childToggle.checked = true;
              childToggle.disabled = false;

              if (!modifiedPermissions[childKey]) {
                modifiedPermissions[childKey] = {
                  view: true,
                  create: false,
                  edit: false,
                  delete: false
                };
              } else {
                modifiedPermissions[childKey].view = true;
              }
            }
          } else {
            // When view is unchecked, disable all child permissions
            childToggle.checked = false;
            childToggle.disabled = true;

            if (!modifiedPermissions[childKey]) {
              modifiedPermissions[childKey] = {
                view: false,
                create: false,
                edit: false,
                delete: false
              };
            } else {
              modifiedPermissions[childKey][childPermType] = false;
            }
          }
        });
      }

      // Ensure view permission is checked when other permissions are checked
      function ensureViewIsChecked(permKey) {
        const viewToggle = document.querySelector(`.permission-toggle[data-key="${permKey}"][data-perm="view"]`);
        if (viewToggle && !viewToggle.checked) {
          viewToggle.checked = true;
          if (!modifiedPermissions[permKey]) {
            modifiedPermissions[permKey] = {
              view: true,
              create: false,
              edit: false,
              delete: false
            };
          } else {
            modifiedPermissions[permKey].view = true;
          }
        }
      }

      // Update UI state for permissions
      function updatePermissionUIState(permKey) {
        const permissionRow = document.querySelector(`.permission-toggle[data-key="${permKey}"]`).closest('tbody');
        const viewChecked = modifiedPermissions[permKey]?.view || false;

        // Enable/disable non-view permissions based on view state
        permissionRow.querySelectorAll('.permission-toggle:not(.view-perm)').forEach(toggle => {
          toggle.disabled = !viewChecked;
          if (!viewChecked) {
            toggle.checked = false;
            const permType = toggle.getAttribute('data-perm');
            if (modifiedPermissions[permKey]) {
              modifiedPermissions[permKey][permType] = false;
            }
          }
        });
      }
    }
    // Event listeners
    document.querySelectorAll('.role-card, .edit-role-btn').forEach(el => {
      el.addEventListener('click', function() {
        const roleId = this.closest('.role-card')?.getAttribute('data-role-id') ||
          this.closest('.role-card')?.getAttribute('data-role-id');
        if (roleId) {
          showPermissionEdit(roleId);
        }
      });
    });

    document.querySelector('.back-to-roles').addEventListener('click', showRoleSelection);

    selectAllBtn.addEventListener('click', function() {
      document.querySelectorAll('.permission-toggle').forEach(toggle => {
        const permKey = toggle.getAttribute('data-key');
        const permType = toggle.getAttribute('data-perm');

        // Initialize permission object if it doesn't exist
        if (!modifiedPermissions[permKey]) {
          modifiedPermissions[permKey] = {
            view: false,
            create: false,
            edit: false,
            delete: false
          };
        }

        // For view permissions, just check them
        if (permType === 'view') {
          toggle.checked = true;
          modifiedPermissions[permKey].view = true;

          // Also enable other permissions for this key
          const row = toggle.closest('tr').parentElement.parentElement;
          row.querySelectorAll('.permission-toggle:not(.view-perm)').forEach(otherToggle => {
            otherToggle.disabled = false;
            otherToggle.checked = true;
            const otherPermType = otherToggle.getAttribute('data-perm');
            modifiedPermissions[permKey][otherPermType] = true;
          });
        }
        // For other permissions, check them all since view is now enabled
        else {
          toggle.checked = true;
          toggle.disabled = false;
          modifiedPermissions[permKey][permType] = true;
        }
      });
    });

    deselectAllBtn.addEventListener('click', function() {
      document.querySelectorAll('.permission-toggle').forEach(toggle => {
        const permKey = toggle.getAttribute('data-key');
        const permType = toggle.getAttribute('data-perm');

        toggle.checked = false;
        
        // Initialize permission object if it doesn't exist
        if (!modifiedPermissions[permKey]) {
          modifiedPermissions[permKey] = {
            view: false,
            create: false,
            edit: false,
            delete: false
          };
        }
        modifiedPermissions[permKey][permType] = false;

        // Disable non-view permissions
        if (permType !== 'view') {
          toggle.disabled = true;
        }
      });
    });

    savePermissionsBtn.addEventListener('click', function() {
      this.disabled = true;
      this.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i> Saving...';

      // Prepare the data to send - include all permissions (parent and child)
      const permissionsToSave = [];

      // First add all parent permissions
      Object.entries(modifiedPermissions).forEach(([menu_key, perms]) => {
        permissionsToSave.push({
          menu_key,
          can_view: perms.view || false,
          can_create: perms.create || false,
          can_edit: perms.edit || false,
          can_delete: perms.delete || false
        });
      });

      fetch(`/admin/permissions/${currentRoleId}`, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            permissions: permissionsToSave
          })
        })
        .then(response => {
          if (!response.ok) {
            throw new Error('Network response was not ok');
          }
          return response.json();
        })
        .then(data => {
          if (data.success) {
            showToast('Permissions saved successfully!', 'success');
            // Update the original permissions to match the modified ones
            originalPermissions = JSON.parse(JSON.stringify(modifiedPermissions));
          } else {
            showToast(data.message || 'Error saving permissions', 'error');
          }
        })
        .catch(error => {
          console.error('Error saving permissions:', error);
          showToast('Failed to save permissions. Please try again.', 'error');
        })
        .finally(() => {
          this.disabled = false;
          this.innerHTML = '<i class="fas fa-save me-1"></i> Save Changes';
        });
    });

    // Helper function to show toast notifications
    function showToast(message, type = 'info') {
      const toast = document.createElement('div');
      toast.className = `toast align-items-center text-white bg-${type} border-0 show`;
      toast.setAttribute('role', 'alert');
      toast.setAttribute('aria-live', 'assertive');
      toast.setAttribute('aria-atomic', 'true');
      toast.style.position = 'fixed';
      toast.style.bottom = '20px';
      toast.style.right = '20px';
      toast.style.zIndex = '9999';

      toast.innerHTML = `
      <div class="d-flex">
        <div class="toast-body">
          ${message}
        </div>
        <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
      </div>
    `;

      document.body.appendChild(toast);

      setTimeout(() => {
        toast.classList.remove('show');
        setTimeout(() => toast.remove(), 300);
      }, 3000);
    }
  });
</script>

<style>
  .card .card-body {
    padding: 0.875rem 0.5rem !important;
    color: var(--text-secondary-light);
  }

  /* Custom styles for the permission management interface */
  .role-card {
    transition: all 0.2s ease;
    cursor: pointer;
  }

  .role-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
  }

  .role-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(13, 110, 253, 0.1);
    border-radius: 50%;
  }

  .add-role-card {
    border: 2px dashed #dee2e6;
    transition: all 0.2s ease;
  }

  .add-role-card:hover {
    border-color: #0d6efd;
    background-color: rgba(13, 110, 253, 0.05);
  }

  /* Expand Toggle Button Styles */
  .expand-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 20px;
    transition: all 0.3s ease;
    border-width: 1px;
    position: relative;
    overflow: hidden;
    color: black !important;
  }

  .expand-toggle-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  .expand-toggle-btn .expand-icon {
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
  }

  .expand-toggle-btn .expand-text {
    font-size: 0.85rem;
    transition: all 0.3s ease;
  }

  /* Expanded state (added via JavaScript when clicked) */
  .expand-toggle-btn.expanded .expand-icon {
    transform: rotate(90deg);
  }

  .expand-toggle-btn.expanded .expand-text {
    content: "Collapse";
  }

  /* Button animations */
  .expand-toggle-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.2);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s ease;
    z-index: 0;
  }

  .expand-toggle-btn:hover::after {
    transform: scaleX(1);
    transform-origin: left;
  }

  /* Parent vs child button colors */
  .parent-permission .expand-toggle-btn {
    background-color: rgba(255, 255, 255, 0.1);
  }

  .parent-permission .expand-toggle-btn:hover {
    background-color: rgba(255, 255, 255, 0.2);
  }

  .child-permission .expand-toggle-btn {
    background-color: rgba(0, 0, 0, 0.05);
  }

  .child-permission .expand-toggle-btn:hover {
    background-color: rgba(0, 0, 0, 0.1);
  }

  .permission-section {
    padding-top: 80px;
    margin-top: -80px;
  }

  .form-switch .form-check-input {
    width: 2.5em;
    height: 1.5em;
  }

  #selectAllBtn {
    z-index: 999;
    position: relative;
  }

  #deselectAllBtn {
    z-index: 999;
    position: relative;
  }

  .helpModal {

    background: #dee2e6 !important;

  }

  /* Parent/Child Permission Styles */
  .parent-permission {
    margin-bottom: 20px;
  }

  .child-permission {
    margin-left: 30px;
    margin-top: 10px;
    position: relative;
  }

  .child-permission::before {
    content: "";
    position: absolute;
    left: -20px;
    top: 15px;
    width: 20px;
    height: calc(100% - 30px);
    border-left: 2px solid #dee2e6;
  }

  /* Toggle Button Styles */
  .toggle-children {
    width: 30px;
    height: 30px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    margin-left: auto;
    /* Push to right side */
  }

  .toggle-children:hover {
    transform: scale(1.1);
  }

  /* Card Header Styles */
  .card-header {
    cursor: pointer;
    transition: all 0.2s;
  }

  .card-header:hover {
    opacity: 0.9;
  }

  th,td{
    text-align: center !important;
  }

  /* Responsive Adjustments */
  @media (max-width: 768px) {
    .child-permission {
      margin-left: 15px;
    }

    .child-permission::before {
      left: -10px;
      width: 10px;
    }

    .toggle-children {
      margin-left: 10px;
    }
  }

  /* Responsive adjustments */
  @media (max-width: 767.98px) {
    .permission-section {
      padding-top: 60px;
      margin-top: -60px;
    }

    #permissionEditView .d-flex {
      flex-direction: column;
      gap: 1rem;
    }

    #permissionEditView .text-center {
      order: -1;
      margin-bottom: 1rem;
    }
  }
</style>

<%- footer %>