@extends('layouts.master') @section('title') roles @endsection @section('css')
<link href="{{URL::asset('assets/js/datatables/datatables.min.css')}}" rel="stylesheet" type="text/css" />
<link href="{{URL::asset('assets/css/datatable-custom.css')}}" rel="stylesheet" type="text/css" />
@endsection @section('content') 
{{-- @component('components.breadcrumb') @slot('li_1') Clients @endslot @slot('title') Messages @endslot @endcomponent  --}}
<div class="page-title-box d-sm-flex align-items-center justify-content-between">
   <h4 class="mb-sm-0 font-size-18">Roles</h4>
   <div class="page-title-right">
      <ol class="breadcrumb m-0">
         <li class="breadcrumb-item"><a href="{{ route('admin.index') }}">Admin</a></li>
         <li class="breadcrumb-item active"><a href="{{ route('admin.role.index') }}">Roles</a></li>
      </ol>
   </div>
</div>
<div class="row">
   <div class="col-lg-12">
      {{-- Session Alerts --}}
      @if (session('status'))
      <div class="alert alert-success alert-dismissible fade show d-flex align-items-center" role="alert">
         <i class="ri-check-double-line fs-4 text-success me-2"></i>
         <div>
            <strong>Success:</strong> {{ session('status') }}
         </div>
         <button type="button" class="btn-close ms-auto" data-bs-dismiss="alert" aria-label="Close"></button>
      </div>
      @endif
      @if (session('error'))
      <div class="alert alert-danger alert-dismissible fade show d-flex align-items-center" role="alert">
         <i class="ri-error-warning-line fs-4 text-danger me-2"></i>
         <div>
            <strong>Failed:</strong> {!! session('error') !!}
         </div>
         <button type="button" class="btn-close ms-auto" data-bs-dismiss="alert" aria-label="Close"></button>
      </div>
      @endif
      {{-- Toolbar --}}
      <div class="d-flex justify-content-end mb-4">
         <button type="button" class="btn btn-soft-info rounded-pill" data-bs-toggle="modal" data-bs-target="#createRoleModal">
         <i class="ri-add-line align-bottom me-1"></i> Create New Role
         </button>
      </div>
      {{-- Role Cards --}}
      <div class="row g-3 mb-4">
         @foreach ($roles as $role)
         <div class="col-12 col-md-6 col-lg-4">
            <div class="card h-100 shadow-sm rounded-3 border-0 hover-shadow transition">
               {{-- Floating Dropdown --}}
               @if ($role->name !== 'super-admin' || $role->id !== 1)
               <div class="position-absolute top-0 end-0 m-2">
                  <div class="dropdown">
                     <button class="btn btn-light btn-sm rounded-circle shadow-sm" type="button" data-bs-toggle="dropdown">
                     <i class="ri-more-2-line"></i>
                     </button>
                     <ul class="dropdown-menu dropdown-menu-end">
                        <li>
                           <a href="#" class="dropdown-item text-info" data-bs-toggle="modal" data-bs-target="#editRoleModal{{ $role->id }}">
                           <i class="ri-pencil-line me-1"></i> Edit Role
                           </a>
                        </li>
                        <li>
                           <a href="#deleteItem" class="dropdown-item text-danger" data-bs-toggle="modal" data-id="{{ $role->id }}" data-title="{{ $role->name }}">
                           <i class="ri-delete-bin-line me-1"></i> Delete Role
                           </a>
                        </li>
                     </ul>
                  </div>
               </div>
               @endif
               <div class="card-body text-center d-flex flex-column justify-content-between">
                  {{-- Role Icon and Name --}}
                  <div class="mb-3 text-center">
                     <i class="ri-shield-user-line fs-2 text-info mb-2"></i>
                     <h5 class="fw-bold text-dark mb-1">{{ $role->name }}</h5>
                     <span class="badge bg-soft-info text-info fw-medium rounded-pill px-3 p-2">
                     <i class="ri-group-line me-1"></i> 
                     {{ $role->users->count() }} {{ Str::plural('User', $role->users->count()) }}
                     </span>
                  </div>
                  {{-- Action Buttons --}}
                  <div class="d-grid gap-2 mt-auto">
                     <button type="button" class="btn btn-soft-info btn-sm w-100 rounded-pill" data-bs-toggle="modal" data-bs-target="#permissionsModal{{ $role->id }}">
                     <i class="ri-eye-line me-1"></i> View Permissions
                     </button>
                     @if ($role->name !== 'super-admin' || $role->id !== 1)
                     <div class="d-flex gap-2">
                        <button class="btn btn-outline-info btn-sm w-100 rounded-pill" data-bs-toggle="modal" data-bs-target="#editRoleModal{{ $role->id }}">
                        <i class="ri-pencil-line me-1"></i> Edit
                        </button>
                        <button class="btn btn-outline-danger btn-sm w-100 rounded-pill" data-bs-toggle="modal" data-id="{{ $role->id }}" data-title="{{ $role->name }}" href="#deleteItem">
                        <i class="ri-delete-bin-line me-1"></i> Delete
                        </button>
                     </div>
                     @endif
                  </div>
               </div>
            </div>
         </div>
         @endforeach
      </div>
      {{-- Modals --}}
      @foreach ($roles as $role)
      @include('admin.partials.permissions-modal', ['role' => $role])
      @include('admin.partials.edit-role-modal', ['role' => $role])
      @endforeach
   </div>
   <!--end col-->
