function initializeWorkOrderMaterials() {
    var productionType = $("#prodType").val();
    var fromDailyPlan = productionType === "MF" ? localStorage.getItem('WoFromDailyPlan') : "false";

    $itemsTable = $('#mainGridProcessing');
    var itemsTable = $itemsTable.DataTable({
        initComplete: function () {
            var api = this.api();
        },
        ajax: {
            url: $itemsTable.attr('data-url'),
            data: function (d) {
                d.Key = $("#AcKey").val();
                d.ItemType = $("#itemType").val();
                d.DataFromDailyPlan = fromDailyPlan;
            }
        },
        columns: [
            {
                data: function (data) {
                    return  "<span style='width:28rem;position: relative;text-align: center;vertical-align: middle;display: table-cell;height: 150px;'>" +
                            "   <img class='picture' src='" + data.Picture + "' /> " +
                            "</span>";
                },
                orderable: false,
                render: function (data) {
                    return data;
                },
                createdCell: function (td, cellData, full) {
                    $(td)
                        .attr('data-toggle', 'tooltip')
                        .attr('data-placement', 'top')
                        .attr('data-original-title', full.IdentDescr);

                }
            },

            {
                data: "IdentDescr",
                name: "IdentDescr",
                filtertype: "text",
                className: "dt-body-left",
                render: function (data, type, full) {
                    return type === 'display' ?
                        '<div class="margin-top-10">' +
                        '   <label class="control-label">' + $("#materialCaption").val() + '  <i class="fa fa-hashtag"></i><span>' + full.AnNo + '</span></label>' +
                        '   <div>' +
                        '       <span style="font-size: 14px; display: inline-block; overflow:hidden; width:28rem; text-overflow: ellipsis;">' + data + '</span>' +
                            '</div>' +
                        '</div >' : data;

                },
                createdCell: function (td, cellData) {
                    $(td)
                        .attr('data-toggle', 'tooltip')
                        .attr('data-placement', 'top')
                        .attr('data-original-title', cellData);

                }
            },
            {
                data: "AnNo",
                name: "AnNo",
                filtertype: "text",
                className: "dt-body-left",
                render: function (data, type, full) {
                    return type === 'display' ?
                        '<span style="margin-right:2px"> <i class="fa fa-hashtag"></i> </span> <span>' + data + '</span>' : data;
                }
            },
            {
                data: 'CompletedPrcQty',
                render: function (data, type, row, meta) {
                    return type === 'display' ?
                        '<progress value=' + data + ' max="100" style="width: 100%"></progress>' :
                        data;
                }
            },

            {
                data: 'Status',
                render: function (data, type, full) {
                    var completedPrc = $.fn.dataTable.render.number('.', ',', 0, '', " ").display(full.CompletedPrcQty);
                    var planQty = $.fn.dataTable.render.number('.', ',', 2, '', "").display(full.PlanPcs);
                    var qty = $.fn.dataTable.render.number('.', ',', 2, '', "").display(full.DonePcs);
                    return type === 'display' ?
                        '<span>' + data + ' (' + completedPrc + '%)</span>  <span class="pull-right">' + qty + '/' + planQty +' ' + full.UM + '</span>' : data;
                }
            }

        ],
        createdRow: function (row, data, dataIndex) {
            $(row).css('cursor', 'pointer');
        },
        drawCallback: function () {
            $("[data-toggle='tooltip']").tooltip({
                container: 'body'
            });
        }
    })

    itemsTable.on('click', 'tr', function () {
        var data = itemsTable.row($(this)).data();
        window.location.href = "EditMat?key=" + data.AcKey + '&no=' + data.AnNo + '&type=' + productionType;
    });

};


