{% extends 'base.html.twig' %}
{% block title %}Aperçu financement{% endblock %}
{% block breadcrumb %}
<i class="ti ti-chevron-right text-[10px] text-line mx-1 shrink-0"></i>
<a href="{{ path('app_financing_index') }}" class="hover:text-ink transition-colors shrink-0">Financements</a>
<i class="ti ti-chevron-right text-[10px] text-line mx-1 shrink-0"></i>
<span class="font-medium text-ink">Aperçu</span>
{% endblock %}
{% block body %}

{% for row in summary %}
{% set f = row.financing %}
<div class="rounded-xl bg-surface border border-line p-5 mb-4">

  {# En-tête financement #}
  <div class="flex items-center justify-between mb-4">
    <div>
      <span class="font-semibold text-ink">{{ f.name }}</span>
      <span class="ml-2 text-xs bg-surface-2 rounded-md px-2 py-0.5 text-muted">{{ f.type.label() }}</span>
    </div>
    <a href="{{ path('app_financing_edit', {id: f.id}) }}" class="text-xs text-muted hover:text-ink">Modifier</a>
  </div>

  {# KPIs #}
  <div class="grid grid-cols-2 md:grid-cols-4 gap-3 mb-5">
    <div class="rounded-lg bg-surface-2 p-3">
      <div class="text-[10px] uppercase tracking-[0.14em] text-muted mb-1">Accordé</div>
      <div class="amount text-xl font-semibold">
        {% if row.agreedAmount != '0' %}
          {{ row.agreedAmount|number_format(0, ',', ' ') }} <span class="text-sm font-normal text-muted">€</span>
        {% else %}
          <span class="text-sm font-normal text-muted">—</span>
        {% endif %}
      </div>
    </div>
    <div class="rounded-lg bg-surface-2 p-3">
      <div class="text-[10px] uppercase tracking-[0.14em] text-muted mb-1">Prévu (devis)</div>
      <div class="amount text-xl font-semibold">{{ row.totalQuotes|number_format(0, ',', ' ') }} <span class="text-sm font-normal text-muted">€</span></div>
    </div>
    <div class="rounded-lg bg-surface-2 p-3">
      <div class="text-[10px] uppercase tracking-[0.14em] text-muted mb-1">Déjà appelé / payé</div>
      <div class="amount text-xl font-semibold">{{ row.totalPaid|number_format(0, ',', ' ') }} <span class="text-sm font-normal text-muted">€</span></div>
    </div>
    <div class="rounded-lg bg-surface-2 p-3">
      <div class="text-[10px] uppercase tracking-[0.14em] text-muted mb-1">Reste</div>
      <div class="amount text-xl font-semibold {% if row.remaining < 0 %}text-danger{% endif %}">
        {{ row.remaining|number_format(0, ',', ' ') }} <span class="text-sm font-normal text-muted">€</span>
      </div>
    </div>
  </div>

  {# Détail par lot #}
  {% set lots = byLot[f.id] ?? [] %}
  {% if lots %}
  <table class="data-table text-sm">
    <thead>
      <tr class="border-b border-line">
        <th class="text-left text-xs font-medium text-muted py-2 px-2 md:px-4 md:w-56">Lot</th>
        <th class="text-right text-xs font-medium text-muted py-2 px-2 md:px-4 w-28">Devis</th>
        <th class="text-right text-xs font-medium text-muted py-2 px-2 md:px-4 w-28">Payé</th>
        <th class="text-right text-xs font-medium text-muted py-2 px-2 md:px-4 w-28">Reste</th>
        <th class="hidden md:table-cell" aria-hidden="true"></th>
      </tr>
    </thead>
    <tbody class="divide-y divide-line">
      {% for lotRow in lots %}
      <tr>
        <td class="py-2 px-2 md:px-4 cell-truncate text-sm">{{ lotRow.lot.name }}</td>
        <td class="py-2 px-2 md:px-4 text-sm text-right amount whitespace-nowrap">{{ lotRow.totalQuotes|number_format(0, ',', ' ') }} €</td>
        <td class="py-2 px-2 md:px-4 text-sm text-right amount whitespace-nowrap">{{ lotRow.totalPaid|number_format(0, ',', ' ') }} €</td>
        <td class="py-2 px-2 md:px-4 text-sm text-right amount whitespace-nowrap {% if lotRow.remaining < 0 %}text-danger{% endif %}">{{ lotRow.remaining|number_format(0, ',', ' ') }} €</td>
        <td class="hidden md:table-cell" aria-hidden="true"></td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  {% else %}
  <p class="text-sm text-muted">Aucun devis associé à ce financement.</p>
  {% endif %}

</div>
{% else %}
<div class="rounded-xl bg-surface border border-line p-5 text-sm text-muted">
  Aucun financement configuré. <a href="{{ path('app_financing_new') }}" class="text-accent hover:underline">Créer un financement</a>
</div>
{% endfor %}

{% endblock %}