@{
    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;
        }


        .slides:not(:first-child) {
        /* Hide all images except the first */
        display: none;
    }

   #DDh1 .prev, #DDh1 .next1 {
        cursor: pointer;
        position: absolute;
        top: 50%;
        width: auto;
        padding: 16px;
        margin-top: -32px;
        color: white;
        font-weight: bold;
        font-size: 18px;
        transition: 0.6s ease;
        border-radius: 0 3px 3px 0;
        user-select: none;
        background-color: #0000008c;
    }
     #DDh1 .next1 {
        right: 0;
        border-radius: 3px 0 0 3px;
    }

        /* On hover, add a black background color with a little bit see-through */
        .prev:hover, .next1:hover {
            background-color: rgba(0,0,0,0.8);
        }

       #DDh1   .imageThumb {
        max-height: 75px;
        width: 137px;
        max-height: 100px;
        border: 2px solid;
        padding: 1px;
        cursor: pointer;
    }


    .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 id="popupdiv1" class="modal fade text-left show" tabindex="-1" role="dialog" aria-labelledby="myheader" style="padding-right: 17px; background:rgba(0,0,0,0.5); display: block; display:none;">
    <div class="modal-dialog" role="document" style="top:30%">
        <div class="modal-content" style="height: auto;  width: 70rem;margin-top: -35%;margin-left: -15rem;min-height:490px;">
            <div class="modal-header p-1">
                <button type="button" class="close" onclick="formrefresh1()" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true" class="font-large-2">×</span>
                </button>
            </div>
            <div style="text-align:center; top: 0;  bottom: 0; left: 0; right: 0; margin: auto;">
                @*<div id="divmultimage1" class="modal-body" style="height:400px;overflow:auto">*@
                <div id="DDh1" style="">
                </div>
                @*</div>*@
            </div>
        </div>
    </div>
</div>

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

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








    <div class="row" style="display:none">


        <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="row" style="margin-left:170px;margin-top:40px">
                            @*<div class="col-md-2">
                <label>Search: </label>
            </div>
            <div class="col-md-4" style="margin-top:-0.5%;margin-left:-12%">
                <input type="text" class="form-control" id="Search" onkeyup="$('#btndetail').prop('btnsummary', true)" onchange="GetSalesSummary(0, 0, 0, 0, 0, $('#Location').val(), $('#Search').val(), 0)" />
            </div>*@

            <div class="col-md-1" style="margin-top:-10px;margin-left:-1%">
                <input type="text" style="width:125px;border-radius:10px" id="DateFrom"  class="form-control" />
            </div>
            <div style="margin-left:1.5%">
                -
            </div>
            <div class="col-md-3" style="margin-top:-10px;">
                <input type="text" style="width:125px;border-radius:10px" id="DateTo"  class="form-control" />
            </div>

            <div class="col-md-2" style="margin-left:-15%">
                <label>Location</label>
            </div>
            <div class="col-md-2" style="margin-top:-0.5%;margin-left:-12%">
                <select type="text" class="form-control" id="Dept" ></select>
            </div>

                            @*<div class="col-md-2" >
                                <label>Area</label>
                            </div>
                            <div class="col-md-2" style="margin-top:-0.5%;margin-left:-12%">
                                <select id="placeofsupply" name="priority" class="form-control" onchange="GetList('##');$('#btnsummary').prop('checked', true)"></select>
                            </div>*@
                            <div class="col-md-2">
                                <label>SalesMan</label>
                            </div>
                            <div class="col-md-2" style="margin-top:-0.5%;margin-left:-12%">
                                <select id="salesman" name="priority" class="form-control"></select>
                            </div>
                            <div style="margin-left:2%" id="divsummary" class="d-inline-block custom-control custom-radio mr-1">
                                <input type="radio" name="sd" class="custom-control-input" checked="" id="btnsummary" value="normal" onchange="GetList('##')">
                                <label class="custom-control-label" for="btnsummary">Summary </label>
                            </div>
                            <div style="margin-left:2%;display:none !important;" id="divdetail" class="d-inline-block custom-control custom-radio mr-1">
                                <input type="radio" name="sd" class="custom-control-input" id="btndetail" onchange="GetList('##$$')" value="normal">
                                <label class="custom-control-label" for="btndetail">Detailed </label>
                            </div>
                            <div class="col-md-2">
                                <label>Refresh Time</label>
                            </div>
                            <div class="col-md-1" style="margin-top:-0.5%;margin-left:-12%">
                                <select id="sel_timeref" name="priority" class="form-control" onchange="changetimeref()">
                                    
                                    <option value="15000">15 Sec</option>
                                     <option value="30000">30 Sec</option>
                                    <option value="60000">60 Sec</option>
                                    
                                </select>
                            </div>

                         
                        </div>
                        <div class="row" style="margin-left:170px;margin-top:40px">
                            <div class="col-md-2">
                                <label>Invoice No</label>
                            </div>
                            <div class="col-md-2" style="margin-top:-0.5%;margin-left:-12%">
                                <input type="text" style="border-radius:10px" id="Invoiceno" class="form-control" />
                            </div>
                            <div class="col-md-2">
                                <label>Delivery Type</label>
                            </div>
                            <div class="col-md-2" style="margin-top:-0.5%;margin-left:-12%">
                                
                                <select id="select_place" name="priority" class="form-control"></select>

                               