function initializeWorkOrderOperations() {
    var productionType = $("#prodType").val();
    var fromDailyPlan = productionType === "MF" ? localStorage.getItem('WoFromDailyPlan') : "false";

    $itemsTable = $('#mainGridProcessing');
    var itemsTable = $itemsTable.DataTable({
        initComplete: function () {
            var api = this.api();
            api.column(1).visible(productionType === "MF" ? true : false);
            api.column(2).visible(fromDailyPlan === "true" ? true : false);
            api.column(3).visible(fromDailyPlan === "true" ? true : false);
            api.column(4).visible(productionType === "MF" ? true : false);
        },
        ajax: {
            url: $itemsTable.attr('data-url'),
            data: function (d) {
                d.Key = $("#AcKey").val();
                d.ItemType = $("#itemType").val();
                d.DataFromDailyPlan = fromDailyPlan;
            }
        },
        columns: [
            {
                data: "IdentDescr",
                name: "IdentDescr",
                filtertype: "text",
                className: "dt-body-left",
                render: function (data, type, full) {
                    return type === 'display' ?
                        '<div class="margin-top-10">' +                        
                        '<label class="control-label">' + $("#operationCaption").val() + '  <i class="fa fa-hashtag"></i><span>' + full.AnNo + '</span></label>' +
                        '   <div>' +
                        '       <span style="font-size: 14px; display: inline-block; overflow:hidden; width:28rem; text-overflow: ellipsis;">' + data + '</span>' +
                        '   </div>' +
                        '</div >' : data;

                },
                createdCell: function (td, cellData) {
                    $(td)
                        .attr('data-toggle', 'tooltip')
                        .attr('data-placement', 'top')
                        .attr('data-original-title', cellData);
                }
            },

            {
                data: "ResursID",
                name: "ResursID",
                filtertype: "text",
                className: "card-label",
                render: function (data, type, full) {
                    return type === 'display' ?
                        '<h3 class="card-header text-success">' +
                        '<span style = "display: inline-block; overflow:hidden; width:28rem; text-overflow: ellipsis;" >' +
                        '<i class="fas fa-cogs"></i> ' + data + ' - ' + full.ResourceName +
                        '</span>' +
                        '</h3 > ' : data;


                },
                createdCell: function (td, cellData, full) {
                    $(td)
                        .attr('data-toggle', 'tooltip')
                        .attr('data-placement', 'top')
                        .attr('data-original-title', cellData + ' - ' + full.ResourceName);

                }
            },
            {
                data: "AcKeyDisplay",
                name: "AcKeyDisplay",
                filtertype: "text",
                className: "dt-body-left",
                render: function (data, type, full) {
                    return type === 'display' ?
                        '<span style="margin-right:2px"> <i class="fa fa-hashtag"></i> </span> <span>' + full.DPKeyView + '</span>' : data;
                }
            },
            {
                data: "ShiftName",
                name: "ShiftName",
                render: function (data, type, full) {
                    return type === 'display' ?
                        '<span style="margin-right:2px"></span> <span>' + data + '</span>' : data;
                }
            },
            {
                data: "StartEnd",
                name: "StartEnd",
                render: function (data, type, full) {
                    return type === 'display' ?
                        '<span style="margin-right:2px"> <i class="far fa-clock"></i> </span> <span>' + data + '</span>' : data;
                }
            },
            {
                data: 'CompletedPrcTime',
                render: function (data, type, row, meta) {
                    return type === 'display' ?
                        '<progress value=' + data + ' max="100" style="width: 100%"></progress>' :
                        data;
                }
            },

            {
                data: 'Status',
                render: function (data, type, full) {
                    var completedPrc = $.fn.dataTable.render.number('.', ',', 0, '', " ").display(full.CompletedPrcTime);
                    var planQty = $.fn.dataTable.render.number('.', ',', 2, '', "").display(full.PlanTime);
                    var qty = $.fn.dataTable.render.number('.', ',', 2, '', "").display(full.DoneTime);
                    return type === 'display' ?
                        '<span>' + data + ' (' + completedPrc + '%)</span>  <span class="pull-right">' + qty + '/' + planQty + ' ' + full.UM +  '</span>' : data;
                }
            }

        ],
        createdRow: function (row, data, dataIndex) {
            $(row).css('cursor', 'pointer');
        },
        drawCallback: function () {
            $("[data-toggle='tooltip']").tooltip({
                container: 'body'
            });
        }
    })

    itemsTable.on('click', 'tr', function () {
        var data = itemsTable.row($(this)).data();
        window.location.href = "WorkReg?key=" + data.AcKey + '&no=' + data.AnNo + '&resID=' + data.ResursID + '&type=' + productionType;
    });

};


