@extends('layouts.app')

@section('title', $role->name)

@section('content')
    <x-breadcrumbs :items="[
        ['label' => 'Dashboard', 'url' => route('dashboard')],
        ['label' => 'Roles', 'url' => route('admin.roles.index')],
        ['label' => $role->name],
    ]" />

    <x-page-header :title="$role->name" :subtitle="$role->description">
        <a href="{{ route('admin.roles.edit', $role) }}" class="btn btn-outline-primary btn-sm">Edit</a>
    </x-page-header>

    <div class="row g-4">
        <div class="col-lg-4">
            <x-card title="Role Details">
                <dl class="row mb-0">
                    <dt class="col-sm-5 text-muted">Slug</dt>
                    <dd class="col-sm-7"><code>{{ $role->slug }}</code></dd>
                    <dt class="col-sm-5 text-muted">Users</dt>
                    <dd class="col-sm-7">{{ $role->users->count() }}</dd>
                    <dt class="col-sm-5 text-muted">Permissions</dt>
                    <dd class="col-sm-7">{{ $role->permissions->count() }}</dd>
                </dl>
            </x-card>

            <x-card title="Actions" class="mt-4">
                <form method="POST" action="{{ route('admin.roles.destroy', $role) }}"
                      onsubmit="return confirm('Delete this role?');">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn btn-danger btn-sm w-100">Delete Role</button>
                </form>
            </x-card>
        </div>

        <div class="col-lg-8">
            <x-card title="Assigned Permissions">
                @php $grouped = $role->permissions->groupBy('group'); @endphp
                @forelse ($grouped as $group => $perms)
                    <h6 class="text-muted text-uppercase small">{{ $group }}</h6>
                    <ul class="list-unstyled mb-3">
                        @foreach ($perms as $permission)
                            <li class="mb-2">
                                <i class="bi bi-check2 text-success me-1" aria-hidden="true"></i>
                                <strong>{{ $permission->name }}</strong>
                                <code class="small text-muted ms-1">{{ $permission->slug }}</code>
                                @if ($permission->description)
                                    <div class="small text-muted ms-4">{{ $permission->description }}</div>
                                @endif
                            </li>
                        @endforeach
                    </ul>
                @empty
                    <p class="text-muted mb-0">No permissions assigned.</p>
                @endforelse
            </x-card>

            @if ($role->users->isNotEmpty())
                <x-card title="Users with this Role" class="mt-4">
                    <ul class="list-unstyled mb-0">
                        @foreach ($role->users as $user)
                            <li class="mb-2">
                                <a href="{{ route('admin.users.show', $user) }}">{{ $user->name }}</a>
                                <span class="text-muted small">— {{ $user->email }}</span>
                            </li>
                        @endforeach
                    </ul>
                </x-card>
            @endif
        </div>
    </div>
@endsection
