{% extends 'structure.html' %}
{% block content %}
    Momentan ist nur TG 99 sichtbar. Filter im View eingebaut
    <form id="selections">
        <select class="form-select" aria-label="Jahrauswahl" name ="HHJ" id="HHJ">
            <option selected>Jahr auswählen</option>
            {% for j in alle_jahre %}
                <option> {{ j.HHJ }} </option>
            {% endfor %}
        </select>
        <select class="form-select" aria-label="Kapitelauswahl" name ="Kapitel" id="Kapitel">
            <option selected>Kapitel auswählen</option>
            {% for k in alle_kapitel %}
                <option> {{ k.Kapitel }} </option>
            {% endfor %}
        </select>
    </form>
    <table class="table table-striped">
        <thead>
            <tr>
              <th scope="col">Kapitel</th>
              <th scope="col">Titel</th>
              <th scope="col">Datum</th>
              <th scope="col">Grund</th>  
              <th scope="col" class="text-sm-end">Betrag</th>
            </tr>
        </thead>
        <tbody id="tablebody">
            {% for x in alle_ansatz %}
                <tr>
                    <td>{{ x.Kapitel }} </td>
                    <td>{{ x.Titel }} </td>
                    <td>{{ x.Datum|date:"d.m.Y" }} </td>
                    <td>{{ x.Grund }} </td>
                    <td class="text-sm-end">{{ x.Betrag }} €</td>
                </tr>
            {% endfor %}
        </tbody>
    </table>
    <script type="application/javascript">
        const form = document.getElementById("selections");
        console.log("Test");
        form.addEventListener("change", function (e) {
                e.preventDefault()
                const payload = new FormData(form);
                let responseClone;
                fetch('/ansatz_refresh/', {
                    method: "POST",
                    body: payload,
                    headers: { "X-CSRFToken": '{{csrf_token}}' } // "fetch" liefert den CSRF Token nicht automatisch
                }).then(response=> {
                    responseClone = response.clone();
                    return response.json();
                }).then(rows=> {
                    const tablebody = document.getElementById("tablebody");
                    let innerHTML = ""
                    Object.keys(rows).forEach(key => {
                        console.log(`${key}: ${rows[key]}`);
                        if (rows[key] === null ) {
                           rows[key] = "";    
                        }
                    });
                    rows.forEach((row) => {
                        innerHTML+= "<tr>"
                        innerHTML+= `<td> ${row.Kapitel} </td>`
                        innerHTML+= `<td> ${row.Titel} </td>`
                        innerHTML+= `<td> ` 
                        if (row.Datum === null) 
                            innerHTML+= `</td>`
                        else                            
                            innerHTML+= ` ${row.Datum} </td>`
                        innerHTML+= `<td> ` 
                        if (row.Grund === null) 
                            innerHTML+= `</td>`
                        else                            
                            innerHTML+= ` ${row.Grund} </td>`
                        innerHTML+= `<td class="text-sm-end"> ` 
                        if (row.Betrag === null) 
                            innerHTML+= `</td>`
                        else                            
                            innerHTML+= ` ${row.Betrag} €</td>`
                        innerHTML+= "</tr>"
                        
                    });
                    tablebody.innerHTML=innerHTML;
                    
                }).catch(rejectionReason=> {
                   console.log('Error parsing JSON from response:', rejectionReason, responseClone); 
                   responseClone.text()
                    .then(bodyText=> {
                        console.log('Received the following instead of valid JSON:', bodyText);
                    })
                })   
            }
        )
    </script>

{% endblock content %}