@extends('layouts.app')

@section('title', 'API - Christian Bible Learning Platform')
@section('meta_description', 'API documentation: Bible search and external Bible API (bible-api.com) integration.')

@section('content')
<div class="container">
    <h1 class="mb-4">API</h1>
    <p class="lead text-muted">Use our API to search the Bible or fetch verses from the free external <a href="https://bible-api.com/" target="_blank" rel="noopener">bible-api.com</a> (no key required).</p>

    <p><strong>Base URL:</strong> <code>{{ $base }}</code></p>
    <p class="small text-muted">For JSON listing of endpoints: <a href="{{ $base }}" target="_blank">{{ $base }}</a></p>

    <h2 class="h5 mt-4 mb-3">Endpoints</h2>
    <div class="table-responsive">
        <table class="table table-bordered bg-white">
            <thead>
                <tr>
                    <th>Method</th>
                    <th>Description</th>
                    <th>Example URL</th>
                </tr>
            </thead>
            <tbody>
                @foreach($endpoints as $ep)
                <tr>
                    <td><span class="badge bg-primary">{{ $ep['method'] }}</span></td>
                    <td>{{ $ep['description'] }}</td>
                    <td><code class="small">{{ $ep['url'] }}</code></td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>

    <div class="card mt-4">
        <div class="card-body">
            <h2 class="h5 card-title">External Bible API (bible-api.com)</h2>
            <p class="card-text">We integrate with <a href="https://bible-api.com/" target="_blank" rel="noopener">bible-api.com</a>: free, no API key, CORS enabled. Use the <code>/api/bible/external</code> and <code>/api/bible/external/random</code> and <code>/api/bible/external/data</code> endpoints above. Translations: web, kjv, asv, bbe, darby, and more.</p>
        </div>
    </div>
</div>
@endsection