@extends('layouts.dashboard')

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

@section('page-content')
<div class="mb-6">
    <div class="flex items-center space-x-2 text-sm text-gray-600 mb-2">
        <a href="{{ route('roles.index') }}" class="hover:text-gray-900">Roles</a>
        <span>/</span>
        <span class="text-gray-900">{{ $role->name }}</span>
    </div>
    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-2xl font-bold text-gray-900">{{ $role->name }}</h1>
            <p class="text-gray-600">{{ $role->slug }}</p>
        </div>
        @can('manage-roles')
        <a href="{{ route('roles.edit', $role) }}" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
            Edit Role
        </a>
        @endcan
    </div>
</div>

<!-- Role Information -->
<div class="bg-white rounded-lg shadow-sm p-6 mb-6">
    <h2 class="text-lg font-semibold text-gray-900 mb-4">Role Information</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div>
            <label class="block text-sm font-medium text-gray-500 mb-1">Role Name</label>
            <p class="text-gray-900">{{ $role->name }}</p>
        </div>
        <div>
            <label class="block text-sm font-medium text-gray-500 mb-1">Slug</label>
            <p class="text-gray-900 font-mono">{{ $role->slug }}</p>
        </div>
        <div>
            <label class="block text-sm font-medium text-gray-500 mb-1">Total Users</label>
            <p class="text-gray-900">{{ $role->users->count() }}</p>
        </div>
        <div>
            <label class="block text-sm font-medium text-gray-500 mb-1">Total Permissions</label>
            <p class="text-gray-900">{{ $role->permissions->count() }}</p>
        </div>
    </div>

    @if($role->description)
    <div class="mt-6">
        <label class="block text-sm font-medium text-gray-500 mb-2">Description</label>
        <p class="text-gray-700">{{ $role->description }}</p>
    </div>
    @endif
</div>

<!-- Permissions -->
<div class="bg-white rounded-lg shadow-sm p-6 mb-6">
    <h2 class="text-lg font-semibold text-gray-900 mb-4">Permissions ({{ $role->permissions->count() }})</h2>
    @if($role->permissions->count() > 0)
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
        @foreach($role->permissions as $permission)
        <div class="flex items-center space-x-2 px-3 py-2 bg-gray-50 rounded-lg">
            <svg class="w-4 h-4 text-green-600" 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"/>
            </svg>
            <span class="text-sm text-gray-700">{{ $permission->name }}</span>
        </div>
        @endforeach
    </div>
    @else
    <p class="text-gray-500 text-center py-8">No permissions assigned to this role</p>
    @endif
</div>

<!-- Users with this Role -->
@if($role->users->count() > 0)
<div class="bg-white rounded-lg shadow-sm p-6">
    <h2 class="text-lg font-semibold text-gray-900 mb-4">Users with this Role ({{ $role->users->count() }})</h2>
    <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
                <tr>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Name</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Email</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Status</th>
                    <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase">Actions</th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
                @foreach($role->users as $user)
                <tr>
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                        {{ $user->name }}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                        {{ $user->email }}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm">
                        <span class="px-2 py-1 text-xs rounded-full 
                            {{ $user->is_active ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' }}">
                            {{ $user->is_active ? 'Active' : 'Inactive' }}
                        </span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-right text-sm">
                        <a href="{{ route('users.show', $user) }}" class="text-blue-600 hover:text-blue-900">View</a>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@endif
@endsection