@extends('layouts.app')

@section('title', 'API Documentation Viewer')

@section('content')
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
    <div class="mb-10 flex items-center justify-between">
        <div>
            <h1 class="text-3xl font-extrabold text-secondary mb-2">API Documentation</h1>
            <p class="text-gray-600">Complete reference for all available endpoints, required parameters, and headers.</p>
        </div>
        <a href="{{ route('dashboard') }}" class="text-sm font-medium text-gray-500 hover:text-primary">&larr; Back to Portal</a>
    </div>

    @if(isset($endpoints) && count($endpoints) > 0)
        <div class="space-y-6">
            @foreach($endpoints as $key => $endpoint)
            <div class="bg-white border rounded-xl shadow-sm overflow-hidden">
                <div class="border-b bg-gray-50 px-6 py-4 flex flex-col md:flex-row md:items-center justify-between">
                    <div class="flex items-center space-x-3 mb-2 md:mb-0">
                        <span class="px-3 py-1 bg-primary text-white text-xs font-bold rounded uppercase">{{ $endpoint['method'] ?? 'GET' }}</span>
                        <h3 class="text-lg font-bold text-gray-800">{{ ucfirst(str_replace('_', ' ', $key)) }}</h3>
                    </div>
                </div>
                <div class="p-6">
                    <div class="mb-4">
                        <p class="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-1">Endpoint URL</p>
                        <code class="bg-gray-100 px-3 py-2 rounded text-sm text-gray-800 break-all border border-gray-200 block">{{ $endpoint['endpoint'] ?? '' }}</code>
                    </div>
                    
                    <div class="mb-4">
                        <p class="text-gray-700">{{ $endpoint['description'] ?? 'No description.' }}</p>
                    </div>

                    @if(!empty($endpoint['headers']))
                        <div class="mt-4">
                            <h4 class="text-sm font-semibold text-gray-900 mb-2">Headers</h4>
                            <ul class="list-disc pl-5 space-y-1 text-sm text-gray-600">
                                @foreach($endpoint['headers'] as $header)
                                    <li><code>{{ $header }}</code></li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    @if(!empty($endpoint['required_params']))
                        <div class="mt-4">
                            <h4 class="text-sm font-semibold text-gray-900 mb-2">Required Parameters</h4>
                            <ul class="list-disc pl-5 space-y-1 text-sm text-gray-600">
                                @foreach($endpoint['required_params'] as $param)
                                    <li><code>{{ $param }}</code></li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    @if(!empty($endpoint['optional_params']))
                        <div class="mt-4">
                            <h4 class="text-sm font-semibold text-gray-900 mb-2">Optional Parameters</h4>
                            <div class="bg-gray-50 border rounded-lg p-3">
                                @foreach($endpoint['optional_params'] as $param => $desc)
                                    <div class="mb-1 text-sm"><code class="font-bold text-gray-800">{{ $param }}</code>: <span class="text-gray-600">{{ $desc }}</span></div>
                                @endforeach
                            </div>
                        </div>
                    @endif
                </div>
            </div>
            @endforeach
        </div>
    @else
        <div class="p-6 bg-red-50 text-red-600 rounded-lg">Failed to load API Documentation data. Make sure ApiAndResponse.txt is accessible.</div>
    @endif
</div>
@endsection