<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8" />
    <title>Offene Leistungen</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css" />
  </head>
  <body>
    <div class="container mt-4">
      <!-- HEADER -->
      <div class="position-relative mb-3">
        <div
          class="position-absolute top-50 start-50 translate-middle d-flex align-items-center gap-2"
        >
          <span style="font-size: 1.4rem">📄</span>
          <h3 class="mb-0">Offene Rechnungen</h3>
        </div>

        <div class="text-end">
          <a href="/dashboard" class="btn btn-outline-primary btn-sm">
            ⬅️ Dashboard
          </a>
        </div>
      </div>

      <% let currentPatient = null; %> <% if (!rows.length) { %>
      <div class="alert alert-success">
        ✅ Keine offenen Leistungen vorhanden
      </div>
      <% } %> <% rows.forEach(r => { %> <% if (!currentPatient || currentPatient
      !== r.patient_id) { %> <% currentPatient = r.patient_id; %>

      <hr />

      <h5 class="clearfix">
        👤 <%= r.firstname %> <%= r.lastname %>

        <!-- 🧾 RECHNUNG ERSTELLEN -->
        <form
          method="POST"
          action="/patients/<%= r.patient_id %>/create-invoice"
          class="invoice-form d-inline float-end ms-2"
        >
          <button class="btn btn-sm btn-success">🧾 Rechnung erstellen</button>
        </form>
      </h5>
      <% } %>

      <!-- LEISTUNG -->
      <div
        class="border rounded p-2 mb-2 d-flex align-items-center gap-2 flex-wrap"
      >
        <strong class="flex-grow-1"> <%= r.name %> </strong>

        <!-- 🔢 MENGE -->
        <form
          method="POST"
          action="/patients/services/update-quantity/<%= r.patient_service_id %>"
          class="d-flex gap-1 me-2"
        >
          <input
            type="number"
            name="quantity"
            min="1"
            step="1"
            value="<%= r.quantity %>"
            class="form-control form-control-sm"
            style="width: 70px"
          />
          <button class="btn btn-sm btn-outline-primary">💾</button>
        </form>

        <!-- 💰 PREIS -->
        <form
          method="POST"
          action="/patients/services/update-price/<%= r.patient_service_id %>"
          class="d-flex gap-1 me-2"
        >
          <input
            type="number"
            step="0.01"
            name="price"
            value="<%= Number(r.price).toFixed(2) %>"
            class="form-control form-control-sm"
            style="width: 100px"
          />
          <button class="btn btn-sm btn-outline-primary">💾</button>
        </form>

        <!-- ❌ LÖSCHEN -->
        <form
          method="POST"
          action="/patients/services/delete/<%= r.patient_service_id %>"
          class="js-confirm-delete"
        >
          <button class="btn btn-sm btn-outline-danger">❌</button>
        </form>
      </div>

      <% }) %>
    </div>

    <!-- Externes JS -->
    <script src="/js/open-services.js"></script>
  </body>
</html>
