{% extends 'base.html.twig' %}
{% block title %}Previsualizacion migracion ERP de documentos{% 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('documento_index') }}" class="text-sm font-medium text-secondary-500 hover:text-secondary-700">Documentos</a>
      </li>
      <li><span class="text-secondary-300">/</span></li>
      <li class="text-sm font-medium text-secondary-500">Previsualizacion migracion ERP</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: migracion ERP de documentos</h2>
      <p class="mt-1 text-sm text-secondary-500">
        Se muestra el primer lote de {{ chunk_size }} documentos que se leeria del ERP. Elige cuales incluir.
        Los lotes siguientes (fuera de esta pantalla) migraran automaticamente el resto del historial sin volver a preguntar.
      </p>
    </div>
    <div class="mt-4 md:mt-0">
      <a href="{{ path('documento_index') }}" 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>
    </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> Documentos 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> Proveedor no creado todavia en CxP ({{ resumen.sin_proveedor }})</span>
      <span class="inline-flex items-center gap-2 text-secondary-500">Total leidos en este lote: {{ resumen.total }}</span>
    </div>
  </div>

  <form method="post" action="{{ path('documento_erp_sync_confirm') }}">
    <input type="hidden" name="_token" value="{{ csrf_token('sync_documentos_erp_confirmar') }}">
    <input type="hidden" name="chunk_size" value="{{ chunk_size }}">
    {% if only_with_taxes %}<input type="hidden" name="only_with_taxes" value="1">{% endif %}

    <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-erp-documentos" class="rounded border-secondary-300">
              </th>
              <th class="px-3 py-2 text-left font-medium text-secondary-500">Documento</th>
              <th class="px-3 py-2 text-left font-medium text-secondary-500">Proveedor (codigo ERP)</th>
              <th class="px-3 py-2 text-right font-medium text-secondary-500">Total</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.external_id }}" class="incluir-checkbox-erp-documentos 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.documento }}</td>
                <td class="px-3 py-2 align-top text-secondary-700">{{ fila.proveedor }}</td>
                <td class="px-3 py-2 align-top text-right text-secondary-900">{{ fila.total }}</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">No hay documentos para mostrar.</td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>

    <div class="mt-6 flex justify-end gap-3">
      <a href="{{ path('documento_index') }}" 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="Iniciando...">
        <span data-button-label>Confirmar migracion de los seleccionados</span>
      </button>
    </div>
  </form>

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