<h1 class="text-center mb-3">Pagamento PIX</h1>

<div class="text-center mb-4">
  <h3 class="mb-1"><%= aluno.nome %></h3>
  <div class="text-muted">Graduação: <%= data %> às <%= hora %> horas</div>
  <div class="fs-4 mt-2">Valor: <strong>R$ <%= Number(valor).toFixed(2).replace('.', ',') %></strong></div>
</div>

<div class="row justify-content-center">
  <div class="col-md-6">
    <div class="card text-center">
      <div class="card-body">
        <img class="img-fluid mb-3" alt="QR PIX"
             src="data:image/png;base64,<%= qr_code_base64 %>">

        <div class="mb-2">
          <input id="pix-code" class="form-control" readonly value="<%= qr_code %>">
        </div>
        <button id="btn-copy" class="btn btn-success w-100 mb-2">
          <i class="bi bi-clipboard"></i> Copiar código PIX
        </button>

        <% if (expiration_date) { %>
          <p class="mt-3 text-muted small">
            Expira em: <%= new Date(expiration_date).toLocaleString('pt-BR') %>
          </p>
        <% } %>
        
        
        <div id="pix-status"
     class="alert alert-warning text-center mt-3"
     data-payment-id="<%= payment_id %>"
     data-aluno-id="<%= aluno.id %>">
  Aguardando pagamento via PIX...
  <div class="small text-muted">Atualizamos a cada 5 segundos.</div>
</div>

<div id="pix-paid" class="alert alert-success text-center mt-3 d-none">
  ✅ Pagamento confirmado! Obrigado.
</div>

<div class="text-center mt-2">
  <button id="btn-forcar-checagem" class="btn btn-outline-secondary btn-sm">
    Já paguei, verificar agora
  </button>
</div>


      </div>
    </div>
  </div>
</div>
