<div class="layout">

  <div class="main">

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

    <div class="content">

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

      <div class="container-fluid mt-3">

        <!-- Patient Info -->
        <div class="card shadow mb-4">
          <div class="card-body">
            <h4 class="mb-1">👤 <%= patient.firstname %> <%= patient.lastname %></h4>
            <p class="text-muted mb-3">
              <%= t.global.birthday %> <%= new Date(patient.birthdate).toLocaleDateString("de-DE") %>
            </p>
            <ul class="list-group">
              <li class="list-group-item">
                <strong><%= t.patientDashboard.email %></strong> <%= patient.email || "-" %>
              </li>
              <li class="list-group-item">
                <strong><%= t.patientDashboard.phone %></strong> <%= patient.phone || "-" %>
              </li>
              <li class="list-group-item">
                <strong><%= t.patientDashboard.address %></strong>
                <%= patient.street || "" %> <%= patient.house_number || "" %>,
                <%= patient.postal_code || "" %> <%= patient.city || "" %>
              </li>
            </ul>
          </div>
        </div>

        <div class="row g-3" style="height: calc(100vh - 420px); min-height: 300px; padding-bottom: 3rem; overflow: hidden;">

          <!-- Medikamente -->
          <div class="col-lg-6 h-100">
            <div class="card shadow h-100">
              <div class="card-body d-flex flex-column h-100">
                <h5>💊 <%= t.patientDashboard.medications %></h5>
                <div style="flex: 1 1 auto; overflow-y: auto; min-height: 0; padding-bottom: 1.5rem;">
                  <% if (medications.length === 0) { %>
                    <p class="text-muted"><%= t.patientDashboard.nomedications %></p>
                  <% } else { %>
                    <table class="table table-sm table-bordered mt-2">
                      <thead class="table-light">
                        <tr>
                          <th><%= t.patientDashboard.medication %></th>
                          <th><%= t.patientDashboard.variant %></th>
                          <th><%= t.patientDashboard.instruction %></th>
                        </tr>
                      </thead>
                      <tbody>
                        <% medications.forEach(m => { %>
                          <tr>
                            <td><%= m.medication_name %></td>
                            <td><%= m.variant_dosage %></td>
                            <td><%= m.dosage_instruction || "-" %></td>
                          </tr>
                        <% }) %>
                      </tbody>
                    </table>
                  <% } %>
                </div>
              </div>
            </div>
          </div>

          <!-- Rechnungen -->
          <div class="col-lg-6 h-100">
            <div class="card shadow h-100">
              <div class="card-body d-flex flex-column h-100">
                <h5>🧾 <%= t.patientDashboard.invoices %></h5>
                <div style="flex: 1 1 auto; overflow-y: auto; min-height: 0; padding-bottom: 1.5rem;">
                  <% if (invoices.length === 0) { %>
                    <p class="text-muted"><%= t.patientDashboard.noinvoices %></p>
                  <% } else { %>
                    <table class="table table-sm table-bordered mt-2">
                      <thead class="table-light">
                        <tr>
                          <th><%= t.patientDashboard.date %></th>
                          <th><%= t.patientDashboard.amount %></th>
                          <th><%= t.patientDashboard.pdf %></th>
                        </tr>
                      </thead>
                      <tbody>
                        <% invoices.forEach(i => { %>
                          <tr>
                            <td><%= new Date(i.invoice_date).toLocaleDateString("de-DE") %></td>
                            <td><%= Number(i.total_amount).toFixed(2) %> €</td>
                            <td>
                              <% if (i.file_path) { %>
                                <a href="<%= i.file_path %>" target="_blank"
                                  class="btn btn-sm btn-outline-primary">
                                  📄 <%= t.patientDashboard.open %>
                                </a>
                              <% } else { %>
                                -
                              <% } %>
                            </td>
                          </tr>
                        <% }) %>
                      </tbody>
                    </table>
                  <% } %>
                </div>
              </div>
            </div>
          </div>

        </div>

      </div>

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