@{
    ViewBag.Title = "DashBoard";
}

<script type="text/javascript" src="../Projectscript/Common.js"></script>
<script type="text/javascript" src="../Projectscript/WorkItemNew.js"></script>
<script src="~/Scripts/Autocomplete/jquery-ui.js"></script>

<script>
    var ComapnydivToPrint = document.getElementById("ComapnyImageDashbpard");

</script>
<script>
    $('#Heading').text(CompanySettingsArray.CompanyName);
    $('#xxx').append(ComapnydivToPrint.outerHTML);

</script>
@*<div class="col-md-11 text-center" style="position:fixed;">
    <h1 id="Heading" class="text-center" style="font-weight:500;margin-top:10%;"></h1>
    <div class="text-center" style="margin-top:5%;height:200px;width:100%" id="xxx"></div>
</div>*@

<style>
     .eumi-search-box {
        box-sizing: border-box;
        width: 100%;
    }
         .modal-slg {
        max-width: 700px;
    }

</style>

<div class="row">

    <div class="col-xl-12 col-lg-12 col-12">
        <div class="card" id="defaulttable" style="width:100%;">
            <div class="row m-1">
                <div class="col-md-12" style="align-content:center;">
                    <div class="card-header">
                        <center><h4 class="card-title mb-0">Work Items</h4></center>
                    </div>

                    <div class="card-body" style="margin-top:3px; height:auto; overflow:auto;width:100%;">
                        <table id="listitems" class="table table-condensed table-light table-striped table-bordered eumi-search-table" style="width:150%;margin-top:40px;">                          
                        </table>
                    </div>
                </div>
            </div>


            <div style="height:90%;clear: both">
                &nbsp;
            </div>
        </div>
    </div>
</div>

