<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8" />
    <title>Patientenübersicht</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="/css/bootstrap.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"
      >
        <span style="font-size: 1.4rem">👥</span>
        <span class="fw-semibold fs-5">Patientenübersicht</span>
      </div>

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

    <div class="container mt-4">
      <!-- PATIENT INFO -->
      <div class="card shadow mb-4">
        <div class="card-body">
          <h4>👤 <%= patient.firstname %> <%= patient.lastname %></h4>

          <p class="text-muted mb-3">
            Geboren am <%= new
            Date(patient.birthdate).toLocaleDateString("de-DE") %>
          </p>

          <ul class="list-group">
            <li class="list-group-item">
              <strong>E-Mail:</strong> <%= patient.email || "-" %>
            </li>
            <li class="list-group-item">
              <strong>Telefon:</strong> <%= patient.phone || "-" %>
            </li>
            <li class="list-group-item">
              <strong>Adresse:</strong>
              <%= patient.street || "" %> <%= patient.house_number || "" %>, <%=
              patient.postal_code || "" %> <%= patient.city || "" %>
            </li>
          </ul>
        </div>
      </div>

      <!-- =========================
           MEDIKAMENTE & RECHNUNGEN
      ========================== -->
      <div
        class="row g-3"
        style="
          height: calc(100vh - 420px);
          min-height: 300px;
          padding-bottom: 3rem;
          overflow: hidden;
        "
      >
        <!-- 💊 MEDIKAMENTE -->
        <div class="col-lg-6 h-100">
          <div class="card shadow h-100">
            <div class="card-body d-flex flex-column h-100">
              <h5>💊 Aktuelle Medikamente</h5>

              <div
                style="
                  flex: 1 1 auto;
                  overflow-y: auto;
                  min-height: 0;
                  padding-bottom: 1.5rem;
                "
              >
                <% if (medications.length === 0) { %>
                <p class="text-muted">Keine aktiven Medikamente</p>
                <% } else { %>
                <table class="table table-sm table-bordered mt-2">
                  <thead class="table-light">
                    <tr>
                      <th>Medikament</th>
                      <th>Variante</th>
                      <th>Anweisung</th>
                    </tr>
                  </thead>
                  <tbody>
                    <% medications.forEach(m => { %>
                    <tr>
                      <td><%= m.medication_name %></td>
                      <td><%= m.variant_dosage %></td>
                      <td><%= m.dosage_instruction || "-" %></td>
                    </tr>
                    <% }) %>
                  </tbody>
                </table>
                <% } %>
              </div>
            </div>
          </div>
        </div>

        <!-- 🧾 RECHNUNGEN -->
        <div class="col-lg-6 h-100">
          <div class="card shadow h-100">
            <div class="card-body d-flex flex-column h-100">
              <h5>🧾 Rechnungen</h5>

              <div
                style="
                  flex: 1 1 auto;
                  overflow-y: auto;
                  min-height: 0;
                  padding-bottom: 1.5rem;
                "
              >
                <% if (invoices.length === 0) { %>
                <p class="text-muted">Keine Rechnungen vorhanden</p>
                <% } else { %>
                <table class="table table-sm table-bordered mt-2">
                  <thead class="table-light">
                    <tr>
                      <th>Datum</th>
                      <th>Betrag</th>
                      <th>PDF</th>
                    </tr>
                  </thead>
                  <tbody>
                    <% invoices.forEach(i => { %>
                    <tr>
                      <td>
                        <%= new Date(i.invoice_date).toLocaleDateString("de-DE")
                        %>
                      </td>
                      <td><%= Number(i.total_amount).toFixed(2) %> €</td>
                      <td>
                        <% if (i.file_path) { %>
                        <a
                          href="<%= i.file_path %>"
                          target="_blank"
                          class="btn btn-sm btn-outline-primary"
                        >
                          📄 Öffnen
                        </a>
                        <% } else { %> - <% } %>
                      </td>
                    </tr>
                    <% }) %>
                  </tbody>
                </table>
                <% } %>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
