{% extends 'base.html.twig' %}
{% block title %}{{ expense.description }}{% endblock %}
{% block breadcrumb %}
<i class="ti ti-chevron-right text-[10px] text-line mx-1 shrink-0"></i>
<a href="{{ path('app_expense_index') }}" class="hover:text-ink transition-colors shrink-0">Dépenses</a>
<i class="ti ti-chevron-right text-[10px] text-line mx-1 shrink-0"></i>
<span class="text-ink font-medium truncate">{{ expense.description }}</span>
{% endblock %}
{% block body %}
<div class="rounded-2xl bg-surface border border-line p-5 my-3">
  <div class="amount text-2xl font-medium">{{ expense.totalAmount|number_format(2, ',', ' ') }} €</div>
  <div class="text-muted">{{ expense.description }}</div>

  {% set primaryQuote = expense.primaryQuote %}
  {% if primaryQuote %}
    <div class="mt-2 text-sm">
      <span class="text-muted">Devis ·</span>
      <a href="{{ path('app_quote_edit', {id: primaryQuote.id}) }}" class="text-accent hover:underline">{{ primaryQuote.label }}</a>
      {% if primaryQuote.lot %}<span class="text-muted"> · {{ primaryQuote.lot.name }}</span>{% endif %}
    </div>
  {% endif %}

  <dl class="mt-4 text-sm divide-y divide-line">
    <div class="flex justify-between py-2"><dt class="text-muted">Statut</dt><dd>{{ expense.status.label }}</dd></div>
    {% if expense.usesAdvancedMode %}
      <div class="flex justify-between py-2"><dt class="text-muted">Payé</dt><dd>{{ expense.paidAmount|number_format(2, ',', ' ') }} € / {{ expense.totalAmount|number_format(2, ',', ' ') }} €</dd></div>
    {% elseif not expense.isFullyPaid %}
      <div class="flex justify-between py-2"><dt class="text-muted">Reste à payer</dt><dd>{{ expense.remainingAmount|number_format(2, ',', ' ') }} €</dd></div>
    {% endif %}
    {% if expense.paidBy %}<div class="flex justify-between py-2"><dt class="text-muted">Payé par</dt><dd>{{ expense.paidBy.name }}</dd></div>{% endif %}
    {% if expense.company %}<div class="flex justify-between py-2"><dt class="text-muted">Intervenant</dt><dd>{{ expense.company.name }}</dd></div>{% endif %}
    {% if expense.financing %}<div class="flex justify-between py-2"><dt class="text-muted">Financement</dt><dd>{{ expense.financing.name }}</dd></div>{% endif %}
  </dl>

  {% if expense.usesAdvancedMode and expense.allocations|length %}
    <div class="mt-4">
      <div class="text-sm text-muted mb-1">Ventilation sur devis</div>
      {% for v in expense.allocations %}
        <div class="flex justify-between text-sm py-1"><span>{{ v.quote.label }}</span><span class="amount">{{ v.amount|number_format(2, ',', ' ') }} €</span></div>
      {% endfor %}
    </div>
  {% endif %}

  {% if expense.attachment %}<a href="{{ asset('uploads/' ~ expense.attachment) }}" class="inline-block mt-4 text-accent text-sm">📎 Voir la facture</a>{% endif %}

  <div class="flex gap-2 mt-5">
    <a href="{{ path('app_expense_edit', {id: expense.id}) }}" class="flex-1 text-center rounded-xl bg-surface-2 py-2 text-sm">Modifier</a>
    {% if expense.usesAdvancedMode and expense.status.value != 'paye' %}
    <form method="post" action="{{ path('app_expense_mark_paid', {id: expense.id}) }}" class="flex-1">
      <input type="hidden" name="_token" value="{{ csrf_token('pay' ~ expense.id) }}">
      <button class="w-full rounded-xl bg-ok text-on-accent py-2 text-sm">Marquer payé</button>
    </form>
    {% endif %}
  </div>
</div>
{% endblock %}