{% extends reportShell|default('base.html.twig') %}
{% block title %}{{ 'report.supplier_summary'|trans }}{% endblock %}
{% block page_title %}{{ 'report.supplier_summary'|trans }}{% endblock %}

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

{% block breadcrumb %}
  <nav class="flex no-print" aria-label="Breadcrumb">
    <ol class="flex flex-wrap items-center gap-2 text-sm">
      <li><a href="{{ path('home') }}" class="text-secondary-500 hover:text-secondary-700">Inicio</a></li><li class="text-secondary-300" aria-hidden="true">/</li>
      <li class="text-secondary-500">Reportes</li><li class="text-secondary-300" aria-hidden="true">/</li>
      <li class="text-secondary-700" aria-current="page">Resumen por proveedor</li>
    </ol>
  </nav>
{% endblock %}

{% block report_title %}{{ 'report.supplier_summary'|trans }}{% endblock %}
{% block report_subtitle %}Consolidado de cargos, abonos y saldo pendiente{% endblock %}

{% block content %}
  {% set isExportView = reportShell|default('base.html.twig') != 'base.html.twig' %}
  {% set exportQuery = {} %}
  <div class="{{ isExportView ? 'report-stack report-stack--export' : 'min-w-0 space-y-6' }}">
    {% if not isExportView %}
      <section class="page-header">
        <div><p class="text-xs font-semibold uppercase text-primary-600">{{ 'menu.reportes'|trans }}</p><h2 class="page-title">{{ 'report.supplier_summary'|trans }}</h2><p class="page-subtitle">Consolidado de cargos, abonos y saldo pendiente por proveedor y moneda.</p></div>
        <div class="page-actions">{% include 'reporte/_export_menu.html.twig' with {id: 'supplier-summary-export-menu', routeName: 'rep_resumen_prov', exportQuery: exportQuery} only %}</div>
      </section>
    {% else %}
      <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" rel="noopener" href="{{ path('rep_resumen_prov', {export: 'print'}) }}">Imprimir</a>
      </div></div>
    {% endif %}

    <section class="{{ isExportView ? 'report-grid' : 'grid gap-4 sm:grid-cols-2 xl:grid-cols-3' }}" aria-label="Resumen del reporte">
      <article class="{{ isExportView ? 'report-card' : 'metric-card' }}"><span class="{{ isExportView ? 'report-card__label' : 'metric-label block' }}">Proveedores con saldo</span><strong class="{{ isExportView ? 'report-card__value' : 'metric-value block' }}">{{ resumen|length }}</strong></article>
      {% for total in totalesMoneda %}
        <article class="{{ isExportView ? 'report-card' : 'metric-card min-w-0' }}">
          <span class="{{ isExportView ? 'report-card__label' : 'metric-label block' }}">Saldo total {{ total.moneda }}</span>
          <strong class="{{ isExportView ? 'report-card__value' : 'metric-value block break-words text-xl sm:text-2xl' }}">{{ total.moneda }} {{ total.saldo|number_format(2, '.', ',') }}</strong>
          <p class="{{ isExportView ? 'report-muted' : 'mt-2 text-xs leading-5 text-secondary-500' }}">Cargos {{ total.moneda }} {{ total.cargos|number_format(2, '.', ',') }} · Abonos {{ total.moneda }} {{ total.abonos|number_format(2, '.', ',') }}</p>
        </article>
      {% endfor %}
    </section>

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

{% block report_body %}
  {% set isExportView = reportShell|default('base.html.twig') != 'base.html.twig' %}
  <div class="{{ isExportView ? 'report-table-wrap' : 'table-responsive' }}" data-table-pager data-page-size="10" data-page-options="10,20,30,50,all">
    <table class="{{ isExportView ? 'report-table report-table--dense' : 'table table-to-card' }}">
      <caption class="sr-only">Saldos consolidados por proveedor</caption>
      <thead><tr><th scope="col">Proveedor</th><th scope="col">Moneda</th><th scope="col" class="text-right">Cargos</th><th scope="col" class="text-right">Abonos</th><th scope="col" class="text-right">Saldo</th></tr></thead>
      <tbody>
        {% for row in resumen %}
          <tr>
            <td data-label="Proveedor"><span class="block max-w-sm truncate" title="{{ row.proveedor }}">{{ row.proveedor }}</span></td>
            <td data-label="Moneda" class="whitespace-nowrap">{{ row.moneda }}</td>
            <td data-label="Cargos" class="text-right whitespace-nowrap">{{ row.cargos }}</td>
            <td data-label="Abonos" class="text-right whitespace-nowrap">{{ row.abonos }}</td>
            <td data-label="Saldo" class="text-right whitespace-nowrap font-semibold">{{ row.saldo }}</td>
          </tr>
        {% else %}
          <tr><td colspan="5" data-label="" class="{{ isExportView ? 'report-empty' : 'table-card-state text-center max-sm:!block' }}"><div class="{{ isExportView ? '' : 'empty-state py-8' }}"><p class="{{ isExportView ? '' : 'empty-state-title' }}">No hay datos para mostrar.</p>{% if not isExportView %}<p class="empty-state-copy">Los proveedores con saldo aparecerán en este reporte.</p>{% endif %}</div></td></tr>
        {% endfor %}
      </tbody>
      {% if totalesMoneda|length > 0 %}
        <tfoot class="{{ not isExportView ? 'hidden sm:table-footer-group' : '' }}">{% for total in totalesMoneda %}<tr><td data-label="Total">Total {{ total.moneda }}</td><td data-label="Moneda">{{ total.moneda }}</td><td data-label="Cargos" class="text-right">{{ total.moneda }} {{ total.cargos|number_format(2, '.', ',') }}</td><td data-label="Abonos" class="text-right">{{ total.moneda }} {{ total.abonos|number_format(2, '.', ',') }}</td><td data-label="Saldo" class="text-right">{{ total.moneda }} {{ total.saldo|number_format(2, '.', ',') }}</td></tr>{% endfor %}</tfoot>
      {% endif %}
    </table>
  </div>
{% endblock %}