{% extends reportShell|default('base.html.twig') %}
{% block title %}Pagos y aplicaciones{% endblock %}
{% block page_title %}Pagos y aplicaciones{% endblock %}

{% block stylesheets %}
  {% if reportShell|default('base.html.twig') == 'base.html.twig' %}
    {{ parent() }}
  {% endif %}
  {% include 'reporte/_styles.html.twig' %}
{% endblock %}

{% block breadcrumb %}
  <nav class="flex no-print" aria-label="Breadcrumb">
    <ol class="flex items-center space-x-4">
      <li><a href="{{ path('home') }}" class="text-secondary-500 hover:text-secondary-700">Inicio</a></li>
      <li class="text-secondary-300">/</li>
      <li class="text-secondary-500">Reportes</li>
      <li class="text-secondary-300">/</li>
      <li class="text-secondary-500">Pagos y aplicaciones</li>
    </ol>
  </nav>
{% endblock %}

{% block report_title %}Pagos y aplicaciones{% endblock %}
{% block report_subtitle %}Periodo {{ filtros.fecha_desde|date('d/m/Y') }} al {{ filtros.fecha_hasta|date('d/m/Y') }}{% endblock %}

{% block content %}
  {% set isExportView = reportShell|default('base.html.twig') != 'base.html.twig' %}
  {% set exportQuery = {'proveedor_id': filtros.proveedor_id, 'fecha_desde': filtros.fecha_desde, 'fecha_hasta': filtros.fecha_hasta} %}

  <div class="{{ isExportView ? 'report-stack report-stack--export' : 'report-shell report-stack' }}">
    <div class="report-panel no-print">
      <form method="get" class="report-form-grid">
        <div class="report-field">
          <label class="report-label" for="proveedor_id">Proveedor</label>
          <select class="report-select" id="proveedor_id" name="proveedor_id">
            <option value="">Todos los proveedores</option>
            {% for proveedor in proveedores %}
              <option value="{{ proveedor.id }}" {{ filtros.proveedor_id == proveedor.id ? 'selected' : '' }}>{{ proveedor.razonSocial }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="report-field report-field--sm">
          <label class="report-label" for="fecha_desde">Desde</label>
          <input class="report-input" type="date" id="fecha_desde" name="fecha_desde" value="{{ filtros.fecha_desde }}">
        </div>
        <div class="report-field report-field--sm">
          <label class="report-label" for="fecha_hasta">Hasta</label>
          <input class="report-input" type="date" id="fecha_hasta" name="fecha_hasta" value="{{ filtros.fecha_hasta }}">
        </div>
        <div class="report-actions">
          <button class="report-button report-button--primary" type="submit">Actualizar</button>
          <a class="report-link-button" href="{{ path('rep_resumen_prov_pagos', exportQuery|merge({export: 'excel'})) }}">Excel</a>
          <a class="report-link-button" href="{{ path('rep_resumen_prov_pagos', exportQuery|merge({export: 'excel_raw'})) }}">Excel datos</a>
          <a class="report-link-button" href="{{ path('rep_resumen_prov_pagos', exportQuery|merge({export: 'pdf'})) }}">PDF</a>
          <a class="report-link-button" target="_blank" href="{{ path('rep_resumen_prov_pagos', exportQuery|merge({export: 'print'})) }}">Imprimir</a>
        </div>
      </form>
    </div>

    <div class="report-grid">
      <div class="report-card">
        <span class="report-card__label">Pagos</span>
        <span class="report-card__value">{{ stats.pagos }}</span>
      </div>
      <div class="report-card">
        <span class="report-card__label">Aplicaciones</span>
        <span class="report-card__value">{{ stats.aplicaciones }}</span>
      </div>
      {% for total in totalesMoneda %}
        <div class="report-card">
          <span class="report-card__label">{{ total.moneda }}</span>
          <span class="report-card__value">{{ total.moneda }} {{ total.total|number_format(2, '.', ',') }}</span>
          <div class="report-muted">Aplicado {{ total.moneda }} {{ total.aplicado|number_format(2, '.', ',') }} | Disponible {{ total.moneda }} {{ total.disponible|number_format(2, '.', ',') }}</div>
        </div>
      {% endfor %}
    </div>

    <div class="report-panel report-panel--table">
      {{ block('report_body') }}
    </div>
  </div>
{% endblock %}

{% block report_body %}
  <div class="report-table-wrap">
    <table class="report-table report-table--dense">
      <thead>
        <tr>
          <th>Pago</th>
          <th>Fecha</th>
          <th>Proveedor</th>
          <th>Forma</th>
          <th>Referencia</th>
          <th class="text-center">Moneda</th>
          <th class="text-right">Total</th>
          <th class="text-right">Aplicado</th>
          <th class="text-right">Disponible</th>
          <th>Documentos</th>
        </tr>
      </thead>
      <tbody>
        {% for pago in pagos %}
          <tr>
            <td class="report-cell--nowrap">{{ pago.codigo }}</td>
            <td class="report-cell--nowrap">{{ pago.fecha }}</td>
            <td>{{ pago.proveedor }}</td>
            <td>{{ pago.forma }}</td>
            <td class="report-cell--nowrap">{{ pago.referencia }}</td>
            <td class="text-center report-cell--nowrap">{{ pago.moneda }}</td>
            <td class="text-right report-cell--nowrap">{{ pago.moneda }} {{ pago.total|number_format(2, '.', ',') }}</td>
            <td class="text-right report-cell--nowrap">{{ pago.moneda }} {{ pago.aplicado|number_format(2, '.', ',') }}</td>
            <td class="text-right report-cell--nowrap">{{ pago.moneda }} {{ pago.disponible|number_format(2, '.', ',') }}</td>
            <td>
              {% if pago.documentos %}
                <ul class="report-inline-list">
                  {% for documento in pago.documentos %}
                    <li>{{ documento }}</li>
                  {% endfor %}
                </ul>
              {% else %}
                <span class="report-muted">Sin aplicar</span>
              {% endif %}
            </td>
          </tr>
        {% else %}
          <tr>
            <td colspan="10" class="report-empty">No hay pagos para los filtros seleccionados.</td>
          </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
{% endblock %}