<%- include("partials/page-header", {
  user,
  title: t.openServices.title,
  subtitle: "",
  showUserName: true
}) %>

<div class="content p-4">
  <div class="container-fluid p-0">

    <% let currentPatient = null; %>

    <% if (!rows.length) { %>
      <div class="alert alert-success">
        ✅ <%= t.openServices.noopenservices %>
      </div>
    <% } %>

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

      <% if (!currentPatient || currentPatient !== r.patient_id) { %>
        <% currentPatient = r.patient_id; %>
        <hr />
        <h5 class="clearfix">
          👤 <%= r.firstname %> <%= r.lastname %>
          <form method="POST"
            action="/invoices/patients/<%= r.patient_id %>/create-invoice"
            class="invoice-form d-inline float-end ms-2">
            <button class="btn btn-sm btn-success">🧾 <%= t.global.create %></button>
          </form>
        </h5>
      <% } %>

      <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>

        <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>

        <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>

        <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>
</div>

<script src="/js/open-services.js"></script>
