@extends('layouts.app')
@section('title', $role->name)
@section('content')
<div class="page-header flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
    <div>
        <h2 class="page-title">{{ $role->name }}</h2>
        <p class="page-subtitle">{{ $role->description }}</p>
    </div>
    <div class="flex items-center gap-2">
        <a href="{{ route('roles.edit', $role) }}" class="btn-ghost text-amber-600 hover:text-amber-700 hover:bg-amber-50 px-3 py-2">
            <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
            Edit
        </a>
        <a href="{{ route('roles.index') }}" class="btn-ghost">
            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/></svg>
            Back to Roles
        </a>
    </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <div class="lg:col-span-1">
        <div class="bg-white rounded-2xl border border-gray-100 p-6 card-elevated">
            <h3 class="section-title">Role Details</h3>
            <dl class="space-y-4 mt-4">
                <div>
                    <dt class="text-xs text-gray-400 uppercase tracking-wider">Name</dt>
                    <dd class="text-sm font-medium text-gray-900 mt-0.5">{{ $role->name }}</dd>
                </div>
                <div>
                    <dt class="text-xs text-gray-400 uppercase tracking-wider">Slug</dt>
                    <dd class="text-sm font-medium text-gray-900 mt-0.5 font-mono">{{ $role->slug }}</dd>
                </div>
                <div>
                    <dt class="text-xs text-gray-400 uppercase tracking-wider">Description</dt>
                    <dd class="text-sm text-gray-700 mt-0.5">{{ $role->description ?? '—' }}</dd>
                </div>
                <div>
                    <dt class="text-xs text-gray-400 uppercase tracking-wider">Permissions Count</dt>
                    <dd class="text-sm font-medium text-gray-900 mt-0.5">
                        <span class="badge badge-indigo">{{ $role->permissions->count() }} permissions</span>
                    </dd>
                </div>
                <div>
                    <dt class="text-xs text-gray-400 uppercase tracking-wider">Created</dt>
                    <dd class="text-sm text-gray-700 mt-0.5">{{ $role->created_at->format('d M, Y h:i A') }}</dd>
                </div>
            </dl>
        </div>
    </div>

    <div class="lg:col-span-2">
        <div class="bg-white rounded-2xl border border-gray-100 p-6 card-elevated">
            <h3 class="section-title">Assigned Permissions</h3>

            @php
                $grouped = $role->permissions->groupBy('group_name');
            @endphp

            @forelse($grouped as $groupName => $perms)
                <div class="mt-4">
                    <h4 class="text-sm font-semibold text-gray-900 capitalize mb-2">{{ $groupName }}</h4>
                    <div class="flex flex-wrap gap-2">
                        @foreach($perms as $perm)
                            <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-primary-50 text-primary-700">
                                {{ $perm->name }}
                            </span>
                        @endforeach
                    </div>
                </div>
            @empty
                <div class="text-center py-8 text-gray-500">
                    <p>No permissions assigned to this role.</p>
                </div>
            @endforelse
        </div>
    </div>
</div>
@endsection