{% extends 'base.html.twig' %}
{% block title %}{{ 'documento.title'|trans }} CxP{% endblock %}
{% block page_title %}{{ 'documento.title'|trans }}{% 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" aria-hidden="true">
              <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" aria-hidden="true">
            <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" aria-current="page">Documentos</span>
        </div>
      </li>
    </ol>
  </nav>
{% endblock %}

{% block content_header %}
  <div class="page-header mb-6 min-w-0">
    <div class="min-w-0">
      <h2 class="page-title break-words">{{ 'documento.title'|trans }}</h2>
      <p class="page-subtitle">Gestión de facturas, notas de crédito y débito multimoneda</p>
    </div>
    <div class="page-actions min-w-0">
      {% if has_access('documento', 'migrar_cxp') %}
      <form method="post" action="{{ path('documento_erp_sync') }}" class="inline-flex">
        <input type="hidden" name="_token" value="{{ csrf_token('sync_documentos_erp') }}">
        <input type="hidden" name="limit" value="200">
        <button type="submit" class="btn btn-success" data-loading-text="Iniciando...">
          <svg class="-ml-1 mr-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
          </svg>
          <span data-button-label>Iniciar migracion CxP</span>
        </button>
      </form>
      {% endif %}
      {% if has_access('documento', 'importar_sat') %}
      <a href="{{ path('documento_import_sat') }}" class="btn btn-outline-secondary">
        <i class="bi bi-file-earmark-arrow-up" aria-hidden="true"></i>
        Importar SAT
      </a>
      {% endif %}
      <a href="{{ path('documento_new') }}" class="btn btn-primary">
        <svg class="-ml-1 mr-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
        </svg>
        {{ 'dashboard.register_document'|trans }}
      </a>
    </div>
  </div>
{% endblock %}

{% block content %}
  {% set documentFilterQuery = app.request.query.all|filter((value, key) => key != 'page') %}
  {% set documentFilterChips = [] %}

  {% if filters.selected.proveedor %}
    {% set documentProviderLabel = filters.selected.proveedor %}
    {% for proveedor in filters.proveedores %}
      {% if filters.selected.proveedor == proveedor.id %}
        {% set documentProviderLabel = proveedor.nombre %}
      {% endif %}
    {% endfor %}
    {% set documentFilterChips = documentFilterChips|merge([{
      label: 'filter.supplier'|trans,
      value: documentProviderLabel,
      url: path('documento_index', documentFilterQuery|filter((value, key) => key != 'proveedor_id')|merge({page: 1}))
    }]) %}
  {% endif %}

  {% if filters.selected.tipo %}
    {% set documentTypeLabel = filters.selected.tipo %}
    {% for tipo in filters.tipos %}
      {% if filters.selected.tipo == tipo.id %}
        {% set documentTypeLabel = tipo.codigo ~ ' - ' ~ tipo.nombre %}
      {% endif %}
    {% endfor %}
    {% set documentFilterChips = documentFilterChips|merge([{
      label: 'filter.type'|trans,
      value: documentTypeLabel,
      url: path('documento_index', documentFilterQuery|filter((value, key) => key != 'tipo_documento_id')|merge({page: 1}))
    }]) %}
  {% endif %}

  {% if filters.selected.estado %}
    {% set documentStatusLabel = filters.selected.estado %}
    {% for est in filters.estatus %}
      {% if filters.selected.estado == est.value %}
        {% set documentStatusKey = {'': 'filter.all', '1': 'status.pending', '2': 'status.partial', '3': 'status.paid', '4': 'status.pending_withholding', pendiente: 'documento.saldo_pendiente'}[est.value]|default(null) %}
        {% set documentStatusLabel = documentStatusKey ? documentStatusKey|trans : est.label %}
      {% endif %}
    {% endfor %}
    {% set documentFilterChips = documentFilterChips|merge([{
      label: 'filter.status'|trans,
      value: documentStatusLabel,
      url: path('documento_index', documentFilterQuery|filter((value, key) => key != 'estado')|merge({page: 1}))
    }]) %}
  {% endif %}

  {% if siteScope.modo == 'sitio' %}
    {% set documentSiteLabel = siteScope.selectedSitioId %}
    {% for sitio in filters.sitios %}
      {% if siteScope.selectedSitioId == sitio.id %}
        {% set documentSiteLabel = sitio.nombre %}
      {% endif %}
    {% endfor %}
    {% set documentFilterChips = documentFilterChips|merge([{
      label: 'filter.site'|trans,
      value: documentSiteLabel,
      url: path('documento_index', documentFilterQuery|filter((value, key) => key not in ['sitio_id', 'sitio_scope'])|merge({page: 1}))
    }]) %}
  {% endif %}

  {% if filters.selected.vencimiento_desde %}
    {% set documentFilterChips = documentFilterChips|merge([{
      label: 'filter.from'|trans,
      value: filters.selected.vencimiento_desde,
      url: path('documento_index', documentFilterQuery|filter((value, key) => key != 'vencimiento_desde')|merge({page: 1}))
    }]) %}
  {% endif %}

  {% if filters.selected.vencimiento_hasta %}
    {% set documentFilterChips = documentFilterChips|merge([{
      label: 'filter.to'|trans,
      value: filters.selected.vencimiento_hasta,
      url: path('documento_index', documentFilterQuery|filter((value, key) => key != 'vencimiento_hasta')|merge({page: 1}))
    }]) %}
  {% endif %}

  {% if filters.selected.q %}
    {% set documentFilterChips = documentFilterChips|merge([{
      label: 'filter.search'|trans,
      value: filters.selected.q,
      url: path('documento_index', documentFilterQuery|filter((value, key) => key != 'q')|merge({page: 1}))
    }]) %}
  {% endif %}

  {% if filters.selected.retencion %}
    {% set documentFilterChips = documentFilterChips|merge([{
      label: 'documento.retenciones'|trans,
      value: 'button.yes'|trans,
      url: path('documento_index', documentFilterQuery|filter((value, key) => key != 'retencion')|merge({page: 1}))
    }]) %}
  {% endif %}

  {% set hasActiveFilters = documentFilterChips|length > 0 %}
  {% set documentClearQuery = documentFilterQuery
    |filter((value, key) => key not in ['proveedor_id', 'tipo_documento_id', 'estado', 'sitio_id', 'sitio_scope', 'vencimiento_desde', 'vencimiento_hasta', 'q', 'retencion'])
    |merge({page: 1}) %}
  {% if erpSyncJob %}
    {% set payload = erpSyncJob.payload ?? {} %}
    <section
      class="mb-6 rounded-lg border border-emerald-200 bg-emerald-50 p-4 shadow-sm"
      data-erp-sync-progress
      data-url="{{ path('documento_erp_sync_progress', {id: erpSyncJob.id}) }}"
    >
      <div class="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
        <div>
          <div class="text-sm font-semibold text-emerald-900">Migracion ERP CxP #{{ erpSyncJob.id }}</div>
          <div class="mt-1 text-xs text-emerald-700" data-erp-sync-label role="status" aria-live="polite">
            Estado: {{ erpSyncJob.estado }} · {{ erpSyncJob.progreso }}%
            {% if payload.processed is defined and payload.total is defined and payload.total %}
              · {{ payload.processed }} de {{ payload.total }} documentos revisados
            {% endif %}
          </div>
        </div>
        {% if is_granted('ROLE_ADMIN') %}
          <a href="{{ path('async_job_index') }}" class="text-sm font-medium text-emerald-800 hover:underline">Ver jobs</a>
        {% endif %}
      </div>
      <div class="mt-4 h-3 overflow-hidden rounded-full bg-white" data-erp-sync-meter role="progressbar" aria-label="Progreso de migración ERP" aria-valuemin="0" aria-valuemax="100" aria-valuenow="{{ erpSyncJob.progreso }}">
        <div class="h-full rounded-full bg-emerald-600 transition-all duration-500" data-erp-sync-bar style="width: {{ erpSyncJob.progreso }}%"></div>
      </div>
    </section>
    <script>
      (() => {
        const root = document.querySelector('[data-erp-sync-progress]');
        if (!root) return;
        const bar = root.querySelector('[data-erp-sync-bar]');
        const label = root.querySelector('[data-erp-sync-label]');
        const meter = root.querySelector('[data-erp-sync-meter]');
        const url = root.dataset.url;

        const refresh = async () => {
          try {
            const response = await fetch(url, { headers: { 'Accept': 'application/json' } });
            if (!response.ok) return;
            const data = await response.json();
            const progress = Math.max(0, Math.min(100, Number(data.progreso || 0)));
            const payload = data.payload || {};
            bar.style.width = `${progress}%`;
            meter?.setAttribute('aria-valuenow', String(progress));
            const total = Number(payload.total || 0);
            const processed = Number(payload.processed || 0);
            const detail = total > 0 ? ` · ${processed} de ${total} documentos revisados` : '';
            label.textContent = `Estado: ${data.estado} · ${progress}%${detail}`;
            if (!['completado', 'error'].includes(data.estado)) {
              window.setTimeout(refresh, 3000);
            }
          } catch (error) {
            window.setTimeout(refresh, 6000);
          }
        };

        window.setTimeout(refresh, 1500);
      })();
    </script>
  {% endif %}

  {# Filters #}
  <div class="section-card mb-6 min-w-0" x-data="{ filtersOpen: false }">
    <div class="section-card-header flex items-center justify-between gap-3">
      <div class="flex min-w-0 items-center gap-2">
        <h3 class="section-card-title">{{ 'filter.title'|trans }}</h3>
      </div>
      <button type="button" class="btn btn-outline-secondary btn-sm md:hidden" @click="filtersOpen = !filtersOpen" :aria-expanded="filtersOpen.toString()" aria-controls="document-filters">
        <span x-show="!filtersOpen">{{ 'common.details'|trans }}</span><span x-show="filtersOpen" x-cloak>{{ 'common.hide_details'|trans }}</span>
        <svg class="h-4 w-4 transition-transform motion-reduce:transition-none" :class="filtersOpen ? 'rotate-180' : ''" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6 9 6 6 6-6" /></svg>
      </button>
    </div>
    {% include 'components/_filter_chips.html.twig' with {
      chips: documentFilterChips,
      clear_url: path('documento_index', documentClearQuery)
    } only %}
    <div id="document-filters" class="hidden px-4 py-4 md:!block md:px-6" :class="filtersOpen ? '!block' : 'hidden'">
      <form class="document-filter-grid" method="get">
        <input type="hidden" name="limit" value="{{ pagination.limit }}">
        {% if filters.selected.retencion %}
          <input type="hidden" name="retencion" value="1">
        {% endif %}
        <div>
          <label for="proveedor_id" class="form-label">{{ 'filter.supplier'|trans }}</label>
          <select id="proveedor_id" name="proveedor_id" class="form-select">
            <option value="">{{ 'filter.all'|trans }}</option>
            {% for proveedor in filters.proveedores %}
              <option value="{{ proveedor.id }}" {{ filters.selected.proveedor == proveedor.id ? 'selected' : '' }}>{{ proveedor.nombre }}</option>
            {% endfor %}
          </select>
        </div>

        <div>
          <label for="tipo_documento_id" class="form-label">{{ 'filter.type'|trans }}</label>
          <select id="tipo_documento_id" name="tipo_documento_id" class="form-select">
            <option value="">{{ 'filter.all'|trans }}</option>
            {% for tipo in filters.tipos %}
              <option value="{{ tipo.id }}" {{ filters.selected.tipo == tipo.id ? 'selected' : '' }}>{{ tipo.codigo }} - {{ tipo.nombre }}</option>
            {% endfor %}
          </select>
        </div>

        <div>
          <label for="estado" class="form-label">{{ 'filter.status'|trans }}</label>
          <select id="estado" name="estado" class="form-select">
            {% for est in filters.estatus %}
              {% set statusFilterKey = {'': 'filter.all', '1': 'status.pending', '2': 'status.partial', '3': 'status.paid', '4': 'status.pending_withholding', pendiente: 'documento.saldo_pendiente'}[est.value]|default(null) %}
              <option value="{{ est.value }}" {{ filters.selected.estado == est.value ? 'selected' : '' }}>{{ statusFilterKey ? statusFilterKey|trans : est.label }}</option>
            {% endfor %}
          </select>
        </div>

        <div>
          <label for="sitio_id" class="form-label">{{ 'filter.site'|trans }}</label>
          <select id="sitio_id" name="sitio_id" class="form-select" onchange="document.getElementById('sitio_scope').value = this.value ? 'sitio' : 'todos'">
            <option value="">{{ 'filter.all_authorized'|trans }}</option>
            {% for sitio in filters.sitios %}
              <option value="{{ sitio.id }}" {{ siteScope.selectedSitioId == sitio.id ? 'selected' : '' }}>{{ sitio.nombre }}</option>
            {% endfor %}
          </select>
          <input type="hidden" id="sitio_scope" name="sitio_scope" value="{{ siteScope.modo }}">
        </div>

        <div>
          <label for="vencimiento_desde" class="form-label">{{ 'filter.from'|trans }}</label>
          <input type="date" name="vencimiento_desde" id="vencimiento_desde" value="{{ filters.selected.vencimiento_desde }}" class="form-control">
        </div>

        <div>
          <label for="vencimiento_hasta" class="form-label">{{ 'filter.to'|trans }}</label>
          <input type="date" name="vencimiento_hasta" id="vencimiento_hasta" value="{{ filters.selected.vencimiento_hasta }}" class="form-control">
        </div>

        <div>
          <label for="q" class="form-label">{{ 'filter.search'|trans }}</label>
          <input type="search" name="q" id="q" value="{{ filters.selected.q }}" class="form-control" placeholder="Serie, número...">
        </div>

        <div class="document-filter-actions">
          <button type="submit" class="btn btn-primary w-full">
            <svg class="-ml-1 mr-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
            </svg>
            {{ 'button.filter'|trans }}
          </button>
        </div>
      </form>
      {% if filters.selected.retencion %}
        <div class="mt-4 rounded-md border border-emerald-200 bg-emerald-50 px-4 py-2 text-sm text-emerald-800">Mostrando solo facturas con retencion aplicada.</div>
      {% endif %}
    </div>
  </div>

  {# KPI Cards #}
  <div class="flex min-w-0 flex-col gap-2 mb-2 sm:flex-row sm:items-center sm:justify-between">
    <p class="text-sm text-secondary-500">
      {{ filters.selected.proveedor or filters.selected.tipo or filters.selected.estado or filters.selected.q or filters.selected.retencion or siteScope.modo == 'sitio' ? 'Resumen segun filtros aplicados' : 'Resumen de todos los sitios autorizados' }}
    </p>
    <span class="text-xs px-3 py-1 rounded-full bg-primary-50 text-primary-700 border border-primary-100">Datos actualizados</span>
  </div>
  <div class="grid min-w-0 grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4 mb-6">
    <div class="bg-gradient-to-br from-primary-50 to-white border border-primary-100 overflow-hidden shadow rounded-lg">
      <div class="p-5">
        <div class="flex items-center">
          <div class="flex-shrink-0">
            <svg class="h-6 w-6 text-secondary-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <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>
          </div>
          <div class="ml-5 w-0 flex-1">
            <dl>
              <dt class="text-sm font-medium text-secondary-500 truncate">Saldo Abierto</dt>
              <dd>
                <div class="text-lg font-medium text-secondary-900">{{ resumen.abiertos }}</div>
              </dd>
            </dl>
          </div>
        </div>
      </div>
    </div>

    <div class="bg-gradient-to-br from-amber-50 to-white border border-amber-100 overflow-hidden shadow rounded-lg">
      <div class="p-5">
        <div class="flex items-center">
          <div class="flex-shrink-0">
            <svg class="h-6 w-6 text-yellow-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
          </div>
          <div class="ml-5 w-0 flex-1">
            <dl>
              <dt class="text-sm font-medium text-secondary-500 truncate">Por Vencer (15 dias)</dt>
              <dd>
                <div class="text-lg font-medium text-secondary-900">{{ resumen.por_vencer }}</div>
              </dd>
            </dl>
          </div>
        </div>
      </div>
    </div>

    <div class="bg-gradient-to-br from-green-50 to-white border border-green-100 overflow-hidden shadow rounded-lg">
      <div class="p-5">
        <div class="flex items-center">
          <div class="flex-shrink-0">
            <svg class="h-6 w-6 text-green-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
          </div>
          <div class="ml-5 w-0 flex-1">
            <dl>
              <dt class="text-sm font-medium text-secondary-500 truncate">Pagados del Mes</dt>
              <dd>
                <div class="text-lg font-medium text-secondary-900">{{ resumen.pagados_mes }}</div>
              </dd>
            </dl>
          </div>
        </div>
      </div>
    </div>

    <div class="bg-gradient-to-br from-red-50 to-white border border-red-100 overflow-hidden shadow rounded-lg">
      <div class="p-5">
        <div class="flex items-center">
          <div class="flex-shrink-0">
            <svg class="h-6 w-6 text-red-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
            </svg>
          </div>
          <div class="ml-5 w-0 flex-1">
            <dl>
              <dt class="text-sm font-medium text-secondary-500 truncate">Retenciones Pendientes</dt>
              <dd>
                <div class="text-lg font-medium text-secondary-900">{{ resumen.retenciones }}</div>
              </dd>
            </dl>
          </div>
        </div>
      </div>
    </div>
  </div>

  {# Table #}
  <div class="flex min-w-0 flex-col">
    <div class="min-w-0">
      <div class="py-2 align-middle min-w-0">
        <div class="table-card">
          <div class="table-card-header">
            <div class="table-card-title">
              <h3>Listado de documentos</h3>
              <p>Mostrando {{ pagination.start }} a {{ pagination.end }} de {{ pagination.total }} registros</p>
            </div>
            <form method="get" class="table-card-controls">
              {% for key, value in app.request.query.all %}
                {% if key not in ['limit', 'page'] and value is not iterable %}
                  <input type="hidden" name="{{ key }}" value="{{ value }}">
                {% endif %}
              {% endfor %}
              <input type="hidden" name="page" value="1">
              <label for="documento-limit" class="table-pager-label">{{ 'table.rows_per_page'|trans }}</label>
              <select id="documento-limit" name="limit" class="table-pager-select" onchange="this.form.submit()">
                {% for option in pagination.limitOptions %}
                  <option value="{{ option }}" {% if pagination.limit == option %}selected{% endif %}>{{ option }}</option>
                {% endfor %}
              </select>
              <span class="table-pager-suffix">por pagina</span>
            </form>
          </div>
          <div class="table-responsive max-h-[72vh] overflow-auto">
            <table class="table table-to-card md:min-w-[760px] xl:min-w-[1040px]">
            <caption class="sr-only">Listado de documentos</caption>
            <thead>
              <tr>
                <th scope="col" class="hidden lg:table-cell">{{ 'documento.numero'|trans }}</th>
                <th scope="col">{{ 'documento.proveedor'|trans }}</th>
                <th scope="col">{{ 'documento.serie'|trans }} / {{ 'documento.numero'|trans }}</th>
                <th scope="col" class="hidden lg:table-cell">{{ 'documento.fecha_emision'|trans }}</th>
                <th scope="col">{{ 'documento.fecha_vencimiento'|trans }}</th>
                <th scope="col" class="text-right">{{ 'documento.total_neto'|trans }}</th>
                <th scope="col" class="text-right">{{ 'documento.saldo_pendiente'|trans }}</th>
                <th scope="col" class="hidden text-center xl:table-cell">IVA</th>
                <th scope="col" class="hidden text-center xl:table-cell">{{ 'documento.retencion_total'|trans }}</th>
                <th scope="col" class="text-center">{{ 'table_columns.status'|trans }}</th>
                <th scope="col" class="relative">
                  <span class="sr-only">{{ 'table.actions'|trans }}</span>
                </th>
              </tr>
            </thead>
            <tbody>
              {% for doc in documents %}
                <tr>
                  <td data-label="{{ 'documento.numero'|trans }}" class="hidden whitespace-nowrap text-xs font-medium text-secondary-900 lg:table-cell">
                    {{ doc.numero }}
                  </td>
                  <td data-label="{{ 'documento.proveedor'|trans }}" class="min-w-0 max-w-xs text-xs text-secondary-500">
                    <span class="line-clamp-2 break-words" title="{{ doc.proveedor }}">{{ doc.proveedor }}</span>
                  </td>
                  <td data-label="{{ 'documento.serie'|trans }} / {{ 'documento.numero'|trans }}" class="text-xs text-secondary-500">
                    <span class="font-medium text-secondary-900">{{ doc.serie_numero }}</span>
                    {% if doc.tiene_relacionado %}
                      <span class="ml-1 inline-flex items-center rounded-full bg-slate-100 px-2 py-0.5 text-[10px] font-medium text-slate-700">Relacionado</span>
                    {% endif %}
                  </td>
                  <td data-label="{{ 'documento.fecha_emision'|trans }}" class="hidden whitespace-nowrap text-xs text-secondary-500 lg:table-cell">
                    {{ doc.fecha }}
                  </td>
                  <td data-label="{{ 'documento.fecha_vencimiento'|trans }}" class="whitespace-nowrap text-xs text-secondary-500">
                    {{ doc.vencimiento }}
                  </td>
                  <td data-label="{{ 'documento.total_neto'|trans }}" class="whitespace-nowrap text-right text-xs font-medium text-secondary-900">
                    <div>{{ doc.total }}</div>
                    {% if doc.total_base and doc.total_base != doc.total %}
                      <div class="text-[11px] text-primary-700">Base: {{ doc.total_base }}</div>
                    {% endif %}
                  </td>
                  <td data-label="{{ 'documento.saldo_pendiente'|trans }}" class="whitespace-nowrap text-right text-xs font-medium text-secondary-900">
                    <div>{{ doc.saldo }}</div>
                    {% if doc.saldo_base and doc.saldo_base != doc.saldo %}
                      <div class="text-[11px] text-primary-700">Base: {{ doc.saldo_base }}</div>
                    {% endif %}
                  </td>
                  <td data-label="IVA" class="hidden whitespace-nowrap text-center text-xs text-secondary-500 xl:table-cell">
                    {{ doc.iva }}
                  </td>
                  <td data-label="{{ 'documento.retencion_total'|trans }}" class="hidden whitespace-nowrap text-center text-xs text-secondary-500 xl:table-cell">
                    {{ doc.retencion }}
                  </td>
                  <td data-label="{{ 'table_columns.status'|trans }}" class="whitespace-nowrap text-center">
                    {% if doc.estado == 'Pagado' %}
                      <span class="badge badge-success">
                        {{ 'status.paid'|trans }}
                      </span>
                    {% elseif doc.estado == 'Pendiente retencion' %}
                      <span class="badge badge-warning">
                        {{ 'status.pending_withholding'|trans }}
                      </span>
                    {% elseif doc.estado == 'Pendiente' %}
                      <span class="badge badge-info">
                        {{ 'status.pending'|trans }}
                      </span>
                    {% else %}
                      <span class="badge badge-warning">
                        {{ doc.estado }}
                      </span>
                    {% endif %}
                  </td>
                  <td data-label="{{ 'table.actions'|trans }}" class="table-cell-nowrap text-right text-xs font-medium">
                    <div class="table-actions">
                      {% if is_granted('ROLE_OPERADOR') and doc.saldo_val > 0 %}
                        <a href="{{ path('pago_new', {proveedor_id: doc.proveedor_id, documento_id: doc.id}) }}" class="btn btn-success btn-sm">{{ 'dashboard.register_payment'|trans }}</a>
                      {% endif %}
                      <a href="{{ path('documento_show', {id: doc.id}) }}" class="btn btn-outline-primary btn-sm">{{ 'button.view'|trans }}</a>
                    </div>
                  </td>
                </tr>
              {% else %}
                <tr data-table-empty>
                  <td colspan="11" class="table-card-state max-sm:!block" data-label="">
                    <div class="empty-state">
                      {% if hasActiveFilters %}
                        <p class="empty-state-title">{{ 'empty.no_results_title'|trans }}</p>
                        <p class="empty-state-copy">{{ 'empty.no_results_copy'|trans }}</p>
                      {% else %}
                        <p class="empty-state-title">{{ 'empty.no_data_title'|trans }}</p>
                        <p class="empty-state-copy">{{ 'empty.no_data_copy'|trans }}</p>
                      {% endif %}
                    </div>
                  </td>
                </tr>
              {% endfor %}
            </tbody>
            </table>
          </div>
          {% if pagination.pages > 1 %}
            {% set queryBase = app.request.query.all|merge({'limit': pagination.limit}) %}
            <div class="server-table-pager">
              <div>{{ 'table.page_of'|trans({'%page%': pagination.page, '%pages%': pagination.pages}) }}</div>
              <div class="server-table-pager-actions">
                {% if pagination.page > 1 %}
                  <a class="server-table-pager-link" href="{{ path('documento_index', queryBase|merge({'page': pagination.page - 1})) }}">{{ 'table.previous'|trans }}</a>
                {% else %}
                  <span class="server-table-pager-disabled">{{ 'table.previous'|trans }}</span>
                {% endif %}
                {% if pagination.page < pagination.pages %}
                  <a class="server-table-pager-link" href="{{ path('documento_index', queryBase|merge({'page': pagination.page + 1})) }}">{{ 'table.next'|trans }}</a>
                {% else %}
                  <span class="server-table-pager-disabled">{{ 'table.next'|trans }}</span>
                {% endif %}
              </div>
            </div>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
{% endblock %}