<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8" />
    <title>Rechnungsübersicht</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <link rel="stylesheet" href="/css/bootstrap.min.css" />
    <link rel="stylesheet" href="/bootstrap-icons/bootstrap-icons.min.css" />
  </head>

  <body class="bg-light">
    <!-- =========================
     NAVBAR
========================== -->
    <nav class="navbar navbar-dark bg-dark position-relative px-3">
      <div
        class="position-absolute top-50 start-50 translate-middle d-flex align-items-center gap-2 text-white"
      >
        <i class="bi bi-calculator fs-4"></i>
        <span class="fw-semibold fs-5">Rechnungsübersicht</span>
      </div>

      <!-- 🔵 RECHTS: DASHBOARD -->
      <div class="ms-auto">
        <a href="/dashboard" class="btn btn-outline-primary btn-sm">
          ⬅️ Dashboard
        </a>
      </div>
    </nav>

    <!-- =========================
     FILTER: JAHR VON / BIS
========================== -->
    <div class="container-fluid mt-4">
      <form method="get" class="row g-2 mb-4">
        <div class="col-auto">
          <input
            type="number"
            name="fromYear"
            class="form-control"
            placeholder="Von Jahr"
            value="<%= fromYear %>"
          />
        </div>

        <div class="col-auto">
          <input
            type="number"
            name="toYear"
            class="form-control"
            placeholder="Bis Jahr"
            value="<%= toYear %>"
          />
        </div>

        <div class="col-auto">
          <button class="btn btn-outline-secondary">Filtern</button>
        </div>
      </form>

      <!-- =========================
       GRID – 4 SPALTEN
  ========================== -->
      <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">Jahresumsatz</div>
            <div class="card-body p-0">
              <table class="table table-sm table-striped mb-0">
                <thead>
                  <tr>
                    <th>Jahr</th>
                    <th class="text-end">€</th>
                  </tr>
                </thead>
                <tbody>
                  <% if (yearly.length === 0) { %>
                  <tr>
                    <td colspan="2" class="text-center text-muted">
                      Keine Daten
                    </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">Quartalsumsatz</div>
            <div class="card-body p-0">
              <table class="table table-sm table-striped mb-0">
                <thead>
                  <tr>
                    <th>Jahr</th>
                    <th>Q</th>
                    <th class="text-end">€</th>
                  </tr>
                </thead>
                <tbody>
                  <% if (quarterly.length === 0) { %>
                  <tr>
                    <td colspan="3" class="text-center text-muted">
                      Keine Daten
                    </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">Monatsumsatz</div>
            <div class="card-body p-0">
              <table class="table table-sm table-striped mb-0">
                <thead>
                  <tr>
                    <th>Monat</th>
                    <th class="text-end">€</th>
                  </tr>
                </thead>
                <tbody>
                  <% if (monthly.length === 0) { %>
                  <tr>
                    <td colspan="2" class="text-center text-muted">
                      Keine Daten
                    </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">Umsatz pro Patient</div>
            <div class="card-body p-2">
              <!-- 🔍 Suche -->
              <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="Patient suchen..."
                />

                <button class="btn btn-sm btn-outline-primary">Suchen</button>

                <a
                  href="/admin/invoices?fromYear=<%= fromYear %>&toYear=<%= toYear %>"
                  class="btn btn-sm btn-outline-secondary"
                >
                  Reset
                </a>
              </form>

              <table class="table table-sm table-striped mb-0">
                <thead>
                  <tr>
                    <th>Patient</th>
                    <th class="text-end">€</th>
                  </tr>
                </thead>
                <tbody>
                  <% if (patients.length === 0) { %>
                  <tr>
                    <td colspan="2" class="text-center text-muted">
                      Keine Daten
                    </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>
  </body>
</html>
