@extends('layouts.app')

@section('title', 'API Kullanım Dashboard')
@section('page-title', 'API Kullanım Dashboard')

@section('content')
<div class="space-y-6">
    <!-- Header -->
    <div class="flex items-center justify-between">
        <div>
            <h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100">API Kullanım İstatistikleri</h2>
            <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">API endpoint'lerinin kullanım verilerini görüntüleyin</p>
        </div>
        <div class="flex items-center space-x-3">
            <select id="days-filter" class="rounded-md border-gray-300 dark:border-gray-600 dark:border-gray-600 shadow-sm focus:border-indigo-500 dark:focus:border-indigo-400 focus:ring-indigo-500 dark:focus:ring-indigo-400 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
                <option value="7" {{ $days == 7 ? 'selected' : '' }}>Son 7 Gün</option>
                <option value="30" {{ $days == 30 ? 'selected' : '' }}>Son 30 Gün</option>
                <option value="60" {{ $days == 60 ? 'selected' : '' }}>Son 60 Gün</option>
                <option value="90" {{ $days == 90 ? 'selected' : '' }}>Son 90 Gün</option>
            </select>
        </div>
    </div>

    <!-- Overall Statistics -->
    <div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4">
        <div class="bg-white dark:bg-gray-800 overflow-hidden shadow rounded-lg">
            <div class="p-5">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <i class="fas fa-chart-line text-2xl text-blue-500"></i>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 truncate">Toplam İstek</dt>
                            <dd class="text-lg font-medium text-gray-900 dark:text-gray-100">{{ number_format($overallStats['total_requests']) }}</dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 overflow-hidden shadow rounded-lg">
            <div class="p-5">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <i class="fas fa-check-circle text-2xl text-green-500"></i>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 truncate">Başarılı İstek</dt>
                            <dd class="text-lg font-medium text-gray-900 dark:text-gray-100">{{ number_format($overallStats['successful_requests']) }}</dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 overflow-hidden shadow rounded-lg">
            <div class="p-5">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <i class="fas fa-exclamation-triangle text-2xl text-red-500"></i>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 truncate">Başarısız İstek</dt>
                            <dd class="text-lg font-medium text-gray-900 dark:text-gray-100">{{ number_format($overallStats['failed_requests']) }}</dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 overflow-hidden shadow rounded-lg">
            <div class="p-5">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <i class="fas fa-tachometer-alt text-2xl text-purple-500"></i>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 truncate">Ort. Yanıt Süresi</dt>
                            <dd class="text-lg font-medium text-gray-900 dark:text-gray-100">{{ number_format($overallStats['avg_response_time'], 2) }} ms</dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Success Rate -->
    <div class="bg-white dark:bg-gray-800 shadow rounded-lg p-6">
        <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-4">Başarı Oranı</h3>
        <div class="flex items-center">
            <div class="flex-1">
                <div class="w-full bg-gray-200 rounded-full h-4">
                    <div class="bg-green-600 h-4 rounded-full" style="width: {{ $overallStats['success_rate'] }}%"></div>
                </div>
            </div>
            <div class="ml-4 text-2xl font-bold text-gray-900 dark:text-gray-100">
                {{ number_format($overallStats['success_rate'], 2) }}%
            </div>
        </div>
    </div>

    <!-- Endpoint Statistics -->
    <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">En Çok Kullanılan Endpoint'ler</h3>
        </div>
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50 dark:bg-gray-900/50">
                    <tr>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                            Endpoint
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                            Method
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                            Toplam İstek
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                            Başarılı
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                            Başarısız
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                            Başarı Oranı
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                            Ort. Yanıt Süresi
                        </th>
                    </tr>
                </thead>
                <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200">
                    @forelse($endpointStats as $stat)
                    <tr class="hover:bg-gray-50 dark:bg-gray-900/50">
                        <td class="px-6 py-4 whitespace-nowrap">
                            <code class="text-sm text-gray-900 dark:text-gray-100">{{ $stat['endpoint'] }}</code>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full 
                                {{ $stat['method'] === 'GET' ? 'bg-blue-100 text-blue-800' : ($stat['method'] === 'POST' ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800') }}">
                                {{ $stat['method'] }}
                            </span>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
                            {{ number_format($stat['total_requests']) }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-green-600">
                            {{ number_format($stat['successful_requests']) }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-red-600">
                            {{ number_format($stat['failed_requests']) }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
                            {{ number_format($stat['success_rate'], 2) }}%
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
                            {{ number_format($stat['avg_response_time'], 2) }} ms
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="7" class="px-6 py-4 text-center text-gray-500 dark:text-gray-400">
                            Henüz API kullanım verisi yok
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <!-- Hourly Usage Chart -->
    @if(count($hourlyStats) > 0)
    <div class="bg-white dark:bg-gray-800 shadow rounded-lg p-6">
        <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-4">Saatlik Kullanım (Son 7 Gün)</h3>
        <canvas id="hourlyChart" height="100"></canvas>
    </div>
    @endif

    <!-- Site Statistics -->
    @if(count($siteStats) > 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">Site Bazında Kullanım</h3>
        </div>
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50 dark:bg-gray-900/50">
                    <tr>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                            Site
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                            Toplam İstek
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                            Başarılı
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                            Başarısız
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                            Başarı Oranı
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                            Ort. Yanıt Süresi
                        </th>
                    </tr>
                </thead>
                <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200">
                    @foreach($siteStats as $stat)
                    <tr class="hover:bg-gray-50 dark:bg-gray-900/50">
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="text-sm font-medium text-gray-900 dark:text-gray-100">{{ $stat['site_name'] }}</div>
                            @if($stat['site_url'])
                            <div class="text-sm text-gray-500 dark:text-gray-400">{{ $stat['site_url'] }}</div>
                            @endif
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
                            {{ number_format($stat['total_requests']) }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-green-600">
                            {{ number_format($stat['successful_requests']) }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-red-600">
                            {{ number_format($stat['failed_requests']) }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
                            {{ number_format($stat['success_rate'], 2) }}%
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
                            {{ number_format($stat['avg_response_time'], 2) }} ms
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
    @endif

    <!-- Recent Requests & Error Logs -->
    <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
        <!-- Recent Requests -->
        <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">Son İstekler</h3>
            </div>
            <div class="px-4 py-5 sm:p-6">
                <div class="space-y-4 max-h-96 overflow-y-auto">
                    @forelse($recentRequests as $request)
                    <div class="border-l-4 {{ $request['status_code'] >= 400 ? 'border-red-500' : ($request['status_code'] >= 300 ? 'border-yellow-500' : 'border-green-500') }} pl-4">
                        <div class="flex items-center justify-between">
                            <div class="flex-1 min-w-0">
                                <p class="text-sm font-medium text-gray-900 dark:text-gray-100 truncate">
                                    <span class="font-mono">{{ $request['method'] }}</span>
                                    <span class="text-gray-500 dark:text-gray-400">{{ $request['endpoint'] }}</span>
                                </p>
                                <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                                    @if($request['source'] === 'ai')
                                        <span class="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-purple-100 text-purple-800 mr-1">
                                            <i class="fas fa-robot mr-1"></i>
                                            AI ({{ $request['provider'] ?? 'unknown' }})
                                            @if($request['model'])
                                                - {{ $request['model'] }}
                                            @endif
                                        </span> •
                                    @elseif($request['route_name'] === 'api-tester')
                                        <span class="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-indigo-100 text-indigo-800 mr-1">
                                            <i class="fas fa-code mr-1"></i>
                                            API Tester
                                        </span> •
                                    @endif
                                    @if($request['site_name'])
                                        Site: {{ $request['site_name'] }} •
                                    @endif
                                    @if($request['user_name'])
                                        Kullanıcı: {{ $request['user_name'] }} •
                                    @endif
                                    {{ $request['created_at_human'] }}
                                </p>
                            </div>
                            <div class="ml-4 flex items-center space-x-2">
                                <span class="px-2 py-1 text-xs font-medium rounded-full 
                                    {{ $request['status_code'] >= 400 ? 'bg-red-100 text-red-800' : ($request['status_code'] >= 300 ? 'bg-yellow-100 text-yellow-800' : 'bg-green-100 text-green-800') }}">
                                    {{ $request['status_code'] }}
                                </span>
                                @if($request['response_time'])
                                <span class="text-xs text-gray-500 dark:text-gray-400">{{ number_format($request['response_time'], 0) }}ms</span>
                                @endif
                            </div>
                        </div>
                    </div>
                    @empty
                    <p class="text-sm text-gray-500 dark:text-gray-400">Henüz istek yok</p>
                    @endforelse
                </div>
            </div>
        </div>

        <!-- Error Logs -->
        <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">Son Hatalar</h3>
            </div>
            <div class="px-4 py-5 sm:p-6">
                <div class="space-y-4 max-h-96 overflow-y-auto">
                    @forelse($errorLogs as $error)
                    <div class="border-l-4 border-red-500 pl-4">
                        <div class="flex items-start justify-between">
                            <div class="flex-1 min-w-0">
                                <p class="text-sm font-medium text-gray-900 dark:text-gray-100 truncate">
                                    <span class="font-mono">{{ $error['method'] }}</span>
                                    <span class="text-gray-500 dark:text-gray-400">{{ $error['endpoint'] }}</span>
                                </p>
                                @if($error['error_message'])
                                <p class="text-xs text-red-600 mt-1">{{ Str::limit($error['error_message'], 100) }}</p>
                                @endif
                                <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                                    @if($error['route_name'] === 'api-tester')
                                        <span class="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-indigo-100 text-indigo-800 mr-1">
                                            <i class="fas fa-code mr-1"></i>
                                            API Tester
                                        </span> •
                                    @endif
                                    @if($error['site_name'])
                                        Site: {{ $error['site_name'] }} •
                                    @endif
                                    {{ $error['created_at_human'] }}
                                </p>
                            </div>
                            <div class="ml-4">
                                <span class="px-2 py-1 text-xs font-medium rounded-full bg-red-100 text-red-800">
                                    {{ $error['status_code'] }}
                                </span>
                            </div>
                        </div>
                    </div>
                    @empty
                    <p class="text-sm text-gray-500 dark:text-gray-400">Son 7 günde hata yok</p>
                    @endforelse
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
    // Days filter
    document.getElementById('days-filter').addEventListener('change', function() {
        const days = this.value;
        window.location.href = '{{ route("api-usage.index") }}?days=' + days;
    });

    // Hourly Chart
    @if(count($hourlyStats) > 0)
    const hourlyCtx = document.getElementById('hourlyChart').getContext('2d');
    const hourlyChart = new Chart(hourlyCtx, {
        type: 'line',
        data: {
            labels: {!! json_encode(array_column($hourlyStats, 'hour')) !!},
            datasets: [
                {
                    label: 'Toplam İstek',
                    data: {!! json_encode(array_column($hourlyStats, 'total_requests')) !!},
                    borderColor: 'rgb(59, 130, 246)',
                    backgroundColor: 'rgba(59, 130, 246, 0.1)',
                    tension: 0.4
                },
                {
                    label: 'Başarılı İstek',
                    data: {!! json_encode(array_column($hourlyStats, 'successful_requests')) !!},
                    borderColor: 'rgb(34, 197, 94)',
                    backgroundColor: 'rgba(34, 197, 94, 0.1)',
                    tension: 0.4
                },
                {
                    label: 'Başarısız İstek',
                    data: {!! json_encode(array_column($hourlyStats, 'failed_requests')) !!},
                    borderColor: 'rgb(239, 68, 68)',
                    backgroundColor: 'rgba(239, 68, 68, 0.1)',
                    tension: 0.4
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: true,
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
    @endif
</script>
@endpush

    <!-- AI Usage Statistics -->
    <div class="bg-white dark:bg-gray-800 shadow overflow-hidden sm:rounded-lg mt-6">
        <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">Yapay Zeka İstek İstatistikleri</h3>
        </div>
        <div class="px-4 py-5 sm:p-6">
            <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
                <!-- Overall AI Stats -->
                <div>
                    <h4 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">Genel İstatistikler</h4>
                    <div class="bg-gray-50 dark:bg-gray-900/50 rounded-lg p-4">
                        <div class="text-3xl font-bold text-gray-900 dark:text-gray-100">{{ number_format($aiStats['total_requests']) }}</div>
                        <div class="text-sm text-gray-500 dark:text-gray-400 mt-1">Toplam AI İsteği</div>
                    </div>
                </div>

                <!-- By Provider -->
                <div>
                    <h4 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">Sağlayıcıya Göre</h4>
                    <div class="space-y-2">
                        @forelse($aiStats['by_provider'] as $provider)
                        <div class="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-900/50 rounded-lg">
                            <div>
                                <div class="font-medium text-gray-900 dark:text-gray-100 capitalize">{{ $provider['provider'] }}</div>
                                <div class="text-xs text-gray-500 dark:text-gray-400">
                                    Başarılı: {{ $provider['successful'] }} • 
                                    Başarısız: {{ $provider['failed'] }}
                                </div>
                            </div>
                            <div class="text-right">
                                <div class="text-lg font-semibold text-gray-900 dark:text-gray-100">{{ number_format($provider['count']) }}</div>
                                @if($provider['total_tokens'] > 0)
                                <div class="text-xs text-gray-500 dark:text-gray-400">{{ number_format($provider['total_tokens']) }} token</div>
                                @endif
                            </div>
                        </div>
                        @empty
                        <p class="text-sm text-gray-500 dark:text-gray-400">Henüz AI isteği yok</p>
                        @endforelse
                    </div>
                </div>
            </div>

            <!-- By Model -->
            @if(!empty($aiStats['by_model']))
            <div class="mt-6">
                <h4 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">Modele Göre</h4>
                <div class="grid grid-cols-2 gap-2">
                    @foreach($aiStats['by_model'] as $model)
                    <div class="p-3 bg-gray-50 dark:bg-gray-900/50 rounded-lg">
                        <div class="text-sm font-medium text-gray-900 dark:text-gray-100">{{ $model['model'] }}</div>
                        <div class="text-xs text-gray-500 dark:text-gray-400 mt-1">{{ $model['count'] }} istek</div>
                    </div>
                    @endforeach
                </div>
            </div>
            @endif
        </div>
    </div>

<!-- All API Routes -->
    <div class="bg-white dark:bg-gray-800 shadow overflow-hidden sm:rounded-lg mt-6">
        <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">
                <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Tüm API Endpoint'leri</h3>
                <span class="text-sm text-gray-500 dark:text-gray-400">{{ count($allApiRoutes) }} endpoint</span>
            </div>
        </div>
        <div class="px-4 py-5 sm:p-6">
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50 dark:bg-gray-900/50">
                        <tr>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                                Method
                            </th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                                Endpoint
                            </th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                                Route Name
                            </th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                                Middleware
                            </th>
                        </tr>
                    </thead>
                    <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200">
                        @forelse($allApiRoutes as $route)
                        <tr class="hover:bg-gray-50 dark:bg-gray-900/50">
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="flex flex-wrap gap-1">
                                    @foreach($route['methods'] as $method)
                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full 
                                        {{ $method === 'GET' ? 'bg-blue-100 text-blue-800' : ($method === 'POST' ? 'bg-green-100 text-green-800' : ($method === 'PUT' ? 'bg-yellow-100 text-yellow-800' : ($method === 'DELETE' ? 'bg-red-100 text-red-800' : 'bg-gray-100 text-gray-800'))) }}">
                                        {{ $method }}
                                    </span>
                                    @endforeach
                                </div>
                            </td>
                            <td class="px-6 py-4">
                                <code class="text-sm text-gray-900 dark:text-gray-100">{{ $route['uri'] }}</code>
                            </td>
                            <td class="px-6 py-4">
                                <span class="text-sm text-gray-500 dark:text-gray-400">{{ $route['name'] ?? '-' }}</span>
                            </td>
                            <td class="px-6 py-4">
                                <div class="flex flex-wrap gap-1">
                                    @foreach(array_slice($route['middleware'], 0, 3) as $middleware)
                                    <span class="px-2 py-1 text-xs font-medium rounded bg-gray-100 text-gray-700 dark:text-gray-300">
                                        {{ is_string($middleware) ? $middleware : class_basename($middleware) }}
                                    </span>
                                    @endforeach
                                    @if(count($route['middleware']) > 3)
                                    <span class="px-2 py-1 text-xs font-medium rounded bg-gray-100 text-gray-700 dark:text-gray-300">
                                        +{{ count($route['middleware']) - 3 }}
                                    </span>
                                    @endif
                                </div>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="4" class="px-6 py-4 text-center text-sm text-gray-500 dark:text-gray-400">
                                API endpoint bulunamadı
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection