<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8" />
  <title>Medikamentenübersicht</title>
  <link rel="stylesheet" href="/css/bootstrap.min.css" />
  <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 Medikamente 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">
    <span style="font-size:1.3rem">💊</span>
    <span class="fw-semibold fs-5">Medikamentenübersicht</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">

      <!-- 🔍 Suche -->
      <form method="GET" action="/medications" class="row g-2 mb-3">

        <div class="col-md-6">
          <input type="text"
                 name="q"
                 class="form-control"
                 placeholder="🔍 Suche nach Medikament, Form, Dosierung"
                 value="<%= query?.q || '' %>">
        </div>

        <div class="col-md-3 d-flex gap-2">
          <button class="btn btn-primary w-100">Suchen</button>
          <a href="/medications" class="btn btn-secondary w-100">Reset</a>
        </div>

        <div class="col-md-3 d-flex align-items-center">
          <div class="form-check">
            <input class="form-check-input"
                   type="checkbox"
                   name="onlyActive"
                   value="1"
                   <%= query?.onlyActive === "1" ? "checked" : "" %>>
            <label class="form-check-label">
              Nur aktive Medikamente
            </label>
          </div>
        </div>

      </form>

      <!-- ➕ Neu -->
      <a href="/medications/create" class="btn btn-success mb-3">
        ➕ Neues Medikament
      </a>

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

          <thead class="table-dark">
            <tr>
              <th>Medikament</th>
              <th>Darreichungsform</th>
              <th>Dosierung</th>
              <th>Packung</th>
              <th>Status</th>
              <th>Aktionen</th>
            </tr>
          </thead>

          <tbody>
          <% rows.forEach(r => { %>

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

              <!-- UPDATE-FORM -->
              <form method="POST" action="/medications/update/<%= r.id %>">

                <td><%= r.medication %></td>
                <td><%= r.form %></td>

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

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

                <td class="text-center">
                  <%= r.active ? "Aktiv" : "Inaktiv" %>
                </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>

              <!-- TOGGLE-FORM (separat!) -->
              <form method="POST" action="/medications/toggle/<%= r.medication_id %>">
                <button class="btn btn-sm <%= r.active ? 'btn-outline-danger' : 'btn-outline-success' %>">
                  <%= r.active ? "⛔" : "✅" %>
                </button>
              </form>

                </td>
            </tr>

          <% }) %>
          </tbody>

        </table>
      </div>

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

</body>
</html>
