@extends('layouts.app')

@section('title', $permission->name . ' - İzin Detayı')
@section('page-title', $permission->name)

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

    <!-- Permission Details Card -->
    <div class="bg-white shadow overflow-hidden sm:rounded-lg">
        <div class="px-4 py-5 sm:px-6 border-b border-gray-200">
            <div class="flex items-center justify-between">
                <div>
                    <h3 class="text-lg leading-6 font-medium text-gray-900">{{ $permission->name }}</h3>
                    @if($permission->is_system)
                    <span class="mt-2 inline-flex px-2 py-1 text-xs font-medium rounded-full bg-gray-100 text-gray-600">Sistem</span>
                    @endif
                </div>
                <a href="{{ route('permissions.edit', $permission) }}" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700">
                    <i class="fas fa-edit mr-2"></i>
                    Düzenle
                </a>
            </div>
        </div>
        <div class="border-t border-gray-200">
            <dl>
                <div class="bg-gray-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">Slug</dt>
                    <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
                        <code class="px-2 py-1 bg-gray-100 rounded text-sm">{{ $permission->slug }}</code>
                    </dd>
                </div>
                @if($permission->group)
                <div class="bg-white 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">Grup</dt>
                    <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
                        <span class="px-2 py-1 text-xs font-medium rounded-full bg-blue-100 text-blue-800">{{ $permission->group }}</span>
                    </dd>
                </div>
                @endif
                @if($permission->description)
                <div class="bg-gray-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">Açıklama</dt>
                    <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
                        {{ $permission->description }}
                    </dd>
                </div>
                @endif
                <div class="bg-white 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">Rol Sayısı</dt>
                    <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
                        {{ $permission->roles()->count() }} rol
                    </dd>
                </div>
            </dl>
        </div>
    </div>

    <!-- Roles with this permission -->
    @if($permission->roles->count() > 0)
    <div class="bg-white shadow overflow-hidden sm:rounded-lg">
        <div class="px-4 py-5 sm:px-6 border-b border-gray-200">
            <h3 class="text-lg leading-6 font-medium text-gray-900">Bu İzni Kullanan Roller</h3>
        </div>
        <div class="px-4 py-5 sm:p-6">
            <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
                @foreach($permission->roles as $role)
                <div class="border border-gray-200 rounded-lg p-4">
                    <div class="flex items-center space-x-2 mb-2">
                        <div class="w-3 h-3 rounded-full" style="background-color: {{ $role->color }}"></div>
                        <a href="{{ route('roles.show', $role) }}" class="text-sm font-medium text-indigo-600 hover:text-indigo-900">
                            {{ $role->name }}
                        </a>
                    </div>
                    <p class="text-xs text-gray-500">{{ $role->users()->count() }} kullanıcı</p>
                </div>
                @endforeach
            </div>
        </div>
    </div>
    @endif
</div>
@endsection