@extends('layouts.app')
@section('title', $service->name)
@section('active', 'services')
@section('content')
<div class="wrap page">
  <a href="{{ route('home') }}#services" class="btn btn-outline btn-sm mb"><i class="fa-solid fa-arrow-left"></i> All APIs</a>

  <div class="card">
    <div class="flex wrap-x gap" style="align-items:flex-start">
      <div class="svc-ic" style="width:64px;height:64px;font-size:28px;flex-shrink:0"><i class="fa-solid {{ $service->icon ?: 'fa-plug' }}"></i></div>
      <div style="flex:1;min-width:240px">
        <h1 style="font-size:30px;font-weight:900">{{ $service->name }}</h1>
        <p class="text-gray">{{ $service->description }}</p>
        @if($service->useCaseList())
          <div class="api-use-cases mt"><b><i class="fa-solid fa-circle-check" style="color:var(--success)"></i> What this API can do</b><ul>@foreach($service->useCaseList() as $use)<li>{{ $use }}</li>@endforeach</ul></div>
        @endif
        <div class="svc-meta mt" style="flex-wrap:wrap">
          <span class="mini-tag blue"><i class="fa-solid fa-coins"></i> {{ (int) $service->credits_per_hit }} credit/hit</span>
          <span class="mini-tag">{{ strtoupper($service->method) }}</span>
          <span class="mini-tag"><i class="fa-solid fa-bolt"></i> {{ (int) setting('api_rate_limit',60) }}/min • {{ (int) setting('api_ip_rate_limit',120) }}/min IP</span>
          <span class="mini-tag"><i class="fa-solid fa-stopwatch"></i> ~{{ $stats['avg_ms'] }}ms</span>
          <span class="mini-tag"><i class="fa-solid fa-circle-check" style="color:var(--success)"></i> {{ $stats['success_24h'] }}% success</span>
          <span class="mini-tag"><i class="fa-solid fa-chart-line"></i> {{ number_format($stats['calls_24h']) }} calls/24h</span>
        </div>
      </div>
    </div>

    @php $myApiKey = 'YOUR_API_KEY'; $exampleFull = $service->codeSamples($myApiKey)['full_url']; @endphp
    <div class="endpoint-line" style="word-break:break-all"><span class="method{{ strtoupper($service->method) === 'POST' ? ' post' : '' }}">{{ strtoupper($service->method) }}</span><span style="flex:1">{{ $exampleFull }}</span>
      <button type="button" class="copy-btn" onclick="copyText('{{ $exampleFull }}', this)"><i class="fa-solid fa-copy"></i></button>
    </div>

    <div class="alert alert-info" style="margin-bottom:0"><i class="fa-solid fa-key"></i><div><b>Authentication:</b> use <span class="mono">YOUR_API_KEY</span> in the request sample or send it as an <span class="mono">X-API-KEY</span> header. This documentation never renders a user's key.</div></div>
  </div>

  <div class="service-detail-grid grid-2 mt">
    <div class="card">
      <div class="card-title"><i class="fa-solid fa-code"></i>Integration</div>
      @if(count($service->paramList()))
      <b>Parameters</b>
      <div class="table-wrap mt" style="margin-top:10px">
        <table class="tbl">
          <tr><th>Name</th><th>Type</th><th>Required</th><th>Example</th></tr>
          @foreach($service->paramList() as $p)
          <tr><td class="mono"><b>{{ $p['name'] }}</b><br><small class="text-gray">{{ $p['label'] ?? '' }}</small></td><td class="text-sm">string</td><td>{!! !empty($p['required']) ? badge('yes', 'primary') : badge('optional', 'info') !!}</td><td class="mono">{{ $service->exampleParams()[$p['name']] ?? $p['placeholder'] ?? '—' }}</td></tr>
          @endforeach
        </table>
      </div>
      @endif
      @if($service->docsMarkdown())<div class="alert alert-info mt"><i class="fa-solid fa-circle-info"></i><div>{!! nl2br(e($service->docsMarkdown())) !!}</div></div>@endif
      @if($service->docs_rate_limit)<div class="alert alert-warning mt"><i class="fa-solid fa-gauge"></i><div><b>Rate limit:</b> {{ $service->docs_rate_limit }}</div></div>@endif

      @include('partials.code-samples', ['service' => $service, '__apiKey' => $myApiKey])

      <div class="alert alert-success mt"><i class="fa-solid fa-book-open"></i><div><b>Documentation only.</b> The request samples, parameters, response format and error codes are shown here. Account keys and live request forms are intentionally excluded.</div></div>
    </div>
    <div>
      <h2 class="sec-title" style="font-size:24px;text-align:left">Pricing for <span>{{ $service->name }}</span></h2>
      <p class="text-gray text-sm mb">Credits apply only to this API. Rate: {{ (int) setting('api_rate_limit',60) }}/min per key • {{ (int) $service->credits_per_hit }} credit/hit</p>
      @forelse($packages as $p)
      <div class="price-card mb{{ $p->highlight ? ' popular' : '' }}" style="{{ $p->highlight ? '' : 'transform:none' }}">
        @if($p->highlight)<span class="pop-tag"><i class="fa-solid fa-crown"></i> Popular</span>@endif
        <h3>{{ $p->name }}</h3>
        <div class="amount" style="font-size:36px">{{ $p->price > 0 ? taka($p->price) : 'FREE' }}</div>
        <div class="req"><i class="fa-solid fa-bolt"></i> {{ number_format((int) $p->requests) }} Credits • {{ (int) $p->validity_days }} Days</div>
        <ul>
          @forelse($p->featureList() as $f)<li><i class="fa-solid fa-circle-check"></i><span>{{ $f }}</span></li>@empty<li><i class="fa-solid fa-circle-check"></i><span>Instant activation</span></li>@endforelse
        </ul>
        @auth
        <a href="{{ route('user.buy.checkout', $p) }}" class="btn {{ $p->highlight ? 'btn-primary' : 'btn-outline' }} btn-block"><i class="fa-solid fa-cart-shopping"></i>{{ $p->price > 0 ? 'Buy Now' : 'Claim Free' }}</a>
        @else
        <a href="{{ route('register') }}" class="btn {{ $p->highlight ? 'btn-primary' : 'btn-outline' }} btn-block"><i class="fa-solid fa-rocket"></i>Get Started</a>
        @endauth
      </div>
      @empty
      <div class="card"><div class="empty"><i class="fa-solid fa-box-open"></i><b>No packages yet</b></div></div>
      @endforelse
      @if($service->errorCodes())
      <div class="card mt">
        <div class="card-title"><i class="fa-solid fa-triangle-exclamation"></i>Error Codes</div>
        <div class="table-wrap mt"><table class="tbl"><tr><th>Code</th><th>Message</th></tr>@foreach($service->errorCodes() as $e)<tr><td class="mono"><b>{{ $e['code'] }}</b></td><td><b>{{ $e['message'] }}</b><br><small class="text-gray">{{ $e['description'] ?? '' }}</small></td></tr>@endforeach</table></div>
      </div>
      @endif
    </div>
  </div>
