<?php /* Comprovante de Pagamento - Contas a Pagar */ ?>
<div class="page-header">
  <h1>Comprovante de Pagamento</h1>
  <p class="muted">Detalhes do pagamento e histórico da conta</p>
  <div style="display:flex;gap:0.5rem;flex-wrap:wrap;margin-top:0.5rem;">
    <a href="/financeiro/pagar" class="btn btn-secondary">← Voltar</a>
    <button class="btn btn-primary" onclick="window.print()">🖨️ Imprimir</button>
  </div>
  <hr />
  <div id="receiptStatus" class="muted" style="margin-top:0.5rem;"></div>
  <div id="reconcileStatus" class="muted" style="margin-top:0.25rem;"></div>
  <div style="margin-top:0.5rem;">
    <small>Referência: <code id="receiptRef">-</code></small>
  </div>
  
</div>

<section class="card" id="receiptCard" style="display:none;">
  <div class="form-grid" style="display:grid;grid-template-columns:repeat(2, minmax(220px, 1fr));gap:1rem;">
    <div>
      <label class="muted">Descrição</label>
      <div id="recDescricao" class="strong">-</div>
    </div>
    <div>
      <label class="muted">Fornecedor</label>
      <div id="recFornecedor">-</div>
    </div>
    <div>
      <label class="muted">Documento</label>
      <div id="recDocumento">-</div>
    </div>
    <div>
      <label class="muted">Valor</label>
      <div id="recValor">-</div>
    </div>
    <div>
      <label class="muted">Pago em</label>
      <div id="recDataPgto">-</div>
    </div>
    <div>
      <label class="muted">Valor Pago</label>
      <div id="recValorPago">-</div>
    </div>
    <div>
      <label class="muted">Forma</label>
      <div id="recForma">-</div>
    </div>
    <div>
      <label class="muted">Observações</label>
      <div id="recObs">-</div>
    </div>
  </div>
</section>

<section class="card" id="historyCard" style="display:none;">
  <h3>Histórico de Pagamentos</h3>
  <div style="overflow-x:auto;">
    <table class="table">
      <thead>
        <tr>
          <th>ID</th>
          <th>Data</th>
          <th>Valor</th>
          <th>Forma</th>
          <th>Observações</th>
        </tr>
      </thead>
      <tbody id="historyBody">
        <tr><td colspan="5" style="text-align:center;padding:1rem;">Carregando histórico...</td></tr>
      </tbody>
    </table>
  </div>
</section>

<section class="card" id="reconcileCard" style="display:none;">
  <h3>Conciliação Bancária</h3>
  <div class="muted" style="margin-bottom:0.5rem;">Se necessário, registre a referência de conciliação.</div>
  <div class="form-row">
    <input id="reconcileRefInput" class="input" placeholder="ID/Referência bancária" style="flex:1;min-width:200px;" />
    <button id="btnReconcile" class="btn btn-secondary">Conciliar</button>
  </div>
  <div id="reconcileMsg" class="muted" style="margin-top:0.5rem;"></div>
</section>

<script>
(function() {
  const apiRequest = window.apiRequest || function(url, options = {}) {
    return fetch(url, {
      headers: { 'Content-Type': 'application/json', ...(options.headers || {}) },
      ...options
    }).then(r => { if (!r.ok) throw new Error('HTTP ' + r.status); return r.json(); });
  };

  const path = window.location.pathname;
  const idMatch = path.match(/contas-pagar\/(\d+)\/comprovante/);
  const contaId = idMatch ? parseInt(idMatch[1], 10) : 0;

  const fmtBRL = (v) => 'R$ ' + Number(v || 0).toFixed(2);
  const fmtDate = (d) => {
    try { return new Date(d).toLocaleDateString('pt-BR'); } catch (_) { return d || '-'; }
  };

  function loadConta() {
    apiRequest(`/api/financeiro/contas-pagar/${contaId}`)
      .then(res => {
        const c = res.data || {};
        document.getElementById('recDescricao').textContent = c.descricao || '-';
        document.getElementById('recFornecedor').textContent = c.fornecedor || '-';
        document.getElementById('recDocumento').textContent = c.documento || '-';
        document.getElementById('recValor').textContent = fmtBRL(c.valor);
        document.getElementById('recDataPgto').textContent = fmtDate(c.data_pagamento);
        document.getElementById('recValorPago').textContent = fmtBRL(c.valor_pago);
        document.getElementById('recForma').textContent = c.forma_pagamento || '-';
        document.getElementById('recObs').textContent = c.observacoes_pagamento || '-';
        document.getElementById('receiptCard').style.display = 'block';

        const statusEl = document.getElementById('receiptStatus');
        if (c.status === 'pago') {
          statusEl.textContent = `Status: PAGO`;
        } else {
          statusEl.textContent = `Status: ${c.status || '-'}`;
        }
        const ref = c.reconciliation_reference || '-';
        document.getElementById('receiptRef').textContent = ref;

        const recStatus = document.getElementById('reconcileStatus');
        if (c.reconciled_at) {
          recStatus.textContent = `Conciliado em ${fmtDate(c.reconciled_at)} (ref: ${ref})`;
        } else {
          recStatus.textContent = `Não conciliado`;
          document.getElementById('reconcileCard').style.display = 'block';
        }
      })
      .catch(err => {
        console.error('Erro ao carregar conta', err);
        document.getElementById('receiptStatus').textContent = 'Erro ao carregar conta.';
      });
  }

  function loadHistory() {
    apiRequest(`/api/financeiro/contas-pagar/${contaId}/historico`)
      .then(res => {
        const rows = res.data || [];
        const tbody = document.getElementById('historyBody');
        if (!rows.length) {
          tbody.innerHTML = '<tr><td colspan="5" style="text-align:center;">Sem histórico</td></tr>';
        } else {
          tbody.innerHTML = rows.map(r => `
            <tr>
              <td>${r.id}</td>
              <td>${fmtDate(r.data_pagamento)}</td>
              <td>${fmtBRL(r.valor_pago)}</td>
              <td>${r.forma_pagamento || '-'}</td>
              <td>${r.observacoes || '-'}</td>
            </tr>
          `).join('');
        }
        document.getElementById('historyCard').style.display = 'block';
      })
      .catch(err => {
        console.error('Erro ao carregar histórico', err);
      });
  }

  document.getElementById('btnReconcile').addEventListener('click', function() {
    const ref = (document.getElementById('reconcileRefInput').value || '').trim();
    if (!ref) { alert('Informe a referência de conciliação'); return; }
    apiRequest(`/api/financeiro/contas-pagar/${contaId}/conciliar`, {
      method: 'POST',
      body: JSON.stringify({ reference: ref })
    })
    .then(res => {
      document.getElementById('reconcileMsg').textContent = 'Conciliado com sucesso: ' + (res.reference || ref);
      document.getElementById('reconcileCard').style.display = 'none';
      loadConta();
    })
    .catch(err => {
      console.error('Erro ao conciliar', err);
      document.getElementById('reconcileMsg').textContent = 'Erro ao conciliar.';
    });
  });

  // Inicialização
  if (!contaId) {
    document.getElementById('receiptStatus').textContent = 'ID inválido no caminho';
  } else {
    loadConta();
    loadHistory();
  }
})();
</script>