</div>
<!-- Create Modal -->
<div class="modal fade" id="createRoleModal" tabindex="-1" aria-labelledby="createRoleModalLabel" aria-hidden="true">
   <div class="modal-dialog modal-dialog-centered modal-lg">
      <div class="modal-content rounded-3 shadow-lg">
         <!-- Header -->
         <div class="modal-header p-3 bg-soft-info rounded-top">
            <h5 class="modal-title fw-bold mb-0" id="createRoleModalLabel">
               <i class="ri-shield-user-line me-2"></i> Create New Role
            </h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
         </div>
         <form action="{{ route('admin.role.create') }}" method="POST">
            @csrf
            <div class="modal-body px-3 py-3">
               <!-- Role Name Section -->
               <div class="mb-4">
                  <label for="roleName" class="form-label fw-semibold fs-6 text-muted">Role Name</label>
                  <input type="text" 
                     name="role" 
                     class="form-control form-control-md rounded shadow-sm @error('role') is-invalid @enderror" 
                     id="roleName" 
                     placeholder="Enter role name" 
                     value="{{ old('role') }}">
                  @error('role')
                  <div class="invalid-feedback">{{ $message }}</div>
                  @enderror
               </div>
               <!-- Permissions Section -->
               <div class="d-flex justify-content-between align-items-center mb-3">
                  <h5 class="text-info fw-bold mb-0">Permissions</h5>
                  <div class="form-check form-switch">
                     <input class="form-check-input" type="checkbox" id="select-all-permissions">
                     <label class="form-check-label fw-semibold small" for="select-all-permissions">Select All</label>
                  </div>
               </div>
               <div class="row g-3">
                  @foreach ($permissions as $group => $groupPermissions)
                  <div class="col-12 col-md-6">
                     <div class="card bg-light-subtle border rounded-2 shadow-sm h-100">
                        <div class="card-header py-2 px-3 bg-soft-info d-flex justify-content-between align-items-center">
                           <h6 class="fw-bold text-info small mb-0">
                              <i class="ri-folder-3-line me-1"></i> {{ $group }}
                           </h6>
                           <div class="form-check form-switch">
                              <input class="form-check-input group-select" type="checkbox" id="select-group-{{ Str::slug($group) }}">
                           </div>
                        </div>
                        <div class="card-body p-3">
                           @foreach ($groupPermissions as $permission)
                           <div class="form-check form-switch mb-2">
                              <input class="form-check-input current-modal-permission group-{{ Str::slug($group) }}" 
                              type="checkbox" 
                              id="{{ Str::slug($permission) }}" 
                              name="permissions[]" 
                              value="{{ $permission }}" 
                              @if (is_array(old('permissions')) && in_array($permission, old('permissions'))) checked @endif>
                              <label class="form-check-label small fw-medium text-muted" for="{{ Str::slug($permission) }}">
                              {{ ucwords(str_replace(['_', '-'], ' ', $permission)) }}
                              </label>
                           </div>
                           @endforeach
                        </div>
                     </div>
                  </div>
                  @endforeach
               </div>
               @error('permissions')
               <div class="text-danger mt-3 small">{{ $message }}</div>
               @enderror
            </div>
            <!-- Footer -->
            <div class="modal-footer bg-light rounded-bottom p-3">
               <div class="w-100 d-flex flex-column flex-md-row gap-2">
                  <button type="button" class="btn btn-soft-danger w-100 rounded-pill" data-bs-dismiss="modal">
                  <i class="ri-close-line me-1"></i> Close
                  </button>
                  <button type="submit" class="btn btn-soft-info w-100 rounded-pill">
                  <i class="ri-save-line me-1"></i> Save Role
                  </button>
               </div>
            </div>
         </form>
      </div>
   </div>
