{% extends 'base.html.twig' %}
{% block title %}Dépenses{% endblock %}
{% block breadcrumb %}
<i class="ti ti-chevron-right text-[10px] text-line mx-1 shrink-0"></i>
<span class="font-medium text-ink">Dépenses</span>
{% endblock %}
{% block body %}
<div data-controller="filter" class="-mt-5">
<div class="sticky top-12 z-10 -mx-6 px-6 py-3 bg-surface/90 backdrop-blur-sm border-b border-line mb-4">
  <form method="get" class="flex flex-wrap gap-2 items-center" data-action="submit->filter#submit">
    <input name="q" type="search" value="{{ filters.q ?? '' }}" placeholder="Rechercher…"
           class="h-8 px-3 py-0 text-sm bg-surface-2 border-line rounded-lg w-auto min-w-36 flex-1 max-w-xs"
           autocomplete="off" onchange="this.form.submit()">
    <select name="lot" class="h-8 px-3 py-0 text-sm bg-surface-2 border-line rounded-lg w-auto" onchange="this.form.submit()">
      <option value="">Tous les lots</option>
      {% for l in lots %}<option value="{{ l.id }}" {{ (filters.lot ?? '') == l.id ? 'selected' }}>{{ l.name }}</option>{% endfor %}
    </select>
    <select name="status" class="h-8 px-3 py-0 text-sm bg-surface-2 border-line rounded-lg w-auto" onchange="this.form.submit()">
      <option value="">Tous statuts</option>
      <option value="paye" {{ (filters.status ?? '') == 'paye' ? 'selected' }}>Payé</option>
      <option value="partiel" {{ (filters.status ?? '') == 'partiel' ? 'selected' }}>Partiel</option>
      <option value="a_venir" {{ (filters.status ?? '') == 'a_venir' ? 'selected' }}>À venir</option>
    </select>
    <select name="paidBy" class="h-8 px-3 py-0 text-sm bg-surface-2 border-line rounded-lg w-auto" onchange="this.form.submit()">
      <option value="">Tous payeurs</option>
      {% for pr in profiles %}<option value="{{ pr.id }}" {{ (filters.paidBy ?? '') == pr.id ? 'selected' }}>{{ pr.name }}</option>{% endfor %}
    </select>
    <select name="financing" class="h-8 px-3 py-0 text-sm bg-surface-2 border-line rounded-lg w-auto" onchange="this.form.submit()">
      <option value="">Tous financements</option>
      {% for f in financings %}<option value="{{ f.id }}" {{ (filters.financing ?? '') == f.id ? 'selected' }}>{{ f.name }}</option>{% endfor %}
    </select>
    <select name="scope" class="h-8 px-3 py-0 text-sm bg-surface-2 border-line rounded-lg w-auto" onchange="this.form.submit()">
      <option value="">Tout le périmètre</option>
      <option value="devis" {{ (filters.scope ?? '') == 'devis' ? 'selected' }}>Sur devis</option>
      <option value="hors" {{ (filters.scope ?? '') == 'hors' ? 'selected' }}>Hors devis</option>
      <option value="terrain" {{ (filters.scope ?? '') == 'terrain' ? 'selected' }}>Terrain</option>
    </select>
    <button type="submit" class="h-8 w-8 flex items-center justify-center rounded-lg bg-surface-2 border border-line text-muted hover:text-ink shrink-0">
      <i class="ti ti-search text-sm"></i>
    </button>
    {% if (filters.q ?? '') or (filters.lot ?? '') or (filters.status ?? '') or (filters.paidBy ?? '') or (filters.financing ?? '') or (filters.scope ?? '') %}
    <a href="{{ path('app_expense_index') }}" class="h-8 px-3 text-xs text-muted hover:text-ink flex items-center rounded-lg border border-line bg-surface-2 transition-colors">
      Réinitialiser
    </a>
    {% endif %}
  </form>
</div>

<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-3 md:px-4 w-20">Statut</th>
      <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-64">Intervenant</th>
      <th class="hidden md:table-cell text-left text-xs font-medium text-muted py-2 px-3 md:px-4 w-32">Payé par</th>
      <th class="hidden md:table-cell text-left text-xs font-medium text-muted py-2 px-3 md:px-4 w-28">Financement</th>
      <th class="text-left text-xs font-medium text-muted py-2 px-3 md:px-4 w-28">Montant</th>
      <th class="hidden md:table-cell" aria-hidden="true"></th>
    </tr>
  </thead>
  <tbody class="divide-y divide-line" data-filter-target="list">
    {% for expense in expenses %}
      {{ include('expense/_card.html.twig', {expense: expense}) }}
    {% else %}
      <tr><td colspan="7" class="py-4 px-3 text-sm text-muted">Aucune dépense.</td></tr>
    {% endfor %}
  </tbody>
</table>
</div>
{% endblock %}