{% extends 'base.html.twig' %}
{% block title %}Formatos de pago{% endblock %}

{% block breadcrumb %}
  <nav class="flex" aria-label="Breadcrumb">
    <ol class="flex items-center space-x-4">
      <li>
        <div>
          <a href="{{ path('home') }}" class="text-secondary-400 hover:text-secondary-500">
            <svg class="flex-shrink-0 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" />
            </svg>
            <span class="sr-only">Inicio</span>
          </a>
        </div>
      </li>
      <li>
        <div class="flex items-center">
          <svg class="flex-shrink-0 h-5 w-5 text-secondary-300" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
            <path d="M5.555 17.776l8-16 .894.448-8 16-.894-.448z" />
          </svg>
          <a href="{{ path('config_index') }}" class="ml-4 text-sm font-medium text-secondary-500 hover:text-secondary-700">Configuración</a>
        </div>
      </li>
      <li>
        <div class="flex items-center">
          <svg class="flex-shrink-0 h-5 w-5 text-secondary-300" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
            <path d="M5.555 17.776l8-16 .894.448-8 16-.894-.448z" />
          </svg>
          <span class="ml-4 text-sm font-medium text-secondary-500">Formatos de pago</span>
        </div>
      </li>
    </ol>
  </nav>
{% endblock %}

{% block content_header %}
  <div class="md:flex md:items-center md:justify-between mb-6">
    <div class="flex-1 min-w-0">
      <h2 class="text-2xl font-bold leading-7 text-secondary-900 sm:text-3xl">Formatos de impresión</h2>
      <p class="mt-1 text-sm text-secondary-500">Plantillas variables para cheques y otros pagos. Cada una define qué se imprime, dónde y con qué banco/cuenta se usa.</p>
    </div>
    <div class="mt-4 flex md:mt-0 md:ml-4">
      <a href="{{ path('formato_pago_new') }}" class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
        <svg class="-ml-1 mr-2 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
        </svg>
        Nuevo formato
      </a>
    </div>
  </div>
{% endblock %}

