@extends('contentNavbarLayout')

@section('title', 'Manage Permissions - ' . $role->name)

@section('content')
<div class="container">
  <div class="d-flex justify-content-between align-items-center mb-4">
    <div>
      <h4 class="mb-1">Manage Permissions</h4>
      <p class="text-muted mb-0">Role: <strong>{{ $role->name }}</strong></p>
    </div>
    <a href="{{ route('roles.index') }}" class="btn btn-secondary">
      <i class="mdi mdi-arrow-left"></i> Back to Roles
    </a>
  </div>

  {{-- Flash Message --}}
  @if(session('success'))
    <div class="alert alert-success alert-dismissible fade show" role="alert">
      <i class="mdi mdi-check-circle-outline me-1"></i>
      {{ session('success') }}
      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
  @endif

  {{-- Error Messages --}}
  @if ($errors->any())
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
      <i class="mdi mdi-alert-circle-outline me-1"></i>
      <strong>Whoops!</strong> Please fix the following:
      <ul class="mb-0 mt-1 ps-3">
        @foreach ($errors->all() as $error)
          <li>{{ $error }}</li>
        @endforeach
      </ul>
      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
  @endif

  <form action="{{ route('roles.save-permissions', $role->id) }}" method="POST">
    @csrf

    <div class="card">
      <div class="card-body">
        <div class="accordion" id="permissionsAccordion">

          {{-- 1. Document Management --}}
          <div class="accordion-item">
            <h2 class="accordion-header" id="headingDocument">
              <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseDocument" aria-expanded="true" aria-controls="collapseDocument">
                <i class="mdi mdi-file-document me-2"></i> 1. Document Management
              </button>
            </h2>
            <div id="collapseDocument" class="accordion-collapse collapse show" aria-labelledby="headingDocument" data-bs-parent="#permissionsAccordion">
              <div class="accordion-body">
                {{-- Search Subsection --}}
                <div class="mb-4">
                  <h6 class="text-primary mb-3">
                    <i class="mdi mdi-magnify me-1"></i> Search
                  </h6>
                  @if($groupedPermissions['document']['subsections']['search']['permissions']->count() > 0)
                    <div class="table-responsive">
                      <table class="table table-sm">
                        <tbody>
                          @foreach($groupedPermissions['document']['subsections']['search']['permissions'] as $permission)
                            <tr>
                              <td style="width: 30px; text-align: left; vertical-align: middle;">
                                <input type="checkbox" 
                                       class="form-check-input permission-checkbox document-search-permission" 
                                       name="permissions[]" 
                                       value="{{ $permission->id }}"
                                       {{ isset($rolePermissions[$permission->id]) ? 'checked' : '' }}>
                              </td>
                              <td style="text-align: left; vertical-align: middle;">
                                <label class="form-check-label">
                                  {{ ucwords(str_replace('.', ' ', str_replace('document.search.', '', $permission->name))) }}
                                </label>
                              </td>
                            </tr>
                          @endforeach
                        </tbody>
                      </table>
                    </div>
                  @endif
                </div>

                {{-- Records Subsection --}}
                <div>
                  <h6 class="text-primary mb-3">
                    <i class="mdi mdi-file-multiple me-1"></i> Records
                  </h6>
                  @if($groupedPermissions['document']['subsections']['records']['permissions']->count() > 0)
                    <div class="table-responsive">
                      <table class="table table-sm">
                        <tbody>
                          @foreach($groupedPermissions['document']['subsections']['records']['permissions'] as $permission)
                            <tr>
                              <td style="width: 30px; text-align: left; vertical-align: middle;">
                                <input type="checkbox" 
                                       class="form-check-input permission-checkbox document-records-permission" 
                                       name="permissions[]" 
                                       value="{{ $permission->id }}"
                                       {{ isset($rolePermissions[$permission->id]) ? 'checked' : '' }}>
                              </td>
                              <td style="text-align: left; vertical-align: middle;">
                                <label class="form-check-label">
                                  @php
                                    $label = str_replace('document.records.', '', $permission->name);
                                    $label = ucwords(str_replace('_', ' ', $label));
                                  @endphp
                                  {{ $label }}
                                </label>
                              </td>
                            </tr>
                          @endforeach
                        </tbody>
                      </table>
                    </div>
                  @endif
                </div>

                {{-- Bulk Upload Subsection --}}
                <div class="mb-4">
                  <h6 class="text-primary mb-3">
                    <i class="mdi mdi-cloud-upload-outline me-1"></i> Bulk Upload
                  </h6>
                  @if($groupedPermissions['document']['subsections']['bulkupload']['permissions']->count() > 0)
                    <div class="table-responsive">
                      <table class="table table-sm">
                        <tbody>
                          @foreach($groupedPermissions['document']['subsections']['bulkupload']['permissions'] as $permission)
                            <tr>
                              <td style="width: 30px; text-align: left; vertical-align: middle;">
                                <input type="checkbox" 
                                       class="form-check-input permission-checkbox document-bulkupload-permission" 
                                       name="permissions[]" 
                                       value="{{ $permission->id }}"
                                       {{ isset($rolePermissions[$permission->id]) ? 'checked' : '' }}>
                              </td>
                              <td style="text-align: left; vertical-align: middle;">
                                <label class="form-check-label">
                                  @php
                                    $label = str_replace('document.bulkupload.', '', $permission->name);
                                    $label = str_replace('_', ' ', $label);
                                    $label = ucwords($label);
                                  @endphp
                                  {{ $label }}
                                </label>
                              </td>
                            </tr>
                          @endforeach
                        </tbody>
                      </table>
                    </div>
                  @endif
                </div>

                {{-- Paired Bulk Upload Subsection --}}
                <div>
                  <h6 class="text-primary mb-3">
                    <i class="mdi mdi-file-document-multiple-outline me-1"></i> Paired Bulk Upload
                  </h6>
                  @if($groupedPermissions['document']['subsections']['pairedbulkupload']['permissions']->count() > 0)
                    <div class="table-responsive">
                      <table class="table table-sm">
                        <tbody>
                          @foreach($groupedPermissions['document']['subsections']['pairedbulkupload']['permissions'] as $permission)
                            <tr>
                              <td style="width: 30px; text-align: left; vertical-align: middle;">
                                <input type="checkbox" 
                                       class="form-check-input permission-checkbox document-pairedbulkupload-permission" 
                                       name="permissions[]" 
                                       value="{{ $permission->id }}"
                                       {{ isset($rolePermissions[$permission->id]) ? 'checked' : '' }}>
                              </td>
                              <td style="text-align: left; vertical-align: middle;">
                                <label class="form-check-label">
                                  @php
                                    $label = str_replace('document.pairedbulkupload.', '', $permission->name);
                                    $label = str_replace('_', ' ', $label);
                                    $label = ucwords($label);
                                  @endphp
                                  {{ $label }}
                                </label>
                              </td>
                            </tr>
                          @endforeach
                        </tbody>
                      </table>
                    </div>
                  @endif
                </div>
              </div>
            </div>
          </div>

          {{-- 2. System Administration --}}
          <div class="accordion-item">
            <h2 class="accordion-header" id="headingSystem">
              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseSystem" aria-expanded="false" aria-controls="collapseSystem">
                <i class="mdi mdi-cog me-2"></i> 2. System Administration
              </button>
            </h2>
            <div id="collapseSystem" class="accordion-collapse collapse" aria-labelledby="headingSystem" data-bs-parent="#permissionsAccordion">
              <div class="accordion-body">
                
                {{-- 3.1 Record Types - Type Management --}}
                <div class="mb-4">
                  <h6 class="text-primary mb-3">
                    <i class="mdi mdi-file-tree me-1"></i> Record Types - Type Management
                  </h6>
                  @if($groupedPermissions['system']['subsections']['recordtypes_type']['permissions']->count() > 0)
                    <div class="table-responsive">
                      <table class="table table-sm">
                        <tbody>
                          @foreach($groupedPermissions['system']['subsections']['recordtypes_type']['permissions'] as $permission)
                            <tr>
                              <td style="width: 30px; text-align: left; vertical-align: middle;">
                                <input type="checkbox" 
                                       class="form-check-input permission-checkbox system-recordtypes-type-permission" 
                                       name="permissions[]" 
                                       value="{{ $permission->id }}"
                                       {{ isset($rolePermissions[$permission->id]) ? 'checked' : '' }}>
                              </td>
                              <td style="text-align: left; vertical-align: middle;">
                                <label class="form-check-label">
                                  @php
                                    $label = str_replace('system.recordtypes.type.', '', $permission->name);
                                    $label = str_replace('manage_properties', 'Manage Properties', $label);
                                    $label = ucwords(str_replace('_', ' ', $label));
                                  @endphp
                                  {{ $label }}
                                </label>
                              </td>
                            </tr>
                          @endforeach
                        </tbody>
                      </table>
                    </div>
                  @endif
                </div>

                {{-- 3.1 Record Types - Property Management --}}
                <div class="mb-4">
                  <h6 class="text-primary mb-3">
                    <i class="mdi mdi-format-list-bulleted me-1"></i> Record Types - Property Management
                  </h6>
                  @if($groupedPermissions['system']['subsections']['recordtypes_property']['permissions']->count() > 0)
                    <div class="table-responsive">
                      <table class="table table-sm">
                        <tbody>
                          @foreach($groupedPermissions['system']['subsections']['recordtypes_property']['permissions'] as $permission)
                            <tr>
                              <td style="width: 30px; text-align: left; vertical-align: middle;">
                                <input type="checkbox" 
                                       class="form-check-input permission-checkbox system-recordtypes-property-permission" 
                                       name="permissions[]" 
                                       value="{{ $permission->id }}"
                                       {{ isset($rolePermissions[$permission->id]) ? 'checked' : '' }}>
                              </td>
                              <td style="text-align: left; vertical-align: middle;">
                                <label class="form-check-label">
                                  @php
                                    $label = str_replace('system.recordtypes.property.', '', $permission->name);
                                    $label = ucwords(str_replace('_', ' ', $label));
                                  @endphp
                                  {{ $label }}
                                </label>
                              </td>
                            </tr>
                          @endforeach
                        </tbody>
                      </table>
                    </div>
                  @endif
                </div>

                {{-- 3.2 Access Control - User Management --}}
                <div class="mb-4">
                  <h6 class="text-primary mb-3">
                    <i class="mdi mdi-account-multiple me-1"></i> Access Control - User Management
                  </h6>
                  @if($groupedPermissions['system']['subsections']['accesscontrol_user']['permissions']->count() > 0)
                    <div class="table-responsive">
                      <table class="table table-sm">
                        <tbody>
                          @foreach($groupedPermissions['system']['subsections']['accesscontrol_user']['permissions'] as $permission)
                            <tr>
                              <td style="width: 30px; text-align: left; vertical-align: middle;">
                                <input type="checkbox" 
                                       class="form-check-input permission-checkbox system-accesscontrol-user-permission" 
                                       name="permissions[]" 
                                       value="{{ $permission->id }}"
                                       {{ isset($rolePermissions[$permission->id]) ? 'checked' : '' }}>
                              </td>
                              <td style="text-align: left; vertical-align: middle;">
                                <label class="form-check-label">
                                  @php
                                    $label = str_replace('system.accesscontrol.user.', '', $permission->name);
                                    $label = ucwords(str_replace('_', ' ', $label));
                                  @endphp
                                  {{ $label }}
                                </label>
                              </td>
                            </tr>
                          @endforeach
                        </tbody>
                      </table>
                    </div>
                  @endif
                </div>

                {{-- 3.2 Access Control - Role Management --}}
                <div class="mb-4">
                  <h6 class="text-primary mb-3">
                    <i class="mdi mdi-shield-account me-1"></i> Access Control - Role Management
                  </h6>
                  @if($groupedPermissions['system']['subsections']['accesscontrol_role']['permissions']->count() > 0)
                    <div class="table-responsive">
                      <table class="table table-sm">
                        <tbody>
                          @foreach($groupedPermissions['system']['subsections']['accesscontrol_role']['permissions'] as $permission)
                            <tr>
                              <td style="width: 30px; text-align: left; vertical-align: middle;">
                                <input type="checkbox" 
                                       class="form-check-input permission-checkbox system-accesscontrol-role-permission" 
                                       name="permissions[]" 
                                       value="{{ $permission->id }}"
                                       {{ isset($rolePermissions[$permission->id]) ? 'checked' : '' }}>
                              </td>
                              <td style="text-align: left; vertical-align: middle;">
                                <label class="form-check-label">
                                  {{ ucwords(str_replace('_', ' ', str_replace('.', ' ', str_replace('system.accesscontrol.role.', '', $permission->name)))) }}
                                </label>
                              </td>
                            </tr>
                          @endforeach
                        </tbody>
                      </table>
                    </div>
                  @endif
                </div>

                {{-- 3.3 Audit Trail --}}
                <div>
                  <h6 class="text-primary mb-3">
                    <i class="mdi mdi-history me-1"></i> Audit Trail
                  </h6>
                  @if($groupedPermissions['system']['subsections']['audit']['permissions']->count() > 0)
                    <div class="table-responsive">
                      <table class="table table-sm">
                        <tbody>
                          @foreach($groupedPermissions['system']['subsections']['audit']['permissions'] as $permission)
                            <tr>
                              <td style="width: 30px; text-align: left; vertical-align: middle;">
                                <input type="checkbox" 
                                       class="form-check-input permission-checkbox system-audit-permission" 
                                       name="permissions[]" 
                                       value="{{ $permission->id }}"
                                       {{ isset($rolePermissions[$permission->id]) ? 'checked' : '' }}>
                              </td>
                              <td style="text-align: left; vertical-align: middle;">
                                <label class="form-check-label">
                                  {{ ucwords(str_replace('.', ' ', str_replace('system.audit.', '', $permission->name))) }}
                                </label>
                              </td>
                            </tr>
                          @endforeach
                        </tbody>
                      </table>
                    </div>
                  @endif
                </div>

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

          {{-- 3. Archive --}}
          <div class="accordion-item">
            <h2 class="accordion-header" id="headingArchive">
              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseArchive" aria-expanded="false" aria-controls="collapseArchive">
                <i class="mdi mdi-archive me-2"></i> 3. Archive
              </button>
            </h2>
            <div id="collapseArchive" class="accordion-collapse collapse" aria-labelledby="headingArchive" data-bs-parent="#permissionsAccordion">
              <div class="accordion-body">
                @if($groupedPermissions['archive']['permissions']->count() > 0)
                  <div class="table-responsive">
                    <table class="table table-sm">
                      <tbody>
                        @foreach($groupedPermissions['archive']['permissions'] as $permission)
                          <tr>
                            <td style="width: 30px; text-align: left; vertical-align: middle;">
                              <input type="checkbox" 
                                     class="form-check-input permission-checkbox archive-permission" 
                                     name="permissions[]" 
                                     value="{{ $permission->id }}"
                                     {{ isset($rolePermissions[$permission->id]) ? 'checked' : '' }}>
                            </td>
                            <td style="text-align: left; vertical-align: middle;">
                              <label class="form-check-label">
                                {{ ucwords(str_replace('.', ' ', str_replace('archive.', '', $permission->name))) }}
                              </label>
                            </td>
                          </tr>
                        @endforeach
                      </tbody>
                    </table>
                  </div>
                @else
                  <p class="text-muted mb-0">No permissions available</p>
                @endif
              </div>
            </div>
          </div>

        </div>
      </div>

      <div class="card-footer d-flex justify-content-between">
        <a href="{{ route('roles.index') }}" class="btn btn-secondary">
          <i class="mdi mdi-arrow-left"></i> Cancel
        </a>
        <button type="submit" class="btn btn-primary">
          <i class="mdi mdi-content-save"></i> Save Permissions
        </button>
      </div>
    </div>
  </form>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
  // Select all for categories (Dashboard, Archive)
  document.querySelectorAll('.select-all-category').forEach(function(selectAllCheckbox) {
    selectAllCheckbox.addEventListener('change', function() {
      const category = this.getAttribute('data-category');
      const categoryCheckboxes = document.querySelectorAll('.' + category + '-permission');
      categoryCheckboxes.forEach(function(cb) {
        cb.checked = selectAllCheckbox.checked;
      });
    });
  });

  // Select all for subsections
  document.querySelectorAll('.select-all-subsection').forEach(function(selectAllCheckbox) {
    selectAllCheckbox.addEventListener('change', function() {
      const subsection = this.getAttribute('data-subsection');
      const subsectionCheckboxes = document.querySelectorAll('.' + subsection + '-permission');
      subsectionCheckboxes.forEach(function(cb) {
        cb.checked = selectAllCheckbox.checked;
      });
    });
  });
});
</script>
@endpush
@endsection