<div id="popupdiv" class="modal fade text-left show" tabindex="-1" role="dialog" aria-labelledby="myheader" style="background:rgba(0,0,0,0.5); display: block;display:none;">
    <div class="modal-dialog modal-slg" role="document" style="">
        <div class="modal-content">
            <div class="modal-header bg-primary white">
                <h5 class="modal-title" id="myheader">Create Work Item</h5>
                <button type="button" class="close" onclick="CloseAssign()" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>

            <div class="modal-body">
                <div class="col-md-12">
                    <div class="row">
                        <input type="hidden" id="WorkItemId" class="form-control" value="0">
                        <label class="col-md-5" style="margin-top:5px;text-align:left">Department:</label>
                        <div class="col-md-7">
                            <select id="Department" class="form-control disa"></select>
                        </div>


                    </div>
                    <div class="row" style="margin-top:2%;">

                        <label class="col-md-5" style="margin-top:5px;text-align:left">Division:</label>
                        <div class="col-md-7">
                            <select id="Division" class="form-control disa" onchange="WorkTaskTime()"></select>
                        </div>

                    </div>
                    <div class="row" style="margin-top:2%;">

                        <label class="col-md-5" style="text-align:left">Assigned To:</label>
                        <div class="col-md-7">
                            <input type="text" id="User" class="form-control disa" autocomplete="off" onkeyup="checkuser()">
                        </div>
                        <input type="hidden" id="UserId" value="0" class="form-control" autocomplete="off">
                        <input type="hidden" id="UserLength" class="form-control" autocomplete="off">
                    </div>
                    <div class="row followuphide followuphidedef" style="margin-top:2%;">

                        <label class="col-md-5" style="text-align:left">Title:</label>
                        <div class="col-md-7">
                            <input type="text" id="Title" class="form-control disa" autocomplete="off">
                        </div>

                    </div>
                    <div class="row followupshow" style="margin-top:2%;display:none">

                        <label class="col-md-5" style="text-align:left">Title:</label>
                        <div class="col-md-7">
                            <input type="text" id="Customer" class="form-control disa" autocomplete="off">
                        </div>
                        <input type="hidden" id="CustId" />
                    </div>
                    <div class="row" style="margin-top:2%;height:90px;">

                        <label class="col-md-5" style="text-align:left">Description:</label>
                        <div class="col-md-7">
                            <textarea id="Description" class="form-control disa" style="resize: none;height:100%"></textarea>
                        </div>

                    </div>
                    <div class="row" style="margin-top:2%;">

                        <label class="col-md-5" style="text-align:left">Reference Type:</label>
                        <div class="col-md-7">
                            <input type="text" id="RefType" class="form-control disa" autocomplete="off">
                        </div>
                    </div>
                    <div class="row" style="margin-top:2%;">

                        <label class="col-md-5" style="text-align:left">Reference Id:</label>
                        <div class="col-md-7">
                            <input type="text" id="RefId" class="form-control disa" autocomplete="off">
                        </div>

                    </div>

                    <div class="row" style="margin-top:2%;">

                        <label class="col-md-5" style="text-align:left">Delivery Area</label>
                        <div class="col-md-7">
                            <select id="txtdeliveryarea" class="form-control disa">
                                <option value="Industrial -1">Industrial -1</option>
                                <option value="Industrial -2">Industrial -2</option>
                                <option value="Industrial -3">Industrial -3</option>
                                <option value="Industrial -4">Industrial -4</option>
                                <option value="Industrial -5">Industrial -5</option>
                                <option value="Industrial -6">Industrial -6</option>
                                <option value="Industrial -7">Industrial -7</option>
                                <option value="Industrial -8">Industrial -8</option>
                                <option value="Industrial -9">Industrial -9</option>
                                <option value="Industrial -10">Industrial -10</option>
                                <option value="Industrial -11">Industrial -11</option>
                                <option value="Industrial -12">Industrial -12</option>
                                <option value="Industrial -13">Industrial -13</option>
                                <option value="Industrial -14">Industrial -14</option>
                                <option value="Industrial -15">Industrial -15</option>
                                <option value="Industrial -16">Industrial -16</option>
                                <option value="Industrial -17">Industrial -17</option>
                                <option value="Industrial -18">Industrial -18</option>
                                <option value="Qusais-1">Qusais-1</option>
                                <option value="Qusais-2">Qusais-2</option>
                                <option value="Qusais-3">Qusais-3</option>
                                <option value="Qusais-4">Qusais-4</option>
                                <option value="Qusais-5">Qusais-5</option>
                                <option value="Dubai">Dubai</option>
                                <option value="Ajman">Ajman</option>
                                <option value="Ras Al khor">Ras Al khor</option>
                                <option value="Rashidiya">Rashidiya</option>
                            </select>
                        </div>

                    </div>
                    <div class="row followuphide followuphidedef" style="margin-top:2%;">

                        <label class="col-md-5" style="text-align:left">Turn around Time:</label>
                        <div class="col-md-7">
                            <select class="form-control disa" id="Time"></select>
                        </div>
                    </div>
                    <div class="row followupshow" style="margin-top:2%;display:none;">

                        <label class="col-md-5" style="text-align:left">Due Date:</label>
                        <div class="col-md-7">
                            <input type="text" class="form-control disa" id="DueDate" />
                        </div>
                    </div>
                    <div class="row" style="margin-top:2%;">

                        <label class="col-md-5" style="text-align:left">Status</label>
                        <div class="col-md-7">
                            <select class="form-control disa" id="Status" onchange="checkhold(0)">
                                <option value="Created">Created</option>
                                <option value="Started">Started</option>
                                <option value="In Progress">In Progress</option>
                                <option value="On Hold">On Hold</option>
                                <option value="Ready To Deliver">Ready To Deliver</option>
                                <option value="On The Way">On The Way</option>
                                <option value="RTD-Waiting for Customer">RTD-Waiting For customer</option>
                                <option value="Delivered With Pending">Delivered With Pending</option>
                                <option value="Completed">Completed</option>
                                <option value="Canceled" hidden>Cancel</option>
                                <option value="Reassign" hidden>Reassigned</option>

                            </select>
                        </div>

                    </div>
                    <div class="row followuphide followuphidedef" style="margin-top:2%;">

                        <label class="col-md-5" style="text-align:left">Store Keeper:</label>
                        <div class="col-md-7">
                            <input type="text" id="StoreKeeper" class="form-control" />
                            <input type="hidden" id="StoreKeeperId" value="0" />
                        </div>
                    </div>
                    <div class="row" id="panel1" style="margin-top:2%;display:none">

                        <label class="col-md-5" style="text-align:left" id="reasondisplay"></label>
                        <div class="col-md-7">
                            <input type="text" id="Remarksdisplay" class="form-control disa" autocomplete="off">
                        </div>
                    </div>
                    <div class="row followuphide" id="panel2" style="margin-top:2%;display:none">

                        <label class="col-md-5" style="text-align:left" id="">Driver</label>
                        <div class="col-md-7">
                            <input type="text" id="Driver" class="form-control disa" autocomplete="off">
                            <input type="hidden" id="DriverId" class="form-control disa" value="0">
                        </div>
                    </div>
                    <div class="row followuphide" id="panel3" style="margin-top:2%;display:none">

                        <label class="col-md-5" style="text-align:left" id="">User</label>
                        <div class="col-md-7">
                            <input type="text" id="IPUser" class="form-control disa" autocomplete="off">
                            <input type="hidden" id="IPUserId" class="form-control disa" value="0">
                        </div>
                    </div>
                    <div class="row" style="margin-top:2%;height:70px;">

                        <label class="col-md-5" style="text-align:left">Remarks:</label>
                        <div class="col-md-7">
                            <textarea id="NewRemarks" class="form-control disa" style="resize: none;height:100%"></textarea>
                        </div>

                    </div>
                </div>

            </div>
            <div class="modal-footer">
                <button type="button" style="width:150px;display:none" id="btncancel" class="btn btn-outline-danger">Cancel Work</button>
                <button type="button" style="width:150px;display:none" id="btntransfer" class="btn btn-outline-warning">Transfer</button>
                <button type="button" style="width:150px;display:none" id="btnassignme" onclick="AssignMe()" class="btn btn-outline-success">Assign Me</button>
                <button type="button" style="width:100px" id="btnclose" onclick="CloseAssign()" class="btn btn-outline-secondary">Close</button>
                <button type="button" style="width:100px" id="btnassign" class="btn btn-info">Create</button>
                <button type="button" style="width:100px;display:none" id="CNWR" onclick="ReAssignAsNew()" class="btn btn-info">Re Assign</button>
            </div>


        </div>
    </div>
