{% extends 'base.html' %}
{% block title %}Warteliste-Admin{% endblock %}
{% block content %}
<style>
    table td:nth-child(2) {
        overflow-y: hidden;
        overflow-x: auto;
        text-overflow: clip;
        max-width: 200px !important;
    }
</style>
<div class="container">
    <div id="toolbar">
        <button type="button" class="topbutton btn btn-danger" onclick="confirmDeleteSelectedEntries()"><i
                class="fas fa-trash mr-2"></i>Gewählte Einträge löschen</button>
        <button type="button" class="topbutton btn btn-danger" onclick="confirmUpdateSongDatabase()"><i
                class="fas fa-file-import mr-2"></i>Song-Datenbank
            aktualisieren</button>
        <input id="entryToggle" type="checkbox" class="topbutton" data-toggle="toggle" data-on="Eintragen erlaubt"
            data-off="Eintragen deaktiviert" data-onstyle="success" data-offstyle="danger">
    </div>
    <table class="table entries" id="entrytable" data-toggle="table" data-search="true" data-show-columns="true"
        data-show-toggle="true" data-multiple-select-row="true" data-click-to-select="true" data-toolbar="#toolbar"
        data-pagination="true" data-show-extended-pagination="true" data-classes="table table-hover"
        data-url="/api/queue" data-show-refresh="true" data-auto-refresh="true" data-auto-refresh-interval="10">
        <thead>
            <tr>
                <th data-field="state" data-checkbox="true"></th>
                <th scope="col" data-field="Name" data-formatter="CopyFormatter">Name</th>
                <th scope="col" data-field="Title" data-formatter="CopyFormatter">Song</th>
                <th scope="col" data-field="Artist" data-formatter="CopyFormatter">Künstler</th>
                <th scope="col" data-formatter="TableActions">Aktionen</th>
            </tr>
        </thead>
    </table>
    <a name="end"></a>