</div>
<!-- Modal delete -->
<div class="modal fade flip" id="deleteItem" tabindex="-1" aria-hidden="true">
   <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
         <div class="modal-body p-5 text-center">
            <lord-icon src="https://cdn.lordicon.com/gsqxdxog.json" trigger="loop" colors="primary:#405189,secondary:#f06548" style="width: 90px; height: 90px;"></lord-icon>
            <div class="mt-4 text-center">
               <h4>You are about to delete <span class="modal-title"></span>!</h4>
               <p class="text-muted fs-15 mb-4">Deleting a role will remove all of the information from the database.</p>
               <div class="hstack gap-2 justify-content-center remove">
                  <button class="btn btn-link link-success fw-medium text-decoration-none" data-bs-dismiss="modal"><i class="ri-close-line me-1 align-middle"></i> Close</button>
                  <form action="{{ route('admin.role.destroy') }}" method="POST"> 
                     @csrf
                     @method('delete')
                     <input type="hidden" name="id" id="id" />
                     <button type="submit" class="btn btn-danger">Yes delete</button>
                  </form>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>
<!--end row-->
@endsection @section('script')
<script src="{{ URL::asset('/assets/js/jquery-3.6.1.js')}}"></script>
<script src="{{ URL::asset('/assets/js/datatables/datatables.min.js') }}"></script>
<script src="{{ URL::asset('/assets/js/app.min.js') }}"></script>
<script>
   $(document).ready(function () {
       // Show Create Role Modal on Validation Error
       @if (count($errors) > 0 && $errors->has('role'))
           $("#createRoleModal").modal("show");
       @endif
   
       // Initialize DataTable
       $('#datatable').DataTable({
           responsive: true,
           deferRender: true,
           paging: false,
           searching: false,
           info: false,
           ordering: false,
       });
   
       // Handle "Select All" for Create Role Modal (Global)
   const selectAllCreate = document.getElementById('select-all-permissions');
   if (selectAllCreate) {
    selectAllCreate.addEventListener('change', function () {
        const checkboxes = document.querySelectorAll('.current-modal-permission');
        checkboxes.forEach(cb => cb.checked = this.checked);
    });
   }
   
   // Handle "Select All" for Edit Role Modals Dynamically (Global per Role)
   document.querySelectorAll('[id^="select-all-permissions-"]').forEach(selectAllCheckbox => {
    selectAllCheckbox.addEventListener('change', function () {
        const roleId = this.id.replace('select-all-permissions-', '');
        const checkboxes = document.querySelectorAll(`.current-modal-permission.role-${roleId}`);
        checkboxes.forEach(cb => cb.checked = this.checked);
    });
   });
   
   // ✅ Handle Group "Select All" Toggles (Works for Both Create and Edit Modals)
   document.querySelectorAll('.group-select').forEach(groupSelect => {
    groupSelect.addEventListener('change', function () {
        const parts = this.id.split('-');
        // If format is: select-group-groupName-roleId
        const groupIndex = parts.indexOf('group');
        const groupName = parts[groupIndex + 1];
        const roleId = parts[groupIndex + 2] || null;
   
        const selector = roleId 
            ? `.current-modal-permission.role-${roleId}.group-${groupName}` 
            : `.current-modal-permission.group-${groupName}`;
   
        const checkboxes = document.querySelectorAll(selector);
        checkboxes.forEach(cb => cb.checked = this.checked);
    });
   });
   
       // Optional: Show Delete Modal and Pass Data
       $('#deleteItem').on('show.bs.modal', function(event) {
           const button = $(event.relatedTarget);
           const title = button.data('title');
           const id = button.data('id');
           const modal = $(this);
           modal.find('.modal-title').text(title);
           modal.find('.modal-body #id').val(id);
       });
   });
</script>
@endsection