{% extends "base.html" %}
{% load static %}
{% block header %}
<!-- Datatable CSS -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/dataTables.bootstrap5.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.9/css/responsive.bootstrap5.min.css">

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>

<!-- Datatable jQuery -->
<script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.11.3/js/dataTables.bootstrap5.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.9/js/responsive.bootstrap5.min.js"></script>

<script nonce="{{request.csp_nonce}}">
  $(document).ready(function () {
    let table = $('#t__bird_all').DataTable({
      language: {
        url: 'https://cdn.datatables.net/plug-ins/1.11.3/i18n/de_de.json',
      },
      paging: false,
      info: false,
      responsive: true,
      order: [[2, 'desc']],
      columnDefs: [
        { responsivePriority: 1, targets: 0 },
      ]
    });
    table.on( 'responsive-display', function ( e, datatable, row, showHide, update ) {
      table.rows().every( function () {
        if (showHide && row.index() !== this.index() && this.child.isShown()) {
          $('td', this.node()).eq(0).click();
        }
      });
    });
  })
</script>

{% endblock header %}
{% block content %}
<h3>Übersicht aller Patienten in Behandlung</h3>
<p>
  Übersicht aller in Behandlung befindlichen Vögel. Die nicht
  mehr in Behandlung befindlichen Patienten finden Sie <a href="{% url 'bird_inactive' %}">hier</a>.
</p>
<p>
  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addPatientModal">einen Patienten
    anlegen
  </button>
</p>
<table class="table table-striped table-hover display responsive nowrap" id="t__bird_all">
  <thead>
    <tr>
      <th>Patienten Alias</th>
      <th>Vogel</th>
      <th>gefunden am</th>
      <th>Finder</th>
      <th>Fundort</th>
      <th>Status</th>
      <th>Voliere</th>
      <th>Kosten</th>
      <th>Alter</th>
      <th>Geschlecht</th>
    </tr>
  </thead>
  <tbody>
    {% for bird in birds %}
    <tr>
      <td><a href="{% url 'bird_single' bird.id %}">{{ bird.bird_identifier }}</a></td>
      <td>{{ bird.bird }}</td>
      <td>{{ bird.date_found }}</td>
      <td>
        <a href="{% url 'rescuer_single' bird.rescuer_id %}">{{ bird.rescuer|default_if_none:"" }}</a>
      </td>
      <td>{{ bird.place }}</td>
      <td>{{ bird.status }}</td>
      <td>{{ bird.aviary|default_if_none:"" }}</td>
      <td>{{ bird.total_costs|default_if_none:"0,00" }} &euro;</td>
      <td>{{ bird.age|default_if_none:"" }}</td>
      <td>{{ bird.sex }}</td>
    </tr>
    {% endfor %}
  </tbody>
</table>

<div class="modal fade" id="addPatientModal" tabindex="-1" data-bs-backdrop="static"
  aria-labelledby="addRescuerModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header bg-primary">
        <h5 class="modal-title text-white" id="addRescuerModalLabel">(neuen) Finder zuweisen</h5>
      </div>
      <form method="post">
        {% csrf_token %}
        <div class="modal-body">
          <label for="rescuer" class="form-label mt-3">Wählen Sie einen <strong>bereits angelegten</strong>
            Finder aus oder legen Sie einen <strong>neuen</strong> Finder an:</label>
          <select id="rescuer" class="form-select" name="rescuer_id">
            <option value="new_rescuer"><strong>neuen
                Finder anlegen</strong></option>
            {% for rescuer in rescuer_modal %}
            <option value={{rescuer.id}}>
              {{rescuer.first_name}} {{rescuer.last_name}},
              {{rescuer.street}} {{rescuer.street_number}},
              {{rescuer.city}}
            </option>
            {% endfor %}
          </select>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Abbrechen</button>
          <button class="btn btn-primary" type="submit">Übernehmen und weiter</button>
        </div>
    </div>
  </div>
</div>
</form>
{% endblock content %}