<!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>Drag</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="main-canvas">
            {% for cmd in current_program %}
                <div class="box card{{ 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="main-canvas">
            {% for cmd in valid_commands %}
                <div class="box card{{ 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">
    {% if robot_info is none %}
        <div class="col-sm">
        <label for="inputRobotX">X Position:</label>
        <input class="form-control" type="number" id="inputRobotX" name="robot_x" min="1" max="13" value="1">
        <br>
        <label for="inputRobotY">Y Position:</label>
        <input class="form-control" type="number" id="inputRobotY" name="robot_y" min="1" max="7" value="1">
        </div>
        <div class="col-sm">
        <label for="orientation">Blickrichtung:</label><br>
        <img id="orientation" class="robotOrientation" src="/static/orientation.png" alt="0">
        <input hidden id="inputRobotOrientation" value=">" readonly>
        </div>
        <div class="col-sm">
        <label for="inputRobotID">Roboter ID:</label>
        <select name="robotID" class="form-control" id="inputRobotID">
            <option value="11">11</option>
            <option value="12">12</option>
            <option value="13">13</option>
            <option value="14">14</option>
        </select>
        <label for="outputRobotFlags">Flaggen:</label><br>
        {% for f in ['a', 'b', 'c', 'd'] %}
            <input type="checkbox" class="form-check-input" id="flag_{{ f }}" onclick="return false;">
            <label class="form-check-label" for="flag_{{ f }}">{{ f }}</label><br>
        {% endfor %}
        </div>
    {% else %}
        <div class="col-sm">
        <label for="outputRobotX">X Position:</label>
        <input class="form-control" type="number" id="outputRobotX" name="robot_x" min="1" max="12" value="{{ robot_info[0] }}" readonly>
        <br>
        <label for="outputRobotY">Y Position:</label>
        <input class="form-control" type="number" id="outputRobotY" name="robot_y" min="1" max="6" value="{{ robot_info[1] }}" readonly>
        </div>
        <div class="col-sm">
        <label for="outputOrientation">Blickrichtung:</label><br>
        {% if robot_info[2] == '>' %}
            <img id="outputOrientation" class="robotOrientation" src="/static/orientation.png" alt="0">
        {% elif robot_info[2] == 'v' %}
            <img id="outputOrientation" class="robotOrientation90" src="/static/orientation.png" alt="0">
        {% elif robot_info[2] == '<' %}
            <img id="outputOrientation" class="robotOrientation180" src="/static/orientation.png" alt="0">
        {% elif robot_info[2] == '^' %}
            <img id="outputOrientation" class="robotOrientation270" src="/static/orientation.png" alt="0">
        {% endif %}
        <br>
        <label for="outputRobotDmg">Schaden:</label><br>
        <input class="form-control" name="robotDmg" id="outputRobotDmg" value="{{ robot_info[4] }}" readonly>
        </div>
        <div class="col-sm">
        <label for="outputRobotID">Roboter ID:</label>
        <input class="form-control" name="robotID" id="outputRobotID" value="{{ robot_info[3] }}" readonly>
        <label for="outputRobotFlags">Flaggen:</label><br>
        {% for f in ['a', 'b', 'c', 'd'] %}
            {% if f in robot_info[5] %}
                <input type="checkbox" class="form-check-input" id="flag_{{ f }}" checked onclick="return false;">
            {% else %}
                <input type="checkbox" class="form-check-input" id="flag_{{ f }}" onclick="return false;">
            {% endif %}
            <label class="form-check-label" for="flag_{{ f }}">{{ f }}</label><br>
        {% endfor %}
        </div>
    {% endif %}
        </div>
-->
    <div class="row top-buffer">
        <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 class="row top-buffer">
            Viel Spaß beim Spielen!
    </div>
</div><!-- container -->


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

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

    var box = $(".box");
    var mainCanvas = $(".main-canvas");

    var orientation_icon = $("#orientation");
    var orientation_input = $("#inputRobotOrientation");

    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>')
        };

    orientation_icon.click(function () {
        if (this.alt === "0") {
            this.alt = "90";
            $("#inputRobotOrientation").val("v");
            //document.getElementById("inputRobotOrientation").value = "v";
        }
        else if (this.alt === "90") {
            this.alt = "180";
            $("#inputRobotOrientation").val("<");
            //document.getElementById("inputRobotOrientation").value = "<";
        }
        else if (this.alt === "180") {
            this.alt = "270";
            $("#inputRobotOrientation").val("^");
            //document.getElementById("inputRobotOrientation").value = "^";
        }
        else if (this.alt === "270") {
            this.alt = "0";
            $("#inputRobotOrientation").val(">");
            //document.getElementById("inputRobotOrientation").value = ">";
        }
       $(this).css({'transform' : 'rotate('+ this.alt +'deg)'});
    });


    $("#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
                        }
                    })
                }
                */
            });

        });

    /*
    box.draggable({
        containment: mainCanvas,
        helper: "clone",

        start: function () {
            $(this).css({
                opacity: 0
            });

            $(".box").css("z-index", "0");
        },

        stop: function () {
            $(this).css({
                opacity: 1
            });
        }
    });

    box.droppable({
        accept: box,

        drop: function (event, ui) {
            var draggable = ui.draggable;
            var droppable = $(this);
            var dragPos = draggable.position();
            var dropPos = droppable.position();

            var cmds = [ui.draggable.attr('name').toString(), $(this).attr('name')]

            //console.log(dragPos);
            //console.log(dropPos);

            //console.log($(cmds));
            // notify server that cards have been swapped
            $.post(url='/', {drag: ui.draggable.attr('name'), drop: $(this).attr('name')});

            draggable.css({
                left: dropPos.left + "px",
                top: dropPos.top + "px",
                "z-index": 20
            });

            droppable.css("z-index", 10).animate({
                left: dragPos.left,
                top: dragPos.top
            });
        }
    });
    */

    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>