{% extends 'base.html.twig' %}
{% block title %}Detalle del Documento{% endblock %}
{% block page_title %}Documento {{ documento.serie ? documento.serie ~ '-' : '' }}{{ documento.numero }}{% 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('documento_index') }}" class="ml-4 text-sm font-medium text-secondary-500 hover:text-secondary-700">Documentos</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">Detalle</span>
        </div>
      </li>
    </ol>
  </nav>
{% endblock %}

{% block content_header %}
  <div class="page-header">
    <div class="min-w-0">
      <h2 class="page-title">Documento {{ documento.serie ? documento.serie ~ '-' : '' }}{{ documento.numero }}</h2>
      <p class="page-subtitle">
        {{ documento.proveedor.razonSocial }} &middot; {{ documento.tipoDocumento.codigo }} &middot; {{ documento.moneda.codigo }} {{ documento.saldoPendiente|number_format(2, '.', ',') }}
      </p>
    </div>
    <div class="page-actions">
      <a href="{{ path('documento_index') }}" class="btn btn-outline-secondary">
        <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="M15 19l-7-7 7-7" />
        </svg>
        Volver
      </a>
      <a href="{{ path('documento_print', {id: documento.id}) }}" class="btn btn-primary">
        <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="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z" />
        </svg>
        Imprimir
      </a>
      {% if has_access('documento', 'eliminar') and documento.documentoPadre is null %}
      <form method="post" action="{{ path('documento_delete', {id: documento.id}) }}" onsubmit="return confirm('Vas a eliminar permanentemente este documento, sus lineas, retenciones vinculadas y aplicaciones de pago. ¿Continuar?');">
        <input type="hidden" name="_token" value="{{ csrf_token('delete_documento_' ~ documento.id) }}">
        <button type="submit" class="btn btn-outline-danger">
          <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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
          </svg>
          Eliminar
        </button>
      </form>
      {% endif %}
    </div>

  </div>
{% endblock %}

{% block content %}
  <div class="document-status-strip">
    <span class="status-pill status-pill-success">
      <svg class="h-4 w-4 text-green-500" fill="currentColor" viewBox="0 0 20 20">
        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
      </svg>
      Documento {{ documento.estadoLabel }}
    </span>
    <div class="document-status-meta">
      <span>{{ documento.proveedor.nit }}</span>
      <span>{{ documento.fechaEmision|date('d/m/Y') }}</span>
      <span>Saldo {{ documento.moneda.codigo }} {{ documento.saldoPendiente|number_format(2, '.', ',') }}</span>
    </div>
  </div>

  <section class="section-card document-operations">
    <div class="section-card-header">
      <div>
        <h3 class="section-card-title">Operaciones del documento</h3>
        <p class="section-card-subtitle">Observaciones, desbloqueo operativo y referencias externas.</p>
      </div>
    </div>
    <div class="section-card-body">
      <div class="operations-grid">
        <article class="operation-panel">
          <div class="operation-panel-header">
            <div>
              <h4 class="operation-panel-title">Observaciones</h4>
              <p class="operation-panel-copy">Guardado independiente sin recalcular la factura.</p>
            </div>
          </div>
          <form id="observaciones-form" method="post" action="{{ path('documento_observaciones_save', {id: documento.id}) }}" class="mt-4 space-y-3">
            <input type="hidden" name="_token" value="{{ csrf_token('documento_observaciones_' ~ documento.id) }}">
            <label for="documento_observaciones" class="form-label">Observacion actual</label>
            <textarea id="documento_observaciones" name="observaciones" rows="8" class="form-control" style="min-height: 10rem; resize: vertical;">{{ documento.observaciones ?? '' }}</textarea>
            <div class="action-row">
              <button type="submit" class="btn btn-primary">Guardar observacion</button>
              <span id="observaciones-status" class="table-cell-muted text-sm"></span>
            </div>
          </form>
          <div class="history-list">
            <h5 class="history-title">Historial</h5>
            {% for item in observacionHistorial %}
              <div class="history-item">
                <div class="history-meta">
                  <span>{{ item.accion|capitalize }}{% if item.usuario %} por {{ item.usuario.nombre }}{% endif %}</span>
                  <span>{{ item.createdAt|date('d/m/Y H:i') }}</span>
                </div>
                {% if item.observacion %}
                  <div class="history-text">{{ item.observacion }}</div>
                {% else %}
                  <div class="history-empty">Observacion eliminada</div>
                {% endif %}
              </div>
            {% else %}
              <p class="empty-state-inline">Sin historial de observaciones.</p>
            {% endfor %}
          </div>
        </article>
        <article class="operation-panel">
      <div class="operation-panel-header">
        <div>
          <h4 class="operation-panel-title">Desbloqueo operativo</h4>
          <p class="operation-panel-copy">{{ desbloqueoEstado.message }}</p>
          {% if documento.desbloqueadoHasta %}
            <p class="operation-panel-note">
              Ultimo desbloqueo: {{ documento.desbloqueadoAt ? documento.desbloqueadoAt|date('d/m/Y H:i') : '-' }}
              {% if documento.desbloqueadoBy %} por {{ documento.desbloqueadoBy.nombre }}{% endif %}
              &middot; valido hasta {{ documento.desbloqueadoHasta|date('d/m/Y H:i') }}
            </p>
          {% endif %}
        </div>
        {% if desbloqueoEstado.active %}
          <span class="status-pill status-pill-success">Activo</span>
        {% elseif desbloqueoEstado.can_unlock %}
          <span class="status-pill status-pill-warning">Bloqueado</span>
        {% else %}
          <span class="status-pill status-pill-muted">No aplica</span>
        {% endif %}
      </div>
      {% if desbloqueoEstado.can_unlock %}
        <form method="post" action="{{ path('documento_desbloquear', {id: documento.id}) }}" class="mt-4 space-y-3">
          <input type="hidden" name="_token" value="{{ csrf_token('documento_desbloquear_' ~ documento.id) }}">
          <label class="form-label">Motivo obligatorio</label>
          <textarea name="motivo" rows="2" required class="form-control"></textarea>
          {% if not is_granted('ROLE_DESBLOQUEAR_FACTURA') %}
            <label class="form-label">Clave de usuario</label>
            <input type="password" name="clave" required class="form-control">
          {% endif %}
          <button class="btn btn-outline-secondary">Desbloquear</button>
        </form>
      {% endif %}
      <div class="history-list">
        <h5 class="history-title">Historial de desbloqueos</h5>
        {% for item in desbloqueoHistorial %}
          <div class="history-item history-item-compact">
            <div class="history-meta">
              <span>{{ item.usuario ? item.usuario.nombre : 'Usuario eliminado' }} &middot; {{ item.claveRequerida ? 'con clave' : 'por rol' }}</span>
              <span>{{ item.createdAt|date('d/m/Y H:i') }}</span>
            </div>
            <div class="history-text">{{ item.motivo }}</div>
          </div>
        {% else %}
          <p class="empty-state-inline">Sin desbloqueos registrados.</p>
        {% endfor %}
      </div>
        </article>

        <article class="operation-panel">
      <div class="operation-panel-header">
        <div>
          <h4 class="operation-panel-title">Documento relacionado</h4>
          <p class="operation-panel-copy">Referencia rapida a entradas, cambios u otros documentos externos.</p>
        </div>
      </div>
      <form method="post" action="{{ path('documento_relacionado_save', {id: documento.id}) }}" class="mt-4 flex flex-col gap-3 md:flex-row md:flex-wrap">
        <input type="hidden" name="_token" value="{{ csrf_token('documento_relacionado_' ~ documento.id) }}">
        <input name="documento_relacionado_numero" value="{{ documento.documentoRelacionadoNumero ?? '' }}" placeholder="Numero relacionado" class="form-control min-w-0 md:flex-1">
        <button class="btn btn-primary md:w-auto">Guardar</button>
      </form>
      <div class="mt-4">
        {% if documentoRelacionadoPreview %}
          <button type="button" id="related-load-button" data-url="{{ path('documento_relacionado_show', {id: documento.id}) }}" class="btn btn-outline-primary">Ver relacionado</button>
        {% elseif documento.documentoRelacionadoNumero or documento.referencia %}
          <button type="button" id="related-load-button" data-url="{{ path('documento_relacionado_show', {id: documento.id}) }}" class="btn btn-outline-secondary">Buscar relacionado</button>
        {% else %}
          <p class="empty-state-inline">Sin numero relacionado registrado.</p>
        {% endif %}
      </div>
      <div id="related-result" class="related-result hidden"></div>
        </article>
      </div>
    </div>
  </section>
  <script>
    document.getElementById('observaciones-form')?.addEventListener('submit', async function (event) {
      event.preventDefault();
      const form = event.currentTarget;
      const status = document.getElementById('observaciones-status');
      if (status) {
        status.textContent = 'Guardando...';
        status.className = 'table-cell-muted text-sm';
      }

      try {
        const response = await fetch(form.action, {
          method: 'POST',
          body: new FormData(form),
          headers: {'X-Requested-With': 'XMLHttpRequest'}
        });
        const payload = await response.json();
        if (!response.ok || !payload.ok) {
          throw new Error(payload.message || 'No se pudo guardar.');
        }
        if (status) {
          status.textContent = payload.message || 'Guardado.';
          status.className = 'text-sm text-green-700';
        }
      } catch (error) {
        if (status) {
          status.textContent = error.message || 'No se pudo guardar.';
          status.className = 'text-sm text-red-700';
        }
      }
    });

    document.getElementById('related-load-button')?.addEventListener('click', async function () {
      const box = document.getElementById('related-result');
      const esc = (value) => String(value ?? '').replace(/[&<>"']/g, (char) => ({'&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#039;'}[char]));
      box.classList.remove('hidden');
      box.textContent = 'Consultando...';
      try {
        const response = await fetch(this.dataset.url, {headers: {'X-Requested-With': 'XMLHttpRequest'}});
        const payload = await response.json();
        if (!response.ok || !payload.ok) {
          throw new Error(payload.message || 'No se encontro documento relacionado.');
        }
        const doc = payload.documento;
        const copyValue = esc(doc.numero).replace(/&#039;/g, "\\'");
        box.innerHTML = `
          <div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
            <div><strong>Numero:</strong> ${esc(doc.numero)}</div>
            <div><strong>Fecha:</strong> ${esc(doc.fecha)}</div>
            <div><strong>Proveedor:</strong> ${esc(doc.proveedor)}</div>
            <div><strong>Tipo:</strong> ${esc(doc.tipo)}</div>
            <div><strong>Total anotado:</strong> ${esc(doc.total_anotado)}</div>
            <div><strong>Total real:</strong> ${esc(doc.total_real)}</div>
            <div><strong>Diferencia:</strong> ${esc(doc.diferencia)}</div>
            <div><strong>Estado:</strong> ${esc(doc.estado)}</div>
            <div><strong>Sitio:</strong> ${esc(doc.sitio)}</div>
          </div>
          <div class="mt-3 flex gap-2">
            <a class="rounded border border-primary-300 px-3 py-1.5 text-xs font-medium text-primary-700 hover:bg-primary-50" href="${esc(doc.url)}">Abrir</a>
            <button type="button" class="rounded border border-secondary-300 px-3 py-1.5 text-xs font-medium text-secondary-700 hover:bg-secondary-50" onclick="navigator.clipboard?.writeText('${copyValue}')">Copiar numero</button>
          </div>`;
      } catch (error) {
        box.textContent = error.message || 'No se pudo consultar.';
      }
    });
  </script>

  <div class="space-y-6">
    {# Información General #}
    <div class="section-card">
      <div class="section-card-header">
        <h3 class="text-lg leading-6 font-medium text-secondary-900">
          Información General
        </h3>
        <p class="mt-1 max-w-2xl text-sm text-secondary-500">
          Datos principales del documento
        </p>
      </div>
      <div class="border-t border-secondary-200">
        <dl>
          <div class="bg-secondary-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
            <dt class="text-sm font-medium text-secondary-500">Proveedor</dt>
            <dd class="mt-1 text-sm text-secondary-900 sm:mt-0 sm:col-span-2 font-semibold">
              {{ documento.proveedor.razonSocial }}
            </dd>
          </div>
          <div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
            <dt class="text-sm font-medium text-secondary-500">NIT</dt>
            <dd class="mt-1 text-sm text-secondary-900 sm:mt-0 sm:col-span-2">
              {{ documento.proveedor.nit }}
            </dd>
          </div>
          <div class="bg-secondary-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
            <dt class="text-sm font-medium text-secondary-500">Tipo de Documento</dt>
            <dd class="mt-1 text-sm text-secondary-900 sm:mt-0 sm:col-span-2">
              <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                {{ documento.tipoDocumento.codigo }}
              </span>
              {{ documento.tipoDocumento.nombre }}
            </dd>
          </div>
          <div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
            <dt class="text-sm font-medium text-secondary-500">Serie y Número</dt>
            <dd class="mt-1 text-sm text-secondary-900 sm:mt-0 sm:col-span-2 font-mono">
              {{ documento.serie ? documento.serie ~ '-' : '' }}{{ documento.numero }}
            </dd>
          </div>
          <div class="bg-secondary-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
            <dt class="text-sm font-medium text-secondary-500">Fechas</dt>
            <dd class="mt-1 text-sm text-secondary-900 sm:mt-0 sm:col-span-2">
              <div class="grid grid-cols-1 gap-3 sm:grid-cols-3 sm:gap-4">
                <div>
                  <p class="text-xs text-secondary-500">Emisión</p>
                  <p class="font-medium">{{ documento.fechaEmision|date('d/m/Y') }}</p>
                </div>
                <div>
                  <p class="text-xs text-secondary-500">Recepción</p>
                  <p class="font-medium">{{ documento.fechaRecepcion|date('d/m/Y') }}</p>
                </div>
                <div>
                  <p class="text-xs text-secondary-500">Vencimiento</p>
                  <p class="font-medium">{{ documento.fechaVencimiento|date('d/m/Y') }}</p>
                </div>
              </div>
            </dd>
          </div>
          <div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
            <dt class="text-sm font-medium text-secondary-500">Moneda</dt>
            <dd class="mt-1 text-sm text-secondary-900 sm:mt-0 sm:col-span-2">
              {{ documento.moneda.codigo }} - {{ documento.moneda.nombre }}
            </dd>
          </div>
        </dl>
      </div>
    </div>

    {# Detalle de Líneas #}
    <div class="section-card">
      <div class="section-card-header">
        <h3 class="text-lg leading-6 font-medium text-secondary-900">
          Detalle de Líneas
        </h3>
        <p class="mt-1 max-w-2xl text-sm text-secondary-500">
          {{ lineas|length }} línea(s) de detalle
        </p>
        <a href="{{ path('documento_lineas_edit', {id: documento.id}) }}" class="mt-3 inline-flex items-center px-4 py-2 rounded-md bg-primary-600 text-white text-sm font-medium hover:bg-primary-700">
          Editar lineas
        </a>
      </div>
      {% if lineas|length > 0 %}
      <div class="table-responsive" data-scroll-affordance>
        <table class="table table-to-card">
          <thead class="bg-secondary-50">
            <tr>
              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-secondary-500 uppercase tracking-wider">#</th>
              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-secondary-500 uppercase tracking-wider">Descripción</th>
              <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-secondary-500 uppercase tracking-wider">Cantidad</th>
              <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-secondary-500 uppercase tracking-wider">Precio Unit.</th>
              <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-secondary-500 uppercase tracking-wider">Subtotal</th>
              <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-secondary-500 uppercase tracking-wider">Impuesto</th>
              <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-secondary-500 uppercase tracking-wider">Total</th>
            </tr>
          </thead>
          <tbody class="bg-white divide-y divide-secondary-200">
            {% for linea in lineas %}
            <tr class="hover:bg-secondary-50 transition-colors">
              <td data-label="#" class="px-6 py-4 whitespace-nowrap text-sm font-medium text-secondary-900">{{ linea.linea }}</td>
              <td data-label="Descripción" class="px-6 py-4 text-sm text-secondary-900">{{ linea.descripcion }}</td>
              <td data-label="Cantidad" class="px-6 py-4 whitespace-nowrap text-sm text-right tabular-nums text-secondary-900">{{ linea.cantidad|round(0, 'common')|number_format(0, '.', ',') }}</td>
              <td data-label="Precio unitario" class="px-6 py-4 whitespace-nowrap text-sm text-right tabular-nums text-secondary-900">{{ linea.precioUnitario|number_format(2, '.', ',') }}</td>
              <td data-label="Subtotal" class="px-6 py-4 whitespace-nowrap text-sm text-right tabular-nums text-secondary-900">{{ (linea.cantidad * linea.precioUnitario)|number_format(2, '.', ',') }}</td>
              <td data-label="Impuesto" class="px-6 py-4 whitespace-nowrap text-sm text-right tabular-nums text-secondary-900">{{ linea.impuestoMonto|number_format(2, '.', ',') }}</td>
              <td data-label="Total" class="px-6 py-4 whitespace-nowrap text-sm text-right tabular-nums font-semibold text-secondary-900">
                {{ documento.moneda.codigo }} {{ linea.totalLinea|number_format(2, '.', ',') }}
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
      {% else %}
        {% include 'components/_empty_state.html.twig' with {
          title: 'No hay líneas registradas',
          message: 'Este documento todavía no tiene detalle de líneas.'
        } only %}
      {% endif %}
    </div>


    {# Detalle de Retenciones #}
    <div class="section-card">
      <div class="section-card-header">
        <h3 class="text-lg leading-6 font-medium text-secondary-900">
          Detalle de Retenciones
        </h3>
        <p class="mt-1 max-w-2xl text-sm text-secondary-500">
          Resumen de retenciones vinculadas a este documento
        </p>
      </div>
      {% if retencionDetalle.items|length > 0 %}
      <div class="px-4 py-5 sm:px-6 space-y-4">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
          {% for ret in retencionDetalle.items %}
            <div class="border border-secondary-200 rounded-lg p-4 bg-secondary-50">
              <p class="text-xs uppercase tracking-wide text-secondary-500">{{ ret.tipo }}</p>
              <p class="text-sm text-secondary-700">Base: {{ documento.moneda.codigo }} {{ ret.base|number_format(2, '.', ',') }}</p>
              {% if documento.moneda.codigo != 'GTQ' %}
              <p class="text-[11px] text-primary-700">Base: GTQ {{ (ret.base * documento.tipoCambio)|number_format(2, '.', ',') }}</p>
              {% endif %}
              <p class="text-sm text-secondary-700">Porcentaje: {{ ret.porcentaje }}{{ ret.porcentaje is not null ? '%' : '' }}</p>
              <p class="text-lg font-semibold text-secondary-900">Monto: {{ documento.moneda.codigo }} {{ ret.monto|number_format(2, '.', ',') }}</p>
              {% if documento.moneda.codigo != 'GTQ' %}
              <p class="text-[11px] text-primary-700">Monto: GTQ {{ (ret.monto * documento.tipoCambio)|number_format(2, '.', ',') }}</p>
              {% endif %}
            </div>
          {% endfor %}
        </div>
        <div class="mt-2 grid grid-cols-1 gap-4 rounded-lg border border-secondary-200 bg-secondary-50 p-4 sm:grid-cols-3 sm:items-center">
          <div>
            <p class="text-sm text-secondary-600">Retencion calculada</p>
            <p class="text-2xl font-bold text-secondary-900">{{ documento.moneda.codigo }} {{ retencionDetalle.total|number_format(2, '.', ',') }}</p>
            {% if documento.moneda.codigo != 'GTQ' %}
            <p class="text-[11px] text-primary-700">GTQ {{ (retencionDetalle.total * documento.tipoCambio)|number_format(2, '.', ',') }}</p>
            {% endif %}
          </div>
          <div class="sm:text-center">
            <p class="text-sm text-secondary-600">Retencion real</p>
            <p class="text-2xl font-bold text-secondary-900">{{ retencionResumen.moneda }} {{ retencionResumen.monto_real|number_format(2, '.', ',') }}</p>
            {% if retencionResumen.moneda != 'GTQ' %}
            <p class="text-[11px] text-primary-700">GTQ {{ (retencionResumen.monto_real * documento.tipoCambio)|number_format(2, '.', ',') }}</p>
            {% endif %}
          </div>
          <div class="sm:text-right">
            <p class="text-sm text-secondary-600">Estado</p>
            <p class="text-base font-semibold text-secondary-900">{{ retencionResumen.estado ?? 'Pendiente' }}</p>
          </div>
        </div>
        {% if retencionDetalle.total > 0 %}
        {% if retencionResumen.codigo_sat %}
        <div class="rounded-lg border border-amber-300 bg-amber-50 px-4 py-3 text-amber-900">
          <p class="text-xs uppercase tracking-wide font-semibold text-amber-700">Registro de retencion SAT</p>
          <p class="text-base font-semibold">No. retencion: {{ retencionResumen.codigo_sat }}</p>
        </div>
        {% endif %}
        {% if not retencionResumen.codigo_sat %}
        <form action="{{ path('documento_retencion_aplicar', {id: documento.id}) }}"
              method="post"
              class="space-y-4"
              data-submit-once="true"
              data-retention-sat-form>
          <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-[minmax(0,1fr)_minmax(13rem,0.65fr)_auto] lg:items-end">
            <div>
              <label for="codigo_sat" class="form-label">Código SAT de la retención</label>
              <input type="text"
                     id="codigo_sat"
                     name="codigo_sat"
                     value="{{ retencionSatForm.codigo_sat }}"
                     class="form-control"
                     autocomplete="off"
                     placeholder="Ej. 1234567890">
            </div>
            <div>
              <label for="retencion_monto_real" class="form-label">Retención real</label>
              <input type="text"
                     id="retencion_monto_real"
                     name="retencion_monto_real"
                     value="{{ retencionSatForm.monto_real }}"
                     class="form-control text-right tabular-nums"
                     inputmode="decimal"
                     autocomplete="off"
                     required
                     maxlength="19"
                     pattern="(?:[0-9]{1,16}(?:[.,][0-9]{1,2})?|[.,][0-9]{1,2})"
                     placeholder="Calculada: {{ retencionResumen.moneda }} {{ retencionDetalle.total|number_format(2, '.', ',') }}"
                     aria-describedby="retencion_monto_real_help retencion_monto_real_error"
                     aria-invalid="{{ retencionSatForm.monto_error ? 'true' : 'false' }}"
                     data-retention-real-input
                     data-error-target="retencion_monto_real_error"
                     {% if retencionSatForm.clear_prefilled %}data-clear-prefilled-on-focus="true"{% endif %}>
              <p id="retencion_monto_real_help" class="mt-1 text-xs text-secondary-500">
                Calculada: {{ retencionResumen.moneda }} {{ retencionDetalle.total|number_format(2, '.', ',') }}
              </p>
              <p id="retencion_monto_real_error" class="form-error min-h-4" role="alert">{{ retencionSatForm.monto_error }}</p>
            </div>
            <input type="hidden" name="_token" value="{{ csrf_token('aplicar_retencion_' ~ documento.id) }}">
            <button type="submit" class="btn btn-primary w-full whitespace-nowrap md:w-auto" data-loading-text="Aplicando...">
              <span data-button-label>Aplicar en SAT</span>
            </button>
          </div>
        </form>
        {% endif %}
        <div class="flex flex-col gap-1 rounded-lg border border-secondary-200 bg-secondary-50 px-4 py-3 text-sm text-secondary-600 sm:flex-row sm:items-center sm:justify-between">
          <div>Saldo retención: <span class="font-semibold tabular-nums text-secondary-800">{{ retencionResumen.moneda }} {{ retencionResumen.saldo|number_format(2, '.', ',') }}</span></div>
          <div>Estado: <span class="font-semibold text-secondary-800">{{ retencionResumen.estado ?? 'Pendiente' }}</span></div>
        </div>
        {% else %}
          {% include 'components/_empty_state.html.twig' with {
            title: 'Sin retención generada',
            message: 'El cálculo de este documento no generó una retención aplicable.'
          } only %}
        {% endif %}
      </div>
      {% else %}
        {% include 'components/_empty_state.html.twig' with {
          title: 'Sin retenciones configuradas',
          message: 'Este documento no tiene retenciones fiscales configuradas.'
        } only %}
      {% endif %}
    </div>
    {# Detalle de Pagos #}
    <div class="section-card">
      <div class="section-card-header">
        <h3 class="text-lg leading-6 font-medium text-secondary-900">
          Detalle de Pagos
        </h3>
        <p class="mt-1 max-w-2xl text-sm text-secondary-500">
          {{ pagosAplicados|length }} pago(s) aplicado(s)
        </p>
      </div>
      <div class="table-responsive" data-scroll-affordance>
        {% if pagosAplicados|length > 0 %}
        <table class="table table-to-card">
          <thead class="bg-secondary-50">
            <tr>
              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-secondary-500 uppercase tracking-wider">Código</th>
              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-secondary-500 uppercase tracking-wider">Fecha</th>
              <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-secondary-500 uppercase tracking-wider">Monto</th>
              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-secondary-500 uppercase tracking-wider">Forma de Pago</th>
              <th scope="col" class="px-6 py-3 text-center text-xs font-medium text-secondary-500 uppercase tracking-wider">Estado</th>
            </tr>
          </thead>
          <tbody class="bg-white divide-y divide-secondary-200">
            {% for pago in pagosAplicados %}
            <tr class="hover:bg-secondary-50 transition-colors">
              <td data-label="Código" class="px-6 py-4 whitespace-nowrap text-sm font-medium text-secondary-900">
                <a href="{{ path('pago_aplicar', {id: pago.pagoId}) }}" class="text-primary-600 hover:text-primary-900">
                  PAY-{{ '%05d'|format(pago.pagoId) }}
                </a>
              </td>
              <td data-label="Fecha" class="px-6 py-4 whitespace-nowrap text-sm tabular-nums text-secondary-900">
                {{ pago.fecha|date('d/m/Y') }}
              </td>
              <td data-label="Monto" class="px-6 py-4 whitespace-nowrap text-sm text-right tabular-nums font-semibold text-secondary-900">
                {{ pago.monedaCodigo }} {{ pago.monto|number_format(2, '.', ',') }}
              </td>
              <td data-label="Forma de pago" class="px-6 py-4 whitespace-nowrap text-sm text-secondary-900">
                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                  {{ pago.formaPago }}
                </span>
              </td>
              <td data-label="Estado" class="px-6 py-4 whitespace-nowrap text-center text-sm">
                {% if pago.estado == 'Aplicado' %}
                  <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                    Aplicado
                  </span>
                {% elseif pago.estado == 'Anulado' %}
                  <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
                    Anulado
                  </span>
                {% else %}
                  <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
                    {{ pago.estado }}
                  </span>
                {% endif %}
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
        {% else %}
          {% include 'components/_empty_state.html.twig' with {
            title: 'No hay pagos aplicados',
            message: 'No se han aplicado pagos a este documento.'
          } only %}
        {% endif %}
      </div>
    </div>

    {# Totales #}
    <div class="section-card">
      <div class="px-4 py-5 sm:p-6">
        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-6">
          <div class="bg-secondary-50 overflow-hidden shadow rounded-lg border border-secondary-200">
            <div class="px-4 py-5 sm:p-6">
              <dt class="text-sm font-medium text-secondary-500 truncate">Subtotal</dt>
              <dd class="mt-1 text-2xl font-semibold text-secondary-900">
                {{ documento.moneda.codigo }} {{ documento.subtotal|number_format(2, '.', ',') }}
              </dd>
            </div>
          </div>

          <div class="bg-blue-50 overflow-hidden shadow rounded-lg border border-blue-200">
            <div class="px-4 py-5 sm:p-6">
              <dt class="text-sm font-medium text-blue-700 truncate">IVA (12%)</dt>
              <dd class="mt-1 text-2xl font-semibold text-blue-900">
                {{ documento.moneda.codigo }} {{ documento.impuestoTotal|number_format(2, '.', ',') }}
              </dd>
            </div>
          </div>

          <div class="bg-red-50 overflow-hidden shadow rounded-lg border border-red-200">
            <div class="px-4 py-5 sm:p-6">
              <dt class="text-sm font-medium text-red-700 truncate">Retenciones</dt>
              <dd class="mt-1 text-2xl font-semibold text-red-900">
                -{{ documento.moneda.codigo }} {{ (documento.retencionMontoReal ?? documento.retencionTotal)|number_format(2, '.', ',') }}
              </dd>
            </div>
          </div>

          

          <div class="bg-amber-50 overflow-hidden shadow rounded-lg border border-amber-200">
            <div class="px-4 py-5 sm:p-6">
              <dt class="text-sm font-medium text-amber-700 truncate">IDP incluido</dt>
              <dd class="mt-1 text-2xl font-semibold text-amber-900">
                {{ documento.moneda.codigo }} {{ documento.idpTotal|number_format(2, '.', ',') }}
              </dd>
            </div>
          </div>
          <div class="bg-green-50 overflow-hidden shadow rounded-lg border border-green-200">
            <div class="px-4 py-5 sm:p-6">
              <dt class="text-sm font-medium text-green-700 truncate">Pagos Aplicados</dt>
              <dd class="mt-1 text-2xl font-semibold text-green-900">
                -{{ documento.moneda.codigo }} {{ totalPagosAplicados|number_format(2, '.', ',') }}
              </dd>
            </div>
          </div>

          <div class="bg-gradient-to-br from-primary-50 to-primary-100 overflow-hidden shadow-lg rounded-lg border-2 border-primary-300">
            <div class="px-4 py-5 sm:p-6">
              <dt class="text-sm font-bold text-primary-700 truncate">TOTAL A PAGAR</dt>
              <dd class="mt-1 text-2xl font-bold text-primary-900 break-words">
                {{ documento.moneda.codigo }} {{ documento.saldoPendiente|number_format(2, '.', ',') }}
              </dd>
              {% if documento.moneda.codigo != 'GTQ' %}
              <dd class="mt-1 text-sm font-medium text-primary-700">
                Equivalente en GTQ: Q {{ (documento.saldoPendiente * documento.tipoCambio)|number_format(2, '.', ',') }}
              </dd>
              {% endif %}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
{% endblock %}