<!DOCTYPE html>
<html lang="pt-br">
<head>
  <title><%= captador.nome %> — CobraGestão</title>
  <%- include('../partials/head') %>
</head>
<body>
  <div class="app-shell">
    <%- include('../partials/sidebar', { active: 'captadores' }) %>

    <main class="main">
      <div class="page-header">
        <div>
          <h1><%= captador.nome %></h1>
          <p class="text-muted" style="margin-top:2px;">
            <span class="badge badge-<%= captador.ativo ? 'ativo' : 'inativo' %>"><%= captador.ativo ? 'ativo' : 'inativo' %></span>
            &nbsp;Comissão: <%= captador.comissao_percentual %>%
          </p>
        </div>
        <a href="<%= basePath %>/captadores/<%= captador.id %>/editar" class="btn btn-outline">Editar cadastro</a>
      </div>

      <div class="section-title" style="margin-top:0;">Link de cadastro para o cliente</div>
      <div class="table-wrap" style="padding:20px 22px;">
        <p class="text-muted" style="margin-top:0;">Envie este link para o cliente preencher o próprio cadastro. O captador já fica associado automaticamente e não aparece no formulário.</p>
        <div class="link-box" id="link-captador"><%= baseUrl %>/cadastro/<%= captador.link_token %></div>
        <div style="margin-top:12px;" class="chip-list">
          <button class="btn btn-sm btn-outline" onclick="copiarLink()">Copiar link</button>
          <form method="POST" action="<%= basePath %>/captadores/<%= captador.id %>/gerar-link" onsubmit="return confirm('Isso invalida o link atual. Continuar?');" style="display:inline;">
            <button type="submit" class="btn btn-sm btn-outline">Gerar novo link</button>
          </form>
        </div>
      </div>

      <div class="section-title">Clientes captados (<%= clientes.length %>)</div>
      <div class="table-wrap">
        <table>
          <thead><tr><th>Nome</th><th>WhatsApp</th><th>Cadastrado em</th><th></th></tr></thead>
          <tbody>
            <% if (clientes.length === 0) { %>
              <tr><td colspan="4" class="empty-state">Nenhum cliente captado ainda.</td></tr>
            <% } %>
            <% clientes.forEach(c => { %>
              <tr>
                <td><a href="<%= basePath %>/clientes/<%= c.id %>"><%= c.nome %></a></td>
                <td><%= c.whatsapp %></td>
                <td><%= formatData(c.criado_em) %></td>
                <td class="text-right"><a class="btn btn-sm btn-outline" href="<%= basePath %>/clientes/<%= c.id %>">Ver</a></td>
              </tr>
            <% }) %>
          </tbody>
        </table>
      </div>

      <div class="section-title">Pagamentos de comissão — total pago: <%= formatMoeda(totalPago) %></div>
      <div class="cards-grid" style="grid-template-columns: 320px 1fr;">
        <div class="table-wrap" style="padding:20px 22px;">
          <form method="POST" action="<%= basePath %>/captadores/<%= captador.id %>/pagamentos">
            <div class="field" style="margin-bottom:14px;">
              <label>Valor pago (R$)</label>
              <input type="number" step="0.01" name="valor" required>
            </div>
            <div class="field" style="margin-bottom:14px;">
              <label>Data do pagamento</label>
              <input type="date" name="data_pagamento" required>
            </div>
            <div class="field" style="margin-bottom:14px;">
              <label>Observação</label>
              <textarea name="observacao"></textarea>
            </div>
            <button type="submit" class="btn btn-primary">Registrar pagamento</button>
          </form>
        </div>

        <div class="table-wrap">
          <table>
            <thead><tr><th>Data</th><th class="text-right">Valor</th><th>Observação</th></tr></thead>
            <tbody>
              <% if (pagamentos.length === 0) { %>
                <tr><td colspan="3" class="empty-state">Nenhum pagamento registrado.</td></tr>
              <% } %>
              <% pagamentos.forEach(p => { %>
                <tr>
                  <td><%= formatData(p.data_pagamento) %></td>
                  <td class="text-right mono"><%= formatMoeda(p.valor) %></td>
                  <td class="text-muted"><%= p.observacao || '-' %></td>
                </tr>
              <% }) %>
            </tbody>
          </table>
        </div>
      </div>
    </main>
  </div>

  <script>
    function copiarLink() {
      const texto = document.getElementById('link-captador').innerText;
      navigator.clipboard.writeText(texto).then(() => alert('Link copiado!'));
    }
  </script>
</body>
</html>
