@{
    ViewBag.Title = "SalarySettings";
}

<script src="~/Scripts/Autocomplete/jquery-ui.js"></script>

<link rel="stylesheet" type="text/css" href="../../../app-assets/vendors/css/tables/jsgrid/jsgrid-theme.min.css">
<link rel="stylesheet" type="text/css" href="../../../app-assets/vendors/css/tables/jsgrid/jsgrid.min.css">
<link rel="stylesheet" type="text/css" href="../app-assets/vendors/css/hopscotch.css">







 <div id="SalarySettings" style="margin-top:2%; margin-left:30%">
        <div class="row">
            <div class="col-md-8">
                <div class="card" style="width:650px">
                    <div class="card-header" style="border-bottom:1px solid #e6e6e6">
                        <h4 class="card-title mb-0"> SALARY SETTINGS </h4>
                    </div>
                    <div class="card-body">
                        <div class="px-5" style="width:720px">
                            <div class="card-content collapse show" style="width:535px">
                                <div class="card-body">
                                    <div style="height:15px;"></div>
                                    <form action="#">
                                        <div class="form-body">

                                            <div class="form-group row">
                                                <label class="col-md-3 label-control" for="userinput2">JOB<span class="danger"></span></label>
                                                <div class="col-md-8">
                                                    <input type="text" id="JobName" class="form-control editds ui-autocomplete-input" style="height:90%" autocomplete="off">
                                                   
                                                </div>
                                            </div>
                                            <hr style="margin-top:5px">
                                            <div class="form-body">
                                                <div>
                                                    <div class="row">
                                                        <div class="col-md-12">

                                                            <div class="row" style="height:28px;">
                                                                <div class="col-md-6">
                                                                    <div class="form-group">
                                                                        <label>Designation</label>
                                                                    </div>
                                                                </div>
                                                                <div class="col-md-3">
                                                                    <div class="form-group">
                                                                        <label>Salary</label>
                                                                    </div>
                                                                </div>
                                                                <div class="col-md-1">
                                                                    <div class="form-group">
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-12">
                                                            <div class="row">
                                                                <div class="col-md-6">
                                                                    <div class="input-group">
                                                                        <input type="text" id="txtDesignation0" class="form-control" style="" onkeyup="changetoupper(this.id),checkpdcttextempty(event)">
                                                                        <div class="input-group-append" id="addProduct">
                                                                            <button class="btn btn-outline-primary" onclick="window.open('../master/Designation')" id="btnaddprd" type="button">+</button>
                                                                        </div>
                                                                       
                                                                    </div>
                                                                </div>
                                                                <input type="hidden" id="Description" />
                                                                <div class="col-md-3">
                                                                    <div class="form-group">
                                                                        <input type="text" id="txtSalary0" class="form-control editds" onkeypress="isNumberInt(event, this)">
                                                                    </div>
                                                                </div>
                                                                <div class="col-md-1">
                                                                    <div class="form-group">
                                                                        <button type="button" id="btnadd" style="height:40px;width:95px" onclick="Designationadd()" class="btn btn-outline-primary ">+ Add </button>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div style="margin-left:0px;margin-right:0px;">
                                                <div id="customView" class="jsgrid" style="position: relative; height: auto; width: 99%;border:solid 1px;border-color:#cccccc;border-bottom:1px solid #cccccc;overflow-x: auto;overflow-y: hidden;">
                                                    <div class="jsgrid-grid-header jsgrid-header-scrollbar" style="width:525px;">
                                                        <table class="jsgrid-table">
                                                            <tr class="jsgrid-header-row">
                                                                <th class="jsgrid-header-cell jsgrid-align-right jsgrid-header-sortable" style="width:60px">Sl No</th>
                                                                <th class="jsgrid-header-cell jsgrid-align-right jsgrid-header-sortable" style="width:220px">Designation</th>
                                                                <th class="jsgrid-header-cell jsgrid-align-right jsgrid-header-sortable" style="width:140px">Salary</th>
                                                                <th class="jsgrid-header-cell jsgrid-control-field jsgrid-align-center" style="width:105px"></th>
                                                            </tr>
                                                        </table>
                                                    </div>
                                                    <div id="proddiv" class="jsgrid dataTables_scrollBody" style="position: relative;overflow-x: auto;overflow-y: auto; height: 290px; width: 525px;">
                                                        <table class="jsgrid-table" id="tblDesignationAdd"></table>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-actions">
                                            <div class="text-right">
                                                <button id="btnsubmit" type="button" class="btn btn-outline-warning" autofocus="">Save</button>
                                                <button id="btnnew" type="button" class="btn btn-outline-primary" autofocus="">New</button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


