@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">
    <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>
      </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-falcon-default btn-sm" type="button" data-bs-toggle="collapse" data-bs-target="#rpmFilters">
            <span class="fas fa-filter" data-fa-transform="shrink-3 down-2"></span>
            <span class="d-none d-sm-inline-block ms-1">Filter</span>
          </button>
          <button class="btn btn-falcon-default btn-sm" type="button" id="expandAll"><span class="fas fa-plus-square me-1"></span>Expand</button>
          <button class="btn btn-falcon-default btn-sm" type="button" id="collapseAll"><span class="fas fa-minus-square me-1"></span>Collapse</button>
        </div>
      </div>
    </div>
  </div>

  <!-- Advanced Filters (Collapsible) -->
  <div class="collapse" id="rpmFilters">
    <div class="card-body border-top py-0">
       <form id="rpmFilterForm" class="row gy-2 gx-2 align-items-end">
        <div class="col-12 col-lg-4">
          <label for="permSearch" class="form-label small text-700 mb-1">Search</label>
          <input type="text" id="permSearch" class="form-control form-control-sm" placeholder="Search permissions/modules">
        </div>
        
        <div class="col-12 col-lg-2">
          <div class="form-check form-check-sm mt-4">
            <input class="form-check-input" type="checkbox" id="toggleAssignedOnly">
            <label class="form-check-label" for="toggleAssignedOnly">Assigned only</label>
          </div>
        </div>
  <div class="col-12 d-flex align-items-center justify-content-end pt-2 border-top border-bottom pb-2">
          <div class="d-flex align-items-center">
            <span id="moduleSelectionStatus" class="text-muted small me-3">No modules selected</span>
            <button class="btn btn-falcon-default btn-sm" id="rpm-clear-filters" type="button">Clear</button>
          </div>
        </div>
      </form>
    </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: 260px;" 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: 300px;" id="moduleFilter">
                        <input type="text" class="form-control form-control-sm mb-2" id="moduleFilterSearch" placeholder="Search modules">
                        <div class="scrollbar" style="max-height: 240px; overflow:auto;">
                          <div id="moduleFilterList"><!-- dynamic checkboxes --></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" 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" 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" 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" 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" 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" 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; }
  /* Align the module-row 'All' toggle with other permission controls */
  #matrixBody .module-master .form-check { 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; }
  /* 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; }
  /* Roles list item styles */
  #rolesList .role-item { cursor: pointer; border-left: 3px solid transparent; transition: background-color .15s ease, border-color .15s ease; }
  #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); }
  .module-master .form-check-input { transform: scale(0.95); }
  .action-cell .form-check-input { transform: scale(0.95); }
  /* Make module labels look enabled inside the dropdown */
  /* Make dropdown labels dark grey for better readability */
  #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; }
  /* Improve role active state: readable text and primary accent */
  #rolesList .role-item.active .fw-semibold { color: var(--bs-primary); }
  #rolesList .role-item.active .text-muted { color: var(--bs-secondary-color) !important; }
  /* Compact chips */
  #moduleChips .badge { padding: 0.2rem 0.35rem; font-size: 0.72rem; border-radius: 0.35rem; background-color: var(--bs-primary) !important; color: #fff !important; }
  #moduleChips .badge .btn { color: inherit; opacity: 0.9; }
  #moduleChips .badge .btn:hover { opacity: 1; }
</style>
@endpush

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

    let currentRoleId = null;

    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 => `
        <div class="p-2 border-bottom role-item" data-id="${r.id}">
          <div class="fw-semibold">${r.name}</div>
          <div class="small text-muted">${r.guard_name || ''}</div>
        </div>`).join('');
      $rolesList.html(`<div class="scrollbar">${html}</div>`);
      // Auto-select first role and load matrix
      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 }).done(resp => {
        if (resp && resp.success) { renderRoles(resp.data); }
        else { renderRoles([]); }
      }).fail(() => renderRoles([]));
    }

    function renderMatrix(rows){
      const $tbody = $('#matrixBody');
      if (!rows || !rows.length) {
        $tbody.html('<tr><td colspan="7" class="text-center py-4 text-muted">No permissions for selection</td></tr>');
        return;
      }
      const actions = ['view','create','update','delete','export','manage'];
      const html = rows.map(m => {
        const cells = actions.map(a => {
          const p = (m.permissions||{})[a]||{};
          const checked = p.assigned ? 'checked' : '';
          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="${p.id||''}" ${checked}></div></td>`;
        }).join('');
        return `<tr class="module-row"><td>${m.module_label}</td>${cells}</tr>`;
      }).join('');
      $tbody.html(html);
    }

    function loadMatrix(){
      if (!currentRoleId) { return; }
      const params = {
        role_id: currentRoleId,
        search: $('#permSearch').val()||'',
        modules: [],
        show_assigned_only: $('#toggleAssignedOnly').is(':checked')
      };
      $('#card_loader').removeClass('d-none');
      $.get(routes.data, params).done(resp => {
        if (resp && resp.success) { renderMatrix(resp.data.data); }
        else { renderMatrix([]); }
      }).fail(() => renderMatrix([])).always(() => $('#card_loader').addClass('d-none'));
    }

    // 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;
      loadMatrix();
    });
    $('#permSearch').on('input', function(){ loadMatrix(); });
    $('#toggleAssignedOnly').on('change', function(){ loadMatrix(); });

    // 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);
      // Set fixed heights so containers remain static and do not overlap the footer
      $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);

    // Recalc when filters open/close
    $filters.on('shown.bs.collapse hidden.bs.collapse', function(){
      setTimeout(recalcHeights, 10);
    });

    // Recalc when Apply is clicked (matrix content changes after fetch)
    $(document).on('click', '#applyModuleFilter', function(){
      setTimeout(recalcHeights, 50);
    });

    // Recalc after any AJAX completes (role change, matrix fetch, etc.)
    if ($.ajax) {
      $(document).ajaxComplete(function(){
        setTimeout(recalcHeights, 10);
      });
    }

    // 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');
    });
    $moduleDropdown.on('hide.bs.dropdown', function(){
      $matrixScroll.css('overflow', 'auto');
    });

    recalcHeights();
  })();
 </script>
@endpush