</div>
                            <div class="col-md-2">
                                <label>Delivery Area</label>
                            </div>
                            <div class="col-md-2" style="margin-top:-0.5%;margin-left:-12%">
                                
                                <select id="select_terms" name="priority" class="form-control" ></select>
                            </div>
                            <div class="col-md-2">
                                <label>Status</label>
                            </div>
                            <div class="col-md-2" style="margin-top:-0.5%;margin-left:-12%">

                                <select id="select_status" name="priority" class="form-control" >
                                    <option value="0">--Select--</option>
                                    <option>CREATED</option>
                                    <option>On the way</option>
                                    <option>Loaded</option>
                                    <option>Delivered with Pending</option>
                                    <option>Delivered</option>
                                    <option>Hold</option>
                                    <option>RTD A</option>
                                    <option>RTD B</option>
                                    <option>RTD C</option>
                                    <option>RTD D</option>
                                    <option>RTD E</option>
                                    <option>PACKING</option>
                                    <option>PICKING</option>                             
                                    
                                    
                                </select>
                            </div>
                            <div class="col-md-1" style="margin-top:-0.5%;">
                                <button type="button" id="btngosubmit" style="" class="btn btn-primary btn-min-width mr-1 mb-1" onclick="GetList('##');$('#btnsummary').prop('checked', true)" autocomplete="off">GO <i class="fa fa-check-square-o"></i></button>
                            </div>
                            </div>
                            <div class="card-header" style="display:none">
                                <center><h4 class="card-title mb-0">Worhk Items</h4></center>
                            </div>
                        <div class="btn-group" id="buttonPlace" style="margin-left:85%;margin-top:0.5%;">
                            <div align="right">
                                <div class="heading-elements">
                                    <div class="btn-group" id="buttonPlace">
                                    </div>
                                </div>
                            </div>

                        </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:100%;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" style="display:none">
        <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 formrefresh1() {
            $('#popupdiv1').hide();
            $('#DDh1').empty();
        }

        function imageslider(ItemId) {
            imagesliderload(ItemId);
            $('#popupdiv1').show();
            $('#DDh1').show()
        }

        var imgcnt = 0;


    function imagesliderload(ProdId) {
    var result1=ProdId.split(',').length
            var ItImg = '';
            $('.pip').remove();
           // $.ajax({
           //     url: "../ProjectImages/Products/" + ProdId + ".png",
           //     type: 'HEAD',
           //     error: function () {
           //         $('#myImg').attr('src', "../app-assets/img/elements/04.png");
           //     },
           //     success: function () {
           //         $('#myImg').attr('src', "../ProjectImages/Products/" + ProdId + ".png");
           //         ItImg = '<img src="../ProjectImages/Products/' + ProdId + '.png" style="height: auto; max-width:100%;text-align: left">';
           //     }
           // });
            var formData = new FormData();
            var ImageId = ProdId;
            formData.append("UniqueId", ImageId);




                    var ProdId = ImageId;
                    TotalImage = result1;

                    var SlideData = '';
                    if (TotalImage == 0) {
                        if (ItImg == '')
                        { SlideData = '<img src="../app-assets/img/NoImage.png" style="height: auto; max-width:100%;text-align: left">'; }
                        else
                        { SlideData = ItImg; }
                    }
                    else {
                        for (i = 0; i < TotalImage; i++) {

                            var nextImage = 0; var prevImame = 0;

                            if (i == (0)) {
                                SlideData += '<div class="mySlides" id=slimg-' + i + '><input type="radio"  visibility: hidden name="radio-btn" id=img-' + i + ' checked  /><li style="list-style:none;"><div  style="height: auto; max-width:100%;text-align: center" class=""> <label for="img-' + prevImame + '" class="prev" style="left: 0 !important;" id="previous' + i + '" onclick=plusDivs(\'-1\')>&#10094; </label> <img src="../../'+ProdId.split(',')[i]+'" style="height: auto; max-width:100%;align:center;" id="im' + i + '"/>  <label for="img-' + nextImage + '" class="next1" id="next"  onclick=plusDivs(\'1\')>&#10095;</label></div></li></div>';

                                imgcnt = i;
                            }
                            else
                                SlideData += '<div class="mySlides" style="display:none" id=slimg-' + i + '><input type="radio" visibility: hidden name="radio-btn" id=img-' + i + ' checked /><li style="list-style:none;"><div style="height: auto; max-width:100%;text-align: center" class=""> <label for="img-' + prevImame + '" class="prev" style="border-bottom:0;left: 0 !important;" id="previous' + i + '" onclick=plusDivs(\'-1\')>&#10094;</label> <img src="../../'+ProdId.split(',')[i]+'" style="height: auto; max-width:100%;align:center;" id="im' + i + '"/>  <label for="img-' + nextImage + '" class="next1" style="border-bottom:0" id="next' + i + '" onclick=plusDivs(\'1\')>&#10095;</label></div></li></div>';

                        }
                    }

                    $('#DDh1').append(SlideData);
                    $(".remove").click(function () {
                        $(this).parent(".pip").remove();
                    });

        }

     function previmg(i) {
            var j = i - 1;
            if ($('#slimg-' + j).length) {
                $('#slimg-' + i).hide();
                $('#slimg-' + j).show();
            }
        }

        function nextimg(i) {
            var j = i + 1;
            if ($('#slimg-' + j).length) {
                $('#slimg-' + i).hide();
                $('#slimg-' + j).show();
            }
        }
    var slideIndex = 1;

        function plusDivs(n) {
            slideIndex = Number(slideIndex) + Number(n)
            showDivs(slideIndex);
        }

        function showDivs(n) {
            var i;
            var x = document.getElementsByClassName("mySlides");
            if (n > x.length) { slideIndex = 1 }
            if (n < 1) { slideIndex = x.length }
            for (i = 0; i < x.length; i++) {
                x[i].style.display = "none";
            }
            x[slideIndex - 1].style.display = "block";
        }

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

     function GetArea(id) {
                var data = {};
                data.Id = 0;
                $.ajax({
                    type: "POST",
                    url: "../Master/AreaGetandGets",
                    data: data,
                    success: function (result) {
                        AreaLoad(result.oList, id);


                    }
                });
            }

            function AreaLoad(result, a) {
                $("#placeofsupply").empty();
                $("#placeofsupply").append("<option value='0'>-All-</option>");
                for (var i = 0; i < result.length; i++) {
                    $("#placeofsupply").append("<option value='" + result[i].AreaId + "'>" + result[i].AreaCode + "</option>");
                }
                if (a == 0) {
                    $('#placeofsupply').val(0);
                }
                else {
                    $('#placeofsupply').val(a);
                }
            }

     function GetSalesMan(id) {
                var data = {};
                data.UserId = ERPUserId;
                $.ajax({
                    type: "POST",
                    url: "../Master/UserSalesmanGetandGets",
                    data: data,
                    success: function (result) {
                        SalesManLoad(result.oList, id);
                    }
                });
            }

            function SalesManLoad(result, a) {
              console.log(result)
                $("#salesman").empty();
                //$("#salesman").append("<option value='0'>-All-</option>")
                for (var i = 0; i < result.length; i++) {
                    $("#salesman").append("<option value='" + result[i].SalesmanId + "'>" + result[i].FirstName + "</option>");
                }
            }

    function placeload(id) {
    var data = {};
    data.AreaId = 0;
    $.ajax({
        type: "POST",
        url: "../Master/AreaGetandGets",
        data: data,
        success: function (result) {
            AreaLoad(result.oList, id);
        }
    });
}
    var DefaultArea = 0;
