@extends('layouts.dash')
@section('title', 'Buy Credits')
@section('content')
@php
  $totalServices = $services->count();
@endphp
<div class="page-head" style="align-items:flex-end;gap:16px">
  <div>
    <h1 style="display:flex;gap:10px;align-items:center">Buy Credits <span class="badge badge-primary" style="font-size:11px"><i class="fa-solid fa-bolt"></i> Per-API credits</span></h1>
    <p style="margin-top:6px;max-width:640px">Choose an API, enter any credit quantity, then pay from your wallet or use Auto Payment. The administrator sets each API’s per-credit price.</p>
    <div class="flex gap wrap-x" style="margin-top:10px">
      <span class="mini-tag blue"><i class="fa-solid fa-shield-halved"></i> Secure</span>
      <span class="mini-tag"><i class="fa-solid fa-rotate"></i> Recheckable</span>
      <span class="mini-tag"><i class="fa-solid fa-file-invoice"></i> PDF invoice</span>
      <a href="{{ route('user.orders') }}" style="font-size:13px;color:var(--primary);font-weight:800"><i class="fa-solid fa-clock-rotate-left"></i> Pending orders →</a>
    </div>
  </div>
  <div class="card" style="padding:12px 14px;display:flex;gap:10px;align-items:center;background:linear-gradient(135deg,#f8fbff,#eef4ff);border-color:#dbeafe">
    <div style="width:42px;height:42px;border-radius:12px;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center"><i class="fa-solid fa-magnifying-glass"></i></div>
    <div><div style="font-weight:900;font-size:13px">Find your API fast</div><div class="text-sm text-gray">Search, filter Free vs Paid, sort by best value</div></div>
  </div>
</div>

<div class="card custom-credit-card mb" style="padding:18px;background:linear-gradient(135deg,#eff6ff,#f8fbff);border-color:#bfdbfe">
  <div class="custom-credit-head flex between center wrap-x"><div><div class="card-title" style="margin:0"><i class="fa-solid fa-sliders"></i> Buy a custom amount</div><p class="card-sub" style="margin:4px 0 0">No fixed package required — choose exactly how many credits you need.</p></div><a href="{{ route('user.wallet') }}" class="btn btn-outline btn-sm"><i class="fa-solid fa-wallet"></i> My Wallet</a></div>
  <form method="POST" action="{{ route('user.wallet.purchase') }}" id="customCreditForm" style="margin-top:14px">
    @csrf <input type="hidden" name="kind" value="credit_purchase">
    <div class="custom-credit-fields form-row" style="align-items:end">
      <div class="form-group" style="margin:0"><label>API</label><select name="service_id" id="customService" class="form-control" required>@foreach($services as $s)<option value="{{ $s->id }}" data-price="{{ (float) ($s->credit_price ?: setting('credit_price_default',1)) }}">{{ $s->name }} — {{ taka($s->credit_price ?: setting('credit_price_default',1)) }} / credit</option>@endforeach</select></div>
      <div class="form-group" style="margin:0"><label>Credits</label><input type="number" name="quantity" id="customQuantity" class="form-control" min="1" max="10000000" value="10" required></div>
      <div class="form-group" style="margin:0"><label>Payment method</label><select name="payment_type" class="form-control"><option value="wallet">Wallet balance</option><option value="gateway">Auto Payment</option></select></div>
    </div>
    <div class="custom-credit-actions flex between center wrap-x" style="margin-top:12px"><span class="custom-credit-help text-sm text-gray"><i class="fa-solid fa-circle-info text-primary"></i> Wallet payments add credits instantly. Auto Payment opens the secure gateway.</span><b id="customTotal" style="font-size:19px;color:var(--primary)">Total: —</b><button class="btn btn-primary" type="submit"><i class="fa-solid fa-bolt"></i> Continue</button></div>
  </form>
</div>

