<!DOCTYPE html>
<html lang="pt-br">
<head>
  <title>Cadastro — CobraGestão</title>
  <%- include('../partials/head') %>
</head>
<body class="public-theme">
  <div class="public-wrap">
    <div class="public-header">
      <div class="brand">Cobra<span style="color:var(--color-primary);">Gestão</span></div>
      <p class="text-muted">Preencha seus dados para dar continuidade à solicitação</p>
    </div>

    <div class="public-card">
      <% if (erro) { %><div class="alert alert-error"><%= erro %></div><% } %>

      <form method="POST" action="<%= basePath %>/cadastro/<%= token %>" enctype="multipart/form-data">
        <div class="section-title" style="margin-top:0;">Dados pessoais</div>
        <div class="form-grid">
          <div class="field full">
            <label>Nome completo *</label>
            <input type="text" name="nome" required>
          </div>
          <div class="field">
            <label>CPF *</label>
            <input type="text" name="cpf" required placeholder="000.000.000-00">
          </div>
          <div class="field">
            <label>RG</label>
            <input type="text" name="rg">
          </div>
          <div class="field">
            <label>Data de nascimento</label>
            <input type="date" name="data_nascimento">
          </div>
          <div class="field">
            <label>Estado civil</label>
            <select name="estado_civil">
              <option value="">Selecione</option>
              <option>Solteiro(a)</option><option>Casado(a)</option><option>Divorciado(a)</option>
              <option>Viúvo(a)</option><option>União estável</option>
            </select>
          </div>
          <div class="field">
            <label>Nome da mãe</label>
            <input type="text" name="nome_mae">
          </div>
          <div class="field">
            <label>Profissão</label>
            <input type="text" name="profissao">
          </div>
          <div class="field">
            <label>Renda mensal (R$)</label>
            <input type="number" step="0.01" name="renda_mensal">
          </div>
        </div>

        <div class="section-title">Contato</div>
        <div class="form-grid cols-3">
          <div class="field">
            <label>WhatsApp *</label>
            <input type="tel" name="whatsapp" required placeholder="(11) 91234-5678">
          </div>
          <div class="field">
            <label>Telefone</label>
            <input type="tel" name="telefone">
          </div>
          <div class="field">
            <label>E-mail</label>
            <input type="email" name="email">
          </div>
        </div>

        <div class="section-title">Endereço</div>
        <div class="form-grid cols-3">
          <div class="field"><label>CEP</label><input type="text" name="cep"></div>
          <div class="field" style="grid-column: span 2;"><label>Endereço</label><input type="text" name="endereco"></div>
          <div class="field"><label>Número</label><input type="text" name="numero"></div>
          <div class="field"><label>Bairro</label><input type="text" name="bairro"></div>
          <div class="field"><label>Cidade</label><input type="text" name="cidade"></div>
          <div class="field"><label>UF</label><input type="text" name="estado" maxlength="2"></div>
        </div>

        <div class="section-title">Referência pessoal</div>
        <div class="form-grid cols-3">
          <div class="field"><label>Nome</label><input type="text" name="referencia_nome"></div>
          <div class="field"><label>Telefone</label><input type="tel" name="referencia_telefone"></div>
          <div class="field"><label>Parentesco</label><input type="text" name="referencia_parentesco"></div>
        </div>

        <div class="section-title">Documentos</div>
        <p class="hint" style="margin-top:-6px;">Envie foto do RG/CPF e comprovante de residência (imagem ou PDF).</p>
        <div id="anexos-container">
          <div class="file-row">
            <select name="tipos_documento">
              <option value="rg">RG</option>
              <option value="cpf">CPF</option>
              <option value="comprovante_residencia">Comprovante de residência</option>
              <option value="comprovante_renda">Comprovante de renda</option>
              <option value="outro">Outro</option>
            </select>
            <input type="file" name="anexos">
          </div>
        </div>
        <button type="button" class="btn btn-sm btn-outline" onclick="adicionarLinhaAnexo()">+ Adicionar outro arquivo</button>

        <div class="form-actions">
          <button type="submit" class="btn btn-primary">Enviar cadastro</button>
        </div>
      </form>
    </div>
  </div>

  <script>
    function adicionarLinhaAnexo() {
      const container = document.getElementById('anexos-container');
      const linha = container.children[0].cloneNode(true);
      linha.querySelectorAll('input,select').forEach(el => el.value = el.tagName === 'SELECT' ? el.options[0].value : '');
      container.appendChild(linha);
    }
  </script>
</body>
</html>
