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

{% block report_title %}Estado de cuenta{% endblock %}
{% block report_subtitle %}
  {% if proveedor %}
    {{ proveedor.nombre }} | {{ filtros.fecha_desde|date('d/m/Y') }} al {{ filtros.fecha_hasta|date('d/m/Y') }}
  {% else %}
    Selecciona un proveedor para generar el reporte.
  {% endif %}
{% endblock %}

{% block content %}
  {% set isExportView = reportShell|default('base.html.twig') != 'base.html.twig' %}
  {% set exportQuery = {
    'proveedor_id': filtros.proveedor_id,
    'fecha_desde': filtros.fecha_desde,
    'fecha_hasta': filtros.fecha_hasta
  } %}

  <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="">Seleccione un proveedor</option>
            {% for proveedorOption in proveedores %}
              <option value="{{ proveedorOption.id }}" {{ filtros.proveedor_id == proveedorOption.id ? 'selected' : '' }}>{{ proveedorOption.razonSocial }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="report-field report-field--sm">
          <label class="report-label" for="fecha_desde">Desde</label>
          <input class="report-input" type="date" id="fecha_desde" name="fecha_desde" value="{{ filtros.fecha_desde }}">
        </div>
        <div class="report-field report-field--sm">
          <label class="report-label" for="fecha_hasta">Hasta</label>
          <input class="report-input" type="date" id="fecha_hasta" name="fecha_hasta" value="{{ filtros.fecha_hasta }}">
        </div>
        <div class="report-actions">
          <button class="report-button report-button--primary" type="submit">Actualizar</button>
          {% if proveedor %}
            <a class="report-link-button" href="{{ path('rep_estado', exportQuery|merge({export: 'excel'})) }}">Excel</a>
            <a class="report-link-button" href="{{ path('rep_estado', exportQuery|merge({export: 'excel_raw'})) }}">Excel datos</a>
            <a class="report-link-button" href="{{ path('rep_estado', exportQuery|merge({export: 'pdf'})) }}">PDF</a>
            <a class="report-link-button" target="_blank" href="{{ path('rep_estado', exportQuery|merge({export: 'print'})) }}">Imprimir</a>
          {% endif %}
        </div>
      </form>
    </div>

    {% if proveedor %}
      {% set totalCargo = 0 %}
      {% set totalAbono = 0 %}
      {% for mov in movimientos %}
        {% set totalCargo = totalCargo + (mov.cargo_val|default(0)) %}
        {% set totalAbono = totalAbono + (mov.abono_val|default(0)) %}
      {% endfor %}

      <div class="report-grid">
        <div class="report-card">
          <span class="report-card__label">Saldo inicial</span>
          <span class="report-card__value">{{ proveedor.saldoInicial }}</span>
        </div>
        <div class="report-card">
          <span class="report-card__label">Cargos del periodo</span>
          <span class="report-card__value">{{ monedaBase }} {{ totalCargo|number_format(2, '.', ',') }}</span>
        </div>
        <div class="report-card">
          <span class="report-card__label">Abonos del periodo</span>
          <span class="report-card__value">{{ monedaBase }} {{ totalAbono|number_format(2, '.', ',') }}</span>
        </div>
        <div class="report-card">
          <span class="report-card__label">Saldo actual</span>
          <span class="report-card__value">{{ proveedor.saldoActual }}</span>
        </div>
      </div>

      <div class="report-panel report-panel--table">
        {{ block('report_body') }}
      </div>
    {% else %}
      <div class="report-panel">
        <div class="report-empty">Selecciona un proveedor para ver el estado de cuenta.</div>
      </div>
    {% endif %}
  </div>
{% endblock %}

{% block report_body %}
  <div class="report-table-wrap">
    <table class="report-table report-table--dense">
      <thead>
        <tr>
          <th>Fecha</th>
          <th>Tipo</th>
          <th>Serie</th>
          <th>Numero</th>
          <th>Descripcion</th>
          <th class="text-right">Cargo</th>
          <th class="text-right">Abono</th>
          <th class="text-right">Saldo</th>
          <th>Documento aplicado</th>
        </tr>
      </thead>
      <tbody>
        {% for mov in movimientos %}
          <tr>
            <td class="report-cell--nowrap">{{ mov.fecha }}</td>
            <td><span class="report-chip">{{ mov.tipo }}</span></td>
            <td class="report-cell--nowrap">{{ mov.serie }}</td>
            <td class="report-cell--nowrap">{{ mov.numero }}</td>
            <td>{{ mov.descripcion }}</td>
            <td class="text-right report-cell--nowrap">{{ mov.cargo }}</td>
            <td class="text-right report-cell--nowrap">{{ mov.abono }}</td>
            <td class="text-right report-cell--nowrap">{{ mov.saldo }}</td>
            <td class="report-cell--nowrap">{{ mov.doc_ref }}</td>
          </tr>
        {% else %}
          <tr>
            <td colspan="9" class="report-empty">No hay movimientos para este periodo.</td>
          </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
{% endblock %}