<!-- Controls -->
<div class="card mb buy-controls-card" style="padding:16px">
  <div class="buy-controls-layout" style="display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center">
    <div style="display:flex;gap:10px;flex-wrap:wrap;align-items:center">
      <div style="position:relative;flex:1;min-width:220px;max-width:420px">
        <i class="fa-solid fa-magnifying-glass" style="position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--gray-light)"></i>
        <input type="text" id="buySearch" class="form-control" placeholder="Search API or package (e.g. Free Fire, bKash)..." style="padding-left:36px">
      </div>
      <select class="form-control" id="svcFilter" style="max-width:200px">
        <option value="0">All APIs ({{ $totalServices }})</option>
        @foreach($services as $s)
          <option value="{{ $s->id }}" {{ $serviceId == $s->id ? 'selected' : '' }}>{{ $s->name }}</option>
        @endforeach
      </select>
      <select class="form-control" id="paidFilter" style="max-width:160px">
        <option value="all">All packages</option>
        <option value="free">Free only</option>
        <option value="paid">Paid only</option>
      </select>
      <select class="form-control" id="sortFilter" style="max-width:180px">
        <option value="recommended">Recommended</option>
        <option value="price-asc">Price: Low → High</option>
        <option value="price-desc">Price: High → Low</option>
        <option value="credits-desc">Credits: Most first</option>
        <option value="value">Best value (per credit)</option>
      </select>
    </div>
    <div class="buy-control-actions flex gap">
      <button class="btn btn-ghost btn-sm" id="compareBtn" type="button"><i class="fa-solid fa-table-columns"></i> Compare</button>
      <a class="btn btn-outline btn-sm" href="{{ route('docs') }}"><i class="fa-solid fa-book"></i> Docs</a>
    </div>
  </div>
  <!-- Service pill bar -->
  <div class="buy-pill-bar" style="margin-top:14px;display:flex;gap:8px;overflow-x:auto;white-space:nowrap;padding-bottom:2px;-webkit-overflow-scrolling:touch" id="pillBar">
    <button type="button" data-pill="0" class="pill-btn active" style="padding:8px 14px;border-radius:50px;border:1px solid var(--primary);background:var(--primary);color:#fff;font-weight:800;font-size:13px">All</button>
    @foreach($services as $s)
      <button type="button" data-pill="{{ $s->id }}" class="pill-btn" style="padding:8px 14px;border-radius:50px;border:1px solid var(--border);background:#fff;font-weight:700;font-size:13px"><i class="fa-solid {{ $s->icon ?: 'fa-plug' }}"></i> {{ $s->name }}</button>
    @endforeach
  </div>
</div>

<!-- Compare drawer (hidden) -->
<div id="compareDrawer" class="card mb hide" style="padding:16px;background:var(--bg)">
  <div class="flex between center"><b><i class="fa-solid fa-table-columns text-primary"></i> Compare packages</b><button type="button" class="btn btn-outline btn-xs" onclick="document.getElementById('compareDrawer').classList.add('hide')"><i class="fa-solid fa-xmark"></i> Close</button></div>
  <div id="compareGrid" class="grid-3 mt" style="gap:12px"></div>
  <p class="text-sm text-gray mt">Tip: Best value = lowest price per credit. Popular = most chosen by others.</p>
</div>

@foreach($services as $s)
@php
  $pkgCount = $s->packages->count();
  $cheapest = $s->packages->where('price','>',0)->sortBy('price')->first();
  $bestValue = $s->packages->where('price','>',0)->sortBy(fn($p)=> $p->requests? $p->price/$p->requests : 999)->first();
