{% extends "layout.html" %}
{% block content %}

<style>
  :root {
    --header-bg: #00274e;
    --section-bg: #ffffff;
    --section-border: #e2e8f0;
    --section-shadow: rgba(0,0,0,0.08);
    --title-color: #333;
    --text-gray: #64748b;
    --primary-blue: #004a99;
    --primary-blue-hover: #1d5fbf;
  }

  .card-block {
    background: var(--section-bg);
    border-radius: 14px;
    border: 1px solid var(--section-border);
    box-shadow: 0 4px 12px var(--section-shadow);
    padding: 25px;
    margin-bottom: 32px;
  }

  .card-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    color: var(--title-color);
    font-size: 18px;
    font-weight: 700;
  }

  .empty-state {
    text-align: center;
    color: var(--text-gray);
    padding: 30px 0;
  }

  .empty-state i {
    font-size: 40px;
    opacity: 0.4;
    margin-bottom: 10px;
  }
</style>

<div class="content">

  <!-- HEADER PADRÃO -->
  <header>
    <h3>Consultar Informes DMED</h3>
  </header>

  <main>

    <!-- ======================== -->
    <!-- CARD: FILTROS -->
    <!-- ======================== -->
    <div class="card-block">

      <div class="card-title-row">
        <i class="bi bi-search"></i>
        Filtros de Consulta
      </div>

      <form id="busca-form">
        <div class="row g-3 align-items-end">

          <div class="col-md-4">
            <label class="form-label">CPF do Beneficiário</label>
            <input class="form-control" id="cpf" placeholder="Somente números">
          </div>

          <div class="col-md-2">
            <label class="form-label">Ano</label>
            <input class="form-control" id="ano" placeholder="Ex: 2024">
          </div>

          <div class="col-md-3">
            <button class="btn btn-primary w-100">
              <i class="bi bi-search"></i> Buscar Informes
            </button>
          </div>

        </div>
      </form>
    </div>

    <!-- ======================== -->
    <!-- CARD: RESULTADOS -->
    <!-- ======================== -->
    <div class="card-block">

      <div class="card-title-row">
        <i class="bi bi-file-earmark-text"></i>
        Resultados Encontrados
      </div>

      <div class="table-responsive">
        <table class="table table-hover align-middle">
          <thead class="table-light">
            <tr>
              <th>Beneficiário</th>
              <th>Titular</th>
              <th>Ano</th>
              <th class="text-center">Ação</th>
            </tr>
          </thead>
          <tbody id="resultado">
            <tr>
              <td colspan="4">
                <div class="empty-state">
                  <i class="bi bi-info-circle"></i>
                  <div>Nenhum informe consultado ainda</div>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>

    </div>

  </main>
</div>

{% endblock %}

{% block scripts %}
<script>
document.getElementById("busca-form").addEventListener("submit", async e => {
  e.preventDefault()

  const cpf = document.getElementById("cpf").value
  const ano = document.getElementById("ano").value

  const resp = await fetch(`/api/informes?cpf=${cpf}&ano=${ano}`)
  const dados = await resp.json()

  const tb = document.getElementById("resultado")
  tb.innerHTML = ""

  if (!dados.length) {
    tb.innerHTML = `
      <tr>
        <td colspan="4">
          <div class="empty-state">
            <i class="bi bi-folder-x"></i>
            <div>Nenhum informe encontrado</div>
          </div>
        </td>
      </tr>
    `
    return
  }

  dados.forEach(i => {
    tb.innerHTML += `
      <tr>
        <td>${i.nome_beneficiario}</td>
        <td>${i.nome_titular}</td>
        <td>${i.ano_calendario}</td>
        <td class="text-center">
          <a href="/download/${i.id}" class="btn btn-sm btn-outline-primary">
            <i class="bi bi-download"></i> Download
          </a>
        </td>
      </tr>
    `
  })
})
</script>
{% endblock %}