</div>

<div id="ReasonDiv" class="modal fade text-left show" tabindex="-1" role="dialog" aria-labelledby="myheader" style="background:rgba(0,0,0,0.5); display: block;display: none;">
    <div class="modal-dialog modal-dialog-centered" role="document" style="top:-25%">
        <div class="modal-content">
            <div class="modal-header">
                @*<h5 class="modal-title" id="myheader">Add Time Tags</h5>*@
                <button type="button" class="close" onclick="$('#ReasonDiv').hide()" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>

            <div class="modal-body">
                <div class="col-md-12">
                    <div class="row" id="panel" style="margin-top:2%;">

                        <label class="col-md-5" style="text-align:left" id="reason"></label>
                        <div class="col-md-7">
                            <input type="text" id="Remarks" class="form-control disa" autocomplete="off">
                        </div>
                    </div>
                </div>

            </div>
            <div class="modal-footer">
                <button type="button" style="width:100px;" id="btndivdelete" onclick="$('#ReasonDiv').hide()" class="btn btn-outline-secondary">Close</button>
                <button type="button" style="width:100px" id="btncnclsave" onclick="CancelWork()" class="btn btn-outline-danger">Cancel</button>
            </div>


        </div>
    </div>
</div>

<div id="TransferDiv" class="modal fade text-left show" tabindex="-1" role="dialog" aria-labelledby="myheader" style="background:rgba(0,0,0,0.5); display: block;display: none;">
    <div class="modal-dialog modal-dialog-centered" role="document" style="top:-25%">
        <div class="modal-content">
            <div class="modal-header">
                @*<h5 class="modal-title" id="myheader">Add Time Tags</h5>*@
                <button type="button" class="close" onclick="$('#TransferDiv').hide()" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>

            <div class="modal-body">
                <div class="col-md-12">
                    <div class="row" id="panel" style="margin-top:2%;">

                        <label class="col-md-5" style="text-align:left">Reason For Transfer:</label>
                        <div class="col-md-7">
                            <input type="text" id="rsntransfer" class="form-control disa" autocomplete="off">
                        </div>
                    </div>
                    <div class="row" id="panel" style="margin-top:2%;">

                        <label class="col-md-5" style="text-align:left">Transfer To User:</label>
                        <div class="col-md-7">
                            <input type="text" id="transuser" class="form-control disa" autocomplete="off" onkeyup="checktransuser()">
                            <input type="hidden" id="transuserId" value="0" class="form-control disa" autocomplete="off">
                            <input type="hidden" id="transuserLength" class="form-control disa" autocomplete="off">
                        </div>
                    </div>
                </div>

            </div>
            <div class="modal-footer">
                <button type="button" style="width:100px;" id="btncncl" onclick="$('#TransferDiv').hide()" class="btn btn-outline-secondary">Close</button>
                <button type="button" style="width:100px" id="btntras" onclick="Reassign()" class="btn btn-outline-warning">Transfer</button>
            </div>


        </div>
    </div>
