@extends('examples.modern-layout-v2')
@section('title', __('messages.menu.api_documentation'))
@section('api_documentation', 'bg-blue-50 text-blue-700')

@section('content')
<div class="space-y-6">
    <!-- Page Header -->
    <div class="mb-8">
        <div class="flex items-center justify-between">
            <div>
                <h2 class="text-3xl font-bold text-gray-900 mb-2">{{__('messages.menu.api_documentation')}}</h2>
                <p class="text-gray-600">Complete API documentation for QFlow Manager App integration</p>
            </div>
        </div>
    </div>

    <!-- API Base URL -->
    <div class="bg-blue-50 border border-blue-200 rounded-2xl p-6 mb-6">
        <div class="flex items-center mb-2">
            <span class="material-icons text-blue-600 mr-2">link</span>
            <span class="font-semibold text-blue-900">Base URL</span>
        </div>
        <code class="text-blue-800 font-mono text-lg">{{$apiBaseUrl}}/api</code>
    </div>

    <!-- Endpoints -->
    @foreach($endpoints as $category => $categoryEndpoints)
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 mb-6">
        <h3 class="text-2xl font-bold text-gray-900 mb-4 capitalize">{{$category}}</h3>
        
        @foreach($categoryEndpoints as $endpoint => $details)
        <div class="mb-6 pb-6 border-b border-gray-100 last:border-0 last:pb-0 last:mb-0">
            <div class="flex items-start mb-3">
                <span class="material-icons text-gray-400 mr-2 mt-1">api</span>
                <div class="flex-1">
                    <code class="text-lg font-mono text-gray-900 bg-gray-50 px-3 py-1 rounded">{{$endpoint}}</code>
                    <p class="text-gray-600 mt-2">{{$details['description'] ?? ''}}</p>
                </div>
            </div>

            @if(isset($details['headers']))
            <div class="mt-4">
                <h4 class="font-semibold text-gray-700 mb-2">Headers:</h4>
                <div class="bg-gray-50 rounded-lg p-3">
                    @foreach($details['headers'] as $header => $value)
                    <div class="text-sm font-mono text-gray-700 mb-1">
                        <span class="text-gray-500">{{$header}}:</span> {{$value}}
                    </div>
                    @endforeach
                </div>
            </div>
            @endif

            @if(isset($details['query_params']))
            <div class="mt-4">
                <h4 class="font-semibold text-gray-700 mb-2">Query Parameters:</h4>
                <div class="bg-gray-50 rounded-lg p-3">
                    @foreach($details['query_params'] as $param => $type)
                    <div class="text-sm font-mono text-gray-700 mb-1">
                        <span class="text-gray-500">{{$param}}:</span> <span class="text-blue-600">{{$type}}</span>
                    </div>
                    @endforeach
                </div>
            </div>
            @endif

            @if(isset($details['request']))
            <div class="mt-4">
                <h4 class="font-semibold text-gray-700 mb-2">Request Body:</h4>
                <div class="bg-gray-50 rounded-lg p-3">
                    @foreach($details['request'] as $field => $type)
                    <div class="text-sm font-mono text-gray-700 mb-1">
                        <span class="text-gray-500">{{$field}}:</span> <span class="text-blue-600">{{$type}}</span>
                    </div>
                    @endforeach
                </div>
            </div>
            @endif

            @if(isset($details['response']))
            <div class="mt-4">
                <h4 class="font-semibold text-gray-700 mb-2">Response:</h4>
                <div class="bg-gray-50 rounded-lg p-3">
                    @foreach($details['response'] as $field => $type)
                    <div class="text-sm font-mono text-gray-700 mb-1">
                        <span class="text-gray-500">{{$field}}:</span> <span class="text-green-600">{{$type}}</span>
                    </div>
                    @endforeach
                </div>
            </div>
            @endif
        </div>
        @endforeach
    </div>
    @endforeach
</div>
@endsection