@extends('layouts.app')

@section('page-title', 'API Tester')

@section('content')
<div class="space-y-6">
    <!-- Header -->
    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-3xl font-bold text-gray-900 dark:text-gray-100">API Tester</h1>
            <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Postman benzeri API test ve dokümantasyon aracı</p>
        </div>
        <button id="new-endpoint-btn" class="inline-flex items-center gap-2 rounded-md bg-indigo-600 dark:bg-indigo-500 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 dark:hover:bg-indigo-600">
            <i class="fas fa-plus"></i>
            Yeni Endpoint
        </button>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Sol Panel: Endpoint Listesi -->
        <div class="lg:col-span-1">
            <div class="bg-white dark:bg-gray-800 shadow rounded-lg">
                <div class="p-4 border-b border-gray-200 dark:border-gray-700">
                    <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Kayıtlı Endpoint'ler</h2>
                </div>
                <div class="p-4">
                    <!-- Koleksiyonlar -->
                    <div id="endpoints-list" class="space-y-2">
                        @foreach($endpoints as $collection => $collectionEndpoints)
                        <div class="endpoint-collection">
                            <div class="flex items-center justify-between mb-2">
                                <h3 class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ $collection ?: 'Genel' }}</h3>
                                <button class="text-xs text-indigo-600 hover:text-indigo-800 toggle-collection" data-collection="{{ $collection }}">
                                    <i class="fas fa-chevron-down"></i>
                                </button>
                            </div>
                            <div class="collection-endpoints space-y-1">
                                @foreach($collectionEndpoints as $endpoint)
                                <div class="endpoint-item p-2 border border-gray-200 dark:border-gray-700 rounded hover:bg-gray-50 dark:bg-gray-900/50 cursor-pointer" data-endpoint-id="{{ $endpoint->id }}">
                                    <div class="flex items-center justify-between">
                                        <div class="flex items-center gap-2">
                                            <span class="text-xs font-semibold px-1.5 py-0.5 rounded {{ $endpoint->method === 'GET' ? 'bg-green-100 dark:bg-green-900/50 text-green-800 dark:text-green-300' : ($endpoint->method === 'POST' ? 'bg-blue-100 dark:bg-blue-900/50 text-blue-800 dark:text-blue-300' : ($endpoint->method === 'PUT' ? 'bg-yellow-100 dark:bg-yellow-900/50 text-yellow-800 dark:text-yellow-300' : ($endpoint->method === 'DELETE' ? 'bg-red-100 dark:bg-red-900/50 text-red-800 dark:text-red-300' : 'bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-300'))) }}">
                                                {{ $endpoint->method }}
                                            </span>
                                            <span class="text-sm text-gray-900 dark:text-gray-100 truncate">{{ $endpoint->name }}</span>
                                        </div>
                                        <button class="text-red-600 hover:text-red-800 delete-endpoint" data-endpoint-id="{{ $endpoint->id }}">
                                            <i class="fas fa-trash text-xs"></i>
                                        </button>
                                    </div>
                                </div>
                                @endforeach
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>

            <!-- Sistem Route'ları -->
            @if(count($systemRoutes) > 0)
            <div class="mt-4 bg-white dark:bg-gray-800 shadow rounded-lg">
                <div class="p-4 border-b border-gray-200 dark:border-gray-700">
                    <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Sistem API'leri</h2>
                </div>
                <div class="p-4 max-h-64 overflow-y-auto">
                    <div class="space-y-1">
                        @foreach($systemRoutes as $route)
                        <div class="system-route-item p-2 border border-gray-200 dark:border-gray-700 rounded hover:bg-gray-50 dark:bg-gray-900/50 cursor-pointer" data-route-uri="{{ $route['uri'] }}" data-route-method="{{ $route['method'] }}">
                            <div class="flex items-center gap-2">
                                <span class="text-xs font-semibold px-1.5 py-0.5 rounded {{ $route['method'] === 'GET' ? 'bg-green-100 dark:bg-green-900/50 text-green-800 dark:text-green-300' : ($route['method'] === 'POST' ? 'bg-blue-100 dark:bg-blue-900/50 text-blue-800 dark:text-blue-300' : 'bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-300') }}">
                                    {{ $route['method'] }}
                                </span>
                                <span class="text-xs text-gray-700 dark:text-gray-300 truncate">{{ $route['uri'] }}</span>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
            @endif
        </div>

        <!-- Orta Panel: Request Formu -->
        <div class="lg:col-span-2">
            <div class="bg-white dark:bg-gray-800 shadow rounded-lg">
                <div class="p-4 border-b border-gray-200 dark:border-gray-700">
                    <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100">API Request</h2>
                </div>
                <form id="api-request-form" class="p-6 space-y-4">
                    <!-- Method ve URL -->
                    <div class="grid grid-cols-12 gap-3">
                        <div class="col-span-2">
                            <select name="method" id="method" class="block w-full px-4 py-2.5 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 dark:focus:border-indigo-400 transition-all duration-200">
                                <option value="GET">GET</option>
                                <option value="POST">POST</option>
                                <option value="PUT">PUT</option>
                                <option value="PATCH">PATCH</option>
                                <option value="DELETE">DELETE</option>
                            </select>
                        </div>
                        <div class="col-span-10">
                            <input type="url" name="url" id="url" placeholder="https://api.example.com/endpoint" required class="block w-full px-4 py-2.5 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 dark:focus:border-indigo-400 transition-all duration-200">
                        </div>
                    </div>

                    <!-- Tabs -->
                    <div class="border-b border-gray-200 dark:border-gray-700">
                        <nav class="-mb-px flex space-x-8">
                            <button type="button" class="tab-btn active border-b-2 border-indigo-500 py-2 px-1 text-sm font-medium text-indigo-600" data-tab="params">
                                Params
                            </button>
                            <button type="button" class="tab-btn border-b-2 border-transparent py-2 px-1 text-sm font-medium text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:text-gray-300 hover:border-gray-300 dark:border-gray-600" data-tab="headers">
                                Headers
                            </button>
                            <button type="button" class="tab-btn border-b-2 border-transparent py-2 px-1 text-sm font-medium text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:text-gray-300 hover:border-gray-300 dark:border-gray-600" data-tab="body">
                                Body
                            </button>
                            <button type="button" class="tab-btn border-b-2 border-transparent py-2 px-1 text-sm font-medium text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:text-gray-300 hover:border-gray-300 dark:border-gray-600" data-tab="auth">
                                Auth
                            </button>
                        </nav>
                    </div>

                    <!-- Params Tab -->
                    <div id="tab-params" class="tab-content">
                        <div id="query-params-container" class="space-y-2">
                            <div class="query-param-item grid grid-cols-12 gap-2">
                                <input type="text" placeholder="Key" class="col-span-5 px-4 py-2.5 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 dark:focus:border-indigo-400 transition-all duration-200">
                                <input type="text" placeholder="Value" class="col-span-5 px-4 py-2.5 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 dark:focus:border-indigo-400 transition-all duration-200">
                                <button type="button" class="col-span-2 remove-param text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-300 text-sm transition-colors">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </div>
                        </div>
                        <button type="button" id="add-param-btn" class="text-sm text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-300 transition-colors">
                            <i class="fas fa-plus mr-1"></i>
                            Param Ekle
                        </button>
                    </div>

                    <!-- Headers Tab -->
                    <div id="tab-headers" class="tab-content hidden">
                        <div id="headers-container" class="space-y-2">
                            <div class="header-item grid grid-cols-12 gap-2">
                                <input type="text" placeholder="Header Name" class="col-span-5 px-4 py-2.5 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 dark:focus:border-indigo-400 transition-all duration-200">
                                <input type="text" placeholder="Value" class="col-span-5 px-4 py-2.5 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 dark:focus:border-indigo-400 transition-all duration-200">
                                <button type="button" class="col-span-2 remove-header text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-300 text-sm transition-colors">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </div>
                        </div>
                        <button type="button" id="add-header-btn" class="text-sm text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-300 transition-colors">
                            <i class="fas fa-plus mr-1"></i>
                            Header Ekle
                        </button>
                    </div>

                    <!-- Body Tab -->
                    <div id="tab-body" class="tab-content hidden">
                        <div class="mb-2">
                            <select name="body_type" id="body_type" class="block w-full px-4 py-2.5 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 dark:focus:border-indigo-400 transition-all duration-200">
                                <option value="json">JSON</option>
                                <option value="form-data">Form Data</option>
                                <option value="x-www-form-urlencoded">x-www-form-urlencoded</option>
                                <option value="raw">Raw</option>
                            </select>
                        </div>
                        <textarea name="body" id="body" rows="10" placeholder='{"key": "value"}' class="block w-full px-4 py-2.5 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 dark:focus:border-indigo-400 transition-all duration-200 font-mono resize-none"></textarea>
                    </div>

                    <!-- Auth Tab -->
                    <div id="tab-auth" class="tab-content hidden">
                        <div class="space-y-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">Auth Type</label>
                                <select name="auth_type" id="auth_type" class="block w-full px-4 py-2.5 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 dark:focus:border-indigo-400 transition-all duration-200">
                                    <option value="none">None</option>
                                    <option value="bearer">Bearer Token</option>
                                    <option value="api_key">API Key</option>
                                    <option value="basic">Basic Auth</option>
                                </select>
                            </div>
                            <div id="auth-config-container" class="space-y-2">
                                <!-- Auth config dinamik olarak eklenecek -->
                            </div>
                        </div>
                    </div>

                    <!-- Actions -->
                    <div class="flex items-center justify-between pt-4 border-t border-gray-200 dark:border-gray-700">
                        <div class="flex items-center gap-2">
                            <button type="submit" class="inline-flex items-center gap-2 rounded-lg bg-indigo-600 dark:bg-indigo-500 px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 dark:hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 transition-all duration-200">
                                <i class="fas fa-paper-plane"></i>
                                Send
                            </button>
                            <button type="button" id="save-endpoint-btn" class="inline-flex items-center gap-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-4 py-2.5 text-sm font-semibold text-gray-700 dark:text-gray-300 shadow-sm hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:focus:ring-gray-400 transition-all duration-200">
                                <i class="fas fa-save"></i>
                                Kaydet
                            </button>
                        </div>
                    </div>
                </form>
            </div>

            <!-- Response Panel -->
            <div id="response-panel" class="mt-6 bg-white dark:bg-gray-800 shadow rounded-lg hidden">
                <div class="p-4 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
                    <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Response</h2>
                    <div id="response-status" class="flex items-center gap-2">
                        <span id="status-code" class="text-sm font-semibold"></span>
                        <span id="response-time" class="text-xs text-gray-500 dark:text-gray-400"></span>
                    </div>
                </div>
                <div class="p-4">
                    <div id="response-content" class="bg-gray-900 text-green-400 p-4 rounded font-mono text-sm overflow-x-auto">
                        <!-- Response buraya gelecek -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