function saveOperation(validate) {

    var receiveURL = $("#receiveURL").val();
    var buttonText = $("#buttonText").val();
    var succesText = $("#succesText").val();

    if (validate) {
        var qty = $("#qty").val();
        var worker = $('#selectWorker :selected').text();
        var requiedText = "";
        if (worker === "")
            requiedText = $("#requiedWorker").val();
        else
            if (qty === 0 || qty === "")
                requiedText = $("#requiedQty").val();


        if (qty === "" || qty === 0 || worker === "") {
            $().customModal({
                destroyOnClose: true,
                showCloseButton: true,
                id: "requiedInput",
                type: "alert",
                text: requiedText,
                buttons: [
                    {
                        icon: 'fa fa-check',
                        text: buttonText,
                        closeOnAction: true,
                        type: 'primary'
                    }
                ]
            });
            return false;
        };
    }


    swapLoadingIcon(true, "confirmButton", "fa fa-check");

    var formData = $("#workOrderEditOper").serializeArray();

    $.post(receiveURL, formData)
        .done(function (response) {

            if (response.Success) {

                $().customModal({
                    destroyOnClose: true,
                    showCloseButton: true,
                    id: "displayPopupSuccessModal",
                    type: "success",
                    text: succesText,
                    buttons: [
                        {
                            icon: 'fa fa-check',
                            text: buttonText,
                            closeOnAction: true,
                            type: 'primary',
                            action: function () {
                                location.reload();
                            }
                        }
                    ]
                });

            } else {

                let errorText = response.Error;

                $().customModal({
                    destroyOnClose: true,
                    showCloseButton: true,
                    id: "displayPopupErrorModal",
                    type: "alert",
                    text: errorText,
                    buttons: [
                        {
                            icon: 'fa fa-check',
                            text: buttonText,
                            closeOnAction: true,
                            type: 'primary'
                        }
                    ]
                });

            }

            swapLoadingIcon(false, "confirmButton", "fa fa-check");
        });

}


function saveMaterial() {

    var receiveURL = $("#receiveURL").val();
    var buttonText = $("#buttonText").val();
    var succesText = $("#succesText").val();
    var qty = $("#qty").val();

    if (qty === "" || qty === 0) {

        $().customModal({
            destroyOnClose: true,
            showCloseButton: true,
            id: "requiedInput",
            type: "alert",
            text: $("#requiedQty").val(),
            buttons: [
                {
                    icon: 'fa fa-check',
                    text: buttonText,
                    closeOnAction: true,
                    type: 'primary'
                }
            ]
        });

        return false;
    };

    swapLoadingIcon(true, "confirmButton", "fa fa-check");

    var formData = $("#workOrderEditMat").serializeArray();

    $.post(receiveURL, formData)
        .done(function (response) {

            if (response.Success) {

                $().customModal({
                    destroyOnClose: true,
                    showCloseButton: true,
                    id: "displayPopupSuccessModal",
                    type: "success",
                    text: succesText,
                    buttons: [
                        {
                            icon: 'fa fa-check',
                            text: buttonText,
                            closeOnAction: true,
                            type: 'primary',
                            action: function () {
                                location.reload();
                            }
                        }
                    ]
                });

            } else {

                let errorText = response.Error;

                $().customModal({
                    destroyOnClose: true,
                    showCloseButton: true,
                    id: "displayPopupErrorModal",
                    type: "alert",
                    text: errorText,
                    buttons: [
                        {
                            icon: 'fa fa-check',
                            text: buttonText,
                            closeOnAction: true,
                            type: 'primary'
                        }
                    ]
                });

            }

            swapLoadingIcon(false, "confirmButton", "fa fa-check");
        });

}