function AreaLoad(result, a) {
    // var DefaultArea = 0;
    $("#select_place").empty();
    $("#select_place").append("<option value='0'>Place Of Supply</option>");
    for (var i = 0; i < result.length; i++) {
        if (result[i].DefaultArea != 0) {
            DefaultArea = result[i].DefaultArea
        }
        $("#select_place").append("<option value='" + result[i].AreaId + "'>" + result[i].AreaName + "</option>");
    }
    $("#select_place").append("<option value='EXPORT'>EXPORT</option>");
    if (a == 0) {
        $('#select_place').val(0);
    }
    else {
       $('#select_place').val(0);
    }
}
    function Terms(id) {
    var data = {};
    data.TermsId = -1;
    $.ajax({
        type: "POST",
        url: "../Master/TermsGetandGets",
        data: data,
        success: function (result) {
            TermsLoad(result.oList, id);
        }
    });

}
function TermsLoad(result, a) {
    $("#select_terms").empty();
    $("#select_terms").append("<option value='0'>--Select--</option>");
    for (var i = 0; i < result.length; i++) {
        $("#select_terms").append("<option value='" + result[i].TermsId + "' name='" + result[i].Terms + "'>" + result[i].TermsDescription + "</option>");
    }
    if (a == 0) {
        $('#select_terms').val(0);
    }
    else {
        $('#select_terms').val(a);

    }
}

    $(document).ready(function () {

       // GetDepartment();
        GetDivision();
        GetList('##');
   // GetDepartment(0);
    GetArea(0);
     GetSalesMan(0);
     placeload(0);
    GetLocation(0);
    Terms(0);
        $('#DateTo').daterangepicker({
            minDate: minDate,
            maxDate: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()),
            singleDatePicker: true,
            showDropdowns: true,
            locale: {
                format: 'DD/MM/YYYY'
            }
        });

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


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


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


    var var1='1=1 ';
    if(var2=='##')
    {
    if($('#Dept').val()!='0'&& $('#Dept').val()!=null)
    {
     var1+="and Locationcode='"+$('#Dept option:selected').text()+"' ";
    }
    if($('#select_place').val()!='0'  &&  $('#select_place').val()!='EXPORT' &&  $('#select_place').val()!=null)
    {
     var1+="and deliverytype='"+$('#select_place option:selected').text()+"' ";
    }
    if($('#select_place').val()=='EXPORT'  && $('#select_place').val()!=null)
    {
     var1+="and Exporttype='"+$('#select_place option:selected').text()+"' ";
    }
    if($('#Invoiceno').val()!='' )
    {
    var1+="and billno like '"+$('#Invoiceno').val()+"%' ";
    }
    if($('#salesman').val()!='0'  && $('#salesman').val()!=null)
    {
     var1+="and SALESMAN='"+$('#salesman option:selected').text()+"' ";
    }
     if($('#select_terms').val()!='0' && $('#select_terms').val()!=null)
    {
     var1+="and area='"+$('#select_terms option:selected').text()+"' ";
    }
     if($('#select_status').val()!='0' && $('#select_status').val()!=null)
    {
     var1+="and status='"+$('#select_status option:selected').text()+"' ";
    }
	else{
		 var1+="and status!='DELIVERED' ";
	}

    }else
    {
     if($('#Dept').val()!='0' && $('#Dept').val()!=null)
    {
     var1+="and Dept='"+$('#Dept option:selected').text()+"' ";
    }

    if($('#salesman').val()!='0' && $('#salesman').val()!=null)
    {
     var1+="and ASSignedTOUser='"+$('#salesman option:selected').text()+"' ";
    }
     if($('#Invoiceno').val()!='')
    {
    var1+="and WorkItemId = convert(varchar, '"+$('#Invoiceno').val()+"' ) ";
    }


      if($('#select_place').val()!='0' && $('#select_place').val()!='EXPORT' && $('#select_place').val()!=null)
    {
     var1+="and slno='"+$('#select_place option:selected').val()+"' ";
    }
    if($('#select_place').val()=='EXPORT' && $('#select_place').val()!=null)
    {
     var1+="and ORDERNO='"+$('#select_place option:selected').text()+"' ";
    }
       if($('#select_terms').val()!='0' && $('#select_terms').val()!=null)
    {
     var1+="and AssignedOn='"+$('#select_terms option:selected').val()+"' ";
    }

         if($('#select_status').val()!='0' && $('#select_status').val()!=null)
    {
     var1+="and Status='"+$('#select_status option:selected').text()+"' ";
    }
	else{
		 var1+="and status!='DELIVERED' ";
	}
    }


        var data = {};
        data.Type = Flag;
        data.UserId = ERPUserId;
        data.DepartmentId = ERPDeptId;
        data.FromDate = $('#DateFrom').val();
        data.ToDate = $('#DateTo').val();
        data.Variable1 = var1;
        data.Variable2 = var2;

        $.ajax({
            type: "POST",
            url: "../WorkItemUser/WorkItemGetList",
            data: data,
            success: function (result) {
    if(var2=='##')
                ListWorkItemsD(result);
    else
    ListWorkItemsDetails(result);
            }
        });

    }
  // var timeinter=$('#sel_timeref').val()
  // function changetimeref()
  // {
  //  timeinter=$('#sel_timeref').val()
  // }
  //  setInterval(function () {
  // var var2=""
  //         if ($('#btnsummary').prop('checked')==true) {
  //             var2='##'
  //         }
  // else
  // {
  //  var2='##$$'
  // }
  // GetList(var2);
  //
  // }, timeinter);


    var interval = 15000;
