@{
    ViewBag.Title = "UserDashboard";
    //Layout = "~/Views/Shared/_Layout.cshtml";
    Layout = "~/Views/Shared/_LayoutServer.cshtml";

}


<script type="text/ecmascript" src="../../../js/jquery.min.js"></script>
<!-- This is the Javascript file of jqGrid -->
<script type="text/ecmascript" src="../../../js/trirand/src/jquery.jqGrid.js"></script>
<!-- This is the localization file of the grid controlling messages, labels, etc.
<!-- We support more than 40 localizations -->
<script type="text/ecmascript" src="../../../js/trirand/i18n/grid.locale-en.js"></script>

<script type="text/javascript" language="javascript" src="//cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<!-- A link to a jQuery UI ThemeRoller theme, more than 22 built-in and many more custom -->
<link rel="stylesheet" type="text/css" media="screen" href="../../../css/jquery-ui.css" />
<!-- The link to the CSS that the grid needs -->
<link rel="stylesheet" type="text/css" media="screen" href="../../../css/trirand/ui.jqgrid.css" />

@*<h2>UserDashboard</h2>*@
@*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*@


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

<div id="Entry" style="margin-top:-20px;">

    <section class="grid-row-label">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header" style="border-bottom:2px solid #e6e6e6">
                        <h3 class="card-title mb-0" style="float:left">WMS Dashboard</h3>

                        <h3 class="col-md-3 text-right" id="gndtotal" style="float:right;color:red;font-weight:500"> </h3>

                        <h3 class="text-md-right" id="fc" style="float:right;opacity:0;color:red;font-weight:500"> </h3>

                    </div>
                    <div class="card-content collapse show">
                        <div class="card-body" style="margin-top:-60px">

                            <form action="#">
                                <div class="form-body">
                                    <hr style="margin-top:30px" />

                                    <div class="row" style="background-color:#000000;margin-left:0px;width:100%;height:200px;margin-top:-23px;">

                                        <div class="col-md-12" style="margin-top:-5px;">
                                            <br />
                                            <div class="form-group">

                                                <div class="row" id="slnorow">

                                                    <label class="col-lg-1" style="margin-top:5px;color:white;">Date From:</label>
                                                    <div class="col-lg-11">
                                                        <div class="row">
                                                          
                                                              <div class="col-md-3 input-group"> @*height:85%;background-color:white*@
                                                                <input type="text" id="DateFrom" class="form-control" style="border-radius: 5px; border: 1px solid #BABFC7;height:85%;background-color:white;" />

                                                            
                                                            </div>

          
                                                            <label class="col-lg-1 text-lg-right" style="margin-top:5px;color:white;">Delivery Type:</label>
                                                            <div class="col-md-3 input-group">
                                                                <select id="select_place" name="priority" class="form-control" style="border-radius: 5px; border: 1px solid #BABFC7;height:85%;background-color:white;"></select>

                                                            </div>


                                                            <label class="col-lg-1 text-lg-right" style="margin-top:5px;color:white;">Salesman:</label>

                                                            <div class="col-md-2 input-group">
                                                                <select id="salesman" name="priority" class="form-control" style="border-radius: 5px; border: 1px solid #BABFC7;height:85%;background-color:white;"></select>

                                                            </div>

                                                            
                                                            @*<div class="col-md-2 input-group">*@
                                                                @*<img src="~/app-assets/img/ico/eumi_icon_new.ico" style="height: 45px;width: 130px;margin: 0px 0px 0px 55px;"  />*@
                                                                @*<img src="~/app-assets/img/text.png" style="height: 45px;width: 130px;margin: 0px 0px 0px 55px;background-color: white;padding: 5px 5px 5px 5px;" />*@
                                                                @*<div  id="divsummary" class="d-inline-block custom-control custom-radio mr-1">
                                                                    <input type="radio" name="sd" style="color:white;" class="custom-control-input" checked="" id="btnsummary" value="normal" onchange="GetList('##')">
                                                                    <label class="custom-control-label" for="btnsummary" style="color:white;">Summary </label>
                                                                </div>
                                                                <div style="margin-left:2%" id="divdetail" class="d-inline-block custom-control custom-radio mr-1">
                                                                    <input type="radio" name="sd" style="color:white;" class="custom-control-input" id="btndetail" onchange="GetList('##$$')" value="normal">
                                                                    <label class="custom-control-label" for="btndetail" style="color:white;">Detailed </label>
                                                                </div>*@
                                                            @*</div>*@

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


                                                <div class="row" style="margin-top:-5px">
                                                    <label class="col-lg-1" style="margin-top:5px;color:white;">Date To:</label>
                          
                                                    <div class="col-lg-11">
                                                        <div class="row">
                                                            <div class="col-md-3 input-group">
                                                                <input type="text" id="DateTo" class="form-control" style="border-radius: 5px; border: 1px solid #BABFC7;height:85%;background-color:white;" />

                                                            </div>
                                                           

                                                            @*<label class="col-lg-1 text-lg-right" style="margin-top:5px;color:white;">Delivery Type</label>
                                                            <div class="col-md-3 input-group">
                                                                <select id="select_place" name="priority" class="form-control" style="border-radius: 5px; border: 1px solid #BABFC7;height:85%;background-color:white;"></select>

                                                            </div>*@


                                                            <label class="col-lg-1 text-lg-right" style="margin-top:5px;color:white;">Location:</label>

                                                            <div class="col-md-3 input-group">
                                                                <select type="text" class="form-control" id="Dept" style="border-radius: 5px; border: 1px solid #BABFC7;height:85%;background-color:white;"></select>

                                                            </div>

                                                            <label class="col-lg-1 text-lg-right" style="margin-top:5px;color:white;">Status:</label>

                                                            <div class="col-md-2 input-group">
                                                                <select id="select_status" name="priority" class="form-control" style="border-radius: 5px; border: 1px solid #BABFC7;height:85%;background-color:white;">
                                                                    <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>


                                                            @*<label class="col-lg-1 text-lg-right" style="margin-top:5px;color:white;">Refresh Time:</label>

                                                            <div >

                                                                <select id="sel_timeref" name="priority" class="form-control" style="border-radius: 5px; border: 1px solid #BABFC7;height:65%;background-color:white;" onchange="changetimeref()">

                                                                    <option value="15000">15 Sec</option>
                                                                    <option value="30000">30 Sec</option>
                                                                    <option value="60000">60 Sec</option>

                                                                </select>

                                                            </div>*@


                                                            <div class="col-md-2 input-group">
                                                            @*<img src="~/app-assets/img/text.png" style="height: 55px;width: 155px;margin: -35px 0px 0px 55px;background-color: white;padding: 5px 5px 5px 5px;" />*@
                                                                <img src="~/app-assets/img/text.png" style="height: 55px;width :145px;margin: -35px 0px 0px 35px;background-color :white;padding :5px 5px 5px 5px;" />
                                                            </div>






                                                               



                                                            </div>
                                                    </div>

                                                </div>


                                                <div class="row">

                                                    <div class="col-md-12">


                                                        <div class="row" style="margin-top:-10px">
                                                            <label class="col-lg-1" style="margin-top:5px;color:white;">Invoice No:</label>

                                                            <div class="col-lg-11">
                                                                <div class="row">
                                                                    <div class="col-md-3 input-group">
                                                                        <input type="text" id="Invoiceno" class="form-control" style="border-radius: 5px; border: 1px solid #BABFC7;height:85%;background-color:white;" />
                                                                    </div>

                                                   

                                                                    <label class="col-lg-1 text-lg-right" style="margin-top:5px;color:white;">Delivery Area:</label>

                                                                    <div class="col-md-3 input-group">
                                                                        <select id="select_terms" name="priority" class="form-control" style="border-radius: 5px; border: 1px solid #BABFC7;height:85%;background-color:white;"></select>

                                                                    </div>

                                                                    

                                                                    <div class="col-md-2 input-group">
                                                                        <div @*style="margin-left:2%"*@ id="divsummary" class="d-inline-block custom-control custom-radio mr-1" @*style="margin-top:3px;margin-left: 38px;"*@>
                                                                            <input type="radio" name="sd" style="color:white;" class="custom-control-input" checked="" id="btnsummary" value="normal" onchange="GetList('##')">
                                                                            <label class="custom-control-label" for="btnsummary" style="color:white;">Summary </label>
                                                                        </div>
                                                                        <div @*style="margin-left:2%;margin-top:3px;"*@ id="divdetail" class="d-inline-block custom-control custom-radio mr-1" >
                                                                            <input type="radio" name="sd" style="color:white;" class="custom-control-input" id="btndetail" onchange="GetList('##$$')" value="normal">
                                                                            <label class="custom-control-label" for="btndetail" style="color:white;">Detailed </label>
                                                                        </div>
                                                                    </div>

                                                             <div class="col-md-1 input-group">
                                                            <select id="sel_timeref" name="priority" class="form-control" style="border-radius: 5px; border: 1px solid #BABFC7;height:85%;background-color:white;" onchange="changetimeref()">

                                                                <option value="15000">15 Sec</option>
                                                                <option value="30000">30 Sec</option>
                                                                <option value="60000">60 Sec</option>

                                                             </select>

                                                              </div>


                                                                    <div class="col-md-2 input-group">

                                                                        <button type="button" id="btngosubmit"  class="bnstygo"  @*onclick="GetList('##');$('#btnsummary').prop('checked', true)"*@ autocomplete="off">REFRESH @*<i class="fa fa-check-square-o"></i>*@</button>


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


                                                    </div>

                                                </div>


                                              


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



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


                  
                    
                    
                     <div class="card-body" style="margin-top:3px; height:auto; overflow:auto;width:100%;">


                        <div>
                            <table id="grid"></table>
                            <div id="pager"></div>
                        </div>

                         @*<a class="btn btn-white exlbtn" href="/WMSDashdoardToExcel" style="color:#000;"><i class="fa fa-file-excel"></i> Export To Excel</a>*@
                    </div>


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

    </section>