</div>
{% endblock %}
{% block extrajs %}
<script>
    $(function () {
        refreshEntryToggle()
        $('#entryToggle').change(function () {
            $.ajax({ url: "/api/entries/accept/" + ($('#entryToggle').is(":checked") ? "1" : "0"), complete: setTimeout(refreshEntryToggle, 1000) });
        })
        $("#entrytable").bootstrapTable().on('load-success.bs.table', function () {
            $('[data-toggle="tooltip"]').tooltip()
        })
        $('[data-toggle="tooltip"]').tooltip({
            trigger: 'hover'
        })
    })
    function confirmDeleteEntry(name, entry_id) {
        bootbox.confirm("Wirklich den Eintrag von " + name + " löschen?", function (result) {
            if (result) {
                deleteEntry(entry_id)
            }
        })
    }
    function confirmDeleteSelectedEntries() {
        bootbox.confirm({
            message: "Wirklich gewählte Eintragungen löschen?",
            buttons: {
                confirm: {
                    label: 'Ja',
                    className: 'btn btn-danger'
                },
                cancel: {
                    label: 'Nein',
                    className: 'btn btn-secondary'
                }
            },
            callback: function (result) {
                if (result) {
                    DeleteSelectedEntries(getIdSelections())
                }
            }
        })
    }
    function confirmUpdateSongDatabase() {
        bootbox.confirm({
            message: "Wirklich die Song-Datenbank aktualisieren?<br>Dies lädt die Aktuelle Song-Liste von <a href='https://www.karafun.de/karaoke-song-list.html'>KaraFun</a> herunter, <b>und wird alle Eintragungen löschen!</b>",
            buttons: {
                confirm: {
                    label: 'Ja',
                    className: 'btn-primary'
                },
                cancel: {
                    label: 'Nein',
                    className: 'btn btn-secondary'
                }
            },
            callback: function (result) {
                if (result) {
                    var dialog = bootbox.dialog({
                        message: '<p class="text-center mb-0"><i class="fa fa-spin fa-cog"></i> Aktualisiere Song-Datenbank...</p>',

                        closeButton: false
                    });
                    updateSongDatabase(dialog)
                }
            }
        })
    }
    function refreshEntryToggle() {
        $.getJSON("/api/entries/accept", (data) => {
            if (data["value"] != $('#entryToggle').is(":checked")) {
                if (data["value"] == 1) {
                    $('#entryToggle').data('bs.toggle').on('true')
                }
                else {
                    $('#entryToggle').data('bs.toggle').off('true')
                }
            }
        })
    }
    function deleteEntry(entry_id) {
        $.ajax({
            type: 'GET',
            url: '/api/entries/delete/' + entry_id,
            contentType: "application/json",
            dataType: 'json',
            async: false
        });
        $("#entrytable").bootstrapTable('refresh')

    }
    function markEntryAsSung(entry_id) {
        $.ajax({
            type: 'GET',
            url: '/api/entries/mark_sung/' + entry_id,
            contentType: "application/json",
            dataType: 'json',
            async: false
        });
        $("#entrytable").bootstrapTable('refresh')

    }

    function markEntryAsTransferred(entry_id) {
        $.ajax({
            type: 'GET',
            url: '/api/entries/mark_transferred/' + entry_id,
            contentType: "application/json",
            dataType: 'json',
            async: false
        });
        $("#entrytable").bootstrapTable('refresh')

    }

    function DeleteSelectedEntries(ids) {
        $.ajax({
            type: 'POST',
            url: '/api/entries/delete',
            data: JSON.stringify(ids), // or JSON.stringify ({name: 'jonas'}),
            error: function () {
                bootbox.alert({
                    message: "Fehler beim Löschen der Eintragungen.",
                })
            },
            success: function () {
                $("#entrytable").bootstrapTable('refresh')

            },
            contentType: "application/json",
            dataType: 'json'
        });
    }
    function updateSongDatabase(wait_dialog) {
        $.ajax({
            type: 'GET',
            url: '/api/songs/update',
            contentType: "application/json",
            dataType: 'json',
            success: function (data) {
                wait_dialog.modal('hide')
                bootbox.alert({
                    message: data["status"],
                    callback: function () {
                        $("#entrytable").bootstrapTable('refresh')
                    }
                })
            }
        });
    }
    function TableActions(value, row, index) {
        let outerHTML = ""
        if (row.Transferred == 1) {
            outerHTML = "<button type=\"button\" class=\"btn btn-default\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Markierung zurückziehen\" onclick=\"event.stopPropagation();$(this).tooltip('dispose');markEntryAsTransferred(" + row.entry_ID + ")\"><i class=\"fas fa-backward\"></i></button>&nbsp;<button type=\"button\" class=\"btn btn-success\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Als gesungen markieren\" onclick=\"event.stopPropagation();$(this).tooltip('dispose');markEntryAsSung(" + row.entry_ID + ")\"><i class=\"fas fa-check\"></i></button>&nbsp;<button type=\"button\" class=\"btn btn-danger\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Eintrag löschen\" onclick=\"event.stopPropagation();$(this).tooltip('dispose');confirmDeleteEntry(this.parentElement.parentElement.children[1].innerText," + row.entry_ID + ")\"><i class=\"fas fa-trash\"></i></button>";
        } else {
            outerHTML = "<button type=\"button\" class=\"btn btn-info\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Als übertragen markieren\" onclick=\"event.stopPropagation();$(this).tooltip('dispose');markEntryAsTransferred(" + row.entry_ID + ")\"><i class=\"fas fa-exchange-alt\"></i></button>&nbsp;<button type=\"button\" class=\"btn btn-success\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Als gesungen markieren\" onclick=\"event.stopPropagation();$(this).tooltip('dispose');markEntryAsSung(" + row.entry_ID + ")\"><i class=\"fas fa-check\"></i></button>&nbsp;<button type=\"button\" class=\"btn btn-danger\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Eintrag löschen\" onclick=\"event.stopPropagation();$(this).tooltip('dispose');confirmDeleteEntry(this.parentElement.parentElement.children[1].innerText," + row.entry_ID + ")\"><i class=\"fas fa-trash\"></i></button>";
        }
        return outerHTML;
    }

    function CopyFormatter(value, row, index) {
        let escapedString = value.replace("\"", "\\\"").replace("\'", "\\\'")
        return "<span onclick='copyAndNotify(this.innerText)'>" + value + "</span>";
    }

    function getIdSelections() {
        return $.map($("#entrytable").bootstrapTable('getSelections'), function (row) {
            return row.entry_ID
        })
    }

    function copyAndNotify(text) {
        navigator.clipboard.writeText(text).then(function () {
            let toast = {
                title: "Kopiert",
                message: text,
                status: 1,
                timeout: 5000
            };
            Toast.create(toast);
        })
    }
</script>
{% endblock %}