<style>
    .leave-type {
        margin-bottom: 10px;
        margin-top: 20px;
        margin-left: 30px;
        width: 60%;
    }

    table {
        width: 100%;
        height: auto;
        border: 1px solid #e6e6e6;
    }

    table > tr {
        border: 1px solid #e6e6e6;

    }

    table > tr > td {
        display: inline-block;
        width: 100%;
        color: #9C9999;
        text-align: center;
    }

    #table > tbody > tr > td {
        text-align: center;
        color: #7B7878;
        height: 30px;
        padding: 10px;
    }

    table > td {
        border: 0;
        border-right: 1px;
        color: #9C9999;
        text-align: center;
    }

    #lvhead {
        background: #73bd3a;
        border-color: #e6e6e6;
        border: none;
    }

    table > thead > tr > th {
        text-align: justify;
        font-weight: lighter;
        padding: 10px;

    }
</style>

{% extends 'data_grid.html' %}
{% load i18n common %}
{% block filter_bar %}
    {% include 'staff/leave/request_search_form.html' %}
    <table id="table" width="100%" border="0" cellspacing="0" cellpadding="0" style="width:60%;height:auto;">
        <thead id="lvhead">
        <tr>
            <th colspan="4"><h4>{% trans 'att_model_leavedetails' %}</h4></th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td style="color:red;">{% trans 'report_start_date' %} :</td>
            <td id="one">-</td>
            <td style="color:red;">{% trans 'report_end_date' %} :</td>
            <td id="two">-</td>
        </tr>
        <tr>
            <td style="color:black;">{% trans 'report_leave_type' %} :</td>
            <td id="three">-</td>
            <td style="color:black;">{% trans 'report_total_leave' %} :</td>
            <td id="four">-</td>
        </tr>
        <tr>
            <td style="color:black;">{% trans 'report_allowed_leaves_permonth' %} :</td>
            <td id="five">-</td>
            <td style="color:black;">{% trans 'staff_leave_applied' %} :</td>
            <td id="six">-</td>
        </tr>
        <tr>
            <td style="color:black;">{% trans 'report_carry_forward' %} :</td>
            <td id="ten">-</td>
            <td style="color:black;">{% trans 'report_leave_balance' %} :</td>
            <td id="eleven">-</td>
        </tr>
        </tbody>
    </table>
    <div style="max-height: 200px;">
        <div class="layui-form-item leave-type">
            <div class="layui-inline">
                <p>Yearly -</p>
            </div>
            {% for x,y in leave_type.items %}
                <div class="layui-inline">
                    <p style="color:red">{{ x }} : {{ y }}</p>
                </div>
            {% endfor %}
        </div>
    </div>
    <div style="max-height: 200px;">
        <div class="layui-form-item leave-type">
            <div class="layui-inline">
                <p>Monthly -</p>
            </div>
            {% for x,y in monthly_leave_type.items %}
                <div class="layui-inline">
                    <p style="color:red">{{ x }} : {{ y }}</p>
                </div>
            {% endfor %}
        </div>
    </div>
    <div id="{{ model_name }}_csrf_token">
        {% csrf_token %}
    </div>
    <script type="text/html" id="{{ model_name }}-delBar">
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"
           title="{% trans 'staff_leave_actionDelete' %}">
            <i class="fa fa-fw fa-trash-o"></i>
        </a>
{#        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="revoke"#}
{#             title="{% trans 'att_action_revoke' %}">#}
{#            <i class="fa fa-reply"></i>#}
{#        </a>#}
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="withdraw"
             title="{% trans 'att_action_withdraw' %}">
            <i class="fa fa-reply"></i>
        </a>
        <a class="layui-btn layui-btn-xs" lay-event="staffViewWorkflow"><i class="fa fa-eye"></i></a>
    </script>
{% endblock %}

{% block staff_button %}
    <ul class="layui-nav">
        <li class="layui-nav-item">
            <a class="layui-btn layui-btn-sm" id="id-{{ model_name }}" lay-event="staffLeaveNew"
               data-type="staffLeaveNew">{% trans 'staff_leave_actionAdd' %}</a>
        </li>
    </ul>
{% endblock %}

{% block init_script %}
    <script>
        var csrf_token = $("#{{ model_name }}_csrf_token").find("input").first().attr("value");
        $(function () {
            $('.layui-tab-content').attr('style','overflow: scroll');
            layui.use(['table', 'form', 'element', 'laydate', 'tablePlug'], function () {
                var fluid_container = "#{{ model_name }}_fluid";
                var tableId = "id_grid_{{ model_name }}";
                var tableElem = "#id_grid_{{ model_name }}";
                var toolbarID = "#{{ model_name|safe }}_toolbar";
                var opts = {
                    id: tableId,
                    elem: tableElem,
                    toolbar: toolbarID,
                    defaultToolbar: [],
                    cellMinWidth: 80,
                    smartReloadModel: true,
                    height: '500px',
                    loading: true,
                    page: {
                        layout: ['prev', 'page', 'next', 'limit', 'count', 'refresh', 'skip'],
                        curr: 1
                    },
                    text: {
                        none: gettext('none_data')
                    },
                    limit: 50,
                    limits: [10, 20, 50, 80, 100, 200],
                    request: {
                        pageName: 'page',
                        limitName: 'page_size'
                    },
                    done: function (res, curr, count) {
                        //this.where = {};
                        $.fn.trigger_action_auto("{{ model_name }}");
                    },
                    cols: [[
                        {'field': 'id', 'fixed': 'left', 'type': 'checkbox', 'width': 30},
                        {'field': 'first_name', 'width': 120, 'title': "{% trans 'staff_leave_firstName' %}"},
                        {'field': 'last_name', 'width': 120, 'title': "{% trans 'staff_leave_lastName' %}"},
                        {'field': 'category_name', 'width': 150, 'title': "{% trans 'staff_leave_leaveCategory' %}"},
                        {'field': 'category_symbol', 'width': 150, 'title': "{% trans 'staff_leave_leavesymbol' %}"},
                        {
                            'field': 'start_time',
                            'width': 200,
                            'title': "{% trans 'staff_leave_startTime' %}",
                            sort: true
                        },
                        {'field': 'end_time', 'width': 200, 'title': "{% trans 'staff_leave_endTime' %}"},
                        {'field': 'leave_payment', 'width': 200, 'title': "{% trans 'leave_field_leavepayment_type' %}"},
                        {'field': 'days', 'width': 200, 'title': "{% trans 'leave_field_days' %}"},
                        {'field': 'audit_reason', 'width': 200, 'title': "{% trans 'leave_field_approvalRemark' %}"},
                        {'field': 'apply_reason', 'width': 200, 'title': "{% trans 'staff_leave_applyReason' %}"},
                        {
                            'field': 'audit_status_string',
                            'width': 120,
                            'title': "{% trans 'staff_leave_approvalState' %}"
                        },
                        {width: 90, align: 'center', toolbar: '#{{ model_name }}-delBar'}

                    ]],
                    url: '/staff/api/leaves/request_list/'
                };
                var table = layui.table, form = layui.form, laydate = layui.laydate, element = layui.element,
                    tablePlug = layui.tablePlug;
                var date = new Date();
                var _start = date.getFullYear() + '-' + leftInsertZero(date.getMonth() + 1) + '-01';
                var _end = date.getFullYear() + '-' + leftInsertZero(date.getMonth() + 1) + '-' + leftInsertZero(date.getDate());
                $("input[name='{{ model_name }}-start']").val(_start);
                $("input[name='{{ model_name }}-end']").val(_end);
                var startDate = laydate.render({
                    elem: '#{{ model_name }}-start',
                    type: 'date',
                    //value: _start,
                    done: function (value, date) {
                        if (Object.keys(date).length !== 0) {
                            endDate.config.min = {
                                year: date.year
                                , month: date.month - 1
                                , date: date.date
                            };
                        }
                        else {
                            endDate.config.min = {
                                year: 1900,
                                month: 01,
                                date: 01
                            };
                            endDate.config.max = {
                                year: 2099,
                                month: 12,
                                date: 31
                            };
                        }
                        $.fn.trigger_action_auto("{{ model_name }}");
                    }
                });
                var endDate = laydate.render({
                    elem: '#{{ model_name }}-end',
                    type: 'date',
                    //value: _end,
                    done: function (value, date) {
                        if (Object.keys(date).length !== 0) {
                            startDate.config.max = {
                                year: date.year,
                                month: date.month - 1,
                                date: date.date
                            };
                        }
                        else {
                            startDate.config.min = {
                                year: 1900,
                                month: 01,
                                date: 01
                            };
                            startDate.config.max = {
                                year: 2099,
                                month: 12,
                                date: 31
                            };
                        }
                        $.fn.trigger_action_auto("{{ model_name }}");
                    }
                });
                $.ajax({
                    url: "/att/api/leavecategorys/?page_size=1000"
                    , dataType: 'json'
                    , type: "GET"
                    , success: function (response) {
                        var data = response.data;
                        var options = "<option value=''>----------</option>";
                        data.forEach(function (item) {
                            options += '<option value="' + item.id + '">' + item.category_name + '</option>';
                        });
                        $("#{{ model_name }}RequestCategory").html(options);
                        form.render();
                    }
                    , error: function (XMLHttpRequest, textStatus, errorThrown) {
                        console.log(XMLHttpRequest.status);
                    }
                });
                var tb = table.render(opts);
                tablePlug.smartReload.enable(true);

                function show_error(response) {
                    var res_msg = JSON.parse(response.responseText);
                    var display_msg = '';
                    for (var prop in res_msg) {
                        var name = prop
                        $('form input[name="' + prop + '"]').addClass('layui-form-danger');
                        $('form select[name="' + prop + '"]').addClass('layui-form-danger');
                        var input_lable = $('form input[name="' + prop + '"]').parent().parent().children().first().text();
                        var select_lable = $('form input[name="' + prop + '"]').parent().parent().children().first().text();
                        if (input_lable) {
                            name = input_lable
                        } else if (select_lable) {
                            name = select_lable
                        } else {
                            name = gettext(name)
                        }
                        display_msg += '<p>' + name + ": " + res_msg[prop] + '</p>'
                    }
                    layer.alert(display_msg, {'icon': 0, btn: [gettext("btn_confirm")], title: gettext("layer_title")});
                }

                function bindAllActions() {
                    $(fluid_container + " div.grid-toolbar").actions({
                        container: fluid_container,
                        actionContainer: fluid_container + " div.grid-toolbar",
                        model: "{{model_name}}",
                        table: table,
                        tableId: tableId,
                        form: form,
                        element: element,
                        curTable: tb,
                        grid_opts: opts,
                        column_order_url: '/column_order/',
                        actions: "",
                        export_url: "/staff/api/leaves/export/?export_list=request",
                        disabled_fields_url: "/disabled_fields/",
                        init_disabled_fields: [],
                        dimension: {height: "auto", width: "auto"},
                        disabled_action_panel_east: ["history"],
                        callback: {},
                    });
                    $('#id-{{ model_name }}').on('click', function () {
                        $.ajax({
                            url: "{% url 'biotime:staff_leave_add' %}"
                            , dataType: 'html'
                            , type: 'GET'
                            , success: function (page) {
                                layer.open({
                                    title: "{% trans 'common_action_new' %}"
                                    , type: 1
                                    , area:['auto','auto']
                                    , btn: [gettext("btn_confirm"), gettext("btn_cancel")]
                                    , content: page
                                    , success: function (layero, index) {
                                        //console.log(layero, index);
                                    }
                                    , yes: function (index, layero) {
                                        var newForm = layero.find("form.layui-form");
                                        $(newForm).ajaxSubmit({
                                            url: "/staff/staff_leave_mul_add/",
                                            type: "POST",
                                            dataType: "json",
                                            success: function (response, status, xhr) {
                                                layer.close(index);
                                                layer.msg(gettext('save_successful'), {icon: 6, time: 600});
                                                table.reload(tableId);
                                                leavedetailsrefresh();
                                            },
                                            error: function (response) {
                                                layer.alert(response.responseText,
                                                {title: gettext('system_exception')
                                                , icon: 5
                                                , btn: gettext('btn_confirm')}
                                                 );
                                                table.reload(tableId);
                                                leavedetailsrefresh();
                                            }
                                        });
                                    }
                                });
                            }
                        });
                    });
                }

                bindAllActions();
                table.on('tool({{ model_name }})', function (obj) {
                    var data = obj.data;
                    var audit_status = data['audit_status'];
                    if (obj.event === 'editPopUp') {
                        if (audit_status === (2 || 3 || 6)) {
                            layer.alert("{% trans 'confirm_not_modify_audited' %}", {
                                title: gettext("layer_title"),
                                icon: 0,
                                btn: gettext("btn_confirm")
                            });
                            return false;
                        }
                        $.ajax({
                            url: "{% url 'biotime:staff_leave_add' %}"
                            , dataType: 'html'
                            , type: 'GET'
                            , success: function (page) {
                                layer.open({
                                    title: gettext("model_action_editTitle"),
                                    type: 1,
                                    content: page,
                                    success: function (layero, index) {
                                        // Object.keys(data).forEach(function (key) {
                                        //   if (data[key] != undefined) {
                                        //     layero.find("#id_" + key).val(data[key]);
                                        //   }
                                        // });
                                        form.val('staff_leave_add', data);
                                        form.render();
                                    },
                                    btn: [gettext("btn_confirm"), gettext("btn_cancel")],
                                    yes: function (index, layero) {
                                        var newForm = layero.find("form.layui-form");
                                        $(newForm).ajaxSubmit({
                                            url: "/staff/api/leaves/" + data['id'] + "/",
                                            //data: data,
                                            type: "PUT",
                                            success: function (response, status, xhr) {
                                                layer.close(index);
                                                layer.msg(gettext('save_successful'), {icon: 6, time: 600});
                                                table.reload(tb.config.id);
                                                //bindAllActions();
                                            },
                                            error: function (response) {
                                                show_error(response);
                                            }
                                        });
                                    },
                                    end: function () {
                                        layer.closeAll('tips');
                                    }
                                });
                            }
                        });
                    } else if (obj.event === 'del') {
                        if (audit_status === 2) {
                            layer.alert("{% trans 'confirm_not_modify_audited' %}", {
                                title: gettext("layer_title"),
                                icon: 0,
                                btn: gettext("btn_confirm")
                            });
                            return false;
                        }
                        if (audit_status === 3) {
                            layer.alert("{% trans 'confirm_not_modify_audited' %}", {
                                title: gettext("layer_title"),
                                icon: 0,
                                btn: gettext("btn_confirm")
                            });
                            return false;
                        }
                        layer.confirm("{% trans 'confirm_be_sure' %}", {
                            title: gettext("btn_confirm")
                            , btn: [gettext("btn_confirm"), gettext("btn_cancel")]
                        }, function (index) {
                            obj.del();
                            layer.close(index);
                            $.ajax({
                                type: 'delete',
                                data: {csrfmiddlewaretoken: csrf_token},
                                url: '/staff/api/leaves/' + data['id'] + '/',
                                success: function (data) {
                                    layer.msg(gettext('delete_successful'), {icon: 6, time: 600});
                                    table.reload(tb.config.id, true);
                                    leavedetailsrefresh();
                                    //bindAllActions();
                                }
                            });
                        });
                    } else if (obj.event === 'revoke') {
                        if (audit_status != 2) {
                            layer.alert("{% trans 'only_approved_records_can_be_revoked' %}", {
                                title: gettext("layer_title"),
                                icon: 0,
                                btn: gettext("btn_confirm")
                            });
                            return false;
                        }
                        var postParams = {
                            workflow_instance_id: obj.data.id,
                            csrfmiddlewaretoken: csrf_token,
                            model_name: 'leave'
                        };
                        var url = '/workflowinstance/revoke/';
                        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) {
                                    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) {
                                            var ret = '', msg = gettext('revoke_success');
                                            if (response instanceof String) {
                                                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
                                                });
                                            }
                                            table.reload(tb.config.id, true);
                                        },
                                        error: function (request) {
                                            var ret = JSON.parse(request.responseText);
                                            layer.msg(ret['result'], {
                                                icon: 5,
                                                time: '2000',
                                                shade: 0.1
                                            });
                                        }
                                    });
                                }
                            }
                        });
                    } else if (obj.event === 'withdraw') {
                        if (audit_status != 2) {
                            layer.alert("{% trans 'only_approved_records_can_be_withdraw' %}", {
                                title: gettext("layer_title"),
                                icon: 0,
                                btn: gettext("btn_confirm")
                            });
                            return false;
                        }
                        let leaveEndDate = new Date(obj.data.end_time);
                        let todayDate = new Date();
                        if (todayDate > leaveEndDate){
                            layer.alert("{% trans 'cannot_withdraw_records_after_the_leave_end_date' %}", {
                                title: gettext("layer_title"),
                                icon: 0,
                                btn: gettext("btn_confirm")
                            });
                            return false;
                        }
                        var postParams = {
                            workflow_instance_id: obj.data.id,
                            csrfmiddlewaretoken: csrf_token,
                            model_name: 'leave'
                        };
                        var url = '/workflowinstance/withdraw/';
                        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) {
                                    layer.alert("{% trans 'withdraw_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) {
                                            var ret = '', msg = gettext('withdraw_success');
                                            if (response instanceof String) {
                                                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
                                                });
                                                leavedetailsrefresh();
                                            }
                                            table.reload(tb.config.id, true);
                                        },
                                        error: function (request) {
                                            var ret = JSON.parse(request.responseText);
                                            layer.msg(ret['result'], {
                                                icon: 5,
                                                time: '2000',
                                                shade: 0.1
                                            });
                                        }
                                    });
                                }
                            }
                        });
                    }
                    else if(obj.event === "staffViewWorkflow"){
                        var postParams = {workflow_instance_id: obj.data.id};
                        postParams['model_name'] = "leave";
                        postParams['csrfmiddlewaretoken'] = "{{ csrf_token }}";
                        postParams['request_grid'] = "1";
                        $.ajax({
                            url: "/workflow/view/"
                            , dataType: 'html'
                            , data: postParams
                            , type: 'GET'
                            , success: function (response) {
                                try {
                                    var ret = JSON.parse(response);
                                    if (ret['error_code'] != 0) {
                                        layer.msg(ret['result'], {
                                            icon: 0,
                                            time: '2000',
                                            shade: 0.1
                                        });
                                    }
                                } catch (err) {
                                    layer.open({
                                        title: gettext('approval_workflow_view')
                                        , area: ['auto', '']
                                        , content: response
                                        , btn: gettext("btn_confirm")
                                        , success: function (layero, index) {
                                        }
                                    });
                                }
                            }
                        });
                    }

                });
                $('#{{ model_name }}-search_btn').on('click', function () {
                    var start = $("input[name='{{ model_name }}-start']").val();
                    var end = $("input[name='{{ model_name }}-end']").val();
                    if(start && end){if(new Date(start) > new Date(end)){
                        layer.alert(gettext('end_date_can_not_greater_than_start_date'), {
                            title: 'Prompt'
                            , icon: 5
                            , btn: gettext('btn_confirm')
                        });
                            return false;
                    }
                    }
                    if (!start) {
                      layer.alert(gettext("start_date_is_empty"),{
                            title: gettext('system_exception')
                            , icon: 5
                            , btn: gettext('btn_confirm')
                            })
                      return false;
                    }
                    if (!end) {
                      layer.alert(gettext("end_date_is_empty"),{
                          title: gettext('system_exception')
                          , icon: 5
                          , btn: gettext('btn_confirm')
                          })
                      return false;
                    }
                    table.reload(tb.config.id, {
                        where: {
                            end_time_gte: start,
                            start_time_lte: end,
                            category: $('#{{ model_name }}RequestCategory').val() || null,
                            audit_status: $('#{{ model_name }}-aStatus').val() || null
                        }
                    });
                    //bindAllActions();
                });
                $('#{{ model_name }}-refresh_btn').on('click', function () {
                    $("input[name='{{ model_name }}-start']").val(_start);
                    $("input[name='{{ model_name }}-end']").val(_end);
                    $('#tab_{{ model_name }} .layui-form-select .layui-select-title input[readonly]').each(function () {
                        $(this).val('');
                        $(this).closest('.layui-unselect').find('.layui-select-tips').addClass('layui-this').siblings().removeClass('layui-this');
                    });
                    table.render(opts);
                    bindAllActions();
                });
                function leavedetailsrefresh() {
                    $.ajax({
                        url: "/att/api/leavedetailsReport/?employees={{ user.id }}"
                        , dataType: 'json'
                        , type: "GET"
                        , success: function (response) {
                            leave_data = response['data'][0];
                            if(leave_data) {
                                $('#one').html(leave_data['effective_date']);
                                $('#two').html(leave_data['increment_date']);
                                $('#three').html(leave_data['allotment_type']);
                                $('#four').html(leave_data['days']);
                                $('#five').html(leave_data['max_leave_per_month']);
                                $('#six').html(leave_data['leave_availed']);
                                $('#ten').html(leave_data['carry_forward_limit']);
                                $('#eleven').html(leave_data['leave_balance']);
                            }
                        }, error: function (response) {

                        }
                    });
                }

                leavedetailsrefresh();
            });

        });
    </script>
{% endblock %}
