{% extends "coreprotect/base.html" %}
{% load static %}
{% block head %}
<link rel="shortcut icon" type="image/png" href="{% static 'coreprotect/img/intelli.png' %}"/>
{% endblock %}
{% block body %}
<div class="block"></div>
<div class="has-text-centered">
    <h1 class="title">CoreProtect GUI</h1>
    <hr/>
</div>
<div class="columns">
    <form id="coreprotect_form" name="coreprotect_form" class="has-text-left column is-one-third">
        <div class="columns">
            <div class="column is-one-half">
                <h4 class="title is-5 has-text-primary">
                    Actions
                </h4>
                <div class="field">
                    <input class="is-checkradio is-block is-info" id="block_break" name="block_break" type="checkbox" {% if form.block_break %}checked{% endif %}>
                    <label for="block_break">Block Break</label>
                </div>
                <div class="field">
                    <input class="is-checkradio is-block is-info" id="block_place" name="block_place" type="checkbox" {% if form.block_place %}checked{% endif %}>
                    <label for="block_place">Block Place</label>
                </div>
                <div class="field">
                    <input class="is-checkradio is-block is-info" id="chat" name="chat" type="checkbox" {% if form.chat %}checked{% endif %} {% if not perms.django_coreprotect.gui_extra %}disabled{% endif %}>
                    <label for="chat">Chat</label>
                </div>
                <div class="field">
                    <input class="is-checkradio is-block is-info" id="chest_use" name="chest_use" type="checkbox" {% if form.chest_use %}checked{% endif %}>
                    <label for="chest_use">Chest Use</label>
                </div>
                <div class="field">
                    <input class="is-checkradio is-block is-info" id="command" name="command" type="checkbox" {% if form.command %}checked{% endif %} {% if not perms.django_coreprotect.gui_extra %}disabled{% endif %}>
                    <label for="command">Command</label>
                </div>
                <div class="field">
                    <input class="is-checkradio is-block is-info" id="interact" name="interact" type="checkbox" {% if form.interact %}checked{% endif %}>
                    <label for="interact">Interact</label>
                </div>
                <div class="field">
                    <input class="is-checkradio is-block is-info" id="login_logout" name="login_logout" type="checkbox" {% if form.login_logout %}checked{% endif %}>
                    <label for="login_logout">Login/Logout</label>
                </div>
                <div class="field">
                    <input class="is-checkradio is-block is-info" id="sign_place" name="sign_place" type="checkbox" {% if form.sign_place %}checked{% endif %}>
                    <label for="sign_place">Sign Place</label>
                </div>

                <br/>

                <h4 class="title is-5 has-text-primary">
                    Worlds
                </h4>
                {% for world in form.worlds %}
                    <div class="field">
                        <input class="is-checkradio is-block is-info" id="{{world.world_id}}" name="world" value="{{world.id}}" type="checkbox" {% if world.checked %}checked{% endif %}>
                        <label for="{{world.world_id}}">{{world.name}}</label>
                    </div>
                {% endfor %}

                <br/>

                <h4 class="title is-5 has-text-primary">
                    Options
                </h4>
                <div class="field">
                    <input class="is-checkradio is-block is-info" id="ignore_environment" name="ignore_environment" type="checkbox" {% if form.ignore_environment %}checked{% endif %}>
                    <label for="ignore_environment">Ignore Environment</label>
                </div>
                <div class="field">
                    <input class="is-checkradio is-block is-info" id="oldest_first" name="oldest_first" type="checkbox" {% if form.oldest_first %}checked{% endif %}>
                    <label for="oldest_first">Oldest Results First</label>
                </div>

                <br/>

                <h4 class="title is-5 has-text-primary">
                    Page Size
                </h4>
                <div class="field">
                    <p class="control">
                        <span class="select">
                            <select id="page_size" name="page_size">
                                <option value="20" {% if form.page_size == "20" %}selected{% endif %}>20</option>
                                <option value="50" {% if form.page_size == "50" %}selected{% endif %}>50</option>
                                <option value="100" {% if form.page_size == "100" %}selected{% endif %}>100</option>
                                <option value="200" {% if form.page_size == "200" %}selected{% endif %}>200</option>
                                <option value="500" {% if form.page_size == "500" %}selected{% endif %}>500</option>
                                <option value="1000" {% if form.page_size == "1000" %}selected{% endif %}>1000</option>
                            </select>
                        </span>
                    </p>
                </div>
                <input type="hidden" id="page" name="page" value="{{form.page}}"/>
            </div>


            <div class="column is-one-half">
                <h4 class="title is-5 has-text-primary">
                    Players
                </h4>
                <div class="field tooltip" data-tooltip="Accepts full or partial names. Separated by commas.">
                    <input class="input" id="players" name="players" type="text" placeholder="Player Names" value="{{form.players}}">
                </div>

                <br/>

                <h4 class="title is-5 has-text-primary">
                    Coordinates
                </h4>
                <div class="field has-addons tooltip" data-tooltip="Whole numbers only.">
                    <p class="control">
                        <input class="input" id="x" name="x" type="text" placeholder="X" value="{{form.x}}">
                    </p>
                    <p class="control">
                        <input class="input" id="y" name="y" type="text" placeholder="Y" value="{{form.y}}">
                    </p>
                    <p class="control">
                        <input class="input" id="z" name="z" type="text" placeholder="Z" value="{{form.z}}">
                    </p>
                </div>
                <div class="field tooltip" data-tooltip="Whole numbers only.">
                    <p class="control">
                        <input class="input" id="radius" name="radius" type="text" placeholder="Radius" value="{{form.radius}}">
                    </p>
                </div>

                <br/>

                <h4 class="title is-5 has-text-primary">
                    Blocks
                </h4>
                <div class="field tooltip is-tooltip-multiline" data-tooltip="Accepts full or partial names. Separated by commas.">
                    <input class="input is-4" id="blocks" name="blocks" type="text" placeholder="Block Names" value="{{form.blocks}}">
                </div>

                <br/>

                <h4 class="title is-5 has-text-primary">
                    Date and Time
                </h4>
                <div class="field tooltip" data-tooltip="Click to open date/time picker.">
                    <p class="control">
                        <input type="date" id="date_from" name="date_from" placeholder="Date From" value="{{form.date_from}}">
                    </p>
                </div>
                <div class="field tooltip" data-tooltip="Click to open date/time picker.">
                    <p class="control">
                        <input type="date" id="date_to" name="date_to" placeholder="Date To" value="{{form.date_to}}">
                    </p>
                </div>

                <br/>

                <div class="field is-grouped">
                    <p class="control">
                        <button class="button is-primary" id="search" type="button">Search</button>
                    </p>
                    <p class="control">
                        <button class="button is-dark" id="clear" type="button">Clear</button>
                    </p>
                    <p class="control">
                        <button class="button is-info" id="export" type="button">Export</button>
                    </p>
                </div>
            </div>
        </div>
    </form>
    <div class="column is-three-fifths" id="results">

    </div>
