<!DOCTYPE html>
<html lang="pt-br">
<head>
  <title>Empréstimo de <%= emprestimo.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>Empréstimo de <%= emprestimo.cliente_nome %></h1>
          <p class="text-muted" style="margin-top:2px;">
            <span class="badge badge-<%= emprestimo.status %>"><%= emprestimo.status %></span>
            &nbsp;Captador: <%= emprestimo.captador_nome || '—' %>
          </p>
        </div>
        <div class="chip-list">
          <a class="btn btn-whatsapp" target="_blank"
             href="<%= linkWhatsapp(emprestimo.cliente_whatsapp, 'Olá ' + emprestimo.cliente_nome + ', tudo bem?') %>">WhatsApp</a>
          <a class="btn btn-outline" href="<%= basePath %>/clientes/<%= emprestimo.cliente_id %>">Ver cliente</a>
        </div>
      </div>

      <div class="cards-grid" style="grid-template-columns: repeat(4, 1fr);">
        <div class="stat-card"><div class="label">Emprestado</div><div class="valor" style="font-size:20px;"><%= formatMoeda(emprestimo.valor_emprestado) %></div></div>
        <div class="stat-card"><div class="label">Total devido</div><div class="valor" style="font-size:20px;"><%= formatMoeda(emprestimo.valor_total_devido) %></div></div>
        <div class="stat-card atrasados"><div class="label">Saldo devedor</div><div class="valor" style="font-size:20px;"><%= formatMoeda(saldoDevedor) %></div></div>
        <div class="stat-card avencer">
          <div class="label">Próxima parcela</div>
          <% if (proximaParcela) { %>
            <div class="valor" style="font-size:20px;"><%= formatMoeda(proximaParcela.valor_previsto - proximaParcela.valor_pago) %></div>
            <div class="qtd">vence em <%= formatData(proximaParcela.data_vencimento) %></div>
          <% } else { %>
            <div class="valor" style="font-size:20px; color: var(--color-success);">Quitado</div>
          <% } %>
        </div>
      </div>

      <div class="section-title">Parcelas</div>
      <div class="table-wrap">
        <table>
          <thead>
            <tr><th>Nº</th><th>Vencimento</th><th class="text-right">Valor</th><th class="text-right">Pago</th><th>Status</th><th></th></tr>
          </thead>
          <tbody>
            <% parcelas.forEach(p => { %>
              <tr>
                <td><%= p.numero_parcela %></td>
                <td>
                  <%= formatData(p.data_vencimento) %>
                  <button type="button" class="btn btn-sm btn-outline" style="padding:2px 8px; margin-left:6px;"
                          onclick="document.getElementById('venc-form-<%= p.id %>').classList.toggle('hidden-form')" title="Editar data de vencimento">✏️</button>
                </td>
                <td class="text-right mono"><%= formatMoeda(p.valor_previsto) %></td>
                <td class="text-right mono"><%= formatMoeda(p.valor_pago) %></td>
                <td>
                  <% if (p.status === 'pago') { %><span class="badge badge-pago">pago</span>
                  <% } else if (p.status === 'parcial') { %><span class="badge badge-parcial">parcial</span>
                  <% } else if (new Date(p.data_vencimento) < new Date().setHours(0,0,0,0)) { %><span class="badge badge-atrasado">atrasado</span>
                  <% } else { %><span class="badge badge-pendente">pendente</span><% } %>
                </td>
                <td class="text-right">
                  <% if (p.status !== 'pago') { %>
                    <button class="btn btn-sm btn-primary" onclick="document.getElementById('form-<%= p.id %>').classList.toggle('hidden-form')">Registrar pagamento</button>
                  <% } %>
                </td>
              </tr>

              <tr id="venc-form-<%= p.id %>" class="hidden-form">
                <td colspan="6" style="background:var(--color-surface-alt);">
                  <form method="POST" action="<%= basePath %>/emprestimos/<%= emprestimo.id %>/parcelas/<%= p.id %>/vencimento"
                        style="display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; padding:10px 0;">
                    <div class="field">
                      <label>Nova data de vencimento (parcela nº <%= p.numero_parcela %>)</label>
                      <input type="date" name="nova_data_vencimento" required value="<%= new Date(p.data_vencimento).toISOString().slice(0,10) %>">
                    </div>
                    <button type="submit" class="btn btn-primary btn-sm">Salvar data</button>
                  </form>
                </td>
              </tr>

              <% if (p.status !== 'pago') { %>
              <tr id="form-<%= p.id %>" class="hidden-form">
                <td colspan="6" style="background:var(--color-surface-alt);">
                  <form method="POST" action="<%= basePath %>/emprestimos/<%= emprestimo.id %>/parcelas/<%= p.id %>/pagamento"
                        style="display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; padding:10px 0;">
                    <div class="field">
                      <label>Valor pago (R$)</label>
                      <input type="number" step="0.01" name="valor_pago" required
                             id="valor-pago-<%= p.id %>"
                             oninput="document.getElementById('saldo-restante-<%= p.id %>').textContent = ((<%= p.valor_previsto - p.valor_pago %>) - parseFloat(this.value || 0)).toFixed(2).replace('.', ',')"
                             value="<%= (p.valor_previsto - p.valor_pago).toFixed(2) %>">
                    </div>
                    <div class="field">
                      <label>Data do pagamento</label>
                      <input type="date" name="data_pagamento" required value="<%= new Date().toISOString().slice(0,10) %>">
                    </div>
                    <div class="field">
                      <label>Forma</label>
                      <select name="forma_pagamento">
                        <option value="pix">PIX</option>
                        <option value="dinheiro">Dinheiro</option>
                        <option value="transferencia">Transferência</option>
                        <option value="outro">Outro</option>
                      </select>
                    </div>
                    <div class="field" style="flex:1; min-width:180px;">
                      <label>Observação</label>
                      <input type="text" name="observacao">
                    </div>
                    <button type="submit" class="btn btn-primary btn-sm">Confirmar</button>

                    <div class="field full" style="width:100%; margin-top:4px; padding-top:10px; border-top:1px dashed var(--color-border);">
                      <label style="display:flex; align-items:center; gap:8px; font-weight:400;">
                        <input type="checkbox" name="gerar_nova_parcela" style="width:auto;"
                               onchange="document.getElementById('nova-parcela-<%= p.id %>').style.display = this.checked ? 'flex' : 'none'">
                        Pagamento parcial — mover o saldo restante (R$ <span id="saldo-restante-<%= p.id %>"><%= (p.valor_previsto - p.valor_pago).toFixed(2).replace('.', ',') %></span>) para uma nova parcela
                      </label>
                    </div>
                    <div class="field" id="nova-parcela-<%= p.id %>" style="display:none;">
                      <label>Nova data de vencimento (do saldo restante)</label>
                      <input type="date" name="nova_data_vencimento">
                    </div>
                  </form>
                </td>
              </tr>
              <% } %>
            <% }) %>
          </tbody>
        </table>
      </div>

      <div class="section-title">Histórico de pagamentos</div>
      <div class="table-wrap">
        <table>
          <thead><tr><th>Data</th><th>Parcela</th><th class="text-right">Valor pago</th><th>Forma</th><th>Observação</th></tr></thead>
          <tbody>
            <% if (historico.length === 0) { %>
              <tr><td colspan="5" class="empty-state">Nenhum pagamento registrado ainda.</td></tr>
            <% } %>
            <% historico.forEach(h => { %>
              <tr>
                <td><%= formatData(h.data_pagamento) %></td>
                <td>Nº <%= h.numero_parcela %></td>
                <td class="text-right mono"><%= formatMoeda(h.valor_pago) %></td>
                <td class="text-muted"><%= h.forma_pagamento || '-' %></td>
                <td class="text-muted"><%= h.observacao || '-' %></td>
              </tr>
            <% }) %>
          </tbody>
        </table>
      </div>
    </main>
  </div>

  <style>.hidden-form { display: none; }</style>
</body>
</html>