</div>
@push('scripts')
<script>
document.querySelectorAll('.service-try-form').forEach(function(form){
  form.addEventListener('submit', function(e){
    e.preventDefault();
    var btn = form.querySelector('button[type=submit]'); var orig=btn.innerHTML; btn.disabled=true; btn.innerHTML='<i class="fa-solid fa-spinner fa-spin"></i> Sending...';
    var fd=new FormData(form);
    fetch(@json(route('docs.try')), { method:'POST', headers:{'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || document.querySelector('input[name=_token]').value, 'Accept':'application/json'}, body: fd })
    .then(r=>r.json().then(j=>({ok:r.ok,status:r.status,body:j})) ).then(res=>{
      var wrap=form.nextElementSibling; wrap.style.display='block';
      var ok=res.body.status==='success';
      wrap.querySelector('.try-http').textContent='HTTP '+(res.body.http_code||res.status);
      wrap.querySelector('.try-http').className='badge '+(ok?'badge-success':'badge-danger')+' try-http';
      wrap.querySelector('.try-latency').textContent=(res.body.latency||0)+' ms';
      wrap.querySelector('.try-credits').textContent=(res.body.credits_used||0)+' credit • '+(res.body.credits_left??'?')+' left';
      wrap.querySelector('.try-body').textContent=res.body.body || res.body.message || JSON.stringify(res.body,null,2);
      wrap.querySelector('.try-copy').onclick=function(){ copyText(wrap.querySelector('.try-body').innerText,this); };
      btn.disabled=false; btn.innerHTML=orig;
    }).catch(err=>{ btn.disabled=false; btn.innerHTML=orig; toast('Request failed: '+err.message,'error'); });
  });
});
function toast(msg,type){ var w=document.querySelector('.toast-wrap')||(()=>{var d=document.createElement('div');d.className='toast-wrap';document.body.appendChild(d);return d})(); var t=document.createElement('div'); t.className='toast toast-'+(type||'info'); t.innerHTML='<i class="fa-solid fa-circle-info"></i><span>'+msg+'</span><button class="toast-x" onclick="this.parentElement.remove()"><i class="fa-solid fa-xmark"></i></button>'; w.appendChild(t); setTimeout(()=>t.remove(),5000); }
</script>
@endpush
@endsection