@extends('layouts.app')

@section('title', $role->name . ' - Rol Detayı')
@section('page-title', $role->name)

@section('content')
<div class="space-y-6">
    <div>
        <a href="{{ route('roles.index') }}" class="inline-flex items-center text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:text-gray-300">
            <i class="fas fa-arrow-left mr-2"></i>
            Rollere Dön
        </a>
    </div>

    <!-- Role Details Card -->
    <div class="bg-white dark:bg-gray-800 shadow overflow-hidden sm:rounded-lg">
        <div class="px-4 py-5 sm:px-6 border-b border-gray-200 dark:border-gray-700">
            <div class="flex items-center justify-between">
                <div class="flex items-center space-x-3">
                    <div class="w-4 h-4 rounded-full" style="background-color: {{ $role->color }}"></div>
                    <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">{{ $role->name }}</h3>
                    @if($role->is_system)
                    <span class="px-2 py-1 text-xs font-medium rounded-full bg-gray-100 text-gray-600">Sistem</span>
                    @endif
                </div>
                <div class="flex items-center space-x-3">
                    <span class="px-3 py-1 inline-flex text-sm leading-5 font-semibold rounded-full {{ $role->is_active ? 'bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300' : 'bg-gray-100 text-gray-600' }}">
                        {{ $role->is_active ? 'Aktif' : 'Pasif' }}
                    </span>
                    <a href="{{ route('roles.edit', $role) }}" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 dark:bg-indigo-500 dark:bg-indigo-500 hover:bg-indigo-700 dark:hover:bg-indigo-600">
                        <i class="fas fa-edit mr-2"></i>
                        Düzenle
                    </a>
                </div>
            </div>
        </div>
        <div class="border-t border-gray-200 dark:border-gray-700">
            <dl>
                <div class="bg-gray-50 dark:bg-gray-900/50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                    <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Slug</dt>
                    <dd class="mt-1 text-sm text-gray-900 dark:text-gray-100 sm:mt-0 sm:col-span-2">
                        <code class="px-2 py-1 bg-gray-100 rounded text-sm">{{ $role->slug }}</code>
                    </dd>
                </div>
                @if($role->description)
                <div class="bg-white dark:bg-gray-800 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                    <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Açıklama</dt>
                    <dd class="mt-1 text-sm text-gray-900 dark:text-gray-100 sm:mt-0 sm:col-span-2">
                        {{ $role->description }}
                    </dd>
                </div>
                @endif
                <div class="bg-gray-50 dark:bg-gray-900/50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                    <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Kullanıcı Sayısı</dt>
                    <dd class="mt-1 text-sm text-gray-900 dark:text-gray-100 sm:mt-0 sm:col-span-2">
                        {{ $role->users()->count() }} kullanıcı
                    </dd>
                </div>
                <div class="bg-white dark:bg-gray-800 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                    <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">İzin Sayısı</dt>
                    <dd class="mt-1 text-sm text-gray-900 dark:text-gray-100 sm:mt-0 sm:col-span-2">
                        {{ $role->permissions()->count() }} izin
                    </dd>
                </div>
            </dl>
        </div>
    </div>

    <!-- Users with this role -->
    @if($role->users->count() > 0)
    <div class="bg-white dark:bg-gray-800 shadow overflow-hidden sm:rounded-lg">
        <div class="px-4 py-5 sm:px-6 border-b border-gray-200 dark:border-gray-700">
            <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Bu Role Sahip Kullanıcılar</h3>
        </div>
        <div class="px-4 py-5 sm:p-6">
            <div class="space-y-2">
                @foreach($role->users as $user)
                <div class="flex items-center justify-between py-2 border-b border-gray-100">
                    <div>
                        <p class="text-sm font-medium text-gray-900 dark:text-gray-100">{{ $user->name }}</p>
                        <p class="text-sm text-gray-500 dark:text-gray-400">{{ $user->email }}</p>
                    </div>
                    <a href="{{ route('profile.show') }}" class="text-indigo-600 hover:text-indigo-900 text-sm">
                        Profil →
                    </a>
                </div>
                @endforeach
            </div>
        </div>
    </div>
    @endif

    <!-- Permissions -->
    <div class="bg-white dark:bg-gray-800 shadow overflow-hidden sm:rounded-lg">
        <div class="px-4 py-5 sm:px-6 border-b border-gray-200 dark:border-gray-700">
            <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">İzinler</h3>
        </div>
        <div class="px-4 py-5 sm:p-6">
            @if($role->permissions->count() > 0)
            <div class="space-y-4">
                @foreach($permissions as $group => $groupPermissions)
                @php
                    $groupRolePermissions = $role->permissions->where('group', $group);
                @endphp
                @if($groupRolePermissions->count() > 0)
                <div>
                    <h4 class="text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">{{ ucfirst($group ?? 'Diğer') }}</h4>
                    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2">
                        @foreach($groupRolePermissions as $permission)
                        <div class="flex items-center space-x-2 p-2 bg-gray-50 dark:bg-gray-900/50 rounded">
                            <i class="fas fa-check-circle text-green-500"></i>
                            <span class="text-sm text-gray-700 dark:text-gray-300">{{ $permission->name }}</span>
                        </div>
                        @endforeach
                    </div>
                </div>
                @endif
                @endforeach
            </div>
            @else
            <p class="text-sm text-gray-500 dark:text-gray-400">Bu role henüz izin atanmamış.</p>
            @endif
        </div>
    </div>
</div>
@endsection