@extends('layouts.panel')

@section('title', $title)

@push('css')
@endpush

@section('breadcrumb')
<x-admin.breadcrumb />
@endsection

@section('content')
<x-admin.panel-card>
    @slot('title')
    <h5>{{$title}}</h5>
    @endslot

    <div class="table-responsive my-1">
        <table class="table align-middle">
            <thead>
                <tr>
                    <th scope="col" nowrap>@lang('Role')</th>
                    <th scope="col" nowrap>@lang('Permissions')</th>
                    <th scope="col" nowrap>@lang('Action')</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($roles as $role)
                <tr>
                    <td nowrap>{{ $role->role_name }}</td>
                    <td>
                        @php
                            if ($role->name == ROLE_SUPERADMIN){
                                $permissions = \App\Models\Permission::all();
                            } else {
                                $permissions = $role->permissions;
                            }
                            $permissions = $permissions->chunk(6);
                        @endphp
                        @forelse ($permissions as $chunk)
                            <div class="my-1">
                                @foreach ($chunk as $permission)
                                <span class="d-inline-block rounded py-1 px-2 bg-light text-secondary">{{ unslug_str($permission->name) }}</span>
                                @endforeach
                            </div>
                        @empty
                        <span class="rounded py-1 px-2 bg-light text-secondary">@lang('No Permission Assigned')</span>
                        @endforelse
                    </td>
                    <td nowrap>
                        <div class="btn-group btn-group-sm" role="group">
                            <a href="{{ route('roles.permission', $role->id) }}" class="btn btn-light d-flex" title="Edit">
                                <svg width="17" height="17" fill="none" viewbox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
                                </svg>
                            </a>
                            {{-- <button type="submit" class="btn btn-light d-flex text-danger" form="deleteUser{{ $item->id }}" onclick="return confirm('Are you sure?')" title="Delete">
                                <svg width="17" height="17" fill="none" viewbox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                                </svg>
                            </button> --}}
                        </div>
                        {{-- <form wire:submit.prevent='delete({{ $item->id }})' id="deleteUser{{ $item->id }}"></form> --}}
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
        {{-- <x-admin.pagination :paginator="$roles" /> --}}
    </div>
</x-admin.panel-card>
@endsection

@push('js')
@endpush