{% extends reportShell|default('base.html.twig') %}
{% block title %}{{ 'report.pending_documents'|trans }}{% endblock %}
{% block page_title %}{{ 'report.pending_documents'|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">Documentos pendientes</li></ol></nav>{% endblock %}

{% block report_title %}{{ 'report.pending_documents'|trans }}{% endblock %}
{% block report_subtitle %}Corte al {{ filtros.fecha_corte|date('d/m/Y') }}{% endblock %}

{% block content %}
  {% set isExportView = reportShell|default('base.html.twig') != 'base.html.twig' %}
  {% set exportQuery = {'proveedor_id': filtros.proveedor_id, 'estado': filtros.estado, 'fecha_corte': filtros.fecha_corte} %}
  <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.pending_documents'|trans }}</h2><p class="page-subtitle">Revisa vencimientos, días de atraso y saldos abiertos a la fecha de corte.</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 proveedor, estado y fecha de corte.</p></div>{% endif %}
      <form method="get" class="{{ isExportView ? 'report-form-grid' : 'grid gap-4 p-4 md:grid-cols-2 xl:grid-cols-[minmax(240px,1fr)_180px_180px_auto] xl:items-end md:p-5' }}">
        <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="estado">Estado</label><select class="{{ isExportView ? 'report-select' : 'form-select' }}" id="estado" name="estado"><option value="todos" {{ filtros.estado == 'todos' ? 'selected' : '' }}>Todos</option><option value="vencidos" {{ filtros.estado == 'vencidos' ? 'selected' : '' }}>Vencidos</option><option value="por_vencer" {{ filtros.estado == 'por_vencer' ? 'selected' : '' }}>Por vencer</option><option value="corriente" {{ filtros.estado == 'corriente' ? 'selected' : '' }}>Corriente</option></select></div>
        <div class="{{ isExportView ? 'report-field report-field--sm' : '' }}"><label class="{{ isExportView ? 'report-label' : 'form-label' }}" for="fecha_corte">Fecha de corte</label><input class="{{ isExportView ? 'report-input' : 'form-control' }}" type="date" id="fecha_corte" name="fecha_corte" value="{{ filtros.fecha_corte }}"></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_estado_documentos', exportQuery|merge({export: 'excel'})) }}">Excel</a><a class="report-link-button" href="{{ path('rep_estado_documentos', exportQuery|merge({export: 'excel_raw'})) }}">Excel datos</a><a class="report-link-button" href="{{ path('rep_estado_documentos', exportQuery|merge({export: 'pdf'})) }}">PDF</a><a class="report-link-button" target="_blank" rel="noopener" href="{{ path('rep_estado_documentos', exportQuery|merge({export: 'print'})) }}">{{ 'button.print'|trans }}</a>{% else %}{% include 'reporte/_export_menu.html.twig' with {id: 'pending-documents-export-menu', routeName: 'rep_estado_documentos', 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}, {label: 'Vencidos', value: stats.vencidos}, {label: 'Por vencer', value: stats.por_vencer}] %}<article class="{{ isExportView ? 'report-card' : 'metric-card' }}"><span class="{{ isExportView ? 'report-card__label' : 'metric-label block' }}">{{ metric.label }}</span><strong class="{{ isExportView ? 'report-card__value' : 'metric-value block' }}">{{ metric.value }}</strong></article>{% endfor %}
      {% 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.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></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 max-h-[72vh]' }}" 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 md:min-w-[820px] xl:min-w-full' }}"><caption class="sr-only">Documentos pendientes y vencidos</caption>
      <thead><tr><th scope="col">Proveedor</th><th scope="col" class="{{ not isExportView ? 'hidden xl:table-cell' : '' }}">Tipo</th><th scope="col">Documento</th><th scope="col" class="{{ not isExportView ? 'hidden lg:table-cell' : '' }}">F. emisión</th><th scope="col">F. vencimiento</th><th scope="col" class="text-center">Días</th><th scope="col" class="{{ not isExportView ? 'hidden lg:table-cell' : '' }} text-center">Moneda</th><th scope="col" class="text-right">Total</th><th scope="col" class="text-right">Saldo</th><th scope="col">Estado</th>{% if not isExportView %}<th scope="col" class="no-print"><span class="sr-only">Acción</span></th>{% endif %}</tr></thead>
      <tbody>
        {% for documento in documentos %}<tr>
          <td data-label="Proveedor"><span class="block max-w-xs truncate" title="{{ documento.proveedor }}">{{ documento.proveedor }}</span></td><td data-label="Tipo" class="{{ not isExportView ? 'hidden xl:table-cell' : '' }} whitespace-nowrap">{{ documento.tipo }}</td><td data-label="Documento" class="whitespace-nowrap font-medium">{{ documento.documento }}</td><td data-label="F. emisión" class="{{ not isExportView ? 'hidden lg:table-cell' : '' }} whitespace-nowrap">{{ documento.fecha_emision }}</td><td data-label="F. vencimiento" class="whitespace-nowrap">{{ documento.fecha_vencimiento }}</td><td data-label="Días" class="text-center whitespace-nowrap">{{ documento.dias }}</td><td data-label="Moneda" class="{{ not isExportView ? 'hidden lg:table-cell' : '' }} text-center whitespace-nowrap">{{ documento.moneda }}</td><td data-label="Total" class="text-right whitespace-nowrap">{{ documento.total|number_format(2, '.', ',') }}</td><td data-label="Saldo" class="text-right whitespace-nowrap font-semibold">{{ documento.saldo|number_format(2, '.', ',') }}</td>
          <td data-label="Estado">{% if documento.estado == 'Vencido' %}<span class="{{ isExportView ? 'report-chip report-chip--danger' : 'badge badge-danger' }}">{{ documento.estado }}</span>{% elseif documento.estado == 'Por vencer' %}<span class="{{ isExportView ? 'report-chip report-chip--warning' : 'badge badge-warning' }}">{{ documento.estado }}</span>{% else %}<span class="{{ isExportView ? 'report-chip report-chip--ok' : 'badge badge-success' }}">{{ documento.estado }}</span>{% endif %}</td>
          {% if not isExportView %}<td data-label="Acción" class="no-print">{% if is_granted('ROLE_OPERADOR') and documento.saldo > 0 %}<a class="btn btn-outline-primary btn-sm" href="{{ path('pago_new', {proveedor_id: documento.proveedor_id, documento_id: documento.id}) }}">Registrar pago</a>{% endif %}</td>{% endif %}
        </tr>{% else %}<tr><td colspan="{{ not isExportView ? 11 : 10 }}" 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 documentos para los filtros seleccionados.</p>{% if not isExportView %}<p class="empty-state-copy">Ajusta proveedor, estado o fecha de corte para ampliar la búsqueda.</p>{% endif %}</div></td></tr>{% endfor %}
      </tbody>
    </table>
  </div>
{% endblock %}