{% extends 'base.html.twig' %}
{% block title %}Transferencia {{ transferencia.referencia }}{% endblock %}

{% block content_header %}
  <div class="md:flex md:items-start md:justify-between mb-6">
    <div>
      <a href="{{ path('pago_index') }}" class="text-sm text-primary-700 hover:underline">Volver a pagos</a>
      <h2 class="mt-2 text-2xl font-bold text-secondary-900">Transferencia {{ transferencia.referencia }}</h2>
      <p class="text-sm text-secondary-500">{{ transferencia.moneda }} {{ transferencia.monto|number_format(2, '.', ',') }} · {{ transferencia.estado }}</p>
    </div>
    <div class="mt-4 flex flex-wrap gap-2 md:mt-0">
      {% if transferencia.estado not in ['anulada', 'sincronizada'] %}
        <a href="{{ path('pago_transferencia_edit', {id: transferencia.id}) }}" class="rounded-md border border-secondary-300 px-4 py-2 text-sm font-medium text-secondary-700 hover:bg-secondary-50">Editar</a>
      {% endif %}
      {% if transferencia.estado != 'anulada' %}
        <form method="post" action="{{ path('pago_transferencia_sync', {id: transferencia.id}) }}">
          <input type="hidden" name="_token" value="{{ csrf_token('pago_transferencia_sync_' ~ transferencia.id) }}">
          <button class="rounded-md border border-primary-300 px-4 py-2 text-sm font-medium text-primary-700 hover:bg-primary-50">Sincronizar nube</button>
        </form>
        <form method="post" action="{{ path('pago_transferencia_sync', {id: transferencia.id}) }}">
          <input type="hidden" name="_token" value="{{ csrf_token('pago_transferencia_sync_' ~ transferencia.id) }}">
          <input type="hidden" name="retry" value="1">
          <button class="rounded-md border border-amber-300 px-4 py-2 text-sm font-medium text-amber-700 hover:bg-amber-50">Reintentar sincronizacion</button>
        </form>
      {% endif %}
    </div>
  </div>
{% endblock %}

{% block content %}
  <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
    <section class="bg-white rounded-lg border border-secondary-200 p-5 shadow-sm lg:col-span-2">
      <dl class="grid grid-cols-1 gap-4 text-sm md:grid-cols-2">
        <div><dt class="font-semibold text-secondary-700">Estado</dt><dd>{{ transferencia.estado }}</dd></div>
        <div><dt class="font-semibold text-secondary-700">Fecha</dt><dd>{{ transferencia.fechaTransferencia|date('Y-m-d') }}</dd></div>
        <div><dt class="font-semibold text-secondary-700">Pago</dt><dd>PAY-{{ '%05d'|format(transferencia.pago.id) }}</dd></div>
        <div>
          <dt class="font-semibold text-secondary-700">Voucher</dt>
          <dd class="mt-1">{% include 'components/_voucher_widget.html.twig' with {mode: 'compact', voucher: transferencia.voucher, pagoId: transferencia.pago.id} only %}</dd>
        </div>
        <div><dt class="font-semibold text-secondary-700">Banco origen</dt><dd>{{ transferencia.bancoOrigen ? transferencia.bancoOrigen.nombre : '-' }}</dd></div>
        <div><dt class="font-semibold text-secondary-700">Cuenta origen</dt><dd>{{ transferencia.cuentaBancariaOrigen.numero }}</dd></div>
        <div><dt class="font-semibold text-secondary-700">Banco destino</dt><dd>{{ transferencia.bancoDestino ?? '-' }}</dd></div>
        <div><dt class="font-semibold text-secondary-700">Cuenta destino</dt><dd>{{ transferencia.cuentaDestino ?? '-' }}</dd></div>
      </dl>
    </section>
    <section class="bg-white rounded-lg border border-secondary-200 p-5 shadow-sm">
      {% if transferencia.estado != 'anulada' %}
        <form method="post" action="{{ path('pago_transferencia_void', {id: transferencia.id}) }}" class="space-y-2">
          <input type="hidden" name="_token" value="{{ csrf_token('pago_transferencia_void_' ~ transferencia.id) }}">
          <label class="block text-sm font-medium text-secondary-700">Motivo de anulacion</label>
          <textarea name="motivo" required rows="3" class="w-full rounded-md border border-secondary-300 px-3 py-2 text-sm"></textarea>
          <button class="w-full rounded-md border border-red-300 px-4 py-2 text-sm font-medium text-red-700 hover:bg-red-50">Anular transferencia</button>
        </form>
      {% else %}
        <p class="text-sm text-secondary-500">Transferencia anulada.</p>
      {% endif %}
    </section>
  </div>
{% endblock %}