{% extends 'base.html.twig' %}
{% block title %}Previsualizacion importacion SAT{% 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>
        <a href="{{ path('documento_import_sat') }}" class="text-sm font-medium text-secondary-500 hover:text-secondary-700">Importacion SAT</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('documento_import_sat') }}" 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> Se puede cargar ({{ resumen.ok }})</span>
      <span class="inline-flex items-center gap-2"><span class="h-3 w-3 rounded-full bg-amber-300"></span> Sin proveedor / datos incompletos ({{ resumen.sin_datos }})</span>
      <span class="inline-flex items-center gap-2"><span class="h-3 w-3 rounded-full bg-red-400"></span> Ya cargada / conflicto ({{ resumen.existentes + resumen.conflictos }})</span>
      <span class="inline-flex items-center gap-2"><span class="h-3 w-3 rounded-full bg-red-900"></span> Anulada / no vigente ({{ resumen.anulados }})</span>
    </div>
  </div>

  <form method="post" action="{{ path('documento_import_sat_confirm') }}">
    <input type="hidden" name="_token" value="{{ csrf_token('documento_import_sat_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" class="rounded border-secondary-300">
              </th>
              <th class="px-3 py-2 text-left font-medium text-secondary-500">Fecha</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</th>
              <th class="px-3 py-2 text-left font-medium text-secondary-500">Tipo</th>
              <th class="px-3 py-2 text-left font-medium text-secondary-500">Moneda</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': '',
                'amarillo': 'bg-amber-200',
                'rojo': 'bg-red-100',
                'rojo_oscuro': 'bg-red-200',
              }[fila.color] %}
              <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 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 whitespace-nowrap text-secondary-600">{{ fila.fecha }}</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-secondary-600">{{ fila.tipo }}</td>
                <td class="px-3 py-2 align-top text-secondary-600">{{ fila.moneda }}</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="8" 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('documento_import_sat') }}" 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...">
        <i class="bi bi-check2-circle" aria-hidden="true"></i>
        <span data-button-label>Confirmar carga de las filas seleccionadas</span>
      </button>
    </div>
  </form>

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