@extends('layouts.app')

@section('judul', 'Manajemen Role')
@section('subjudul', 'Role pengguna dan permission yang dimilikinya')

@section('aksi-header')
    <a href="{{ route('role.create') }}" class="btn btn-primary"><i class="fas fa-plus mr-1"></i> Tambah Role</a>
@endsection

@section('konten')
    <div class="alert alert-light border small">
        <i class="fas fa-circle-info mr-1 text-primary"></i>
        Hak akses ditentukan oleh <b>permission</b> setiap role. Pengguna dengan beberapa role memegang gabungan permission-nya.
        Lima role bawaan tidak dapat dihapus, dan Super Admin selalu memegang seluruh permission.
    </div>

    <div class="card">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover mb-0">
                    <thead><tr><th>Role</th><th>Kode</th><th>Permission</th><th>Pengguna aktif</th><th class="text-right">Aksi</th></tr></thead>
                    <tbody>
                    @foreach ($daftarRole as $r)
                        <tr>
                            <td>
                                <a href="{{ route('role.edit', $r) }}" class="fw-semibold">{{ $r->nama_role }}</a>
                                @if ($r->bawaan())<span class="badge badge-lembut-secondary ml-1">Bawaan</span>@endif
                                @if ($r->keterangan)<div class="small teks-redup">{{ $r->keterangan }}</div>@endif
                            </td>
                            <td><code>{{ $r->kode_role }}</code></td>
                            <td class="text-nowrap">
                                {{ $r->permissions_count }} <span class="teks-redup">/ {{ $totalPermission }}</span>
                                <div class="progress mt-1" style="height:4px;width:90px"><div class="progress-bar" style="width:{{ $totalPermission ? round($r->permissions_count / $totalPermission * 100) : 0 }}%"></div></div>
                            </td>
                            <td>{{ $r->pengguna_count }}</td>
                            <td class="text-right text-nowrap">
                                <a href="{{ route('role.edit', $r) }}" class="btn btn-sm btn-outline-primary" title="Ubah"><i class="fas fa-pen"></i></a>
                                @unless ($r->bawaan())
                                    <x-form-aksi :action="route('role.destroy', $r)" label="" ikon="fa-trash" warna="outline-danger" class="btn-sm"
                                                 :judul="'Hapus role '.$r->nama_role.'?'" pesan="Role hanya dapat dihapus bila tidak dipakai pengguna mana pun. Menu dan widget dashboard role ini ikut terhapus."
                                                 tombol-konfirmasi="Ya, hapus">
                                        @method('DELETE')
                                    </x-form-aksi>
                                @endunless
                            </td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection