{% extends 'base.html.twig' %}
{% block title %}Nuevo Pago{% 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('pago_index') }}" class="ml-4 text-sm font-medium text-secondary-500 hover:text-secondary-700">Pagos</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">Nuevo</span>
        </div>
      </li>
    </ol>
  </nav>
{% endblock %}

{% block content_header %}
  <div class="md:flex md:items-center md:justify-between mb-6">
    <div class="flex-1 min-w-0">
      <h2 class="text-2xl font-bold leading-7 text-secondary-900 sm:text-3xl">
        Registrar Pago
      </h2>
      <p class="mt-1 text-sm text-secondary-500">
        Registra el pago, aplica facturas si corresponde y deja saldo disponible como adelanto cuando sea necesario.
      </p>
    </div>
    <div class="mt-4 flex md:mt-0 md:ml-4">
      <a href="{{ path('pago_index') }}" class="inline-flex items-center px-4 py-2 border border-secondary-300 rounded-md shadow-sm text-sm font-medium text-secondary-700 bg-white hover:bg-secondary-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
        Cancelar
      </a>
    </div>
  </div>
{% endblock %}

{% block content %}
  <form id="pago-form" action="{{ path('pago_store') }}" method="post" data-docs-endpoint="{{ path('pago_documentos_proveedor') }}" data-tc-endpoint-template="{{ path('documento_api_tipo_cambio', {monedaId: '__ID__'}) }}" data-prefill-provider-id="{{ prefill.proveedorId ?? '' }}" data-prefill-documento-id="{{ prefill.documentoId ?? '' }}" data-prefill-moneda-id="{{ prefill.monedaId ?? '' }}" data-prefill-monto="{{ prefill.monto is not null ? prefill.monto|number_format(2, '.', '') : '' }}" class="space-y-6">
    <div class="bg-white shadow rounded-lg overflow-hidden">
      <div class="px-6 py-4 border-b border-secondary-200 bg-secondary-50">
        <h3 class="text-base font-semibold text-secondary-900">Datos del pago</h3>
      </div>
      <div class="px-6 py-6">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div>
            <label for="proveedor_id" class="block text-sm font-medium text-secondary-700 mb-2">
              Proveedor <span class="text-red-500">*</span>
            </label>
            <select id="proveedor_id" name="proveedor_id" required class="w-full px-3 py-2 border border-secondary-300 rounded-md focus:ring-primary-500 focus:border-primary-500">
              <option value="">Seleccionar proveedor...</option>
              {% for proveedor in proveedores %}
                <option value="{{ proveedor.id }}" {{ prefill.proveedorId is not null and prefill.proveedorId == proveedor.id ? 'selected' : '' }}>{{ proveedor.razonSocial }} - {{ proveedor.nit }}</option>
              {% endfor %}
            </select>
          </div>

          <div>
            <label for="moneda_id" class="block text-sm font-medium text-secondary-700 mb-2">
              Moneda <span class="text-red-500">*</span>
            </label>
            <select id="moneda_id" data-base-codigo="{{ monedaBase.codigo ?? 'GTQ' }}" name="moneda_id" required class="w-full px-3 py-2 border border-secondary-300 rounded-md focus:ring-primary-500 focus:border-primary-500">
              {% for moneda in monedas %}
                <option value="{{ moneda.id }}" data-codigo="{{ moneda.codigo }}" {{ prefill.monedaId is not null ? (prefill.monedaId == moneda.id ? 'selected' : '') : (monedaBase ? (monedaBase.codigo == moneda.codigo ? 'selected' : '') : (moneda.codigo == 'GTQ' ? 'selected' : '')) }}>{{ moneda.codigo }} - {{ moneda.nombre }}</option>
              {% endfor %}
            </select>
          </div>

          <div>
            <label for="forma_pago" class="block text-sm font-medium text-secondary-700 mb-2">
              Forma de Pago <span class="text-red-500">*</span>
            </label>
            <select id="forma_pago" name="forma_pago" required class="w-full px-3 py-2 border border-secondary-300 rounded-md focus:ring-primary-500 focus:border-primary-500">
              <option value="">Seleccionar...</option>
              {% for id, nombre in formas %}
                <option value="{{ id }}">{{ nombre }}</option>
              {% endfor %}
            </select>
          </div>

          <div>
            <label for="fecha_pago" class="block text-sm font-medium text-secondary-700 mb-2">
              Fecha de Pago <span class="text-red-500">*</span>
            </label>
            <input type="date" id="fecha_pago" name="fecha_pago" required value="{{ 'now'|date('Y-m-d') }}" class="w-full px-3 py-2 border border-secondary-300 rounded-md focus:ring-primary-500 focus:border-primary-500">
          </div>

          <div class="md:col-span-2 hidden" id="cuenta-bancaria-wrapper">
            <label for="cuenta_bancaria_id" class="block text-sm font-medium text-secondary-700 mb-2">
              Cuenta bancaria / origen <span id="cuenta-required" class="text-red-500">*</span>
            </label>
            <select id="cuenta_bancaria_id" name="cuenta_bancaria_id" class="w-full px-3 py-2 border border-secondary-300 rounded-md focus:ring-primary-500 focus:border-primary-500">
              <option value="">Seleccionar cuenta...</option>
              {% for cuenta in cuentasBancarias %}
                <option value="{{ cuenta.id }}" data-moneda="{{ cuenta.moneda.codigo }}">
                  {{ cuenta.banco.nombre }} - {{ cuenta.numero }} - {{ cuenta.moneda.codigo }}{% if cuenta.descripcion %} - {{ cuenta.descripcion }}{% endif %}
                </option>
              {% endfor %}
            </select>
            <p id="cuenta-bancaria-note" class="mt-1 text-xs text-secondary-500">Obligatoria para cheques y transferencias.</p>
            <p id="cuenta-bancaria-error" class="mt-1 text-xs text-red-600 hidden"></p>
          </div>

          <div>
            <label for="total_pagado" class="block text-sm font-medium text-secondary-700 mb-2">
              Monto Pagado <span class="text-red-500">*</span>
            </label>
            <div class="flex rounded-md shadow-sm">
              <span id="pago-currency-code" data-role="currency-code" class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-secondary-300 bg-secondary-50 text-secondary-600 text-sm">Q</span>
              <input type="number" id="total_pagado" name="total_pagado" required step="0.01" min="0.01" value="{{ prefill.monto is not null ? prefill.monto|number_format(2, '.', '') : '' }}" autocomplete="off" class="flex-1 min-w-0 px-3 py-2 border border-secondary-300 rounded-r-md focus:ring-primary-500 focus:border-primary-500">
            </div>
          </div>

          <div id="conversion-fields" class="grid grid-cols-1 md:grid-cols-2 gap-6 md:col-span-2 hidden">
            <div>
              <label for="tipo_cambio" class="block text-sm font-medium text-secondary-700 mb-2">
                Tipo de Cambio (compra)
              </label>
              <input type="number" id="tipo_cambio" name="tipo_cambio" step="0.000001" value="1.000000" min="0" class="w-full px-3 py-2 border border-secondary-300 rounded-md focus:ring-primary-500 focus:border-primary-500">
              <p class="mt-1 text-xs text-secondary-500">Usado para convertir a la moneda base.</p>
            </div>

            <div>
              <label for="tipo_cambio_venta" class="block text-sm font-medium text-secondary-700 mb-2">
                Tipo de Cambio (venta)
              </label>
              <input type="number" id="tipo_cambio_venta" name="tipo_cambio_venta" step="0.000001" value="1.000000" min="0" class="w-full px-3 py-2 border border-secondary-300 rounded-md focus:ring-primary-500 focus:border-primary-500">
              <p id="pago-conversion-note" class="mt-1 text-xs text-secondary-500"></p>
              <p class="mt-1 text-xs text-secondary-500">Si no aplica, deja el mismo TC de compra.</p>
            </div>
          </div>

          <div class="md:col-span-2">
            <label for="referencia" class="block text-sm font-medium text-secondary-700 mb-2">
              Referencia / Numero de Transaccion
            </label>
            <input type="text" id="referencia" name="referencia" maxlength="50" class="w-full px-3 py-2 border border-secondary-300 rounded-md focus:ring-primary-500 focus:border-primary-500" placeholder="Ej: Cheque #1234, Transfer ABC123, Cuenta destino XYZ">
          </div>

          <div class="md:col-span-2">
            <label for="observaciones" class="block text-sm font-medium text-secondary-700 mb-2">
              Observaciones
            </label>
            <textarea id="observaciones" name="observaciones" rows="3" class="w-full px-3 py-2 border border-secondary-300 rounded-md focus:ring-primary-500 focus:border-primary-500" placeholder="Observaciones adicionales..."></textarea>
          </div>
        </div>
      </div>
    </div>

    <div class="bg-white shadow rounded-lg overflow-hidden">
      <div class="px-6 py-4 border-b border-secondary-200 bg-secondary-50 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
        <div>
          <h3 class="text-base font-semibold text-secondary-900">Facturas a liquidar</h3>
          <p class="text-xs text-secondary-600">Selecciona las facturas que se liquidaran con este pago. Si dejas saldo sin aplicar, el sistema lo conserva como adelanto.</p>
        </div>
        <button type="button" id="btn-auto-aplicar" class="inline-flex items-center justify-center px-3 py-2 border border-primary-300 rounded-md text-sm font-medium text-primary-700 bg-primary-50 hover:bg-primary-100">
          Aplicar automatico
        </button>
      </div>

      <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-secondary-200">
          <thead class="bg-white">
            <tr>
              <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-secondary-500">Sel</th>
              <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-secondary-500">Documento</th>
              <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-secondary-500">Fecha</th>
              <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-secondary-500">Vence</th>
              <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-secondary-500">Moneda</th>
              <th class="px-4 py-3 text-right text-xs font-semibold uppercase tracking-wider text-secondary-500">Saldo</th>
              <th class="px-4 py-3 text-right text-xs font-semibold uppercase tracking-wider text-secondary-500">Retencion</th>
              <th class="px-4 py-3 text-right text-xs font-semibold uppercase tracking-wider text-secondary-500">Aplicar</th>
            </tr>
          </thead>
          <tbody id="facturas-body" class="divide-y divide-secondary-100">
            <tr>
              <td colspan="8" class="px-4 py-8 text-center text-sm text-secondary-500">Selecciona un proveedor para cargar facturas.</td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="px-6 py-4 border-t border-secondary-200 bg-secondary-50">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
          <div class="rounded-md border border-secondary-200 bg-white px-4 py-3">
            <p class="text-xs uppercase tracking-wide text-secondary-500">Facturas seleccionadas</p>
            <p id="resumen-facturas" class="text-xl font-semibold text-secondary-900">0</p>
          </div>
          <div class="rounded-md border border-secondary-200 bg-white px-4 py-3">
            <p class="text-xs uppercase tracking-wide text-secondary-500">Total aplicado</p>
            <p id="resumen-aplicado" class="text-xl font-semibold text-secondary-900">Q 0.00</p>
          </div>
          <div class="rounded-md border border-secondary-200 bg-white px-4 py-3">
            <p class="text-xs uppercase tracking-wide text-secondary-500">Disponible</p>
            <p id="resumen-disponible" class="text-xl font-semibold text-secondary-900">Q 0.00</p>
          </div>
        </div>
        <p id="pago-disponible-note" class="mt-3 text-sm text-secondary-600 hidden"></p>
      </div>
    </div>

    <div class="flex justify-end space-x-3">
      <a href="{{ path('pago_index') }}" class="inline-flex items-center px-4 py-2 border border-secondary-300 rounded-md shadow-sm text-sm font-medium text-secondary-700 bg-white hover:bg-secondary-50">
        Cancelar
      </a>
      <button id="btn-registrar" type="submit" class="inline-flex items-center px-6 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
        <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="M5 13l4 4L19 7" />
        </svg>
        Registrar Pago
      </button>
    </div>
  </form>

  <script>
    document.addEventListener('DOMContentLoaded', function () {
      const form = document.getElementById('pago-form');
      const proveedorSelect = document.getElementById('proveedor_id');
      const monedaSelect = document.getElementById('moneda_id');
      const formaPagoSelect = document.getElementById('forma_pago');
      const fechaPagoInput = document.getElementById('fecha_pago');
      const cuentaBancariaSelect = document.getElementById('cuenta_bancaria_id');
      const cuentaBancariaWrapper = document.getElementById('cuenta-bancaria-wrapper');
      const cuentaBancariaNote = document.getElementById('cuenta-bancaria-note');
      const cuentaBancariaError = document.getElementById('cuenta-bancaria-error');
      const conversionFields = document.getElementById('conversion-fields');
      const tipoCambioInput = document.getElementById('tipo_cambio');
      const tipoCambioVentaInput = document.getElementById('tipo_cambio_venta');
      const totalPagadoInput = document.getElementById('total_pagado');
      const codeSpan = document.getElementById('pago-currency-code');
      const note = document.getElementById('pago-conversion-note');
      const facturasBody = document.getElementById('facturas-body');
      const btnAutoAplicar = document.getElementById('btn-auto-aplicar');
      const btnRegistrar = document.getElementById('btn-registrar');
      const disponibleNote = document.getElementById('pago-disponible-note');

      const resumenFacturas = document.getElementById('resumen-facturas');
      const resumenAplicado = document.getElementById('resumen-aplicado');
      const resumenDisponible = document.getElementById('resumen-disponible');

      const baseCodigo = monedaSelect?.dataset?.baseCodigo || 'GTQ';
      const docsEndpoint = form?.dataset?.docsEndpoint || '';
      const tipoCambioEndpointTemplate = form?.dataset?.tcEndpointTemplate || '';
      const formasConCuenta = new Set(['1', '2', '3', '4']);
      const prefillProviderId = form?.dataset?.prefillProviderId || '';
      const prefillDocumentoId = form?.dataset?.prefillDocumentoId || '';
      const prefillMonedaId = form?.dataset?.prefillMonedaId || '';
      const prefillMonto = parseFloat(form?.dataset?.prefillMonto || '0');
      let prefillApplied = false;

      function escapeHtml(value) {
        return String(value ?? '').replace(/[&<>\"']/g, function (char) {
          return {
            '&': '&amp;',
            '<': '&lt;',
            '>': '&gt;',
            '"': '&quot;',
            "'": '&#039;'
          }[char] || char;
        });
      }

      function getMontoPago() {
        const val = parseFloat(totalPagadoInput?.value || '0');
        return Number.isFinite(val) ? val : 0;
      }

      function getMonedaPagoCodigo() {
        const selected = monedaSelect?.options?.[monedaSelect.selectedIndex];
        return selected?.dataset?.codigo || baseCodigo;
      }

      function getMonedaPago() {
        return codeSpan?.textContent?.trim() || getMonedaPagoCodigo();
      }

      function formatMoney(value) {
        return Number(value || 0).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
      }

      function setCuentaError(message) {
        if (!cuentaBancariaError) {
          return;
        }

        if (message) {
          cuentaBancariaError.textContent = message;
          cuentaBancariaError.classList.remove('hidden');
          cuentaBancariaSelect?.classList.add('border-red-400');
        } else {
          cuentaBancariaError.textContent = '';
          cuentaBancariaError.classList.add('hidden');
          cuentaBancariaSelect?.classList.remove('border-red-400');
        }
      }

      function setEstadoConversion() {
        const codigo = getMonedaPagoCodigo();

        if (codeSpan) {
          codeSpan.textContent = codigo;
        }

        if (!note || !conversionFields) {
          return;
        }

        if (codigo === baseCodigo) {
          conversionFields.classList.add('hidden');
          note.textContent = '';
          if (tipoCambioInput) {
            tipoCambioInput.value = '1.000000';
          }
          if (tipoCambioVentaInput) {
            tipoCambioVentaInput.value = '1.000000';
          }
        } else {
          conversionFields.classList.remove('hidden');
          note.textContent = `Se convertira a ${baseCodigo} al guardar.`;
        }
      }

      function buildTipoCambioUrl(monedaId) {
        if (!tipoCambioEndpointTemplate) {
          return '';
        }

        return tipoCambioEndpointTemplate.replace('__ID__', String(monedaId));
      }

      async function cargarTipoCambioActual() {
        const monedaId = monedaSelect?.value || '';
        const codigo = getMonedaPagoCodigo();

        setEstadoConversion();

        if (!monedaId || codigo === baseCodigo || !tipoCambioInput || !tipoCambioVentaInput) {
          return;
        }

        const baseUrl = buildTipoCambioUrl(monedaId);
        if (!baseUrl) {
          return;
        }

        const fecha = fechaPagoInput?.value || '';
        const url = fecha ? `${baseUrl}?fecha=${encodeURIComponent(fecha)}` : baseUrl;

        try {
          const response = await fetch(url, {
            headers: {
              'X-Requested-With': 'XMLHttpRequest'
            }
          });
          const payload = await response.json();

          if (!response.ok || !payload?.success) {
            throw new Error(payload?.message || 'No se pudo obtener el tipo de cambio.');
          }

          const tcCompra = Number(payload.tipoCambio?.tcCompra || 1);
          const tcVenta = Number(payload.tipoCambio?.tcVenta || tcCompra || 1);

          tipoCambioInput.value = tcCompra.toFixed(6);
          tipoCambioVentaInput.value = tcVenta.toFixed(6);

          if (note) {
            const fechaTc = payload.tipoCambio?.fecha || fecha || 'hoy';
            note.textContent = `TC aplicado al ${fechaTc} para convertir a ${baseCodigo}.`;
          }
        } catch (error) {
          tipoCambioInput.value = '1.000000';
          tipoCambioVentaInput.value = '1.000000';
          if (note) {
            note.textContent = error?.message || `No se encontro TC vigente. Se usara 1.000000 hacia ${baseCodigo}.`;
          }
        }
      }

      function validateCuentaBancaria() {
        const forma = formaPagoSelect?.value || '';
        const requiereCuenta = formasConCuenta.has(forma);

        if (!requiereCuenta) {
          setCuentaError('');
          return true;
        }

        if (!cuentaBancariaSelect?.value) {
          setCuentaError('Selecciona la cuenta bancaria de origen.');
          return false;
        }

        const monedaCuenta = cuentaBancariaSelect.options[cuentaBancariaSelect.selectedIndex]?.dataset?.moneda || '';
        const monedaPago = getMonedaPagoCodigo();
        if (monedaCuenta && monedaPago && monedaCuenta !== monedaPago) {
          setCuentaError(`La cuenta bancaria esta en ${monedaCuenta} y el pago esta en ${monedaPago}. Deben coincidir.`);
          return false;
        }

        setCuentaError('');
        return true;
      }

      function syncCuentaBancaria() {
        const forma = formaPagoSelect?.value || '';
        const requiereCuenta = formasConCuenta.has(forma);

        if (cuentaBancariaWrapper) {
          cuentaBancariaWrapper.classList.toggle('hidden', !requiereCuenta);
        }

        if (!requiereCuenta) {
          if (cuentaBancariaSelect) {
            cuentaBancariaSelect.value = '';
          }
          setCuentaError('');
          return true;
        }

        if (cuentaBancariaNote) {
          cuentaBancariaNote.textContent = forma === '4'
            ? 'Selecciona la cuenta de salida. Documenta la cuenta destino en referencia u observaciones.'
            : 'Obligatoria para cheques y transferencias.';
        }

        return validateCuentaBancaria();
      }

      function setFacturasMensaje(texto) {
        facturasBody.innerHTML = `<tr><td colspan="8" class="px-4 py-8 text-center text-sm text-secondary-500">${escapeHtml(texto)}</td></tr>`;
      }

      function totalAplicado(excludeInput) {
        let total = 0;
        facturasBody.querySelectorAll('.factura-monto').forEach(function (input) {
          if (excludeInput && input === excludeInput) {
            return;
          }
          const row = input.closest('tr');
          const check = row?.querySelector('.factura-check');
          if (!check || !check.checked) {
            return;
          }
          const value = parseFloat(input.value || '0');
          if (Number.isFinite(value) && value > 0) {
            total += value;
          }
        });
        return total;
      }

      function sugerirMonto(input) {
        const saldo = parseFloat(input.dataset.saldo || '0');
        const disponible = Math.max(getMontoPago() - totalAplicado(input), 0);
        const sugerido = Math.min(saldo, disponible);
        if (sugerido > 0) {
          input.value = sugerido.toFixed(2);
        }
      }

      function actualizarResumen() {
        const montoPago = getMontoPago();
        const moneda = getMonedaPago();

        let facturas = 0;
        let aplicado = 0;
        let invalido = false;

        facturasBody.querySelectorAll('tr[data-doc-id]').forEach(function (row) {
          const check = row.querySelector('.factura-check');
          const input = row.querySelector('.factura-monto');
          if (!check || !input) {
            return;
          }

          const saldo = parseFloat(input.dataset.saldo || '0');
          if (!check.checked) {
            input.disabled = true;
            input.value = '';
            input.classList.remove('border-red-400', 'bg-red-50');
            return;
          }

          facturas += 1;
          input.disabled = false;

          const value = parseFloat(input.value || '0');
          const monto = Number.isFinite(value) ? value : 0;
          aplicado += monto;

          if (monto - saldo > 0.01) {
            input.classList.add('border-red-400', 'bg-red-50');
            invalido = true;
          } else {
            input.classList.remove('border-red-400', 'bg-red-50');
          }
        });

        const disponible = montoPago - aplicado;
        if (disponible < -0.01) {
          invalido = true;
        }

        resumenFacturas.textContent = String(facturas);
        resumenAplicado.textContent = `${moneda} ${formatMoney(aplicado)}`;
        resumenDisponible.textContent = `${moneda} ${formatMoney(disponible)}`;

        if (disponible < -0.01) {
          resumenDisponible.classList.add('text-red-700');
        } else {
          resumenDisponible.classList.remove('text-red-700');
        }

        if (disponibleNote) {
          if (disponible > 0.01) {
            disponibleNote.textContent = facturas > 0
              ? `El saldo restante ${moneda} ${formatMoney(disponible)} quedara disponible como adelanto para futuras aplicaciones.`
              : `Este pago se registrara como adelanto para el proveedor hasta que lo apliques a una factura.`;
            disponibleNote.classList.remove('hidden');
          } else {
            disponibleNote.textContent = '';
            disponibleNote.classList.add('hidden');
          }
        }

        const cuentaValida = syncCuentaBancaria();
        btnRegistrar.disabled = invalido || montoPago <= 0 || !cuentaValida;
        btnRegistrar.classList.toggle('opacity-60', btnRegistrar.disabled);
        btnRegistrar.classList.toggle('cursor-not-allowed', btnRegistrar.disabled);
      }

      function renderFacturas(docs) {
        if (!Array.isArray(docs) || docs.length === 0) {
          setFacturasMensaje('No hay facturas abiertas para este proveedor.');
          actualizarResumen();
          return;
        }

        const rows = docs.map(function (doc) {
          const id = Number(doc.id || 0);
          const saldo = Number(doc.saldo || 0);
          const retencion = Number(doc.retencion || 0);

          return `
            <tr data-doc-id="${id}" class="hover:bg-secondary-50 transition-colors">
              <td class="px-4 py-3 align-top">
                <input type="checkbox" class="factura-check h-4 w-4 text-primary-600 border-secondary-300 rounded" data-doc-id="${id}">
              </td>
              <td class="px-4 py-3 text-sm font-semibold text-secondary-900">${escapeHtml(doc.documento || '')}</td>
              <td class="px-4 py-3 text-sm text-secondary-600">${escapeHtml(doc.fecha || '')}</td>
              <td class="px-4 py-3 text-sm text-secondary-600">${escapeHtml(doc.vencimiento || '')}</td>
              <td class="px-4 py-3 text-sm text-secondary-600">${escapeHtml(doc.moneda || '')}</td>
              <td class="px-4 py-3 text-sm text-secondary-900 text-right">${formatMoney(saldo)}</td>
              <td class="px-4 py-3 text-sm text-secondary-700 text-right">${retencion > 0 ? `${escapeHtml(doc.moneda || '')} ${formatMoney(retencion)}` : '-'}</td>
              <td class="px-4 py-3 text-right">
                <input
                  type="number"
                  class="factura-monto w-32 ml-auto px-3 py-2 border border-secondary-300 rounded-md text-sm text-right focus:ring-primary-500 focus:border-primary-500"
                  name="monto_aplicado[${id}]"
                  min="0"
                  step="0.01"
                  data-saldo="${saldo.toFixed(2)}"
                  placeholder="0.00"
                  disabled
                >
              </td>
            </tr>
          `;
        });

        facturasBody.innerHTML = rows.join('');
        aplicarPrefillDocumento();
        actualizarResumen();
      }

      function aplicarPrefillDocumento() {
        if (prefillApplied || !prefillDocumentoId) {
          return;
        }

        const row = facturasBody.querySelector(`tr[data-doc-id="${prefillDocumentoId}"]`);
        if (!row) {
          return;
        }

        const check = row.querySelector('.factura-check');
        const input = row.querySelector('.factura-monto');
        if (!check || !input) {
          return;
        }

        check.checked = true;
        input.disabled = false;

        const saldo = parseFloat(input.dataset.saldo || '0');
        const monto = prefillMonto > 0 ? Math.min(prefillMonto, saldo) : saldo;
        input.value = monto.toFixed(2);

        if (totalPagadoInput && (!totalPagadoInput.value || parseFloat(totalPagadoInput.value || '0') <= 0)) {
          totalPagadoInput.value = monto.toFixed(2);
        }

        if (prefillMonedaId && monedaSelect && monedaSelect.value !== prefillMonedaId) {
          monedaSelect.value = prefillMonedaId;
        }

        prefillApplied = true;
      }

      async function cargarFacturas() {
        const proveedorId = proveedorSelect?.value || '';
        if (!proveedorId) {
          setFacturasMensaje('Selecciona un proveedor para cargar facturas.');
          actualizarResumen();
          return;
        }

        setFacturasMensaje('Cargando facturas...');

        try {
          const response = await fetch(`${docsEndpoint}?proveedor_id=${encodeURIComponent(proveedorId)}`, {
            headers: {
              'X-Requested-With': 'XMLHttpRequest'
            }
          });

          const payload = await response.json();
          if (!response.ok || !payload?.ok) {
            throw new Error(payload?.message || 'No se pudo cargar las facturas.');
          }

          renderFacturas(payload.documentos || []);
        } catch (error) {
          setFacturasMensaje(error?.message || 'No se pudo cargar las facturas.');
          actualizarResumen();
        }
      }

      function autoAplicar() {
        const montoPago = getMontoPago();
        let restante = montoPago;

        const rows = facturasBody.querySelectorAll('tr[data-doc-id]');
        rows.forEach(function (row) {
          const check = row.querySelector('.factura-check');
          const input = row.querySelector('.factura-monto');
          if (!check || !input) {
            return;
          }
          check.checked = false;
          input.disabled = true;
          input.value = '';
        });

        rows.forEach(function (row) {
          if (restante <= 0) {
            return;
          }

          const check = row.querySelector('.factura-check');
          const input = row.querySelector('.factura-monto');
          if (!check || !input) {
            return;
          }

          const saldo = parseFloat(input.dataset.saldo || '0');
          const aplicar = Math.min(restante, saldo);
          if (aplicar <= 0) {
            return;
          }

          check.checked = true;
          input.disabled = false;
          input.value = aplicar.toFixed(2);
          restante -= aplicar;
        });

        actualizarResumen();
      }

      proveedorSelect?.addEventListener('change', cargarFacturas);
      monedaSelect?.addEventListener('change', async function () {
        await cargarTipoCambioActual();
        actualizarResumen();
      });
      fechaPagoInput?.addEventListener('change', async function () {
        await cargarTipoCambioActual();
        actualizarResumen();
      });
      formaPagoSelect?.addEventListener('change', actualizarResumen);
      cuentaBancariaSelect?.addEventListener('change', actualizarResumen);
      totalPagadoInput?.addEventListener('input', actualizarResumen);

      facturasBody?.addEventListener('change', function (event) {
        const target = event.target;
        if (!target || !target.classList.contains('factura-check')) {
          return;
        }

        const row = target.closest('tr');
        const input = row?.querySelector('.factura-monto');
        if (!input) {
          return;
        }

        if (target.checked) {
          input.disabled = false;
          if (!input.value) {
            sugerirMonto(input);
          }
        } else {
          input.disabled = true;
          input.value = '';
        }

        actualizarResumen();
      });

      facturasBody?.addEventListener('input', function (event) {
        const target = event.target;
        if (!target || !target.classList.contains('factura-monto')) {
          return;
        }
        actualizarResumen();
      });

      btnAutoAplicar?.addEventListener('click', autoAplicar);

      form?.addEventListener('submit', function (event) {
        actualizarResumen();
        if (btnRegistrar.disabled || !validateCuentaBancaria()) {
          event.preventDefault();
        }
      });

      async function iniciarPantalla() {
        if (prefillMonedaId && monedaSelect && monedaSelect.value !== prefillMonedaId) {
          monedaSelect.value = prefillMonedaId;
        }
        if (prefillProviderId && proveedorSelect) {
          proveedorSelect.value = prefillProviderId;
        }

        await cargarTipoCambioActual();
        syncCuentaBancaria();

        if (prefillProviderId) {
          await cargarFacturas();
        } else {
          actualizarResumen();
        }
      }

      iniciarPantalla();
    });
  </script>
{% endblock %}