@extends('layouts.app')
@section('title','Pagamento')
@section('content')
<div class="auth-wrap" style="background:linear-gradient(135deg,#0f172a,#3b82f6)">
  <div class="auth-card" style="max-width:500px">
    <h1>{{ $branding?->brand_name ?? 'Pagamento' }}</h1>
    <p class="sub">Cobrança para {{ $charge->client->name }}</p>
    <div style="text-align:center;padding:20px 0;border-top:1px solid #e2e8f0;border-bottom:1px solid #e2e8f0;margin:16px 0">
      <p class="muted">{{ $charge->description }}</p>
      <p style="font-size:36px;font-weight:700;margin:10px 0;color:var(--primary)">R$ {{ number_format((float)$charge->amount,2,',','.') }}</p>
      <p class="muted">Vencimento: {{ \Carbon\Carbon::parse($charge->due_date)->format('d/m/Y') }}</p>
      <p style="margin-top:10px"><span class="badge badge-{{ $charge->status }}">{{ strtoupper($charge->status) }}</span></p>
    </div>
    @if($charge->status === 'paid')
      <div class="alert alert-success" style="text-align:center">✅ Esta cobrança já foi paga.</div>
    @elseif($charge->pix_qr_code_base64)
      <div class="qr">
        <img src="data:image/png;base64,{{ $charge->pix_qr_code_base64 }}" alt="QR PIX">
        <p class="muted" style="margin:10px 0">Escaneie com seu app do banco</p>
        <p><strong>Ou copie o código:</strong></p>
        <div class="copy-box" id="pix">{{ $charge->pix_qr_code }}</div>
        <button onclick="navigator.clipboard.writeText(document.getElementById('pix').innerText);this.innerText='Copiado!'" class="btn btn-primary" style="margin-top:10px;width:100%">Copiar código PIX</button>
      </div>
    @else
      <div class="alert alert-warning">PIX ainda não foi gerado. Solicite ao emissor.</div>
    @endif
  </div>
</div>
@endsection