@extends('layouts.app')
@section('title','Pix Premium - GIGAX Arena')
@section('page_title','PIX PREMIUM')
@push('styles')
<style>
.gxpix{max-width:560px;margin:0 auto}.gxpix-card{padding:22px;border:1px solid rgba(112,145,181,.18);border-radius:14px;background:linear-gradient(160deg,#0c1c2d,#07111d);text-align:center;box-shadow:0 16px 42px rgba(0,0,0,.22)}
.gxpix-k{font-size:9px;font-weight:1000;color:#29ef76;letter-spacing:.12em}.gxpix h1{font-size:21px;color:#fff;margin:7px 0}.gxpix-price{font-size:25px;font-weight:1000;color:#fff;margin:8px 0 15px}
.gxpix-qr{width:250px;max-width:90%;background:#fff;padding:10px;border-radius:10px}.gxpix-label{display:block;text-align:left;margin:15px 0 6px;color:#91a7ba;font-size:9px;font-weight:900}
.gxpix-code{width:100%;box-sizing:border-box;min-height:72px;padding:9px;border:1px solid rgba(112,145,181,.22);border-radius:8px;background:#07111d;color:#d9e7f2;font-size:9px;resize:none}
.gxpix-btn{width:100%;height:38px;margin-top:7px;border:0;border-radius:8px;background:linear-gradient(#20d967,#10aa4d);color:#fff;font-size:9px;font-weight:1000;cursor:pointer}
.gxpix-status{margin-top:14px;padding:10px;border-radius:8px;background:rgba(255,190,35,.07);color:#ffd067;font-size:9px;font-weight:900}.gxpix-help{margin-top:9px;color:#6f879d;font-size:8px}.gxpix-link{display:block;margin-top:10px;color:#58d987;font-size:9px}
</style>
@endpush
@section('content')
<div class="gxpix"><div class="gxpix-card">
 <div class="gxpix-k">GIGAX ARENA • PIX</div>
 <h1>Premium {{ $pix['label'] }}</h1>
 <div class="gxpix-price">R$ {{ number_format($pix['amount'],2,',','.') }}</div>

 @if(!empty($pix['qr_code_base64']))
   <img class="gxpix-qr" src="data:image/png;base64,{{ $pix['qr_code_base64'] }}" alt="QR Code Pix">
 @else
   <div class="gxpix-status">Use o PIX Copia e Cola abaixo.</div>
 @endif

 <label class="gxpix-label">PIX COPIA E COLA</label>
 <textarea id="gxPixCode" class="gxpix-code" readonly>{{ $pix['qr_code'] }}</textarea>
 <button id="gxCopyBtn" type="button" class="gxpix-btn" onclick="gxCopyPix()">COPIAR PIX</button>

 @if(!empty($pix['ticket_url']))
   <a class="gxpix-link" target="_blank" rel="noopener" href="{{ $pix['ticket_url'] }}">Abrir cobrança no Mercado Pago</a>
 @endif

 <div id="gxPixStatus" class="gxpix-status">● AGUARDANDO PAGAMENTO</div>
 <div class="gxpix-help">O Premium será ativado somente depois da confirmação do pagamento pelo Mercado Pago.</div>
</div></div>

<script>
function gxCopyPix(){
 const el=document.getElementById('gxPixCode'), btn=document.getElementById('gxCopyBtn');
 navigator.clipboard.writeText(el.value).then(function(){
   btn.textContent='PIX COPIADO ✓';
   setTimeout(function(){btn.textContent='COPIAR PIX';},1800);
 });
}
const gxOrder=@json($pix['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('gxPixStatus').textContent='✓ PAGAMENTO CONFIRMADO — PREMIUM ATIVADO';
     setTimeout(function(){window.location.href=@json(route('premium.index'));},1800);
   }
 }catch(e){}
},5000);
</script>
@endsection