@extends('layouts.app')

@section('title', 'Role-Permission Matrix')

@section('content')
<div class="card mb-3" id="rolePermissionMatrixCard" data-route="system-administration.manage-users.role-permission-matrix">
  <div class="card-header border-bottom">
    @php
      $activeCompanyId = (int) session('company_id');
      $activeCompanyName = '';
      if ($activeCompanyId) {
          $activeCompanyName = optional(\App\Models\CompanyMaster::query()->active()->select('id','company_name')->find($activeCompanyId))->company_name;
      }
    @endphp
    <div class="row flex-between-center">
      <div class="col-12 col-sm-auto d-flex align-items-center pe-0">
        <h5 class="fs-9 mb-0 text-nowrap py-2 py-xl-0">Role-Permission Matrix</h5>
        @if($activeCompanyName)
          <span class="badge bg-primary-subtle text-primary ms-2">Company: {{ $activeCompanyName }}</span>
        @else
          <span class="badge bg-warning-subtle text-warning ms-2">Select a company to manage roles &amp; permissions</span>
        @endif
      </div>
      <div class="col-12 col-sm-auto text-end ps-2">
          <div class="d-flex align-items-center gap-2" id="rpm-toolbar">
            <div class="d-flex flex-wrap align-items-center gap-1" id="moduleChips"></div>
            <button class="btn btn-sm btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasAddRole" aria-controls="offcanvasAddRole"><span class="fas fa-plus me-1"></span>Add Role</button>
          </div>
      </div>
    </div>
  </div>


  <div class="card-body p-0">
    <div class="row g-0">
      <!-- Roles list (left) -->
      <div class="col-12 col-md-3 border-end">
        <div class="p-2 border-bottom">
          <input type="text" id="rolesSearch" class="form-control form-control-sm" placeholder="Search roles">
        </div>
        <div class="position-relative">
          <div class="scrollbar" id="rolesList" style="overflow:auto;">
            <div class="p-3 text-center text-muted">Loading roles…</div>
          </div>
        </div>
      </div>

      <!-- Matrix (right) -->
      <div class="col-12 col-md-9 position-relative">
        <div id="card_loader" class="position-absolute top-0 start-0 end-0 bottom-0 bg-body d-none" style="z-index: 10;">
          <div class="h-100 d-flex align-items-center justify-content-center">
            <div class="spinner-border text-primary" role="status"><span class="visually-hidden">Loading…</span></div>
          </div>
        </div>

        <div class="table-responsive scrollbar" id="matrixScroll" style="overflow:auto;">
          <table class="table table-sm table-striped fs-10 mb-0" id="matrixTable">
            <thead class="bg-200 position-sticky top-0" style="z-index: 1;">
              <tr>
                <th style="min-width: 320px;" class="align-middle">
                  <div class="d-flex align-items-center gap-2 flex-nowrap">
                    <span>Module / Permission</span>
                    <div class="dropdown">
                      <button class="btn btn-falcon-default btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
                        Modules
                      </button>
                      <div class="dropdown-menu p-2" style="min-width: 360px;" id="moduleFilter">
                        <input type="text" class="form-control form-control-sm mb-2" id="moduleFilterSearch" placeholder="Search modules">
                        <div class="scrollbar" style="max-height: 320px; overflow:auto;">
                          <div id="moduleFilterList" class="module-filter-list"><!-- dynamic groups --></div>
                        </div>
                        <div class="d-flex justify-content-between mt-2 gap-2">
                          <button class="btn btn-sm btn-falcon-default" type="button" id="moduleSelectAll">Select all</button>
                          <button class="btn btn-sm btn-falcon-default" type="button" id="moduleClearAll">Clear all</button>
                          <button class="btn btn-sm btn-primary" type="button" id="applyModuleFilter">Apply</button>
                        </div>
                      </div>
                    </div>
                  </div>
                </th>
                <th class="text-center align-middle"><div class="form-check form-check-sm"><input class="form-check-input" type="checkbox" id="col-master-view"> <label class="form-check-label fs-11" for="col-master-view">View</label></div></th>
                <th class="text-center align-middle"><div class="form-check form-check-sm"><input class="form-check-input" type="checkbox" id="col-master-create"> <label class="form-check-label fs-11" for="col-master-create">Create</label></div></th>
                <th class="text-center align-middle"><div class="form-check form-check-sm"><input class="form-check-input" type="checkbox" id="col-master-update"> <label class="form-check-label fs-11" for="col-master-update">Update</label></div></th>
                <th class="text-center align-middle"><div class="form-check form-check-sm"><input class="form-check-input" type="checkbox" id="col-master-delete"> <label class="form-check-label fs-11" for="col-master-delete">Delete</label></div></th>
                <th class="text-center align-middle"><div class="form-check form-check-sm"><input class="form-check-input" type="checkbox" id="col-master-export"> <label class="form-check-label fs-11" for="col-master-export">Export</label></div></th>
                <th class="text-center align-middle"><div class="form-check form-check-sm"><input class="form-check-input" type="checkbox" id="col-master-manage"> <label class="form-check-label fs-11" for="col-master-manage">Manage</label></div></th>
              </tr>
            </thead>
            <tbody id="matrixBody">
              <tr><td colspan="7" class="text-center py-4 text-muted">Select a role to view permissions</td></tr>
            </tbody>
          </table>
        </div>

        <div class="border-top px-3 py-2 d-flex justify-content-between align-items-center mt-auto sticky-bottom-footer">
          <div class="text-muted small">Pending changes: <span id="pendingChanges">0</span></div>
          <div>
            <button type="button" class="btn btn-sm btn-falcon-default me-2" id="rpm-reset">Reset</button>
            <button type="button" class="btn btn-sm btn-primary" id="rpm-save"><span class="fas fa-save me-1"></span>Save Changes</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection

