@{
    ViewBag.Title = "Prize Winner";
    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-3 col-sm-3 col-6">
                                    <div class="form-group">
                                        <label>Service</label>
                                        <div class='input-group'>
                                            <select class="form-control " id="period">
                                                <option value="-1">-- ALL --</option>
                                                <option value="0">PROMOTION</option>
                                                <option value="1">DAILY</option>
                                                <option value="2">WEEKLY</option>
                                                <option value="3">MONTHLY</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3 col-sm-3 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-3 col-sm-3 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-3 col-sm-3 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-3 col-sm-3 col-6">
                                    <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">Prize Winner</h4>
                </div>
                <div class="card-content collapse show">
                    <div class="card-body">
                        <table class="table table-striped table-bordered base-style" id="grid_detail">
                            <thead>
                                <tr>
                                    <th style="text-align: center">No.</th>
                                    <th style="text-align: center">Phone number</th>
                                    <th style="text-align: center; min-width: 250px;">Period</th>
                                    <th style="text-align: center">Prize</th>
                                    <th style="text-align: center">Spin Time</th>
                                    <th style="text-align: center">Process Time</th>
                                    <th style="text-align: center">Status</th>
                                </tr>
                            </thead>
                            <tbody id="gridbody1">
                            </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 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"
        //    })
        //});



        var tableDetail;
        function resetTableDetail() {
            tableDetail = $("#grid_detail").DataTable({
                orderCellsTop: true,
                fixedHeader: true
            });
        }

        function clearTable(table) {
            if (table != null && table != undefined) {
                table
                    .clear()
                    .destroy();
            }
        }

        resetTableDetail();

        function SearchHistory() {
            var msisdn = $("#msisdn").val();
            var fromDate = $("#fromDate").val();
            var toDate = $("#toDate").val();
            startSpinner('btnSearch');
            clearTable(tableDetail);
            $.ajax({
                url: subDomain + "/LuckySpin/PrizeWinnerSearch",
                data: {
                    __RequestVerificationToken: $('input[name="__RequestVerificationToken"]').val(),
                    fromDate: fromDate,
                    toDate: toDate,
                    msisdn: msisdn,
                    period: $("#period").val()
                },
                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.listPrize);
                        resetTableDetail();
                    }
                },
                error: function (data) {
                    stopSpinner('btnSearch');
                    console.log(data.error);
                    resetTableDetail();
                }
            })
        }

        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 class="text-right">' + (i + 1) + '</td>';
                    html += "<td class='text-left'> " + news.msisdn + "</td> ";
                    html += "<td class='text-center'> " + (news.period == "1" ? "DAILY" : news.period == "2" ? "WEEKLY" : news.period == "3" ? "MONTHLY" : "PROMOTION") + "</td> ";
                    html += "<td class='text-left' style='min-width: 300px;'> " + (news.prize_name) + "<br>" + (news.prize_name2) + "</td> ";
                    html += "<td class='text-center' style='min-width: 200px;'> " + moment(news.code_time).format("DD/MM/YYYY HH:mm:ss") + "</td> ";
                    html += "<td class='text-center' style='min-width: 200px;'> " + (news.process_time == null ? "" : moment(news.process_time).format("DD/MM/YYYY HH:mm:ss")) + "</td> ";
                    html += "<td class='text-center'> " + (news.status == '0' ? "Success" : "Failure") + "</td> ";
                    html += "</tr>";
                }
            }
            $("#" + gridbody).html(html);
        }

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

            $.ajax({
                url: subDomain + "/LuckySpin/PrizeWinnerExport",
                data: {
                    __RequestVerificationToken: $('input[name="__RequestVerificationToken"]').val(),
                    fromDate: fromDate,
                    toDate: toDate,
                    msisdn: msisdn,
                    period: $("#period").val()
                },
                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().startOf('day')
            });
            $("#toDate").datetimepicker({
                format: "DD/MM/YYYY",
                defaultDate: moment().startOf('day')
            })
        });

    </script>
}