{% extends 'base.html.twig' %}
{% block 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 %}
  <form method="post" action="{{ path('pago_aplicar_store', {id: pago.id}) }}">
    <div class="row g-3">
      <div class="col-lg-8">
        <div class="card">
          <div class="card-header d-flex justify-content-between align-items-center">
            <div>
              <h5 class="mb-0">Aplicar pago {{ pago.codigo }}</h5>
              <small class="text-muted">{{ pago.proveedor }} · {{ pago.forma }} · {{ pago.fecha }}</small>
            </div>
            <span class="badge bg-light text-dark">{{ pago.moneda }} {{ pago.monto|number_format(2, '.', ',') }}</span>
          </div>
          <div class="card-body p-0">
            <div class="table-responsive">
              <table class="table align-middle mb-0">
                <thead class="table-light">
                  <tr>
                    <th>Documento</th>
                    <th>Fecha</th>
                    <th>Moneda</th>
                    <th class="text-end">Saldo</th>
                    <th class="text-end">Aplicar</th>
                    <th class="text-end">Dif. TC</th>
                    <th></th>
                  </tr>
                </thead>
                <tbody>
                  {% set sumAplicado = 0 %}
                  {% for doc in documentos %}
                    {% set val = doc.aplicado_actual|default(0) %}
                    {% set sumAplicado = sumAplicado + val %}
                    <tr>
                      <td class="fw-semibold">{{ doc.documento }}</td>
                      <td>{{ doc.fecha }}</td>
                      <td>{{ doc.moneda }}</td>
                      <td class="text-end">{{ doc.saldo|number_format(2, '.', ',') }}</td>
                      <td>
                        <input class="form-control text-end input-monto" type="number" step="0.01"
                               name="monto_aplicado[{{ doc.id }}]"
                               value="{{ val > 0 ? val : '' }}"
                               data-saldo="{{ doc.saldo }}"
                               placeholder="0.00">
                      </td>
                      <td class="text-end text-muted">
                        {% set diff = (pago.tipoCambio - doc.tc)|number_format(2) %}
                        {{ diff }}
                      </td>
                      <td class="text-end">
                        <div class="form-check">
                          <input class="form-check-input" type="checkbox" {{ val > 0 ? 'checked' : '' }} disabled>
                        </div>
                      </td>
                    </tr>
                  {% endfor %}
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-4">
        <div class="card">
          <div class="card-header">Resumen de aplicación</div>
          <div class="card-body">
            <dl class="row mb-0">
              <dt class="col-6 text-muted">Monto pago</dt>
              <dd class="col-6 text-end" id="monto-pago" data-val="{{ pago.monto }}">{{ pago.moneda }} {{ pago.monto|number_format(2, '.', ',') }}</dd>

              <dt class="col-6 text-muted">Total aplicado</dt>
              <dd class="col-6 text-end text-primary fw-bold" id="total-aplicado">{{ pago.moneda }} {{ sumAplicado|number_format(2, '.', ',') }}</dd>

              <dt class="col-6 text-muted">Pendiente</dt>
              <dd class="col-6 text-end fw-semibold" id="monto-pendiente">{{ pago.moneda }} {{ (pago.monto - sumAplicado)|number_format(2, '.', ',') }}</dd>

              <dt class="col-6 text-muted">Dif. cambiario</dt>
              <dd class="col-6 text-end text-danger">–</dd>
            </dl>
            <div class="mt-3">
              <button class="btn btn-soft-primary w-100 mb-2" type="submit" id="btn-guardar">Guardar aplicación</button>
              <a class="btn btn-outline-secondary w-100" href="{{ path('pago_index') }}">Cancelar</a>
            </div>
          </div>
        </div>
      </div>
    </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');
          btnGuardar.disabled = true;
        } else {
          montoPendienteEl.classList.remove('text-danger');
          btnGuardar.disabled = false;
        }
      }

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

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