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

@using ReportWeb;
@using ReportWeb.Models;
@using SuperCms.Extensions;

@{
    var listService = Context.Session.GetComplexData<List<Services>>("listService");
    Users user = Context.Session.GetComplexData<Users>("user");
}

<!-- BEGIN: Content-->
<div class="app-content content">
    <div class="content-wrapper">
        <div class="content-body">

            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Search</h4>
                    <a class="heading-elements-toggle"><i class="fa fa-ellipsis-v font-medium-3"></i></a>
                    <div class="heading-elements">
                        <ul class="list-inline mb-0">
                            <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                            <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                            <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                            <li><a data-action="close"><i class="ft-x"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="card-content collapse show">
                    <div class="card-body">
                        <form class="form">
                            <div class="row">
                                <div class="col-md-4 col-sm-4 col-6">
                                    <div class="form-group">
                                        <label>Service</label>
                                        <div class='input-group'>
                                            <select class="form-control" id="service_id">
                                                @if (listService != null)
                                                {
                                                    if (user.role == Common.UserRole.Admin)
                                                    {
                                                        foreach (Services sv in listService)
                                                        {
                                                            <option value="@sv.id">@sv.sv_name</option>
                                                        }
                                                    }
                                                    else
                                                    {
                                                        foreach (Services sv in listService)
                                                        {
                                                            if (sv.sv_code.StartsWith("LUCKYCALL"))
                                                            {
                                                                <option value="@sv.id">@sv.sv_name</option>
                                                            }
                                                        }
                                                    }
                                                }
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4 col-sm-4 col-6">
                                    <div class="form-group">
                                        <label>From</label>
                                        <div class='input-group'>
                                            <input type="text" class="form-control fromDate" id="fromDate">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4 col-sm-4 col-6">
                                    <div class="form-group">
                                        <label>To</label>
                                        <div class='input-group'>
                                            <input type="text" class="form-control toDate" id="toDate">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4 col-sm-4 col-12">
                                    <div class="form-group " style="margin-top: 10px">
                                        <button type="button" class="btn btn-primary btn-min-width "
                                                onclick="SearchHistory();" id="btnSearch">
                                            Search
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Report</h4>
                </div>
                <div class="card-content collapse show">
                    <div class="card-body">
                        <table class="table table-striped table-bordered base-style table-responsive">
                            <thead>
                                <tr>
                                    <th>No.</th>
                                    <th>Service</th>
                                    <th>Report date</th>
                                    <th>Total</th>
                                    <th>H00</th>
                                    <th>H01</th>
                                    <th>H02</th>
                                    <th>H03</th>
                                    <th>H04</th>
                                    <th>H05</th>
                                    <th>H06</th>
                                    <th>H07</th>
                                    <th>H08</th>
                                    <th>H09</th>
                                    <th>H10</th>
                                    <th>H11</th>
                                    <th>H12</th>
                                    <th>H13</th>
                                    <th>H14</th>
                                    <th>H15</th>
                                    <th>H16</th>
                                    <th>H17</th>
                                    <th>H18</th>
                                    <th>H19</th>
                                    <th>H20</th>
                                    <th>H21</th>
                                    <th>H22</th>
                                    <th>H23</th>
                                </tr>
                            </thead>
                            <tbody id="gridbody2">
                            </tbody>
                            @*<tfoot>
                                    <tr>
                                        <th></th>
                                        <th>Total</th>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                    </tr>
                                </tfoot>*@
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<div class="hidden">
    <div class="row">
        <div class="col-lg-12 mb-1">
            <div class="input-group">
                <div class="input-group-prepend">
                    <span class="input-group-text">
                        <span class="fa fa-calendar-o"></span>
                    </span>
                </div>
                <input id="picker_from" class="form-control datepicker" type="date">
            </div>
        </div>
        <div class="col-lg-12">
            <div class="input-group">
                <div class="input-group-prepend">
                    <span class="input-group-text">
                        <span class="fa fa-calendar-o"></span>
                    </span>
                </div>
                <input id="picker_to" class="form-control datepicker" type="date">
            </div>
        </div>
    </div>