<input type="hidden" id="rowcount" value="1" />
<input type="hidden" id="JobId"/>
<input type="hidden" id="DesignationId0" />










    <script>


        var Sal = 0;
        var editflag = 0;

        var UId = ERPUserId;
        var DeptId = ERPDeptId;





        $("#JobName").autocomplete({
            delay: 0,
            minLength: 0,
            source: function (request, response) {
                var data = {};
                data.Description = $("#JobName").val();
                $.ajax({
                    url: '../SalarySettings/JobNameSearch',
                    type: "POST",
                    data: data,
                    dataType: "json",
                    success: function (data) {
                        response($.map(data, function (item) {
                            return ({
                                ColCount: 'THREE',
                                label: item.Description,
                                label1: item.JobCode,
                                label2: item.ProjectJobId,
                                headers: ["Job Name", "Code"]
                            })
                        }));
                    }
                })
            },
            autoFocus: true,
            select: function (event, ui) {
                $('#JobName').val(ui.item.Description);
                $('#JobId').val(ui.item.label2);
                var data = {};
                data.JobCode = $("#JobId").val();
                $.ajax({
                    type: "POST",
                    url: "../SalarySettings/GetCopy",
                    data: data,
                    success: function (result) {
                        if (result.length != 0) {
                            ShowCopyDetails(result.oList);
                        }
                    }
                });
                $('#txtDesignation0').focus();
                $('#txtDesignation0').select();
            },
        });


        function ShowCopyDetails(result) {
            if (result.length > 0) {
                $('#rowcount').val(parseInt(result.length) + 1);
            }


            var serialNo = 1;
            var slno = 1;
            $('#tblDesignationAdd tr').remove();

            for (var i = 0; i < result.length; i++) {

                var UId = result[i].UId;
                var DeptId = result[i].DeptId;
                var ProdRowEdit = "<tr id=" + 'row' + slno + " class= jsgrid-row ><td  id=" + 'td' + slno + " class= jsgrid-cell  style= width:61px;text-align:center >"
                   + serialNo + "</td><td class= 'jsgrid-cell jsgrid-align-left'  style='width:220px;text-align:center' > <input typ='text' class='form-control' disabled=disabled  style='background-color:white;height:30px;' id='txtprd" + slno + "' value='"
                   + result[i].DesignationDescription + "'></td><td  style='display:none;'> <input type='hidden' id='dstTextId" + slno + "' value='"
                   + result[i].DesignationId + "'></td> <td class= 'jsgrid-cell jsgrid-align-left'  style='width:140px;text-align:center' display='none;'> <input type='text' class='form-control'  disabled  style='background-color:white;height:30px;'  onkeypress='isNumbercheck(event,this)' id='txtdesc" + slno + "' value='"
                   + result[i].Salary + "'> </td> <td id='Edit" + slno + "' class= 'jsgrid-cell jsgrid-control-field jsgrid-align-center'  style= width: 95px; ><input class= 'jsgrid-button jsgrid-edit-button' onclick='Editrow(" + slno + ")' id='Edit' type=button title=Edit ><input class= 'jsgrid-button jsgrid-delete-button'  type= button id='delete' title= Delete onclick='rowdelete(" + slno + ")' ></td><td id='Update"
                   + slno + "'  class= 'jsgrid-cell jsgrid-control-field jsgrid-align-center'  style='width:120px;display:none;'><input class='jsgrid-button jsgrid-update-button' onclick='Updaterow(" + slno + ")' type=button id='update' title='Update'><input class='jsgrid-button jsgrid-cancel-edit-button' onclick='CancelEditrow(" + slno + ")' type='button' id='CancelEdit' title='Cancel edit'></tr>";
                $('#tblDesignationAdd').append(ProdRowEdit);
                console.log(ProdRowEdit);
                serialNo += 1;
                slno += 1;
                $("#txtDesignation0").focus();
              //  $("#btnsubmit").html('UPDATE');;
            }

        }


        $("#txtDesignation0").autocomplete({
            delay: 0,
            minLength: 0,
            source: function (request, response) {
                var data = {};
                data.DesignationDescription = $("#txtDesignation0").val();
                $.ajax({
                    url: '../SalarySettings/DesignationNameSearch',
                    type: "POST",
                    data: data,
                    dataType: "json",
                    success: function (data) {
                        response($.map(data, function (item) {
                            return ({
                                ColCount: 'THREE',
                                label: item.DesignationDescription,
                                label1: item.DesignationCode,
                                label2: item.DesignationId,
                                headers: ["Designation Name", " Code"]
                            })
                        }));
                    }

                })
            },
            autoFocus: true,
            select: function (event, ui) {
                $('#txtDesignation0').val(ui.item.DesignationDescription);
                $('#DesignationId0').val(ui.item.label2);
                $('#txtSalary0').focus();
                $('#txtSalary0').select();
            },

        });



        $(document).ready(function () {

            $('#JobName').focus();
            $('#JobName').select();


            $("#btnnew").click(function (e) {
                Refresh1();
            });

            $("#btnsubmit").click(function (e) {

             

                rowcount = CountRows();
                if ($('#JobName').val() == "") {
                    warningshow('Please Select Job', 'JobName');
                    return false;
                }
                else if (rowcount == 0) {
                    warningshow('No Products Added', 'txtproduct0');
                    return false;
                }
                else {
                    alert("hi");
                    $('#btnsubmit').prop("disabled", true);
                    var JobCode = $('#JobId').val();

                    var oArray = new Array();
                    DelFlag = 1;


                    for (var k = 1; k <= $('#rowcount').val() ; k++) {
                        var DesignationId = $('#dstTextId' + k).val();
                        var Salary = $('#txtdesc' + k).val();
                        var Designation = $('#txtprd' + k).val();
                        if (Designation != undefined) {
                            oArray.push({
                                'JobCode': JobCode,
                                'DesignationId': DesignationId,
                                'Salary': Salary,
                                'UId': UId,
                                'DeptId': DeptId,
                                'DelFlag': DelFlag
                            })
                        }
                    }
                    if (oArray != "") {
                        var data = { 'DesignationModel': oArray };
                        $.ajax({
                            type: "POST",
                            url: "../../SalarySettings/SalarySettingInsertandUpdate",
                            data: data,
                            success: function (result) {
                                for (var i = 0; i <= result.oList.length; i++) {
                                    var status = result.oList[i].Status;
                                    $('#btnsubmit').prop("disabled", false);
                                    if (status != 0) {
                                        Showalerts(status);
                                        Refresh1();
                                      
                                    }
                                    else {
                                        Showalerts('Error', Billno);
                                        Refresh1();
                                     
                                    }
                                }
                            }
                        });
                    }
                }
            });

            $('#txtSalary0').keydown(function (e) {
                var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
                if (key == 13) {
                    e.preventDefault();
                    $('#btnadd').focus();
                    $('#btnadd').select();
                    Designationadd();

                }
            });
        });

        function warningshow(message, Id) {
            $('#popupmessage').text(message);
            $('#Warningpopup').show();
            $('#' + Id).focus();
            window.setTimeout(function () {
                $('#Warningpopup').fadeOut();
            }, 3000);
        }

        function CountRows() {
            var totalRowCount = 0;
            var rowCount = 0;
            var table = document.getElementById("tblDesignationAdd");
            var rows = table.getElementsByTagName("tr")
            for (var i = 0; i < rows.length; i++) {
                totalRowCount++;
                if (rows[i].getElementsByTagName("td").length > 0) {
                    rowCount++; $('.form-control').pro
                } $('.form-control').pro
            }
            var message = "Total Row Count: " + totalRowCount;
            message += "\nRow Count: " + rowCount;
            return rowCount;
        }

        function Showalerts(Status) {
            if (Status == 1) {
               
                swal('SavedSuccessfully', "", "success");
                $('.swal-button swal-button--confirm').focus();
                Refresh1();
             
                $('#JobName').focus();
            }
            else {
                Refresh1();
                swal("OOPS");
                $('.swal-button swal-button--info').focus();
            }
        }

        function Defaultfocus() {
            $('#JobName').focus();
        }
        function rowdelete(RowId) {
            var sllno = 1;
            var table = document.getElementById("tblDesignationAdd");
            var rows = table.getElementsByTagName("tr")
            var i = rows.length;

            var rowslno = parseInt(sllno);
            $('#row' + RowId).remove();
            for (var j = 1; j <= i ; j++) {
                if ($('#txtprd' + j).val() != undefined) {
                    $('#td' + j).text(sllno);
                    sllno++;
                }
            }
            ClearProductRow();
        }

        function ClearProductRow() {

            $('#txtDesignation0').val('');
            $('#txtSalary0').val('');
            $('#txtDesignation0').focus();
        }

        function Editrow(RowId) {
            editflag = editflag + 1;
            $('#row' + RowId).children('td,th').css('background-color', 'rgb(232,226,226)');
            $('#Edit' + RowId).hide();
            $('#Update' + RowId).show();
            Sal = $('#txtdesc' + RowId).val();
            $('#txtdesc' + RowId).prop('disabled', false);

        }
        function Designationadd() {


        
             
                
                if (($.trim($('#DesignationId0').val()) == ""))
                {
                    warningshow('Please Select Proper Designation');
                    $('#txtDesignation0').val('');
                    $('#txtSalary0').val('');
                    $('#txtDesignation0').focus();
                    $('#txtDesignation0').select();
                    return false;
                    
                }
                if (($.trim($('#JobId').val()) == ""))
                {
                    warningshow('Please Select Proper Job ');
                    $('#JobId').val('');
                    $('#JobName').val('');
                    $('#JobName').focus();
                    $('#JobName').select();
                    return false;
                }






            var table = document.getElementById("tblDesignationAdd");
            var rows = table.getElementsByTagName("tr")
            var i = rows.length;



            var ProductFlag = 0;

            if (i != 0) {

                for (p = 1; p <= i; p++) {
                    if ($('#txtprd' + p).val() == $("#txtDesignation0").val()) {
                        ProductFlag = 1;
                    }
                }

            }

            // var slno = parseInt($('#slnotxt').val())
            if ($.trim($('#txtDesignation0').val()) == "") {
                warningshow('Please Select Designation', 'txtDesignation0');
                return false;
            }
            else if ($('#txtSalary0').val() == "") {
                warningshow('Please Enter Salary', 'txtSalary0');
                return false;
            }
            else {

                if (ProductFlag == 1) {
                    var Res = confirm('Designation Already Added! Do You Want to Continue');
                    if (Res == false) {
                        ClearProductRow();
                        return false;
                    }
                }

                var slno = parseInt($('#rowcount').val());



                var serialNo = i + 1;




                var ProdRowEdit = "<tr id=" + 'row' + slno + " class= jsgrid-row ><td  id=" + 'td' + slno + " class= jsgrid-cell  style= width:61px;text-align:center >"
                   + serialNo + "</td><td class= 'jsgrid-cell jsgrid-align-left'  style='width:220px;text-align:center' > <input typ='text' class='form-control' disabled=disabled  style='background-color:white;height:30px;' id='txtprd" + slno + "' value='"
                   + $("#txtDesignation0").val() + "'></td><td  style='display:none;'> <input type='hidden' id='dstTextId" + slno + "' value='"
                   + $("#DesignationId0").val() + "'></td> <td class= 'jsgrid-cell jsgrid-align-left'  style='width:140px;text-align:center' display='none;'> <input type='text' class='form-control'  disabled  style='background-color:white;height:30px;'  onkeypress='isNumbercheck(event,this)' id='txtdesc" + slno + "' value='"
                   + $("#txtSalary0").val() + "'> </td> <td id='Edit" + slno + "' class= 'jsgrid-cell jsgrid-control-field jsgrid-align-center'  style= width: 95px; ><input class= 'jsgrid-button jsgrid-edit-button' onclick='Editrow(" + slno + ")' id='Edit' type=button title=Edit ><input class= 'jsgrid-button jsgrid-delete-button'  type= button id='delete' title= Delete onclick='rowdelete(" + slno + ")' ></td><td id='Update"
                   + slno + "'  class= 'jsgrid-cell jsgrid-control-field jsgrid-align-center'  style='width:120px;display:none;'><input class='jsgrid-button jsgrid-update-button' onclick='Updaterow(" + slno + ")' type=button id='update' title='Update'><input class='jsgrid-button jsgrid-cancel-edit-button' onclick='CancelEditrow(" + slno + ")' type='button' id='CancelEdit' title='Cancel edit'></tr>";
                $('#tblDesignationAdd').append(ProdRowEdit);
                ClearProductRow();

                $('#rowcount').val(parseInt(slno + 1));


                $('#proddiv').animate({ scrollTop: 5000 }, 900);
                $("#txtDesignation0").focus();

                $('#DesignationId0').val('');
                

            }


        }
        function Updaterow(RowId) {
            if ($('#txtdesc' + RowId).val() == '0') {
                warningshow('Salary cannot be Zero', 'txtprd' + RowId);
                $('#txtdesc' + RowId).focus();
                return false;
            }

            else {
                editflag = editflag - 1;
                $('#row' + RowId).children('td,th').css('background-color', 'white');
                $('#Update' + RowId).hide();
                $('#Edit' + RowId).show();
                $('#txtdesc' + RowId).prop('disabled', true);
            }
        }
        function CancelEditrow(RowId) {
            editflag = editflag - 1;
            $('#row' + RowId).children('td,th').css('background-color', 'white');
            $('#Update' + RowId).hide();
            $('#Edit' + RowId).show();
            $('#txtdesc' + RowId).val(Sal);
        }
        function Refresh1() {
            var Sal = 0;
            var editflag = 0;
            var UId = ERPUserId;
            var DeptId = ERPDeptId;

            $('#JobName').val('');

            $('#txtSalary0').val('');
            $('#txtDesignation0').val('');
            $('#JobId').val('');
            $('#rowcount').val(1);
            $('#tblDesignationAdd tr').remove();
            $("#btnsubmit").html('SAVE');
            $('#DesignationId0').val('');


            $('#JobName').focus();
          


        }
        //Allow Integers ONLY
        function isNumberInt(evt, selectedvalue) {
            var charCode = (evt.which) ? evt.which : event.keyCode
            $(selectedvalue).val($(selectedvalue).val().replace(/[^0-9\.]/g, ''));
            if (charCode != 8 && charCode != 13 && (charCode < 48 || charCode > 57)) {
                evt.preventDefault();
                warningshow('Digits Only')
                return false;
            }
            return true;
        }


    </script>