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

{% block content_header %}
  <div class="page-header">
    <div>
      <nav class="flex items-center text-sm text-secondary-500" aria-label="Breadcrumb">
        <a href="{{ path('pago_index') }}" class="font-medium text-primary-700 hover:text-primary-800">Pagos</a>
        <span class="mx-2">/</span>
        <span>Voucher {{ voucher.numeroVoucher }}</span>
      </nav>
      <h2 class="page-title">Voucher {{ voucher.numeroVoucher }}</h2>
      <p class="page-subtitle">
        {{ voucher.proveedor.razonSocial }} &middot; {{ voucher.moneda }} {{ voucher.total|number_format(2, '.', ',') }}
      </p>
    </div>
    <div class="page-actions">
      <a href="{{ path('pago_index') }}" class="btn btn-secondary">Volver a pagos</a>
    </div>
  </div>
{% endblock %}

{% block content %}
  {% include 'components/_voucher_widget.html.twig' with {
    mode: 'full',
    voucher: voucher,
    voucherJobs: voucherJobs,
    cheque: cheque,
    transferencia: transferencia
  } only %}

  <section class="section-card mt-6">
    <div class="section-card-header">
      <div>
        <h3 class="section-card-title">Detalle del voucher</h3>
        <p class="section-card-subtitle">Documentos y montos incluidos en el comprobante.</p>
      </div>
      <span class="status-pill status-pill-muted">{{ voucher.detalles|length }} linea(s)</span>
    </div>
    <div class="section-card-body">
      <div class="overflow-x-auto">
        <table class="table-modern">
          <thead>
            <tr>
              <th>Documento</th>
              <th>Fecha</th>
              <th>Descripcion</th>
              <th class="text-right">Monto</th>
            </tr>
          </thead>
          <tbody>
            {% for detalle in voucher.detalles %}
              <tr>
                <td class="font-medium text-secondary-900">{{ detalle.serie ? detalle.serie ~ '-' : '' }}{{ detalle.numero }}</td>
                <td class="text-secondary-600">{{ detalle.fechaDocumento ? detalle.fechaDocumento|date('d/m/Y') : '-' }}</td>
                <td class="text-secondary-600">{{ detalle.descripcion }}</td>
                <td class="text-right font-semibold text-secondary-900">{{ voucher.moneda }} {{ detalle.monto|number_format(2, '.', ',') }}</td>
              </tr>
            {% else %}
              <tr>
                <td colspan="4" class="empty-state-inline">Sin lineas de voucher.</td>
              </tr>
            {% endfor %}
          </tbody>
          <tfoot>
            <tr>
              <td colspan="3" class="text-right font-semibold text-secondary-700">Total</td>
              <td class="text-right font-bold text-secondary-900">{{ voucher.moneda }} {{ voucher.total|number_format(2, '.', ',') }}</td>
            </tr>
          </tfoot>
        </table>
      </div>
    </div>
  </section>
{% endblock %}