@endphp
<div class="svc-block" data-svc="{{ $s->id }}" data-name="{{ strtolower($s->name.' '.$s->description) }}">
  <div class="buy-service-head" style="background:#fff;border:1px solid var(--border);border-radius:16px;padding:14px 16px;display:flex;gap:12px;align-items:center;margin-bottom:12px;flex-wrap:wrap">
    <div class="svc-ic" style="width:44px;height:44px"><i class="fa-solid {{ $s->icon ?: 'fa-plug' }}"></i></div>
    <div style="flex:1;min-width:180px">
      <h2 style="font-size:18px;font-weight:900;display:flex;gap:8px;align-items:center;flex-wrap:wrap">{{ $s->name }} <span class="mini-tag blue">{{ (int) $s->credits_per_hit }} credit/hit</span><span class="mini-tag">{{ taka($s->credit_price ?: setting('credit_price_default', 1)) }} / credit</span> @if($s->method)<span class="mini-tag">{{ strtoupper($s->method) }}</span>@endif</h2>
      <div class="text-sm text-gray" style="margin-top:2px">{{ $s->description ?: 'Premium API — instant response, high uptime.' }} @if($cheapest) • Package from <b style="color:var(--primary)">{{ taka($cheapest->price) }}</b>@endif</div>
    </div>
    <div class="flex gap">
      <a class="btn btn-ghost btn-sm" href="{{ route('service.show', $s->slug) }}"><i class="fa-solid fa-book"></i> Docs</a>
      <a class="btn btn-outline btn-sm" href="{{ route('docs') }}#{{ $s->slug }}"><i class="fa-solid fa-code"></i> Try It</a>
    </div>
  </div>

  @if($pkgCount)
  <div class="buy-carousel mb" data-buy-carousel aria-label="{{ $s->name }} pricing plans">
    @if($pkgCount > 1)<div class="buy-carousel-controls"><button type="button" class="carousel-arrow" data-buy-prev aria-label="Previous package"><i class="fa-solid fa-arrow-left"></i></button><button type="button" class="carousel-arrow" data-buy-next aria-label="Next package"><i class="fa-solid fa-arrow-right"></i></button></div>@endif
    <div class="buy-track">
    @foreach($s->packages as $p)
    @php
      $isFree = $p->price <= 0;
      $isPopular = (bool) $p->highlight;
      $isBest = $bestValue && $bestValue->id === $p->id && !$isFree;
      $per = $p->requests>0 && $p->price>0 ? taka($p->price / $p->requests) : '—';
      $canCompare = true;
    @endphp
    <div class="price-card buy-slide{{ $isPopular ? ' popular' : '' }}" data-pkg="{{ strtolower($p->name.' '.$p->requests.' '.$p->price) }}" data-price="{{ $p->price }}" data-requests="{{ $p->requests }}" data-paid="{{ $isFree ? 'free' : 'paid' }}" data-value="{{ $p->requests>0 && $p->price>0 ? $p->price/$p->requests : 9999 }}" style="position:relative">
      <div style="position:absolute;top:12px;right:12px;display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end">
        @if($isBest)<span class="badge badge-success" style="font-size:10px"><i class="fa-solid fa-trophy"></i> Best value</span>@endif
        @if($isFree)<span class="badge badge-success" style="font-size:10px"><i class="fa-solid fa-gift"></i> FREE</span>@endif
      </div>
      @if($isPopular)<span class="pop-tag"><i class="fa-solid fa-crown"></i> Most Popular</span>@endif
      <h3 style="padding-right:84px">{{ $p->name }}</h3>
      <div class="amount" style="margin-top:6px">{{ $isFree ? 'FREE' : taka($p->price) }}@if(!$isFree)<small style="font-size:11px;color:var(--gray)"> / {{ $per }} per credit</small>@endif</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
        <li><i class="fa-solid fa-shield-halved" style="color:var(--primary)"></i><span>PDF invoice + recheck</span></li>
      </ul>
      <div style="display:flex;gap:8px;margin-top:10px">
        <a href="{{ route('user.buy.checkout', $p) }}" class="btn {{ $isPopular ? 'btn-primary' : 'btn-outline' }}" style="flex:1"><i class="fa-solid fa-cart-shopping"></i>{{ $isFree ? 'Claim Free' : 'Buy Now' }}</a>
        <button type="button" class="btn btn-ghost btn-sm" title="Add to compare" data-compare="{{ $p->id }}" data-name="{{ $p->name }}" data-price="{{ $p->price }}" data-requests="{{ $p->requests }}" data-validity="{{ $p->validity_days }}" data-url="{{ route('user.buy.checkout', $p) }}"><i class="fa-solid fa-plus"></i></button>
      </div>
      @if(!$isFree)<div class="text-sm text-gray" style="text-align:center;margin-top:8px"><i class="fa-solid fa-shield-halved"></i> Secure payment verification</div>@endif
    </div>
    @endforeach
    </div>
    @if($pkgCount > 1)<div class="carousel-dots" data-buy-dots aria-label="Choose a package"></div>@endif
  </div>
  @else
  <div class="card mb"><div class="empty"><i class="fa-solid fa-box-open"></i><b>No packages for this API yet</b><span class="text-sm text-gray">Admin is adding plans — check back soon or open a ticket.</span></div></div>
  @endif
