{% load i18n static %}

<div id="{{ model_name }}_edit_form" style="width: auto; ">
    <form class="layui-form data-form" style="width:800px ;  " action="" method="post" >
        {% csrf_token %}
        <div style="display: flex; flex-direction: row; height:auto; padding-top: 10px;  overflow-x:scroll;">
            {% for node in node_list %}
                {% if node.state == 1 %}
                    <div id="divPending" title="{% trans 'manualLog_field_approver' %}: {{ node.name }} | {% trans 'workflow_status' %} : {% trans 'approve_pending' %}" style="border: 1px solid #d8d8d8; float: left; display: inline; border-radius: 4px;
                        color: #909090; margin: 4px; vertical-align: top; width: 250px; background-color: #efefef; font-family: Open sans, sans-serif; padding: 20px; letter-spacing: 0.5px; font-weight: 300; text-transform: uppercase; box-shadow: 0 8px 6px -6px #9E9E9E; max-width: 200px;">
                {% else %}
                    {% if node.state == 2 %}
                        <div id="divApproved"
                             title="{% trans 'manualLog_field_approver' %}: {{ node.approver_employee.first_name }} , {{ node.approver_employee.last_name }} | {% trans 'remark' %}: {{ node.remark }} "
                             style="border: 1px solid #9ad852; float: left; display: inline; border-radius: 4px; color: #636363; margin: 4px; vertical-align: top; width: 250px; background-color: #9eda59; font-family: Open sans, sans-serif; padding: 20px; letter-spacing: 0.5px; box-shadow: 0 8px 6px -6px #9E9E9E; max-width: 200px;">
                    {% else %}
                        <div id="divRejected"
                             title="{% trans 'approve_rejected' %}: {{ node.approver_employee.first_name }} , {{ node.approver_employee.last_name }} | {% trans 'remark' %}: {{ node.remark }} "
                             style="border: 1px solid #fb521c; float: left; display: inline; border-radius: 4px;color: #636363; margin: 4px; vertical-align: top; width: 250px; background-color: #fb764c;font-family: Open sans, sans-serif; padding: 20px; letter-spacing: 0.5px; box-shadow: 0 8px 6px -6px #9E9E9E; max-width: 200px;">
                    {% endif %}
                {% endif %}
            <label>{{ node.name }}</label>
            </br>
            <label>{{ node.state.name }}</label>
{#            <button id="btnview{{ node.id }}"#}
{#                    onclick="openDiv('div{{ node.id }}','btnview{{ node.id }}') ;return false">{% trans 'btn_view' %}#}
{#            </button>#}
            <div id="div{{ node.id }}" class="foo" style="width: 150px; overflow: auto; max-height: 150px;">
                {% if node.approver_admin_id %}
                    <label><u>Admin</u></label>
                    </br>
                    <label>{% trans 'base_model_user' %}: {{ node.approver_admin.username }} </label>
                {% elif node.approver_employee %}
                    <labe><strong>{% trans 'model_employee' %}:</strong> {{ node.approver_employee }} </labe>
                    </br>
                    <label>{% trans 'node_name' %}: <span style="font-weight: normal;">{{ node.name }}</span></label>
                {% else %}
                    <label>{% trans 'model_employee' %}: </label>
                    </br>
                <label>{% trans 'node_name' %}: <span style="font-weight: normal;">{{ node.name }}</span></label>
                {% endif %}
                </br>
                {% if node.remark %}
                    <label>{% trans 'remark' %}: <span style="font-weight: normal;">{{ node.remark }} </span></label>
                {% else %}
                    <label>{% trans 'remark' %}: </label>
                {% endif %}
            </div>
            </div>
                {% if forloop.last %}

                {% else %}
                    <img src="/media/img/right-arrow.png" style="float: left;box-sizing: initial; padding-top: 37px; height: 20px;
                ">
                {% endif %}
            {% endfor %}
            </div>
            <div class="layui-collapse" lay-accordion>
                <div class="layui-colla-item">
                    <h2 class="layui-colla-title">{% trans 'information_workflow' %}</h2>
                    <div class="layui-colla-content layui-show">
                        <div class="layui-row">
                            <div class="layui-col-md9">
                                <div class="layui-form-item">
                                    {% if workflow_employee_first_name %}
                                    <label><strong>{% trans 'emp_field_firstName' %}: </strong>{{ workflow_employee_first_name }}</label>
                                    {% endif %}
                                </div>
                                <div class="layui-form-item">
                                    {% if workflow_employee_last_name %}
                                    <label><strong>{% trans 'emp_field_lastName' %}: </strong>{{ workflow_employee_last_name }}</label>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="layui-col-md9">
                                <div class="layui-form-item">
                                    <label><strong>{% trans 'emp_field_employeeCode' %}: </strong> {{ workflow_employee_code }}</label>
                                </div>
                            </div>
                            <div class="layui-col-md9">
                                <div class="layui-form-item">
                                    <label><strong>{% trans 'workflow_content_type' %}: </strong> {{ workflow_content_type }}</label>
                                </div>
                                <div class="layui-form-item">
                                    <label><strong>{% trans 'instance_issue_date' %}: </strong>{{ workflow_instance_issue_date }}
                                    </label>
                                </div>
                            </div>
                            <div class="layui-col-md9">
                                <div class="layui-form-item">
                                    <label><strong>{% trans 'workflow_name' %} : </strong> {{ workflow_name }}</label>
                                </div>
                                <div class="layui-form-item" id="divRemark">
                                    <label><strong>{% trans 'Reason' %}: </strong></label>
                                    <textarea type="text" name="txtReason" id="txtReason"
                                              class="layui-input"></textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="divButtonera" class="layui-layer-btn" style="display: none">
                    <!--  <button class="layui-layer-btn1"  type="button" id="Approve" onclick="Approve()"  style="width: 60px;  color: #fff;  background-color: #1E9FFF; height: 30px ; border-color: #1E9FFF" >Approve</button> -->

                    <a class="layui-layer-close1 layui-layer-close " id="Approve"
                       style="width: auto;  color: #fff;  background-color: #1E9FFF; height: 30px ; margin-top:-20px;   margin-left: -280px; border-color: #1E9FFF">{% trans 'approve' %}</a>

                    <!-- layui-layer-btn1 -->
                    <a class="layui-layer-close1 layui-layer-close " id="reject"
                       style="width: auto;  color: #fff;  background-color: #1E9FFF; height: 30px ;  margin-top:-20px;  margin-left: -180px; border-color: #1E9FFF">{% trans 'Reject' %}</a>

                    <a class="layui-layer-close1 layui-layer-close " id="revoke"
                       style="width: auto;  color: #fff;  background-color: #1E9FFF; height: 30px ;  margin-top:-20px;  margin-left: -95px; border-color: #1E9FFF">{% trans 'Revoke' %}</a>

                    <!-- <button type="button" id="rejecte" onclick="rejecte()"  style="width: 60px; color: #fff;  background-color: #1E9FFF; height: 30px ; border-color: #1E9FFF">Rejecte</button>
                     -->
                </div>
            </div>
            <input type="hidden" name="csrfmiddlewaretoken" value="{% csrf_token %}">
            <input type="hidden" name="hhworkflowintanceid" value="{{ workflow_intance_id }}">
            <input type="hidden" name="hhedit" value="{{ edit }}">
    </form>
</div>


<script>
    {#$('#' + divId + '').show();#}
    {#$(document).ready(function () {#}
    {#    $('.foo').hide();#}
    {#    var queryString = $("input[name=hhedit]").val();#}
    {##}
    {##}
    {#    $("#txtReason").val($("#txtReason").val().trim());#}
    {#    var countReject = $("#divRejected").length;#}
    {#    var countPending = $("#divPending").length;#}
    {#    if (countReject > 0 || countPending == 0 || queryString == 0) {#}
    {#        $('#Approve').hide();#}
    {#        $('#reject').hide();#}
    {#        $('#divRemark').hide();#}
    {#    }#}
    {##}
    {##}
    {#    //$('.layui-layer-btn')[1].remove();#}
    {#);#}

    {#function openDiv(divId, buttonID) {#}
    {#    if ($('#' + divId + '').is(":visible")) {#}
    {#        $('#' + divId + '').hide();#}
    {#        $('#' + buttonID + '').text("{% trans 'btn_view' %}");#}
    {#    }#}
    {#    else {#}
    {#        $('#' + divId + '').show();#}
    {#        $('#' + buttonID + '').text("{% trans 'btn_hide' %}");#}
    {#    }#}
    {##}
    {#    return true;#}
    {##}
    var model_name = ""
    $(document).ready(function () {
        var csrf = $("input[name=csrfmiddlewaretoken]").val();
        var wfi = {{ workflow_intance_id }};
        $.ajax({
            type: 'GET',
            url: '/workflowinstance/get_approval_button_stats/',
            data: {
                csrfmiddlewaretoken: csrf,
                workflow_instance_id: wfi
            },
            dataType: 'json',
            success: function (data) {
                model_name = data.model_name
                if(data.is_approve_enable){
                    if (data.state == 1) {
                        $("#divButtonera").show();
                        $("#divRemark").show();
                        $("#Approve").show();
                        $("#reject").show();
                        $("#revoke").hide();
                    }
                    else if (data.state == 2) {
                        $("#divButtonera").show();
                        $("#divRemark").hide();
                        $("#Approve").hide();
                        $("#reject").hide();
                        $("#revoke").show();
                    }
                }
                else{
                    $("#divButtonera").hide();
                    $("#divRemark").hide();
                }
            }
        })
    })

    function returnModelCapitalize(modelName){
        if(modelName === "manuallog"){
            modelName = "ManualLog"
        }
        else if(modelName === "leave"){
            modelName = "Leave"
        }
        else if(modelName === "overtime"){
            modelName = "Overtime"
        }
        else if(modelName === "training"){
            modelName = "Training"
        }
        else if(modelName === "reimbursement"){
            modelName = "Reimbursement"
        }
        return modelName
    }
    $('#Approve').click(function () {
        var csrf = $("input[name=csrfmiddlewaretoken]").val();
        var wfi = {{ workflow_intance_id }};
        var reason = $("#txtReason").val().trim();
        var table = layui.table
//ajax
        $.ajax({
            type: 'POST',
            headers: {'X-CSRFToken': csrf},
            url: '/workflowinstance/approve/',
            data: {
                csrfmiddlewaretoken: csrf,
                workflow_instance_id: wfi,
                model_name: model_name,
                remark: reason,
                is_ui_approve: true,
            },
            dataType: 'text',
            success: function (data) {
                response_message = JSON.parse(data)
                if (response_message['error_code'] != 0) {
                    alert(response_message['result'])
                    console.log('error-code: ', response_message['error_code']);
                    console.log('error-message: ', response_message['result']);
                } else {
                    model_name = returnModelCapitalize(model_name)
                    table.reload("id_grid_staff"+model_name+"Approve");
                }
            },
            error: function (request, status, error) {
                response_message = JSON.parse(request.responseText)
                alert('error' + response_message['result'])
                console.log(request.responseText);
                console.log(status.responseText);
                console.log(request.Message);
            }
        });
//end ajax
    });


    $('#reject').click(function () {
        var csrf = $("input[name=csrfmiddlewaretoken]").val();
        var wfi = {{ workflow_intance_id }};
        var reason = $("#txtReason").val().trim();
        var table = layui.table
//ajax
        $.ajax({
            type: 'POST',
            headers: {'X-CSRFToken': csrf},
            url: '/workflowinstance/reject/',
            data: {
                csrfmiddlewaretoken: csrf,
                workflow_instance_id: wfi,
                model_name: model_name,
                remark: reason,
                is_ui_approve: true,
            },
            dataType: 'text',
            success: function (data) {
                response_message = JSON.parse(data)
                if (response_message['error_code'] != 0) {
                    alert(response_message['result'])
                    console.log('error-code: ', response_message['error_code']);
                    console.log('error-message: ', response_message['result']);
                } else {
                    model_name = returnModelCapitalize(model_name)
                    table.reload("id_grid_staff"+model_name+"Approve");
                }
            },
            error: function (request, status, error) {
                response_message = JSON.parse(request.responseText)
                alert('error' + response_message['result'])
                console.log(request.responseText);
                console.log(status.responseText);
                console.log(request.Message);
            }
        });

//end ajax
    });

    $('#revoke').click(function () {
        var actionRender = function (url, postParams, revoke=false) {
            var table = layui.table
            var approvalError = function (request) {
              var ret = JSON.parse(request.responseText);
              layer.msg(ret['result'], {
                icon: 5,
                time: '2000',
                shade: 0.1
              });
            };
            var approvalSuccess = function (response, msg) {
              if (response instanceof String){
                var ret = JSON.parse(response);
              }else {
                ret = response
              }
              if (ret['error_code'] != 0)
              {
                msg = ret['result'];
                layer.msg(gettext(msg), {
                  icon: 5
                  , time: '2000'
                  , shade: 0.1
                });
              } else {
                layer.msg(gettext(msg), {
                  icon: 1
                  , time: '2000'
                  , shade: 0.1
                });
                model_name = returnModelCapitalize(model_name)
                table.reload("id_grid_staff"+model_name+"Approve");
              }
            };
          layer.prompt({
            formType: 2
            , value: ''
            , title: gettext('approval_formTitleRemark')
            , area: ['auto', 'auto']
            , btn: [gettext('btn_confirm'), gettext('btn_cancel')]
            , yes: function(index, layero){
              var value =  layero.find(".layui-layer-input").val();
              if (value=='' && revoke==true){
                layer.alert("{% trans 'revoke_remark_is_required' %}", {title: gettext("layer_title"), icon: 0, btn: gettext("btn_confirm")});
              }else{
              layer.close(index);
              $.extend(postParams, {remark: value});
              $.ajax({
                type: 'POST',
                url: url,
                data: postParams,
                dataType: 'json',
                success: function (response) {
                  approvalSuccess(response, gettext('approval_actionSuccessful'));

                },
                error: function (request, status, error) {
                  approvalError(request);
                }
                });
              }
            }
          });
        };
        var postParams = {}
        postParams['csrfmiddlewaretoken'] = $("input[name=csrfmiddlewaretoken]").val();
        postParams['workflow_instance_id'] = $("input[name=hhworkflowintanceid]").val();
        postParams['model_name'] = model_name;
        actionRender('/workflowinstance/revoke/', postParams, revoke=true);
    })
</script>