</div>
{% endblock %}
{% block script %}
<script>
    let text = "Copy the below command to teleport";
    function attachClickRows() {
        Array.from(document.querySelectorAll(".click-row")).forEach(elem => {
            elem.addEventListener("click", function() {
                prompt(text, elem.getAttribute("data-prompt"));
            });
        });
    }

    let url = new URL(window.location);
    let pageParam = url.searchParams.get("page");
    let page = 0;
    if (pageParam !== "") {
        page = parseInt(pageParam);
        if (isNaN(page)) {
            page = 0;
        }
    }
    function attachPagination() {
        let prev = document.getElementById("prev");
        if (prev.getAttribute("disabled") == null) {
            prev.addEventListener("click", function () {
                document.getElementById("page").value = (--page).toString();
                search(false);
            });
        }

        let next = document.getElementById("next");
        if (next.getAttribute("disabled") == null) {
            next.addEventListener("click", function () {
                document.getElementById("page").value = (++page).toString();
                search(false);
            });
        }
    }

    function search(resetPage) {
        elementHTML("results", 'Querying Database...<br/><progress class="progress is-primary"></progress>');

        if (resetPage) {
            page = 0;
            document.getElementById("page").value = "0";
        }

        let form = document.getElementById("coreprotect_form");
        let formData = new FormData(form);
        ajax("GET", "{% url "coreprotect_gui_query" %}?" + formURI(formData), function(status, data) {
            elementHTML("results", data);
            attachClickRows();
            attachPagination();
        });
        window.history.pushState("", "", "{% url "coreprotect_gui" %}?" + formURI(formData));
    }

    document.getElementById("search").addEventListener("click", function() {
        search(true);
    });

    document.getElementById("clear").addEventListener("click", function() {
        // Actions
        document.getElementById("block_break").checked = false;
        document.getElementById("block_place").checked = false;
        document.getElementById("chat").checked = false;
        document.getElementById("chest_use").checked = false;
        document.getElementById("command").checked = false;
        document.getElementById("interact").checked = false;
        document.getElementById("login_logout").checked = false;
        document.getElementById("sign_place").checked = false;

        // Worlds
        {% for world in form.worlds %}
            document.getElementById("{{world.world_id}}").checked = false;
        {% endfor %}

        // Options
        document.getElementById("ignore_environment").checked = false;
        document.getElementById("oldest_first").checked = false;

        // Page Size
        document.getElementById("page_size").selectedIndex = "0";
        document.getElementById("page").value = "1";

        // Players
        document.getElementById("players").value = "";

        // Coordinates
        document.getElementById("x").value = "";
        document.getElementById("y").value = "";
        document.getElementById("z").value = "";
        document.getElementById("radius").value = "";

        // Blocks
        document.getElementById("blocks").value = "";

        // Date and Time
        document.getElementById("date_from")._flatpickr.setDate();
        document.getElementById("date_to")._flatpickr.setDate();
    });

    document.getElementById("export").addEventListener("click", function() {
        exportTableToCSV("coreprotect.csv", "results");
    });
</script>
{% endblock %}