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

{% block report_title %}Gasto por centro de costo{% endblock %}
{% block report_subtitle %}Período {{ 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 = {'fecha_desde': filtros.fecha_desde, 'fecha_hasta': filtros.fecha_hasta} %}
  <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">Reportes</p><h2 class="page-title">Gasto por centro de costo</h2><p class="page-subtitle">Cuanto se pago por cada centro de costo en el periodo seleccionado.</p></div></section>{% endif %}

    <section class="{{ isExportView ? 'report-panel no-print' : 'section-card report-filter-card' }}">
      <form method="get" class="{{ isExportView ? 'report-form-grid' : 'grid gap-4 p-4 md:grid-cols-[180px_180px_auto] md:items-end' }}">
        <div class="{{ isExportView ? 'report-field report-field--sm' : '' }}"><label class="{{ isExportView ? 'report-label' : 'form-label' }}" for="fecha_desde">Desde</label><input class="{{ isExportView ? 'report-input' : 'form-control' }}" type="date" id="fecha_desde" name="fecha_desde" value="{{ filtros.fecha_desde }}"></div>
        <div class="{{ isExportView ? 'report-field report-field--sm' : '' }}"><label class="{{ isExportView ? 'report-label' : 'form-label' }}" for="fecha_hasta">Hasta</label><input class="{{ isExportView ? 'report-input' : 'form-control' }}" type="date" id="fecha_hasta" name="fecha_hasta" value="{{ filtros.fecha_hasta }}"></div>
        <div class="{{ isExportView ? 'report-actions' : 'flex flex-wrap gap-2' }}">
          <button class="{{ isExportView ? 'report-button report-button--primary' : 'btn btn-primary' }}" type="submit">Actualizar</button>
          {% if isExportView %}<a class="report-link-button" href="{{ path('rep_gasto_centro_costo', exportQuery|merge({export: 'excel'})) }}">Excel</a><a class="report-link-button" href="{{ path('rep_gasto_centro_costo', exportQuery|merge({export: 'pdf'})) }}">PDF</a>{% else %}{% include 'reporte/_export_menu.html.twig' with {id: 'centro-costo-report-export-menu', routeName: 'rep_gasto_centro_costo', exportQuery: exportQuery} only %}{% endif %}
        </div>
      </form>
    </section>

    <section class="{{ isExportView ? 'report-grid' : 'grid gap-4 sm:grid-cols-2 xl:grid-cols-4' }}" aria-label="Resumen del reporte">
      <article class="{{ isExportView ? 'report-card' : 'metric-card' }}"><span class="{{ isExportView ? 'report-card__label' : 'metric-label block' }}">Total del periodo</span><strong class="{{ isExportView ? 'report-card__value' : 'metric-value block' }}">{{ totalGeneral|number_format(2, '.', ',') }}</strong></article>
      <article class="{{ isExportView ? 'report-card' : 'metric-card' }}"><span class="{{ isExportView ? 'report-card__label' : 'metric-label block' }}">Centros de costo</span><strong class="{{ isExportView ? 'report-card__value' : 'metric-value block' }}">{{ rows|length }}</strong></article>
    </section>

    <section class="{{ isExportView ? 'report-panel report-panel--table' : 'table-card' }}">
      <div class="{{ isExportView ? 'report-table-wrap' : 'table-responsive max-h-[72vh]' }}">
        <table class="{{ isExportView ? 'report-table report-table--dense' : 'table table-to-card' }}">
          <caption class="sr-only">Gasto por centro de costo</caption>
          <thead><tr><th scope="col">Centro de costo</th><th scope="col" class="text-right">Total</th><th scope="col" class="text-right">% del periodo</th></tr></thead>
          <tbody>
            {% for row in rows %}
              <tr>
                <td data-label="Centro de costo">{{ row.nombre }}</td>
                <td data-label="Total" class="text-right whitespace-nowrap">{{ row.total|number_format(2, '.', ',') }}</td>
                <td data-label="%" class="text-right whitespace-nowrap">{{ row.porcentaje }}%</td>
              </tr>
            {% else %}
              <tr><td colspan="3" class="{{ isExportView ? 'report-empty' : 'table-card-state text-center' }}">No hay pagos para los filtros seleccionados.</td></tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </section>
  </div>
{% endblock %}