{% extends 'base.html.twig' %}
{% block title %}Bitacora{% endblock %}

{% block breadcrumb %}
  <nav class="flex" aria-label="Breadcrumb">
    <ol class="flex items-center space-x-4">
      <li><a href="{{ path('home') }}" class="text-secondary-400 hover:text-secondary-500">Inicio</a></li>
      <li><span class="text-secondary-500">Bitacora</span></li>
    </ol>
  </nav>
{% endblock %}

{% block content_header %}
  <div class="md:flex md:items-center md:justify-between mb-6">
    <div>
      <h2 class="text-2xl font-bold leading-7 text-secondary-900 sm:text-3xl">Bitacora</h2>
      <p class="mt-1 text-sm text-secondary-500">Eventos operativos registrados en _temporalescxp.</p>
    </div>
    <a class="inline-flex items-center px-4 py-2 rounded-md border border-secondary-300 text-secondary-700 hover:bg-secondary-50" href="{{ path('config_auditoria_export_csv', app.request.query.all) }}">CSV</a>
  </div>
{% endblock %}

{% block content %}
  <div class="bg-white shadow rounded-lg mb-6">
    <form method="get" class="px-6 py-4 grid grid-cols-1 md:grid-cols-5 gap-4 items-end">
      <div>
        <label class="block text-sm font-medium text-secondary-700 mb-1">Desde</label>
        <input type="date" name="fecha_desde" value="{{ filters.fecha_desde }}" class="w-full px-3 py-2 border border-secondary-300 rounded-md">
      </div>
      <div>
        <label class="block text-sm font-medium text-secondary-700 mb-1">Hasta</label>
        <input type="date" name="fecha_hasta" value="{{ filters.fecha_hasta }}" class="w-full px-3 py-2 border border-secondary-300 rounded-md">
      </div>
      <div>
        <label class="block text-sm font-medium text-secondary-700 mb-1">Modulo</label>
        <select name="modulo" class="w-full px-3 py-2 border border-secondary-300 rounded-md">
          <option value="">Todos</option>
          {% for modulo in modulos %}
            <option value="{{ modulo }}" {{ filters.modulo == modulo ? 'selected' : '' }}>{{ modulo }}</option>
          {% endfor %}
        </select>
      </div>
      <div>
        <label class="block text-sm font-medium text-secondary-700 mb-1">Accion</label>
        <select name="accion" class="w-full px-3 py-2 border border-secondary-300 rounded-md">
          <option value="">Todas</option>
          {% for accion in acciones %}
            <option value="{{ accion }}" {{ filters.accion == accion ? 'selected' : '' }}>{{ accion }}</option>
          {% endfor %}
        </select>
      </div>
      <div>
        <label class="block text-sm font-medium text-secondary-700 mb-1">Resultado</label>
        <select name="resultado" class="w-full px-3 py-2 border border-secondary-300 rounded-md">
          <option value="">Todos</option>
          {% for resultado in resultados %}
            <option value="{{ resultado }}" {{ filters.resultado == resultado ? 'selected' : '' }}>{{ resultado }}</option>
          {% endfor %}
        </select>
      </div>
      <div>
        <label class="block text-sm font-medium text-secondary-700 mb-1">Entidad</label>
        <input type="text" name="entidad" value="{{ filters.entidad }}" class="w-full px-3 py-2 border border-secondary-300 rounded-md" placeholder="Proveedor, Pago...">
      </div>
      <div>
        <label class="block text-sm font-medium text-secondary-700 mb-1">Entidad ID</label>
        <input type="number" name="entidad_id" value="{{ filters.entidad_id }}" class="w-full px-3 py-2 border border-secondary-300 rounded-md">
      </div>
      <div class="md:col-span-2">
        <label class="block text-sm font-medium text-secondary-700 mb-1">Texto</label>
        <input type="search" name="q" value="{{ filters.q }}" class="w-full px-3 py-2 border border-secondary-300 rounded-md" placeholder="usuario, ruta, request_id...">
      </div>
      <div class="flex gap-2">
        <button class="inline-flex items-center px-4 py-2 rounded-md bg-primary-600 text-white font-medium hover:bg-primary-700" type="submit">Filtrar</button>
        <a class="inline-flex items-center px-4 py-2 rounded-md border border-secondary-300 text-secondary-700 hover:bg-secondary-50" href="{{ path('config_auditoria') }}">Limpiar</a>
      </div>
    </form>
  </div>

  <div class="table-card">
    <div class="overflow-x-auto">
      <table class="min-w-full divide-y divide-secondary-200">
        <thead class="bg-secondary-50">
          <tr>
            <th class="px-4 py-3 text-left text-xs font-medium text-secondary-500 uppercase">Fecha</th>
            <th class="px-4 py-3 text-left text-xs font-medium text-secondary-500 uppercase">Usuario</th>
            <th class="px-4 py-3 text-left text-xs font-medium text-secondary-500 uppercase">Modulo</th>
            <th class="px-4 py-3 text-left text-xs font-medium text-secondary-500 uppercase">Accion</th>
            <th class="px-4 py-3 text-left text-xs font-medium text-secondary-500 uppercase">Entidad</th>
            <th class="px-4 py-3 text-left text-xs font-medium text-secondary-500 uppercase">Cliente/Sitio</th>
            <th class="px-4 py-3 text-left text-xs font-medium text-secondary-500 uppercase">Resultado</th>
            <th class="px-4 py-3 text-right text-xs font-medium text-secondary-500 uppercase">Detalle</th>
          </tr>
        </thead>
        <tbody class="bg-white divide-y divide-secondary-200">
          {% for evento in eventos %}
            <tr class="hover:bg-secondary-50">
              <td class="px-4 py-3 whitespace-nowrap text-sm text-secondary-900">{{ evento.occurred_at }}</td>
              <td class="px-4 py-3 whitespace-nowrap text-sm text-secondary-700">{{ evento.usuario_email ?: 'Sistema' }}</td>
              <td class="px-4 py-3 whitespace-nowrap text-sm text-secondary-700">{{ evento.modulo }}</td>
              <td class="px-4 py-3 whitespace-nowrap text-sm font-semibold text-secondary-900">{{ evento.accion }}</td>
              <td class="px-4 py-3 whitespace-nowrap text-sm text-secondary-700">{{ evento.entidad ?: 'N/A' }} #{{ evento.entidad_id ?: 'N/A' }}</td>
              <td class="px-4 py-3 whitespace-nowrap text-sm text-secondary-700">{{ evento.cliente_nombre ?: evento.cliente_id }} / {{ evento.sitio_nombre ?: evento.sitio_id }}</td>
              <td class="px-4 py-3 whitespace-nowrap text-sm text-secondary-700">{{ evento.resultado }}</td>
              <td class="px-4 py-3 whitespace-nowrap text-right text-sm">
                <a class="text-primary-700 hover:underline" href="{{ path('config_auditoria_show', {eventUuid: evento.event_uuid}) }}">Ver</a>
              </td>
            </tr>
          {% else %}
            <tr>
              <td colspan="8" class="px-4 py-8 text-center text-sm text-secondary-500">No hay eventos para este filtro.</td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>

    <div class="server-table-pager">
      <span>{{ pagination.total }} evento(s)</span>
      <div class="server-table-pager-actions">
        {% if pagination.page > 1 %}
          <a class="server-table-pager-link" href="{{ path('config_auditoria', app.request.query.all|merge({page: pagination.page - 1})) }}">Anterior</a>
        {% else %}
          <span class="server-table-pager-disabled">Anterior</span>
        {% endif %}
        <span class="table-pager-page">Pagina {{ pagination.page }} de {{ pagination.pages }}</span>
        {% if pagination.page < pagination.pages %}
          <a class="server-table-pager-link" href="{{ path('config_auditoria', app.request.query.all|merge({page: pagination.page + 1})) }}">Siguiente</a>
        {% else %}
          <span class="server-table-pager-disabled">Siguiente</span>
        {% endif %}
      </div>
    </div>
  </div>
{% endblock %}