{% extends "base.html" %}
{% block title %}CDR{% endblock %}
{% set active = "cdr" %}
{% block content %}
<h4 class="mb-3">📞 CDR - Histórico de Chamadas</h4>

<form method="get" class="row g-3 mb-4">
  <div class="col-md-2">
    <label class="form-label">De</label>
    <input type="date" name="data_inicio" class="form-control" value="{{ de }}">
  </div>
  <div class="col-md-2">
    <label class="form-label">Até</label>
    <input type="date" name="data_fim" class="form-control" value="{{ ate }}">
  </div>
  <div class="col-md-2">
    <label class="form-label">Status</label>
    <select name="status" class="form-select">
      <option value="">Todos</option>
      <option value="atendida" {% if status_sel == "atendida" %}selected{% endif %}>Atendida</option>
      <option value="perdida" {% if status_sel == "perdida" %}selected{% endif %}>Perdida</option>
      <option value="ocupado" {% if status_sel == "ocupado" %}selected{% endif %}>Ocupado</option>
    </select>
  </div>
  <div class="col-md-2">
    <label class="form-label">Direção</label>
    <select name="direcao" class="form-select">
      <option value="">Todas</option>
      <option value="outbound" {% if direcao_sel == "outbound" %}selected{% endif %}>Saída</option>
      <option value="inbound" {% if direcao_sel == "inbound" %}selected{% endif %}>Entrada</option>
    </select>
  </div>
  <div class="col-md-2 d-flex align-items-end">
    <button type="submit" class="btn btn-primary w-100">🔍 Filtrar</button>
  </div>
  <div class="col-md-2 d-flex align-items-end">
    <a href="javascript:void(0)" onclick="exportCSV()" class="btn btn-success w-100">📥 CSV</a>
  </div>
</form>

<div class="row g-3 mb-4">
  <div class="col-md-3"><div class="card card-dash"><div class="card-title">Total</div><div class="card-text">{{ total }}</div></div></div>
  <div class="col-md-3"><div class="card card-dash"><div class="card-title">Atendidas</div><div class="card-text">{{ atendidas }}</div></div></div>
  <div class="col-md-3"><div class="card card-dash"><div class="card-title">Perdidas</div><div class="card-text">{{ perdidas }}</div></div></div>
  <div class="col-md-3"><div class="card card-dash"><div class="card-title">Tempo Médio</div><div class="card-text">{{ tempo_formatado }}</div></div></div>
</div>

{% if calls %}
<div class="table-responsive">
  <table class="table table-hover align-middle small">
    <thead class="table-light">
      <tr>
        <th>Uniq.ID</th>
        <th>Data/Hora</th>
        <th>Origem</th>
        <th>Destino</th>
        <th>Direção</th>
        <th>Duração</th>
        <th>Status</th>
      </tr>
    </thead>
    <tbody>
      {% for c in calls %}
      <tr>
        <td style="font-size:0.8em;font-family:monospace">{{ c.uniqueid }}</td><td class="text-nowrap">{{ c.calldate }}</td>
        <td>{{ c.call_from }}</td>
        <td>{{ c.call_to }}</td>
        <td>
          {% if c.direction == "outbound" %}
            <span class="badge bg-warning text-dark">📤 Saída</span>
          {% elif c.direction == "inbound" %}
            <span class="badge bg-success">📥 Entrada</span>
          {% else %}
            <span class="badge bg-secondary">—</span>
          {% endif %}
        </td>
        <td>{{ c.duration }}</td>
        <td>
          {% if c.status == "answered" %}
            <span class="badge bg-success">Atendida</span>
          {% elif c.status == "busy" %}
            <span class="badge bg-danger">Ocupado</span>
          {% elif c.status == "lost" %}
            <span class="badge bg-secondary">Não Atendida</span>
          {% else %}
            <span class="badge bg-light text-muted">—</span>
          {% endif %}
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% if total_pages > 1 %}
<nav><ul class="pagination justify-content-center">
  {% for p in range(1, total_pages + 1) %}
  <li class="page-item {% if p == page %}active{% endif %}">
    <a class="page-link" href="/app/cdr?page={{ p }}&data_inicio={{ de }}&data_fim={{ ate }}&status={{ status_sel }}&direcao={{ direcao_sel }}">{{ p }}</a>
  </li>
  {% endfor %}
</ul></nav>
{% endif %}
{% else %}
<div class="alert alert-info">Nenhuma chamada encontrada no período.</div>
{% endif %}
<script>
function exportCSV() {
  var p = new URLSearchParams(window.location.search);
  var formEl = document.querySelector("form");
  if (formEl) {
    var fd = new FormData(formEl);
    for (var e of fd) { if (e[1]) p.set(e[0], e[1]); }
  }
  p.set("csv", "1");
  window.location.href = "/app/cdr?" + p.toString();
}
</script>
{% endblock %}