<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8" />
    <title>
      Patientenübersicht – <%= patient.firstname %> <%= patient.lastname %>
    </title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="/css/bootstrap.min.css" />
    <script src="/js/service-search.js"></script>
  </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">
          Patient – <%= patient.firstname %> <%= patient.lastname %>
        </span>
      </div>

      <div class="ms-auto">
        <form
          method="POST"
          action="/patients/<%= patient.id %>/waiting-room"
          onsubmit="return confirm('Patient ins Wartezimmer zurücksetzen?')"
        >
          <button class="btn btn-warning btn-sm">🪑 Ins Wartezimmer</button>
        </form>
      </div>
    </nav>

    <div class="container mt-4">
      <%- include("partials/flash") %>

      <!-- PATIENTENDATEN -->
      <div class="card shadow mb-4">
        <div class="card-body">
          <h4>Patientendaten</h4>
          <table class="table table-sm">
            <tr>
              <th>Vorname</th>
              <td><%= patient.firstname %></td>
            </tr>
            <tr>
              <th>Nachname</th>
              <td><%= patient.lastname %></td>
            </tr>
            <tr>
              <th>Geburtsdatum</th>
              <td>
                <%= patient.birthdate ? new
                Date(patient.birthdate).toLocaleDateString("de-DE") : "-" %>
              </td>
            </tr>
            <tr>
              <th>E-Mail</th>
              <td><%= patient.email || "-" %></td>
            </tr>
            <tr>
              <th>Telefon</th>
              <td><%= patient.phone || "-" %></td>
            </tr>
          </table>
        </div>
      </div>

      <!-- AKTIONEN -->
      <div class="d-flex gap-2 mb-4">
        <a
          href="/patients/<%= patient.id %>/medications?returnTo=overview"
          class="btn btn-primary"
        >
          💊 Medikation verwalten
        </a>

        <a
          href="/patients/edit/<%= patient.id %>?returnTo=overview"
          class="btn btn-outline-info"
        >
          ✏️ Patient bearbeiten
        </a>

        <form method="POST" action="/patients/<%= patient.id %>/discharge">
          <button
            class="btn btn-danger btn-sm"
            onclick="return confirm('Patient wirklich entlassen?')"
          >
            ✅ Entlassen
          </button>
        </form>
      </div>

      <!-- UNTERER BEREICH -->
      <div
        class="row g-3"
        style="
          height: calc(100vh - 520px);
          min-height: 320px;
          padding-bottom: 3rem;
          overflow: hidden;
        "
      >
        <!-- 📝 NOTIZEN -->
        <div class="col-lg-5 col-md-12 h-100">
          <div class="card shadow h-100">
            <div class="card-body d-flex flex-column h-100">
              <h5>📝 Notizen</h5>

              <form
                method="POST"
                action="/patients/<%= patient.id %>/notes"
                style="flex-shrink: 0"
              >
                <textarea
                  class="form-control mb-2"
                  name="note"
                  rows="3"
                  style="resize: none"
                  placeholder="Neue Notiz hinzufügen…"
                ></textarea>
                <button class="btn btn-sm btn-primary">
                  ➕ Notiz speichern
                </button>
              </form>

              <hr class="my-2" style="flex-shrink: 0" />

              <div
                style="
                  flex: 1 1 auto;
                  overflow-y: auto;
                  min-height: 0;
                  padding-bottom: 2rem;
                "
              >
                <% if (!notes || notes.length === 0) { %>
                <p class="text-muted">Keine Notizen vorhanden</p>
                <% } else { %> <% notes.forEach(n => { %>
                <div class="mb-3 p-2 border rounded bg-light">
                  <div class="small text-muted">
                    <%= new Date(n.created_at).toLocaleString("de-DE") %> <% if
                    (n.first_name && n.last_name) { %> – <%= (n.title ? n.title
                    + " " : "") %><%= n.first_name %> <%= n.last_name %> <% } %>
                  </div>
                  <div><%= n.note %></div>
                </div>
                <% }) %> <% } %>
              </div>
            </div>
          </div>
        </div>

        <!-- 💊 MEDIKAMENT -->
        <div class="col-lg-3 col-md-6 h-100">
          <div class="card shadow h-100">
            <div class="card-body">
              <h5>💊 Rezept erstellen</h5>

              <form
                method="POST"
                action="/patients/<%= patient.id %>/medications/assign"
              >
                <select
                  name="medication_variant_id"
                  class="form-select mb-2"
                  required
                >
                  <option value="">Bitte auswählen…</option>
                  <% medicationVariants.forEach(mv => { %>
                  <option value="<%= mv.variant_id %>">
                    <%= mv.medication_name %> – <%= mv.form_name %> – <%=
                    mv.dosage %>
                  </option>
                  <% }) %>
                </select>

                <input
                  type="text"
                  name="dosage_instruction"
                  class="form-control mb-2"
                  placeholder="z. B. 1–0–1"
                />

                <input
                  type="date"
                  name="start_date"
                  class="form-control mb-2"
                  value="<%= new Date().toISOString().split('T')[0] %>"
                />

                <input type="date" name="end_date" class="form-control mb-3" />

                <button class="btn btn-sm btn-success w-100">
                  ➕ Verordnen
                </button>
              </form>
            </div>
          </div>
        </div>

        <!-- 🧾 HEUTIGE LEISTUNGEN -->
        <div class="col-lg-4 col-md-6 h-100">
          <div class="card shadow h-100">
            <div class="card-body d-flex flex-column h-100">
              <h5>🧾 Heutige Leistungen</h5>

              <form
                method="POST"
                action="/patients/<%= patient.id %>/services"
                style="flex-shrink: 0"
              >
                <input
                  type="text"
                  id="serviceSearch"
                  class="form-control mb-2"
                  placeholder="Leistung suchen…"
                />

                <select
                  name="service_id"
                  id="serviceSelect"
                  class="form-select mb-2"
                  size="5"
                  required
                >
                  <% services.forEach(s => { %>
                  <option value="<%= s.id %>">
                    <%= s.name %> – <%= Number(s.price || 0).toFixed(2) %> €
                  </option>
                  <% }) %>
                </select>

                <input
                  type="number"
                  name="quantity"
                  class="form-control mb-2"
                  value="1"
                  min="1"
                />

                <button class="btn btn-sm btn-success w-100">
                  ➕ Leistung hinzufügen
                </button>
              </form>

              <hr class="my-2" style="flex-shrink: 0" />

              <div
                style="
                  flex: 1 1 auto;
                  overflow-y: auto;
                  min-height: 0;
                  padding-bottom: 2rem;
                "
              >
                <% if (!todayServices || todayServices.length === 0) { %>
                <p class="text-muted">Noch keine Leistungen für heute.</p>
                <% } else { %> <% todayServices.forEach(ls => { %>
                <div class="border rounded p-2 mb-2 bg-light">
                  <strong><%= ls.name %></strong><br />
                  Menge: <%= ls.quantity %><br />
                  Preis: <%= Number(ls.price).toFixed(2) %> €
                </div>
                <% }) %> <% } %>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
