<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>imaginaerraum.de</title>

    <script src="static/jquery-3.5.1.js"></script>
    <script src="static/jquery-ui.min.js"></script>
    <script src="static/bootstrap.min.js"></script>

    <link rel="stylesheet" href="static/bootstrap.css">
    <link rel="stylesheet" href="static/style.css">


</head>
<body>
<!-- container -->
<div class="container">
    <!-- current program -->
    <div class="row top-buffer">
        Aktuelles Programm:
        <div class="cmd-canvas">
            {% for cmd in current_program %}
                <div class="box cmd{{ loop.index0 }}"  id="prg_cmd{{ loop.index0 }}" data-action="{{ cmd.action }}" data-color="{{ cmd.color }}" data-img="prg_cmd_img{{ loop.index0 }}"
                     style="background-color: rgba({{ cmd.color[0] }},{{ cmd.color[1] }},{{ cmd.color[2] }},0.85)">
                    <img id="prg_cmd_img{{ loop.index0 }}" src="static/{{ cmd.action }}.png">
                    {{ loop.index0 }}
                </div>
            {% endfor %}
        </div>
    </div>

    <!-- possible commands -->
    <div class="row top-buffer">
        Mögliche Befehle:
        <div class="programmer-canvas">
            {% for cmd in valid_commands %}
                <div class="box programmer_cmd{{ loop.index0 }}"  id="valid_cmd{{ loop.index0 }}" data-action="{{ cmd.action }}"
                     data-color="{{ cmd.color }}" data-img="valid_cmd_img{{ loop.index0 }}"
                     style="background-color: rgba({{ cmd.color[0] }},{{ cmd.color[1] }},{{ cmd.color[2] }},0.85)">
                    <img id="valid_cmd_img{{ loop.index0 }}" src="static/{{ cmd.action }}.png">
                </div>
            {% endfor %}
        </div>
    </div>

    <div class="row top-buffer center">
        <div class="col-sm">
            <input class="btn btn-primary" id="btnSubmit" type="submit" value="Befehle abschicken" />
        </div>
        <div class="col-sm">
            <div id = "alert_placeholder"></div>
        </div>
    </div>
</div><!-- container -->


<script>
    $(document).ready(function () {

        var please_wait = $(".notification").hide();

    var box = $(".box");

    bootstrap_alert = function() {};
    bootstrap_alert.warning = function(message) {
            $('#alert_placeholder').html('<div class="alert alert-primary"><a class="close" data-dismiss="alert">×</a><span>'+message+'</span></div>')
        };


    $("#btnSubmit").click(function () {
           //alert("button");
        var cmds = {
            {% for i in range(5) %}
                "cmd{{ i }}": {"color": document.getElementById("prg_cmd{{ i }}").getAttribute("data-color"),
                               "action": document.getElementById("prg_cmd{{ i }}").getAttribute("data-action")},
            {% endfor %}
        }
            //bootstrap_alert.warning('Bitte warten bis alle Spieler ihre Aktion gewählt haben!'); //$(please_wait).show();
    var cmds_json = JSON.stringify(cmds);

            $.post("/send_cmds", {"cmds_json": cmds_json}, function (data) {
                console.log(data);
                /*
                if (data === 'OK') {
                    location.reload();  // reload page to get new cards for next round
                }
                else {
                    console.log('waiting...')
                    $.get("/send_cmds", "", function (data) {
                         if (data === 'OK') {
                            location.reload();  // reload page to get new cards for next round
                        }
                    })
                }
                */
            });

        });

    var edited_command = null;

    box.click(function () {
        //debugger
        if ( this.id.includes('prg_cmd') ) {
            // program card clicked -> select clicked card for editing
            edited_command = this;
        }
        else if (this.id.includes('valid_cmd')) {
            // progamming card clicked -> edit currently selected card
            var this_card_action = this.getAttribute('data-action');
            var this_card_color = this.getAttribute('data-color');
            if (!!edited_command) { // only if there is a card selected
                console.log("editing command " + edited_command);
                if (this_card_action === "-") {
                    // set color
                    edited_command.setAttribute("data-color", this_card_color);
                    edited_command.style["backgroundColor"] = this.style["backgroundColor"];
                }
                else {
                    // set action
                    edited_command.setAttribute("data-action", this_card_action)
                    var edited_cmd_img = document.getElementById(edited_command.getAttribute("data-img"));
                    var prg_img = document.getElementById(this.getAttribute("data-img"));
                    edited_cmd_img.src = prg_img.src;
                }
            }
        }
    });

});
</script>

</body>
</html>