@extends('admin.layouts.master')
@section('title', 'Permissions')

@section('content')
<div class="page-content-wrapper"><div class="content-container"><div class="page-content">
    <div class="content-header d-flex justify-content-between align-items-center mb-3">
        <h4 class="mb-0"><i class="ti ti-key me-1"></i> Permissions</h4>
        @can('permissions.create')
            <a href="{{ route('admin.security.permissions.create') }}" class="btn btn-primary"><i class="ti ti-plus me-1"></i> New Permission</a>
        @endcan
    </div>

    <div class="card border-0 shadow-sm mb-3">
        <div class="card-header"><h6 class="mb-0">Grouped Permissions</h6></div>
        <div class="card-body">
            @foreach($permissionGroups as $module => $permissions)
                <h6 class="text-capitalize">{{ $module }} <small class="text-muted">({{ $permissions->count() }})</small></h6>
                <div class="mb-3 d-flex flex-wrap gap-2">
                    @foreach($permissions as $permission)
                        <span class="badge bg-light text-dark border">{{ $permissionMatrixService->permissionLabel($permission->name) }}</span>
                    @endforeach
                </div>
            @endforeach
        </div>
    </div>

    <div class="card border-0 shadow-sm">
        <div class="card-body">
            <table id="permissions-table" class="table table-bordered table-hover w-100">
                <thead class="table-light">
                    <tr>
                        <th>#</th><th>Name</th><th>Module</th><th>Guard</th><th>Roles</th><th>Users</th><th>Created</th><th>Actions</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</div></div></div>
@endsection

@push('scripts')
<script>
$(function () {
    $('#permissions-table').DataTable({
        processing: true, serverSide: true, responsive: true,
        language: { url: 'https://cdn.datatables.net/plug-ins/1.13.8/i18n/en-GB.json' },
        ajax: '{{ route('admin.security.permissions.index') }}',
        columns: [
            {data: 'id'},
            {data: 'name'},
            {data: 'module'},
            {data: 'guard_name'},
            {data: 'roles_count', className: 'text-center'},
            {data: 'users_count', className: 'text-center'},
            {data: 'created_at'},
            {data: 'actions', orderable: false, searchable: false},
        ]
    });
});
</script>
@endpush