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

<div class="content p-4">

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

  <div class="d-flex gap-2 mb-3">
    <a href="/patients/create" class="btn btn-success">
      + <%= t.patienteoverview.newpatient %>
    </a>
  </div>

  <div class="card shadow">
    <div class="card-body">

      <!-- Suchformular -->
      <form method="GET" action="/patients" class="row g-2 mb-4">
        <div class="col-md-3">
          <input type="text" name="firstname" class="form-control"
            placeholder="<%= t.global.firstname %>"
            value="<%= query?.firstname || '' %>" />
        </div>
        <div class="col-md-3">
          <input type="text" name="lastname" class="form-control"
            placeholder="<%= t.global.lastname %>"
            value="<%= query?.lastname || '' %>" />
        </div>
        <div class="col-md-3">
          <input type="date" name="birthdate" class="form-control"
            value="<%= query?.birthdate || '' %>" />
        </div>
        <div class="col-md-3 d-flex gap-2">
          <button class="btn btn-primary w-100"><%= t.global.search %></button>
          <a href="/patients" class="btn btn-secondary w-100"><%= t.global.reset2 %></a>
        </div>
      </form>

      <!-- Patienten-Tabelle -->
      <form method="GET" action="/patients">

        <input type="hidden" name="firstname" value="<%= query?.firstname || '' %>">
        <input type="hidden" name="lastname" value="<%= query?.lastname || '' %>">
        <input type="hidden" name="birthdate" value="<%= query?.birthdate || '' %>">

        <div class="table-responsive">
          <table class="table table-bordered table-hover align-middle table-sm">

            <thead class="table-dark">
              <tr>
                <th style="width:40px;"></th>
                <th>ID</th>
                <th><%= t.global.name %></th>
                <th><%= t.patienteoverview.dni %></th>
                <th><%= t.global.gender %></th>
                <th><%= t.global.birthday %></th>
                <th><%= t.global.email %></th>
                <th><%= t.global.phone %></th>
                <th><%= t.global.address %></th>
                <th><%= t.global.country %></th>
                <th><%= t.global.status %></th>
                <th><%= t.global.notice %></th>
                <th><%= t.global.create %></th>
                <th><%= t.global.change %></th>
              </tr>
            </thead>

            <tbody>
              <% if (patients.length === 0) { %>
                <tr>
                  <td colspan="15" class="text-center text-muted">
                    <%= t.patientoverview.nopatientfound %>
                  </td>
                </tr>
              <% } %>

              <% patients.forEach(p => { %>
                <tr>
                  <td class="text-center">
                    <input
                      class="patient-radio"
                      type="radio"
                      name="selectedPatientId"
                      value="<%= p.id %>"
                      <%= selectedPatientId === p.id ? "checked" : "" %>
                    />
                  </td>

                  <td><%= p.id %></td>
                  <td><strong><%= p.firstname %> <%= p.lastname %></strong></td>
                  <td><%= p.dni || "-" %></td>

                  <td>
                    <%= p.gender === 'm' ? 'm' :
                        p.gender === 'w' ? 'w' :
                        p.gender === 'd' ? 'd' : '-' %>
                  </td>

                  <td><%= new Date(p.birthdate).toLocaleDateString("de-DE") %></td>
                  <td><%= p.email || "-" %></td>
                  <td><%= p.phone || "-" %></td>

                  <td>
                    <%= p.street || "" %> <%= p.house_number || "" %><br>
                    <%= p.postal_code || "" %> <%= p.city || "" %>
                  </td>

                  <td><%= p.country || "-" %></td>

                  <td>
                    <% if (p.active) { %>
                      <span class="badge bg-success"><%= t.patienteoverview.active %></span>
                    <% } else { %>
                      <span class="badge bg-secondary"><%= t.patienteoverview.inactive %></span>
                    <% } %>
                  </td>

                  <td><%= p.notes ? p.notes.substring(0, 80) : "-" %></td>
                  <td><%= new Date(p.created_at).toLocaleString("de-DE") %></td>
                  <td><%= new Date(p.updated_at).toLocaleString("de-DE") %></td>
                </tr>
              <% }) %>
            </tbody>

          </table>
        </div>

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