{% extends 'base.html.twig' %}
{% block title %}Cheque {{ cheque.numeroCheque }}{% 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">Cheque {{ cheque.numeroCheque }}</h2>
      <p class="text-sm text-secondary-500">{{ cheque.beneficiario }} · {{ cheque.moneda }} {{ cheque.monto|number_format(2, '.', ',') }}</p>
    </div>
    <div class="mt-4 flex flex-wrap gap-2 md:mt-0">
      {% if cheque.estado not in ['anulado', 'entregado'] %}
        <a href="{{ path('pago_cheque_edit', {id: cheque.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 %}
      <form method="post" action="{{ path('pago_cheque_print', {id: cheque.id}) }}">
        <input type="hidden" name="_token" value="{{ csrf_token('pago_cheque_print_' ~ cheque.id) }}">
        <button class="rounded-md border border-primary-300 px-4 py-2 text-sm font-medium text-primary-700 hover:bg-primary-50" {% if cheque.estado == 'anulado' %}disabled{% endif %}>{{ historial|length > 0 ? 'Reimprimir cheque' : 'Imprimir cheque' }}</button>
      </form>
      {% if cheque.estado != 'entregado' and cheque.estado != 'anulado' %}
        <form method="post" action="{{ path('pago_cheque_deliver', {id: cheque.id}) }}">
          <input type="hidden" name="_token" value="{{ csrf_token('pago_cheque_deliver_' ~ cheque.id) }}">
          <button class="rounded-md border border-emerald-300 px-4 py-2 text-sm font-medium text-emerald-700 hover:bg-emerald-50">Marcar entregado</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">
      <dl class="space-y-3 text-sm">
        <div><dt class="font-semibold text-secondary-700">Estado</dt><dd>{{ cheque.estado }}</dd></div>
        <div><dt class="font-semibold text-secondary-700">Fecha</dt><dd>{{ cheque.fechaEmision|date('Y-m-d') }}</dd></div>
        <div><dt class="font-semibold text-secondary-700">Pago</dt><dd>PAY-{{ '%05d'|format(cheque.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: cheque.voucher, pagoId: cheque.pago.id} only %}</dd>
        </div>
        <div><dt class="font-semibold text-secondary-700">Banco</dt><dd>{{ cheque.banco.nombre }}</dd></div>
        <div><dt class="font-semibold text-secondary-700">Cuenta</dt><dd>{{ cheque.cuentaBancaria.numero }}</dd></div>
      </dl>
      {% if cheque.estado != 'anulado' %}
        <form method="post" action="{{ path('pago_cheque_void', {id: cheque.id}) }}" class="mt-5 space-y-2">
          <input type="hidden" name="_token" value="{{ csrf_token('pago_cheque_void_' ~ cheque.id) }}">
          <label class="block text-sm font-medium text-secondary-700">Motivo de anulacion</label>
          <textarea name="motivo" required rows="2" 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 cheque</button>
        </form>
      {% endif %}
    </section>

    <section class="table-card lg:col-span-2">
      <div class="px-5 py-4 border-b border-secondary-200">
        <h3 class="text-base font-semibold text-secondary-900">Historial de impresion</h3>
      </div>
      <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-secondary-200">
          <thead class="bg-secondary-50">
            <tr>
              <th class="px-4 py-3 text-left text-xs font-medium uppercase text-secondary-500">Fecha</th>
              <th class="px-4 py-3 text-left text-xs font-medium uppercase text-secondary-500">Tipo</th>
              <th class="px-4 py-3 text-left text-xs font-medium uppercase text-secondary-500">Usuario</th>
              <th class="px-4 py-3 text-left text-xs font-medium uppercase text-secondary-500">IP</th>
              <th class="px-4 py-3 text-left text-xs font-medium uppercase text-secondary-500">Observacion</th>
            </tr>
          </thead>
          <tbody class="divide-y divide-secondary-200 bg-white">
            {% for item in historial %}
              <tr>
                <td class="px-4 py-3 text-sm text-secondary-700">{{ item.fecha|date('Y-m-d H:i') }}</td>
                <td class="px-4 py-3 text-sm text-secondary-700">{{ item.tipo }}</td>
                <td class="px-4 py-3 text-sm text-secondary-700">{{ item.usuario ? item.usuario.nombre : '-' }}</td>
                <td class="px-4 py-3 text-sm text-secondary-700">{{ item.ip ?? '-' }}</td>
                <td class="px-4 py-3 text-sm text-secondary-700">{{ item.observacion ?? '-' }}</td>
              </tr>
            {% else %}
              <tr><td colspan="5" class="px-4 py-8 text-center text-sm text-secondary-500">Sin impresiones registradas.</td></tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </section>
  </div>
{% endblock %}