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

  <link rel="stylesheet" href="/css/bootstrap.min.css">
   <link rel="stylesheet" href="/css/style.css">
  <link rel="stylesheet" href="/bootstrap-icons/bootstrap-icons.min.css">
  <script src="/js/bootstrap.bundle.min.js"></script>

  <!-- ✅ Inline Edit wie bei medications -->
  <script src="/js/services-lock.js"></script>

  <style>
    input.form-control { box-shadow: none !important; }

    input.form-control:disabled {
      background-color: #fff !important;
      color: #212529 !important;
      opacity: 1 !important;
      border: none !important;
      box-shadow: none !important;
      outline: none !important;
    }

    input.form-control:disabled:focus {
      box-shadow: none !important;
      outline: none !important;
    }

    /* Inaktive User ROT */
    tr.table-secondary > td {
      background-color: #f8d7da !important;
    }
  </style>
</head>

<body class="bg-light">

<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-shield-lock fs-4"></i>
    <span class="fw-semibold fs-5">User Verwaltung</span>
  </div>

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

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

  <div class="card shadow">
    <div class="card-body">

      <h4 class="mb-3">Benutzerübersicht</h4>

      <!-- ➕ Neu -->
      <div class="mb-3 text-end">
        <a href="/admin/create-user" class="btn btn-primary">
          + Neuen Benutzer anlegen
        </a>
      </div>

      <!-- 🔍 Suche -->
      <form method="GET" action="/admin/users" class="d-flex gap-2 mb-3">
        <input
          type="text"
          name="q"
          class="form-control"
          placeholder="🔍 Benutzer suchen (Name oder Username)"
          value="<%= query?.q || '' %>"
        >
        <button class="btn btn-outline-primary">Suchen</button>

        <% if (query?.q) { %>
          <a href="/admin/users" class="btn btn-outline-secondary">Reset</a>
        <% } %>
      </form>

      <div class="table-responsive">
        <table class="table table-bordered table-hover table-sm align-middle">

          <thead class="table-dark">
            <tr>
              <th>ID</th>
              <th>Titel</th>
              <th>Vorname</th>
              <th>Nachname</th>
              <th>Username</th>
              <th>Rolle</th>
              <th>Status</th>
              <th style="width: 260px;">Aktionen</th>
            </tr>
          </thead>

          <tbody>
          <% users.forEach(u => { %>

            <tr class="<%= u.active ? '' : 'table-secondary' %>">

              <!-- ✅ UPDATE-FORM (wie medications) -->
              <form method="POST" action="/admin/users/update/<%= u.id %>">

                <td><%= u.id %></td>

                <td>
                  <input
                    type="text"
                    name="title"
                    value="<%= u.title || '' %>"
                    class="form-control form-control-sm"
                    disabled
                  >
                </td>

                <td>
                  <input
                    type="text"
                    name="first_name"
                    value="<%= u.first_name %>"
                    class="form-control form-control-sm"
                    disabled
                  >
                </td>

                <td>
                  <input
                    type="text"
                    name="last_name"
                    value="<%= u.last_name %>"
                    class="form-control form-control-sm"
                    disabled
                  >
                </td>

                <td>
                  <input
                    type="text"
                    name="username"
                    value="<%= u.username %>"
                    class="form-control form-control-sm"
                    disabled
                  >
                </td>

                <td>
                  <select
                    name="role"
                    class="form-select form-select-sm"
                    disabled
                  >
                    <option value="mitarbeiter" <%= u.role === "mitarbeiter" ? "selected" : "" %>>
                      Mitarbeiter
                    </option>
                    <option value="arzt" <%= u.role === "arzt" ? "selected" : "" %>>
                      Arzt
                    </option>
                  </select>
                </td>

                <td class="text-center">
                  <% if (u.active === 0) { %>
                    <span class="badge bg-secondary">Inaktiv</span>
                  <% } else if (u.lock_until && new Date(u.lock_until) > new Date()) { %>
                    <span class="badge bg-danger">Gesperrt</span>
                  <% } else { %>
                    <span class="badge bg-success">Aktiv</span>
                  <% } %>
                </td>

                <td class="d-flex gap-2">

                  <button class="btn btn-sm btn-outline-success save-btn" disabled>
                    💾
                  </button>

                  <button type="button" class="btn btn-sm btn-outline-warning lock-btn">
                    🔓
                  </button>

              </form>

              <!-- ✅ Aktiv / Deaktiv separat -->
              <% if (u.id !== currentUser.id) { %>
                <form method="POST" action="/admin/users/<%= u.active ? "deactivate" : "activate" %>/<%= u.id %>">
                  <button class="btn btn-sm <%= u.active ? "btn-outline-danger" : "btn-outline-success" %>">
                    <%= u.active ? "⛔" : "✅" %>
                  </button>
                </form>
              <% } else { %>
                <span class="text-muted fst-italic small align-self-center">
                  Du selbst
                </span>
              <% } %>

                </td>
            </tr>

          <% }) %>
          </tbody>

        </table>
      </div>

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

</body>
</html>