var intervalId;
//startInterval(interval);
// store in a function so we can call it again
function startInterval(_interval) {
  // Store the id of the interval so we can clear it later
  intervalId = setInterval(function() {
   var var2=""
            if ($('#btnsummary').prop('checked')==true) {
                var2='##'
            }
    else
    {
     var2='##$$'
}
    GetList(var2);
  }, _interval);
}


function getInterval() {
  return interval;
}


$('#sel_timeref').on('change', function() {
  interval =$('#sel_timeref').val();
  // clear the existing interval
  clearInterval(intervalId);
  // just start a new one
  startInterval(interval);
  console.log(interval)
})









    function ListWorkItemsDetails(result) {

        disable_datatable('listitems', 'buttonPlace');
    $('#listitems').empty()

        var responseText = "<thead><tr>" + 	//billno	DATE	CUSTOMER	SALESMAN	STATUS
           // "<th>Edit</th>" + 				INV_LOCATION								PACKED_LOCATION

            "<th>Sl#</th>" +
            "<th>BRANCH</th>" +
      "<th>SALESMAN</th>"+
     "<th>Order Type</th>"+

            "<th>Bill No</th>" +
            "<th>Date/Time</th>" +
             "<th>Location</th>" +

            "<th>ItemCode</th>" +
            "<th style='width:200px'>Item Description&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</</th>" +
            "<th>Inv Qty</th>" +

            "<th>PICKED QTY</th>"+
      "<th>PACKED QTY</th>"+

 "<th>RETURNED QTY</th>"+
     "<th>PICK BALANCE</th>"+

      "<th>PACK BALANCE</th>"+

      "<th>PACKAGE NO</th>"+
     "<th>Delivery Area</th>"+
     "<th>STATUS</th>"+
      "<th>STATUS DATETIME</th>"+

      "<th>TRIP NO</th>"+
     "<th>TRUCK NO</th>"+
      "<th>DRIVER</th>"+
     "<th>PICKED BY</th>"+
       "<th>PACKED BY</th>"+
      "<th> LOADED BY</th>"+

      "<th>PICKED DATE</th>"+
       "<th>PACKED DATE</th>"+
      "<th>LOADED DATE</th>"+



      "<th>INV PHOTO</th>"+
       "<th>Remarks Sales</th>"+
      "<th>Remarks Driver</th>"+
	   "<th>Assigned (L)</th>"+
            "</tr></thead><tbody>";

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

    var pathnew=result[i].NewWorkRemarks.split('##')[2]==''?'../app-assets/img/NoImage.png':result[i].NewWorkRemarks.split('##')[2]
     var pathnew1=result[i].NewWorkRemarks.split('##')[2]==''?'../app-assets/img/NoImage.png':result[i].NewWorkRemarks.split('##')[2].split(',')[0]
            if (result[i].Status == 'Completed') var rowclass = 'badge-success';
            else if (result[i].Status == 'PICKING') 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 == 'PACKING') 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].Status != 'Completed' && result[i].Status != 'Canceled' && result[i].Status != 'Reassign') {

                responseText += '<tr>' +
                   // '<td><a  onclick="GetItem(' + result[i].WorkItemId + ');">' + Editbutton + '</a></td>' +
                    '<td>' + slno + '</td>' +
                    '<td>' + result[i].Title.split('##')[0] + '</td>' +
                    "<td>"+result[i].ExceededTime+"</td>"+
     "<td>" + result[i].Title.split('##')[1] +"</td>"+

                    '<td>' + result[i].WorkItemId + '</td>' +
                    '<td>' + result[i].AssignedOnDate + '</td>' +
                    "<td style='text-align:center'>"+result[i].DepartmentName+"</td>" +

                    '<td>' + result[i].Description + '</td>' +
                    '<td>' + result[i].DriverName + '</td>' +
                    '<td  style="text-align:center">' + parseInt(result[i].StoreKeeper||0) + '</td>' +



            "<td  style='text-align:center'>"+result[i].DivisionName+"</td>"+

 "<td  style='text-align:center'>"+result[i].TurnAroundTimes+"</td>"+
"<td  style='text-align:center'>"+result[i].NewWorkRemarks.split('##')[4]+"</td>"+
     "<td  style='text-align:center'>"+result[i].BillNo+"</td>"+

      "<td  style='text-align:center'>"+result[i].AssignedByUser+"</td>"+

      "<td  style='text-align:center'>"+result[i].BillDeptId+"</td>"+
      "<td>" + result[i].Title.split('##')[2] +"</td>"+
      "<td  style='text-align:center'>"+result[i].Status+"</td>"+
      "<td>"+result[i].NewWorkRemarks.split('##')[3]+"</td>"+

     "<td>"+result[i].NewWorkRemarks.split('##')[0]+"</td>"+
     "<td>"+result[i].NewWorkRemarks.split('##')[1]+"</td>"+
      "<td>"+result[i].Driver+"</td>"+
      "<td>"+result[i].StoreKeeperId+"</td>"+
       "<td>"+result[i].UpdatedOn+"</td>"+
     "<td> "+result[i].Reference+"</td>"+

      "<td>"+result[i].BillSlNo+"</td>"+
       "<td>"+result[i].Remarks+"</td>"+
      "<td>"+result[i].MinuteDiff+"</td>"+



     "<td><a onclick='"+'imageslider('+'"'+pathnew+'"'+')'+"'><img src='../../"+pathnew1+"'  height='50px' width='80px'/></a></td>"+
      '<td>' + result[i].Title.split('##')[3] + '</td>' +
     '<td>' + result[i].Title.split('##')[4] + '</td>' +
	  "<td>"+result[i].NewWorkRemarks.split('##')[5]+"</td>"+
                    '</tr>';

            }
            else {

                responseText += '<tr>' +
                   // '<td><a  onclick="GetItem(' + result[i].WorkItemId + ');">' + Editbutton + '</a></td>' +
                    '<td>' + slno + '</td>' +
                   '<td>' + result[i].Title.split('##')[0] + '</td>' +
                    "<td>"+result[i].ExceededTime+"</td>"+
     "<td>" + result[i].Title.split('##')[0] +"</td>"+

                    '<td>' + result[i].WorkItemId + '</td>' +
                    '<td>' + result[i].AssignedOnDate + '</td>' +
      "<td style='text-align:center'>"+result[i].DepartmentName+"</td>" +

                    '<td>' + result[i].Description + '</td>' +
                    '<td>' + result[i].DriverName + '</td>' +
                    '<td  style="text-align:center">' +  parseInt(result[i].StoreKeeper||0)  + '</td>' +



            "<td  style='text-align:center'>"+result[i].DivisionName+"</td>"+

  "<td  style='text-align:center'>"+result[i].TurnAroundTimes+"</td>"+
"<td  style='text-align:center'>"+result[i].NewWorkRemarks.split('##')[4]+"</td>"+
     "<td  style='text-align:center'>"+result[i].BillNo+"</td>"+

      "<td  style='text-align:center'>"+result[i].AssignedByUser+"</td>"+

      "<td  style='text-align:center'>"+result[i].BillDeptId+"</td>"+
      "<td>" + result[i].Title.split('##')[2] +"</td>"+
      "<td  style='text-align:center'>"+result[i].Status+"</td>"+
      "<td>"+result[i].NewWorkRemarks.split('##')[3]+"</td>"+

     "<td>"+result[i].NewWorkRemarks.split('##')[0]+"</td>"+
      "<td>"+result[i].NewWorkRemarks.split('##')[1]+"</td>"+
       "<td>"+result[i].Driver+"</td>"+
       "<td>"+result[i].StoreKeeperId+"</td>"+
    "<td>"+result[i].UpdatedOn+"</td>"+
       "<td> "+result[i].Reference+"</td>"+

      "<td>"+result[i].BillSlNo+"</td>"+
      "<td>"+result[i].Remarks+"</td>"+
      "<td>"+result[i].MinuteDiff+"</td>"+



     "<td><a onclick='"+'imageslider('+'"'+pathnew+'"'+')'+"'><img src='../../"+pathnew1+"' height='50px' width='80px'/></a></td>"+
       '<td>' + result[i].Title.split('##')[3] + '</td>' +
     '<td>' + result[i].Title.split('##')[4] + '</td>' +
	   "<td>"+result[i].NewWorkRemarks.split('##')[5]+"</td>"+
                    '</tr>';
            }
        }
        $('#listitems').html(responseText + '</tbody><tfoot><tr>' +
            '<th> </th>' +
           // '<th> </th>' +
        "<th>BRANCH</th>" +
      "<th>SALESMAN</th>"+
     "<th>Order Type</th>"+

            "<th>Bill No</th>" +
            "<th>Date/Time</th>" +
             "<th>Location</th>" +

            "<th>Item Code</th>" +
            "<th>Item Description</th>" +
            "<th>Inv Qty</th>" +

            "<th>PICKED QTY</th>"+
      "<th>PACKED QTY</th>"+
"<th>RETURNED QTY</th>"+

     "<th>PICK BALANCE</th>"+

      "<th>PACK BALANCE</th>"+

      "<th>PACKAGE NO</th>"+
      "<th>Delivery Area</th>"+
     "<th>STATUS</th>"+
      "<th>STATUS DATETIME</th>"+

     "<th>TRIP NO</th>"+
      "<th>TRUCK NO</th>"+
     "<th>DRIVER</th>"+
     "<th>PICKED BY</th>"+
       "<th>PACKED BY</th>"+
     "<th> LOADED BY</th>"+

      "<th>PICKED DATE</th>"+
       "<th>PACKED DATE</th>"+
      "<th>LOADED DATE</th>"+



      "<th>INV PHOTO</th>"+
     "<th>Remarks Sales</th>"+
       "<th>Remarks Driver</th>"+
	     "<th>Assigned (L)</th>"+
            '</tr></tfoot>');


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

     function ListWorkItemsDetailsbackup(result) {

        disable_datatable('listitems', 'buttonPlace');
    $('#listitems').empty()

        var responseText = "<thead><tr>" + 	//billno	DATE	CUSTOMER	SALESMAN	STATUS
           // "<th>Edit</th>" +//BRANCH	SALESMAN	BILLNO	DATE :TIME	PRODUCTCODE	PRODUCTDESCR	INV_LOCATION	INV_QTY	PICKED_QTY	PACKED_DATE TIME	PICK_BALANCE	PICKED_BY	PACKED_QTY	PACK_BALANCE	PACKAGE_NO	PICKED_DATE TIME	PACKED_BY	TRIPNO	LOADED_BY	LOADED_DATE TIME	TRUCK NO	DRIVER	STATUS	SATUS DATE_TIME	INV PHOTO	PACKED_LOCATION

            "<th>Sl#</th>" +
            "<th>Date : Time</th>" +
            "<th>Location</th>" +
            "<th>Packed Date Time</th>" +
            "<th>Picked Date Time</th>" +
            "<th>Packed Location</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 == 'PICKING') 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 == 'PACKING') 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].Status != 'Completed' && result[i].Status != 'Canceled' && result[i].Status != 'Reassign') {

                responseText += '<tr>' +
                   // '<td><a  onclick="GetItem(' + result[i].WorkItemId + ');">' + Editbutton + '</a></td>' +
                    '<td>' + slno + '</td>' +
                    '<td>' + result[i].Title + '</td>' +
                    '<td>' + result[i].AssignedOnDate + '</td>' +
                    '<td>' + result[i].WorkItemId + '</td>' +
                    '<td>' + result[i].Description + '</td>' +
                    '<td>' + result[i].DriverName + '</td>' +

                    '</tr>';

            }
            else {
                responseText += '<tr>' +
                   // '<td><a  onclick="GetItem(' + result[i].WorkItemId + ');">' + Editbutton + '</a></td>' +
                    '<td>' + slno + '</td>' +
                     '<td>' + result[i].Title + '</td>' +
                    '<td>' + result[i].AssignedOnDate + '</td>' +
                    '<td>' + result[i].WorkItemId + '</td>' +
                    '<td>' + result[i].Description + '</td>' +
                    '<td>' + result[i].DriverName + '</td>' +

                    '</tr>';
            }
        }
        $('#listitems').html(responseText + '</tbody><tfoot><tr>' +
            '<th> </th>' +
         "<th>Date : Time</th>" +
            "<th>Location</th>" +
            "<th>Packed Date Time</th>" +
            "<th>Picked Date Time</th>" +
            "<th>Packed Location</th>" +

            '</tr></tfoot>');


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

    function ListWorkItemsD(result) {

        disable_datatable('listitems', 'buttonPlace');
        var responseText = "<thead><tr>" + 	//billno	DATE	CUSTOMER	SALESMAN	STATUS
           // "<th>Edit</th>" +
            "<th>Sl#</th>" +
            "<th>Dept</th>" +
     "<th>Salesman</th>" +
     "<th>Order Type</th>" +
     "<th>Locn</th>" +
            "<th>Bill No</th>" +
            "<th>Date/Time</th>" +
            "<th>Customer</th>" +


      "<th>Delivery Area</th>" +
    //"<th>Pending Qty</th>" +
            "<th>Status</th>" +
			 "<th>Pending Status</th>" +
     "<th>Remarks</th>" +
	  "<th>LPO#</th>" +
	   "<th>Time</th>" +
            "</tr></thead><tbody>";

        for (var i = 0; i < result.length; i++) {
            var slno = parseInt(i + 1);
    var deliverytype='';
    if(result[i].DivisionName=='')
    {
    deliverytype =result[i].NewWorkRemarks
}else
    {
     deliverytype =result[i].DivisionName
}
var pendingstatus=result[i].Status.split('##')[1];
// if((result[i].Status.split('##')[1]==0 && result[i].Status.split('##')[2]==0 && result[i].Status.split('##')[3]==0 ) && (result[i].Status.split('##')[1]!='' && result[i].Status.split('##')[2]!='' && result[i].Status.split('##')[3]!='' ))
// {
	// pendingstatus='COMPLETED';
// }
// else if ((result[i].Status.split('##')[1]==0 && result[i].Status.split('##')[2]==0) &&  (result[i].Status.split('##')[1]!='' && result[i].Status.split('##')[2]!='') && result[i].Status.split('##')[3]>0)
// {
	// pendingstatus='STARTED';
// }
// else if((result[i].Status.split('##')[1]==0 && result[i].Status.split('##')[2]==0) &&  (result[i].Status.split('##')[1]!='' && result[i].Status.split('##')[2]!=''))
// {
	// pendingstatus='COMPLETED';
// }
// else if((result[i].Status.split('##')[1]==0)&&  (result[i].Status.split('##')[1]!='') && result[i].Status.split('##')[2]>0)
// {
	// pendingstatus='STARTED';
// }
// else if(result[i].Status.split('##')[1]==0 &&  (result[i].Status.split('##')[1]!='') )
// {
	// pendingstatus='COMPLETED';
// }
// else if(result[i].Status.split('##')[1]>0 )
// {
	// pendingstatus='STARTED';
// }
// else{
	// pendingstatus='';
// }

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

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

                responseText += '<tr>' +
                   // '<td><a  onclick="GetItem(' + result[i].WorkItemId + ');">' + Editbutton + '</a></td>' +
                    '<td>' + slno + '</td>' +
                    '<td>' + result[i].Title + '</td>' +
      '<td>' + result[i].DriverName + '</td>' +
    '<td>' + deliverytype + '</td>' +
     '<td>' + result[i].AssignedOnDate.split('##')[1]  + '</td>' +
                    '<td>' + result[i].WorkItemId + '</td>' +

                    '<td>' + result[i].AssignedOnDate.split('##')[0]  + '</td>' +
                    '<td>' + result[i].Description + '</td>' +


     '<td>' + result[i].DepartmentName + '</td>' +
    //  '<td>' + result[i].Driver + '</td>' +
                    '<td><div class="text-center" style="width:100%"><span style="width:100%" class="badge ' + rowclass + '">' + result[i].Status.split('##')[0] + '</span></div></td>' +
					'<td>' + pendingstatus  + '</td>' +
         '<td>' + result[i].AssignedOnDate.split('##')[2]  + '</td>' +
		'<td align=center onclick="redirectlpo(' + result[i].AssignedOnDate.split('##')[3]  + ')"><a style="color:blue;text-decoration:underline;">' + result[i].AssignedOnDate.split('##')[3]  + '</a></td>' +
'<td>' + result[i].AssignedOnDate.split('##')[4]  + '</td>' +
				  '</tr>';

            }
            else {
                responseText += '<tr>' +
                   // '<td><a  onclick="GetItem(' + result[i].WorkItemId + ');">' + Editbutton + '</a></td>' +
                    '<td>' + slno + '</td>' +
                     '<td>' + result[i].Title + '</td>' +
      '<td>' + result[i].DriverName + '</td>' +
     '<td>' + deliverytype + '</td>' +
      '<td>' + result[i].AssignedOnDate.split('##')[1] + '</td>' +
                    '<td>' + result[i].WorkItemId + '</td>' +

                    '<td>' + result[i].AssignedOnDate.split('##')[0]  + '</td>' +
                    '<td>' + result[i].Description + '</td>' +


     '<td>' + result[i].DepartmentName + '</td>' +
   //  '<td>' + result[i].Driver + '</td>' +

                    '<td><div class="text-center" style="width:100%"><span style="width:100%" class="badge ' + rowclass + '">' + result[i].Status.split('##')[0] + '</span></div></td>' +
 '<td>' + pendingstatus  + '</td>' +
		'<td>' + result[i].AssignedOnDate.split('##')[2]  + '</td>' +
		'<td align=center onclick="redirectlpo(' + result[i].AssignedOnDate.split('##')[3]  + ')"><a style="color:blue;text-decoration:underline;">' + result[i].AssignedOnDate.split('##')[3]  + '</a></td>' +
'<td>' + result[i].AssignedOnDate.split('##')[4]  + '</td>' +
				  '</tr>';
            }
        }
        $('#listitems').html(responseText + '</tbody><tfoot><tr>' +
            '<th> </th>' +
           // '<th> </th>' +
       "<th>Dept</th>" +
     "<th>Salesman</th>" +
      "<th>Order Type</th>" +
     "<th>Locn</th>" +
            "<th>Bill No</th>" +
            "<th>Date/Time</th>" +
            "<th>Customer</th>" +


      "<th>Delivery Area</th>" +
        // "<th>Pending Qty</th>" +
            "<th>Status</th>" +
			 "<th>Pending Status</th>" +
     "<th>Remarks</th>" +
	  "<th>LPO#</th>" +
	    "<th>Time</th>" +
            '</tr></tfoot>');


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

