{% extends "base.html" %}
{% block content %}
<div class="columns">
    <div class="column col-md-12 col-mx-auto col-6">
        <h1>{{name}}</h1>
        <p><a href="/party/{{id}}">Naar het scannen</a></p>
        <h2>Feestgangers</h2>
        <table class="table">
            <thead>
                <tr>
                    <th class="hide-md">Ticket Nummer</th>
                    <th>Leerling Nummer</th>
                    <th>Is binnen?</th>
                    <th class="hide-md""></th>
                </tr>
            </thead>
            <tbody>
                {% for guest in guests %}
                <tr>
                    <td class=" hide-md">{{guest.id}}</td>
                    <td>{{guest.student}}</td>
                    <td>{{guest.inside}}</td>
                    <td class="hide-md"><button class="delete-button btn btn-warning"
                            data-id="{{guest.id}}">Verwijder</button></td>
                </tr>
                {% endfor %}
                </tbody>
        </table>
        <h2>Andere Opties</h2>
        <p><a href="/party/{{id}}/export">Exporteer als CSV</a></p>
    </div>
</div>
<script>
    function delete_entry(id) {
        console.log("Deleting entry with id " + id);
        fetch("/api/ticket/delete", {
            method: "POST",
            headers: {
                "Content-Type": "application/json"
            },
            body: JSON.stringify({
                ticket_id: +id
            })
        }).then(function (response) {
            console.log(response.ok);
            return response;
        }).then(function (res) {
            window.location.reload();
        }).catch(function (error) {
            console.log(error);
        });
    }
    let btns = document.querySelectorAll(".delete-button");
    btns.forEach(function (btn) {
        btn.addEventListener("click", function () {
            if (confirm("weet je zeker dat je dit \"kaartje\" wilt verwijderen?")) {
                delete_entry(btn.dataset.id);
            }
        });
    });
</script>
{% endblock %}