<!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">
    <nav class="navbar navbar-dark bg-dark position-relative px-3">
      <!-- 🟢 ZENTRIERTER TITEL -->
      <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>

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

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

      <!-- Aktionen oben -->
      <div class="d-flex gap-2 mb-3">
        <a href="/patients/create" class="btn btn-success"> + Neuer Patient </a>
      </div>

      <div class="card shadow">
        <div class="card-body">
          <!-- Suchformular -->
          <form method="GET" action="/patients" class="row g-2 mb-4">
            <div class="col-md-3">
              <input
                type="text"
                name="firstname"
                class="form-control"
                placeholder="Vorname"
                value="<%= query?.firstname || '' %>"
              />
            </div>

            <div class="col-md-3">
              <input
                type="text"
                name="lastname"
                class="form-control"
                placeholder="Nachname"
                value="<%= query?.lastname || '' %>"
              />
            </div>

            <div class="col-md-3">
              <input
                type="date"
                name="birthdate"
                class="form-control"
                value="<%= query?.birthdate || '' %>"
              />
            </div>

            <div class="col-md-3 d-flex gap-2">
              <button class="btn btn-primary w-100">Suchen</button>
              <a href="/patients" class="btn btn-secondary w-100">
                Zurücksetzen
              </a>
            </div>
          </form>

          <!-- Tabelle -->
          <div class="table-responsive">
            <table
              class="table table-bordered table-hover align-middle table-sm"
            >
              <thead class="table-dark">
                <tr>
                  <th>ID</th>
                  <th>Name</th>
                  <th>N.I.E. / DNI</th>
                  <th>Geschlecht</th>
                  <th>Geburtstag</th>
                  <th>E-Mail</th>
                  <th>Telefon</th>
                  <th>Adresse</th>
                  <th>Land</th>
                  <th>Status</th>
                  <th>Notizen</th>
                  <th>Erstellt</th>
                  <th>Geändert</th>
                  <th>Aktionen</th>
                </tr>
              </thead>
              <tbody>
                <% if (patients.length === 0) { %>
                <tr>
                  <td colspan="13" class="text-center text-muted">
                    Keine Patienten gefunden
                  </td>
                </tr>
                <% } %> <% patients.forEach(p => { %>
                <tr>
                  <td><%= p.id %></td>

                  <td><strong><%= p.firstname %> <%= p.lastname %></strong></td>
                  <td><%= p.dni || "-" %></td>

                  <td>
                    <% if (p.gender === 'm') { %>m <% } else if (p.gender ===
                    'w') { %>w <% } else if (p.gender === 'd') { %>d <% } else {
                    %>-<% } %>
                  </td>

                  <td>
                    <%= new Date(p.birthdate).toLocaleDateString("de-DE") %>
                  </td>

                  <td><%= p.email || "-" %></td>
                  <td><%= p.phone || "-" %></td>

                  <td>
                    <%= p.street || "" %> <%= p.house_number || "" %><br />
                    <%= p.postal_code || "" %> <%= p.city || "" %>
                  </td>

                  <td><%= p.country || "-" %></td>

                  <td>
                    <% if (p.active) { %>
                    <span class="badge bg-success">Aktiv</span>
                    <% } else { %>
                    <span class="badge bg-secondary">Inaktiv</span>
                    <% } %>
                  </td>

                  <td style="max-width: 200px">
                    <%= p.notes ? p.notes.substring(0, 80) : "-" %>
                  </td>

                  <td><%= new Date(p.created_at).toLocaleString("de-DE") %></td>
                  <td><%= new Date(p.updated_at).toLocaleString("de-DE") %></td>

                  <!-- AKTIONEN -->
                  <td class="text-nowrap">
                    <div class="dropdown">
                      <button
                        class="btn btn-sm btn-outline-secondary"
                        data-bs-toggle="dropdown"
                      >
                        Auswahl ▾
                      </button>

                      <ul
                        class="dropdown-menu dropdown-menu-end position-fixed"
                      >
                        <!-- ✏️ BEARBEITEN -->
                        <li>
                          <a
                            class="dropdown-item"
                            href="/patients/edit/<%= p.id %>"
                          >
                            ✏️ Bearbeiten
                          </a>
                        </li>

                        <li><hr class="dropdown-divider" /></li>

                        <!-- 🪑 WARTEZIMMER -->
                        <% if (p.waiting_room) { %>
                        <li>
                          <span class="dropdown-item text-muted">
                            🪑 Wartet bereits
                          </span>
                        </li>
                        <% } else { %>
                        <li>
                          <form
                            method="POST"
                            action="/patients/waiting-room/<%= p.id %>"
                          >
                            <button class="dropdown-item">
                              🪑 Ins Wartezimmer
                            </button>
                          </form>
                        </li>
                        <% } %>

                        <li><hr class="dropdown-divider" /></li>

                        <!-- 💊 MEDIKAMENTE -->
                        <li>
                          <a
                            class="dropdown-item"
                            href="/patients/<%= p.id %>/medications"
                          >
                            💊 Medikamente
                          </a>
                        </li>

                        <li><hr class="dropdown-divider" /></li>

                        <!-- 🔒 STATUS -->
                        <li>
                          <% if (p.active) { %>
                          <form
                            method="POST"
                            action="/patients/deactivate/<%= p.id %>"
                          >
                            <button class="dropdown-item text-warning">
                              🔒 Sperren
                            </button>
                          </form>
                          <% } else { %>
                          <form
                            method="POST"
                            action="/patients/activate/<%= p.id %>"
                          >
                            <button class="dropdown-item text-success">
                              🔓 Entsperren
                            </button>
                          </form>
                          <% } %>
                        </li>

                        <!-- 📋 ÜBERSICHT -->
                        <li>
                          <a class="dropdown-item" href="/patients/<%= p.id %>">
                            📋 Übersicht
                          </a>
                        </li>

                        <li><hr class="dropdown-divider" /></li>

                        <!-- 📎 DATEI-UPLOAD -->
                        <li class="px-3 py-2">
                          <form
                            method="POST"
                            action="/patients/<%= p.id %>/files"
                            enctype="multipart/form-data"
                          >
                            <input
                              type="file"
                              name="file"
                              class="form-control form-control-sm mb-2"
                              required
                            />
                            <button class="btn btn-sm btn-secondary w-100">
                              📎 Hochladen
                            </button>
                          </form>
                        </li>
                      </ul>
                    </div>
                  </td>
                </tr>
                <% }) %>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
    <script src="/js/bootstrap.bundle.min.js"></script>
  </body>
</html>