function redirectlpo(DONO)
{
	   if ((usermenu1.indexOf("M237") != -1))
                    {
                        window.open('../SalesInvoice/DeliveryOrderNew?slno=' + DONO +'&stype='+'LPO' );
					}
}



//  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 datatableWithsearchWIINDEXDetails(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": 10,
                "columnDefs": [
                    { "width": "2%", "targets": 0 },
                    { "width": "2%", "targets": 1 },
                    { "width": "2%", "targets": 2 },
                    { "width": "2%", "targets": 3 },
                    { "width": "8%", "targets": 4 },
                    { "width": "6%", "targets": 5 },
     { "width": "6%", "targets": 6 },
     { "width": "6%", "targets": 7 },
     { "width": "1%", "targets": 8 },
     { "width": "1%", "targets": 9 },
     { "width": "1%", "targets": 10 },
     { "width": "1%", "targets": 11 },
     { "width": "1%", "targets": 12 },
	  { "width": "1%", "targets": 13 },
     { "width": "1%", "targets": 14 },
     { "width": "1%", "targets": 15 },
     { "width": "1%", "targets": 16 },
     { "width": "3%", "targets": 17 },
     { "width": "3%", "targets": 18 },
     { "width": "3%", "targets": 19 },
     { "width": "3%", "targets": 20 },
     { "width": "3%", "targets": 21 },
     { "width": "3%", "targets": 22},
     { "width": "3%", "targets": 23 },
     { "width": "3%", "targets": 24 },
     { "width": "3%", "targets": 25 },
     { "width": "3%", "targets": 26 },
	  { "width": "2%", "targets": 27 },
                  //  { "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 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": 10,
                "columnDefs": [
                    { "width": "1%", "targets": 0 },
                    { "width": "2%", "targets": 1 },
                    { "width": "2%", "targets": 2 },
                    { "width": "2%", "targets": 3 },
                    { "width": "1%", "targets": 4 },
                    { "width": "3%", "targets": 5 },
                    { "width": "6%", "targets": 6 },
                    { "width": "6%", "targets": 7 },
                    { "width": "6%", "targets": 8 },
                    { "width": "6%", "targets": 9 },
                    { "width": "4%", "targets": 10 },
                   { "width": "10%", "targets": 11 },
				   { "width": "4%", "targets": 12 },
                    { "width": "2%", "targets": 13 },
                   // { "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();
            }
    }
     LocnLoad(0);
    function LocnLoad(id) {
    var data = {};
    data.LocationId = 0;
    data.UserId = ERPUserId;
    $.ajax({
        type: "POST",
        url: "../Master/LocationGetandGets",
        data: data,
        success: function (result) {
            LocationLoad(result.oList, id);
        }
    });

}

   // $("#Dept").append(LocnSelect);
    //if (a == 0) {
      //  $('#select_locn').val(UserLocationId);
        //$('#select_location0').val(UserLocationId);
        //$('#locn_job').val(UserLocationId);
    //}
    //else {
    //    $('#select_locn').val(a);
    //    $('#select_location0').val(a);
    //}
