{% extends reportShell|default('base.html.twig') %}
{% block title %}{{ 'report.aging'|trans }}{% endblock %}
{% block page_title %}{{ 'report.aging'|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">Antigüedad de saldos</li>
    </ol>
  </nav>
{% endblock %}

{% block report_title %}{{ 'report.aging'|trans }}{% endblock %}
{% block report_subtitle %}Al {{ filtros.fechas.hasta|date('d/m/Y') }}{% endblock %}

{% block content %}
  {% set isExportView = reportShell|default('base.html.twig') != 'base.html.twig' %}
  {% set exportQuery = {'hasta': filtros.fechas.hasta} %}
  {% if filtros.proveedor_id %}{% set exportQuery = exportQuery|merge({'proveedor_id': filtros.proveedor_id}) %}{% endif %}

  <div class="{{ isExportView ? 'report-stack report-stack--export' : 'min-w-0 space-y-6' }}">
    {% if not isExportView %}
      <section class="page-header">
        <div class="min-w-0">
          <p class="text-xs font-semibold uppercase text-primary-600">{{ 'menu.reportes'|trans }}</p>
          <h2 class="page-title">{{ 'report.aging'|trans }}</h2>
          <p class="page-subtitle">Distribución de saldos pendientes por rango de vencimiento al {{ filtros.fechas.hasta|date('d/m/Y') }}.</p>
        </div>
      </section>
    {% endif %}

    <section class="{{ isExportView ? 'report-panel no-print' : 'section-card report-filter-card' }}">
      {% if not isExportView %}
        <div class="section-card-header">
          <h3 class="section-card-title">{{ 'report.filters'|trans }}</h3>
          <p class="section-card-subtitle">Ajusta el proveedor o la fecha de corte y actualiza los resultados.</p>
        </div>
      {% endif %}
      <form method="get" class="{{ isExportView ? 'report-form-grid' : 'grid gap-4 p-4 md:grid-cols-2 md:p-5 xl:grid-cols-[minmax(240px,1fr)_180px_auto] xl:items-end' }}">
        <div class="{{ isExportView ? 'report-field' : '' }}">
          <label class="{{ isExportView ? 'report-label' : 'form-label' }}" for="proveedor_id">Proveedor</label>
          <select class="{{ isExportView ? 'report-select' : 'form-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="{{ isExportView ? 'report-field report-field--sm' : '' }}">
          <label class="{{ isExportView ? 'report-label' : 'form-label' }}" for="hasta">Fecha de corte</label>
          <input class="{{ isExportView ? 'report-input' : 'form-control' }}" type="date" id="hasta" name="hasta" value="{{ filtros.fechas.hasta }}">
        </div>
        <div class="{{ isExportView ? 'report-actions' : 'flex flex-wrap gap-2 md:col-span-2 xl:col-span-1' }}">
          <button class="{{ isExportView ? 'report-button report-button--primary' : 'btn btn-primary flex-1 xl:flex-none' }}" type="submit">{{ 'report.update'|trans }}</button>
          {% if isExportView %}
            <a class="report-link-button" href="{{ path('rep_antiguedad', exportQuery|merge({export: 'excel'})) }}">Excel</a>
            <a class="report-link-button" href="{{ path('rep_antiguedad', exportQuery|merge({export: 'excel_raw'})) }}">Excel datos</a>
            <a class="report-link-button" href="{{ path('rep_antiguedad', exportQuery|merge({export: 'pdf'})) }}">PDF</a>
            <a class="report-link-button" target="_blank" rel="noopener" href="{{ path('rep_antiguedad', exportQuery|merge({export: 'print'})) }}">Imprimir</a>
          {% else %}
            {% include 'reporte/_export_menu.html.twig' with {id: 'aging-export-menu', routeName: 'rep_antiguedad', exportQuery: exportQuery} only %}
          {% endif %}
        </div>
      </form>
    </section>

    <section class="{{ isExportView ? 'report-grid' : 'grid grid-cols-2 gap-4 xl:grid-cols-4' }}" aria-label="Resumen del reporte">
      {% for metric in [
        {label: 'Documentos', value: stats.documentos_total|default(0)},
        {label: 'Documentos vencidos', value: stats.documentos_vencidos|default(0)},
        {label: 'Saldo corriente', value: stats.total_corriente|default(0)|number_format(2, '.', ',')},
        {label: 'Saldo vencido', value: stats.total_vencido|default(0)|number_format(2, '.', ',')}
      ] %}
        <article class="{{ isExportView ? 'report-card' : 'metric-card min-w-0' }}">
          <span class="{{ isExportView ? 'report-card__label' : 'metric-label block' }}">{{ metric.label }}</span>
          <strong class="{{ isExportView ? 'report-card__value' : 'metric-value block break-words text-xl sm:text-2xl' }}">{{ metric.value }}</strong>
        </article>
      {% endfor %}
    </section>

    {% if not isExportView and reporte|length > 0 %}
      <section class="section-card" aria-labelledby="aging-totals-title">
        <div class="section-card-header flex flex-wrap items-center justify-between gap-3">
          <div>
            <h3 id="aging-totals-title" class="section-card-title">Totales generales</h3>
            <p class="section-card-subtitle">Saldo consolidado y distribución por antigüedad.</p>
          </div>
          <strong class="text-xl font-semibold text-secondary-950">{{ grandTotal.total|number_format(2, '.', ',') }}</strong>
        </div>
        <dl class="grid grid-cols-2 gap-3 p-4 text-sm sm:grid-cols-5 sm:p-5">
          {% for total in [
            {label: 'Corriente', value: grandTotal.corriente},
            {label: '1 a 30', value: grandTotal.d01_30},
            {label: '31 a 60', value: grandTotal.d31_60},
            {label: '61 a 90', value: grandTotal.d61_90},
            {label: '91 o más', value: grandTotal.d91_mas}
          ] %}
            <div class="rounded-lg bg-secondary-50 p-3">
              <dt class="text-xs font-semibold uppercase text-secondary-500">{{ total.label }}</dt>
              <dd class="mt-1 break-words font-semibold text-secondary-900">{{ total.value|number_format(2, '.', ',') }}</dd>
            </div>
          {% endfor %}
        </dl>
      </section>
    {% endif %}

    {% if not isExportView %}
      <section class="space-y-3 md:hidden" aria-label="Resumen por proveedor">
        {% for grupo in reporte %}
          <details class="section-card group">
            <summary class="flex cursor-pointer list-none items-center justify-between gap-3 px-4 py-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500">
              <span class="min-w-0">
                <strong class="block truncate text-sm text-secondary-950" title="{{ grupo.proveedor }}">{{ grupo.proveedor }}</strong>
                <span class="mt-1 block text-xs text-secondary-500">{{ grupo.moneda }} · {{ grupo.documentos|length }} documentos</span>
              </span>
              <span class="flex flex-none items-center gap-2">
                <strong class="text-sm text-secondary-900">{{ grupo.subtotal.total|number_format(2, '.', ',') }}</strong>
                <svg class="h-4 w-4 text-secondary-500 transition-transform group-open:rotate-180 motion-reduce:transition-none" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6 9 6 6 6-6" /></svg>
              </span>
            </summary>
            <dl class="grid grid-cols-2 gap-2 border-t border-secondary-100 p-4 text-sm">
              {% for subtotal in [
                {label: 'Corriente', value: grupo.subtotal.corriente},
                {label: '1 a 30', value: grupo.subtotal.d01_30},
                {label: '31 a 60', value: grupo.subtotal.d31_60},
                {label: '61 a 90', value: grupo.subtotal.d61_90},
                {label: '91 o más', value: grupo.subtotal.d91_mas}
              ] %}
                <div class="rounded-lg bg-secondary-50 p-3">
                  <dt class="text-xs text-secondary-500">{{ subtotal.label }}</dt>
                  <dd class="mt-1 font-semibold text-secondary-900">{{ subtotal.value|number_format(2, '.', ',') }}</dd>
                </div>
              {% endfor %}
            </dl>
          </details>
        {% else %}
          <div class="empty-state py-8" role="status">
            <p class="empty-state-title">No hay saldos pendientes</p>
            <p class="empty-state-copy">No se encontraron saldos para la fecha y proveedor seleccionados.</p>
          </div>
        {% endfor %}
      </section>
    {% endif %}

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

{% block report_body %}
  {% set isExportView = reportShell|default('base.html.twig') != 'base.html.twig' %}
  <div>
    <div class="{{ isExportView ? 'report-table-wrap' : 'table-responsive max-h-[72vh]' }}" data-table-pager data-page-size="10" data-page-options="10,20,30,50,all" {% if not isExportView %}role="region" aria-label="Detalle de antigüedad de saldos" tabindex="0"{% endif %}>
      <table class="{{ isExportView ? 'report-table report-table--dense' : 'table min-w-[1080px]' }}">
        <caption class="sr-only">Antigüedad de saldos por proveedor y documento</caption>
        <thead>
          <tr>
            <th scope="col" class="{{ not isExportView ? 'sticky left-0 z-20 bg-secondary-50' : '' }}">Proveedor / Moneda</th>
            <th scope="col">Referencia</th>
            <th scope="col">Documento</th>
            <th scope="col">F. emisión</th>
            <th scope="col">F. vencimiento</th>
            <th scope="col" class="text-right">Saldo</th>
            <th scope="col" class="text-right">Corriente</th>
            <th scope="col" class="text-right">1 a 30</th>
            <th scope="col" class="text-right">31 a 60</th>
            <th scope="col" class="text-right">61 a 90</th>
            <th scope="col" class="text-right">91 o más</th>
          </tr>
        </thead>
        {% if reporte|length > 0 %}
          {% for grupo in reporte %}
            <tbody data-page-item>
              <tr class="{{ isExportView ? 'is-group' : 'bg-secondary-50' }}">
                <th scope="rowgroup" colspan="11" class="text-left font-semibold text-secondary-900">{{ grupo.proveedor }} | {{ grupo.moneda }}</th>
              </tr>
              {% for doc in grupo.documentos %}
                <tr>
                  <td class="{{ isExportView ? '' : 'sticky left-0 bg-white' }}" title="{{ grupo.proveedor }}">{{ grupo.proveedor }}</td>
                  <td class="{{ isExportView ? 'report-cell--nowrap' : 'whitespace-nowrap' }}">{{ doc.referencia }}</td>
                  <td class="{{ isExportView ? 'report-cell--nowrap' : 'whitespace-nowrap' }}">{{ doc.documento }}</td>
                  <td class="{{ isExportView ? 'report-cell--nowrap' : 'whitespace-nowrap' }}">{{ doc.f_aplicacion }}</td>
                  <td class="{{ isExportView ? 'report-cell--nowrap' : 'whitespace-nowrap' }}">{{ doc.f_vencimiento }}</td>
                  <td class="text-right whitespace-nowrap">{{ doc.saldo|number_format(2, '.', ',') }}</td>
                  <td class="text-right whitespace-nowrap">{{ doc.corriente > 0 ? doc.corriente|number_format(2, '.', ',') : '-' }}</td>
                  <td class="text-right whitespace-nowrap">{{ doc.d01_30 > 0 ? doc.d01_30|number_format(2, '.', ',') : '-' }}</td>
                  <td class="text-right whitespace-nowrap">{{ doc.d31_60 > 0 ? doc.d31_60|number_format(2, '.', ',') : '-' }}</td>
                  <td class="text-right whitespace-nowrap">{{ doc.d61_90 > 0 ? doc.d61_90|number_format(2, '.', ',') : '-' }}</td>
                  <td class="text-right whitespace-nowrap">{{ doc.d91_mas > 0 ? doc.d91_mas|number_format(2, '.', ',') : '-' }}</td>
                </tr>
              {% endfor %}
              <tr class="{{ isExportView ? 'is-subtotal' : 'bg-secondary-50 font-semibold' }}">
                <td colspan="5" class="text-right">Subtotal {{ grupo.proveedor }} | {{ grupo.moneda }}</td>
                <td class="text-right">{{ grupo.subtotal.total|number_format(2, '.', ',') }}</td>
                <td class="text-right">{{ grupo.subtotal.corriente|number_format(2, '.', ',') }}</td>
                <td class="text-right">{{ grupo.subtotal.d01_30|number_format(2, '.', ',') }}</td>
                <td class="text-right">{{ grupo.subtotal.d31_60|number_format(2, '.', ',') }}</td>
                <td class="text-right">{{ grupo.subtotal.d61_90|number_format(2, '.', ',') }}</td>
                <td class="text-right">{{ grupo.subtotal.d91_mas|number_format(2, '.', ',') }}</td>
              </tr>
            </tbody>
          {% endfor %}
        {% else %}
          <tbody><tr data-table-empty><td colspan="11" class="{{ isExportView ? 'report-empty' : 'table-card-state text-center' }}">No hay saldos pendientes a la fecha seleccionada.</td></tr></tbody>
        {% endif %}
        {% if reporte|length > 0 %}
          <tfoot>
            <tr>
              <td colspan="5" class="text-right">Total general</td>
              <td class="text-right">{{ grandTotal.total|number_format(2, '.', ',') }}</td>
              <td class="text-right">{{ grandTotal.corriente|number_format(2, '.', ',') }}</td>
              <td class="text-right">{{ grandTotal.d01_30|number_format(2, '.', ',') }}</td>
              <td class="text-right">{{ grandTotal.d31_60|number_format(2, '.', ',') }}</td>
              <td class="text-right">{{ grandTotal.d61_90|number_format(2, '.', ',') }}</td>
              <td class="text-right">{{ grandTotal.d91_mas|number_format(2, '.', ',') }}</td>
            </tr>
          </tfoot>
        {% endif %}
      </table>
    </div>
  </div>
{% endblock %}