@push('styles')
<style>
  #matrixTable th, #matrixTable td { vertical-align: middle; }
  #matrixTable thead th { position: sticky; top: 0; background: var(--bs-body-bg); padding-top: .375rem; padding-bottom: .375rem; }
  .module-row { background: var(--bs-light); font-weight: 600; }
  .module-actions { white-space: nowrap; }
  /* Center action checkboxes in cells */
  #matrixTable td.action-cell { text-align: center; }
  #matrixTable td.action-cell .form-check { display: inline-flex; align-items: center; justify-content: center; margin: 0; }
  /* Module-row 'All' toggle and chip */
  #matrixBody .module-master { display: inline-flex; align-items: center; gap: .35rem; margin: 0; }
  #matrixBody .module-master .form-check-input { margin: 0; }
  #matrixBody .module-master .form-check-label { margin: 0; line-height: 1; padding: 0.1rem 0.4rem; border-radius: .5rem; font-size: .72rem; background: var(--bs-200); color: var(--bs-800); border: 1px solid var(--bs-300); }
  /* Compact header checkboxes: inline, no extra margins, centered */
  #matrixTable thead .form-check { display: inline-flex; align-items: center; gap: .35rem; margin: 0; padding: 0; }
  #matrixTable thead .form-check-input { margin: 0; }
  #matrixTable thead .form-check-label { margin: 0; line-height: 1; }
  #matrixTable thead .dropdown .btn { padding: .15rem .5rem; }
  /* Fix dropdown z-index to appear above table */
  #matrixTable thead .dropdown { position: relative; z-index: 1; }
  #matrixTable thead .dropdown.show { z-index: 9999; }
  #matrixTable thead .dropdown-menu { z-index: 9999; }
  /* Section badge styling (chip look) */
  .badge-section {
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary);
    border: 1px solid var(--bs-primary-border-subtle);
    padding: .12rem .45rem;
    border-radius: 12px;
    font-size: .72rem;
    font-weight: 600;
    line-height: 1;
  }
  /* Group badge styling (chip look) */
  .badge-group {
    background: var(--bs-secondary-bg-subtle);
    color: var(--bs-secondary);
    border: 1px solid var(--bs-secondary-border-subtle);
    padding: .12rem .45rem;
    border-radius: 12px;
    font-size: .72rem;
    font-weight: 600;
    line-height: 1;
  }
  /* Section separator row (no gradients) */
  #matrixBody tr.section-row td {
    background: var(--bs-gray-100);
    border-top: 1px solid var(--bs-gray-300);
    border-bottom: 1px solid var(--bs-gray-300);
    font-weight: 700;
  }
  #matrixBody tr.section-row .badge-section { margin-left: .25rem; }
  /* Group rows: subtle emphasis with visual indicator */
  #matrixBody tr.group-row td {
    background: var(--bs-gray-50);
    border-left: 3px solid var(--bs-info);
    font-weight: 600;
  }
  /* Permissions under groups: clear nesting */
  #matrixBody tr.permission-row td {
    background: var(--bs-body-bg);
    border-left: 1px solid var(--bs-gray-200);
  }

  /* Roles list item styles */
  #rolesList .role-item { cursor: pointer; border-left: 3px solid transparent; transition: background-color .15s ease, border-color .15s ease; padding: .35rem .5rem; }
  #rolesList .role-item:hover { background-color: var(--bs-light); }
  #rolesList .role-item.active { background-color: var(--bs-primary-bg-subtle) !important; border-left-color: var(--bs-primary); color: var(--bs-body-color); }
  #rolesList .role-item .fw-semibold { font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #rolesList .role-item .small { font-size: .7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .module-master .form-check-input { transform: scale(0.95); }
  .action-cell .form-check-input { transform: scale(0.95); }
  #moduleFilter .form-check-label { color: var(--bs-gray-700, #495057); font-weight: 500; }
  #moduleFilter .form-check-input:checked + .form-check-label { color: var(--bs-primary); font-weight: 600; }
  /* Grouped module dropdown */
  .module-filter-list .parent { padding: .35rem .5rem; font-weight: 600; color: var(--bs-gray-800); background: var(--bs-gray-100); border: 1px dashed var(--bs-gray-300); border-left: 3px solid var(--bs-gray-400); border-radius: .25rem; margin: .35rem 0 .15rem; display:flex; align-items:center; justify-content:space-between; }
  .module-filter-list .parent .meta { font-weight: 500; font-size: .72rem; color: var(--bs-secondary-color); }
  .module-filter-list .children { padding-left: .5rem; margin-bottom: .25rem; }
  .module-filter-list .child { display:flex; align-items:center; padding: .1rem .25rem; border-radius: .25rem; }
  .module-filter-list .child:hover { background: var(--bs-gray-100); }
  .module-filter-list .child .form-check { width: 100%; }
  #rolesList .role-item.active .fw-semibold { color: var(--bs-primary); }
  #rolesList .role-item.active .text-muted { color: var(--bs-secondary-color) !important; }
  /* Module chips container with wrapping and max height */
  #moduleChips { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 0.35rem; 
    max-height: 120px; 
    overflow-y: auto; 
    padding: 0.25rem 0;
    align-items: flex-start;
  }
  #moduleChips::-webkit-scrollbar { width: 4px; height: 4px; }
  #moduleChips::-webkit-scrollbar-thumb { background: var(--bs-gray-400); border-radius: 4px; }
  #moduleChips::-webkit-scrollbar-track { background: var(--bs-gray-200); }
  /* Compact chips base */
  #moduleChips .chip { 
    display: inline-flex; 
    align-items: center; 
    gap: 0.3rem; 
    padding: 0.25rem 0.5rem; 
    border-radius: 12px; 
    font-size: 0.7rem;
    white-space: nowrap;
    flex-shrink: 0;
  }
  /* Optional neutral fallback if no color class is applied */
  #moduleChips .chip.neutral { background: var(--bs-gray-200); color: var(--bs-gray-900); border: 1px solid var(--bs-gray-300); }
  #moduleChips .chip .chip-remove { 
    cursor: pointer;
    opacity: 0.7; 
    font-size: 1rem; 
    line-height: 1;
    font-weight: 700;
    transition: opacity 0.15s ease;
  }
  #moduleChips .chip .chip-remove:hover { opacity: 1; }
  .module-name { display:flex; align-items:center; gap:.5rem; justify-content:space-between; }
  .module-name .small { color: var(--bs-secondary-color); }

  /* Offcanvas width and sticky footer pattern for Add Role (match Warehouse) */
  #offcanvasAddRole {
    --bs-offcanvas-width: clamp(700px, 60vw, 960px);
    width: clamp(700px, 60vw, 960px) !important;
    max-width: 100vw;
  }
  @media (max-width: 768px) {
    #offcanvasAddRole { --bs-offcanvas-width: 100vw; width: 100vw !important; }
  }
  #offcanvasAddRole .offcanvas-body { display: flex; flex-direction: column; height: 100%; }
  #offcanvasAddRole .form-scroll-container { flex: 1 1 auto; overflow: visible; min-height: 0; }
  #offcanvasAddRole .card.h-100 { display: flex; flex-direction: column; min-height: 0; }
  #offcanvasAddRole .card-body { flex: 1 1 auto; min-height: 0; }
  #offcanvasAddRole .sticky-bottom-footer { flex: 0 0 auto; position: sticky; bottom: 0; }