//}

     function GetDepartment(id) {
                var data = {};
                data.UserId = ERPUserId;
                $.ajax({
                    type: "POST",
                    url: "../Master/UserDepartmentGetandGets",
                    data: data,
                    success: function (result) {
                        DepartmentLoad(result.oList, id);


                    }
                });
            }

            function DepartmentLoad(result, a) {
                $("#Dept").empty();
                $("#Dept").append("<option value='0'>-All-</option>");
                for (var i = 0; i < result.length; i++) {
                    $("#Dept").append("<option value='" + result[i].DepartmentId + "'>" + result[i].DepartmentName + "</option>");
                }
            }
    function GetLocation(id) {
        var data = {};
        data.LocationId = 0;
        data.UserId = ERPUserId;
        $.ajax({
            type: "POST",
            url: "../Master/UserLocationGetandGets",
            data: data,
            success: function (result) {
                LocationLoad(result.oList, id);
            }
        });
    }

    function LocationLoad(result, a) {
        $("#Dept").empty();
        $("#Dept").append("<option value='0'>-All-</option>");
        for (var i = 0; i < result.length; i++) {
            $("#Dept").append("<option value='" + result[i].LocationId + "'>" + result[i].LocationCode + "</option>");
        }
       // $("#Dept").val(UserLocationId)
    }


    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>