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

    <main class="main">
      <div class="page-header">
        <h1><%= cliente ? 'Editar cliente' : 'Novo cliente' %></h1>
        <a href="<%= basePath %>/clientes" class="btn btn-outline">← Voltar</a>
      </div>

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

        <form method="POST"
              action="<%= basePath %><%= cliente && cliente.id ? '/clientes/' + cliente.id + '/editar' : '/clientes/novo' %>"
              enctype="multipart/form-data">

          <div class="section-title">Dados básicos</div>
          <div class="form-grid">
            <div class="field full">
              <label>Nome completo *</label>
              <input type="text" name="nome" required value="<%= cliente ? cliente.nome : '' %>">
            </div>
            <div class="field">
              <label>CPF</label>
              <input type="text" name="cpf" placeholder="000.000.000-00" value="<%= cliente ? (cliente.cpf || '') : '' %>">
            </div>
            <div class="field">
              <label>RG</label>
              <input type="text" name="rg" value="<%= cliente ? (cliente.rg || '') : '' %>">
            </div>
            <div class="field">
              <label>Data de nascimento</label>
              <input type="date" name="data_nascimento" value="<%= cliente && cliente.data_nascimento ? cliente.data_nascimento.toISOString ? cliente.data_nascimento.toISOString().slice(0,10) : cliente.data_nascimento : '' %>">
            </div>
            <div class="field">
              <label>Estado civil</label>
              <select name="estado_civil">
                <option value="">Selecione</option>
                <% ['Solteiro(a)','Casado(a)','Divorciado(a)','Viúvo(a)','União estável'].forEach(op => { %>
                  <option value="<%= op %>" <%= cliente && cliente.estado_civil === op ? 'selected' : '' %>><%= op %></option>
                <% }) %>
              </select>
            </div>
            <div class="field">
              <label>Nome da mãe</label>
              <input type="text" name="nome_mae" value="<%= cliente ? (cliente.nome_mae || '') : '' %>">
            </div>
            <div class="field">
              <label>Profissão</label>
              <input type="text" name="profissao" value="<%= cliente ? (cliente.profissao || '') : '' %>">
            </div>
            <div class="field">
              <label>Renda mensal (R$)</label>
              <input type="number" step="0.01" name="renda_mensal" value="<%= cliente ? (cliente.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" value="<%= cliente ? (cliente.whatsapp || '') : '' %>">
              <span class="hint">Usado para o botão de contato via WhatsApp</span>
            </div>
            <div class="field">
              <label>Telefone</label>
              <input type="tel" name="telefone" value="<%= cliente ? (cliente.telefone || '') : '' %>">
            </div>
            <div class="field">
              <label>E-mail</label>
              <input type="email" name="email" value="<%= cliente ? (cliente.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" value="<%= cliente ? (cliente.cep || '') : '' %>">
            </div>
            <div class="field full" style="grid-column: span 2;">
              <label>Endereço</label>
              <input type="text" name="endereco" value="<%= cliente ? (cliente.endereco || '') : '' %>">
            </div>
            <div class="field">
              <label>Número</label>
              <input type="text" name="numero" value="<%= cliente ? (cliente.numero || '') : '' %>">
            </div>
            <div class="field">
              <label>Bairro</label>
              <input type="text" name="bairro" value="<%= cliente ? (cliente.bairro || '') : '' %>">
            </div>
            <div class="field">
              <label>Cidade</label>
              <input type="text" name="cidade" value="<%= cliente ? (cliente.cidade || '') : '' %>">
            </div>
            <div class="field">
              <label>UF</label>
              <input type="text" name="estado" maxlength="2" value="<%= cliente ? (cliente.estado || '') : '' %>">
            </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" value="<%= cliente ? (cliente.referencia_nome || '') : '' %>">
            </div>
            <div class="field">
              <label>Telefone</label>
              <input type="tel" name="referencia_telefone" value="<%= cliente ? (cliente.referencia_telefone || '') : '' %>">
            </div>
            <div class="field">
              <label>Parentesco</label>
              <input type="text" name="referencia_parentesco" value="<%= cliente ? (cliente.referencia_parentesco || '') : '' %>">
            </div>
          </div>

          <div class="section-title">Captador e observações</div>
          <div class="form-grid">
            <div class="field">
              <label>Captador responsável</label>
              <select name="captador_id">
                <option value="">Nenhum</option>
                <% captadores.forEach(cap => { %>
                  <option value="<%= cap.id %>" <%= cliente && cliente.captador_id == cap.id ? 'selected' : '' %>><%= cap.nome %></option>
                <% }) %>
              </select>
            </div>
            <% if (cliente && cliente.id) { %>
            <div class="field">
              <label>Status</label>
              <select name="status">
                <% ['ativo','inativo','bloqueado'].forEach(op => { %>
                  <option value="<%= op %>" <%= cliente.status === op ? 'selected' : '' %>><%= op %></option>
                <% }) %>
              </select>
            </div>
            <% } %>
            <div class="field full">
              <label>Observações</label>
              <textarea name="observacoes"><%= cliente ? (cliente.observacoes || '') : '' %></textarea>
            </div>
          </div>

          <div class="section-title">Anexos (documentos)</div>
          <p class="hint" style="margin-top:-6px;">Imagens ou PDF, até 10MB cada.</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">Salvar cliente</button>
            <a href="<%= basePath %>/clientes" class="btn btn-outline">Cancelar</a>
          </div>
        </form>
      </div>
    </main>
  </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>
