{% extends 'base.html.twig' %}
{% block title %}Aplicar pago{% endblock %}
{% block page_title %}Aplicar pago{% endblock %}

{% block breadcrumb %}
  <nav class="breadcrumb" aria-label="breadcrumb">
    <ol class="breadcrumb mb-0">
      <li class="breadcrumb-item"><a href="{{ path('home') }}">Inicio</a></li>
      <li class="breadcrumb-item"><a href="{{ path('pago_index') }}">Pagos</a></li>
      <li class="breadcrumb-item active" aria-current="page">{{ pago.codigo }}</li>
    </ol>
  </nav>
{% endblock %}

{% block content_header %}
  <div class="page-header">
    <div class="min-w-0">
      <p class="type-metadata font-semibold uppercase text-primary-600">Pagos</p>
      <h1 class="page-title">Aplicar pago {{ pago.codigo }}</h1>
      <p class="page-subtitle">{{ pago.proveedor }} &middot; {{ pago.forma }} &middot; {{ pago.fecha }}</p>
    </div>
    <div class="page-actions">
      <span class="badge badge-info tabular-nums">
        {% if pago.monedaOrigen and pago.monedaOrigen != pago.moneda %}
          {{ pago.monedaOrigen }} {{ pago.montoOrigen|number_format(2, '.', ',') }}
          (TC {{ pago.tipoCambio|number_format(6, '.', ',') }} - {{ pago.moneda }} {{ pago.monto|number_format(2, '.', ',') }})
        {% else %}
          {{ pago.moneda }} {{ pago.monto|number_format(2, '.', ',') }}
        {% endif %}
      </span>
    </div>
  </div>
{% endblock %}

