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



<div class="alert alert-danger" id="error" role="alert" hidden>
    <span id="message"></span>
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
</div>
<div class="alert alert-success" id="success" role="alert" hidden>
    Data Successfully Posted
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
</div>

<div class="alert alert-info" id="info" role="alert" hidden>
    Data Successfully Posted
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
</div>
<div class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header card-header-primary card-header-icon">
                        <div class="card-icon">
                            <i class="material-icons">Month Days</i>
                        </div>
                        <h4 class="card-title">Calculate Days Of Month</h4>
                    </div>

                    <div class="row">

                        <div class="col-md-4">
                            <div class="card-body ">
                                <div class="form-group bmd-form-group is-filled">
                                    <input type="text" id="searchField" class="form-control" placeholder="Search User" onchange="LoadDailyAttendace()">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="card-body ">
                                <div class="form-group bmd-form-group is-filled">
                                    <input type="text" id="AttendanceDate" class="form-control datepicker" value="@DateTime.Now.ToShortDateString()">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <button type="button" class="btn btn-fill btn-rose pull-left" style="margin-top:20px" onclick="PostMonthlyData()">Submit Monthly Days<div class="ripple-container"></div></button>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="toolbar">
                            <!--        Here you can write extra buttons/actions for the toolbar              -->


                        </div>
                        <div class="material-datatables">
                            <table id="datatables" class="table table-striped table-no-bordered table-hover" cellspacing="0" width="100%" style="width:100%">
                                <thead>
                                    <tr>
                                        <th>User Id</th>
                                        <th>Month</th>
                                        <th>Year</th>
                                        <th>Total Working Days</th>
                                        <th>Status</th>

                                        @*<th class="disabled-sorting text-right">Actions</th>*@
                                    </tr>
                                </thead>
                                <tfoot>
                                    @*<tr>
                                            <th>User Id</th>
                                            <th>Check Time In Out</th>
                                            <th>Check Type</th>
                                            <th>Verify Code</th>
                                            <th>SENSORID</th>
                                            <th class="text-right">Actions</th>
                                        </tr>*@
                                </tfoot>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                    <!-- end content-->
                </div>
                <!--  end card  -->
            </div>
            <!-- end col-md-12 -->
        </div>
        <!-- end row -->
    </div>
</div>


@section scripts{
    @*<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>*@
    <script src="~/Content/assets/js/plugins/bootstrap-selectpicker.js"></script>
    <script src="~/Content/assets/js/plugins/bootstrap-datetimepicker.min.js"></script>

    <script src="~/Content/assets/js/plugins/jquery.dataTables.min.js"></script>


    @*<link href="~/Content/DateTimePicker/jquery-ui.css" rel="stylesheet" />
        <script src="~/Content/DateTimePicker/jquery-1.12.4.js"></script>

        <script src="~/Content/DateTimePicker/jquery-ui.js"></script>*@
    <script>
        $(document).ready(function () {
            md.initFormExtendedDatetimepickers();
            if ($('.slider').length != 0) {
                md.initSliders();
            }
            LoadDailyAttendace();

            //setTimeout(function () {
            //    alert("Boom!");
            //}, 2000);
           // altert_dissmiss();

        });

        $(".datepicker").on("dp.change", function (e) {
            LoadDailyAttendace();
        });
        function LoadDailyAttendace() {
            OTable = $('#datatables').dataTable({
                "filter": false,
                "destroy": true,
                "orderMulti": false,
                "serverSide": true,
                "Processing": true,
                "bProcessing": true,
                "bServerSide": true,
                "ajax":
             {
                 "url": "/ReadAttendance/LoadMonthlyDays",
                 "type": "POST",
                 "dataType": "JSON",
                 "data": {
                     "Date": "" + $('#AttendanceDate').val() + "",
                     "searchField": "" + $('#searchField').val() + ""
                 }
             },
                "aoColumns": [
                    { "mDataProp": "UserId" },
                    { "mDataProp": "Month" },
                    { "mDataProp": "Year" },
                    { "mDataProp": "TotalDays" },
                    { "mDataProp": "Status" },

                ]
                //,
                //  'fnServerParams': function (aoData) {
                //      aoData.push({ name: "Date", value: $('#AttendanceDate').val() });
                //  },
            });
            // Setup - add a text input to each filter column
            //$('#datatables.filters td').each(function () {

            //    var title = $('#datatables thead td').eq($(this).index()).text();
            //    if (title) {
            //        $(this).html('<input type="text" class="form-control" />');
            //    }
            //});


            var delay = (function () {
                var timer = 0;
                return function (callback, ms) {
                    clearTimeout(timer);
                    timer = setTimeout(callback, ms);
                };
            })();

            $('#datatables_filter').hide();

            //table.columns().eq(0).each(function (colIdx) {
            //    $('input', $('.filters td')[colIdx]).bind('keyup', function () {
            //        var coltext = this.value; // typed value in the search column
            //        var colindex = colIdx; // column index
            //        delay(function () {
            //            table
            //                .column(colindex)
            //                .search(coltext)
            //                .draw();
            //        }, 500);
            //    });
            //});

        }

        function PostMonthlyData() {
            debugger;
            $("#AttendanceDate").addClass('disable');
            var date = $("#AttendanceDate").val();
            if (date == "" || date == undefined) {
                alert("Please select Date");

            }
            $.ajax({
                url: '@Url.Action("PostMonthDays", "ReadAttendance")',
                dataType: "json",
                type: "POST",
                cache: false,
                data: { date: $("#AttendanceDate").val() },
                success: function (data) {
                    if (data.success) {
                        $("#success").removeAttr('hidden');
                        //sleep(10000);
                        //$(".alert").alert('close')

                        //alert(data.message);
                        LoadDailyAttendace();
                        altert_dissmiss();
                    }
                    else {
                        $("#error").removeAttr('hidden');
                        $("#message").text(data.message);
                        altert_dissmiss();
                    }
                },
                error: function (xhr) {
                    alert(xhr.responseText);
                }
            });
        }


        function holdOn(millisecondsToWait) {
            setTimeout(function () {
                /* do something or nothing; this waits for a minute because 60000 milliseconds have been passed */
            }, millisecondsToWait);

        }
        function sleep(millisecondsToWait) {
            var now = new Date().getTime();
            while (new Date().getTime() < now + millisecondsToWait) {
                /* do nothing; this will exit once it reaches the time limit */
                /* if you want you could do something and exit */
            }
        }

        function altert_dissmiss() {
            debugger;
            setTimeout(function() {
                $(".alert").fadeTo(2500,0).slideUp(500,function (){
                    $(this).remove();
                });

            },200);

        }


    </script>
}