@extends('layouts.app')
@section('title','Boleto Gerado - GIGAX Arena')
@section('page_title','BOLETO PREMIUM')
@push('styles')
<style>
.gxbt{max-width:620px;margin:0 auto}.gxbt-card{padding:22px;border:1px solid rgba(112,145,181,.18);border-radius:14px;background:linear-gradient(160deg,#0c1c2d,#07111d);text-align:center}
.gxbt-k{font-size:9px;font-weight:1000;color:#29ef76;letter-spacing:.12em}.gxbt h1{margin:7px 0;color:#fff;font-size:22px}.gxbt-price{color:#fff;font-size:26px;font-weight:1000;margin-bottom:15px}.gxbt-label{display:block;text-align:left;color:#91a7ba;font-size:8px;font-weight:900;margin:12px 0 5px}.gxbt-code{width:100%;box-sizing:border-box;padding:11px;border:1px solid rgba(112,145,181,.22);border-radius:8px;background:#07111d;color:#e8f1f8;font-size:10px;word-break:break-all}.gxbt-btn{display:flex;align-items:center;justify-content:center;text-decoration:none;width:100%;box-sizing:border-box;height:40px;margin-top:10px;border:0;border-radius:8px;background:linear-gradient(#20d967,#10aa4d);color:#fff;font-size:9px;font-weight:1000}.gxbt-status{margin-top:14px;padding:10px;border-radius:8px;background:rgba(255,190,35,.07);color:#ffd067;font-size:9px;font-weight:900}.gxbt-note{margin-top:9px;color:#71899f;font-size:8px}
</style>
@endpush
@section('content')
<div class="gxbt"><div class="gxbt-card">
 <div class="gxbt-k">GIGAX ARENA • BOLETO EMITIDO</div>
 <h1>Premium {{ $boleto['label'] }}</h1>
 <div class="gxbt-price">R$ {{ number_format($boleto['amount'],2,',','.') }}</div>
 @if(!empty($boleto['digitable_line']))
  <span class="gxbt-label">LINHA DIGITÁVEL</span>
  <div class="gxbt-code" id="gxBoletoLine">{{ $boleto['digitable_line'] }}</div>
  <button class="gxbt-btn" type="button" onclick="navigator.clipboard.writeText(document.getElementById('gxBoletoLine').innerText);this.innerText='LINHA COPIADA ✓';">COPIAR LINHA DIGITÁVEL</button>
 @endif
 @if(!empty($boleto['ticket_url']))
  <a class="gxbt-btn" href="{{ $boleto['ticket_url'] }}" target="_blank" rel="noopener">ABRIR / IMPRIMIR BOLETO</a>
 @endif
 <div id="gxBoletoStatus" class="gxbt-status">● AGUARDANDO PAGAMENTO</div>
 <div class="gxbt-note">O boleto pode levar algum tempo para compensar. O Premium será ativado somente depois da confirmação do Mercado Pago.</div>
</div></div>
<script>
const gxOrder=@json($boleto['order_id']);
const gxStatusUrl=@json(route('premium.status'));
let gxTimer=setInterval(async function(){
 try{
  const r=await fetch(gxStatusUrl+'?order_id='+encodeURIComponent(gxOrder),{headers:{'Accept':'application/json'}});
  const d=await r.json();
  if(d.activated){
   clearInterval(gxTimer);
   document.getElementById('gxBoletoStatus').textContent='✓ PAGAMENTO CONFIRMADO — PREMIUM ATIVADO';
   setTimeout(function(){window.location.href=@json(route('premium.index'));},1800);
  }
 }catch(e){}
},10000);
</script>
@endsection