{% block content %}
  {# Filtros: la lista rara vez pasa de unas pocas decenas de formatos por
     cliente, asi que filtrar en el navegador (sin recargar) alcanza y evita
     tocar el controlador para agregar parametros de busqueda por ahora. #}
  <div class="bg-white shadow rounded-lg mb-6">
    <div class="px-6 py-4 border-b border-secondary-200">
      <h3 class="text-lg font-medium text-secondary-900">Filtros</h3>
    </div>
    <div class="px-6 py-4">
      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div class="md:col-span-2">
          <label class="block text-sm font-medium text-secondary-700 mb-2" for="formato-filtro-texto">Buscar</label>
          <input id="formato-filtro-texto" class="w-full px-3 py-2 border border-secondary-300 rounded-md focus:ring-primary-500 focus:border-primary-500" type="search" placeholder="Nombre, banco o cuenta" data-formato-filter="texto">
        </div>
        <div>
          <label class="block text-sm font-medium text-secondary-700 mb-2" for="formato-filtro-estado">Estado</label>
          <select id="formato-filtro-estado" class="w-full px-3 py-2 border border-secondary-300 rounded-md focus:ring-primary-500 focus:border-primary-500" data-formato-filter="estado">
            <option value="">Todos</option>
            <option value="activo">Activos</option>
            <option value="inactivo">Inactivos</option>
          </select>
        </div>
      </div>
    </div>
  </div>

  <section class="table-card">
    {# Sin data-table-pager: el paginador cliente compartido decide que filas
       mostrar por indice/pagina y no sabe de este filtro de texto/estado, asi
       que los dos terminan peleando por el atributo "hidden" de cada fila. La
       lista de formatos por cliente es chica (100 como mucho, ver el
       controlador), asi que mostrarla completa y dejar que el filtro decida
       que se ve es mas simple y no tiene ese conflicto. #}
    <div class="overflow-x-auto">
      <table class="min-w-full divide-y divide-secondary-200" data-formato-table>
        <thead class="bg-secondary-50">
          <tr>
            <th class="px-4 py-3 text-left text-xs font-medium uppercase text-secondary-500">Nombre</th>
            <th class="px-4 py-3 text-left text-xs font-medium uppercase text-secondary-500">Banco/Cuenta</th>
            <th class="px-4 py-3 text-left text-xs font-medium uppercase text-secondary-500">Papel</th>
            <th class="px-4 py-3 text-center text-xs font-medium uppercase text-secondary-500">Estado</th>
            <th class="px-4 py-3 text-right text-xs font-medium uppercase text-secondary-500">Acciones</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-secondary-200 bg-white">
          {% for formato in formatos %}
            <tr
              class="hover:bg-secondary-50 transition-colors"
              data-formato-row
              data-formato-texto="{{ (formato.nombre ~ ' ' ~ (formato.banco ? formato.banco.nombre : '') ~ ' ' ~ (formato.cuentaBancaria ? formato.cuentaBancaria.numero : ''))|lower }}"
              data-formato-estado="{{ formato.activo ? 'activo' : 'inactivo' }}"
            >
              <td class="px-4 py-3 text-sm text-secondary-900">
                {{ formato.nombre }}
                <span class="text-xs text-secondary-500">v{{ formato.version }}</span>
              </td>
              <td class="px-4 py-3 text-sm text-secondary-600">
                {% if formato.banco %}
                  {{ formato.banco.nombre }}{% if formato.cuentaBancaria %} · {{ formato.cuentaBancaria.numero }}{% endif %}
                {% else %}
                  <span class="text-secondary-400">Cualquier banco/cuenta</span>
                {% endif %}
              </td>
              <td class="px-4 py-3 text-sm text-secondary-600">{{ formato.papelAncho }} x {{ formato.papelAlto }} {{ formato.unidad }}</td>
              <td class="px-4 py-3 text-center">
                {% if formato.activo %}
                  <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">Activo</span>
                {% else %}
                  <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-red-100 text-red-800">Inactivo</span>
                {% endif %}
              </td>
              <td class="px-4 py-3 text-right">
                <div class="table-actions">
                  <a href="{{ path('formato_pago_edit', {id: formato.id}) }}" class="inline-flex items-center rounded border border-primary-300 px-3 py-1.5 text-xs font-medium text-primary-700 hover:bg-primary-50">
                    <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                    </svg>
                    Editar
                  </a>
                  <form method="post" action="{{ path('formato_pago_duplicate', {id: formato.id}) }}" class="inline-flex">
                    <input type="hidden" name="_token" value="{{ csrf_token('formato_pago_duplicate_' ~ formato.id) }}">
                    <button class="inline-flex items-center rounded border border-secondary-300 px-3 py-1.5 text-xs font-medium text-secondary-700 hover:bg-secondary-50">
                      <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
                      </svg>
                      Duplicar
                    </button>
                  </form>
                  <form
                    method="post"
                    action="{{ path('formato_pago_toggle', {id: formato.id}) }}"
                    class="inline-flex"
                    {% if formato.activo %}onsubmit="return confirm('¿Desactivar este formato? Dejara de usarse para imprimir cheques con este banco/cuenta.');"{% endif %}
                  >
                    <input type="hidden" name="_token" value="{{ csrf_token('formato_pago_toggle_' ~ formato.id) }}">
                    <button class="inline-flex items-center rounded border {{ formato.activo ? 'border-red-300 text-red-700 hover:bg-red-50' : 'border-secondary-300 text-secondary-700 hover:bg-secondary-50' }} px-3 py-1.5 text-xs font-medium">
                      {% if formato.activo %}
                        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.36 6.64a9 9 0 11-12.73 0M12 3v9" />
                        </svg>
                        Desactivar
                      {% else %}
                        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                        </svg>
                        Activar
                      {% endif %}
                    </button>
                  </form>
                </div>
              </td>
            </tr>
          {% else %}
            <tr>
              <td colspan="5" class="px-6 py-12 text-center">
                <svg class="mx-auto h-12 w-12 text-secondary-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                </svg>
                <p class="mt-2 text-sm text-secondary-600">No hay formatos registrados.</p>
                <a href="{{ path('formato_pago_new') }}" class="mt-3 inline-flex items-center text-sm font-medium text-primary-600 hover:text-primary-700">Crear el primer formato →</a>
              </td>
            </tr>
          {% endfor %}
          <tr data-formato-empty-filtered hidden>
            <td colspan="5" class="px-6 py-12 text-center">
              <p class="text-sm text-secondary-600">Ningún formato coincide con el filtro.</p>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </section>

  <script>
    (() => {
      const table = document.querySelector('[data-formato-table]');
      if (!table) {
        return;
      }

      const textInput = document.querySelector('[data-formato-filter="texto"]');
      const estadoSelect = document.querySelector('[data-formato-filter="estado"]');
      const rows = Array.from(table.querySelectorAll('[data-formato-row]'));
      const emptyRow = table.querySelector('[data-formato-empty-filtered]');
      if (rows.length === 0) {
        return;
      }

      const applyFilter = () => {
        const text = (textInput?.value ?? '').trim().toLowerCase();
        const estado = estadoSelect?.value ?? '';
        let visibleCount = 0;

        rows.forEach((row) => {
          const matchesText = text === '' || (row.dataset.formatoTexto ?? '').includes(text);
          const matchesEstado = estado === '' || row.dataset.formatoEstado === estado;
          const visible = matchesText && matchesEstado;
          row.hidden = !visible;
          if (visible) {
            visibleCount += 1;
          }
        });

        if (emptyRow) {
          emptyRow.hidden = visibleCount > 0;
        }
      };

      textInput?.addEventListener('input', applyFilter);
      estadoSelect?.addEventListener('change', applyFilter);
    })();
  </script>
{% endblock %}