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

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

@{
    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-6">
                                    <div class="form-group">
                                        <label>Msisdn</label>
                                        <div class='input-group'>
                                            <input type="text" class="form-control" id="msisdn">
                                        </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">Register Information</h4>
                </div>
                <div class="card-content collapse show">
                    <div class="card-body">
                        <table class="table table-striped table-bordered base-style" id="table-reg-info">
                            <thead>
                                <tr>
                                    <th>No.</th>
                                    <th>Msisdn</th>
                                    <th>Package name</th>
                                    <th>Register time</th>
                                    <th>Expire time</th>
                                    <th>Last renew</th>
                                    <th>Renew status</th>
                                    <th>Active status</th>
                                    <th>Channel</th>
                                </tr>
                            </thead>
                            <tbody id="gridbody1">
                                @if (Model != null && Model.listRegInfo != null && Model.listRegInfo.Count > 0)
                                {
                                    for (int i = 0; i < Model.listRegInfo.Count; i++)
                                    {
                                        var his = Model.listRegInfo[i];
                                <tr>
                                    <td class="text-right">@(i + 1)</td>
                                    <td class="text-center">@his.msisdn</td>
                                    <td class="text-right">@his.product_name</td>
                                    <td class="text-right">@his.register_time.Value.ToString("dd/MM/yyyy HH:mm:ss")</td>
                                    <td class="text-right">@his.expire_time.Value.ToString("dd/MM/yyyy HH:mm:ss")</td>
                                    <td class="text-right">@(his.last_extend == null ? "" : his.last_extend.Value.ToString("dd/MM/yyyy HH:mm:ss"))</td>
                                    <td class="text-right">@(his.last_extend == null ? "" : his.extend_status == 0 ? "Success" : "Failed")</td>
                                    <td class="text-right">@(his.status == 1 ? "Active" : "Cancelled")</td>
                                    <td class="text-right">@(his.channel)</td>
                                </tr>
                                    }
                                }
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Charge Log</h4>
                </div>
                <div class="card-content collapse show">
                    <div class="card-body">
                        <table class="table table-striped table-bordered base-style" id="table-charge-log">
                            <thead>
                                <tr>
                                    <th>No.</th>
                                    <th>Msisdn</th>
                                    <th>Money</th>
                                    <th>Charge time</th>
                                    <th>Package</th>
                                    <th>Description</th>
                                    <th>Channel</th>
                                </tr>
                            </thead>
                            <tbody id="gridbody2">
                                @if (Model != null && Model.listChargeLog != null && Model.listChargeLog.Count > 0)
                                {
                                    for (int i = 0; i < Model.listChargeLog.Count; i++)
                                    {
                                        var his = Model.listChargeLog[i];
                                <tr>
                                    <td class="text-right">@(i + 1)</td>
                                    <td class="text-center">@his.msisdn</td>
                                    <td class="text-right">@his.fee</td>
                                    <td class="text-right">@his.chargeTime.Value.ToString("dd/MM/yyyy HH:mm:ss")</td>
                                    <td class="text-right">@his.product_name</td>
                                    <td class="text-right">@his.description</td>
                                    <td class="text-right">@(his.channel == "1" ? "Web" : his.channel)</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 dataTable1 = $("#table-reg-info").DataTable();
        var dataTable2 = $("#table-charge-log").DataTable();
        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 (dataTable1 != null && dataTable1 != undefined) {
                dataTable1
                    .clear()
                    .destroy();
            }
            if (dataTable2 != null && dataTable2 != undefined) {
                dataTable2
                    .clear()
                    .destroy();
            }
            var service_id = $("#service_id").val();
            var msisdn = $("#msisdn").val();
            var fromDate = $("#fromDate").val();
            var toDate = $("#toDate").val();
            startSpinner('btnSearch');
            $.ajax({
                url: subDomain + "/Admin/SearchHistoryAction",
                data: {
                    fromDate: fromDate,
                    toDate: toDate,
                    service_id: service_id,
                    msisdn: msisdn
                },
                type: "POST",
                success: function (data) {
                    stopSpinner('btnSearch');
                    console.log(data);
                    if (data.error != "0") {
                        console.log(data.content);
                        swal("Warning", data.content, "warning");
                    } else {
                        updateGridRegInfo("gridbody1", data.listRegInfo);
                        updateGridCharge("gridbody2", data.listChargeLog);
                        dataTable1 = $("#table-reg-info").DataTable();
                        dataTable2 = $("#table-charge-log").DataTable();
                    }
                },
                error: function (data) {
                    stopSpinner('btnSearch');
                    console.log(data.error);

                    dataTable1 = $("#table-reg-info").DataTable();
                    dataTable2 = $("#table-charge-log").DataTable();
                }
            })
        }

        function updateGridRegInfo(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-left'> " + news.msisdn + "</td> ";
                    html += "<td class='text-left'> " + news.product_name + "</td> ";
                    html += "<td class='text-center'> " + moment(news.register_time).format("DD/MM/YYYY HH:mm:ss") + "</td> ";
                    html += "<td class='text-center'> " + moment(news.expire_time).format("DD/MM/YYYY HH:mm:ss") + "</td> ";
                    html += "<td class='text-center'> " + (news.last_extend == null ? "" : moment(news.last_extend).format("DD/MM/YYYY HH:mm:ss")) + "</td> ";
                    html += "<td class='text-center'> " + (news.last_extend == null ? "" : news.extend_status == 0 ? "Success" : "Failed") + "</td> ";
                    html += "<td class='text-center'> " + (news.status == 1 ? "Active" : "Cancelled") + "</td> ";
                    html += "<td class='text-center'> " + (news.channel == "1" ? "WEB": news.channel) + "</td> ";
                    html += "</tr>";
                }
            }
            $("#" + gridbody).html(html);
        }

        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-left'> " + news.msisdn + "</td> ";
                    html += "<td class='text-right'> " + news.fee + "</td> ";
                    html += "<td class='text-center'> " + moment(news.chargeTime).format("DD/MM/YYYY HH:mm:ss") + "</td> ";
                    html += "<td class='text-left'> " + news.product_name + "</td> ";
                    html += "<td class='text-left'> " + news.description + "</td> ";
                    html += "<td class='text-left'> " + (news.channel == "1" ? "Web" : news.channel) + "</td> ";
                    html += "</tr>";
                }
            }
            $("#" + gridbody).html(html);
        }

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