</style>
@endpush

@push('scripts')
<script>
  (function(){
    const $card = $('#rolePermissionMatrixCard');
    const $rolesList = $('#rolesList');
    const $matrixScroll = $('#matrixScroll');
    const routes = {
      roles: '{{ route('system-administration.manage-users.roles') }}',
      modules: '{{ route('system-administration.manage-users.modules') }}',
      data: '{{ route('system-administration.manage-users.role-permission-matrix.data') }}',
      update: '{{ route('system-administration.manage-users.role-permission-matrix.update') }}'
    };

    $.ajaxSetup({
      headers: { 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content') }
    });

  let currentRoleId = null;
  let selectedModuleIds = [];
  let pendingChanges = new Set();
  let initialPermissionState = new Map(); // permissionId -> boolean (initial checked state)
  let initialAssignedPermissions = new Set(); // Track initial state for proper sync
  const modulesCache = new Map(); // id -> label
  const roleAssignedOnly = new Map(); // roleId -> bool

    function setPending(n){ $('#pendingChanges').text(n); }
    
    function calculatePendingChanges() {
      const changed = new Set();
      $('#matrixBody .perm-toggle[data-perm-id]').each(function(){
        const pid = parseInt($(this).data('perm-id'), 10);
        if (!pid) return;
        const currentState = $(this).is(':checked');
        const initialState = initialPermissionState.get(pid) || false;
        if (currentState !== initialState) {
          changed.add(pid);
        }
      });
      pendingChanges = changed;
      setPending(pendingChanges.size);
    }

  function renderRoles(items){
      if (!items || !items.length) {
        $rolesList.html('<div class="p-3 text-center text-muted">No roles found</div>');
        return;
      }
      const html = items.map(r => {
        const assigned = roleAssignedOnly.get(r.id) ? 'checked' : '';
        const nameEscaped = (window._ && _.escape) ? _.escape(r.name) : r.name;
        const descEscaped = (window._ && _.escape) ? _.escape((r.description || r.guard_name || '').toString()) : (r.description || r.guard_name || '').toString();
        const tooltipText = `${nameEscaped}${descEscaped ? '\n' + descEscaped : ''}`;
        return `
        <div class="border-bottom role-item d-flex align-items-center" data-id="${r.id}" title="${tooltipText}">
          <div class="flex-grow-1" style="min-width: 0; max-width: calc(100% - 120px);">
            <div class="fw-semibold text-truncate">${nameEscaped}</div>
            <div class="small text-muted text-truncate">${descEscaped}</div>
          </div>
          <div class="d-flex align-items-center gap-1 ms-2 flex-shrink-0" style="width: 115px;">
            <div class="form-check form-check-sm m-0 d-flex align-items-center">
              <input class="form-check-input role-assigned-only-input me-1" type="checkbox" id="assigned_only_${r.id}" data-id="${r.id}" ${assigned} style="margin-top: 0;">
              <label class="form-check-label small text-nowrap mb-0" for="assigned_only_${r.id}" style="font-size: 0.7rem; line-height: 1;">Assigned</label>
            </div>
            <span class="badge bg-200 text-700" style="font-size: 0.65rem;">#${r.id}</span>
          </div>
        </div>`;
      }).join('');
      $rolesList.html(`<div class="scrollbar">${html}</div>`);
      const $first = $rolesList.find('.role-item').first();
      if ($first.length) {
        $first.addClass('active');
        currentRoleId = parseInt($first.data('id'),10)||null;
        loadMatrix();
      }
    }

    function loadRoles(search=''){
      $rolesList.html('<div class="p-3 text-center text-muted">Loading roles…</div>');
      $.get(routes.roles, { search, current_company_only: true }).done(resp => {
        if (resp && resp.success) { renderRoles(resp.data); }
        else { renderRoles([]); }
      }).fail(() => renderRoles([]));
    }

    function renderModuleBadges(){
      const $chips = $('#moduleChips');
      if (!selectedModuleIds.length) { $chips.empty(); $('#moduleSelectionStatus').text('No modules selected'); return; }
      const palette = [
        'bg-primary-subtle text-primary border border-primary-subtle',
        'bg-info-subtle text-info border border-info-subtle',
        'bg-success-subtle text-success border border-success-subtle',
        'bg-warning-subtle text-warning border border-warning-subtle',
        'bg-danger-subtle text-danger border border-danger-subtle',
        'bg-secondary-subtle text-secondary border border-secondary-subtle'
      ];
      const labels = selectedModuleIds.map(id => ({ id, label: modulesCache.get(id) || $('#moduleFilterList #mod_'+id).data('label') || id }));
      const chipsHtml = labels.map(x => {
        const cls = palette[x.id % palette.length] || 'neutral';
        return `<span class="badge chip ${cls}" data-id="${x.id}">${x.label}<span class="chip-remove" data-id="${x.id}">×</span></span>`;
      }).join('');
      $chips.html(chipsHtml);
      $('#moduleSelectionStatus').text(`${labels.length} module(s) selected`);
    }

    function loadModules(){
      const search = $('#moduleFilterSearch').val()||'';
      $('#moduleFilterList').html('<div class="text-center text-muted py-2">Loading…</div>');
      $.get(routes.modules, { search }).done(resp => {
        const itemsRaw = (resp && resp.success) ? resp.data : [];
        if (!itemsRaw.length) { $('#moduleFilterList').html('<div class="text-center text-muted py-2">No modules</div>'); return; }
        // Dedupe strictly by module id to mirror matrix table uniqueness
        const seenIds = new Set();
        const items = itemsRaw.filter(m => { if (seenIds.has(m.id)) return false; seenIds.add(m.id); return true; });
        
        // Build hierarchical structure: Sections -> Groups -> Permissions
        const sections = items.filter(m => m.parent_id == null);
        const itemsByParent = {};
        items.forEach(m => {
          if (!itemsByParent[m.parent_id]) itemsByParent[m.parent_id] = [];
          itemsByParent[m.parent_id].push(m);
        });
        
        const html = [];
        sections.forEach(section => {
          const sectionChecked = selectedModuleIds.includes(section.id) ? 'checked' : '';
          const safeSectionLabel = (window._ && _.escape) ? _.escape(section.label) : section.label;
          try { modulesCache.set(section.id, section.label); } catch(e) {}
          
          // Section row with PRIMARY badge - each on new line
          html.push(`<div class="form-check form-check-sm mb-1 d-flex align-items-start" style="margin-top: 8px; flex-wrap: wrap;">
            <div class="d-flex align-items-center w-100">
              <input class="form-check-input me-2 flex-shrink-0 module-section" type="checkbox" value="${section.id}" id="mod_${section.id}" ${sectionChecked} data-label="${safeSectionLabel}" data-type="section">
              <label class="form-check-label d-flex align-items-center gap-2 flex-grow-1" for="mod_${section.id}" style="cursor: pointer;">
                <span>${safeSectionLabel}</span>
                <span class="badge bg-primary-subtle text-primary border border-primary-subtle" style="padding: .12rem .45rem; border-radius: 12px; font-size: .72rem; font-weight: 600; line-height: 1;">Section</span>
              </label>
            </div>
          </div>`);
          
          // Children of this section (Groups and direct Permissions)
          const children = itemsByParent[section.id] || [];
          children.forEach(child => {
            const childChecked = selectedModuleIds.includes(child.id) ? 'checked' : '';
            let displayLabel = child.label;
            if (child.label && child.label.toLowerCase() === section.label.toLowerCase()) {
              displayLabel = `${child.label} — ${child.slug || ''}`;
            }
            const safeChildLabel = (window._ && _.escape) ? _.escape(displayLabel) : displayLabel;
            try { modulesCache.set(child.id, displayLabel); } catch(e) {}
            
            // Check if this child is a Group (has children) or a Permission (no children)
            const grandchildren = itemsByParent[child.id] || [];
            const isGroup = grandchildren.length > 0;
            
            if (isGroup) {
              // Group row with SECONDARY badge - each on new line
              html.push(`<div class="form-check form-check-sm mb-1 d-flex align-items-start" style="margin-left: 24px; flex-wrap: wrap;">
                <div class="d-flex align-items-center w-100">
                  <input class="form-check-input me-2 flex-shrink-0 module-group" type="checkbox" value="${child.id}" id="mod_${child.id}" ${childChecked} data-label="${safeChildLabel}" data-type="group" data-parent="${section.id}">
                  <label class="form-check-label d-flex align-items-center gap-2 flex-grow-1" for="mod_${child.id}" style="cursor: pointer;">
                    <span><small>${safeChildLabel}</small></span>
                    <span class="badge bg-secondary-subtle text-secondary border border-secondary-subtle" style="padding: .12rem .45rem; border-radius: 12px; font-size: .72rem; font-weight: 600; line-height: 1;">Group</span>
                  </label>
                </div>
              </div>`);
              
              // Permissions under this group - each on new line
              grandchildren.forEach(perm => {
                const permChecked = selectedModuleIds.includes(perm.id) ? 'checked' : '';
                let permLabel = perm.label;
                if (perm.label && perm.label.toLowerCase() === child.label.toLowerCase()) {
                  permLabel = `${perm.label} — ${perm.slug || ''}`;
                }
                const safePermLabel = (window._ && _.escape) ? _.escape(permLabel) : permLabel;
                try { modulesCache.set(perm.id, permLabel); } catch(e) {}
                
                html.push(`<div class="form-check form-check-sm mb-1" style="margin-left: 48px;">
                  <input class="form-check-input module-permission" type="checkbox" value="${perm.id}" id="mod_${perm.id}" ${permChecked} data-label="${safePermLabel}" data-type="permission" data-parent="${child.id}">
                  <label class="form-check-label" for="mod_${perm.id}"><small>${safePermLabel}</small></label>
                </div>`);
              });
            } else {
              // Direct permission under section (no group) - each on new line
              html.push(`<div class="form-check form-check-sm mb-1" style="margin-left: 24px;">
                <input class="form-check-input module-permission" type="checkbox" value="${child.id}" id="mod_${child.id}" ${childChecked} data-label="${safeChildLabel}" data-type="permission" data-parent="${section.id}">
                <label class="form-check-label" for="mod_${child.id}"><small>${safeChildLabel}</small></label>
              </div>`);
            }
          });
        });
        
        $('#moduleFilterList').html(html.join(''));
      }).fail(() => $('#moduleFilterList').html('<div class="text-center text-muted py-2">Failed to load</div>'));
    }

    let assignedOnlyActive = false;

  function renderMatrix(rows){
      const $tbody = $('#matrixBody');
      
        // Reset initial state tracking when loading new matrix
        initialAssignedPermissions.clear();
        initialPermissionState.clear();
        pendingChanges.clear();
        setPending(0);
        
        if (!rows || !rows.length) {
          const msg = assignedOnlyActive ? 'No permissions assigned' : 'No permissions for selection';
          $tbody.html(`<tr><td colspan="7" class="text-center py-4 text-muted">${msg}</td></tr>`);
        return;
      }
  const actions = ['view','create','update','delete','export','manage'];
  let prevSectionId = null;
  const html = rows.map(m => {
          const chunks = [];
          // Insert a section separator when section changes (sections are not included as rows)
          if (m.section_id && m.section_id !== prevSectionId) {
            const secLabel = (window._ && _.escape) ? _.escape(m.section_label || 'Section') : (m.section_label || 'Section');
            chunks.push(`<tr class="section-row"><td colspan="7"><span class="badge badge-subtle-primary">${secLabel}</span></td></tr>`);
            prevSectionId = m.section_id;
          }
   
          // If assigned-only, skip modules with no assigned permissions (defensive; backend also filters)
          if (assignedOnlyActive) {
            const anyAssignedInModule = Object.values(m.permissions || {}).some(p => !!p.assigned);
            if (!anyAssignedInModule) return chunks.join('');
          }
        const masterId = `all_${m.module_id}`;
          const rowClass = `module-row${m.is_group ? ' group-row' : ''}`;
          
          // Calculate indentation based on hierarchy level
          let indentPx = 0;
          let indentClass = '';
          if (m.is_section) {
            indentPx = 0; // Sections at base level
            indentClass = 'section-row';
          } else if (m.is_group) {
            indentPx = 16; // Groups indented 16px
            indentClass = 'group-row';
          } else if (m.parent_is_group) {
            indentPx = 40; // Permissions under groups indented 40px (more than groups)
            indentClass = 'permission-row';
          } else {
            indentPx = 40; // Direct permissions under sections indented 16px
            indentClass = 'permission-row';
          }
          
          const cells = actions.map(a => {
          const p = (m.permissions||{})[a]||{};
          const checked = p.assigned ? 'checked' : '';
          const pid = p.id || '';
          
          // Track initially assigned permissions for proper sync on save
          if (p.assigned && pid) {
            initialAssignedPermissions.add(parseInt(pid, 10));
          }
          
          // Track initial state of all permissions
          if (pid) {
            initialPermissionState.set(parseInt(pid, 10), !!p.assigned);
          }
            if (assignedOnlyActive && !p.assigned) {
              // In assigned-only mode, hide unassigned checkboxes to show only assigned permissions
              return `<td class="text-center action-cell"></td>`;
            }
            const disabled = pid ? '' : 'disabled title="Not applicable"';
            return `<td class="text-center action-cell"><div class="form-check form-check-sm"><input class="form-check-input perm-toggle" type="checkbox" data-perm-id="${pid}" data-act="${a}" data-module-id="${m.module_id}" ${checked} ${disabled}></div></td>`;
        }).join('');
    chunks.push(`<tr class="${rowClass} ${indentClass}" data-module-id="${m.module_id}">
          <td>
            <div class="module-name" style="padding-left: ${indentPx}px;">
              <span>
                ${m.module_label}
                ${m.is_section ? '<span class="badge bg-primary-subtle text-primary border border-primary-subtle ms-2">Section</span>' : ''}
                ${m.is_group ? '<span class="badge bg-secondary-subtle text-secondary border border-secondary-subtle ms-2">Group</span>' : ''}
              </span>
              <label class="form-check form-check-sm module-master mb-0 ms-2"><input class="form-check-input module-all" type="checkbox" id="${masterId}" data-module-id="${m.module_id}"> <small class="form-check-label">All</small></label>
            </div>
          </td>${cells}
        </tr>`);
        return chunks.join('');
        }).filter(Boolean).join('');
        if (!html) {
          const msg = assignedOnlyActive ? 'No permissions assigned' : 'No permissions for selection';
          $tbody.html(`<tr><td colspan="7" class="text-center py-4 text-muted">${msg}</td></tr>`);
          return;
        }
      $tbody.html(html);
      updateRowMasters();
      setPending(pendingChanges.size);
    }

  function updateRowMasters(){
      // Update regular module rows
      $('#matrixBody tr.module-row:not(.group-row)').each(function(){
        const $row = $(this);
        const $checks = $row.find('.perm-toggle:not([disabled])');
        const allChecked = $checks.length && $checks.filter(':checked').length === $checks.length;
        $row.find('.module-all').prop('checked', allChecked);
      });
      
      // Update group rows
      $('#matrixBody tr.module-row.group-row').each(function(){
        const $groupRow = $(this);
        // Collect all permissions from group row itself + all child rows
        let $allChecks = $groupRow.find('.perm-toggle:not([disabled])');
        let $nextRow = $groupRow.next();
        while ($nextRow.length && !$nextRow.hasClass('group-row') && !$nextRow.hasClass('section-row')) {
          $allChecks = $allChecks.add($nextRow.find('.perm-toggle:not([disabled])'));
          $nextRow = $nextRow.next();
        }
        const allChecked = $allChecks.length && $allChecks.filter(':checked').length === $allChecks.length;
        $groupRow.find('.module-all').prop('checked', allChecked);
      });
    }

    function loadMatrix(){
      if (!currentRoleId) { return; }
      assignedOnlyActive = !!roleAssignedOnly.get(currentRoleId);
      const params = {
        role_id: currentRoleId,
        search: '',
        modules: selectedModuleIds,
        show_assigned_only: assignedOnlyActive
      };
      $('#card_loader').removeClass('d-none');
      $.ajax({ url: routes.data, type: 'GET', data: params, traditional: false }).done(resp => {
        if (resp && resp.success) { renderMatrix(resp.data.data); }
        else { renderMatrix([]); }
      }).fail(() => renderMatrix([])).always(() => $('#card_loader').addClass('d-none'));
    }

    // Header column masters
    function toggleColumnMaster(action, checked){
      $('#matrixBody .perm-toggle[data-act="'+action+'"]:not([disabled])').each(function(){
        $(this).prop('checked', checked);
      });
      calculatePendingChanges();
      updateRowMasters();
    }

    // Save/Reset
    function gatherSelectedPermissionIds(){
      // Get currently checked permissions in the UI
      const currentlyChecked = new Set(
        $('#matrixBody .perm-toggle:checked')
          .map(function(){ return parseInt($(this).data('perm-id'),10) || null; })
          .get()
          .filter(Boolean)
      );
      
      // Merge with initial assigned permissions that are not in the current matrix view
      // This ensures we don't lose permissions from modules that aren't currently displayed
      const allPermissionIds = new Set([...initialAssignedPermissions]);
      
      // Get all permission IDs currently in the matrix (checked or unchecked)
      const visiblePermIds = new Set(
        $('#matrixBody .perm-toggle[data-perm-id]')
          .map(function(){ return parseInt($(this).data('perm-id'),10) || null; })
          .get()
          .filter(Boolean)
      );
      
      // For visible permissions: use current state (checked/unchecked)
      // For non-visible permissions: keep them if they were initially assigned
      visiblePermIds.forEach(pid => {
        if (currentlyChecked.has(pid)) {
          allPermissionIds.add(pid);
        } else {
          allPermissionIds.delete(pid);
        }
      });
      
      return Array.from(allPermissionIds);
    }

    function saveMatrix(){
      if (!currentRoleId) { if (typeof showAlert === 'function') showAlert('Select a role first','warning'); return; }
      if (!pendingChanges || pendingChanges.size === 0) { if (typeof showAlert === 'function') showAlert('Nothing to save','info'); return; }
      const permission_ids = gatherSelectedPermissionIds();
      $('#rpm-save').prop('disabled', true);
      // Use standardized AJAX helper (shows success/error toasts per standards)
      standardPostRequest(
        routes.update,
        { role_id: currentRoleId, permission_ids },
        function(resp){
          pendingChanges.clear();
          setPending(0);
          // Refresh matrix to reflect server state
          loadMatrix();
        },
        function(){ /* error toast handled by standards */ },
        { /* you can pass alertOptions/toast here if needed */ }
      );
      $('#rpm-save').prop('disabled', false);
    }

    function resetMatrix(){ loadMatrix(); pendingChanges.clear(); setPending(0); }

    // Events
    $(document).on('input', '#rolesSearch', function(){ loadRoles(this.value); });
    $(document).on('click', '.role-item', function(){
      $('.role-item').removeClass('active');
      $(this).addClass('active');
      currentRoleId = parseInt($(this).data('id'),10)||null;
      pendingChanges.clear(); setPending(0);
      loadMatrix();
    });
    // Per-role assigned-only toggle
    $(document).on('change', '.role-assigned-only-input', function(e){
      e.stopPropagation();
      const rid = parseInt($(this).data('id'),10) || null;
      if (!rid) return;
      roleAssignedOnly.set(rid, $(this).is(':checked'));
      if (currentRoleId === rid) { loadMatrix(); }
    });

    // Column masters
    $('#col-master-view').on('change', function(){ toggleColumnMaster('view', $(this).is(':checked')); });
    $('#col-master-create').on('change', function(){ toggleColumnMaster('create', $(this).is(':checked')); });
    $('#col-master-update').on('change', function(){ toggleColumnMaster('update', $(this).is(':checked')); });
    $('#col-master-delete').on('change', function(){ toggleColumnMaster('delete', $(this).is(':checked')); });
    $('#col-master-export').on('change', function(){ toggleColumnMaster('export', $(this).is(':checked')); });
    $('#col-master-manage').on('change', function(){ toggleColumnMaster('manage', $(this).is(':checked')); });

    // Row master (All) - handles both group and regular module rows
    $(document).on('change', '.module-all', function(){
      const checked = $(this).is(':checked');
      const $row = $(this).closest('tr');
      const isGroupRow = $row.hasClass('group-row');
      
      if (isGroupRow) {
        // For GROUP rows: affect all permissions in group row + all child module rows
        let $rowChecks = $row.find('.perm-toggle:not([disabled])');
        
        // Find all child module rows (until next group/section)
        let $nextRow = $row.next();
        while ($nextRow.length && !$nextRow.hasClass('group-row') && !$nextRow.hasClass('section-row')) {
          $rowChecks = $rowChecks.add($nextRow.find('.perm-toggle:not([disabled])'));
          // Also update child row's 'All' checkbox
          const $childAll = $nextRow.find('.module-all');
          if ($childAll.length) {
            $childAll.prop('checked', checked);
          }
          $nextRow = $nextRow.next();
        }
        
        // Check/uncheck all found permissions without triggering change (avoid recursion)
        $rowChecks.each(function(){
          const $this = $(this);
          $this.prop('checked', checked);
        });
        calculatePendingChanges();
      } else {
        // For regular module rows: affect only permissions in current row
        const $rowChecks = $row.find('.perm-toggle:not([disabled])');
        $rowChecks.each(function(){
          const $this = $(this);
          $this.prop('checked', checked);
        });
        calculatePendingChanges();
      }
      
      // Update all row masters after change
      updateRowMasters();
    });

    // Track changes and auto-sync 'All' checkboxes
    $(document).on('change', '.perm-toggle', function(){
      const pid = parseInt($(this).data('perm-id'),10) || 0;
      if (!pid) {
        // ignore toggles for non-existent permissions
        updateRowMasters();
        return;
      }
      calculatePendingChanges();
      
      // Auto-sync 'All' checkboxes for current row and parent group
      updateRowMasters();
    });

    $('#rpm-save').on('click', saveMatrix);
    $('#rpm-reset').on('click', resetMatrix);

    // Module dropdown interactions
    $(document).on('click', '#moduleSelectAll', function(e){
      e.preventDefault();
      e.stopPropagation();
      // Check all visible checkboxes (respects search filter) - do NOT auto-apply
      $('#moduleFilterList .form-check:visible input[type=checkbox]').prop('checked', true);
    });
    $(document).on('click', '#moduleClearAll', function(e){
      e.preventDefault();
      e.stopPropagation();
      // Only uncheck all checkboxes - do NOT auto-apply
      $('#moduleFilterList input[type=checkbox]').prop('checked', false);
    });
    $(document).on('input', '#moduleFilterSearch', function(){ loadModules(); });
    
    // Helper: Update parent checkboxes based on children state (bottom-up)
    function updateParentCheckboxes(childElement) {
      const $child = $(childElement);
      const parentId = $child.data('parent');
      if (!parentId) return;
      
      // Find parent checkbox
      const $parent = $(`#moduleFilterList input[value="${parentId}"]`);
      if (!$parent.length) return;
      
      // Check if ALL siblings (including current) are checked
      const $allSiblings = $(`#moduleFilterList input[data-parent="${parentId}"]`);
      const allChecked = $allSiblings.length > 0 && $allSiblings.filter(':checked').length === $allSiblings.length;
      
      // Update parent: checked only if ALL children are checked
      $parent.prop('checked', allChecked);
      
      // Recursively update grandparent
      if ($parent.length) {
        updateParentCheckboxes($parent[0]);
      }
    }
    
    // Cascading selection: When section is checked/unchecked (TOP-DOWN)
    $(document).on('change', '.module-section', function(e){
      // Prevent recursive triggering during programmatic updates
      if ($(this).data('programmatic')) {
        $(this).data('programmatic', false);
        return;
      }
      
      const sectionId = $(this).val();
      const isChecked = $(this).is(':checked');
      
      // Check/uncheck all groups under this section
      $(`#moduleFilterList .module-group[data-parent="${sectionId}"]`).each(function(){
        $(this).data('programmatic', true).prop('checked', isChecked);
        const groupId = $(this).val();
        // Check/uncheck all permissions under each group
        $(`#moduleFilterList .module-permission[data-parent="${groupId}"]`).each(function(){
          $(this).data('programmatic', true).prop('checked', isChecked);
        });
      });
      
      // Check/uncheck direct permissions under this section
      $(`#moduleFilterList .module-permission[data-parent="${sectionId}"]`).each(function(){
        $(this).data('programmatic', true).prop('checked', isChecked);
      });
      
      // Update selectedModuleIds for all affected items
      $('#moduleFilterList input[type=checkbox]').each(function(){
        const id = parseInt($(this).val(), 10) || null;
        if (!id) return;
        const idx = selectedModuleIds.indexOf(id);
        if ($(this).is(':checked') && idx === -1) { selectedModuleIds.push(id); }
        if (!$(this).is(':checked') && idx !== -1) { selectedModuleIds.splice(idx, 1); }
      });
    });
    
    // Cascading selection: When group is checked/unchecked (TOP-DOWN & BOTTOM-UP)
    $(document).on('change', '.module-group', function(e){
      if ($(this).data('programmatic')) {
        $(this).data('programmatic', false);
        return;
      }
      
      const groupId = $(this).val();
      const isChecked = $(this).is(':checked');
      
      // TOP-DOWN: Check/uncheck all permissions under this group
      $(`#moduleFilterList .module-permission[data-parent="${groupId}"]`).each(function(){
        $(this).data('programmatic', true).prop('checked', isChecked);
      });
      
      // BOTTOM-UP: Update parent section state
      if (!isChecked) {
        // If unchecking group, always uncheck parent section
        const parentId = $(this).data('parent');
        if (parentId) {
          $(`#moduleFilterList .module-section[value="${parentId}"]`).data('programmatic', true).prop('checked', false);
        }
      } else {
        // If checking group, check parent section only if ALL siblings are checked
        updateParentCheckboxes(this);
      }
      
      // Update selectedModuleIds
      $('#moduleFilterList input[type=checkbox]').each(function(){
        const id = parseInt($(this).val(), 10) || null;
        if (!id) return;
        const idx = selectedModuleIds.indexOf(id);
        if ($(this).is(':checked') && idx === -1) { selectedModuleIds.push(id); }
        if (!$(this).is(':checked') && idx !== -1) { selectedModuleIds.splice(idx, 1); }
      });
    });
    
    // Cascading selection: When permission is checked/unchecked (BOTTOM-UP only)
    $(document).on('change', '.module-permission', function(e){
      if ($(this).data('programmatic')) {
        $(this).data('programmatic', false);
        return;
      }
      
      const isChecked = $(this).is(':checked');
      
      if (!isChecked) {
        // BOTTOM-UP: If unchecking, uncheck parent group and section
        const parentId = $(this).data('parent');
        if (parentId) {
          // Uncheck immediate parent (group or section)
          $(`#moduleFilterList input[value="${parentId}"]`).data('programmatic', true).prop('checked', false);
          
          // Find and uncheck grandparent section if parent is a group
          const $parent = $(`#moduleFilterList .module-group[value="${parentId}"]`);
          if ($parent.length) {
            const grandparentId = $parent.data('parent');
            if (grandparentId) {
              $(`#moduleFilterList .module-section[value="${grandparentId}"]`).data('programmatic', true).prop('checked', false);
            }
          }
        }
      } else {
        // BOTTOM-UP: If checking, update parents only if ALL siblings are checked
        updateParentCheckboxes(this);
      }
      
      // Update selectedModuleIds
      const id = parseInt($(this).val(), 10) || null;
      if (!id) return;
      const idx = selectedModuleIds.indexOf(id);
      if (isChecked && idx === -1) { selectedModuleIds.push(id); }
      if (!isChecked && idx !== -1) { selectedModuleIds.splice(idx, 1); }
    });
    $(document).on('click', '#applyModuleFilter', function(){
      // Sync selectedModuleIds from all checked checkboxes (not just visible ones)
      selectedModuleIds = [];
      $('#moduleFilterList input[type=checkbox]:checked').each(function(){
        const id = parseInt($(this).val(), 10);
        if (id) selectedModuleIds.push(id);
      });
      renderModuleBadges();
      loadMatrix();
    });
    // Remove chip -> unselect module
    $(document).on('click', '.chip-remove', function(){
      const id = parseInt($(this).data('id'),10) || null;
      if (!id) return;
      selectedModuleIds = selectedModuleIds.filter(x => x !== id);
      $('#moduleFilterList #mod_'+id).prop('checked', false);
      renderModuleBadges();
      loadMatrix();
    });

    // Prevent dropdown clipping inside scroll container
    const $moduleDropdown = $card.find('[data-bs-toggle="dropdown"]').closest('.dropdown');
    $moduleDropdown.on('show.bs.dropdown', function(){
      $matrixScroll.css('overflow', 'visible');
      $('#moduleFilterSearch').val(''); // show full list on open
      loadModules();
    });
    $moduleDropdown.on('hide.bs.dropdown', function(){
      $matrixScroll.css('overflow', 'auto');
    });

    // Add Role offcanvas (Warehouse-style header/body/footer and sticky footer)
    const offcanvasHtml = `
    <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasAddRole" aria-labelledby="offcanvasAddRoleLabel">
      <div class="offcanvas-header bg-light offcanvas-header-polished">
        <h5 class="offcanvas-title" id="offcanvasAddRoleLabel"><span class="fas fa-user-shield me-2"></span><span>Add Role</span></h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
      </div>
      <div class="offcanvas-body p-0 d-flex flex-column form-standard">
        <div class="form-scroll-container flex-grow-1 p-3">
          <div class="card h-100 border-0 d-flex flex-column">
            <div class="card-body py-3 overflow-auto">
              <div class="px-sm-2 px-md-4">
                <form id="addRoleForm" class="needs-validation" novalidate>
                  <div class="row g-3">
                    <div class="col-12">
                      <label for="newRoleName" class="form-label">Role name</label>
                      <input type="text" id="newRoleName" class="form-control" name="name" required maxlength="150" placeholder="Enter role name">
                      <div class="invalid-feedback">Please provide a role name.</div>
                    </div>
                    <div class="col-md-6">
                      <label for="newRoleGuard" class="form-label">Guard (optional)</label>
                      <input type="text" id="newRoleGuard" class="form-control" name="guard_name" maxlength="100" placeholder="web">
                    </div>
                    <div class="col-md-6">
                      <label for="copyFromRole" class="form-label">Copy permissions from (optional)</label>
                      <select id="copyFromRole" name="copy_from_role_id" class="form-select" disabled>
                        <option value="">Loading…</option>
                      </select>
                      <div class="form-text">Only roles in the current company are listed.</div>
                    </div>
                    <div class="col-12">
                      <label for="newRoleDescription" class="form-label">Description (optional)</label>
                      <textarea id="newRoleDescription" class="form-control" name="description" rows="2" maxlength="500" placeholder="Short description of the role"></textarea>
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
        <div class="border-top px-3 py-2 d-flex justify-content-between align-items-center mt-auto sticky-bottom-footer offcanvas-footer-polished">
          <button type="button" class="btn btn-sm btn-falcon-default" data-bs-dismiss="offcanvas">Cancel</button>
          <button type="submit" form="addRoleForm" class="btn btn-sm btn-primary"><span class="fas fa-save me-1"></span>Create</button>
        </div>
      </div>
    </div>`;
    document.body.insertAdjacentHTML('beforeend', offcanvasHtml);

    // When offcanvas opens, load roles to populate copy-from select (scoped to current company)
    document.addEventListener('shown.bs.offcanvas', function (ev) {
      if (ev.target && ev.target.id === 'offcanvasAddRole') {
        const $sel = $('#copyFromRole');
        $sel.prop('disabled', true).html('<option value="">Loading…</option>');
        $.get(routes.roles, { current_company_only: true }).done(resp => {
          const items = (resp && resp.success) ? resp.data : [];
          const opts = ['<option value="">— Do not copy —</option>']
            .concat(items.map(r => `<option value="${r.id}">${r.name}</option>`));
          $sel.html(opts.join('')).prop('disabled', false);
        }).fail(() => {
          $sel.html('<option value="">— Do not copy —</option>').prop('disabled', false);
        });
      }
    });

    $(document).on('submit', '#addRoleForm', function(e){
      e.preventDefault();
      const name = $('#newRoleName').val().trim();
      const guard_name = ($('#newRoleGuard').val()||'').trim();
  const description = ($('#newRoleDescription').val()||'').trim();
  const _cf = $('#copyFromRole').val();
  const copy_from_role_id = _cf ? parseInt(_cf, 10) : null;
      if (!name) { $('#newRoleName')[0].reportValidity?.(); return; }
      const $btn = $(this).find('button[type=submit]').prop('disabled', true);
      $.post('{{ route('system-administration.manage-users.roles.create') }}', { name, guard_name, description, copy_from_role_id }).done(resp => {
        if (resp && resp.success) {
          // reload roles and select the new one
          $.get(routes.roles, { current_company_only: true }).done(r2 => {
            if (r2 && r2.success) {
              renderRoles(r2.data);
              setTimeout(() => {
                const $created = $rolesList.find(`.role-item[data-id='${resp.data.id}']`);
                if ($created.length) { $('.role-item').removeClass('active'); $created.addClass('active'); currentRoleId = resp.data.id; loadMatrix(); }
              }, 50);
            }
          });
        }
      }).fail(xhr => {
        // Optional error handling
      }).always(() => { $btn.prop('disabled', false); $('[data-bs-dismiss="offcanvas"]').trigger('click'); });
    });

    // Init
    loadRoles('');

    function recalcHeights(){
      const viewport = window.innerHeight || document.documentElement.clientHeight;
      const footerH = $card.find('.sticky-bottom-footer').outerHeight(true) || 0;
      const topRoles = $rolesList.offset() ? $rolesList.offset().top : 0;
      const topMatrix = $matrixScroll.offset() ? $matrixScroll.offset().top : 0;
      const pad = 12;
      const hRoles = Math.max(200, viewport - footerH - topRoles - pad);
      const hMatrix = Math.max(240, viewport - footerH - topMatrix - pad);
      $rolesList.css({ height: hRoles + 'px', 'max-height': hRoles + 'px', 'min-height': '200px' });
      $matrixScroll.css({ height: hMatrix + 'px', 'max-height': hMatrix + 'px', 'min-height': '240px', 'padding-bottom': '8px' });
    }

    window.addEventListener('load', recalcHeights);
    window.addEventListener('resize', recalcHeights);
    $(document).ajaxComplete(function(){ setTimeout(recalcHeights, 10); });
    recalcHeights();
  })();
 </script>
@endpush