{% extends 'base.html' %}
{% block content %}
<h2 class="mb-4">Reportes</h2>
<div class="card shadow-sm mb-4">
  <div class="card-body">
    <form method="get" class="row g-3">
      <div class="col-md-4"><label class="form-label">Desde</label><input class="form-control" type="date" name="start" value="{{ start.isoformat() }}"></div>
      <div class="col-md-4"><label class="form-label">Hasta</label><input class="form-control" type="date" name="end" value="{{ end.isoformat() }}"></div>
      <div class="col-md-4 d-grid align-items-end"><button class="btn btn-primary mt-md-4">Actualizar</button></div>
    </form>
  </div>
</div>
<div class="row g-3 mb-4">
  <div class="col-md-3"><div class="card metric-card"><div class="card-body"><div class="metric-label">Total</div><div class="metric-number">{{ total }}</div></div></div></div>
  <div class="col-md-3"><div class="card metric-card"><div class="card-body"><div class="metric-label">Confirmados</div><div class="metric-number">{{ confirmed }}</div></div></div></div>
  <div class="col-md-3"><div class="card metric-card"><div class="card-body"><div class="metric-label">Completados</div><div class="metric-number">{{ completed }}</div></div></div></div>
  <div class="col-md-3"><div class="card metric-card"><div class="card-body"><div class="metric-label">Ingreso teórico</div><div class="metric-number">${{ '%.2f'|format(revenue) }}</div></div></div></div>
</div>
<div class="row g-4">
  <div class="col-lg-6">
    <div class="card shadow-sm"><div class="card-header fw-bold">Turnos por profesional</div><div class="card-body">
      <ul class="list-group list-group-flush">
      {% for name, count in by_professional %}
        <li class="list-group-item d-flex justify-content-between"><span>{{ name }}</span><strong>{{ count }}</strong></li>
      {% else %}
        <li class="list-group-item text-muted">Sin datos.</li>
      {% endfor %}
      </ul>
    </div></div>
  </div>
  <div class="col-lg-6">
    <div class="card shadow-sm"><div class="card-header fw-bold">Turnos por servicio</div><div class="card-body">
      <ul class="list-group list-group-flush">
      {% for name, count in by_service %}
        <li class="list-group-item d-flex justify-content-between"><span>{{ name }}</span><strong>{{ count }}</strong></li>
      {% else %}
        <li class="list-group-item text-muted">Sin datos.</li>
      {% endfor %}
      </ul>
    </div></div>
  </div>
</div>
{% endblock %}