</div>
<!-- END: Content-->
@section Scripts {



    <script src="~/admin-assets/js/scripts/tables/datatables/datatable-styling.min.js"></script>
    <script src="~/admin-assets/js/scripts/pickers/dateTime/bootstrap-datetime.min.js"></script>
    <script src="~/admin-assets/js/scripts/pickers/dateTime/pick-a-datetime.min.js"></script>
    <script>
        var dataTable = $(".base-style").DataTable({
            "paging": 0
        });
        var opts = {
            lines: 8, // The number of lines to draw
            length: 5, // The length of each line
            width: 3, // The line thickness
            radius: 5, // The radius of the inner circle
            scale: 1, // Scales overall size of the spinner
            corners: 1, // Corner roundness (0..1)
            color: '#ffffff', // CSS color or array of colors
            fadeColor: 'transparent', // CSS color or array of colors
            speed: 1, // Rounds per second
            rotate: 0, // The rotation offset
            animation: 'spinner-line-fade-quick', // The CSS animation name for the lines
            direction: 1, // 1: clockwise, -1: counterclockwise
            zIndex: 2e9, // The z-index (defaults to 2000000000)
            className: 'spinner', // The CSS class to assign to the spinner
            //top: '50%', // Top position relative to parent
            //left: '50%', // Left position relative to parent
            shadow: '0 0 1px transparent', // Box-shadow for the lines
            //position: 'absolute' // Element positioning
        };

        var spinner = new Spinner(opts);

        function startSpinner(obj) {
            var target = document.getElementById(obj);
            $("#" + obj).prop("disabled", true);
            spinner.spin(target);
        }


        function stopSpinner(obj) {
            $("#" + obj).prop("disabled", false);
            if (spinner != undefined) {
                spinner.stop();
            }
        }

        //$( document ).ready(function() {
        //    $("#timerange").datetimepicker({
        //        format: "d/MM/YYYY hh:mm a - d/MM/YYYY hh:mm a"
        //    })
        //});



        function SearchHistory() {
            if (dataTable != null && dataTable != undefined) {
                dataTable
                    .clear()
                    .destroy();
            }
            var service_id = $("#service_id").val();
            var fromDate = $("#fromDate").val();
            var toDate = $("#toDate").val();
            startSpinner('btnSearch');
            $.ajax({
                url: subDomain + "/Admin/GetRevenueHourly",
                data: {
                    fromDate: fromDate,
                    toDate: toDate,
                    service_id: service_id
                },
                type: "POST",
                success: function (data) {
                    stopSpinner('btnSearch');

                    if (data.error != "0") {
                        //setTimeout(function () {
                        //    showModal('message-dialog');
                        //    $('#message-content').html(data.content.split("\n").join("<br />"));
                        //}, 1000);
                    } else {
                        var json = JSON.parse(data.data);
                        console.log(json);
                        updateGridCharge("gridbody2", json);

                        dataTable = $(".base-style").DataTable({
                            "paging": false
                            //"ajax": json,
                            //"dataSrc": "",
                            //"columns": [
                            //    { "data": "SV_CODE" },
                            //    { "data": "REPORT_DATE" },
                            //    { "data": "H00" },
                            //    { "data": "H01" },
                            //    { "data": "H02" },
                            //    { "data": "H03" },
                            //    { "data": "H04" }
                            //]
                        });
                    }
                },
                error: function (data) {
                    stopSpinner('btnSearch');
                    console.log(data.error);
                }
            })
        }

        function updateGridCharge(gridbody, val) {
            $("#" + gridbody).html("");
            //console.log(val);
            var html = "";
            if (val != undefined) {
                for (var i = 0; i < val.length; i++) {
                    var news = val[i];
                    console.log(news);
                    html += "<tr>";
                    html += "<td scope = 'row'> " + (i + 1) + "</td>";
                    html += "<td class='text-center'> " + news.SV_CODE + "</td> ";
                    html += "<td class='text-center'> " + moment(news.REPORT_DATE).format("DD/MM/YYYY") + "</td> ";
                    html += "<td class='text-right'> " + news.TOTAL + "</td> ";
                    html += "<td class='text-right'> " + news.H00 + "</td> ";
                    html += "<td class='text-right'> " + news.H01 + "</td> ";
                    html += "<td class='text-right'> " + news.H02 + "</td> ";
                    html += "<td class='text-right'> " + news.H03 + "</td> ";
                    html += "<td class='text-right'> " + news.H04 + "</td> ";
                    html += "<td class='text-right'> " + news.H05 + "</td> ";
                    html += "<td class='text-right'> " + news.H06 + "</td> ";
                    html += "<td class='text-right'> " + news.H07 + "</td> ";
                    html += "<td class='text-right'> " + news.H08 + "</td> ";
                    html += "<td class='text-right'> " + news.H09 + "</td> ";
                    html += "<td class='text-right'> " + news.H10 + "</td> ";
                    html += "<td class='text-right'> " + news.H11 + "</td> ";
                    html += "<td class='text-right'> " + news.H12 + "</td> ";
                    html += "<td class='text-right'> " + news.H13 + "</td> ";
                    html += "<td class='text-right'> " + news.H14 + "</td> ";
                    html += "<td class='text-right'> " + news.H15 + "</td> ";
                    html += "<td class='text-right'> " + news.H16 + "</td> ";
                    html += "<td class='text-right'> " + news.H17 + "</td> ";
                    html += "<td class='text-right'> " + news.H18 + "</td> ";
                    html += "<td class='text-right'> " + news.H19 + "</td> ";
                    html += "<td class='text-right'> " + news.H20 + "</td> ";
                    html += "<td class='text-right'> " + news.H21 + "</td> ";
                    html += "<td class='text-right'> " + news.H22 + "</td> ";
                    html += "<td class='text-right'> " + news.H23 + "</td> ";
                    html += "</tr>";
                }
            }
            $("#" + gridbody).html(html);
        }

        $(document).ready(function () {
            $("#fromDate").datetimepicker({
                format: "DD/MM/YYYY",
                defaultDate: moment().add(-7, 'days')
            });
            $("#toDate").datetimepicker({
                format: "DD/MM/YYYY",
                defaultDate: moment().startOf('day')
            })
        });
    </script>
}