{% block css %}
    <style type="text/css">
        OPTION.jsFilled
        {
            padding-left:10px;
            padding-right:20px;
        }
        #OUTOFDATETAB TD
        {
            text-align:center;
        }
        DIV.terminal
        {
            margin:5px;
            border:1px #000000 solid;
            font-family:monospace;
            font-size:13px;
            text-align:left;
            color:#00FF00;
            background-color:#182018
        }
        DIV.terminal DIV.title
        {
            color:#303830;
            background-color:#00C000;
            padding:2px;
        }
        DIV.terminal DIV.sql
        {
            padding:5px;
        }
        DIV.terminal DIV.sqltest
        {
            padding-left:45px;
            padding-right:25px;
        }
        SPAN.active
        {
            font-weight: bold;
            background-color: #000000;
            color:#00FF00;
        }
        SPAN.notactive
        {
            font-weight: bold;
            background-color: #000000;
            color:#FF0000;
        }

    </style>
{% endblock %}

<h1>{{ 'admin::workermanager:tab:recordsActions: description' |trans }}</h1>

{{ form_start(form, {'action': path('worker_admin_recordsActions')}) }}

<div class="control-group">
    {{ form_row(form.ttl_retry) }}
</div>

<div class="control-group">
    {{ form_row(form.xmlSetting, {'attr': {'style': 'width:99%;height:250px;'}}) }}
</div>

{#
<div id="recod_action_help">
    <a href="#" id="">syntax help</a>
</div>
#}

<div class="control-group">
    <button class="btn show-graphic-view">{{ 'Refresh graphic view' | trans }}</button>
</div>

<div class="graphic-view control-group" style="background-color: #f5f5f5;border-top: 1px solid #e5e5e5;">
    <div class="terminal" id="sqla">{{ 'Graphic view' | trans }}</div>
</div>

<div class="control-group">
    {{ form_row(form.apply) }}
</div>

<div class="control-group">
    {% if(running) %}
        <button type="submit" value="stop" class="btn btn-danger">{{ 'Stop' | trans }}</button>
    {% else %}
        <button type="submit" value="start" class="btn btn-primary">{{ "Start"|trans }}</button>
    {% endif %}
</div>

{{ form_end(form) }}

<script type="text/javascript">
    $("#worker-records-actions").on('click', 'BUTTON[type=submit]', function(e, z) {
        e.preventDefault();
        var button = $(e.target);
        var form = button.closest("FORM");
        $("INPUT.act", form).val(button.val());     // "save", "start" or "stop"

        $.ajax({
            "url": "{{ path('admin_tasks_validate_xml') }}",
            "data": $("#worker_recordsActions_xmlSetting").val(),
            "processData": false,
            "dataType": "json",
            "type": "POST",
            "async": false,
            success: function (data) {
                if (data.success == true) {
                    var ok = true;
                    {% if (running) %}
                    if (button.val() === 'save') {
                        // saving will empty the queue, "stopping"
                        ok = confirm("Warning! Changing the settings will stop recordsActions!")
                    }
                    {% endif %}
                    if (button.val() === 'stop') {
                        // saving will empty the queue, "stopping"
                        ok = confirm("Warning! You are about to stop recordsActions!")
                    }

                    if (ok) {
                        form.submit();
                    }
                } else {
                    $("#worker_recordsActions_xmlSetting").css('border', '1px solid #dc1717');
                }
            },
            error: function (jqXHR, textStatus, errorThrown) {
                // todo add notification
            }
        });
    });

    $("#worker-records-actions").on('click', '.show-graphic-view', function (e) {
        e.preventDefault();
        $(".graphic-view ").show();

        $.ajax({
            "url": "{{ path('admin_tasks_validate_xml') }}",
            "data": $("#worker_recordsActions_xmlSetting").val(),
            "processData": false,
            "dataType": "json",
            "type": "POST",
            "async": false,
            success: function (data) {
                if (data.success == true) {
                    var x = $("#worker_recordsActions_xmlSetting").val();
                    try {
                        taskFillGraphic(x);
                    } catch (e) {
                        console.log(e);
                    }
                }
            },
            error: function (jqXHR, textStatus, errorThrown) {
                // todo add notification
            }
        });
    });

    function taskFillGraphic(xml)
    {
        if (xml) {
            xml2 = $.parseXML(xml);
            xml2 = $(xml2);

            var data = {};
            data["ACT"] = "CALCTEST";
            data["xml"] = xml;
            $.ajax({ url: "{{ path('worker_admin_recordsActions_facility') }}"
                , data: data
                , dataType:'json'
                , type:"POST"
                , async:true
                , error: function(data) {
                    $("#sqla").html(data.statusText);
                }
                , success:function(data) {
                    if(data.error) {
                        $("#sqla").text(data.error);
                        return;
                    }
                    t = "";
                    for (i in data.tasks) {
                        // o = $("<div></div>")
                        //     .append($("<span>&nbsp;X&nbsp;</span>"))
                        // ;
                        //$("#sqla").append()
                        t += "<div class=\"title\">&nbsp;";
                        if (data.tasks[i].active) {
                            t += "<span class=\"active\">&nbsp;X&nbsp;</span>&nbsp;";
                        } else {
                            t += "<span class=\"notactive\">&nbsp;X&nbsp;</span>&nbsp;";
                        }

                        if (data.tasks[i].name_htmlencoded) {
                            t += "<b>" + data.tasks[i].name_htmlencoded + "</b>";
                        } else {
                            t += "<b><i>sans nom</i></b>";
                        }

                        if (data.tasks[i].basename_htmlencoded) {
                            t += " (action=" + data.tasks[i].action + ' on ' +  data.tasks[i].basename_htmlencoded + ')';
                        } else {
                            t += " (action=" + data.tasks[i].action + ' on <i>Unknown</i>)';
                        }

                        t += "</div>";

                        if (data.tasks[i].err_htmlencoded) {
                            t += "<div class=\"err\">" + data.tasks[i].err_htmlencoded + "</div>";
                        }

                        t += "<div class=\"sql\">";

                        if (data.tasks[i].sql && data.tasks[i].sql.test.sql_htmlencoded) {
                            t += "<div class=\"sqltest\">" + data.tasks[i].sql.test.sql_htmlencoded + "</div>";
                        }

                        t += "--&gt; <span id=\"SQLRET"+i+"\"><i>wait...</i></span><br/>";

                        t += "</div>";
                    }
                    $("#sqla").html(t);

                    var data = {};
                    data["ACT"] = "PLAYTEST";
                    data["xml"] = xml;
                    $.ajax({ url: "{{ path('worker_admin_recordsActions_facility') }}"
                        , data: data
                        , dataType:'json'
                        , type:"POST"
                        , async:true
                        , success:function(data) {
                            for (i in data.tasks) {
                                if (data.tasks[i].sql) {
                                    if (data.tasks[i].sql.test.err) {
                                        $("#SQLRET"+i).html("err: " + data.tasks[i].sql.test.err);
                                    } else {
                                        t = '';
                                        for (j in data.tasks[i].sql.test.result.rids) {
                                            t += (t ? ', ' : '') + data.tasks[i].sql.test.result.rids[j];
                                        }
                                        if (data.tasks[i].sql.test.result.rids.length < data.tasks[i].sql.test.result.n) {
                                            t += ', ...';
                                        }
                                        $("#SQLRET"+i).html("n=" + data.tasks[i].sql.test.result.n + ", rids:(" + t + ")");
                                    }
                                } else {
                                    $("#SQLRET"+i).html("");
                                }
                            }
                        }
                    });
                }
            });
        }
    }
</script>