<%- include("../partials/page-header", {
  user,
  title: t.paidInvoices.title,
  subtitle: "",
  showUserName: true
}) %>

<% if (query?.error === "already_credited") { %>
  <div class="alert alert-warning">
    ⚠️ <%= t.global.nodata %>
  </div>
<% } %>

<div class="container mt-4">
  <%- include("../partials/flash") %>
  <h4><%= t.paidInvoices.title %></h4>

  <form method="GET" action="/invoices/paid"
    style="margin-bottom:20px; display:flex; gap:15px;">

    <div>
      <label><%= t.paidInvoices.year %></label>
      <select name="year" class="form-select" id="paidYear">
        <% years.forEach(y => { %>
          <option value="<%= y %>" <%= y==selectedYear?"selected":"" %>><%= y %></option>
        <% }) %>
      </select>
    </div>

    <div>
      <label><%= t.paidInvoices.quarter %></label>
      <select name="quarter" class="form-select" id="paidQuarter">
        <option value="0">Alle</option>
        <option value="1" <%= selectedQuarter==1?"selected":"" %>>Q1</option>
        <option value="2" <%= selectedQuarter==2?"selected":"" %>>Q2</option>
        <option value="3" <%= selectedQuarter==3?"selected":"" %>>Q3</option>
        <option value="4" <%= selectedQuarter==4?"selected":"" %>>Q4</option>
      </select>
    </div>

  </form>

  <form id="creditForm" method="POST" action="" style="margin-bottom:15px;">
    <button id="creditBtn" type="submit" class="btn btn-warning" disabled>
      ➖ <%= t.creditOverview.creditnote %>
    </button>
  </form>

  <table class="table table-hover">
    <thead>
      <tr>
        <th>#</th>
        <th><%= t.paidInvoices.patient %></th>
        <th><%= t.paidInvoices.date %></th>
        <th><%= t.paidInvoices.amount %></th>
      </tr>
    </thead>
    <tbody>
      <% invoices.forEach(inv => { %>
        <tr class="invoice-row" data-id="<%= inv.id %>" style="cursor:pointer;">
          <td><%= inv.id %></td>
          <td><%= inv.firstname %> <%= inv.lastname %></td>
          <td><%= inv.invoice_date_formatted %></td>
          <td><%= inv.total_amount_formatted %> €</td>
        </tr>
      <% }) %>
    </tbody>
  </table>

  <script src="/js/paid-invoices.js"></script>
  <script src="/js/invoice-select.js" defer></script>
</div>
