@{
    ViewBag.Title = "EmployeeDashboard";
}


@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}




@*1-FINISHED,0-PENDING,2.UPCOMING*@





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



<style type="text/css">
    #aspects {
        border-collapse: collapse;
        color: black;
    }

        #aspects th {
            border: 1px solid black;
        }

        #aspects td {
            border: 1px solid black;
        }





    .modal-slg {
        max-width: 700px;
    }

    .main-panel {
        height: auto;
        width: auto;
        max-height: none;
        min-height: 100%;
        margin: 0;
        padding-top: 85px;
        float: none;
    }

    .eumi-search-box {
        box-sizing: border-box;
        width: 100%;
    }

    body.eumi-loader::before {
        content: '';
        display: block;
        position: fixed;
        z-index: 31000;
        height: 4px;
        background-color: rgba(0, 157, 160, 0.2);
        top: 0;
        left: 0;
        right: 0;
    }

    body.eumi-loader::after {
        content: '';
        display: block;
        position: fixed;
        z-index: 31001;
        height: 4px;
        background-color: rgba(0, 157, 160, 1);
        top: 0;
        width: 50px;
        animation: eumiloader 4s infinite linear;
    }

    .eumi-search-table, .eumi-shadow {
        border-spacing: 0 0px;
        box-shadow: 0px 0px 0px 2px #fff, 0 0 2px 2px #999;
    }

    @@keyframes eumiloader {
        from {
            right: 100%;
        }

        to {
            right: 0;
        }
    }
</style>
@if (Model != null)
{
    <script>
        window.ListPageParams = @Html.Raw(EUMI_ERP.Common.ToJson(Model));
    </script>
}
else
{
    <script>
        window.ListPageParams = { };
    </script>
}



<div class="myData" data-x="M226" />

<div class="content-wrapper">
    <!--Statistics cards Starts-->








    <div class="row">


        <div class="col-xl-2 col-lg-6 col-md-6 col-12" style="cursor:pointer" onclick="getthisprojects(0)">
            <div class="card gradient-green-tea" style="height:70px;">
                <div class="card-body">
                    <div class="card-block pt-2 pb-0">
                        <div class="media">
                            <div class="media-body white text-left">
                                <h3 id="pending" class="font-large-1 mb-0">0</h3>
                                <span>Pending projects</span>
                            </div>
                            <div class="media-right white text-right">
                                <i class="icon-graph font-large-1"></i>
                            </div>
                        </div>
                    </div>
                    <div id="Widget-line-chart2" class="height-75 WidgetlineChart WidgetlineChartshadow mb-2">
                    </div>
                </div>
            </div>

        </div>




        <div class="col-xl-2 col-lg-6 col-md-6 col-12" style="cursor:pointer" onclick="getthisprojects(1)">
            <div class="card gradient-blue-grey-blue" style="height:70px;">
                <div class="card-body">
                    <div class="card-block pt-2 pb-0">
                        <div class="media">
                            <div class="media-body white text-left">
                                <h3 id="complete" class="font-large-1 mb-0">0</h3>
                                <span>Completed Projects</span>
                            </div>
                            <div class="media-right white text-right">
                                <i class="icon-graph font-large-1"></i>
                            </div>
                        </div>
                    </div>
                    <div id="Widget-line-chart2" class="height-75 WidgetlineChart WidgetlineChartshadow mb-2">
                    </div>
                </div>
            </div>

        </div>



        <div class="col-xl-2 col-lg-6 col-md-6 col-12" style="cursor:pointer" onclick="getthisprojects(2)">
            <div class="card gradient-pomegranate" style="height:70px;">
                <div class="card-body">
                    <div class="card-block pt-2 pb-0">
                        <div class="media">
                            <div class="media-body white text-left">
                                <h3 id="comming" class="font-large-1 mb-0">0</h3>
                                <span>Upcoming Projects</span>
                            </div>
                            <div class="media-right white text-right">
                                <i class="icon-graph font-large-1"></i>
                            </div>
                        </div>
                    </div>
                    <div id="Widget-line-chart2" class="height-75 WidgetlineChart WidgetlineChartshadow mb-2">
                    </div>
                </div>
            </div>

        </div>


        <div class="col-xl-2 col-lg-6 col-md-6 col-12" style="cursor:pointer" onclick="">
            <div class="card gradient-ibiza-sunset" style="height:70px;">
                <div class="card-body">
                    <div class="card-block pt-2 pb-0">
                        <div class="media">
                            <div class="media-body white text-left">
                                <h3 id="" class="font-large-1 mb-0">0</h3>
                                <span>Directory</span>
                            </div>
                            <div class="media-right white text-right">
                                <i class="icon-graph font-large-1"></i>
                            </div>
                        </div>
                    </div>
                    <div id="Widget-line-chart2" class="height-75 WidgetlineChart WidgetlineChartshadow mb-2">
                    </div>
                </div>
            </div>

        </div>



        <div class="col-xl-2 col-lg-6 col-md-6 col-12" style="cursor:pointer" onclick="()">
            <div class="card gradient-green-teal" style="height:70px;">
                <div class="card-body">
                    <div class="card-block pt-2 pb-0">
                        <div class="media">
                            <div class="media-body white text-left">
                                <h3 id="" class="font-large-1 mb-0">0</h3>
                                <span></span>
                            </div>
                            <div class="media-right white text-right">
                                <i class="icon-graph font-large-1"></i>
                            </div>
                        </div>
                    </div>
                    <div id="Widget-line-chart2" class="height-75 WidgetlineChart WidgetlineChartshadow mb-2">
                    </div>
                </div>
            </div>

        </div>

        <div class="col-xl-2 col-lg-6 col-md-6 col-12" style="cursor:pointer" onclick="()">
            <div class="card gradient-back-to-earth" style="height:70px;">
                <div class="card-body">
                    <div class="card-block pt-2 pb-0">
                        <div class="media">
                            <div class="media-body white text-left">
                                <h3 id="" class="font-large-1 mb-0">0</h3>
                                <span></span>
                            </div>
                            <div class="media-right white text-right">
                                <i class="icon-graph font-large-1"></i>
                            </div>
                        </div>
                    </div>
                    <div id="Widget-line-chart2" class="height-75 WidgetlineChart WidgetlineChartshadow mb-2">
                    </div>
                </div>
            </div>

        </div>





    </div>

    <!--Statistics cards Ends-->
    <!--Line with Area Chart 1 Starts-->



    <div class="row">
        <div class="col-xl-12 col-lg-12 col-12">
            <div class="card">
                <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 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>
                </div>
            </div>
        </div>
    </div>


    <div class="row">
        <div class="col-xl-12 col-lg-12 col-12">
            <div class="card">
                <div class="card-body">
                    <div class="card-header">
                        <h4 class="card-title">Employee Login Details</h4>
                    </div>
                    <div class="card-body" style="margin-top:-25px; height:350px; overflow:auto;">
                        <table class="table table-responsive-sm text-center" id="tblEmpDetails"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>






