{% extends 'base.html.twig' %}
{% block title %}Previsualizacion carga masiva de proveedores{% 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-300">/</span></li>
      <li>
        <a href="{{ path('proveedor_index') }}" class="text-sm font-medium text-secondary-500 hover:text-secondary-700">Proveedores</a>
      </li>
      <li><span class="text-secondary-300">/</span></li>
      <li>
        <a href="{{ path('proveedor_import') }}" class="text-sm font-medium text-secondary-500 hover:text-secondary-700">Carga masiva</a>
      </li>
      <li><span class="text-secondary-300">/</span></li>
      <li class="text-sm font-medium text-secondary-500">Previsualizacion</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 text-secondary-900">Previsualizacion: {{ archivo }}</h2>
      <p class="mt-1 text-sm text-secondary-500">Revisa cuales filas se van a cargar antes de confirmar. Nada se guarda todavia.</p>
    </div>
    <div class="mt-4 md:mt-0">
      <a href="{{ path('proveedor_import') }}" class="inline-flex items-center px-4 py-2 border border-secondary-300 rounded-md text-sm font-medium text-secondary-700 bg-white hover:bg-secondary-50">Subir otro archivo</a>
    </div>
  </div>
{% endblock %}

{% block content %}
  <div class="bg-white shadow rounded-lg p-6 mb-6">
    <div class="flex flex-wrap gap-4 text-sm">
      <span class="inline-flex items-center gap-2"><span class="h-3 w-3 rounded-full border border-secondary-300 bg-white"></span> Proveedores nuevos ({{ resumen.nuevos }})</span>
      <span class="inline-flex items-center gap-2"><span class="h-3 w-3 rounded-full bg-blue-300"></span> Ya existen, se actualizaran ({{ resumen.actualizar }})</span>
      <span class="inline-flex items-center gap-2"><span class="h-3 w-3 rounded-full bg-amber-300"></span> Sin datos minimos ({{ resumen.sin_datos }})</span>
      <span class="inline-flex items-center gap-2 text-secondary-500">Total leidos: {{ resumen.total }}</span>
    </div>
  </div>

  <form method="post" action="{{ path('proveedor_import_confirm') }}">
    <input type="hidden" name="_token" value="{{ csrf_token('proveedor_import_confirmar_' ~ token) }}">
    <input type="hidden" name="token" value="{{ token }}">

    <div class="bg-white shadow rounded-lg overflow-hidden">
      <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-secondary-200 text-sm">
          <thead class="bg-secondary-50">
            <tr>
              <th class="px-3 py-2 text-left">
                <input type="checkbox" id="toggle-all-proveedores" class="rounded border-secondary-300">
              </th>
              <th class="px-3 py-2 text-left font-medium text-secondary-500">NIT</th>
              <th class="px-3 py-2 text-left font-medium text-secondary-500">Razon social</th>
              <th class="px-3 py-2 text-left font-medium text-secondary-500">Accion</th>
              <th class="px-3 py-2 text-left font-medium text-secondary-500">Detalle</th>
            </tr>
          </thead>
          <tbody class="divide-y divide-secondary-100">
            {% for fila in filas %}
              {% set rowClass = {
                'normal': '',
                'azul': 'bg-blue-50',
                'amarillo': 'bg-amber-50',
              }[fila.color]|default('') %}
              <tr class="{{ rowClass }}">
                <td class="px-3 py-2 align-top">
                  {% if fila.seleccionable %}
                    <input type="checkbox" name="incluir[]" value="{{ fila.index }}" class="incluir-checkbox-proveedores rounded border-secondary-300" {{ fila.incluir_por_defecto ? 'checked' : '' }}>
                  {% else %}
                    <input type="checkbox" disabled class="rounded border-secondary-200" title="No se puede incluir: {{ fila.mensaje }}">
                  {% endif %}
                </td>
                <td class="px-3 py-2 align-top font-medium text-secondary-900">{{ fila.nit }}</td>
                <td class="px-3 py-2 align-top text-secondary-700">{{ fila.razon_social }}</td>
                <td class="px-3 py-2 align-top text-secondary-600">{{ fila.accion }}</td>
                <td class="px-3 py-2 align-top text-xs text-secondary-500 max-w-xs">{{ fila.mensaje }}</td>
              </tr>
            {% else %}
              <tr>
                <td colspan="5" class="px-3 py-6 text-center text-secondary-500">El archivo no tiene filas para mostrar.</td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>

    <div class="mt-6 flex justify-end gap-3">
      <a href="{{ path('proveedor_import') }}" class="inline-flex items-center px-4 py-2 border border-secondary-300 rounded-md text-sm font-medium text-secondary-700 bg-white hover:bg-secondary-50">Cancelar</a>
      <button type="submit" class="btn btn-primary" data-loading-text="Cargando...">
        <span data-button-label>Confirmar carga de las filas seleccionadas</span>
      </button>
    </div>
  </form>

  <script>
    document.getElementById('toggle-all-proveedores')?.addEventListener('change', function () {
      document.querySelectorAll('.incluir-checkbox-proveedores').forEach(function (checkbox) {
        checkbox.checked = this.checked;
      }.bind(this));
    });
  </script>
{% endblock %}