{% extends 'base.html.twig' %}
{% block title %}Antigüedad de saldos{% endblock %}

{% block breadcrumb %}
  <nav class="flex" aria-label="Breadcrumb">
    <ol class="inline-flex items-center space-x-1 md:space-x-3">
      <li class="inline-flex items-center">
        <a href="{{ path('home') }}" class="inline-flex items-center text-sm font-medium text-secondary-700 hover:text-primary-600">
          <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
            <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path>
          </svg>
          Inicio
        </a>
      </li>
      <li>
        <div class="flex items-center">
          <svg class="w-6 h-6 text-secondary-400" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
          </svg>
          <span class="ml-1 text-sm font-medium text-secondary-500 md:ml-2">Reportes</span>
        </div>
      </li>
      <li aria-current="page">
        <div class="flex items-center">
          <svg class="w-6 h-6 text-secondary-400" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
          </svg>
          <span class="ml-1 text-sm font-medium text-secondary-500 md:ml-2">Antigüedad de saldos</span>
        </div>
      </li>
    </ol>
  </nav>
{% endblock %}

{% block content %}
  {# Filters #}
  <div class="bg-white rounded-2xl shadow-sm border border-secondary-200 p-6 mb-6">
    <form method="get" class="flex flex-col md:flex-row gap-4 items-end">
      <div class="flex-1">
        <label for="proveedor_id" class="block text-sm font-medium text-secondary-700 mb-1">Proveedor</label>
        <select name="proveedor_id" id="proveedor_id" class="w-full rounded-lg border-secondary-300 shadow-sm focus:border-primary-500 focus:ring-primary-500">
          <option value="">Todos los proveedores</option>
          {% for p in proveedores %}
            <option value="{{ p.id }}" {{ filtros.proveedor_id == p.id ? 'selected' : '' }}>{{ p.razonSocial }}</option>
          {% endfor %}
        </select>
      </div>
      <div class="w-full md:w-48">
        <label for="hasta" class="block text-sm font-medium text-secondary-700 mb-1">Fecha de corte</label>
        <input type="date" name="hasta" id="hasta" value="{{ filtros.fechas.hasta }}" class="w-full rounded-lg border-secondary-300 shadow-sm focus:border-primary-500 focus:ring-primary-500">
      </div>
      <button type="submit" class="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors shadow-sm">
        Actualizar Reporte
      </button>
      <button type="button" onclick="window.print()" class="px-4 py-2 bg-white border border-secondary-300 text-secondary-700 rounded-lg hover:bg-secondary-50 transition-colors shadow-sm flex items-center gap-2">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"/>
        </svg>
        Imprimir
      </button>
    </form>
  </div>

  {# Report #}
  <div class="bg-white rounded-2xl shadow-sm border border-secondary-200 overflow-hidden print:shadow-none print:border-none">
    <div class="px-8 py-6 border-b border-secondary-200 bg-secondary-50/50 text-center">
      <h1 class="text-xl font-bold text-secondary-900 uppercase tracking-wide">Antigüedad de Saldos</h1>
      <p class="text-sm text-secondary-500 mt-1">Al {{ filtros.fechas.hasta|date('d/m/Y') }}</p>
    </div>

    <div class="overflow-x-auto">
      <table class="w-full text-sm">
        <thead>
          <tr class="bg-secondary-50 border-b border-secondary-200">
            <th class="px-4 py-3 text-left font-semibold text-secondary-600">Referencia</th>
            <th class="px-4 py-3 text-left font-semibold text-secondary-600">Documento</th>
            <th class="px-4 py-3 text-center font-semibold text-secondary-600">F. Emisión</th>
            <th class="px-4 py-3 text-center font-semibold text-secondary-600">F. Vencimiento</th>
            <th class="px-4 py-3 text-right font-semibold text-secondary-600">Saldo Total</th>
            <th class="px-4 py-3 text-right font-semibold text-secondary-600 bg-green-50/50">Corriente</th>
            <th class="px-4 py-3 text-right font-semibold text-secondary-600">1 a 30</th>
            <th class="px-4 py-3 text-right font-semibold text-secondary-600">31 a 60</th>
            <th class="px-4 py-3 text-right font-semibold text-secondary-600">61 a 90</th>
            <th class="px-4 py-3 text-right font-semibold text-secondary-600 text-red-600">91 o más</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-secondary-200">
          {% for provId, data in reporte %}
            {# Provider Header #}
            <tr class="bg-secondary-50/30">
              <td colspan="10" class="px-4 py-2 font-bold text-secondary-800 border-t border-secondary-200">
                {{ data.proveedor }}
              </td>
            </tr>

            {# Documents #}
            {% for doc in data.documentos %}
              <tr class="hover:bg-secondary-50 transition-colors">
                <td class="px-4 py-2 text-secondary-600">{{ doc.referencia }}</td>
                <td class="px-4 py-2 font-medium text-secondary-900">{{ doc.documento }}</td>
                <td class="px-4 py-2 text-center text-secondary-500">{{ doc.f_aplicacion }}</td>
                <td class="px-4 py-2 text-center text-secondary-500">{{ doc.f_vencimiento }}</td>
                <td class="px-4 py-2 text-right font-medium">{{ doc.saldo|number_format(2) }}</td>
                <td class="px-4 py-2 text-right text-secondary-500 bg-green-50/30">{{ doc.corriente > 0 ? doc.corriente|number_format(2) : '-' }}</td>
                <td class="px-4 py-2 text-right text-secondary-500">{{ doc.d01_30 > 0 ? doc.d01_30|number_format(2) : '-' }}</td>
                <td class="px-4 py-2 text-right text-secondary-500">{{ doc.d31_60 > 0 ? doc.d31_60|number_format(2) : '-' }}</td>
                <td class="px-4 py-2 text-right text-secondary-500">{{ doc.d61_90 > 0 ? doc.d61_90|number_format(2) : '-' }}</td>
                <td class="px-4 py-2 text-right text-red-600 font-medium">{{ doc.d91_mas > 0 ? doc.d91_mas|number_format(2) : '-' }}</td>
              </tr>
            {% endfor %}

            {# Provider Subtotal #}
            <tr class="bg-secondary-50 font-bold border-t border-secondary-300">
              <td colspan="4" class="px-4 py-2 text-right text-secondary-700">Subtotal {{ data.proveedor }}:</td>
              <td class="px-4 py-2 text-right">{{ data.subtotal.total|number_format(2) }}</td>
              <td class="px-4 py-2 text-right bg-green-50/50">-</td>
              <td class="px-4 py-2 text-right">{{ data.subtotal.d01_30|number_format(2) }}</td>
              <td class="px-4 py-2 text-right">{{ data.subtotal.d31_60|number_format(2) }}</td>
              <td class="px-4 py-2 text-right">{{ data.subtotal.d61_90|number_format(2) }}</td>
              <td class="px-4 py-2 text-right text-red-700">{{ data.subtotal.d91_mas|number_format(2) }}</td>
            </tr>
          {% else %}
            <tr>
              <td colspan="10" class="px-6 py-12 text-center text-secondary-500">
                No hay saldos pendientes a la fecha seleccionada.
              </td>
            </tr>
          {% endfor %}
        </tbody>
        {# Grand Total #}
        {% if reporte|length > 0 %}
          <tfoot class="bg-secondary-100 border-t-2 border-secondary-300 font-bold text-secondary-900">
            <tr>
              <td colspan="4" class="px-4 py-3 text-right uppercase tracking-wider">Total General:</td>
              <td class="px-4 py-3 text-right">{{ grandTotal.total|number_format(2) }}</td>
              <td class="px-4 py-3 text-right bg-green-100/50">-</td>
              <td class="px-4 py-3 text-right">{{ grandTotal.d01_30|number_format(2) }}</td>
              <td class="px-4 py-3 text-right">{{ grandTotal.d31_60|number_format(2) }}</td>
              <td class="px-4 py-3 text-right">{{ grandTotal.d61_90|number_format(2) }}</td>
              <td class="px-4 py-3 text-right text-red-800">{{ grandTotal.d91_mas|number_format(2) }}</td>
            </tr>
          </tfoot>
        {% endif %}
      </table>
    </div>
  </div>
{% endblock %}