@section("title", "BizMan | Detail Role")

<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Role Details') }}
        </h2>
        <p class="text-gray-500 text-sm">{{ date('l, d M Y') }}</p>
    </x-slot>

    <div>
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6 text-gray-900">
                    <div class="mb-6">
                        <h3 class="text-lg font-semibold mb-2">Role Information</h3>
                        <div class="bg-gray-50 p-4 rounded">
                            <p><strong>Role Name:</strong> {{ $role->name }}</p>
                            <p class="mt-2"><strong>Users with this role:</strong> {{ $role->users->count() }}</p>
                        </div>
                    </div>

                    <div class="mb-6">
                        <h3 class="text-lg font-semibold mb-2">Permissions</h3>
                        <div class="bg-gray-50 p-4 rounded">
                            @if($role->permissions->count() > 0)
                                <div class="grid grid-cols-2 md:grid-cols-3 gap-2">
                                    @foreach ($role->permissions as $permission)
                                        <div class="flex items-center">
                                            <svg class="w-4 h-4 text-green-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                                            </svg>
                                            <span class="text-sm">{{ $permission->name }}</span>
                                        </div>
                                    @endforeach
                                </div>
                            @else
                                <p class="text-gray-500">No permissions assigned to this role.</p>
                            @endif
                        </div>
                    </div>

                    <div class="flex items-center justify-between">
                        <a href="{{ route('roles.index') }}" class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded">
                            Back to Roles
                        </a>
                        <a href="{{ route('roles.edit', $role) }}" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
                            Edit Role
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>