{% block content %}
  <form method="post" action="{{ path('pago_aplicar_store', {id: pago.id}) }}">
    <input type="hidden" name="_token" value="{{ csrf_token('pago_aplicar_' ~ pago.id) }}">
    <div class="grid grid-cols-1 gap-6 lg:grid-cols-[minmax(0,2fr)_minmax(18rem,1fr)] lg:items-start">
      <section class="section-card min-w-0" aria-labelledby="pago-documentos-title">
        <div class="section-card-header">
          <h2 id="pago-documentos-title" class="section-card-title">Documentos a aplicar</h2>
          <p class="section-card-subtitle">Distribuye el monto del pago entre los documentos disponibles.</p>
        </div>

        {% if bloqueado|default(false) %}
          <div class="mx-5 mt-5 rounded-control border border-warning-200 bg-warning-50 px-4 py-3 text-sm text-warning-900" role="alert">
            Este pago ya tiene una aplicación registrada y quedó bloqueado para edición.
          </div>
        {% endif %}

        <div class="table-responsive">
          <table class="table table-to-card" aria-label="Documentos disponibles para aplicar el pago">
            <thead>
              <tr>
                <th>Documento</th>
                <th>Fecha</th>
                <th>Moneda</th>
                <th class="text-right">Saldo</th>
                <th class="text-right">Aplicar</th>
                <th class="text-right">Dif. TC</th>
                <th>Estado</th>
              </tr>
            </thead>
            <tbody>
              {% set sumAplicado = 0 %}
              {% for doc in documentos %}
                {% set val = doc.aplicado_actual|default(0) %}
                {% set sumAplicado = sumAplicado + val %}
                <tr>
                  <td data-label="Documento" class="font-semibold text-secondary-900">{{ doc.documento }}</td>
                  <td data-label="Fecha">{{ doc.fecha }}</td>
                  <td data-label="Moneda">{{ doc.moneda }}</td>
                  <td data-label="Saldo" class="text-right tabular-nums">{{ doc.saldo|number_format(2, '.', ',') }}</td>
                  <td data-label="Aplicar">
                    <label class="sr-only" for="monto-aplicado-{{ doc.id }}">Monto a aplicar al documento {{ doc.documento }}</label>
                    <input id="monto-aplicado-{{ doc.id }}"
                           class="form-control input-monto ml-auto max-w-40 text-right tabular-nums {{ bloqueado|default(false) ? 'bg-light' : '' }}"
                           type="number"
                           step="0.01"
                           name="monto_aplicado[{{ doc.id }}]"
                           value="{{ val > 0 ? val : '' }}"
                           data-saldo="{{ doc.saldo }}"
                           placeholder="0.00"
                           {{ bloqueado|default(false) ? 'readonly' : '' }}>
                  </td>
                  <td data-label="Dif. TC" class="text-right tabular-nums text-secondary-500">
                    {% set diff = (pago.tipoCambio - doc.tc)|number_format(2) %}
                    {{ diff }}
                  </td>
                  <td data-label="Estado">
                    <div class="form-check">
                      <input class="form-check-input" type="checkbox" aria-label="Aplicación registrada para {{ doc.documento }}" {{ val > 0 ? 'checked' : '' }} disabled>
                    </div>
                  </td>
                </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      </section>

      <aside class="section-card lg:sticky lg:top-24" aria-labelledby="pago-resumen-title">
        <div class="section-card-header">
          <h2 id="pago-resumen-title" class="section-card-title">Resumen de aplicación</h2>
          <p class="section-card-subtitle">Verifica los totales antes de guardar.</p>
        </div>
        <div class="section-card-body">
          <dl class="divide-y divide-secondary-100">
            <div class="flex items-start justify-between gap-4 py-3 first:pt-0">
              <dt class="text-sm text-secondary-500">Monto pago</dt>
              <dd class="max-w-[65%] text-right text-sm font-semibold tabular-nums text-secondary-900" id="monto-pago" data-val="{{ pago.monto }}">
                {% if pago.monedaOrigen and pago.monedaOrigen != pago.moneda %}
                  {{ pago.monedaOrigen }} {{ pago.montoOrigen|number_format(2, '.', ',') }}
                  <span class="mt-1 block text-xs font-normal text-secondary-500">TC {{ pago.tipoCambio|number_format(6, '.', ',') }} - {{ pago.moneda }} {{ pago.monto|number_format(2, '.', ',') }}</span>
                {% else %}
                  {{ pago.moneda }} {{ pago.monto|number_format(2, '.', ',') }}
                {% endif %}
              </dd>
            </div>

            <div class="flex items-center justify-between gap-4 py-3">
              <dt class="text-sm text-secondary-500">Total aplicado</dt>
              <dd class="text-right text-sm font-bold tabular-nums text-primary-700" id="total-aplicado">{{ pago.moneda }} {{ sumAplicado|number_format(2, '.', ',') }}</dd>
            </div>

            <div class="flex items-center justify-between gap-4 py-3">
              <dt class="text-sm text-secondary-500">Pendiente</dt>
              <dd class="text-right text-sm font-semibold tabular-nums text-secondary-900" id="monto-pendiente">{{ pago.moneda }} {{ (pago.monto - sumAplicado)|number_format(2, '.', ',') }}</dd>
            </div>

            <div class="flex items-center justify-between gap-4 py-3 last:pb-0">
              <dt class="text-sm text-secondary-500">Dif. cambiario</dt>
              <dd class="text-right text-sm font-semibold text-danger-600">–</dd>
            </div>
          </dl>
        </div>
        <div class="flex flex-col-reverse gap-2 border-t border-secondary-200 bg-secondary-50 px-5 py-4 sm:flex-row sm:justify-end lg:flex-col-reverse">
          <a class="btn btn-outline-secondary w-full" href="{{ path('pago_index') }}">{{ bloqueado|default(false) ? 'Volver' : 'Cancelar' }}</a>
          {% if not bloqueado|default(false) %}
            <button class="btn btn-primary w-full" type="submit" id="btn-guardar"><span data-button-label>Guardar aplicación</span></button>
          {% endif %}
        </div>
      </aside>
    </div>
  </form>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const inputs = document.querySelectorAll('.input-monto');
      const totalAplicadoEl = document.getElementById('total-aplicado');
      const montoPendienteEl = document.getElementById('monto-pendiente');
      const btnGuardar = document.getElementById('btn-guardar');

      const montoPago = parseFloat(document.getElementById('monto-pago').dataset.val);
      const moneda = '{{ pago.moneda }}';

      function updateTotals() {
        let total = 0;
        inputs.forEach(input => {
          const val = parseFloat(input.value) || 0;
          total += val;

          // Validar contra saldo individual
          const saldo = parseFloat(input.dataset.saldo);
          if (val > saldo + 0.01) {
            input.classList.add('is-invalid');
          } else {
            input.classList.remove('is-invalid');
          }
        });

        totalAplicadoEl.textContent = moneda + ' ' + total.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2});

        const pendiente = montoPago - total;
        montoPendienteEl.textContent = moneda + ' ' + pendiente.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2});

        if (pendiente < -0.01) {
          montoPendienteEl.classList.add('text-danger');
          if (btnGuardar) { btnGuardar.disabled = true; }
        } else {
          montoPendienteEl.classList.remove('text-danger');
          if (btnGuardar) { btnGuardar.disabled = false; }
        }
      }

      inputs.forEach(input => {
        input.addEventListener('input', updateTotals);
      });

      // Init
      updateTotals();
    });
  </script>
{% endblock %}