{% extends reportShell|default('base.html.twig') %}
{% block title %}Documentos pendientes y vencidos{% endblock %}
{% block page_title %}Documentos pendientes{% endblock %}

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

{% block breadcrumb %}
  <nav class="flex no-print" aria-label="Breadcrumb">
    <ol class="flex items-center space-x-4">
      <li><a href="{{ path('home') }}" class="text-secondary-500 hover:text-secondary-700">Inicio</a></li>
      <li class="text-secondary-300">/</li>
      <li class="text-secondary-500">Reportes</li>
      <li class="text-secondary-300">/</li>
      <li class="text-secondary-500">Documentos pendientes</li>
    </ol>
  </nav>
{% endblock %}

{% block report_title %}Documentos pendientes y vencidos{% 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' : 'report-shell report-stack' }}">
    <div class="report-panel no-print">
      <form method="get" class="report-form-grid">
        <div class="report-field">
          <label class="report-label" for="proveedor_id">Proveedor</label>
          <select class="report-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="report-field report-field--sm">
          <label class="report-label" for="estado">Estado</label>
          <select class="report-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="report-field report-field--sm">
          <label class="report-label" for="fecha_corte">Fecha corte</label>
          <input class="report-input" type="date" id="fecha_corte" name="fecha_corte" value="{{ filtros.fecha_corte }}">
        </div>
        <div class="report-actions">
          <button class="report-button report-button--primary" type="submit">Actualizar</button>
          <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" href="{{ path('rep_estado_documentos', exportQuery|merge({export: 'print'})) }}">Imprimir</a>
        </div>
      </form>
    </div>

    <div class="report-grid">
      <div class="report-card">
        <span class="report-card__label">Documentos</span>
        <span class="report-card__value">{{ stats.documentos }}</span>
      </div>
      <div class="report-card">
        <span class="report-card__label">Vencidos</span>
        <span class="report-card__value">{{ stats.vencidos }}</span>
      </div>
      <div class="report-card">
        <span class="report-card__label">Por vencer</span>
        <span class="report-card__value">{{ stats.por_vencer }}</span>
      </div>
      {% for total in totalesMoneda %}
        <div class="report-card">
          <span class="report-card__label">Saldo {{ total.moneda }}</span>
          <span class="report-card__value">{{ total.moneda }} {{ total.saldo|number_format(2, '.', ',') }}</span>
        </div>
      {% endfor %}
    </div>

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

{% block report_body %}
  <div class="report-table-wrap">
    <table class="report-table report-table--dense">
      <thead>
        <tr>
          <th>Proveedor</th>
          <th>Tipo</th>
          <th>Documento</th>
          <th>F. emision</th>
          <th>F. vencimiento</th>
          <th class="text-center">Dias</th>
          <th class="text-center">Moneda</th>
          <th class="text-right">Total</th>
          <th class="text-right">Saldo</th>
          <th>Estado</th>
          {% if reportShell|default('base.html.twig') == 'base.html.twig' %}
            <th class="no-print">Accion</th>
          {% endif %}
        </tr>
      </thead>
      <tbody>
        {% for documento in documentos %}
          <tr>
            <td>{{ documento.proveedor }}</td>
            <td class="report-cell--nowrap">{{ documento.tipo }}</td>
            <td class="report-cell--nowrap">{{ documento.documento }}</td>
            <td class="report-cell--nowrap">{{ documento.fecha_emision }}</td>
            <td class="report-cell--nowrap">{{ documento.fecha_vencimiento }}</td>
            <td class="text-center report-cell--nowrap">{{ documento.dias }}</td>
            <td class="text-center report-cell--nowrap">{{ documento.moneda }}</td>
            <td class="text-right report-cell--nowrap">{{ documento.total|number_format(2, '.', ',') }}</td>
            <td class="text-right report-cell--nowrap">{{ documento.saldo|number_format(2, '.', ',') }}</td>
            <td>
              {% if documento.estado == 'Vencido' %}
                <span class="report-chip report-chip--danger">{{ documento.estado }}</span>
              {% elseif documento.estado == 'Por vencer' %}
                <span class="report-chip report-chip--warning">{{ documento.estado }}</span>
              {% else %}
                <span class="report-chip report-chip--ok">{{ documento.estado }}</span>
              {% endif %}
            </td>
            {% if reportShell|default('base.html.twig') == 'base.html.twig' %}
              <td class="no-print">
                {% if is_granted('ROLE_OPERADOR') and documento.saldo > 0 %}
                  <a class="report-link-button" href="{{ path('pago_new', {proveedor_id: documento.proveedor_id, documento_id: documento.id}) }}">Registrar pago</a>
                {% endif %}
              </td>
            {% endif %}
          </tr>
        {% else %}
          <tr>
            <td colspan="{{ reportShell|default('base.html.twig') == 'base.html.twig' ? 11 : 10 }}" class="report-empty">No hay documentos para los filtros seleccionados.</td>
          </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
{% endblock %}