</div>
@endforeach

@if($services->isEmpty())
<div class="card"><div class="empty"><i class="fa-solid fa-plug-circle-xmark"></i><b>No APIs yet</b><span class="text-sm text-gray">We’re launching new APIs — stay tuned!</span><a href="{{ route('docs') }}" class="btn btn-primary mt"><i class="fa-solid fa-book"></i> Browse Docs</a></div></div>
@endif

@push('scripts')
<script>
(function(){
  const s=document.getElementById('customService'), q=document.getElementById('customQuantity'), t=document.getElementById('customTotal');
  function update(){ const p=parseFloat(s?.selectedOptions[0]?.dataset.price||0), n=parseInt(q?.value||0); if(t) t.textContent='Total: ৳'+(p*n).toFixed(2); }
  s?.addEventListener('change',update); q?.addEventListener('input',update); update();
})();
(function(){
  const svcFilter = document.getElementById('svcFilter');
  const paidFilter = document.getElementById('paidFilter');
  const sortFilter = document.getElementById('sortFilter');
  const search = document.getElementById('buySearch');
  const pillBar = document.getElementById('pillBar');
  const blocks = document.querySelectorAll('.svc-block');

  function applyFilters(){
    const svc = svcFilter.value;
    const paid = paidFilter.value;
    const q = (search.value||'').toLowerCase().trim();
    blocks.forEach(b=>{
      const id = b.getAttribute('data-svc');
      const name = b.getAttribute('data-name')||'';
      let show = (svc==='0' || id===svc);
      if(q && !name.includes(q)) {
        // also check packages text
        const pkgText = Array.from(b.querySelectorAll('[data-pkg]')).map(el=>el.getAttribute('data-pkg')).join(' ');
        if(!pkgText.includes(q)) show = false;
      }
      // filter packages inside block
      let anyPkgVisible = false;
      const slides = b.querySelectorAll('.buy-slide');
      slides.forEach(sl=>{
        let ppaid = sl.getAttribute('data-paid');
        let pkg = sl.getAttribute('data-pkg')||'';
        let visible = true;
        if(paid!=='all' && ppaid!==paid) visible=false;
        if(q && !pkg.includes(q) && !name.includes(q)) visible=false;
        sl.style.display = visible ? '' : 'none';
        if(visible) anyPkgVisible=true;
      });
      // if paid filter hides all pkgs, hide block unless no pkgs
      if(slides.length && !anyPkgVisible && paid!=='all') show=false;
      if(q && !show) {
        // if block hidden but some pkg matches q individually, need to show block
        // already handled via name/pkg check, so re-evaluate
      }
      b.style.display = show ? '' : 'none';
    });
    // sort within each block if needed
    const sort = sortFilter.value;
    if(sort!=='recommended'){
      blocks.forEach(b=>{
        const track = b.querySelector('.buy-track');
        if(!track) return;
        const slides = Array.from(track.children);
        slides.sort((a,b)=>{
          if(sort==='price-asc') return parseFloat(a.dataset.price)-parseFloat(b.dataset.price);
          if(sort==='price-desc') return parseFloat(b.dataset.price)-parseFloat(a.dataset.price);
          if(sort==='credits-desc') return parseFloat(b.dataset.requests)-parseFloat(a.dataset.requests);
          if(sort==='value') return parseFloat(a.dataset.value)-parseFloat(b.dataset.value);
          return 0;
        });
        slides.forEach(s=>track.appendChild(s));
      });
    }
  }
  svcFilter.addEventListener('change', applyFilters);
  paidFilter.addEventListener('change', applyFilters);
  sortFilter.addEventListener('change', applyFilters);
  search.addEventListener('input', applyFilters);
  pillBar?.querySelectorAll('.pill-btn').forEach(btn=>{
    btn.addEventListener('click', ()=>{
      pillBar.querySelectorAll('.pill-btn').forEach(b=>{b.classList.remove('active'); b.style.background='#fff'; b.style.color='var(--text)'; b.style.borderColor='var(--border)'});
      btn.classList.add('active'); btn.style.background='var(--primary)'; btn.style.color='#fff'; btn.style.borderColor='var(--primary)';
      svcFilter.value = btn.getAttribute('data-pill');
      applyFilters();
    });
  });
  // init pills active
  const initPill = pillBar.querySelector(`[data-pill="${svcFilter.value}"]`);
  if(initPill){ initPill.click(); } else applyFilters();

  // Compare
  const compareBtn = document.getElementById('compareBtn');
  const drawer = document.getElementById('compareDrawer');
  const grid = document.getElementById('compareGrid');
  let selected = [];
  document.querySelectorAll('[data-compare]').forEach(b=>{
    b.addEventListener('click', ()=>{
      const id = b.getAttribute('data-compare');
      if(selected.find(s=>s.id===id)) { selected = selected.filter(s=>s.id!==id); b.innerHTML='<i class="fa-solid fa-plus"></i>'; b.classList.remove('btn-primary'); b.classList.add('btn-ghost'); }
      else {
        if(selected.length>=3){ toast('Max 3 packages to compare','warning'); return; }
        selected.push({id, name:b.dataset.name, price:b.dataset.price, requests:b.dataset.requests, validity:b.dataset.validity, url:b.dataset.url});
        b.innerHTML='<i class="fa-solid fa-check"></i>'; b.classList.add('btn-primary'); b.classList.remove('btn-ghost');
      }
      renderCompare();
    });
  });
  function renderCompare(){
    if(selected.length===0){ drawer.classList.add('hide'); return; }
    drawer.classList.remove('hide');
    grid.innerHTML = selected.map(s=>`<div class="card" style="padding:16px"><div style="font-weight:900">${s.name}</div><div style="font-size:22px;font-weight:900;color:var(--primary)">${s.price>0?'৳'+s.price:'FREE'}</div><div class="text-sm text-gray">${Number(s.requests).toLocaleString()} credits • ${s.validity} days</div><div class="text-sm mt">Per credit: ${s.price>0?(s.price/s.requests).toFixed(2):'—'}</div><a href="${s.url}" class="btn btn-primary btn-sm btn-block mt">Buy</a><button type="button" class="btn btn-outline btn-xs btn-block mt" onclick="document.querySelector('[data-compare=&quot;'+'${s.id}'+'&quot;]')?.click()">Remove</button></div>`).join('');
    drawer.scrollIntoView({behavior:'smooth', block:'nearest'});
  }
  compareBtn.addEventListener('click', ()=>{ if(selected.length===0){ toast('Select up to 3 packages (+ button) to compare','info'); } else drawer.classList.toggle('hide'); });
})();
</script>
@endpush
@endsection