@extends('layouts.admin')

@section('pageTitle', 'Postman Collection')

@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">Postman Collection</h1>
        <p class="text-gray-600 dark:text-gray-400">
            دانلود کالکشن Postman برای تست API
        </p>
    </div>

    <!-- Collection Info -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
            <div class="mb-4">
                <i class="fas fa-download text-3xl text-blue-600 dark:text-blue-400"></i>
            </div>
            <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-2">دانلود Collection</h3>
            <p class="text-gray-600 dark:text-gray-400 mb-4 text-sm">
                فایل JSON کامل برای استفاده در Postman
            </p>
            <a href="{{ route('admin.docs.postman') }}" 
               download="flashcard-api.postman_collection.json"
               class="inline-block px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg text-sm font-semibold">
                دانلود JSON
            </a>
        </div>

        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
            <div class="mb-4">
                <i class="fas fa-cloud text-3xl text-green-600 dark:text-green-400"></i>
            </div>
            <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-2">ورود به Postman</h3>
            <p class="text-gray-600 dark:text-gray-400 mb-4 text-sm">
                راهنمای وارد کردن Collection در Postman
            </p>
            <button onclick="showImportGuide()" 
                    class="inline-block px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg text-sm font-semibold">
                نمایش راهنما
            </button>
        </div>

        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
            <div class="mb-4">
                <i class="fas fa-book text-3xl text-purple-600 dark:text-purple-400"></i>
            </div>
            <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-2">مستندات</h3>
            <p class="text-gray-600 dark:text-gray-400 mb-4 text-sm">
                مستندات کامل API
            </p>
            <a href="{{ route('admin.docs.swagger') }}" 
               class="inline-block px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-lg text-sm font-semibold">
                Swagger UI
            </a>
        </div>
    </div>

    <!-- Import Guide Modal -->
    <div id="importGuide" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg max-w-2xl w-full p-6">
            <div class="flex justify-between items-center mb-4">
                <h2 class="text-2xl font-bold text-gray-900 dark:text-white">راهنمای وارد کردن Collection</h2>
                <button onclick="document.getElementById('importGuide').classList.add('hidden')" 
                        class="text-gray-500 hover:text-gray-700 dark:hover:text-gray-300">
                    <i class="fas fa-times text-2xl"></i>
                </button>
            </div>

            <div class="space-y-4 text-gray-700 dark:text-gray-300">
                <div>
                    <h3 class="font-bold text-lg mb-2">مراحل وارد کردن:</h3>
                    <ol class="list-decimal list-inside space-y-2">
                        <li>Postman را باز کنید</li>
                        <li>بر روی دکمه "Import" در گوشه بالا سمت چپ کلیک کنید</li>
                        <li>فایل JSON دانلود شده را انتخاب کنید یا URL را چسباندید:</li>
                        <li class="bg-gray-100 dark:bg-gray-700 p-2 rounded font-mono text-sm">
                            {{ route('admin.docs.postman') }}
                        </li>
                        <li>بر روی "Import" کلیک کنید</li>
                    </ol>
                </div>

                <div class="bg-blue-50 dark:bg-blue-900 border border-blue-200 dark:border-blue-700 rounded p-4">
                    <p class="text-sm"><strong>نکته:</strong> پس از وارد کردن، متغیر <code class="bg-gray-200 dark:bg-gray-700 px-1 rounded">token</code> را با توکن احراز هویت خود جایگزین کنید.</p>
                </div>

                <div class="bg-green-50 dark:bg-green-900 border border-green-200 dark:border-green-700 rounded p-4">
                    <p class="text-sm"><strong>متغیرها:</strong></p>
                    <ul class="list-disc list-inside mt-2">
                        <li><code class="bg-gray-200 dark:bg-gray-700 px-1 rounded">base_url</code>: آدرس سرور API</li>
                        <li><code class="bg-gray-200 dark:bg-gray-700 px-1 rounded">token</code>: توکن Bearer احراز هویت</li>
                    </ul>
                </div>
            </div>

            <div class="mt-6 flex justify-end">
                <button onclick="document.getElementById('importGuide').classList.add('hidden')" 
                        class="px-4 py-2 bg-gray-300 dark:bg-gray-700 hover:bg-gray-400 dark:hover:bg-gray-600 text-gray-900 dark:text-white rounded-lg font-semibold">
                    بستن
                </button>
            </div>
        </div>
    </div>

    <!-- Collection Preview -->
    <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-4">مقدمه</h2>
        
        <div class="prose dark:prose-invert max-w-none">
            <p class="text-gray-700 dark:text-gray-300 mb-4">
                این کالکشن شامل تمام API endpoints برای اپلیکیشن یادگیری فلش‌کارت است. می‌توانید از آن برای تست و توسعه استفاده کنید.
            </p>

            <h3 class="text-xl font-bold text-gray-900 dark:text-white mt-6 mb-3">ویژگی‌ها:</h3>
            <ul class="list-disc list-inside space-y-2 text-gray-700 dark:text-gray-300">
                <li>✅ تمام endpoints سازمان‌یافته در پوشه‌ها</li>
                <li>✅ مثال‌های درخواست و پاسخ</li>
                <li>✅ متغیرهای محیط (Environment)</li>
                <li>✅ احراز هویت Bearer Token خودکار</li>
                <li>✅ پیش‌تنظیم headers مورد نیاز</li>
            </ul>

            <h3 class="text-xl font-bold text-gray-900 dark:text-white mt-6 mb-3">نسخه‌های موجود:</h3>
            <div class="bg-gray-50 dark:bg-gray-700 rounded p-4 font-mono text-sm">
                <p class="text-gray-600 dark:text-gray-300">API Version: 1.0.0</p>
                <p class="text-gray-600 dark:text-gray-300">Base URL: {{ url('/api') }}</p>
            </div>
        </div>
    </div>
</div>

<script>
    function showImportGuide() {
        document.getElementById('importGuide').classList.remove('hidden');
    }
</script>
@endsection