{% extends 'base.html' %}
{% block content %}
<div class="d-flex justify-content-between align-items-start flex-wrap gap-3 mb-4">
  <div>
    <h1 class="h3 mb-1">Obra social</h1>
    <p class="text-muted mb-0">Catálogo local sincronizable desde la SSSalud. Se guarda el grupo oficial, origen de datos y estado de cada tipo.</p>
  </div>
  <form method="post" action="{{ url_for('admin_obras_sociales_sync') }}">
    <button class="btn btn-primary">Sincronizar ahora</button>
  </form>
</div>

<div class="row g-4">
  <div class="col-xl-8">
    <div class="card shadow-sm mb-3">
      <div class="card-body">
        <form method="get" class="row g-3">
          <div class="col-md-6"><input class="form-control" name="q" value="{{ request.args.get('q','') }}" placeholder="Buscar por denominación, RNAS, localidad o categoría"></div>
          <div class="col-md-2"><input class="form-control" name="tipo" value="{{ request.args.get('tipo','') }}" placeholder="Tipo"></div>
          <div class="col-md-2"><select class="form-select" name="sort"><option value="denominacion">Denominación</option><option value="rnas" {% if request.args.get('sort')=='rnas' %}selected{% endif %}>RNAS</option><option value="tipo" {% if request.args.get('sort')=='tipo' %}selected{% endif %}>Tipo</option><option value="localidad" {% if request.args.get('sort')=='localidad' %}selected{% endif %}>Localidad</option></select></div>
          <div class="col-md-2 d-grid"><button class="btn btn-outline-primary">Filtrar</button></div>
        </form>
      </div>
    </div>

    <div class="card shadow-sm">
      <div class="card-header d-flex justify-content-between align-items-center"><span class="fw-bold">Listado</span><span class="small text-muted">Página {{ pagination.page }} de {{ pagination.pages or 1 }}</span></div>
      <div class="table-responsive">
        <table class="table align-middle mb-0">
          <thead><tr><th>RNAS</th><th>Denominación</th><th>Tipo</th><th>Localidad</th><th>Opciones</th></tr></thead>
          <tbody>
            {% for item in items %}
            <tr>
              <td>{{ item.rnas }}</td>
              <td>{{ item.denominacion }}<br><span class="small text-muted">{{ item.categoria_oficial }}</span></td>
              <td>{{ item.tipo }}</td>
              <td>{{ item.localidad or '—' }}</td>
              <td>{{ item.habilitada_opciones or '—' }}</td>
            </tr>
            {% else %}
            <tr><td colspan="5" class="text-center text-muted py-4">No hay datos cargados todavía.</td></tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
      {% if pagination.pages > 1 %}
      <div class="card-body border-top">
        <nav><ul class="pagination mb-0 justify-content-end">
          <li class="page-item {% if not pagination.has_prev %}disabled{% endif %}"><a class="page-link" href="{{ url_for('admin_obras_sociales', page=pagination.prev_num, q=request.args.get('q',''), tipo=request.args.get('tipo',''), sort=request.args.get('sort','denominacion'), dir=request.args.get('dir','asc')) }}">Anterior</a></li>
          {% for page_num in pagination.iter_pages() %}
            {% if page_num %}<li class="page-item {% if page_num == pagination.page %}active{% endif %}"><a class="page-link" href="{{ url_for('admin_obras_sociales', page=page_num, q=request.args.get('q',''), tipo=request.args.get('tipo',''), sort=request.args.get('sort','denominacion'), dir=request.args.get('dir','asc')) }}">{{ page_num }}</a></li>{% else %}<li class="page-item disabled"><span class="page-link">…</span></li>{% endif %}
          {% endfor %}
          <li class="page-item {% if not pagination.has_next %}disabled{% endif %}"><a class="page-link" href="{{ url_for('admin_obras_sociales', page=pagination.next_num, q=request.args.get('q',''), tipo=request.args.get('tipo',''), sort=request.args.get('sort','denominacion'), dir=request.args.get('dir','asc')) }}">Siguiente</a></li>
        </ul></nav>
      </div>
      {% endif %}
    </div>
  </div>
  <div class="col-xl-4">
    <div class="card shadow-sm">
      <div class="card-header fw-bold">Estado por tipo</div>
      <div class="card-body p-0">
        {% for page in pages_meta %}
        <div class="audit-line px-3">
          <div class="d-flex justify-content-between gap-2">
            <strong>Tipo {{ page.tipo }}</strong>
            <span class="badge {% if page.status == 'ok' %}text-bg-success{% elif page.status == 'warning' %}text-bg-warning{% elif page.status == 'error' %}text-bg-danger{% else %}text-bg-secondary{% endif %}">{{ page.status }}</span>
          </div>
          <div class="small text-muted mt-1">{{ page.categoria_oficial or 'Sin categoría detectada' }}</div>
          <div class="small text-muted">Origen: {{ page.origen_datos or '—' }}</div>
          <div class="small text-muted">Filas: {{ page.row_count or 0 }} · Última sync: {{ page.last_synced_at.strftime('%d/%m/%Y %H:%M') if page.last_synced_at else 'Nunca' }}</div>
          {% if page.last_error %}<div class="small text-danger mt-1">{{ page.last_error }}</div>{% endif %}
        </div>
        {% else %}
        <div class="p-4 text-muted">Todavía no corriste ninguna sincronización.</div>
        {% endfor %}
      </div>
    </div>
  </div>
</div>
{% endblock %}