@php
/** @var \App\Models\ApiService $service */
$apiKey = $__apiKey ?? 'YOUR_API_KEY';
$samples = $service->codeSamples($apiKey);
$uid = 's'.$service->id.'-'.substr(md5($service->slug.$apiKey), 0, 6);
@endphp
<div data-tabs>
  <div class="tabs" style="overflow-x:auto;flex-wrap:nowrap">
    <button type="button" class="tab-btn active" data-tab="t-curl-{{ $uid }}">cURL</button>
    <button type="button" class="tab-btn" data-tab="t-php-{{ $uid }}">PHP</button>
    <button type="button" class="tab-btn" data-tab="t-js-{{ $uid }}">JavaScript</button>
    <button type="button" class="tab-btn" data-tab="t-py-{{ $uid }}">Python</button>
    <button type="button" class="tab-btn" data-tab="t-node-{{ $uid }}">Node.js</button>
    <button type="button" class="tab-btn" data-tab="t-res-{{ $uid }}">Response</button>
  </div>
  <div class="tab-pane active" id="t-curl-{{ $uid }}"><div class="code-box"><div class="code-head"><span>cURL</span><button type="button" onclick="copyText(document.getElementById('c-curl-{{ $uid }}').innerText, this)">Copy</button></div><pre id="c-curl-{{ $uid }}" style="white-space:pre-wrap;word-break:break-all">{{ $samples['curl'] }}</pre></div>
    <div class="alert alert-info mt" style="font-size:12px"><i class="fa-solid fa-circle-info"></i><div>Tip: You can also use <span class="mono">X-API-KEY</span> header instead of <span class="mono">api_key</span> query.</div></div>
  </div>
  <div class="tab-pane" id="t-php-{{ $uid }}"><div class="code-box"><div class="code-head"><span>PHP</span><button type="button" onclick="copyText(document.getElementById('c-php-{{ $uid }}').innerText, this)">Copy</button></div><pre id="c-php-{{ $uid }}">{{ $samples['php'] }}</pre></div></div>
  <div class="tab-pane" id="t-js-{{ $uid }}"><div class="code-box"><div class="code-head"><span>JavaScript (fetch)</span><button type="button" onclick="copyText(document.getElementById('c-js-{{ $uid }}').innerText, this)">Copy</button></div><pre id="c-js-{{ $uid }}">{{ $samples['js'] }}</pre></div></div>
  <div class="tab-pane" id="t-py-{{ $uid }}"><div class="code-box"><div class="code-head"><span>Python (requests)</span><button type="button" onclick="copyText(document.getElementById('c-py-{{ $uid }}').innerText, this)">Copy</button></div><pre id="c-py-{{ $uid }}">{{ $samples['python'] }}</pre></div></div>
  <div class="tab-pane" id="t-node-{{ $uid }}"><div class="code-box"><div class="code-head"><span>Node.js (axios)</span><button type="button" onclick="copyText(document.getElementById('c-node-{{ $uid }}').innerText, this)">Copy</button></div><pre id="c-node-{{ $uid }}">{{ $samples['node'] }}</pre></div></div>
  <div class="tab-pane" id="t-res-{{ $uid }}"><div class="code-box"><div class="code-head"><span>Sample JSON Response</span></div><pre style="max-height:320px;overflow:auto">{{ $service->sample_response ?: "{\n  \"status\": true,\n  \"data\": { ... }\n}" }}</pre></div>
    <div class="alert alert-danger"><i class="fa-solid fa-circle-exclamation"></i><div><b>Error format:</b> <span class="mono">{"status":"error","message":"Reason here"}</span></div></div>
    @if(count($service->errorCodes()))
    <div class="table-wrap mt"><table class="tbl"><tr><th>Code</th><th>Message</th><th>Description</th></tr>
      @foreach($service->errorCodes() as $e)<tr><td class="mono"><b>{{ $e['code'] ?? '' }}</b></td><td>{{ $e['message'] ?? '' }}</td><td class="text-sm text-gray">{{ $e['description'] ?? '' }}</td></tr>@endforeach
    </table></div>
    @endif
  </div>
</div>