</div>

<div style="display:none;">
    <input id="Type" type="text" />
    <input id="BillSerId" type="text" value="0" />
    <input id="BillNo" type="text" value="0" />
    <input id="ReferenceNo" type="text" value="0" />
</div>

<script>

     $(document).ready(function () {
        GetDepartment();
        GetDivision();
        GetLists();

        $("#btnassign").click(function (e) {
            SaveAndUpdate()
        });
        $("#btncancel").click(function (e) {
            $('#TransferDiv').hide();
            $('#Remarks').prop("disabled", false)
            $('#ReasonDiv').show();
            $('#reason').text('Reason For Cancel:')
            $('#Remarks').focus();
        });
        $("#btntransfer").click(function (e) {
            $('#ReasonDiv').hide();
            $('#rsntransfer').prop("disabled", false);
            $('#transuser').prop("disabled", false);
            $('#TransferDiv').show();
            $('#rsntransfer').focus();

        });
        Defaultfocus();
        $("#User").autocomplete({
            delay: 0,
            minLength: 0,
            source: function (request, response) {

                $('#UserId').val(0);

                var data1 = {};
                data1.UserName = $("#User").val();
                data1.DepartmentId = $("#Department").val();
                data1.DivisionId = $("#Division").val();

                $.ajax({
                    url: '../WorkItemUser/DeptUserGetandGets',
                    type: "POST",
                    data: data1,
                    dataType: "json",
                    success: function (data) {

                        response($.map(data, function (item) {
                            return ({
                                ColCount: 'ONE',
                                label: item.UserName,
                                UserId: item.UserId,
                                UserName: item.UserName,
                                headers: ["User"]
                            })
                        }));
                    }

                })

            },
            autoFocus: true,
            select: function (event, ui) {
                $('#UserId').val(ui.item.UserId);
                $('#UserLength').val((ui.item.UserName).length);
            },
        });

        $("#transuser").autocomplete({
            delay: 0,
            minLength: 0,
            source: function (request, response) {

                $('#transuserId').val(0);

                var data1 = {};
                data1.UserName = $("#transuser").val();
                data1.DepartmentId = $("#Department").val();
                data1.DivisionId = $("#Division").val();

                $.ajax({
                    url: '../WorkItemUser/DeptUserGetandGets',
                    type: "POST",
                    data: data1,
                    dataType: "json",
                    success: function (data) {

                        response($.map(data, function (item) {
                            return ({
                                ColCount: 'ONE',
                                label: item.UserName,
                                UserId: item.UserId,
                                UserName: item.UserName,
                                headers: ["User"]
                            })
                        }));
                    }

                })

            },
            autoFocus: true,
            select: function (event, ui) {
                $('#transuserId').val(ui.item.UserId);
                $('#transuserLength').val((ui.item.UserName).length);
            },
        });

        $("#Driver").autocomplete({
            delay: 0,
            minLength: 0,
            source: function (request, response) {

                $('#DriverId').val(0);

                var data1 = {};
                data1.DriverName = $("#Driver").val();
                data1.DepartmentId = $("#Department").val();

                $.ajax({
                    url: '../WorkItemUser/DriverAutoComplete',
                    type: "POST",
                    data: data1,
                    dataType: "json",
                    success: function (data) {

                        response($.map(data, function (item) {
                            return ({
                                ColCount: 'ONE',
                                label: item.DriverName,
                                DriverId: item.Driver,
                                Driver: item.DriverName,
                                headers: ["Driver"]
                            })
                        }));
                    }

                })

            },
            autoFocus: true,
            select: function (event, ui) {
                $('#DriverId').val(ui.item.DriverId);
            },
        });

        $("#IPUser").autocomplete({
            delay: 0,
            minLength: 0,
            source: function (request, response) {

                $('#IPUserId').val(0);

                var data = {};
                data.UserName = $("#IPUser").val();
                $.ajax({
                    url: '../Master/UserSearch',
                    type: "POST",
                    data: data,
                    dataType: "json",
                    success: function (data) {

                        response($.map(data, function (item) {
                            console.log(data)
                            return ({
                                ColCount: 'ONE',
                                label: item.UserName,
                                UserId: item.UserId,
                                UserName: item.UserName,
                                headers: ["User"]
                            })
                        }));
                    }

                })

            },
            autoFocus: true,
            select: function (event, ui) {
                $('#IPUserId').val(ui.item.UserId);
            },
        });

        $("#StoreKeeper").autocomplete({
            delay: 0,
            minLength: 0,
            source: function (request, response) {

                $('#StoreKeeperId').val(0);

                var data = {};
                data.UserName = $("#StoreKeeper").val();
                $.ajax({
                    url: '../Master/UserSearch',
                    type: "POST",
                    data: data,
                    dataType: "json",
                    success: function (data) {

                        response($.map(data, function (item) {
                            console.log(data)
                            return ({
                                ColCount: 'ONE',
                                label: item.UserName,
                                UserId: item.UserId,
                                UserName: item.UserName,
                                headers: ["User"]
                            })
                        }));
                    }

                })

            },
            autoFocus: true,
            select: function (event, ui) {
                $('#StoreKeeperId').val(ui.item.UserId);
            },
        });
        $("#Customer").autocomplete({
            delay: 0,
            minLength: 0,
            source: function (request, response) {

                $('#CustId').val(0);

                var data = {};
                data.CustName = $("#Customer").val();
                data.CustType = 'C';
                $.ajax({
                    url: '../Master/CustomerOrSupplierSearch',
                    type: "POST",
                    data: data,
                    dataType: "json",
                    success: function (data) {
                        //console.log(data);
                        response($.map(data, function (item) {
                            return ({
                                ColCount: '1',
                                label: item.CustName,
                                label1: item.CustAccount,
                                label2: item.PhoneNumber,
                                CustName: item.CustName,
                                Address: item.CustStreet1 + ',' + item.CustCity1 + ',' + item.CustState1,
                                Street: item.CustStreet1,
                                City: item.CustCity1,
                                State: item.CustState1,
                                TRNNumber: item.TRNNumber,
                                CustId: item.CustId,
                                SalesmanId: item.SalesmanId,
                                CurncyId: item.CurrencyId,
                                CustTermsId: item.CustTermsId,
                                AreaId: item.AreaId,
                                PriceGroupId: item.PriceGroupId,
                                PhoneNumber: item.PhoneNumber,
                                CreditLimit: item.CreditLimit,
                                CustAccount: item.CustAccount,
                                headers: ["Customer Name", "Account Code", "Phone No"]
                            })
                        }));
                    }
                })

            },
            autoFocus: true,
            select: function (event, ui) {
                $('#CustId').val(ui.item.CustId);

            },

        });
    });



     function GetLists() {


         if (usermenu1.indexOf("M225") != -1) {
             var Flag = 0;               //ALL WORK ITEM VIEW RIGHT
         }
         else {
             var Flag = 4;               //NOT ALL WORK ITEM VIEW RIGHT
         }



         var data = {};
         data.Type = Flag;
         data.UserId = ERPUserId;
         data.DepartmentId = ERPDeptId;
         data.FromDate = CurDate;
         data.ToDate = CurDate;
         data.Variable1 = 0;
         data.Variable2 = '';

         $.ajax({
             type: "POST",
             url: "../WorkItemUser/WorkItemGetList",
             data: data,
             success: function (result) {

                 ListWorkItemsD(result);
             }
         });

     }

     function ListWorkItemsD(result) {

         disable_datatable('listitems', 'buttonPlace');
         var responseText = "<thead><tr>" +
             "<th>Edit</th>" +
             "<th>Sl#</th>" +
             "<th>Category</th>" +
             "<th>Description</th>" +
             "<th>Date/Time</th>" +
             "<th>Assigned By</th>" +
             "<th>Assigned To</th>" +
             "<th>Driver</th>" +
             "<th>Status</th>" +
             "<th>StoreKeeper</th>" +
             "<th>Location</th>" +
             "<th>Division</th>" +
             "<th>Reason</th>" +
             "<th>Remarks</th>" +
             "<th>UpdatedOn</th>" +
             "</tr></thead><tbody>";

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


             if (result[i].Status == 'Completed') var rowclass = 'badge-success';
             else if (result[i].Status == 'In Progress') var rowclass = 'badge-info';
             else if (result[i].Status == 'Canceled') var rowclass = 'badge-dark';
             else if (result[i].Status == 'Created') var rowclass = 'badge-light';
             else if (result[i].Status == 'Started') var rowclass = 'badge-secondary';
             else if (result[i].Status == 'On Hold') var rowclass = 'badge-danger';
             else if (result[i].Status == 'Reassign') var rowclass = 'badge-warning';
             else if (result[i].Status == 'Ready To Deliver') var rowclass = 'badge-pink white';
             else if (result[i].Status == 'On The Way') var rowclass = 'badge-primary';
             else if (result[i].Status == 'Delivered With Pending') var rowclass = 'badge-light-blue white';

             if (result[i].ExceededTime <= 0 && result[i].Status != 'Completed' && result[i].Status != 'Canceled' && result[i].Status != 'Reassign') {

                 responseText += '<tr ondblclick=GetSalesCopy(' + "'" + result[i].BillSlNo + "'" + ',' + "'" + result[i].BillNo + "'" + ',' + "'" + result[i].BillDeptId + "'" + ')  class="white" style="background-color:' + WorkItemColour + '">' +
                     '<td><a  onclick="GetItem(' + result[i].WorkItemId + ');">' + Editbutton + '</a></td>' +
                     '<td>' + slno + '</td>' +
                     '<td>' + result[i].Title + '</td>' +
                     '<td>' + result[i].Description + '</td>' +
                     '<td>' + result[i].AssignedOnDate + '</td>' +
                     '<td>' + result[i].AssignedByUser + '</td>' +
                     '<td>' + result[i].AssignedToUser + '</td>' +
                     '<td>' + result[i].DriverName + '</td>' +
                     '<td><div class="text-center" style="width:100%"><span style="width:100%" class="badge ' + rowclass + '">' + result[i].Status + '</span></div></td>' +
                     '<td>' + result[i].StoreKeeper + '</td>' +
                     '<td>' + result[i].DepartmentName + '</td>' +
                     '<td>' + result[i].DivisionName + '</td>' +
                     '<td>' + result[i].Remarks + '</td>' +
                     '<td>' + result[i].NewWorkRemarks + '</td>' +
                     '<td>' + result[i].UpdatedOn + '</td>' +
                     '</tr>';

             }
             else {
                 responseText += '<tr ondblclick=GetSalesCopy(' + "'" + result[i].BillSlNo + "'" + ',' + "'" + result[i].BillNo + "'" + ',' + "'" + result[i].BillDeptId + "'" + ')>' +
                     '<td><a  onclick="GetItem(' + result[i].WorkItemId + ');">' + Editbutton + '</a></td>' +
                     '<td>' + slno + '</td>' +
                     '<td>' + result[i].Title + '</td>' +
                     '<td>' + result[i].Description + '</td>' +
                     '<td>' + result[i].AssignedOnDate + '</td>' +
                     '<td>' + result[i].AssignedByUser + '</td>' +
                     '<td>' + result[i].AssignedToUser + '</td>' +
                     '<td>' + result[i].DriverName + '</td>' +
                     '<td><div class="text-center" style="width:100%"><span style="width:100%" class="badge ' + rowclass + '">' + result[i].Status + '</span></div></td>' +
                     '<td>' + result[i].StoreKeeper + '</td>' +
                     '<td>' + result[i].DepartmentName + '</td>' +
                     '<td>' + result[i].DivisionName + '</td>' +
                     '<td>' + result[i].Remarks + '</td>' +
                     '<td>' + result[i].NewWorkRemarks + '</td>' +
                     '<td>' + result[i].UpdatedOn + '</td>' +
                     '</tr>';
             }
         }
         $('#listitems').html(responseText + '</tbody><tfoot><tr>' +
             '<th> </th>' +
             '<th> </th>' +
             '<th>Category</th>' +
             '<th>Description</th>' +
             '<th>Date/Time</th>' +
             '<th>Assigned By</th>' +
             '<th>Assigned To</th>' +
             "<th>Driver</th>" +
             '<th>Status</th>' +
              '<th>StoreKeeper</th>' +
             '<th>Location</th>' +
             '<th>Division</th>' +
             '<th>Reason</th>' +
             '<th>Remarks</th>' +
             '<th>UpdatedOn</th>' +
             '</tr></tfoot>');


         datatableWithsearchWIINDEX('listitems', true, '', 'buttonPlace');
         $('#Loading').hide();
         WorkItemNotifyVar = 0;
     }


     function datatableWithsearchWIINDEX(tablename, download, title, tableButtonContainerId) {

         var a = '#' + tablename + ' tfoot th'
         $(a).each(function () {
             var title = $(this).text();
             if (title != ' ')
                 $(this).html('<input type="text" placeholder="Search ' + title + '" style="width:100%" />');

         });
         var table = null;
         if (download) {
             if (!title || !tableButtonContainerId) { console.log("download table need title and button container"); }

             // AddColumnSelectionButton(tableButtonContainerId, tablename)

             table = $('#' + tablename).DataTable({
                 // dom: 'Bfrtip',
                 dom: "<'row'<'col-sm-1'l><'col-sm-11'f>>" +
                         "<'row'<'col-sm-12'tr>>" +
                         "<'row'<'col-sm-1'i><'col-sm-11'p>>",
                 "pageLength": 25,
                 "columnDefs": [
                     { "width": "2%", "targets": 0 },
                    { "width": "2%", "targets": 1 },
                    { "width": "9%", "targets": 2 },
                    { "width": "14%", "targets": 3 },
                    { "width": "8%", "targets": 4 },
                    { "width": "6%", "targets": 5 },
                    { "width": "6%", "targets": 6 },
                    { "width": "6%", "targets": 7 },
                    { "width": "6%", "targets": 8 },
                    { "width": "6%", "targets": 9 },
                    { "width": "6%", "targets": 10 },
                    { "width": "4%", "targets": 11 },
                    { "width": "8%", "targets": 12 },
                    { "width": "9%", "targets": 13 },
                    { "width": "8%", "targets": 14 },

                 ],
                 buttons: []

             });
             new $.fn.dataTable.Buttons(table, {
                 buttons: [
                 {
                     extend: 'collection',
                     text: 'Export',
                     className: 'excelexport',
                     buttons: [
                         {
                             extend: 'excelHtml5',
                             title: title,
                             messageTop: 'EUMI ERP',
                             exportOptions: { columns: ":visible" }
                         },
                         {
                             extend: 'pdfHtml5',
                             title: title,
                             messageTop: 'EUMI ERP',
                             exportOptions: { columns: ":visible" }
                         },
                         {
                             extend: 'print',
                             title: title,
                             messageTop: 'EUMI ERP',
                             exportOptions: { columns: ":visible" }
                         }
                     ]
                 },
                 'colvis'
                 ]
             });
             table.buttons(0, null).container().appendTo($("#" + tableButtonContainerId));
             $("#" + tableButtonContainerId).find(".buttons-collection").addClass("btn-outline-primary mx-1").css("border-radius", "4px");
         } else {
             table = $('#' + tablename).DataTable();
         }
         table.columns().every(function () {
             var that = this;
             $('input', this.footer()).on('keyup change', function () {
                 if (that.search() !== this.value) {
                     that
                         .search(this.value)
                         .draw();

                 }
             });
         });
         if (ExcelExport == 0) {
             $('.excelexport').hide();
         }
     }



    
</script>
@section bottomscripts {
    <script type="text/javascript" src="~/Scripts/EumiDataTable/eumi-datatable.js"></script>
}