<% 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">Achats</p><h1>Dépenses fournisseurs</h1><p class="muted">Saisie des achats, TVA préalable, dettes fournisseurs et justificatifs.</p></div>
    </div>

    <form method="post" action="<%= adminBase %>/comptabilite/achats" enctype="multipart/form-data" class="panel form-grid">
      <h2>Nouvelle dépense</h2>
      <input type="hidden" name="_csrf" value="<%= csrfToken %>">
      <div class="form-grid two">
        <label>Fournisseur<input name="supplier_name" required></label>
        <label>N° facture fournisseur<input name="supplier_invoice_number"></label>
      </div>
      <div class="form-grid two">
        <label>Date achat<input type="date" name="expense_date" required></label>
        <label>Échéance<input type="date" name="due_date"></label>
      </div>
      <label>Compte de charge<select name="account_id" required>
        <% accounts.forEach((account) => { %><option value="<%= account.id %>"><%= account.code %> · <%= account.name %></option><% }) %>
      </select></label>
      <div class="form-grid two">
        <label>Montant HT<input name="subtotal" inputmode="decimal" required></label>
        <label>Taux TVA<input name="vat_rate" inputmode="decimal" value="8.1"></label>
      </div>
      <div class="form-grid two">
        <label>TVA<input name="vat_amount" inputmode="decimal" placeholder="Calculée si vide"></label>
        <label>Total TTC<input name="total" inputmode="decimal" placeholder="Calculé si vide"></label>
      </div>
      <div class="form-grid two">
        <label>Statut<select name="status"><option value="open">À payer</option><option value="paid">Payée</option></select></label>
        <label>Date paiement<input type="date" name="paid_at"></label>
      </div>
      <label>Justificatif<input type="file" name="attachment" accept=".pdf,image/jpeg,image/png,image/webp"></label>
      <label>Notes<textarea name="notes"></textarea></label>
      <button>Comptabiliser la dépense</button>
    </form>

    <section class="panel">
      <h2>Dépenses enregistrées</h2>
      <div class="mobile-list compact-list">
        <% expenses.forEach((expense) => { %>
          <article class="list-card">
            <div class="list-card-head">
              <div><strong><%= expense.supplier_name %></strong><span><%= ui.date(expense.expense_date) %> · <%= expense.account_code %> <%= expense.account_name %></span></div>
              <span class="badge"><%= ui.label(expense.status) %></span>
            </div>
            <div class="detail-grid compact">
              <div class="detail-item"><span>Total</span><strong><%= ui.money(expense.total) %></strong></div>
              <div class="detail-item"><span>TVA</span><strong><%= ui.money(expense.vat_amount) %></strong></div>
              <div class="detail-item"><span>Payé</span><strong><%= ui.money(expense.paid_amount) %></strong></div>
              <div class="detail-item"><span>Échéance</span><strong><%= ui.date(expense.due_date) %></strong></div>
            </div>
            <% if (expense.status === 'open') { %>
              <form method="post" action="<%= adminBase %>/comptabilite/achats/<%= expense.id %>/payer" class="inline-date-action">
                <input type="hidden" name="_csrf" value="<%= csrfToken %>">
                <input type="date" name="paid_at" value="<%= new Date().toISOString().slice(0, 10) %>" aria-label="Date de paiement">
                <button class="secondary">Marquer payée</button>
              </form>
            <% } %>
          </article>
        <% }) %>
        <% if (!expenses.length) { %><p class="empty-state"><strong>Aucune dépense</strong><span>Ajoutez les factures fournisseurs pour suivre charges et TVA préalable.</span></p><% } %>
      </div>
    </section>
  </section>
</div>
