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

<div class="content p-4">
  <div class="container-fluid mt-2">

    <form method="get" class="row g-2 mb-4">
      <div class="col-auto">
        <input type="number" name="fromYear" class="form-control"
          placeholder="<%= t.invoiceAdmin.fromyear %>"
          value="<%= fromYear %>" />
      </div>
      <div class="col-auto">
        <input type="number" name="toYear" class="form-control"
          placeholder="<%= t.invoiceAdmin.toyear %>"
          value="<%= toYear %>" />
      </div>
      <div class="col-auto">
        <button class="btn btn-outline-secondary"><%= t.global.filter %></button>
      </div>
    </form>

    <div class="row g-3">

      <!-- Jahresumsatz -->
      <div class="col-xl-3 col-lg-6">
        <div class="card h-100">
          <div class="card-header fw-semibold"><%= t.global.yearcash %></div>
          <div class="card-body p-0">
            <table class="table table-sm table-striped mb-0">
              <thead>
                <tr>
                  <th><%= t.global.year %></th>
                  <th class="text-end">€</th>
                </tr>
              </thead>
              <tbody>
                <% if (!yearly || yearly.length === 0) { %>
                  <tr><td colspan="2" class="text-center text-muted"><%= t.global.nodata %></td></tr>
                <% } %>
                <% (yearly || []).forEach(y => { %>
                  <tr>
                    <td><%= y.year %></td>
                    <td class="text-end fw-semibold"><%= Number(y.total).toFixed(2) %></td>
                  </tr>
                <% }) %>
              </tbody>
            </table>
          </div>
        </div>
      </div>

      <!-- Quartalsumsatz -->
      <div class="col-xl-3 col-lg-6">
        <div class="card h-100">
          <div class="card-header fw-semibold"><%= t.global.quartalcash %></div>
          <div class="card-body p-0">
            <table class="table table-sm table-striped mb-0">
              <thead>
                <tr>
                  <th><%= t.global.year %></th>
                  <th>Q</th>
                  <th class="text-end">€</th>
                </tr>
              </thead>
              <tbody>
                <% if (!quarterly || quarterly.length === 0) { %>
                  <tr><td colspan="3" class="text-center text-muted"><%= t.global.nodata %></td></tr>
                <% } %>
                <% (quarterly || []).forEach(q => { %>
                  <tr>
                    <td><%= q.year %></td>
                    <td>Q<%= q.quarter %></td>
                    <td class="text-end fw-semibold"><%= Number(q.total).toFixed(2) %></td>
                  </tr>
                <% }) %>
              </tbody>
            </table>
          </div>
        </div>
      </div>

      <!-- Monatsumsatz -->
      <div class="col-xl-3 col-lg-6">
        <div class="card h-100">
          <div class="card-header fw-semibold"><%= t.global.monthcash %></div>
          <div class="card-body p-0">
            <table class="table table-sm table-striped mb-0">
              <thead>
                <tr>
                  <th><%= t.global.month %></th>
                  <th class="text-end">€</th>
                </tr>
              </thead>
              <tbody>
                <% if (!monthly || monthly.length === 0) { %>
                  <tr><td colspan="2" class="text-center text-muted"><%= t.global.nodata %></td></tr>
                <% } %>
                <% (monthly || []).forEach(m => { %>
                  <tr>
                    <td><%= m.month %></td>
                    <td class="text-end fw-semibold"><%= Number(m.total).toFixed(2) %></td>
                  </tr>
                <% }) %>
              </tbody>
            </table>
          </div>
        </div>
      </div>

      <!-- Umsatz pro Patient -->
      <div class="col-xl-3 col-lg-6">
        <div class="card h-100">
          <div class="card-header fw-semibold"><%= t.global.patientcash %></div>
          <div class="card-body p-2">
            <form method="get" class="mb-2 d-flex gap-2">
              <input type="hidden" name="fromYear" value="<%= fromYear %>" />
              <input type="hidden" name="toYear" value="<%= toYear %>" />
              <input type="text" name="q" value="<%= search %>"
                class="form-control form-control-sm"
                placeholder="<%= t.invoiceAdmin.searchpatient %>" />
              <button class="btn btn-sm btn-outline-primary"><%= t.global.search %></button>
              <a href="/admin/invoices?fromYear=<%= fromYear %>&toYear=<%= toYear %>"
                class="btn btn-sm btn-outline-secondary"><%= t.global.reset %></a>
            </form>
            <table class="table table-sm table-striped mb-0">
              <thead>
                <tr>
                  <th><%= t.global.patient %></th>
                  <th class="text-end">€</th>
                </tr>
              </thead>
              <tbody>
                <% if (!patients || patients.length === 0) { %>
                  <tr><td colspan="2" class="text-center text-muted"><%= t.global.nodata %></td></tr>
                <% } %>
                <% (patients || []).forEach(p => { %>
                  <tr>
                    <td><%= p.patient %></td>
                    <td class="text-end fw-semibold"><%= Number(p.total).toFixed(2) %></td>
                  </tr>
                <% }) %>
              </tbody>
            </table>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>
