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

{% block content_header %}
  <div class="md:flex md:items-center 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">{{ title }}</h2>
      <p class="text-sm text-secondary-500">Pago PAY-{{ '%05d'|format(pago.id) }} · {{ pago.proveedor.razonSocial }}</p>
    </div>
  </div>
{% endblock %}

{% block content %}
  <section class="bg-white rounded-lg border border-secondary-200 shadow-sm">
    <form method="post" action="{{ action }}" class="p-6 grid grid-cols-1 gap-5 md:grid-cols-2">
      <input type="hidden" name="_token" value="{{ csrf_token(csrf_id) }}">
      <div>
        <label class="block text-sm font-medium text-secondary-700 mb-1">Cuenta origen</label>
        <div class="rounded-md border border-secondary-200 bg-secondary-50 px-3 py-2 text-sm text-secondary-700">
          {{ pago.cuentaBancaria ? pago.cuentaBancaria.banco.nombre ~ ' · ' ~ pago.cuentaBancaria.numero : 'Sin cuenta' }}
        </div>
      </div>
      <div>
        <label for="referencia" class="block text-sm font-medium text-secondary-700 mb-1">Referencia</label>
        <input id="referencia" name="referencia" required value="{{ transferencia ? transferencia.referencia : pago.referencia }}" class="w-full rounded-md border border-secondary-300 px-3 py-2 text-sm focus:border-primary-500 focus:ring-primary-500">
      </div>
      <div>
        <label for="fecha_transferencia" class="block text-sm font-medium text-secondary-700 mb-1">Fecha</label>
        <input id="fecha_transferencia" name="fecha_transferencia" type="date" required value="{{ transferencia ? transferencia.fechaTransferencia|date('Y-m-d') : pago.fechaPago|date('Y-m-d') }}" class="w-full rounded-md border border-secondary-300 px-3 py-2 text-sm focus:border-primary-500 focus:ring-primary-500">
      </div>
      <div>
        <label for="monto" class="block text-sm font-medium text-secondary-700 mb-1">Monto</label>
        <input id="monto" name="monto" type="number" step="0.01" min="0.01" required value="{{ transferencia ? transferencia.monto : pago.totalPagado }}" class="w-full rounded-md border border-secondary-300 px-3 py-2 text-sm focus:border-primary-500 focus:ring-primary-500">
      </div>
      <div>
        <label for="banco_destino" class="block text-sm font-medium text-secondary-700 mb-1">Banco destino</label>
        <input id="banco_destino" name="banco_destino" value="{{ transferencia ? transferencia.bancoDestino : '' }}" class="w-full rounded-md border border-secondary-300 px-3 py-2 text-sm focus:border-primary-500 focus:ring-primary-500">
      </div>
      <div>
        <label for="cuenta_destino" class="block text-sm font-medium text-secondary-700 mb-1">Cuenta destino</label>
        <input id="cuenta_destino" name="cuenta_destino" value="{{ transferencia ? transferencia.cuentaDestino : '' }}" class="w-full rounded-md border border-secondary-300 px-3 py-2 text-sm focus:border-primary-500 focus:ring-primary-500">
      </div>
      <div class="md:col-span-2 flex justify-end gap-2 border-t border-secondary-200 pt-5">
        <a href="{{ transferencia ? path('pago_transferencia_show', {id: transferencia.id}) : path('pago_index') }}" class="rounded-md border border-secondary-300 px-4 py-2 text-sm font-medium text-secondary-700 hover:bg-secondary-50">Cancelar</a>
        <button class="rounded-md bg-primary-600 px-4 py-2 text-sm font-medium text-white hover:bg-primary-700">Guardar</button>
      </div>
    </form>
  </section>
{% endblock %}