@extends('master')
@section('content')
<div class="container">
    <div class="row">
        <div class="col">
            <div class="page-description d-flex align-items-center justify-content-between">
                <h1>API Documentation</h1>
                <a href="{{ route('api-management.index') }}" class="btn btn-outline-secondary">
                    <i class="material-icons-outlined">arrow_back</i> Kembali
                </a>
            </div>
        </div>
    </div>

    {{-- Authentication --}}
    <div class="row">
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0"><i class="material-icons-outlined">lock</i> Authentication</h5>
                </div>
                <div class="card-body">
                    <p>Semua API endpoint memerlukan API key yang valid. Sertakan key pada header <code>Authorization</code>:</p>
                    <pre class="bg-dark text-light p-3 rounded"><code>Authorization: Bearer sk_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</code></pre>
                    <div class="alert alert-info">
                        <i class="material-icons-outlined" style="font-size:16px;vertical-align:middle;">info</i>
                        API key bisa didapatkan dari halaman <a href="{{ route('api-management.index') }}">API Management</a> (Super Admin only).
                    </div>
                </div>
            </div>

            {{-- Base URL --}}
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0"><i class="material-icons-outlined">link</i> Base URL</h5>
                </div>
                <div class="card-body">
                    <pre class="bg-dark text-light p-3 rounded"><code>{{ url('/api/v1') }}</code></pre>
                </div>
            </div>

            {{-- Response Format --}}
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0"><i class="material-icons-outlined">data_object</i> Response Format</h5>
                </div>
                <div class="card-body">
                    <p>Semua response menggunakan format JSON envelope yang konsisten:</p>
                    <h6>Success Response:</h6>
                    <pre class="bg-dark text-light p-3 rounded"><code>{
    "success": true,
    "message": "Data retrieved successfully",
    "data": [...],
    "meta": {
        "current_page": 1,
        "per_page": 25,
        "total": 150,
        "last_page": 6
    }
}</code></pre>
                    <h6 class="mt-3">Error Response:</h6>
                    <pre class="bg-dark text-light p-3 rounded"><code>{
    "success": false,
    "message": "Deskripsi error",
    "error_code": "ERROR_CODE"
}</code></pre>
                </div>
            </div>

            {{-- Endpoints --}}
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0"><i class="material-icons-outlined">api</i> Endpoints</h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-bordered">
                            <thead class="table-light">
                                <tr>
                                    <th>Method</th>
                                    <th>Endpoint</th>
                                    <th>Scope</th>
                                    <th>Deskripsi</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr><td colspan="4" class="fw-bold bg-light">Stock</td></tr>
                                <tr>
                                    <td><span class="badge bg-success">GET</span></td>
                                    <td><code>/stock/master</code></td>
                                    <td><code>stock:read</code></td>
                                    <td>Data master stok (semua item)</td>
                                </tr>
                                <tr>
                                    <td><span class="badge bg-success">GET</span></td>
                                    <td><code>/stock/{lab}</code></td>
                                    <td><code>stock:read</code></td>
                                    <td>Stok per sub-lab (mikro/cpo/ci)</td>
                                </tr>

                                <tr><td colspan="4" class="fw-bold bg-light">Items</td></tr>
                                <tr>
                                    <td><span class="badge bg-success">GET</span></td>
                                    <td><code>/items</code></td>
                                    <td><code>items:read</code></td>
                                    <td>Katalog item reference (paginated)</td>
                                </tr>
                                <tr>
                                    <td><span class="badge bg-success">GET</span></td>
                                    <td><code>/items/{item_code}</code></td>
                                    <td><code>items:read</code></td>
                                    <td>Detail item berdasarkan kode</td>
                                </tr>

                                <tr><td colspan="4" class="fw-bold bg-light">Transactions</td></tr>
                                <tr>
                                    <td><span class="badge bg-success">GET</span></td>
                                    <td><code>/transactions/received/{lab}</code></td>
                                    <td><code>transactions:read</code></td>
                                    <td>History penerimaan per lab</td>
                                </tr>
                                <tr>
                                    <td><span class="badge bg-success">GET</span></td>
                                    <td><code>/transactions/expense/{lab}</code></td>
                                    <td><code>transactions:read</code></td>
                                    <td>History pengeluaran per lab</td>
                                </tr>

                                <tr><td colspan="4" class="fw-bold bg-light">Verification</td></tr>
                                <tr>
                                    <td><span class="badge bg-success">GET</span></td>
                                    <td><code>/verification/{lab}</code></td>
                                    <td><code>verification:read</code></td>
                                    <td>Status verifikasi terbaru</td>
                                </tr>
                                <tr>
                                    <td><span class="badge bg-success">GET</span></td>
                                    <td><code>/verification/{lab}/history</code></td>
                                    <td><code>verification:read</code></td>
                                    <td>History verifikasi</td>
                                </tr>

                                <tr><td colspan="4" class="fw-bold bg-light">Expiry</td></tr>
                                <tr>
                                    <td><span class="badge bg-success">GET</span></td>
                                    <td><code>/expiry-alerts</code></td>
                                    <td><code>expiry:read</code></td>
                                    <td>Item mendekati kedaluwarsa (?days=90)</td>
                                </tr>

                                <tr><td colspan="4" class="fw-bold bg-light">Destruction</td></tr>
                                <tr>
                                    <td><span class="badge bg-success">GET</span></td>
                                    <td><code>/destruction/requests</code></td>
                                    <td><code>destruction:read</code></td>
                                    <td>Daftar request pemusnahan</td>
                                </tr>
                                <tr>
                                    <td><span class="badge bg-success">GET</span></td>
                                    <td><code>/destruction/requests/{poolingreq}</code></td>
                                    <td><code>destruction:read</code></td>
                                    <td>Detail request pemusnahan</td>
                                </tr>

                                <tr><td colspan="4" class="fw-bold bg-light">Settings</td></tr>
                                <tr>
                                    <td><span class="badge bg-success">GET</span></td>
                                    <td><code>/minmax/{lab}</code></td>
                                    <td><code>settings:read</code></td>
                                    <td>Setting min/max per lab</td>
                                </tr>

                                <tr><td colspan="4" class="fw-bold bg-light">Staging</td></tr>
                                <tr>
                                    <td><span class="badge bg-success">GET</span></td>
                                    <td><code>/staging/{lab}</code></td>
                                    <td><code>staging:read</code></td>
                                    <td>Daftar staging/pooling</td>
                                </tr>
                                <tr>
                                    <td><span class="badge bg-success">GET</span></td>
                                    <td><code>/staging/{lab}/{pooling_number}</code></td>
                                    <td><code>staging:read</code></td>
                                    <td>Detail item dalam pooling</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <div class="alert alert-secondary mt-3">
                        <strong>Parameter {lab}:</strong> Nilai yang valid: <code>mikro</code>, <code>cpo</code>, <code>ci</code>
                    </div>
                </div>
            </div>

            {{-- Query Parameters --}}
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0"><i class="material-icons-outlined">tune</i> Query Parameters</h5>
                </div>
                <div class="card-body">
                    <p>Semua list endpoint mendukung query parameters berikut:</p>
                    <table class="table table-bordered">
                        <thead class="table-light">
                            <tr>
                                <th>Parameter</th>
                                <th>Default</th>
                                <th>Keterangan</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><code>per_page</code></td>
                                <td>25</td>
                                <td>Jumlah item per halaman (max: 100)</td>
                            </tr>
                            <tr>
                                <td><code>page</code></td>
                                <td>1</td>
                                <td>Nomor halaman</td>
                            </tr>
                            <tr>
                                <td><code>search</code></td>
                                <td>-</td>
                                <td>Pencarian berdasarkan item_code atau item_description</td>
                            </tr>
                            <tr>
                                <td><code>sort</code></td>
                                <td>created_at</td>
                                <td>Field untuk sorting</td>
                            </tr>
                            <tr>
                                <td><code>order</code></td>
                                <td>desc</td>
                                <td>Arah sorting: asc atau desc</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            {{-- Error Codes --}}
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0"><i class="material-icons-outlined">error</i> Error Codes</h5>
                </div>
                <div class="card-body">
                    <table class="table table-bordered">
                        <thead class="table-light">
                            <tr>
                                <th>HTTP Code</th>
                                <th>Error Code</th>
                                <th>Keterangan</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><span class="badge bg-warning">401</span></td>
                                <td><code>MISSING_API_KEY</code></td>
                                <td>Header Authorization tidak ada</td>
                            </tr>
                            <tr>
                                <td><span class="badge bg-warning">401</span></td>
                                <td><code>INVALID_API_KEY</code></td>
                                <td>API key tidak ditemukan</td>
                            </tr>
                            <tr>
                                <td><span class="badge bg-warning">401</span></td>
                                <td><code>INACTIVE_API_KEY</code></td>
                                <td>API key nonaktif</td>
                            </tr>
                            <tr>
                                <td><span class="badge bg-warning">401</span></td>
                                <td><code>REVOKED_API_KEY</code></td>
                                <td>API key telah dicabut</td>
                            </tr>
                            <tr>
                                <td><span class="badge bg-warning">401</span></td>
                                <td><code>EXPIRED_API_KEY</code></td>
                                <td>API key sudah kedaluwarsa</td>
                            </tr>
                            <tr>
                                <td><span class="badge bg-danger">403</span></td>
                                <td><code>INSUFFICIENT_SCOPE</code></td>
                                <td>Key tidak memiliki scope yang diperlukan</td>
                            </tr>
                            <tr>
                                <td><span class="badge bg-danger">429</span></td>
                                <td><code>RATE_LIMIT_EXCEEDED</code></td>
                                <td>Batas rate limit tercapai</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            {{-- Rate Limiting --}}
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0"><i class="material-icons-outlined">speed</i> Rate Limiting</h5>
                </div>
                <div class="card-body">
                    <p>Setiap API key memiliki rate limit per menit. Info rate limit tersedia di response headers:</p>
                    <pre class="bg-dark text-light p-3 rounded"><code>X-RateLimit-Limit: 60
X-RateLimit-Remaining: 58
Retry-After: 45  (hanya saat limit tercapai)</code></pre>
                </div>
            </div>
        </div>

        {{-- Sidebar: Scopes --}}
        <div class="col-lg-4">
            <div class="card">
                <div class="card-header">
                    <h6 class="card-title mb-0"><i class="material-icons-outlined">security</i> Available Scopes</h6>
                </div>
                <div class="card-body">
                    <ul class="list-unstyled mb-0">
                        @foreach($availableScopes as $scope => $description)
                        <li class="mb-2">
                            <code>{{ $scope }}</code><br>
                            <small class="text-muted">{{ $description }}</small>
                        </li>
                        @endforeach
                    </ul>
                </div>
            </div>

            <div class="card">
                <div class="card-header">
                    <h6 class="card-title mb-0"><i class="material-icons-outlined">terminal</i> Contoh cURL</h6>
                </div>
                <div class="card-body">
                    <pre class="bg-dark text-light p-3 rounded" style="font-size:12px;"><code>curl -X GET \
  {{ url('/api/v1/stock/master') }} \
  -H "Authorization: Bearer sk_your_key_here" \
  -H "Accept: application/json"</code></pre>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection