Luckycall/ReportWebCore/SuperAdmin/Views/Admin/Report.cshtml


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

@using ReportWeb;
@using ReportWeb.Models;
@using SuperCms.Extensions;
@model List<DailyReport>

@{
    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'>
                                            <input type="hidden" value="@ViewBag.ServiceId" id="svIdSearch" />
                                            <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>

                                        <button type="button" class="btn btn-fill btn-warning" onclick="exportExcel()" id="btnExportExcel">
                                            <i class="icon-export"></i> Export Excel
                                        </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">
                            <thead>
                                <tr>
                                    <th>No.</th>
                                    <th>Report date</th>
                                    <th>Revenue</th>
                                    <th>Revenue Buy</th>
                                    <th>Paid money</th>
                                    <th>Count sub</th>
                                    <th>Register new</th>
                                    <th>Deactive</th>
                                </tr>
                            </thead>
                            <tbody id="gridbody2">
                                @if (Model != null && Model.Count > 0)
                                {
                                    for (int i = 0; i < Model.Count; i++)
                                    {
                                        var his = Model[i];
                                        <tr>
                                            <td class="text-right">@(i + 1)</td>
                                            <td class="text-center">@his.report_date</td>
                                            <td class="text-right">@his.revenue</td>
                                            <td class="text-right">@his.revenue_buy</td>
                                            <td class="text-right">@his.paid_money</td>
                                            <td class="text-right">@his.count_active</td>
                                            <td class="text-right">@his.count_reg</td>
                                            <td class="text-right">@his.count_deactive</td>
                                        </tr>
                                    }
                                }
                            </tbody>
                        </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/GetReport",
                data: {
                    fromDate: fromDate,
                    toDate: toDate,
                    service_id: service_id
                },
                type: "POST",
                success: function (data) {
                    stopSpinner('btnSearch');
                    console.log(data);
                    if (data.error != "0") {
                        console.log(data.content);
                        //setTimeout(function () {
                        //    showModal('message-dialog');
                        //    $('#message-content').html(data.content.split("\n").join("<br />"));
                        //}, 1000);
                    } else {
                        updateGridCharge("gridbody2", data.dailyReport);
                        console.log("format table");
                        dataTable = $(".base-style").DataTable({ "paging": 0 });
                    }
                },
                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];
                    html += "<tr>";
                    html += "<td scope = 'row'> " + (i + 1) + "</td>";
                    html += "<td class='text-center'> " + news.report_date + "</td> ";
                    html += "<td class='text-right'> " + news.revenue + "</td> ";
                    html += "<td class='text-right'> " + news.revenue_buy + "</td> ";
                    html += "<td class='text-right'> " + news.paid_money + "</td> ";
                    html += "<td class='text-right'> " + news.count_active + "</td> ";
                    html += "<td class='text-right'> " + news.count_reg + "</td> ";
                    html += "<td class='text-right'> " + news.count_deactive + "</td> ";
                    html += "</tr>";
                }
            }
            $("#" + gridbody).html(html);
        }



        function exportExcel() {
            console.log("Export data");
            startSpinner('btnExportExcel');
            var service_id = $("#service_id").val();
            var fromDate = $("#fromDate").val();
            var toDate = $("#toDate").val();

            $.ajax({
                url: subDomain + "/Admin/ReportExport",
                data: {
                    __RequestVerificationToken: $('input[name="__RequestVerificationToken"]').val(),
                    fromDate: fromDate,
                    toDate: toDate,
                    service_id: service_id
                },
                type: "POST",
                xhr: function () {
                    var xhr = new XMLHttpRequest();
                    xhr.onreadystatechange = function () {
                        if (xhr.readyState == 2) {
                            if (xhr.status == 200) {
                                xhr.responseType = "blob";
                                console.log("blob");
                            } else {
                                xhr.responseType = "text";
                                console.log("text");
                            }
                        }
                    };
                    return xhr;
                },
                success: function (data, status, xhr) {
                    stopSpinner('btnExportExcel');
                    let filename = "";
                    let disposition = xhr.getResponseHeader('Content-Disposition');
                    if (disposition && disposition.indexOf('attachment') !== -1) {
                        let filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
                        let matches = filenameRegex.exec(disposition);
                        if (matches != null && matches[1]) filename = matches[1].replace(/['"]/g, '');
                    }
                    let a = document.createElement('a');
                    let url = window.URL.createObjectURL(data);
                    a.href = url;
                    a.download = filename.replace('UTF-8', '');;
                    document.body.append(a);
                    a.click();
                    a.remove();
                    window.URL.revokeObjectURL(url);
                    $("#overlay").fadeOut(300);
                },
                error: function (data) {
                    stopSpinner('btnExportExcel');
                    console.log(data);
                }
            })
        }


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

            // if select sv id
            var svId = $("#svIdSearch").val();
            if (svId != null && svId != "") {
                $("#service_id").val(svId);
                SearchHistory();
            }
        });
    </script>
}