// API Tester JavaScript
(function() {
    const form = document.getElementById('api-request-form');
    const responsePanel = document.getElementById('response-panel');
    const responseContent = document.getElementById('response-content');
    const statusCode = document.getElementById('status-code');
    const responseTime = document.getElementById('response-time');
    
    // Tab switching
    document.querySelectorAll('.tab-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            const tab = this.dataset.tab;
            
            // Remove active class from all tabs
            document.querySelectorAll('.tab-btn').forEach(b => {
                b.classList.remove('active', 'border-indigo-500', 'text-indigo-600');
                b.classList.add('border-transparent', 'text-gray-500 dark:text-gray-400');
            });
            
            // Hide all tab contents
            document.querySelectorAll('.tab-content').forEach(c => c.classList.add('hidden'));
            
            // Show selected tab
            this.classList.add('active', 'border-indigo-500', 'text-indigo-600');
            this.classList.remove('border-transparent', 'text-gray-500 dark:text-gray-400');
            document.getElementById(`tab-${tab}`).classList.remove('hidden');
        });
    });

    // Add param
    document.getElementById('add-param-btn')?.addEventListener('click', function() {
        const container = document.getElementById('query-params-container');
        const item = document.createElement('div');
        item.className = 'query-param-item grid grid-cols-12 gap-2';
        item.innerHTML = `
            <input type="text" name="query_key[]" placeholder="Key" class="col-span-5 px-4 py-2.5 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 dark:focus:border-indigo-400 transition-all duration-200">
            <input type="text" name="query_value[]" placeholder="Value" class="col-span-5 px-4 py-2.5 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 dark:focus:border-indigo-400 transition-all duration-200">
            <button type="button" class="col-span-2 remove-param text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-300 text-sm transition-colors">
                <i class="fas fa-trash"></i>
            </button>
        `;
        container.appendChild(item);
    });

    // Remove param
    document.getElementById('query-params-container')?.addEventListener('click', function(e) {
        if (e.target.closest('.remove-param')) {
            e.target.closest('.query-param-item').remove();
        }
    });

    // Add header
    document.getElementById('add-header-btn')?.addEventListener('click', function() {
        const container = document.getElementById('headers-container');
        const item = document.createElement('div');
        item.className = 'header-item grid grid-cols-12 gap-2';
        item.innerHTML = `
            <input type="text" name="header_key[]" placeholder="Header Name" class="col-span-5 px-4 py-2.5 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 dark:focus:border-indigo-400 transition-all duration-200">
            <input type="text" name="header_value[]" placeholder="Value" class="col-span-5 px-4 py-2.5 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 dark:focus:border-indigo-400 transition-all duration-200">
            <button type="button" class="col-span-2 remove-header text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-300 text-sm transition-colors">
                <i class="fas fa-trash"></i>
            </button>
        `;
        container.appendChild(item);
    });

    // Remove header
    document.getElementById('headers-container')?.addEventListener('click', function(e) {
        if (e.target.closest('.remove-header')) {
            e.target.closest('.header-item').remove();
        }
    });

    // Auth type change
    document.getElementById('auth_type')?.addEventListener('change', function() {
        const container = document.getElementById('auth-config-container');
        const type = this.value;
        
        if (type === 'none') {
            container.innerHTML = '';
            return;
        }
        
        let html = '';
        if (type === 'bearer') {
            html = '<input type="text" name="auth_config[token]" placeholder="Bearer Token" class="block w-full px-4 py-2.5 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 dark:focus:border-indigo-400 transition-all duration-200">';
        } else if (type === 'api_key') {
            html = `
                <input type="text" name="auth_config[header_name]" placeholder="Header Name (e.g., X-API-Key)" class="block w-full px-4 py-2.5 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 dark:focus:border-indigo-400 transition-all duration-200 mb-2">
                <input type="text" name="auth_config[api_key]" placeholder="API Key" class="block w-full px-4 py-2.5 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 dark:focus:border-indigo-400 transition-all duration-200">
            `;
        } else if (type === 'basic') {
            html = `
                <input type="text" name="auth_config[username]" placeholder="Username" class="block w-full px-4 py-2.5 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 dark:focus:border-indigo-400 transition-all duration-200 mb-2">
                <input type="password" name="auth_config[password]" placeholder="Password" class="block w-full px-4 py-2.5 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 dark:focus:border-indigo-400 transition-all duration-200">
            `;
        }
        
        container.innerHTML = html;
    });

    // Form submit
    form?.addEventListener('submit', async function(e) {
        e.preventDefault();
        
        // Collect form data
        const formData = new FormData(form);
        const data = {
            method: formData.get('method'),
            url: formData.get('url'),
            headers: {},
            query_params: {},
            body: formData.get('body') || null,
            body_type: formData.get('body_type') || 'json',
            auth_type: formData.get('auth_type') || 'none',
            auth_config: {},
        };

        // Collect query params
        const queryKeys = formData.getAll('query_key[]');
        const queryValues = formData.getAll('query_value[]');
        queryKeys.forEach((key, index) => {
            if (key && queryValues[index]) {
                data.query_params[key] = queryValues[index];
            }
        });

        // Collect headers
        const headerKeys = formData.getAll('header_key[]');
        const headerValues = formData.getAll('header_value[]');
        headerKeys.forEach((key, index) => {
            if (key && headerValues[index]) {
                data.headers[key] = headerValues[index];
            }
        });

        // Collect auth config
        if (data.auth_type !== 'none') {
            const authConfig = {};
            if (data.auth_type === 'bearer') {
                authConfig.token = formData.get('auth_config[token]');
            } else if (data.auth_type === 'api_key') {
                authConfig.header_name = formData.get('auth_config[header_name]');
                authConfig.api_key = formData.get('auth_config[api_key]');
            } else if (data.auth_type === 'basic') {
                authConfig.username = formData.get('auth_config[username]');
                authConfig.password = formData.get('auth_config[password]');
            }
            data.auth_config = authConfig;
        }

        // Show loading
        responsePanel.classList.remove('hidden');
        responseContent.textContent = 'Sending request...';
        statusCode.textContent = '';
        responseTime.textContent = '';

        try {
            const response = await fetch('{{ route("api-tester.test") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                },
                body: JSON.stringify(data)
            });

            const result = await response.json();

            // Show response
            statusCode.textContent = result.status_code || 'Error';
            statusCode.className = result.status_code >= 200 && result.status_code < 300 ? 'text-green-600' : 'text-red-600';
            responseTime.textContent = result.response_time ? `${result.response_time}ms` : '';
            
            responseContent.textContent = JSON.stringify(result.response || result, null, 2);
        } catch (error) {
            statusCode.textContent = 'Error';
            statusCode.className = 'text-red-600';
            responseContent.textContent = error.message;
        }
    });

    // Endpoint item click
    document.querySelectorAll('.endpoint-item').forEach(item => {
        item.addEventListener('click', function() {
            const endpointId = this.dataset.endpointId;
            // Load endpoint data
            // TODO: Implement endpoint loading
        });
    });

    // System route click
    document.querySelectorAll('.system-route-item').forEach(item => {
        item.addEventListener('click', function() {
            document.getElementById('method').value = this.dataset.routeMethod;
            document.getElementById('url').value = `{{ url('/') }}/api/${this.dataset.routeUri}`;
        });
    });
})();
</script>
@endpush
@endsection