{% 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">

<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.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>

<!-- Configure the DataTable. -->
<script>
    $(document).ready(function () {
        let table = $('#t__costs_all').DataTable({
            language: {
                url: 'https://cdn.datatables.net/plug-ins/1.11.3/i18n/de_de.json',
            },
            paging: false,
            info: false,
            responsive: true,
            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 Kosten</h3>
<p>Die Übersicht aller enstandenen Kosten.</p>
<p><a href="{% url 'costs_create' %}" class="btn btn-primary">Eine Buchung anlegen</a></p>

<table class="table table-striped table-hover display responsive nowrap" width="100%" id="t__costs_all">
    <thead>
        <tr>
            <th>Patient</th>
            <th>Kosten</th>
            <th>Gebucht am</th>
            <th>Bemerkung</th>
            <th>Benutzer</th>
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        {% for item in costs %}
        <tr>
            <td> {{item.id_bird|default_if_none:"nicht mehr in WVH"}} </td>
            <td> {{item.costs}} </td>
            <td> {{item.created}} </td>
            <td> {{item.comment|default_if_none:""}} </td>
            <td> {{item.user}} </td>
            <td><a href="{% url 'costs_edit' item.id %}"><i class="fa-sharp fa-solid fa-pen"></i></a></td>
            <td><a href="{% url 'costs_delete' item.id %}"><i class="fa-sharp fa-solid fa-trash"></i></a></td>
        </tr>
        {% endfor %}
    </tbody>
</table>
{% endblock content %}