</div>


<div id="container1" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></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;height:2800px;display:none">
    <div class="modal-dialog modal-slg" role="document" style="top:200px;">
        <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 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()">
                                <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="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 disa" />
                            <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" 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 style="display:none">
    <input id="fromdate" type="text" />
    <input id="todate" type="text" />
</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:-20%">
        <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 id="LoadingSmallRound" class="overlay" style="display:none;background:none">
    <div style="position:fixed;top:10%;left:40%">
        <img src="~/app-assets/img/Loading_1.gif" />
    </div>
</div>


<div class="modal fade text-left show" id="iconForm" tabindex="-1" role="dialog" aria-labelledby="headiddetialls" style="padding-right: 17px; display: none;background:rgba(0,0,0,0.5);height:1800px;">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content" style="width:180%; margin-left:-270px;margin-top:20%">
            <div class="modal-header bg-primary white">
                <div>
                    <h4 class="modal-title" id="headiddetialls"></h4>
                </div>
                <button type="button" class="close" data-dismiss="modal" onclick="$('#iconForm').hide();" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div id="View">
                <div class="modal-body">

                    <div id="div1" style="height:500px;overflow:auto;width:100%">
                        <table id="tbl_ProjectList" class="table table-striped table-bordered zero-configuration dataTable" style="width:100%"></table>
                    </div>
                </div>
                <div class="modal-footer">
                   
                </div>
            </div>

        </div>
    </div>

</div>


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






