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

    <main class="main">
      <div class="page-header">
        <div>
          <h1><%= cliente.nome %></h1>
          <p class="text-muted" style="margin-top:2px;">
            <span class="badge badge-<%= cliente.status %>"><%= cliente.status %></span>
            &nbsp;Captador: <%= cliente.captador_nome || '—' %>
          </p>
        </div>
        <div class="chip-list">
          <a class="btn btn-whatsapp" target="_blank"
             href="<%= linkWhatsapp(cliente.whatsapp, 'Olá ' + cliente.nome + ', tudo bem?') %>">WhatsApp</a>
          <a class="btn btn-outline" href="<%= basePath %>/clientes/<%= cliente.id %>/editar">Editar cadastro</a>
          <a class="btn btn-primary" href="<%= basePath %>/clientes/<%= cliente.id %>/emprestimos/novo">+ Novo empréstimo</a>
        </div>
      </div>

      <div class="cards-grid" style="grid-template-columns: repeat(2, 1fr);">
        <div class="table-wrap" style="padding:20px 22px;">
          <div class="section-title" style="margin-top:0;">Dados pessoais</div>
          <table style="box-shadow:none;">
            <tbody>
              <tr><td class="text-muted">CPF</td><td><%= cliente.cpf || '-' %></td></tr>
              <tr><td class="text-muted">RG</td><td><%= cliente.rg || '-' %></td></tr>
              <tr><td class="text-muted">Nascimento</td><td><%= formatData(cliente.data_nascimento) %></td></tr>
              <tr><td class="text-muted">Estado civil</td><td><%= cliente.estado_civil || '-' %></td></tr>
              <tr><td class="text-muted">Nome da mãe</td><td><%= cliente.nome_mae || '-' %></td></tr>
              <tr><td class="text-muted">Profissão</td><td><%= cliente.profissao || '-' %></td></tr>
              <tr><td class="text-muted">Renda mensal</td><td><%= cliente.renda_mensal ? formatMoeda(cliente.renda_mensal) : '-' %></td></tr>
            </tbody>
          </table>
        </div>

        <div class="table-wrap" style="padding:20px 22px;">
          <div class="section-title" style="margin-top:0;">Contato e endereço</div>
          <table style="box-shadow:none;">
            <tbody>
              <tr><td class="text-muted">WhatsApp</td><td><%= cliente.whatsapp %></td></tr>
              <tr><td class="text-muted">Telefone</td><td><%= cliente.telefone || '-' %></td></tr>
              <tr><td class="text-muted">E-mail</td><td><%= cliente.email || '-' %></td></tr>
              <tr><td class="text-muted">Endereço</td><td><%= [cliente.endereco, cliente.numero, cliente.bairro].filter(Boolean).join(', ') || '-' %></td></tr>
              <tr><td class="text-muted">Cidade/UF</td><td><%= [cliente.cidade, cliente.estado].filter(Boolean).join(' / ') || '-' %></td></tr>
              <tr><td class="text-muted">Referência</td><td><%= cliente.referencia_nome ? cliente.referencia_nome + ' (' + (cliente.referencia_parentesco || '-') + ') - ' + (cliente.referencia_telefone || '') : '-' %></td></tr>
            </tbody>
          </table>
        </div>
      </div>

      <div class="section-title">Empréstimos</div>
      <div class="table-wrap">
        <table>
          <thead>
            <tr>
              <th>Data</th><th>Valor emprestado</th><th>Total devido</th><th>Saldo devedor</th><th>Status</th><th></th>
            </tr>
          </thead>
          <tbody>
            <% if (emprestimos.length === 0) { %>
              <tr><td colspan="6" class="empty-state">Nenhum empréstimo registrado ainda.</td></tr>
            <% } %>
            <% emprestimos.forEach(e => { %>
              <tr>
                <td><%= formatData(e.criado_em) %></td>
                <td class="mono"><%= formatMoeda(e.valor_emprestado) %></td>
                <td class="mono"><%= formatMoeda(e.valor_total_devido) %></td>
                <td class="mono"><strong><%= formatMoeda(e.saldo_devedor) %></strong></td>
                <td><span class="badge badge-<%= e.status %>"><%= e.status %></span></td>
                <td class="text-right"><a class="btn btn-sm btn-outline" href="<%= basePath %>/emprestimos/<%= e.id %>">Ver parcelas</a></td>
              </tr>
            <% }) %>
          </tbody>
        </table>
      </div>

      <div class="section-title">Anexos</div>
      <div class="table-wrap">
        <table>
          <thead><tr><th>Arquivo</th><th>Tipo</th><th>Enviado em</th><th></th></tr></thead>
          <tbody>
            <% if (anexos.length === 0) { %>
              <tr><td colspan="4" class="empty-state">Nenhum anexo enviado.</td></tr>
            <% } %>
            <% anexos.forEach(a => { %>
              <tr>
                <td><a href="<%= basePath + a.caminho_arquivo %>" target="_blank"><%= a.nome_original %></a></td>
                <td class="text-muted"><%= a.tipo_documento %></td>
                <td><%= formatData(a.criado_em) %></td>
                <td class="text-right">
                  <form method="POST" action="<%= basePath %>/clientes/<%= cliente.id %>/anexos/<%= a.id %>/excluir" onsubmit="return confirm('Excluir este anexo?');" style="display:inline;">
                    <button type="submit" class="btn btn-sm btn-danger">Excluir</button>
                  </form>
                </td>
              </tr>
            <% }) %>
          </tbody>
        </table>
      </div>
    </main>
  </div>
</body>
</html>
