<% layout('layouts/main') %>
<% const adminBase = typeof adminBaseUrl !== 'undefined' ? adminBaseUrl : '/admin'; %>
<div class="app-shell">
  <%- partial('partials/admin-nav') %>
  <section class="content">
    <div class="page-head"><div><p class="eyebrow">Débiteurs</p><h1>Créances clients</h1><p class="muted">Suivi des factures ouvertes par ancienneté, pour relances et contrôle de trésorerie.</p></div></div>

    <section class="stat-grid">
      <article class="stat"><strong><%= ui.money(report.total) %></strong><span>Total ouvert</span></article>
      <article class="stat"><strong><%= ui.money(report.buckets.current) %></strong><span>Non échu</span></article>
      <article class="stat"><strong><%= ui.money(report.buckets.d1_30) %></strong><span>1 à 30 jours</span></article>
      <article class="stat"><strong><%= ui.money(Number(report.buckets.d31_60 || 0) + Number(report.buckets.d61_90 || 0) + Number(report.buckets.d90_plus || 0)) %></strong><span>Plus de 30 jours</span></article>
    </section>

    <section class="panel">
      <h2>Factures ouvertes</h2>
      <div class="table-wrap compact-table"><table><thead><tr><th>Facture</th><th>Client</th><th>Échéance</th><th>Retard</th><th>Solde</th></tr></thead><tbody>
        <% report.invoices.forEach(invoice => { %>
          <tr>
            <td><a href="<%= adminBase %>/factures/<%= invoice.id %>"><strong><%= invoice.invoice_number %></strong></a><br><span class="muted"><%= ui.label(invoice.status) %></span></td>
            <td><%= invoice.company_name || `${invoice.first_name} ${invoice.last_name}` %><br><span class="muted"><%= invoice.email %></span></td>
            <td><%= ui.date(invoice.due_date) %></td>
            <td><%= invoice.overdue_days > 0 ? `${invoice.overdue_days} jour(s)` : 'Non échue' %></td>
            <td><%= ui.money(invoice.open_amount) %></td>
          </tr>
        <% }) %>
        <% if (!report.invoices.length) { %><tr><td colspan="5">Aucune créance ouverte.</td></tr><% } %>
      </tbody></table></div>
    </section>
  </section>
</div>
