@extends('admin.admin_master')
@section('admin')

    @if ($errors->any())
        <div class="alert alert-danger alert-dismissible fade show shadow-sm border-0" role="alert">
            <div class="d-flex align-items-center">
                <div class="avatar-xs me-3">
                    <div class="avatar-title bg-danger text-white rounded-circle">
                        <i class="ri-error-warning-line font-size-16"></i>
                    </div>
                </div>
                <div class="flex-grow-1">
                    <h6 class="alert-heading mb-1 font-size-15">Validation Error!</h6>
                    <ul class="mb-0 font-size-13">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        </div>
    @endif

    @push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            if (@json($errors->any())) {
                var addRoleModal = new bootstrap.Modal(document.getElementById('addRoleModal'));
                addRoleModal.show();
            }
        });
    </script>
    @endpush
<div class="page-content">
    <div class="container-fluid">
        
        <!-- Success Alert -->
        @if(session('message'))
            <div class="alert alert-success alert-dismissible fade show shadow-sm border-0" role="alert">
                <div class="d-flex align-items-center">
                    <div class="avatar-xs me-3">
                        <div class="avatar-title bg-success text-white rounded-circle">
                            <i class="ri-check-line font-size-16"></i>
                        </div>
                    </div>
                    <div class="flex-grow-1">
                        <h6 class="alert-heading mb-1 font-size-15">Success!</h6>
                        <div class="font-size-13">{{ session('message') }}</div>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            </div>
        @endif

        <!-- Error Alert -->
        @if(session('error'))
            <div class="alert alert-danger alert-dismissible fade show shadow-sm border-0" role="alert">
                <div class="d-flex align-items-center">
                    <div class="avatar-xs me-3">
                        <div class="avatar-title bg-danger text-white rounded-circle">
                            <i class="ri-error-warning-line font-size-16"></i>
                        </div>
                    </div>
                    <div class="flex-grow-1">
                        <h6 class="alert-heading mb-1 font-size-15">Error!</h6>
                        <div class="font-size-13">{{ session('error') }}</div>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            </div>
        @endif

        <!-- Page Header -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="page-header-card">
                    <div class="page-header-content">
                        <div class="d-flex align-items-center justify-content-between">
                            <div class="d-flex align-items-center">
                                <div class="page-icon me-3">
                                    <div class="avatar-md">
                                        <div class="avatar-title bg-primary-subtle text-primary rounded-circle">
                                            <i class="ri-shield-user-line font-size-24"></i>
                                        </div>
                                    </div>
                                </div>
                                <div class="flex-grow-1">
                                    <h4 class="page-title mb-1">Role Management</h4>
                                    <p class="page-subtitle text-muted mb-0">
                                        Manage roles and permissions
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Roles Table Card -->
        <div class="row">
            <div class="col-12">
                <div class="card shadow-sm border-0">
                    <div class="card-body p-4">
                        <div class="d-flex justify-content-between align-items-center mb-4">
                            <div>
                                <h5 class="card-title font-size-16 mb-1">All Roles</h5>
                                <p class="card-title-desc text-muted mb-0 font-size-14">List of all roles with their permissions</p>
                            </div>
                            <div class="d-flex gap-2">
                                <button type="button" class="btn btn-outline-secondary btn-sm" onclick="location.reload()" data-bs-toggle="tooltip" title="Refresh Table">
                                    <i class="ri-refresh-line font-size-12"></i>
                                </button>
                                @can('Create Role')
                                <button type="button" class="btn btn-primary btn-sm d-flex align-items-center" data-bs-toggle="modal" data-bs-target="#addRoleModal" title="Add Role">
                                    <i class="ri-shield-user-add-line font-size-14 me-1"></i>
                                    <span>Add Role</span>
                                </button>
                                @endcan
                            </div>
                        </div>
                        
                        <div class="table-responsive mt-4">
                            <table class="table table-striped table-bordered dt-responsive nowrap w-100">
                                <thead class="table-light">
                                    <tr>
                                        <th>#</th>
                                        <th>Role Name</th>
                                        @canany(['Edit Role', 'Delete Role'])
                                        <th>Actions</th>
                                        @endcanany
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($roles as $key => $role)
                                    <tr>
                                        <td class="text-center">
                                            <span class="badge badge-soft-primary font-size-12">{{ $key + 1 }}</span>
                                        </td>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <div class="avatar-xs me-2">
                                                    <div class="avatar-title rounded-circle bg-soft-primary text-primary">
                                                        <i class="ri-shield-user-line font-size-16"></i>
                                                    </div>
                                                </div>
                                                <div>
                                                    <h6 class="mb-0 font-size-14">{{ $role->name }}</h6>
                                                </div>
                                            </div>
                                        </td>
                                        @canany(['Edit Role', 'Delete Role'])
                                        <td>
                                            <div class="d-flex gap-2 justify-content-center align-items-center">
                                                @can('Edit Role')
                                                <button class="btn btn-soft-warning btn-sm" 
                                                        data-bs-toggle="modal" 
                                                        data-bs-target="#editRoleModal"
                                                        onclick="setEditRole('{{ $role->id }}', '{{ $role->name }}', [{{ $role->permissions->pluck('id')->implode(',') }}])"
                                                        title="Edit Role">
                                                    <i class="ri-edit-line font-size-14"></i>
                                                </button>
                                                @endcan
                                                @can('Delete Role')
                                                <form action="{{ route('roles.destroy', $role->id) }}" method="POST" style="display: flex; align-items: center; margin: 0; padding: 0; background: none; border: none;">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="submit" class="btn btn-soft-danger btn-sm" 
                                                            onclick="return confirm('Are you sure you want to delete this role?')" 
                                                            title="Delete Role">
                                                        <i class="ri-delete-bin-line font-size-14"></i>
                                                    </button>
                                                </form>
                                                @endcan
                                            </div>
                                        </td>
                                        @endcanany
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Add Role Modal -->
        <div class="modal fade" id="addRoleModal" tabindex="-1" aria-labelledby="addRoleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg modal-dialog-centered">
                <div class="modal-content border-0 shadow">
                    <form action="{{ route('roles.store') }}" method="POST">
                        @csrf
                        <div class="modal-header" style="background-color: #0069A7; color: #ffffff;">
                            <h5 class="modal-title mb-0" id="addRoleModalLabel">
                                <i class="ri-shield-user-add-line me-2"></i> Add New Role
                            </h5>
                            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <div class="row g-4">
                                <div class="col-md-12">
                                    <div class="mb-4">
                                        <label class="form-label">Role Name</label>
                                        <input type="text" name="name" class="form-control @error('name') is-invalid @enderror" required placeholder="Enter role name" value="{{ old('name') }}">
                                        @error('name')
                                            <span class="invalid-feedback d-block" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="mb-3">
                                        <label class="form-label">Permissions</label>
                                        <div class="border rounded p-3" style="max-height: 400px; overflow-y: auto;">
                                            <div class="form-check mb-3">
                                                <input type="checkbox" id="selectAllPermissions" class="form-check-input">
                                                <label class="form-check-label fw-bold" for="selectAllPermissions">
                                                    <i class="ri-check-double-line me-1"></i>Select All Permissions
                                                </label>
                                            </div>
                                            <hr>
                                            
                                            <!-- 1. Dashboard Permissions Section -->
                                            <div class="permission-category mb-4">
                                                <div class="d-flex align-items-center mb-3">
                                                    <div class="form-check me-3">
                                                        <input type="checkbox" id="selectAllDashboardPermissions" class="form-check-input category-checkbox">
                                                        <label class="form-check-label fw-bold text-success" for="selectAllDashboardPermissions">
                                                            <i class="ri-dashboard-line me-1"></i>Dashboard
                                                        </label>
                                                    </div>
                                                </div>
                                                <div class="row ms-3">
                                                    @foreach($permissions as $permission)
                                                        @if(in_array($permission->name, ['Access Dashboard']))
                                                            <div class="col-md-6 mb-2">
                                                                <div class="form-check">
                                                                    <input type="checkbox" name="permissions[]" value="{{ $permission->id }}" class="form-check-input permission-checkbox dashboard-permission" id="perm_{{ $permission->id }}">
                                                                    <label class="form-check-label" for="perm_{{ $permission->id }}">
                                                                        <i class="ri-home-4-line me-1"></i>{{ $permission->name }}
                                                                    </label>
                                                                </div>
                                                            </div>
                                                        @endif
                                                    @endforeach
                                                </div>
                                            </div>

                                            <!-- 2. My Folders Permissions Section -->
                                            <div class="permission-category mb-4">
                                                <div class="d-flex align-items-center mb-3">
                                                    <div class="form-check me-3">
                                                        <input type="checkbox" id="selectAllMyFolderPermissions" class="form-check-input category-checkbox">
                                                        <label class="form-check-label fw-bold text-info" for="selectAllMyFolderPermissions">
                                                            <i class="ri-folder-user-line me-1"></i>My Folders
                                                        </label>
                                                    </div>
                                                </div>
                                                <div class="row ms-3">
                                                    @foreach($permissions as $permission)
                                                        @if(in_array($permission->name, ['Access Shared Folders', 'Create My Folder', 'View My Folder', 'Share My Folder', 'Delete My Folder', 'Edit My Folder', 'Upload My Files', 'Download My Files', 'Delete My Files', 'View My Folder Info']))
                                                            <div class="col-md-6 mb-2">
                                                                <div class="form-check">
                                                                    <input type="checkbox" name="permissions[]" value="{{ $permission->id }}" class="form-check-input permission-checkbox my-folder-permission" id="perm_{{ $permission->id }}">
                                                                    <label class="form-check-label" for="perm_{{ $permission->id }}">
                                                                      {{ $permission->name }}
                                                                    </label>
                                                                </div>
                                                            </div>
                                                        @endif
                                                    @endforeach
                                                </div>
                                            </div>

                                            <!-- 3. Workflows Permissions Section -->
                                            <div class="permission-category mb-4">
                                                <div class="d-flex align-items-center mb-3">
                                                    <div class="form-check me-3">
                                                        <input type="checkbox" id="selectAllWorkflowPermissions" class="form-check-input category-checkbox">
                                                        <label class="form-check-label fw-bold text-primary" for="selectAllWorkflowPermissions">
                                                            <i class="ri-git-merge-line me-1"></i>Workflows
                                                        </label>
                                                    </div>
                                                </div>
                                                <div class="row ms-3">
                                                    @foreach($permissions as $permission)
                                                        @if(in_array(strtolower($permission->name), ['view workflows', 'create workflows', 'edit workflows', 'delete workflows', 'execute workflows', 'my workflows']))
                                                            <div class="col-md-6 mb-2">
                                                                <div class="form-check">
                                                                    <input type="checkbox" name="permissions[]" value="{{ $permission->id }}" class="form-check-input permission-checkbox workflow-permission" id="perm_{{ $permission->id }}">
                                                                    <label class="form-check-label" for="perm_{{ $permission->id }}">
                                                                      {{ $permission->name }}
                                                                    </label>
                                                                </div>
                                                            </div>
                                                        @endif
                                                    @endforeach
                                                </div>
                                            </div>

                                            <!-- 4. Folder Management Permissions Section -->
                                            <div class="permission-category mb-4">
                                                <div class="d-flex align-items-center mb-3">
                                                    <div class="form-check me-3">
                                                        <input type="checkbox" id="selectAllFolderPermissions" class="form-check-input category-checkbox">
                                                        <label class="form-check-label fw-bold text-warning" for="selectAllFolderPermissions">
                                                            <i class="ri-folder-settings-line me-1"></i>Folder
                                                        </label>
                                                    </div>
                                                </div>
                                                <div class="row ms-3">
                                                    @foreach($permissions as $permission)
                                                        @if(in_array($permission->name, ['Create Folder', 'View Folder', 'Share Folder', 'Delete Folder', 'Manage Folder Permissions', 'View Folder Contents']))
                                                            <div class="col-md-6 mb-2">
                                                                <div class="form-check">
                                                                    <input type="checkbox" name="permissions[]" value="{{ $permission->id }}" class="form-check-input permission-checkbox folder-permission" id="perm_{{ $permission->id }}">
                                                                    <label class="form-check-label" for="perm_{{ $permission->id }}">
                                                                      {{ $permission->name }}
                                                                    </label>
                                                                </div>
                                                            </div>
                                                        @endif
                                                    @endforeach
                                                </div>
                                            </div>

                                            <!-- 5. User Management Permissions Section -->
                                            <div class="permission-category mb-4">
                                                <div class="d-flex align-items-center mb-3">
                                                    <div class="form-check me-3">
                                                        <input type="checkbox" id="selectAllUserPermissions" class="form-check-input category-checkbox">
                                                        <label class="form-check-label fw-bold text-primary" for="selectAllUserPermissions">
                                                            <i class="ri-user-settings-line me-1"></i>User
                                                        </label>
                                                    </div>
                                                </div>
                                                <div class="row ms-3">
                                                    @foreach($permissions as $permission)
                                                        @if(in_array($permission->name, ['View Users', 'Create User', 'Edit User', 'Delete User', 'Reset Password', 'Assign User Role', 'Assign Permission']))
                                                            <div class="col-md-6 mb-2">
                                                                <div class="form-check">
                                                                    <input type="checkbox" name="permissions[]" value="{{ $permission->id }}" class="form-check-input permission-checkbox user-permission" id="perm_{{ $permission->id }}">
                                                                    <label class="form-check-label" for="perm_{{ $permission->id }}">
                                                                        {{ $permission->name }}
                                                                    </label>
                                                                </div>
                                                            </div>
                                                        @endif
                                                    @endforeach
                                                </div>
                                            </div>

                                            <!-- 6. Role Management Permissions Section -->
                                            <div class="permission-category mb-4">
                                                <div class="d-flex align-items-center mb-3">
                                                    <div class="form-check me-3">
                                                        <input type="checkbox" id="selectAllRolePermissions" class="form-check-input category-checkbox">
                                                        <label class="form-check-label fw-bold text-success" for="selectAllRolePermissions">
                                                            <i class="ri-shield-user-line me-1"></i>Roles
                                                        </label>
                                                    </div>
                                                </div>
                                                <div class="row ms-3">
                                                    @foreach($permissions as $permission)
                                                        @if(in_array($permission->name, ['View Roles', 'Create Role', 'Edit Role', 'Delete Role']))
                                                            <div class="col-md-6 mb-2">
                                                                <div class="form-check">
                                                                    <input type="checkbox" name="permissions[]" value="{{ $permission->id }}" class="form-check-input permission-checkbox role-permission" id="perm_{{ $permission->id }}">
                                                                    <label class="form-check-label" for="perm_{{ $permission->id }}">
                                                                        <i class="ri-shield-check-line me-1"></i>{{ $permission->name }}
                                                                    </label>
                                                                </div>
                                                            </div>
                                                        @endif
                                                    @endforeach
                                                </div>
                                            </div>

                                            <!-- 7. Reports Permissions Section -->
                                            <div class="permission-category mb-4">
                                                <div class="d-flex align-items-center mb-3">
                                                    <div class="form-check me-3">
                                                        <input type="checkbox" id="selectAllReportPermissions" class="form-check-input category-checkbox">
                                                        <label class="form-check-label fw-bold text-dark" for="selectAllReportPermissions">
                                                            <i class="ri-file-chart-line me-1"></i>Report
                                                        </label>
                                                    </div>
                                                </div>
                                                <div class="row ms-3">
                                                    @foreach($permissions as $permission)
                                                        @if(in_array($permission->name, ['View Reports', 'Create Reports', 'Export Reports']))
                                                            <div class="col-md-6 mb-2">
                                                                <div class="form-check">
                                                                    <input type="checkbox" name="permissions[]" value="{{ $permission->id }}" class="form-check-input permission-checkbox report-permission" id="perm_{{ $permission->id }}">
                                                                    <label class="form-check-label" for="perm_{{ $permission->id }}">
                                                                        {{ $permission->name }}
                                                                    </label>
                                                                </div>
                                                            </div>
                                                        @endif
                                                    @endforeach
                                                </div>
                                            </div>

                                            <!-- 8. System Administration Permissions Section -->
                                            <div class="permission-category mb-4">
                                                <div class="d-flex align-items-center mb-3">
                                                    <div class="form-check me-3">
                                                        <input type="checkbox" id="selectAllAdminPermissions" class="form-check-input category-checkbox">
                                                        <label class="form-check-label fw-bold text-danger" for="selectAllAdminPermissions">
                                                            <i class="ri-admin-line me-1"></i>System Administration
                                                        </label>
                                                    </div>
                                                </div>
                                                <div class="row ms-3">
                                                    @foreach($permissions as $permission)
                                                        @if(in_array($permission->name, ['Access Admin Panel', 'Manage System Settings', 'View System Logs', 'Backup System', 'Restore System']))
                                                            <div class="col-md-6 mb-2">
                                                                <div class="form-check">
                                                                    <input type="checkbox" name="permissions[]" value="{{ $permission->id }}" class="form-check-input permission-checkbox admin-permission" id="perm_{{ $permission->id }}">
                                                                    <label class="form-check-label" for="perm_{{ $permission->id }}">
                                                                       {{ $permission->name }}
                                                                    </label>
                                                                </div>
                                                            </div>
                                                        @endif
                                                    @endforeach
                                                </div>
                                            </div>

                                            <!-- 9. Profile Management Permissions Section -->
                                            <div class="permission-category mb-4">
                                                <div class="d-flex align-items-center mb-3">
                                                    <div class="form-check me-3">
                                                        <input type="checkbox" id="selectAllProfilePermissions" class="form-check-input category-checkbox">
                                                        <label class="form-check-label fw-bold text-muted" for="selectAllProfilePermissions">
                                                            <i class="ri-user-settings-line me-1"></i>Profile Management
                                                        </label>
                                                    </div>
                                                </div>
                                                <div class="row ms-3">
                                                    @foreach($permissions as $permission)
                                                        @if(in_array($permission->name, ['Edit Profile', 'Delete Profile']))
                                                            <div class="col-md-6 mb-2">
                                                                <div class="form-check">
                                                                    <input type="checkbox" name="permissions[]" value="{{ $permission->id }}" class="form-check-input permission-checkbox profile-permission" id="perm_{{ $permission->id }}">
                                                                    <label class="form-check-label" for="perm_{{ $permission->id }}">
                                                                        {{ $permission->name }}
                                                                    </label>
                                                                </div>
                                                            </div>
                                                        @endif
                                                    @endforeach
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer border-top">
                            <button type="submit" class="btn btn-success px-4">
                                <i class="ri-shield-user-add-line me-1"></i> Create Role
                            </button>
                            <button type="button" class="btn btn-secondary px-4" data-bs-dismiss="modal">Cancel</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Edit Role Modal -->
        <div class="modal fade" id="editRoleModal" tabindex="-1" aria-labelledby="editRoleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg modal-dialog-centered">
                <div class="modal-content border-0 shadow">
                    <form id="editRoleForm" method="POST">
                        @csrf
                        @method('PUT')
                        <div class="modal-header" style="background-color: #0069A7; color: #ffffff;">
                            <h5 class="modal-title mb-0" id="editRoleModalLabel">
                                <i class="ri-edit-line me-2"></i> Edit Role
                            </h5>
                            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <div class="row g-4">
                                <div class="col-md-12">
                                    <div class="mb-4">
                                        <label class="form-label">Role Name</label>
                                        <input type="text" name="name" id="edit_role_name" class="form-control" required placeholder="Enter role name">
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="mb-3">
                                        <label class="form-label">Permissions</label>
                                        <div class="border rounded p-3" style="max-height: 400px; overflow-y: auto;">
                                            <div class="form-check mb-3">
                                                <input type="checkbox" id="editSelectAllPermissions" class="form-check-input">
                                                <label class="form-check-label fw-bold" for="editSelectAllPermissions">
                                                    <i class="ri-check-double-line me-1"></i>Select All Permissions
                                                </label>
                                            </div>
                                            <hr>
                                            
                                            <!-- 1. Dashboard Permissions Section -->
                                            <div class="permission-category mb-4">
                                                <div class="d-flex align-items-center mb-3">
                                                    <div class="form-check me-3">
                                                        <input type="checkbox" id="editSelectAllDashboardPermissions" class="form-check-input edit-category-checkbox">
                                                        <label class="form-check-label fw-bold text-success" for="editSelectAllDashboardPermissions">
                                                            <i class="ri-dashboard-line me-1"></i>Dashboard
                                                        </label>
                                                    </div>
                                                </div>
                                                <div class="row ms-3">
                                                    @foreach($permissions as $permission)
                                                        @if(in_array($permission->name, ['Access Dashboard']))
                                                            <div class="col-md-6 mb-2">
                                                                <div class="form-check">
                                                                    <input type="checkbox" name="permissions[]" value="{{ $permission->id }}" class="form-check-input edit-permission-checkbox edit-dashboard-permission" id="edit_perm_{{ $permission->id }}">
                                                                    <label class="form-check-label" for="edit_perm_{{ $permission->id }}">
                                                                        {{ $permission->name }}
                                                                    </label>
                                                                </div>
                                                            </div>
                                                        @endif
                                                    @endforeach
                                                </div>
                                            </div>

                                            <!-- 2. My Folders Permissions Section -->
                                            <div class="permission-category mb-4">
                                                <div class="d-flex align-items-center mb-3">
                                                    <div class="form-check me-3">
                                                        <input type="checkbox" id="editSelectAllMyFolderPermissions" class="form-check-input edit-category-checkbox">
                                                        <label class="form-check-label fw-bold text-info" for="editSelectAllMyFolderPermissions">
                                                            <i class="ri-folder-user-line me-1"></i>My Folders
                                                        </label>
                                                    </div>
                                                </div>
                                                <div class="row ms-3">
                                                    @foreach($permissions as $permission)
                                                        @if(in_array($permission->name, ['Access Shared Folders', 'Create My Folder', 'View My Folder', 'Share My Folder', 'Delete My Folder', 'Edit My Folder', 'Upload My Files', 'Download My Files', 'Delete My Files', 'View My Folder Info']))
                                                            <div class="col-md-6 mb-2">
                                                                <div class="form-check">
                                                                    <input type="checkbox" name="permissions[]" value="{{ $permission->id }}" class="form-check-input edit-permission-checkbox edit-my-folder-permission" id="edit_perm_{{ $permission->id }}">
                                                                    <label class="form-check-label" for="edit_perm_{{ $permission->id }}">
                                                                       {{ $permission->name }}
                                                                    </label>
                                                                </div>
                                                            </div>
                                                        @endif
                                                    @endforeach
                                                </div>
                                            </div>

                                            <!-- 3. Workflows Permissions Section -->
                                            <div class="permission-category mb-4">
                                                <div class="d-flex align-items-center mb-3">
                                                    <div class="form-check me-3">
                                                        <input type="checkbox" id="editSelectAllWorkflowPermissions" class="form-check-input edit-category-checkbox">
                                                        <label class="form-check-label fw-bold text-primary" for="editSelectAllWorkflowPermissions">
                                                            <i class="ri-git-merge-line me-1"></i>Workflows
                                                        </label>
                                                    </div>
                                                </div>
                                                <div class="row ms-3">
                                                    @foreach($permissions as $permission)
                                                        @if(in_array(strtolower($permission->name), ['view workflows', 'create workflows', 'edit workflows', 'delete workflows', 'execute workflows', 'my workflows']))
                                                            <div class="col-md-6 mb-2">
                                                                <div class="form-check">
                                                                    <input type="checkbox" name="permissions[]" value="{{ $permission->id }}" class="form-check-input edit-permission-checkbox edit-workflow-permission" id="edit_perm_{{ $permission->id }}">
                                                                    <label class="form-check-label" for="edit_perm_{{ $permission->id }}">
                                                                        {{ $permission->name }}
                                                                    </label>
                                                                </div>
                                                            </div>
                                                        @endif
                                                    @endforeach
                                                </div>
                                            </div>

                                            <!-- 4. Folder Management Permissions Section -->
                                            <div class="permission-category mb-4">
                                                <div class="d-flex align-items-center mb-3">
                                                    <div class="form-check me-3">
                                                        <input type="checkbox" id="editSelectAllFolderPermissions" class="form-check-input edit-category-checkbox">
                                                        <label class="form-check-label fw-bold text-warning" for="editSelectAllFolderPermissions">
                                                            <i class="ri-folder-settings-line me-1"></i>Folder
                                                        </label>
                                                    </div>
                                                </div>
                                                <div class="row ms-3">
                                                    @foreach($permissions as $permission)
                                                        @if(in_array($permission->name, ['Create Folder', 'View Folder', 'Share Folder', 'Delete Folder', 'Manage Folder Permissions', 'View Folder Contents']))
                                                            <div class="col-md-6 mb-2">
                                                                <div class="form-check">
                                                                    <input type="checkbox" name="permissions[]" value="{{ $permission->id }}" class="form-check-input edit-permission-checkbox edit-folder-permission" id="edit_perm_{{ $permission->id }}">
                                                                    <label class="form-check-label" for="edit_perm_{{ $permission->id }}">
                                                                       {{ $permission->name }}
                                                                    </label>
                                                                </div>
                                                            </div>
                                                        @endif
                                                    @endforeach
                                                </div>
                                            </div>

                                            <!-- 5. User Management Permissions Section -->
                                            <div class="permission-category mb-4">
                                                <div class="d-flex align-items-center mb-3">
                                                    <div class="form-check me-3">
                                                        <input type="checkbox" id="editSelectAllUserPermissions" class="form-check-input edit-category-checkbox">
                                                        <label class="form-check-label fw-bold text-primary" for="editSelectAllUserPermissions">
                                                            <i class="ri-user-settings-line me-1"></i>User
                                                        </label>
                                                    </div>
                                                </div>
                                                <div class="row ms-3">
                                                    @foreach($permissions as $permission)
                                                        @if(in_array($permission->name, ['View Users', 'Create User', 'Edit User', 'Delete User', 'Reset Password', 'Assign User Role', 'Assign Permission']))
                                                            <div class="col-md-6 mb-2">
                                                                <div class="form-check">
                                                                    <input type="checkbox" name="permissions[]" value="{{ $permission->id }}" class="form-check-input edit-permission-checkbox edit-user-permission" id="edit_perm_{{ $permission->id }}">
                                                                    <label class="form-check-label" for="edit_perm_{{ $permission->id }}">
                                                                        {{ $permission->name }}
                                                                    </label>
                                                                </div>
                                                            </div>
                                                        @endif
                                                    @endforeach
                                                </div>
                                            </div>

                                            <!-- 6. Role Management Permissions Section -->
                                            <div class="permission-category mb-4">
                                                <div class="d-flex align-items-center mb-3">
                                                    <div class="form-check me-3">
                                                        <input type="checkbox" id="editSelectAllRolePermissions" class="form-check-input edit-category-checkbox">
                                                        <label class="form-check-label fw-bold text-success" for="editSelectAllRolePermissions">
                                                            <i class="ri-shield-user-line me-1"></i>Roles
                                                        </label>
                                                    </div>
                                                </div>
                                                <div class="row ms-3">
                                                    @foreach($permissions as $permission)
                                                        @if(in_array($permission->name, ['View Roles', 'Create Role', 'Edit Role', 'Delete Role']))
                                                            <div class="col-md-6 mb-2">
                                                                <div class="form-check">
                                                                    <input type="checkbox" name="permissions[]" value="{{ $permission->id }}" class="form-check-input edit-permission-checkbox edit-role-permission" id="edit_perm_{{ $permission->id }}">
                                                                    <label class="form-check-label" for="edit_perm_{{ $permission->id }}">
                                                                        {{ $permission->name }}
                                                                    </label>
                                                                </div>
                                                            </div>
                                                        @endif
                                                    @endforeach
                                                </div>
                                            </div>

                                            <!-- 7. Reports Permissions Section -->
                                            <div class="permission-category mb-4">
                                                <div class="d-flex align-items-center mb-3">
                                                    <div class="form-check me-3">
                                                        <input type="checkbox" id="editSelectAllReportPermissions" class="form-check-input edit-category-checkbox">
                                                        <label class="form-check-label fw-bold text-dark" for="editSelectAllReportPermissions">
                                                            <i class="ri-file-chart-line me-1"></i>Report
                                                        </label>
                                                    </div>
                                                </div>
                                                <div class="row ms-3">
                                                    @foreach($permissions as $permission)
                                                        @if(in_array($permission->name, ['View Reports', 'Create Reports', 'Export Reports']))
                                                            <div class="col-md-6 mb-2">
                                                                <div class="form-check">
                                                                    <input type="checkbox" name="permissions[]" value="{{ $permission->id }}" class="form-check-input edit-permission-checkbox edit-report-permission" id="edit_perm_{{ $permission->id }}">
                                                                    <label class="form-check-label" for="edit_perm_{{ $permission->id }}">
                                                                        {{ $permission->name }}
                                                                    </label>
                                                                </div>
                                                            </div>
                                                        @endif
                                                    @endforeach
                                                </div>
                                            </div>

                                            <!-- 8. System Administration Permissions Section -->
                                            <div class="permission-category mb-4">
                                                <div class="d-flex align-items-center mb-3">
                                                    <div class="form-check me-3">
                                                        <input type="checkbox" id="editSelectAllAdminPermissions" class="form-check-input edit-category-checkbox">
                                                        <label class="form-check-label fw-bold text-danger" for="editSelectAllAdminPermissions">
                                                            <i class="ri-admin-line me-1"></i>System Administration
                                                        </label>
                                                    </div>
                                                </div>
                                                <div class="row ms-3">
                                                    @foreach($permissions as $permission)
                                                        @if(in_array($permission->name, ['Access Admin Panel', 'Manage System Settings', 'View System Logs', 'Backup System', 'Restore System']))
                                                            <div class="col-md-6 mb-2">
                                                                <div class="form-check">
                                                                    <input type="checkbox" name="permissions[]" value="{{ $permission->id }}" class="form-check-input edit-permission-checkbox edit-admin-permission" id="edit_perm_{{ $permission->id }}">
                                                                    <label class="form-check-label" for="edit_perm_{{ $permission->id }}">
                                                                       {{ $permission->name }}
                                                                    </label>
                                                                </div>
                                                            </div>
                                                        @endif
                                                    @endforeach
                                                </div>
                                            </div>

                                            <!-- 9. Profile Management Permissions Section -->
                                            <div class="permission-category mb-4">
                                                <div class="d-flex align-items-center mb-3">
                                                    <div class="form-check me-3">
                                                        <input type="checkbox" id="editSelectAllProfilePermissions" class="form-check-input edit-category-checkbox">
                                                        <label class="form-check-label fw-bold text-muted" for="editSelectAllProfilePermissions">
                                                            <i class="ri-user-settings-line me-1"></i>Profile Management
                                                        </label>
                                                    </div>
                                                </div>
                                                <div class="row ms-3">
                                                    @foreach($permissions as $permission)
                                                        @if(in_array($permission->name, ['Edit Profile', 'Delete Profile']))
                                                            <div class="col-md-6 mb-2">
                                                                <div class="form-check">
                                                                    <input type="checkbox" name="permissions[]" value="{{ $permission->id }}" class="form-check-input edit-permission-checkbox edit-profile-permission" id="edit_perm_{{ $permission->id }}">
                                                                    <label class="form-check-label" for="edit_perm_{{ $permission->id }}">
                                                                     {{ $permission->name }}
                                                                    </label>
                                                                </div>
                                                            </div>
                                                        @endif
                                                    @endforeach
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer border-top">
                            <button type="submit" class="btn btn-success px-4">
                                <i class="ri-check-line me-1"></i> Update Role
                            </button>
                            <button type="button" class="btn btn-secondary px-4" data-bs-dismiss="modal">Cancel</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <script>
        // Add Role Modal - Select All functionality
        document.getElementById('selectAllPermissions').addEventListener('change', function() {
            let checked = this.checked;
            document.querySelectorAll('.permission-checkbox').forEach(function(checkbox) {
                checkbox.checked = checked;
            });
            document.querySelectorAll('.category-checkbox').forEach(function(checkbox) {
                checkbox.checked = checked;
            });
        });

        // Add Role Modal - Category checkboxes
        document.getElementById('selectAllDashboardPermissions').addEventListener('change', function() {
            let checked = this.checked;
            document.querySelectorAll('.dashboard-permission').forEach(function(checkbox) {
                checkbox.checked = checked;
            });
        });

        document.getElementById('selectAllUserPermissions').addEventListener('change', function() {
            let checked = this.checked;
            document.querySelectorAll('.user-permission').forEach(function(checkbox) {
                checkbox.checked = checked;
            });
        });

        document.getElementById('selectAllRolePermissions').addEventListener('change', function() {
            let checked = this.checked;
            document.querySelectorAll('.role-permission').forEach(function(checkbox) {
                checkbox.checked = checked;
            });
        });

        document.getElementById('selectAllMyFolderPermissions').addEventListener('change', function() {
            let checked = this.checked;
            document.querySelectorAll('.my-folder-permission').forEach(function(checkbox) {
                checkbox.checked = checked;
            });
        });

        document.getElementById('selectAllFolderPermissions').addEventListener('change', function() {
            let checked = this.checked;
            document.querySelectorAll('.folder-permission').forEach(function(checkbox) {
                checkbox.checked = checked;
            });
        });

        document.getElementById('selectAllWorkflowPermissions').addEventListener('change', function() {
            let checked = this.checked;
            document.querySelectorAll('.workflow-permission').forEach(function(checkbox) {
                checkbox.checked = checked;
            });
        });

        document.getElementById('selectAllReportPermissions').addEventListener('change', function() {
            let checked = this.checked;
            document.querySelectorAll('.report-permission').forEach(function(checkbox) {
                checkbox.checked = checked;
            });
        });

        document.getElementById('selectAllAdminPermissions').addEventListener('change', function() {
            let checked = this.checked;
            document.querySelectorAll('.admin-permission').forEach(function(checkbox) {
                checkbox.checked = checked;
            });
        });

        document.getElementById('selectAllProfilePermissions').addEventListener('change', function() {
            let checked = this.checked;
            document.querySelectorAll('.profile-permission').forEach(function(checkbox) {
                checkbox.checked = checked;
            });
        });

        // Edit Role Modal - Select All functionality
        document.getElementById('editSelectAllPermissions').addEventListener('change', function() {
            let checked = this.checked;
            document.querySelectorAll('.edit-permission-checkbox').forEach(function(checkbox) {
                checkbox.checked = checked;
            });
            document.querySelectorAll('.edit-category-checkbox').forEach(function(checkbox) {
                checkbox.checked = checked;
            });
        });

        // Edit Role Modal - Category checkboxes
        document.getElementById('editSelectAllDashboardPermissions').addEventListener('change', function() {
            let checked = this.checked;
            document.querySelectorAll('.edit-dashboard-permission').forEach(function(checkbox) {
                checkbox.checked = checked;
            });
        });

        document.getElementById('editSelectAllUserPermissions').addEventListener('change', function() {
            let checked = this.checked;
            document.querySelectorAll('.edit-user-permission').forEach(function(checkbox) {
                checkbox.checked = checked;
            });
        });

        document.getElementById('editSelectAllRolePermissions').addEventListener('change', function() {
            let checked = this.checked;
            document.querySelectorAll('.edit-role-permission').forEach(function(checkbox) {
                checkbox.checked = checked;
            });
        });

        document.getElementById('editSelectAllMyFolderPermissions').addEventListener('change', function() {
            let checked = this.checked;
            document.querySelectorAll('.edit-my-folder-permission').forEach(function(checkbox) {
                checkbox.checked = checked;
            });
        });

        document.getElementById('editSelectAllFolderPermissions').addEventListener('change', function() {
            let checked = this.checked;
            document.querySelectorAll('.edit-folder-permission').forEach(function(checkbox) {
                checkbox.checked = checked;
            });
        });

        document.getElementById('editSelectAllWorkflowPermissions').addEventListener('change', function() {
            let checked = this.checked;
            document.querySelectorAll('.edit-workflow-permission').forEach(function(checkbox) {
                checkbox.checked = checked;
            });
        });

        document.getElementById('editSelectAllReportPermissions').addEventListener('change', function() {
            let checked = this.checked;
            document.querySelectorAll('.edit-report-permission').forEach(function(checkbox) {
                checkbox.checked = checked;
            });
        });

        document.getElementById('editSelectAllAdminPermissions').addEventListener('change', function() {
            let checked = this.checked;
            document.querySelectorAll('.edit-admin-permission').forEach(function(checkbox) {
                checkbox.checked = checked;
            });
        });

        document.getElementById('editSelectAllProfilePermissions').addEventListener('change', function() {
            let checked = this.checked;
            document.querySelectorAll('.edit-profile-permission').forEach(function(checkbox) {
                checkbox.checked = checked;
            });
        });

        // Set Edit Role data
        function setEditRole(id, name, permissions) {
            // Set form action
            document.getElementById('editRoleForm').action = '{{ url('roles') }}/' + id;
            
            // Set role name
            document.getElementById('edit_role_name').value = name;
            
            // Clear all checkboxes first
            document.querySelectorAll('.edit-permission-checkbox').forEach(function(checkbox) {
                checkbox.checked = false;
            });
            document.querySelectorAll('.edit-category-checkbox').forEach(function(checkbox) {
                checkbox.checked = false;
            });
            
            // Check the permissions this role has
            permissions.forEach(function(permissionId) {
                let checkbox = document.getElementById('edit_perm_' + permissionId);
                if (checkbox) {
                    checkbox.checked = true;
                }
            });
        }
        </script>
    </div>
</div>
@endsection

@stack('scripts')