{% extends 'base.html' %}
{% block content %}
<div class="d-flex justify-content-between align-items-center flex-wrap gap-3 mb-4">
  <div>
    <h1 class="h3 mb-1">Recordatorios automáticos</h1>
    <p class="text-muted mb-0">Base operativa para notificar turnos de las próximas {{ reminder_window }} horas.</p>
  </div>
  <form method="post"><button class="btn btn-primary">Procesar recordatorios ahora</button></form>
</div>

<div class="card table-panel tabbed-card">
  <ul class="nav nav-tabs" id="reminderTabs" role="tablist">
    <li class="nav-item"><button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tab-due" type="button">Pendientes de envío</button></li>
    <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-sent" type="button">Últimos envíos simulados</button></li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane fade show active" id="tab-due">
      <div class="card-header fw-bold">Pendientes de envío</div>
      <div class="table-responsive wide-table">
        <table class="table align-middle mb-0">
          <thead><tr><th>Fecha</th><th>Cliente</th><th>Servicio</th><th>Profesional</th><th>Email</th></tr></thead>
          <tbody>
          {% for item in due %}
            <tr>
              <td>{{ item.appointment_date.strftime('%d/%m/%Y') }}<br><span class="small text-muted">{{ item.start_time.strftime('%H:%M') }}</span></td>
              <td>{{ item.client_name }}</td>
              <td>{{ item.service.name }}</td>
              <td>{{ item.professional.display_name }}</td>
              <td>{{ item.client_email }}</td>
            </tr>
          {% else %}
            <tr><td colspan="5" class="text-center text-muted py-4">No hay recordatorios pendientes dentro de la ventana configurada.</td></tr>
          {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
    <div class="tab-pane fade" id="tab-sent">
      <div class="card-header fw-bold">Últimos envíos simulados</div>
      <div class="card-body">
        {% for log in recent_logs %}
          <div class="audit-line">
            <div class="fw-semibold">{{ log.action }}</div>
            <div class="small text-muted">{{ log.created_at.strftime('%d/%m/%Y %H:%M') }}</div>
            <div class="small">{{ log.details }}</div>
          </div>
        {% else %}
          <div class="text-muted">Todavía no hay envíos simulados.</div>
        {% endfor %}
      </div>
    </div>
  </div>
</div>
{% endblock %}