<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Leistungen</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <script src="/js/services-lock.js"></script>   ✔ erlaubt
</head>
<body>

<!-- NAVBAR -->
<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.3rem;">🧾</span>
        <span class="fw-semibold fs-5">Leistungen</span>
    </div>

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

</nav>

<!-- CONTENT -->
<div class="container mt-4">

    <h4>Leistungen</h4>

    <!-- SUCHFORMULAR -->
    <form method="GET" action="/services" class="row g-2 mb-3">

        <div class="col-md-6">
            <input type="text"
                   name="q"
                   class="form-control"
                   placeholder="🔍 Suche nach Name oder Kategorie"
                   value="<%= query?.q || '' %>">
        </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 Leistungen
                </label>
            </div>
        </div>

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

    </form>

    <!-- NEUE LEISTUNG -->
    <a href="/services/create" class="btn btn-success mb-3">
        ➕ Neue Leistung
    </a>

    <!-- TABELLE -->
    <table class="table table-bordered table-sm align-middle">

        <!-- FIXE SPALTENBREITEN -->
        <colgroup>
            <col style="width:35%">
            <col style="width:25%">
            <col style="width:10%">
            <col style="width:10%">
            <col style="width:8%">
            <col style="width:12%">
        </colgroup>

        <thead class="table-light">
            <tr>
                <th>Bezeichnung (DE)</th>
                <th>Bezeichnung (ES)</th>
                <th>Preis</th>
                <th>Preis C70</th>
                <th>Status</th>
                <th>Aktionen</th>
            </tr>
        </thead>

        <tbody>
<% services.forEach(s => { %>
<tr class="<%= s.active ? '' : 'table-secondary' %>">

  <!-- DE -->
  <td><%= s.name_de %></td>

  <!-- ES -->
  <td><%= s.name_es || "-" %></td>

  <!-- FORM BEGINNT -->
  <form method="POST" action="/services/<%= s.id %>/update-price">

    <!-- PREIS -->
    <td>
      <input name="price"
       value="<%= s.price %>"
       class="form-control form-control-sm text-end w-100"
       disabled>
    </td>

    <!-- PREIS C70 -->
    <td>
      <input name="price_c70"
       value="<%= s.price_c70 %>"
       class="form-control form-control-sm text-end w-100"
       disabled>
    </td>

    <!-- STATUS -->
    <td class="text-center">
      <%= s.active ? 'Aktiv' : 'Inaktiv' %>
    </td>

    <!-- AKTIONEN -->
    <td class="d-flex justify-content-center gap-2">

    <!-- SPEICHERN -->
    <button type="submit"
            class="btn btn-sm btn-primary save-btn"
            disabled>
        💾
    </button>

    <!-- SPERREN / ENTSPERREN -->
    <button type="button"
            class="btn btn-sm btn-outline-warning lock-btn"
            title="Bearbeiten freigeben">
        🔓
    </button>

    </td>

  </form>

</tr>
<% }) %>
</tbody>


    </table>

</div>

</body>
</html>
