{% extends 'base.html.twig' %}
{% block title %}Équilibre{% endblock %}
{% block breadcrumb %}
<i class="ti ti-chevron-right text-[10px] text-line mx-1 shrink-0"></i>
<span class="font-medium text-ink">Équilibre</span>
{% endblock %}
{% block body %}
{% include 'balance/_tabs.html.twig' %}

{# ---- Dépenses avancées, une card par participant ---- #}
{% for p in profiles %}
{% set loanExpenses = balance.loanAdvanceExpensesFor(p) %}
<div class="rounded-2xl bg-surface border border-line overflow-hidden mb-3">
  <div class="flex items-center justify-between gap-3 px-4 py-3">
    <div class="min-w-0">
      <span class="block text-sm"><span class="font-medium">{{ p.name }}</span> <span class="text-muted">a avancé de sa poche</span> <span class="amount font-medium">{{ balance.contributionAdvance(p)|number_format(2, ',', ' ') }} €</span></span>
      {% if loanExpenses|length > 0 %}
      <span class="block text-xs text-muted mt-0.5">et <span class="amount">{{ balance.toRecoverFromLoan(p)|number_format(2, ',', ' ') }} €</span> sur le prêt, à récupérer auprès de la banque</span>
      {% endif %}
    </div>
    <a href="{{ path('app_expense_index', {paidBy: p.id}) }}" class="text-xs text-muted hover:text-ink transition-colors whitespace-nowrap shrink-0">Ses dépenses <i class="ti ti-arrow-right text-[10px]"></i></a>
  </div>
  <table class="data-table text-sm w-full">
    <thead>
      <tr class="border-y border-line">
        <th class="text-left text-xs font-medium text-muted py-2 px-3 md:px-4 md:w-72">Libellé</th>
        <th class="hidden md:table-cell text-left text-xs font-medium text-muted py-2 px-3 md:px-4 w-56">Intervenant</th>
        <th class="text-left text-xs font-medium text-muted py-2 px-3 md:px-4 w-28">Montant</th>
        <th class="text-left text-xs font-medium text-muted py-2 px-3 md:px-4 w-32">Équilibre</th>
        <th class="hidden md:table-cell" aria-hidden="true"></th>
      </tr>
    </thead>
    <tbody class="divide-y divide-line">
      {% for e in balance.contributionExpensesFor(p) %}
      <tr class="hover:bg-surface-2 transition-colors cursor-pointer" onclick="location.href='{{ path('app_expense_show', {id: e.id}) }}'">
        <td class="py-2.5 px-3 md:px-4 min-w-0"><span class="block text-sm font-medium truncate">{{ e.description }}</span></td>
        <td class="hidden md:table-cell py-2.5 px-3 md:px-4 cell-truncate text-sm text-muted">{{ e.company ? e.company.name : '—' }}</td>
        <td class="py-2.5 px-3 md:px-4 amount text-sm font-medium whitespace-nowrap">{{ e.paidAmount|number_format(2, ',', ' ') }} €</td>
        <td class="py-2.5 px-3 md:px-4 amount text-sm text-ok-ink whitespace-nowrap">+ {{ balance.owedByOthers(e)|number_format(2, ',', ' ') }} €</td>
        <td class="hidden md:table-cell" aria-hidden="true"></td>
      </tr>
      {% else %}
      <tr><td colspan="5" class="py-3 px-3 md:px-4 text-sm text-muted">Aucune dépense avancée de sa poche.</td></tr>
      {% endfor %}
    </tbody>
    {% if loanExpenses|length > 0 %}
    <tbody class="divide-y divide-line border-t border-line">
      <tr class="bg-surface-2/40">
        <td colspan="5" class="py-2 px-3 md:px-4 text-xs text-muted">Avancé sur le prêt — à récupérer auprès de la banque</td>
      </tr>
      {% for e in loanExpenses %}
      <tr class="hover:bg-surface-2 transition-colors cursor-pointer" onclick="location.href='{{ path('app_expense_show', {id: e.id}) }}'">
        <td class="py-2.5 px-3 md:px-4 min-w-0"><span class="block text-sm font-medium truncate">{{ e.description }}</span></td>
        <td class="hidden md:table-cell py-2.5 px-3 md:px-4 cell-truncate text-sm text-muted">{{ e.company ? e.company.name : '—' }}</td>
        <td class="py-2.5 px-3 md:px-4 amount text-sm font-medium whitespace-nowrap">{{ e.paidAmount|number_format(2, ',', ' ') }} €</td>
        <td class="py-2.5 px-3 md:px-4 text-sm text-muted whitespace-nowrap">banque</td>
        <td class="hidden md:table-cell" aria-hidden="true"></td>
      </tr>
      {% endfor %}
    </tbody>
    {% endif %}
  </table>
</div>
{% endfor %}

{# ---- Transferts ---- #}
<div class="rounded-2xl bg-surface border border-line overflow-hidden mb-3">
  <div class="flex items-center justify-between gap-3 px-4 py-3">
    <span class="text-sm font-medium">Transferts entre vous</span>
    <a href="{{ path('app_balance_transfers') }}" class="text-xs text-accent-ink hover:underline whitespace-nowrap shrink-0"><i class="ti ti-plus text-[10px]"></i> Ajouter</a>
  </div>
  <table class="data-table text-sm w-full">
    <thead>
      <tr class="border-y border-line">
        <th class="text-left text-xs font-medium text-muted py-2 px-3 md:px-4 md:w-72">Motif</th>
        <th class="hidden md:table-cell text-left text-xs font-medium text-muted py-2 px-3 md:px-4 w-48">Mouvement</th>
        <th class="hidden md:table-cell text-left text-xs font-medium text-muted py-2 px-3 md:px-4">Dépense liée</th>
        <th class="text-left text-xs font-medium text-muted py-2 px-3 md:px-4 w-28">Montant</th>
        <th class="text-left text-xs font-medium text-muted py-2 px-3 md:px-4 w-32">Équilibre</th>
      </tr>
    </thead>
    <tbody class="divide-y divide-line">
      {% for t in transfers %}
      <tr class="hover:bg-surface-2 transition-colors cursor-pointer" onclick="location.href='{{ path('app_transfer_edit', {id: t.id}) }}'">
        <td class="py-2.5 px-3 md:px-4 min-w-0">
          <span class="block text-sm font-medium truncate">{{ t.label }}</span>
          <span class="md:hidden block text-xs text-muted truncate">de {{ t.fromProfile.name }} vers {{ t.toProfile.name }}</span>
          {% if t.expense %}<span class="md:hidden block text-xs text-muted truncate"><i class="ti ti-link text-[10px]"></i> {{ t.expense.description }}</span>{% endif %}
        </td>
        <td class="hidden md:table-cell py-2.5 px-3 md:px-4 cell-truncate text-sm text-muted">de {{ t.fromProfile.name }} vers {{ t.toProfile.name }}</td>
        <td class="hidden md:table-cell py-2.5 px-3 md:px-4 cell-truncate text-sm text-muted">{% if t.expense %}<a href="{{ path('app_expense_show', {id: t.expense.id}) }}" onclick="event.stopPropagation()" class="hover:text-ink transition-colors"><i class="ti ti-link text-[10px]"></i> {{ t.expense.description }}</a>{% else %}—{% endif %}</td>
        <td class="py-2.5 px-3 md:px-4 amount text-sm font-medium whitespace-nowrap">{{ t.amount|number_format(2, ',', ' ') }} €</td>
        <td class="py-2.5 px-3 md:px-4 amount text-sm text-ok-ink whitespace-nowrap">+ {{ t.amount|number_format(2, ',', ' ') }} €</td>
      </tr>
      {% else %}
      <tr><td colspan="5" class="py-3 px-3 md:px-4 text-sm text-muted">Aucun transfert pour l'instant.</td></tr>
      {% endfor %}
    </tbody>
  </table>
</div>

{# ---- Équilibre final ---- #}
<div class="rounded-2xl bg-surface border border-line p-5">
  <div class="text-xs uppercase tracking-wide text-muted mb-3">Équilibre final</div>
  {% if debts|length > 0 %}
  {% for debt in debts %}
  <div class="text-sm{{ not loop.first ? ' mt-3' : '' }}">
    <span class="font-medium">{{ debt.debtor.name }}</span> doit
    <span class="amount text-2xl font-semibold mx-1 align-middle">{{ debt.amount|number_format(2, ',', ' ') }} €</span>
    à <span class="font-medium">{{ debt.creditor.name }}</span>
  </div>
  {% endfor %}
  {% if debts|length == 1 %}
  {% set debt = debts|first %}
  {% set items = balance.outstandingItems() %}
  {% if items|length > 0 %}
  <div class="mt-4 pt-3 border-t border-line">
    <div class="text-xs uppercase tracking-wide text-muted mb-2">Ce qui reste à régulariser</div>
    <div class="space-y-1.5 text-sm">
      {% for it in items %}
      <div class="flex justify-between gap-3">
        <span class="text-muted min-w-0 truncate">
          {{ it.label }}
          <span class="text-xs">— {{ it.type == 'expense' ? 'part de ' ~ it.debtor.name ~ ' sur la dépense de ' ~ it.creditor.name : 'avance de ' ~ it.creditor.name ~ ' à rendre par ' ~ it.debtor.name }}</span>
        </span>
        <span class="amount whitespace-nowrap {{ it.debtor == debt.debtor ? '' : 'text-ok-ink' }}">{{ it.debtor == debt.debtor ? '' : '− ' }}{{ it.amount|number_format(2, ',', ' ') }} €</span>
      </div>
      {% endfor %}
      <div class="flex justify-between gap-3 pt-1.5 border-t border-line border-dashed font-medium">
        <span>Total <span class="text-xs text-muted font-normal">(au centime d'arrondi près)</span></span>
        <span class="amount whitespace-nowrap">{{ debt.amount|number_format(2, ',', ' ') }} €</span>
      </div>
    </div>
  </div>
  {% endif %}
  {% endif %}
  <div class="text-xs text-muted mt-3">Un virement de ce montant, enregistré comme transfert, remet le compteur à zéro.</div>
  {% else %}
  <div class="text-sm text-ok-ink font-medium">Tout est équilibré 🎉</div>
  <div class="text-xs text-muted mt-1">Personne ne doit rien à personne.</div>
  {% endif %}
</div>
{% endblock %}