</div>








@*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*@










<script type="text/javascript">
    //Get Currennt Date

    $(document).ready(function () {

        var cat = (localStorage.getItem('nanana'));
        if (cat != null) {

        }
        else {
            window.location = '../Home/Index';

        }


        GetDepartment(0);
        GetSalesMan(0);
        placeload(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'
            }


        });

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


     

        ////////////////////////////////////////////////
      //  GetList('');
        GetList('##');



        $("#btngosubmit").click(function (e) {
          //  debugger;
            //e.preventDefault();
            //myGrid.trigger('reloadGrid');

            $("#grid").GridUnload();
            GetList("##");
            $('#btnsummary').prop('checked', true)
        });



    });


    // end of doc



    function GetDepartment(id) {

        var data = {};
        data.UserId = ERPUserId;
        $.ajax({
            type: "POST",
            url: "../Home/UserDepartmentGetandGets",
            data: data,
            success: function (result) {
                DepartmentLoad(result, 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 GetSalesMan(id) {
        var data = {};
        data.UserId = ERPUserId;
        $.ajax({
            type: "POST",
            url: "../Home/UserSalesmanGetandGets",
            data: data,
            success: function (result) {
                SalesManLoad(result, 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: "../Home/AreaGetandGets",
            data: data,
            success: function (result) {
                //  AreaLoad(result.oList, id);
                AreaLoad(result, id);

            }
        });
    }
    var DefaultArea = 0;
    function AreaLoad(result, a) {
        $("#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: "../Home/TermsGetandGets",
            data: data,
            success: function (result) {
                TermsLoad(result, 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].TermDescription + "</option>");
        }
        if (a == 0) {
            $('#select_terms').val(0);
        }
        else {
            $('#select_terms').val(a);

        }
    }


    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' ";
            }
        }
        debugger;
        var ERPUserId ;
        var ERPDeptId ;
        if (window.localStorage != null) {
            var cat = (localStorage.getItem('nanana'));
            if (cat == null) {
                UserLogout();
                //window.location = '../Home/Login';
                //localStorage.clear();

            }
            else {

                var PrevDepartment = '';
                PrevDepartment = localStorage.getItem('nanana');
                var res = cat.split(":");
                window.LoggedInUserArray = res;
                window.LoggedInUser = window.LoggedInUserArray[1];
            }

        }
            var UserLocationId = parseInt(window.LoggedInUserArray[2]);         
            ERPUserId =parseInt(window.LoggedInUserArray[0]);
            ERPDeptId =parseInt(window.LoggedInUserArray[1]);

        var Flag = 0;
      //  var var1 = "1=1";
        // var2 = "##";

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

        $("#grid").GridUnload();


        if (var2 == "##") {
            var2 = "hash";
            var myGrid = $("#grid").jqGrid({
                // $("#grid").jqGrid
                // ({
                //  url: "/Home/GetValues?Type=" + Type + "&UserId=" + UserId + "&DepartmentId=" + DepartmentId + "&FromDate='" + FromDate + "'&ToDate='" + ToDate + "'&Variable1='" + Variable1 + "'&Variable2='" + Variable2 + "'",
                url: "/Home/GetValues?Type=" + Type + "&UserId=" + UserId + "&DepartmentId=" + DepartmentId + "&FromDate=" + FromDate + "&ToDate=" + ToDate + "&Variable1=" + Variable1 + "&Variable2=" + var2,
                datatype: 'json',
                mtype: 'Get',
                colNames: ['NewWorkRemarks', 'Dept', 'Salesman', 'OrderType', 'Locn', 'BillNo', 'Date/Time', 'Customer', 'DeliveryArea', 'Status', 'Remarks', 'LPO', 'Time'],
                colModel: [
               //{
               //    key: true,
               //    name: 'slno',
               //    hidden:true,
               //    index: 'slno',//sl
               //    editable: true,
               //    search: true,
               //    searchoptions: { sopt: ['cn', 'eq', 'ne', 'lt', 'le', 'gt', 'ge'] }
               //},
                 {
                     key: false,
                     name: 'NewWorkRemarks',
                     hidden: true,
                     index: 'NewWorkRemarks',
                 },
               {
                   key: false,
                   name: 'Title',//Dept
                   index: 'Title',//dep  //Title
                   editable: true,
                   search: true,
                   searchoptions: { sopt: ['cn', 'eq', 'ne', 'lt', 'le', 'gt', 'ge'] }
               },
               {
                   key: false,
                   name: 'DriverName',//AssignedByUser
                   index: 'DriverName',//salesman
                   editable: true,
                   search: true,
                   sortable: true,
                   align: 'left',
                   stype: "text",
                   searchoptions: { "sopt": ["bw", "cn", "eq"] }
               }
               , {
                   key: false,
                   name: 'Div',
                   //  index: 'DriverName',//ordertype    //deliverytype
                   editable: true,
                   formatter: getordertype,
                   search: true,
                   searchoptions: { sopt: ['cn', 'eq', 'ne', 'lt', 'le', 'gt', 'ge'] }
               },
               {
                   key: false,
                   name: 'AssignedOnDate',
                   // index: 'DriverName',//loc   //AssignedOnDate.split('##')[1]
                   editable: true,
                   formatter: getlocation,
                   search: true,
                   searchoptions: { sopt: ['cn', 'eq', 'ne', 'lt', 'le', 'gt', 'ge'] }
               },
               {
                   key: false,
                   name: 'WorkItemId',
                   //  index: 'BillNumber',//billno
                   editable: true,
                   search: true,
                   searchoptions: { sopt: ['cn', 'eq', 'ne', 'lt', 'le', 'gt', 'ge'] }
               },
               {
                   key: false,
                   name: 'AssignedOnDate',
                   // index: 'AssignedOnDate',//date/time
                   editable: true,
                   formatter: getdatetime,
                   //  formatter: "date",
                   //  formatoptions: { srcformat: "ISO8601Long", newformat: "m/d/Y h:i A" },
               },
                {
                    key: false,
                    name: 'Description',
                    //   index: 'Description',//customer
                    editable: true,
                    search: true,
                    searchoptions: { sopt: ['cn', 'eq', 'ne', 'lt', 'le', 'gt', 'ge'] }

                },
               {
                   key: false,
                   name: 'DepartmentName',     // 'StoreKeeper',
                   //  index: 'StoreKeeper',//deliveryarea
                   editable: true,
                   search: true,
                   searchoptions: { sopt: ['cn', 'eq', 'ne', 'lt', 'le', 'gt', 'ge'] }
               }, {
                   key: false,
                   name: 'Status',//status
                   //   index: 'Status',//result[i].Status.split('##')[0]
                   editable: true,
                   search: true,
                   formatter: getstatus,
                   searchoptions: { sopt: ['cn', 'eq', 'ne', 'lt', 'le', 'gt', 'ge'] }
                  },
                  //  {
               //    key: false,
               //    name: 'Status',
               //    //  index: 'Status',//pendingstatus
               //    editable: true, // var pendingstatus = result[i].Status.split('##')[1];
               //    search: true,
               //    formatter: getpendingstatus,
               //    searchoptions: { sopt: ['cn', 'eq', 'ne', 'lt', 'le', 'gt', 'ge'] }
               //},
               {
                   key: false,
                   name: 'AssignedOnDate',   // 'WorkRemarks',
                   //  index: 'WorkRemarks',//remarks
                   editable: true,
                   search: true,
                   formatter: getremarks,
                   searchoptions: { sopt: ['cn', 'eq', 'ne', 'lt', 'le', 'gt', 'ge'] }
               }, {
                   key: false,
                   name: 'AssignedOnDate',
                   // index: 'AssignedOnDate',//lpo
                   editable: true,
                   search: true,
                   formatter: getlpo,
                   searchoptions: { sopt: ['cn', 'eq', 'ne', 'lt', 'le', 'gt', 'ge'] }
               }, {
                   key: false,
                   name: 'AssignedOnDate',
                   //  index: 'AssignedOnDate',//time
                   editable: true,
                   // formatter: "date",
                   // formatoptions: { srcformat: "ISO8601Long", newformat: "h:i A" },
                   search: true,
                   formatter: gettime,
                   searchoptions: { sopt: ['cn', 'eq', 'ne', 'lt', 'le', 'gt', 'ge'] }
               },
                ],

                pager: jQuery('#pager'),
                // pager: '#grid',
             //   rowNum: 50,
                 rowList: [20,30,40,50, 60, 70, 80, 90, 100],
                rownumbers: true,
                viewrecords: true,
                caption: 'Details',
                emptyrecords: 'No records to display',
                //   page:1,
                // rowNum: 20,
                // rowList: [50, 60, 70, 80, 90],
                rowNum: 99999,
                height: '100%',
                autowidth: true,
                ignoreCase: true,
                loadonce: true,
                gridview: true,
                // width:'100%',
                // loadonce: true,
                //  gridview: true,
                sortable: true,
                sortorder: 'desc',
                pageable: true,
             
                jsonReader:
                {
                    root: "rows",
                    page: "page",
                    total: "total",
                    records: "records",
                    repeatitems: false,
                    Id: "0"
                },
                autowidth: true,
                excel: true,
                rowattr: function (rd) {                    
                    return { "class": "rowClass" };
                    //alert("hi");


                },
                loadComplete: function ()
                {
                   
                    var rows = $("#grid").getDataIDs();

                    for (var i = 0; i < rows.length; i++)
                    {
                        debugger;
                        var status = $("#grid").getCell(rows[i], "Status");
                        var data = status.split('##')[0];
                        // $(rowObject).removeClass('active');
                        // $(a).addClass('streturn');
                        data = jQuery.trim(data);

                        if (data == "PACKED") {
                          //  $("#grid").jqGrid('setRowData', rows[i], false, { color: 'white', weightfont: 'bold', background: 'blue' });
                            $("#grid").jqGrid('setRowData', rows[i], false, { color: 'white', background: '#c9c539' });                   
                        }
                        else if (data == "PICKED") {
                            $("#grid").jqGrid('setRowData', rows[i], false, { color: 'white', background: '#f78e32' });
                        }

                        else if(data == "RETURN")
                        {
                            $("#grid").jqGrid('setRowData', rows[i], false, { color: 'white', background: 'red' });
                        }
                        else if (data == "ON THE WAY") {
                            $("#grid").jqGrid('setRowData', rows[i], false, { color: 'white', background: '#64a13a' });
                        }
                        else if (data == "COMPLETED") {
                            $("#grid").jqGrid('setRowData', rows[i], false, { color: 'white', background: '#417db1' });
                        }
                        else if (data == "DELIVERED") {
                            $("#grid").jqGrid('setRowData', rows[i], false, { color: 'white', background: '#0c554e' });
                        }
                        else if (data == "CREATED") {

                            $("#grid").jqGrid('setRowData', rows[i], false, { color: 'black', background: 'white' });

                        }
                        else if (data == "LOADED") {

                            $("#grid").jqGrid('setRowData', rows[i], false, { color: 'white', background: '#45b0de' });

                        }
                        else
                            
                        {
                            $("#grid").jqGrid('setRowData', rows[i], false, { color: '#621012', background: 'white' }); //#f8dd8c

                        }


                    }
                },
             
            
            }).navGrid('#pager',
            {
                search: true,
                edit: false,
                add: false,
                del: false,
                refresh: true,
                searchtext: "Search",

            }

          );
        }
        else if (var2 == "##$$") {
        }
        else {
            $("#grid").jqGrid("clearGridData", true).trigger("reloadGrid");

            var myGrid = $("#grid").jqGrid({
                // $("#grid").jqGrid
                // ({
                //   url: "/Home/GetValues?Type=" + Type + "&UserId=" + UserId + "&DepartmentId=" + DepartmentId + "&FromDate='" + FromDate + "'&ToDate='" + ToDate + "'&Variable1='" + Variable1 + "'&Variable2=" + Variable2,
                url: "/Home/GetValues?Type=" + Type + "&UserId=" + UserId + "&DepartmentId=" + DepartmentId + "&FromDate=" + FromDate + "&ToDate=" + ToDate + "&Variable1=" + Variable1 + "&Variable2=" + Variable2,
                datatype: 'json',
                mtype: 'GET',
                colNames: ['slno', 'Dept', 'Salesman', 'OrderType', 'Locn', 'BillNo', 'Date/Time', 'Customer', 'DeliveryArea', 'Status', 'Remarks', 'LPO', 'Time'],//'PendingStatus',
                colModel: [
               {
                   key: true,
                   name: 'slno',
                   hidden: true,
                   index: 'slno',//sl
                   editable: true,
                   search: true,
                   searchoptions: { sopt: ['cn', 'eq', 'ne', 'lt', 'le', 'gt', 'ge'] }
               },
               {
                   key: false,
                   name: 'Dept',//Dept
                   index: 'Dept',//dep  //Title
                   editable: true,
                   search: true,
                   searchoptions: { sopt: ['cn', 'eq', 'ne', 'lt', 'le', 'gt', 'ge'] }
               },
               {
                   key: false,
                   name: 'AssignedByUser',//AssignedByUser
                   index: 'AssignedByUser',//salesman
                   editable: true,
                   search: true,
                   searchoptions: { "sopt": ["bw", "cn", "eq"] }
               }
               , {
                   key: false,
                   name: 'DriverName',
                   //  index: 'DriverName',//ordertype    //deliverytype
                   editable: true,
                   formatter: getordertype1,
                   search: true,
                   searchoptions: { sopt: ['cn', 'eq', 'ne', 'lt', 'le', 'gt', 'ge'] }
               },
               {
                   key: false,
                   name: 'DriverName',
                   // index: 'DriverName',//loc   //AssignedOnDate.split('##')[1]
                   editable: true,
                   formatter: getlocation1,
                   search: true,
                   searchoptions: { sopt: ['cn', 'eq', 'ne', 'lt', 'le', 'gt', 'ge'] }
               },
               {
                   key: false,
                   name: 'BillNumber',
                   //  index: 'BillNumber',//billno
                   editable: true,
                   search: true,
                   searchoptions: { sopt: ['cn', 'eq', 'ne', 'lt', 'le', 'gt', 'ge'] }
               },
               {
                   key: false,
                   name: 'AssignedOnDate',
                   // index: 'AssignedOnDate',//date/time
                   editable: true,
                   //  formatter: getdatetime,
                   formatter: "date",
                   formatoptions: { srcformat: "ISO8601Long", newformat: "m/d/Y h:i A" },
               },
                {
                    key: false,
                    name: 'Description',
                    //   index: 'Description',//customer
                    editable: true,
                    search: true,
                    searchoptions: { sopt: ['cn', 'eq', 'ne', 'lt', 'le', 'gt', 'ge'] }

                },
               {
                   key: false,
                   name: 'StoreKeeper',     // 'StoreKeeper',
                   //  index: 'StoreKeeper',//deliveryarea
                   editable: true,
                   search: true,
                   searchoptions: { sopt: ['cn', 'eq', 'ne', 'lt', 'le', 'gt', 'ge'] }
               }, {
                   key: false,
                   name: 'Status',//status
                   //   index: 'Status',//result[i].Status.split('##')[0]
                   editable: true,
                   search: true,
                   // formatter: getstatus,
                   searchoptions: { sopt: ['cn', 'eq', 'ne', 'lt', 'le', 'gt', 'ge'] }
               },
               //{
               //    key: false,
               //    name: 'Status',
               //    //  index: 'Status',//pendingstatus
               //    editable: true, // var pendingstatus = result[i].Status.split('##')[1];
               //    search: true,
               //    // formatter: getpendingstatus,
               //    searchoptions: { sopt: ['cn', 'eq', 'ne', 'lt', 'le', 'gt', 'ge'] }
               //},
               {
                   key: false,
                   name: 'WorkRemarks',   // 'WorkRemarks',
                   //  index: 'WorkRemarks',//remarks
                   editable: true,
                   search: true,
                   // formatter: getremarks,
                   searchoptions: { sopt: ['cn', 'eq', 'ne', 'lt', 'le', 'gt', 'ge'] }
               }, {
                   key: false,
                   name: 'AssignedOnDate',
                   // index: 'AssignedOnDate',//lpo
                   editable: true,
                   search: true,
                   //  formatter: getlpo,
                   searchoptions: { sopt: ['cn', 'eq', 'ne', 'lt', 'le', 'gt', 'ge'] }
               }, {
                   key: false,
                   name: 'AssignedOnDate',
                   //  index: 'AssignedOnDate',//time
                   editable: true,
                   formatter: "date",
                   formatoptions: { srcformat: "ISO8601Long", newformat: "h:i A" },
                   search: true,
                   // formatter: gettime,
                   searchoptions: { sopt: ['cn', 'eq', 'ne', 'lt', 'le', 'gt', 'ge'] }
               },
                ],

                pager: jQuery('#pager'),
                // pager: '#pager',
                // pager: '#grid',
                rownumbers: true,
                viewrecords: true,
                caption: 'Details',
                emptyrecords: 'No records to display',
                //   page:1,
                // rowNum: 20,
                // rowList: [50, 60, 70, 80, 90],
                rowNum: 99999,
                height: '100%',
                autowidth: true,
                ignoreCase: true,
                loadonce: true,
                gridview: true,
                // width:'100%',
                // loadonce: true,
                //  gridview: true,
                sortable: true,
                //  ignoreCase: true,
                //   pageable: true,
                //  autoheight: true,

                //  toppager: true,
                // autowidth: false,
                excel: true,
                jsonReader:
                {
                    root: "rows",
                    page: "page",
                    total: "total",
                    records: "records",
                    repeatitems: false,
                    Id: "0"
                },

                //  multiselect: false
                //pager-you have to choose here what icons should appear at the bottom
                //like edit,create,delete icons
            }).navGrid('#pager',
            {
                search: true,
                edit: false,
                add: false,
                del: false,
                refresh: true,
                searchtext: "Search",

            }

     );
        }


       

        //$('#grid').on('reloadGrid', function () {
        //    var userData =  $('#grid').jqgrid('getGridParam', 'userData');
        //})
       // $('#grid').jqGrid('filterToolbar', { searchOnEnter: false,enableClear:false});

       $('#grid').jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false, defaultSearch: "cn", searchOperators: true, autosearch: true });

        $("#grid").jqGrid("setLabel", "rn", "SL#");
     
        jQuery("#grid").setGridParam({ rowNum: 15 }).trigger("reloadGrid");


        ///////////////////excel////////////////////
       

     //    jQuery("#grid").jqGrid('navGrid', "#pager").jqGrid( //#pager
     //      'navButtonAdd', "#pager", {
     //          caption : "Excel export",
     //          buttonicon : "ui-icon-arrowthickstop-1-s",
     //          onClickButton : null,
     //          position : "first",
     //          title : 'Excel export',
     //          cursor : "pointer"
     //});
        
         //jQuery("#grid").jqGrid('navButtonAdd', '#pager', {
         //    caption: "Excel Report",
         //    onClickButton: function () {
         //        ExportDataToExcel("#grid");
         //    }
        //});
        //////////////////////////////////////
        //$("#export").on("click", function () {
        //    $("#jqGrid").jqGrid("exportToExcel", {
        //        includeLabels: true,
        //        includeGroupHeader: true,
        //        includeFooter: true,
        //        fileName: "jqGridExport.xlsx",
        //        maxlength: 40 // maxlength for visible string data 
        //    })
        //})

         jQuery("#grid").jqGrid('navButtonAdd', '#pager', {
             caption: "Export to Excel",
             onClickButton: function () {

                 exportExcel($(this));

                 @*<a class="btn btn-white exlbtn" href="/WMSDashdoardToExcel?Type=@Type&UserId=@UserId&DepartmentId=@DepartmentId&FromDate=@FromDate&ToDate=@ToDate&Variable1=@Variable1&Variable2=@Variable2" style="color:#000;"><i class="fa fa-file-excel"></i> Export To Excel</a>*@

             }
         });
    }
    /////////export to excel
    function exportExcel($id)
    {
        debugger;
        var Flag = 0;
        var   ERPUserId = parseInt(window.LoggedInUserArray[0]);
        var   ERPDeptId = parseInt(window.LoggedInUserArray[1]);

        var UserId = ERPUserId;
        var DepartmentId = ERPDeptId;
        var FromDate = $('#DateFrom').val();
        var ToDate = $('#DateTo').val();
        var Variable1 = "1=1";
        var Variable2 = "##";


        var data = {};
        data.Type = Flag;
        data.UserId = UserId;
        data.DepartmentId = DepartmentId;
        data.FromDate = FromDate;
        data.ToDate = ToDate;
        data.Variable1 = Variable1;
        data.Variable2 = Variable2;
        $.ajax({
            type: "POST",
            url: "../Home/WMSDashdoardToExcel",
            data: data,
            success: function (result) {
              //  TermsLoad(result, id);
            }
        });
    }
    //function exportExcel($id) {
    //   // alert('excelExport');
    //    var keys = [], ii = 0, rows = "";
    //    var ids = $id.getRowData();  // Get All IDs
    //    var row = $id.getRowData(ids[0]);     // Get First row to get the labels
    //    for (var k in row) {
    //        keys[ii++] = k;    // capture col names
    //        rows = rows + k + "\t";     // output each Column as tab delimited
    //    }
    //    rows = rows + "\n";   // Output header with end of line
    //    for (i = 0; i < ids.length; i++) {
    //        row = $id.getRowData(ids[i]); // get each row
    //        for (j = 0; j < keys.length; j++) rows = rows + row[keys[j]] + "\t"; // output each Row as tab delimited
    //        rows = rows + "\n";  // output each row with end of line
    //    }
    //    rows = rows + "\n";  // end of line at the end
    //    var form = "<form name='csvexportform' action='WMSDashdoardToExcel' method='post'>";
    //    form = form + "<input type='hidden' name='csvBuffer' value='" + rows + "'>";
    //    form = form + "</form><script>document.csvexportform.submit();</sc" + "ript>";
    //    OpenWindow = window.open('', '');
    //    OpenWindow.document.write(form);
    //    OpenWindow.document.close();
    //}
    //////////////




    function getordertype(cellValue, opts, rowObject) {

     //   debugger;
        var deliverytype = '';
        if (cellValue == '' || cellValue == null) {
            // deliverytype = cellValue.NewWorkRemarks;
         //   debugger;
            deliverytype = rowObject.NewWorkRemarks;
            // $("#" + rowObject.id).hide();



        }
        else {
            deliverytype = cellValue;
        }




        //if (cellValue == null || cellValue == 1451520000) {
        //    return '';
        //} else {
        //  var data = cellValue.split('#')[1];
        return deliverytype;
        // }

    }
    function getlocation(cellValue, opts, rowObject) {
        //AssignedOnDate.split('##')[1]
        if (cellValue == null || cellValue == 1451520000) {
            return '';
        } else {

            //   var data = cellValue.split('#')[2];
            var data = cellValue.split('##')[1];

            return data;
        }
    }

    function getdatetime(cellValue, opts, rowObject) {
        if (cellValue == null || cellValue == 1451520000) {
            return '';
        } else {
            var data = cellValue.split('##')[0];
            return data;
        }
    }
    function getstatus(cellValue, opts, rowObject) {
        if (cellValue == null || cellValue == 1451520000) {
            return '';
        } else {
            var data = cellValue.split('##')[0];
          //  debugger;
           // $(rowObject).removeClass('active');

           // $(a).addClass('streturn');
            data = jQuery.trim(data);
            //if (data == "CREATED")
            //{
            //    debugger;
            //    $("#grid").jqGrid('setRowData', options.rowId, false, { color: 'white', weightfont: 'bold', background: 'blue' });
            //         //   $('#grid'.jqID(rowid)).addClass('streturn');
            //        }
            return data;
        }
    }
    function getpendingstatus(cellValue, opts, rowObject) {
        if (cellValue == null || cellValue == 1451520000) {
            return '';
        } else {
            var data = cellValue.split('##')[1];
            return data;
        }
    }

    function getremarks(cellValue, opts, rowObject) {
        if (cellValue == null || cellValue == 1451520000) {
            return '';
        } else {
            var data = cellValue.split('##')[2];
            return data;
        }
    }
    function getlpo(cellValue, opts, rowObject) {
        if (cellValue == null || cellValue == 1451520000) {
            return '';
        } else {
            var data = cellValue.split('##')[3];
            return data;
        }
    }
    function gettime(cellValue, opts, rowObject) {
        if (cellValue == null || cellValue == 1451520000) {
            return '';
        } else {
            var data = cellValue.split('##')[4];
            return data;
        }
    }

    function getordertype1(cellValue, opts, rowObject) {


        if (cellValue == null || cellValue == 1451520000) {
            return '';
        }
        else {
            var data = cellValue.split('#')[1];
            return data;
        }

    }

    function getlocation1(cellValue, opts, rowObject) {

        if (cellValue == null || cellValue == 1451520000) {
            return '';
        } else {

            var data = cellValue.split('#')[2];

            return data;
        }
    }


 
</script>










<link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />
<link href="~/Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet" />
@*<script src="~/Scripts/jquery-1.9.1.min.js"></script>
<script src="~/Scripts/jquery-ui-1.10.4.min.js"></script>*@
<script src="~/Scripts/i18n/grid.locale-en.js"></script>
<script src="~/Scripts/jquery.jqGrid.min.js"></script>



<style type="text/css">
    .rowClass {
        /*color: blue;*/
        background-image: none;
    }
</style>

<style>
    .ui-th-ltr
   /*// .ui-jqgrid .ui-jqgrid-htable th div {*/
  {
      /*height: 25px !important;*/
    font-size: 15px !important;
    font-weight: bold !important;
}
 
    .ui-search-toolbar th div{
            padding-right: -0.7em !important;
    }

    .ui-jqgrid tr.jqgrow td {
        font-size: 1rem;
            background-color: white;
    }
   .ui-jqgrid .ui-jqgrid-htable th div {
    height: 29px !important;
    background-color: white;
    color: black;
    font-size: 18px;
}
    .ui-jqgrid .ui-paging-info {
        font-weight: bold;
        height: 25px;
        margin-top: 3px;
        margin-right: 4px;
    }

.ui-paging-info {
    /*background-color: #6d7677;*/
    /*text-align: center !important;*/
    color: red;
    font-size: medium;
}


.ui-jqgrid .loading
{
   font-weight:bold;
   font-size:medium;
   color:#ff8d60;
}




    .bnstygo {
        font-size: large;
        text-align: center;
        font-weight: 500;
        height: 40px;
        background-color: #e0085a !important;
        border-radius: 22px;
        border: unset;
        width: 170px;
        margin: -5px 0px 0px 30px;
        color: white;
    }

    .streturn{
        background-color:#c9c539;
        font-weight: 500;

    }
    .stontheway{
        background-color:#64a13a;
        font-weight: 500;


    }
    .stpacked{
        background-color:#417db1;
        font-weight: 500;
    }
    .stcompleted{
         background-color:green;
        font-weight: 500;
    }

    .ui-jqgrid tr.jqgrow tr{
        background-image:none !important;
    }
    .ui-jqgrid tr.jqgrow td {
        background-color: unset !important;
        background-image:none !important;
}
    /*.ui-jqgrid .ui-jqgrid-pager .ui-pg-div {
    padding: 3px 8px 4px 5px;
    float: left;
    position: relative;
    background-color: steelblue;
    color: white;
    font-size: medium;
}*/


    /*.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
    border: 1px solid #fcefa1;
    background: #fbf9ee url(images/ui-bg_glass_55_fbf9ee_1x400.png) 50% 50% repeat-x;
    color: #363636;
}*/
</style>