{% extends reportShell|default('base.html.twig') %}
{% block title %}Resumen por proveedor{% endblock %}
{% block page_title %}Resumen por proveedor{% 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">Resumen por proveedor</li>
    </ol>
  </nav>
{% endblock %}

{% block report_title %}Resumen por proveedor{% endblock %}
{% block report_subtitle %}Consolidado de cargos, abonos y saldo pendiente{% endblock %}

{% block content %}
  {% set isExportView = reportShell|default('base.html.twig') != 'base.html.twig' %}
  <div class="{{ isExportView ? 'report-stack report-stack--export' : 'report-shell report-stack' }}">
    <div class="report-panel no-print">
      <div class="report-actions">
        <a class="report-link-button" href="{{ path('rep_resumen_prov', {export: 'excel'}) }}">Excel</a>
        <a class="report-link-button" href="{{ path('rep_resumen_prov', {export: 'excel_raw'}) }}">Excel datos</a>
        <a class="report-link-button" href="{{ path('rep_resumen_prov', {export: 'pdf'}) }}">PDF</a>
        <a class="report-link-button" target="_blank" href="{{ path('rep_resumen_prov', {export: 'print'}) }}">Imprimir</a>
      </div>
    </div>

    <div class="report-grid">
      <div class="report-card">
        <span class="report-card__label">Proveedores con saldo</span>
        <span class="report-card__value">{{ resumen|length }}</span>
      </div>
      {% for total in totalesMoneda %}
        <div class="report-card">
          <span class="report-card__label">Saldo total {{ total.moneda }}</span>
          <span class="report-card__value">{{ total.moneda }} {{ total.saldo|number_format(2, '.', ',') }}</span>
          <div class="report-muted">Cargos {{ total.moneda }} {{ total.cargos|number_format(2, '.', ',') }} | Abonos {{ total.moneda }} {{ total.abonos|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>Proveedor</th>
          <th>Moneda</th>
          <th class="text-right">Cargos</th>
          <th class="text-right">Abonos</th>
          <th class="text-right">Saldo</th>
        </tr>
      </thead>
      <tbody>
        {% for row in resumen %}
          <tr>
            <td>{{ row.proveedor }}</td>
            <td class="report-cell--nowrap">{{ row.moneda }}</td>
            <td class="text-right report-cell--nowrap">{{ row.cargos }}</td>
            <td class="text-right report-cell--nowrap">{{ row.abonos }}</td>
            <td class="text-right report-cell--nowrap">{{ row.saldo }}</td>
          </tr>
        {% else %}
          <tr>
            <td colspan="5" class="report-empty">No hay datos para mostrar.</td>
          </tr>
        {% endfor %}
      </tbody>
      {% if totalesMoneda|length > 0 %}
        <tfoot>
          {% for total in totalesMoneda %}
            <tr>
              <td>Total {{ total.moneda }}</td>
              <td>{{ total.moneda }}</td>
              <td class="text-right">{{ total.moneda }} {{ total.cargos|number_format(2, '.', ',') }}</td>
              <td class="text-right">{{ total.moneda }} {{ total.abonos|number_format(2, '.', ',') }}</td>
              <td class="text-right">{{ total.moneda }} {{ total.saldo|number_format(2, '.', ',') }}</td>
            </tr>
          {% endfor %}
        </tfoot>
      {% endif %}
    </table>
  </div>
{% endblock %}