<script type="text/javascript">

    var RemarkFlag=0;
    $('#fromdate').val(CurDate);
    $('#todate').val(CurDate);

    GetUourprojectsstatus();
    previuousaspectsgets();

    function GetUourprojectsstatus()
    {
        var data = {};
        $.ajax({
            url: "../Master/GetourprojectsGets",
            type: "POST",
            data: data,
            dataType: "json",
            success: function (result) {
                $('#pending').text( result[0].PendingQty)
                $('#complete').text( result[0].PendingName)
                $('#comming').text( result[0].DocTypeId)

            }
        });
    }

    function getthisprojects(Status)
    {
        $("#LoadingSmallRound").show();
        var data = {};
        data.status=Status
        $.ajax({
            url: "../Master/GetourprojectsList",
            type: "POST",
            data: data,
            dataType: "json",
            success: function (result) {
               
                GetProjectList(result,Status);

            }
        });

    }


    function GetProjectList(result,PStatus){

        disable_datatable('tbl_ProjectList');
        $('#tbl_ProjectList tr').remove();
        var responseText = "";
       


            var responseText = "<thead><tr><th>Sl#</th><th>Project</th><th>Start Date</th><th>End Date</th></tr>" +
                "<tr><th> </th><th>Project</th><th>Start Date</th><th>End Date</th></tr>" +
                "</thead><tbody>";

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


                var slno;
                slno = parseInt(i+1);

                responseText += '<tr>'+
                    '<td align=center>' + slno + '</td>'+
                    '<td>' + result[i].ProjectName + '</td>'+
                    '<td>' + result[i].StartDate + '</td>'+
                    '<td>' + result[i].EndDate + '</td>'+
                    '</tr>';
                


            }

                if(PStatus==0){
                    $('#headiddetialls').text('Pending Projects');
                }
                else if(PStatus==1){
                    $('#headiddetialls').text('Completed Projects');
                }
                else if(PStatus==2){
                    $('#headiddetialls').text('UpComing Projects');
                }
            
       


        $('#tbl_ProjectList').html(responseText + '</tbody>');
        datatablesearch('tbl_ProjectList', 'Multiple');
        
        $('#iconForm').show();
        $('#LoadingSmallRound').hide();
    }

    function previuousaspectsgets()
    {


        var data = {};

        data.FromDate = CurDate;
        data.Todate = CurDate;
        data.EmpID = ERPUserId;
        data.Flag = 0;

        $.ajax({
            url: "../Master/AspectsGetandGets",
            type: "POST",
            data: data,
            dataType: "json",
            success: function (result) {
                UserAspectsView(result.oList);
            }
        });
    }

    function UserAspectsView(result) {

        $("#aspects").html('')
        for (var i = 0; i < result.length; i++) {

            $("#aspects").append('<tr><td align=center colspan=2><h3>Todays Aspect</h3></td></tr><tr><td>In Time</td><td>'+result[i].Intime +'</td></tr>  <tr><td>Out Time</td><td>'+result[i].outtime +'</td></tr>  <tr><td>1 st break</td><td>'+result[i].Break1In+' - '+ result[i].Break1Out+'</td></tr> <tr><td>Lunch break</td><td>'+result[i].Lunchbreakin+' - '+ result[i].LunchbreakOut+'</td></tr>   <tr><td>2 nd break</td><td>'+result[i].Break2In+'-'+result[i].Break2out+'</td></tr>  <tr><td>Over Time</td><td>'+result[i].overtime+'</td></tr> <tr><td>Total Working Hours</td><td>9 Hrs</td></tr>   ');

        }

    }






    $("#User").autocomplete({
        delay: 0,
        minLength: 0,
        source: function (request, response) {
            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) {
            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);
        },
    });

    $(document).ready(function () {

        GetDepartment();
        GetDivision();
        GetList();



        $("#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();

        if ("@Request.QueryString["from"]" == "SalesInvoice") {
            var srlsrs = sessionStorage.getItem("sales_srs");
            var srlno = sessionStorage.getItem("sales_slno");
            var dep = sessionStorage.getItem("sales_deptid");
            sessionStorage.removeItem("sales_srs");
            sessionStorage.removeItem("sales_slno");
            sessionStorage.removeItem("sales_deptid");
            var numId = parseInt(srlsrs);
            var num = parseInt(srlno);
            var deprtid=parseInt(dep)
            if (!isNaN(numId) && !isNaN(num) && !isNaN(deprtid)) {
                GetSalesInvoceWorkItem(numId,num,deprtid);
            }
        }
        else if("@Request.QueryString["from"]" == "Layout"){
            var sorttype = sessionStorage.getItem("sort_type");
            sessionStorage.removeItem("sort_type");
            var worksorttype = parseInt(sorttype);
            if (!isNaN(worksorttype)) {
                $('#defaulttable').hide();
                GetSortedWorkitem(worksorttype);

            }
        }
        $(document).keydown(function (e) {
            if (e.keyCode == 27) { //ESC       :   Popup Close
                $('#iconForm').hide();
            }
        });
    });

    function GetDepartment(){
        var data = {};
        data.DeptId = 0;
        $.ajax({
            type: "POST",
            url: "../Master/DepartmentGetandGets",
            data: data,
            success: function (result) {
                DepartmentLoad(result.oList);


            }
        });
    }


    function GetDivision(){

        var data1 = {};
        $.ajax({
            type: "POST",
            url: "../WorkItemUser/WorkDivisionGetandGets",
            data: data1,
            success: function (result) {
                DivisionLoad(result.oList);


            }
        });
    }

    //List Work Items
    function GetList() {


        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();
        }
    }

    function Checkallusers() {
        //alert('')
    }


    const monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
    var hhh = new Date();
    var mmmonth = hhh.getMonth() + 1;
    var ddday = hhh.getDate();
    var MonthFirst = '01/' + (mmmonth < 10 ? '0' : '') + mmmonth + '/' + hhh.getFullYear();
    var monthtext = '';

    GetUsers();
    function GetUsers() {
        var data = {};
        data.UserId = 0;
        $.ajax({
            type: "POST",
            url: "../Master/UsersGetandGets",
            data: data,
            success: function (result) {
                ShowUserslist(result.oList);
            }
        });
    }





    LoginDetailsGet();





    function LoginDetailsGet()
    {

        var data = {};
        data.UserId = ERPUserId;
        data.FromDate = $('#fromdate').val();
        data.ToDate = $('#todate').val();

        $.ajax({
            type: "POST",
            url: "../Master/UserLoginDetailsGet",
            data: data,
            success: function (result) {
                ShowEmployeLogin(result.oList);
            }
        });
    }


    function datatablesearch(tablename, Type) {

        console.log(tablename)
        var a = '#' + tablename + ' tr:eq(1) th'

        $(a).each(function () {
            var title = $(this).text();
            if (title != ' ')
                if (title == 'Sl#') {
                    $(this).html('<input type="text" style="width:50px" class="form-control" placeholder="' + title + '"/>')
                }
                else if (title == 'Dept.Code')
                {
                    $(this).html('<input type="text" class="form-control" style="width:90px"   placeholder="' + title + '"/>')
                }
                else if(title=='Account#')
                {
                    $(this).html('<input type="text" class="form-control" style="width:100px"   placeholder="' + title + '"/>')
                }
                else {
                    $(this).html('<input type="text" class="form-control" style="font-weight:100;"   placeholder="' + title + '"/>')
                }
        });
        var table = null;

        if (Type == 'Single') {

            table = $('#' + tablename).DataTable({
                dom: 'tipr',
                orderCellsTop: true,
                //"order": false,
            });
        }
        else if (Type == 'Multiple') {

            table = $('#' + tablename).DataTable({
                dom: 'tir',
                orderCellsTop: true,
                //"order": false,
                "pageLength": -1
            });
        }
        table.columns().every(function (index) {
            $('#' + tablename + ' thead tr:eq(1) th:eq(' + index + ') input').on('keyup change', function () {
                table.column($(this).parent().index() + ':visible')
                    .search(this.value)
                    .draw();
            });
        });
    }


    function disable_datatable(tablename) {
        $('#Warningpopup').fadeOut();
        if ($.fn.DataTable.isDataTable('#' + tablename)) {
            var table = $('#' + tablename).DataTable();
            table.destroy();
            return;
        }
    }

    //Date Picker
    $(function () {
        $('#fromdate,#todate').daterangepicker({
            minDate: minDate,
            maxDate: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()),
            singleDatePicker: true,
            showDropdowns: true,
            locale: {
                format: 'DD/MM/YYYY'
            }
        });

    });


    function ShowUserslist(result) {
        for (var i = 0; i < result.length; i++) {
            var userid = result[i].UserId;
            var Data = '<div class="media mb-1"><a><img class="rounded-circle" height="45" width="45" src="../ProjectImages/User/Image/' + userid + '.png" alt=""  ></a><div class="media-body"><h4 class="font-medium-1 mt-1 mb-0">' + result[i].Name + '</h4><p class="text-muted font-small-3">User</p></div><div class="mt-1"><input type="checkbox" class="" checked id=""></div></div></div>'
            $('#userlist').append(Data)
        }
    }


    function ShowEmployeLogin(result) {
        var responseText = "<thead><tr><th>EmployeeName</th><th>EmployeeCode</th><th>Date</th><th>InTime</th><th>OutTime</th><th>TotalWorkingHours</th></tr></thead>  <tbody>";
        for (var i = 0; i < result.length; i++) {
            responseText += '<tr><td>' + result[i].EmpName + '</td><td>' + result[i].EmpCode + '</td><td>' + result[i].AtendanceDate + '</td><td>' + result[i].InTime + '</td><td>' + result[i].OutTime + '</td><td>' + result[i].TotalWorkHrs + '</td></tr>';
        }
        console.log(responseText)
        $('#tblEmpDetails').html(responseText + '</tbody>');
    }



</script>