{% extends "base.html" %}
{% block title %}Relatorios{% endblock %}
{% set active = "reports" %}
{% block content %}
<h4 class="mb-3">Relatorios 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="de" class="form-control" value="{{ de }}">
  </div>
  <div class="col-md-2">
    <label class="form-label">Ate</label>
    <input type="date" name="ate" class="form-control" value="{{ ate }}">
  </div>
  <div class="col-md-2">
    <label class="form-label">Agente</label>
    <select name="agente" class="form-select">
      <option value="">Todos</option>
      {% for a in agentes %}
      <option value="{{ a }}" {% if a == agente_sel %}selected{% endif %}>{{ a }}</option>
      {% endfor %}
    </select>
  </div>
  <div class="col-md-2">
    <label class="form-label">Status</label>
    <select name="status" class="form-select">
      <option value="">Todos</option>
      <option value="completed" {% if status_sel == "completed" %}selected{% endif %}>Atendida</option>
      <option value="missed" {% if status_sel == "missed" %}selected{% endif %}>Perdida</option>
      <option value="busy" {% if status_sel == "busy" %}selected{% endif %}>Ocupado</option>
      <option value="noanswer" {% if status_sel == "noanswer" %}selected{% endif %}>Sem resposta</option>
    </select>
  </div>
  <div class="col-md-2">
    <label class="form-label">Direcao</label>
    <select name="direcao" class="form-select">
      <option value="">Todas</option>
      <option value="inbound" {% if direcao_sel == "inbound" %}selected{% endif %}>Entrada</option>
      <option value="outbound" {% if direcao_sel == "outbound" %}selected{% endif %}>Saida</option>
      <option value="internal" {% if direcao_sel == "internal" %}selected{% endif %}>Interna</option>
    </select>
  </div>
  <div class="col-md-2 d-flex align-items-end">
    <button type="submit" class="btn btn-primary me-2 w-100">Filtrar</button>
  </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 Medio</div>
      <div class="card-text">{{ tempo_formatado }}</div>
    </div>
  </div>
</div>

{% if calls %}
<div class="table-responsive">
  <table class="table table-hover">
    <thead>
      <tr>
        <th>#</th>
        <th>Origem</th>
        <th>Destino</th>
        <th>Direcao</th>
        <th>Status</th>
        <th>Horario</th>
        <th>Data</th>
      </tr>
    </thead>
    <tbody>
      {% for c in calls %}
      <tr>
        <td>{{ c.id }}</td>
        <td>{{ c.from_number }}</td>
        <td>{{ c.to_number or "-" }}</td>
        <td><span class="badge {% if c.direction == "inbound" %}bg-success{% elif c.direction == "internal" %}bg-secondary{% else %}bg-warning{% endif %}">{{ c.direction }}</span></td>
        <td><span class="badge {% if c.status == "completed" %}bg-success{% elif c.status == "missed" or c.status == "busy" or c.status == "noanswer" %}bg-danger{% else %}bg-warning{% endif %}">{{ c.status }}</span></td>
        <td>{% if c.started_at and c.ended_at %}{{ c.started_at.strftime("%H:%M") }}-{{ c.ended_at.strftime("%H:%M") }}{% else %}-{% endif %}</td>
        <td>{{ c.created_at.strftime("%d/%m/%Y %H:%M") if c.created_at else "-" }}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
<div class="d-flex justify-content-between align-items-center mt-3">
  <div>
    <a href="/app/reports/csv?de={{ de }}&ate={{ ate }}&agente={{ agente_sel }}&status={{ status_sel }}&direcao={{ direcao_sel }}" class="btn btn-success">Baixar CSV</a>
  </div>
  {% if total_pages > 1 %}
  <nav>
    <ul class="pagination mb-0">
      {% for p in range(1, total_pages + 1) %}
      <li class="page-item {% if p == page %}active{% endif %}">
        <a class="page-link" href="/app/reports?page={{ p }}&de={{ de }}&ate={{ ate }}&agente={{ agente_sel }}&status={{ status_sel }}&direcao={{ direcao_sel }}">{{ p }}</a>
      </li>
      {% endfor %}
    </ul>
  </nav>
  {% endif %}
</div>
{% else %}
<div class="alert alert-info">Nenhuma chamada encontrada no periodo.</div>
{% endif %}
{% endblock %}