@extends('layouts.admin')

@section('pageTitle', 'API Documentation')

@section('content')
<div class="container mx-auto px-4 py-8">
    <!-- Header -->
    <div class="mb-8">
        <h1 class="text-4xl font-bold text-gray-900 dark:text-white mb-2">مستندات API</h1>
        <p class="text-gray-600 dark:text-gray-400">
            مستندات کامل وب سرویس‌های اپلیکیشن یادگیری فلش‌کارت
        </p>
    </div>

    <!-- Quick Links Cards -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
        <a href="{{ route('admin.docs.swagger') }}" 
           class="bg-gradient-to-br from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 rounded-lg shadow-lg p-6 text-white transition transform hover:scale-105">
            <div class="text-4xl mb-2">🔍</div>
            <h3 class="font-bold text-lg mb-1">Swagger UI</h3>
            <p class="text-sm text-blue-100">رابط تعاملی برای تست</p>
        </a>

        <a href="{{ route('admin.docs.redoc') }}" 
           class="bg-gradient-to-br from-green-500 to-green-600 hover:from-green-600 hover:to-green-700 rounded-lg shadow-lg p-6 text-white transition transform hover:scale-105">
            <div class="text-4xl mb-2">📚</div>
            <h3 class="font-bold text-lg mb-1">ReDoc</h3>
            <p class="text-sm text-green-100">نمایش زیبای مستندات</p>
        </a>

        <a href="{{ route('admin.docs.postman') }}" 
           class="bg-gradient-to-br from-orange-500 to-orange-600 hover:from-orange-600 hover:to-orange-700 rounded-lg shadow-lg p-6 text-white transition transform hover:scale-105">
            <div class="text-4xl mb-2">📮</div>
            <h3 class="font-bold text-lg mb-1">Postman</h3>
            <p class="text-sm text-orange-100">کالکشن آماده</p>
        </a>

        <a href="{{ route('admin.docs.openapi') }}" 
           download
           class="bg-gradient-to-br from-purple-500 to-purple-600 hover:from-purple-600 hover:to-purple-700 rounded-lg shadow-lg p-6 text-white transition transform hover:scale-105">
            <div class="text-4xl mb-2">⬇️</div>
            <h3 class="font-bold text-lg mb-1">OpenAPI</h3>
            <p class="text-sm text-purple-100">دانلود JSON</p>
        </a>
    </div>

    <!-- Stats Section -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6 mb-8">
        <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-6">آمار API</h2>
        <div id="stats-container" class="grid grid-cols-2 md:grid-cols-5 gap-4">
            <div class="text-center">
                <div class="text-3xl font-bold text-blue-600 dark:text-blue-400">-</div>
                <p class="text-gray-600 dark:text-gray-400 text-sm mt-2">کل Endpoints</p>
            </div>
            <div class="text-center">
                <div class="text-3xl font-bold text-green-600 dark:text-green-400">-</div>
                <p class="text-gray-600 dark:text-gray-400 text-sm mt-2">GET</p>
            </div>
            <div class="text-center">
                <div class="text-3xl font-bold text-yellow-600 dark:text-yellow-400">-</div>
                <p class="text-gray-600 dark:text-gray-400 text-sm mt-2">POST</p>
            </div>
            <div class="text-center">
                <div class="text-3xl font-bold text-orange-600 dark:text-orange-400">-</div>
                <p class="text-gray-600 dark:text-gray-400 text-sm mt-2">PUT</p>
            </div>
            <div class="text-center">
                <div class="text-3xl font-bold text-red-600 dark:text-red-400">-</div>
                <p class="text-gray-600 dark:text-gray-400 text-sm mt-2">DELETE</p>
            </div>
        </div>
    </div>

    <!-- Features -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
        <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-6">ویژگی‌ها</h2>
        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div class="flex items-start">
                <div class="flex-shrink-0">
                    <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white">
                        <i class="fas fa-lock"></i>
                    </div>
                </div>
                <div class="ml-4">
                    <h3 class="text-lg font-bold text-gray-900 dark:text-white">احراز هویت Sanctum</h3>
                    <p class="text-gray-600 dark:text-gray-400 mt-2">محافظ طریقه Bearer Token</p>
                </div>
            </div>

            <div class="flex items-start">
                <div class="flex-shrink-0">
                    <div class="flex items-center justify-center h-12 w-12 rounded-md bg-green-500 text-white">
                        <i class="fas fa-exchange-alt"></i>
                    </div>
                </div>
                <div class="ml-4">
                    <h3 class="text-lg font-bold text-gray-900 dark:text-white">RESTful API</h3>
                    <p class="text-gray-600 dark:text-gray-400 mt-2">طراحی استاندارد HTTP</p>
                </div>
            </div>

            <div class="flex items-start">
                <div class="flex-shrink-0">
                    <div class="flex items-center justify-center h-12 w-12 rounded-md bg-yellow-500 text-white">
                        <i class="fas fa-file-json"></i>
                    </div>
                </div>
                <div class="ml-4">
                    <h3 class="text-lg font-bold text-gray-900 dark:text-white">JSON Response</h3>
                    <p class="text-gray-600 dark:text-gray-400 mt-2">فرمت استاندارد JSON</p>
                </div>
            </div>

            <div class="flex items-start">
                <div class="flex-shrink-0">
                    <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white">
                        <i class="fas fa-layer-group"></i>
                    </div>
                </div>
                <div class="ml-4">
                    <h3 class="text-lg font-bold text-gray-900 dark:text-white">Pagination</h3>
                    <p class="text-gray-600 dark:text-gray-400 mt-2">پشتیبانی صفحه‌بندی</p>
                </div>
            </div>

            <div class="flex items-start">
                <div class="flex-shrink-0">
                    <div class="flex items-center justify-center h-12 w-12 rounded-md bg-red-500 text-white">
                        <i class="fas fa-exclamation-triangle"></i>
                    </div>
                </div>
                <div class="ml-4">
                    <h3 class="text-lg font-bold text-gray-900 dark:text-white">Error Handling</h3>
                    <p class="text-gray-600 dark:text-gray-400 mt-2">مدیریت خطا قوی</p>
                </div>
            </div>

            <div class="flex items-start">
                <div class="flex-shrink-0">
                    <div class="flex items-center justify-center h-12 w-12 rounded-md bg-teal-500 text-white">
                        <i class="fas fa-book"></i>
                    </div>
                </div>
                <div class="ml-4">
                    <h3 class="text-lg font-bold text-gray-900 dark:text-white">OpenAPI 3.0</h3>
                    <p class="text-gray-600 dark:text-gray-400 mt-2">استاندارد OpenAPI</p>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    // Load statistics
    fetch('{{ route("admin.docs.stats") }}')
        .then(response => response.json())
        .then(data => {
            if (data.status === 'success') {
                const stats = data.data;
                document.querySelectorAll('#stats-container > div')[0].innerHTML = `<div class="text-3xl font-bold text-blue-600 dark:text-blue-400">${stats.total_endpoints}</div><p class="text-gray-600 dark:text-gray-400 text-sm mt-2">کل Endpoints</p>`;
                document.querySelectorAll('#stats-container > div')[1].innerHTML = `<div class="text-3xl font-bold text-green-600 dark:text-green-400">${stats.methods.GET}</div><p class="text-gray-600 dark:text-gray-400 text-sm mt-2">GET</p>`;
                document.querySelectorAll('#stats-container > div')[2].innerHTML = `<div class="text-3xl font-bold text-yellow-600 dark:text-yellow-400">${stats.methods.POST}</div><p class="text-gray-600 dark:text-gray-400 text-sm mt-2">POST</p>`;
                document.querySelectorAll('#stats-container > div')[3].innerHTML = `<div class="text-3xl font-bold text-orange-600 dark:text-orange-400">${stats.methods.PUT}</div><p class="text-gray-600 dark:text-gray-400 text-sm mt-2">PUT</p>`;
                document.querySelectorAll('#stats-container > div')[4].innerHTML = `<div class="text-3xl font-bold text-red-600 dark:text-red-400">${stats.methods.DELETE}</div><p class="text-gray-600 dark:text-gray-400 text-sm mt-2">DELETE</p>`;
            }
        })
        .catch(error => console.error('Error loading stats:', error));
</script>
@endsection