<div class="layout">

  <div class="main">

    <%- include("partials/page-header", {
      user,
      title: t.global.patient,
      subtitle: patient.firstname + " " + patient.lastname,
      showUserName: true
    }) %>

    <div class="content p-4">

      <%- include("partials/flash") %>

      <!-- Patientendaten -->
      <div class="card shadow-sm mb-3 patient-data-box">
        <div class="card-body">
          <h4><%= t.patientOverview.patientdata %></h4>

          <table class="table table-sm">
            <tr>
              <th><%= t.patientOverview.firstname %></th>
              <td><%= patient.firstname %></td>
            </tr>
            <tr>
              <th><%= t.patientOverview.lastname %></th>
              <td><%= patient.lastname %></td>
            </tr>
            <tr>
              <th><%= t.patientOverview.birthdate %></th>
              <td><%= patient.birthdate ? new Date(patient.birthdate).toLocaleDateString("de-DE") : "-" %></td>
            </tr>
            <tr>
              <th><%= t.patientOverview.email %></th>
              <td><%= patient.email || "-" %></td>
            </tr>
            <tr>
              <th><%= t.patientOverview.phone %></th>
              <td><%= patient.phone || "-" %></td>
            </tr>
          </table>
        </div>
      </div>

      <div class="row g-3">

        <!-- Notizen -->
        <div class="col-lg-5 col-md-12">
          <div class="card shadow h-100">
            <div class="card-body d-flex flex-column">
              <h5>📝 <%= t.patientOverview.notes %></h5>

              <form method="POST" action="/patients/<%= patient.id %>/notes">
                <textarea class="form-control mb-2" name="note" rows="3"
                  style="resize: none"
                  placeholder="<%= t.patientOverview.newnote %>"></textarea>
                <button class="btn btn-sm btn-primary">
                  ➕ <%= t.global.save %>
                </button>
              </form>

              <hr class="my-2" />

              <div style="max-height: 320px; overflow-y: auto;">
                <% if (!notes || notes.length === 0) { %>
                  <p class="text-muted"><%= t.patientOverview.nonotes %></p>
                <% } else { %>
                  <% notes.forEach(n => { %>
                    <div class="mb-3 p-2 border rounded bg-light">
                      <div class="small text-muted">
                        <%= new Date(n.created_at).toLocaleString("de-DE") %>
                        <% if (n.first_name && n.last_name) { %>
                          – <%= (n.title ? n.title + " " : "") %><%= n.first_name %> <%= n.last_name %>
                        <% } %>
                      </div>
                      <div><%= n.note %></div>
                    </div>
                  <% }) %>
                <% } %>
              </div>

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

        <!-- Rezept -->
        <div class="col-lg-3 col-md-6">
          <div class="card shadow h-100">
            <div class="card-body">
              <h5>💊 <%= t.patientOverview.createrecipe %></h5>

              <form method="POST" action="/patients/<%= patient.id %>/medications">
                <select name="medication_variant_id" class="form-select mb-2" required>
                  <option value=""><%=t.global.selection %>…</option>
                  <% medicationVariants.forEach(mv => { %>
                    <option value="<%= mv.variant_id %>">
                      <%= mv.medication_name %> – <%= mv.form_name %> – <%= mv.dosage %>
                    </option>
                  <% }) %>
                </select>

                <input type="text" name="dosage_instruction" class="form-control mb-2"
                  placeholder="<%= t.patientMedications.example %>" />

                <input type="date" name="start_date" class="form-control mb-2"
                  value="<%= new Date().toISOString().split('T')[0] %>" />

                <input type="date" name="end_date" class="form-control mb-3" />

                <button class="btn btn-sm btn-success w-100">
                  ➕ <%= t.global.save %>
                </button>
              </form>
            </div>
          </div>
        </div>

        <!-- Heutige Leistungen -->
        <div class="col-lg-4 col-md-6">
          <div class="card shadow h-100">
            <div class="card-body d-flex flex-column">
              <h5>🧾 <%= t.patientOverview.searchservice %></h5>

              <form method="POST" action="/patients/<%= patient.id %>/services">
                <input type="text" id="serviceSearch" class="form-control mb-2"
                  placeholder="<%= t.patientOverview.searchservice %>" />

                <select name="service_id" id="serviceSelect" class="form-select mb-2" size="5" required>
                  <% services.forEach(s => { %>
                    <option value="<%= s.id %>">
                      <%= s.name %> – <%= Number(s.price || 0).toFixed(2) %> €
                    </option>
                  <% }) %>
                </select>

                <input type="number" name="quantity" class="form-control mb-2" value="1" min="1" />

                <button class="btn btn-sm btn-success w-100">
                  ➕ <%= t.patientOverview.addservice %>
                </button>
              </form>

              <hr class="my-2" />

              <div style="max-height: 320px; overflow-y: auto;">
                <% if (!todayServices || todayServices.length === 0) { %>
                  <p class="text-muted"><%= t.patientOverview.noservices %></p>
                <% } else { %>
                  <% todayServices.forEach(ls => { %>
                    <div class="border rounded p-2 mb-2 bg-light">
                      <strong><%= ls.name %></strong><br />
                      <%= t.global.quantity %>: <%= ls.quantity %><br />
                      <%= t.global.price %>: <%= Number(ls.price).toFixed(2) %> €
                    </div>
                  <% }) %>
                <% } %>
              </div>

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

      </div>

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