<h1 class="header-title text-center mb-4">PROMOÇÃO DE FAIXA - 2025</h1>

<% if (query && query.ok) { %>
  <div class="alert alert-success text-center mb-3">
    Dados enviados com sucesso. Você será contatado no WhatsApp informado.
  </div>
<% } %>

<% if (query && query.err) { %>
  <div class="alert alert-warning text-center mb-3">
    <%= query.err === 'telefone' ? 'Telefone inválido (precisa ter 11 dígitos com DDD).' :
        query.err === 'cpf' ? 'CPF inválido. Verifique os dígitos.' :
        'Não foi possível enviar os dados. Tente novamente.' %>
  </div>
<% } %>

<div class="text-center mb-4">
  <h2 class="student-name mb-1"><%= aluno.nome %></h2>
  <p class="promotion-details">
    <i class="bi bi-calendar-check"></i>
    Promoção agendada para:
    <br>
    <h1><strong id="data-promocao"><%= data %></strong> às <strong><%= hora %> horas</strong></h1>
  </p>
</div>

<hr class="divider" />

<div class="action-buttons">
    
    
<div class="card shadow-sm">
  <div class="card-body">
    <h5 class="mb-3"><i class="bi bi-receipt"></i> Dados do responsável pelo pagamento</h5>

    <form id="form-cobranca" action="/enviar-n8n/<%= aluno.id %>" method="POST" class="row g-3" novalidate>
      <div class="col-md-6">
        <label for="cpf" class="form-label">CPF</label>
        <input type="text" id="cpf" name="cpf_responsavel"
               class="form-control form-control-lg"
               inputmode="numeric" placeholder="000.000.000-00" required>
      </div>

      <div class="col-md-6">
        <label for="telefone" class="form-label">Telefone (WhatsApp)</label>
        <input type="tel" id="telefone" name="telefone_responsavel"
       class="form-control form-control-lg"
       inputmode="tel" placeholder="(41) X XXXX-XXXX" required>
      </div>

      <!-- Envie também os dados do aluno -->
      <input type="hidden" name="aluno_id"      value="<%= aluno.id %>">
      <input type="hidden" name="aluno_nome"    value="<%= aluno.nome %>">
      <input type="hidden" name="data_promocao" value="<%= data %>">
      <input type="hidden" name="hora_promocao" value="<%= hora %>">
      <input type="hidden" name="valor"         value="<%= valor %>">
      <input type="hidden" name="endereco"      value="<%= endereco %>">
      <input type="hidden" name="origem"        value="cobranca">

      <div class="col-12 d-grid">
        <button class="btn btn-primary btn-lg" type="submit">
          <i class="bi bi-send"></i> Continuar para o pagamento
        </button>
      </div>
    </form>
  </div>
</div>


 
</div>

<hr class="divider" />

<div class="info-section">
<div class="info-card">
  <h4 class="info-title">
    <i class="bi bi-geo-alt-fill"></i> Local da Cerimônia
  </h4>

  <% if (endereco && endereco.trim()) { %>
    <p class="info-content" id="local-cerimonia">
      <strong><%= endereco %></strong>
    </p>
  <% } %>
</div>


  <div class="info-card">
    <h4 class="info-title">
      <i class="bi bi-clock-fill"></i> Horário de Chegada
    </h4>
    <p class="info-content">Solicitamos a sua chegada com 10 minutos de antecedência.</p>
  </div>

  <% if (typeof info !== 'undefined' && info && info.trim()) { %>
    <div class="info-card">
      <h4 class="info-title">
        <i class="bi bi-info-circle-fill"></i> Informações Adicionais
      </h4>
      <p class="info-content"><%= info %></p>
    </div>
  <% } %>
</div>
