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

@using SuperAdmin.Models;
@using SuperAdmin.Models.Http;
@using SuperAdmin.Controllers;
@using SuperAdmin.Source;

@model ExportGetListRes
@{

}

<style>
    img {
        max-width: 100%;
    }
</style>

<input type="hidden" value="@ViewBag.Role" id="role" />

<div class="content-header row">
    <div class="content-header-left col-md-6 col-xs-12 mb-1">
        <h2 class="content-header-title">Reward requests</h2>
    </div>
    <div class="content-header-right breadcrumbs-right breadcrumbs-top col-md-6 col-xs-12">
        <div class="breadcrumb-wrapper col-xs-12">
            <ol class="breadcrumb">
                <li class="breadcrumb-item">
                    <a href="Index">Admin</a>
                </li>
                <li class="breadcrumb-item">
                    <a href="#">Reward requests</a>
                </li>
            </ol>
        </div>
    </div>
</div>

<div class="content-body">
    <!-- Basic form layout section start -->
    <section id="basic-form-layouts">
        <div class="row service-height">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title" id="basic-layout-form">Search</h4>
                        <a class="heading-elements-toggle"><i class="icon-ellipsis font-medium-3"></i></a>
                        <div class="heading-elements">
                            <ul class="list-inline mb-0">
                                <li><a data-action="collapse"><i class="icon-minus4"></i></a></li>
                                @*<li><a data-action="reload"><i class="icon-reload"></i></a></li>*@
                                <li><a data-action="expand"><i class="icon-expand2"></i></a></li>
                                @*<li><a data-action="close"><i class="icon-cross2"></i></a></li>*@
                            </ul>
                        </div>
                    </div>
                    <div class="card-content collapse show">
                        <div class="card-body">
                            <div class="card-block">
                                <div class="form-body">
                                    @Html.AntiForgeryToken()
                                    <div class="row">
                                        <div class="col-md-3 col-sm-4 col-6">
                                            <div class="form-group">
                                                <label>From Date</label>
                                                <div class='input-group'>
                                                    <input type="text" class="form-control fromDate" id="fromDateSearch" name="fromDateSearch">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-3 col-sm-4 col-6">
                                            <div class="form-group">
                                                <label>To date</label>
                                                <div class='input-group'>
                                                    <input type="text" class="form-control toDate" id="toDateSearch" name="toDateSearch">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-3 col-sm-4 col-6">
                                            <div class="form-group">
                                                <label>Game</label>
                                                <select class="form-control" id="gameSearch" name="gameSearch">
                                                    <option value="-1" selected>-- All --</option>
                                                    <option value="1">Lucky power</option>
                                                    <option value="2">Lucky day</option>
                                                    <option value="3">Lucky plus</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-3 col-sm-4 col-6">
                                            <div class="form-group">
                                                <label>Status</label>
                                                <select class="form-control" id="statusSearch" name="statusSearch">
                                                    <option value="-1" selected>-- All --</option>
                                                    <option value="@LumilotoUtils.ExportStatus.startUpload">Uploading</option>
                                                    <option value="@LumilotoUtils.ExportStatus.finishUpload">Wait approving</option>
                                                    <option value="@LumilotoUtils.ExportStatus.rejected">Rejected</option>
                                                    <option value="@LumilotoUtils.ExportStatus.deleted">Deleted</option>
                                                    <option value="@LumilotoUtils.ExportStatus.approved">Approved</option>
                                                    <option value="@LumilotoUtils.ExportStatus.addingMoney">Adding money</option>
                                                    <option value="@LumilotoUtils.ExportStatus.finishAddMoney">Finish add money</option>

                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <button type="button" class="btn btn-primary" onclick="search()" id="btnSearch">
                                                <i class="icon-search"></i> Search
                                            </button>
                                            <button type="button" class="btn btn-success" onclick="add()" id="btnAdd">
                                                <i class="icon-plus"></i> Add
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-12">
                <div class="card">
                    <div class="card-content">
                        <div class="col-md-12 table-responsive" style="padding-top: 10px">
                            @Html.Partial("_RewardReqGrid", Model)
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </section>
    <!-- // Basic form layout section end -->
</div>

<div class="modal fade text-xs-left" id="modal-add-service" tabindex="-1" role="dialog" aria-labelledby="myModalLabel17" style="display: none;" aria-hidden="true">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="modalLabelService">Reward Request Information</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <input type="hidden" id="id" />
            <div class="modal-body">
                <div class="row" id="div-info">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="wsName">From Date</label>
                            <input type="text" class="form-control fromDateTime" id="fromDate" name="fromDate" autocomplete="off">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="team1">To Date</label>
                            <input type="text" class="form-control toDateTime" id="toDate" name="toDate" autocomplete="off">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="wsdl">Game</label>
                            <select class="form-control" id="gameId" name="gameId">
                                <option value="1" selected>Lucky power</option>
                                <option value="2">Lucky day</option>
                                <option value="3">Lucky plus</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="wsdl">Name</label>
                            <input type="text" class="form-control" id="name" name="name">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="wsdl">Status</label>
                            <select class="form-control" type="text" id="status" name="status" disabled>
                                <option value="@LumilotoUtils.ExportStatus.draft" selected>Draft</option>
                                <option value="@LumilotoUtils.ExportStatus.startUpload">Uploading</option>
                                <option value="@LumilotoUtils.ExportStatus.finishUpload">Finish upload</option>
                                <option value="@LumilotoUtils.ExportStatus.rejected">Rejected</option>
                                <option value="@LumilotoUtils.ExportStatus.deleted">Deleted</option>
                                <option value="@LumilotoUtils.ExportStatus.approved">Approved</option>
                                <option value="@LumilotoUtils.ExportStatus.addingMoney">Adding money</option>
                                <option value="@LumilotoUtils.ExportStatus.finishAddMoney">Finish add money</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="row" id="div-action">
                    <div class="col-12">
                        <button type="button" id="btnAddUpdate" class="btn btn-outline-primary" onclick="addUpdateAction()">Create Request</button>
                        @*<button type="button" id="btnUpdate" class="btn btn-outline-primary" onclick="addUpdateAction()">Save Request</button>*@
                        <button type="button" id="btnGetData" class="btn btn-outline-success" onclick="viewData()">View data</button>
                        <button type="button" id="btnDeleteData" class="btn btn-outline-success" onclick="deleteData()">Delete data</button>
                        <button type="button" id="btnExportSystem" class="btn btn-outline-success" onclick="exportSystem()">Export system</button>
                        <button type="button" id="btnExportData" class="btn btn-outline-success" onclick="exportData()">Export Excel</button>
                        @*<form   enctype="multipart/form-data" method="POST" action="/Admin/RewardImportData" style="display: inline-block">*@
                        <label id="btnImportData" for="importFile" class="btn btn-outline-success" style="margin: 0 0 0 0;">Import data</label>
                        <input type="file" id="importFile" name="importFile" class="shifted" style="display: none" accept=".xls,.xlsx" onchange="importFile()" />
                        @*</form>*@
                        @*<button type="button" id="btnImportData" class="btn btn-outline-success" onclick="importFile()">Import data</button>
                            <input id="importFile" type="file" name="importFile" style="display: none;" />*@
                        <button type="button" id="btnSubmit" class="btn btn-outline-danger" onclick="submit()">Submit</button>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12" style="padding-top: 10px" id="div_detail">
                        @Html.Partial("_RewardDetailGrid", Model)
                    </div>
                </div>
                <div class="row" id="div-approve">
                    @if (!BaseController.UsingVsa() || ViewBag.Role == BaseController.RoleAdminSale)
                    {
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="wsdl">Note</label>
                                <input type="text" class="form-control" id="note" name="note" autocomplete="off">
                            </div>
                        </div>
                        <div class="col-md-12">
                            <button type="button" id="btnExportList" class="btn btn-outline-info" onclick="exportData()">Export</button>
                            <button type="button" id="btnApprove" class="btn btn-outline-success" onclick="approve()">Approve</button>
                            <button type="button" id="btnReject" class="btn btn-outline-danger" onclick="reject()">Reject</button>
                            <button type="button" class="btn grey btn-outline-secondary" data-dismiss="modal">Close</button>
                        </div>
                    }
                </div>
            </div>
            <div class="modal-footer">
                @*<button type="button" class="btn grey btn-outline-secondary" data-dismiss="modal">Close</button>
                    <button type="button" id="btnAdd" class="btn btn-outline-primary" onclick="addUpdateAction()">Add</button>
                    <button type="button" id="btnUpdate" class="btn btn-outline-primary" onclick="addUpdateAction()">Save Info</button>*@

            </div>
        </div>
    </div>
</div>



@section Scripts {
    <script>

        $(document).ready(function () {

            $(".fromDate").datetimepicker({
                format: "DD/MM/YYYY",
                defaultDate: moment().add(-30, 'days')
            });

            $(".toDate").datetimepicker({
                format: "DD/MM/YYYY",
                defaultDate: moment().endOf('day')
            });

            $(".fromDateTime").datetimepicker({
                format: "DD/MM/YYYY HH:mm:ss",
                defaultDate: moment().add(-30, 'days')
            });

            $(".toDateTime").datetimepicker({
                format: "DD/MM/YYYY  HH:mm:ss",
                defaultDate: moment().endOf('day')
            });

            search();
        });

        var tableReq;
        var tableDetail;

        function resetTableReq() {
            tableReq = $("#grid_reward").DataTable({});
        }

        function resetTableDetail() {
            tableDetail = $("#grid_reward_detail").DataTable({});
        }

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



        // reward request
        function search() {
            console.log("Search");
            startSpinner('btnSearch');
            clearTable(tableReq);
            $.ajax({
                url: "/Admin/RewardReqSearch",
                data: {
                    fromDate: $("#fromDateSearch").val(),
                    toDate: $("#toDateSearch").val(),
                    gameId: $("#gameSearch").val(),
                    status: $("#statusSearch").val()
                },
                type: "POST",
                success: function (data) {
                    stopSpinner('btnSearch');
                    console.log(data);
                    if (data.error != "0" && data.error != "1") {
                        showModal('message-dialog');
                        $('#message-content').html(data.content.split("\n").join("<br />"));
                    } else {
                        updateGridData(data.data.listLotoExportGet);
                        resetTableReq();
                    }
                },
                error: function (data) {
                    stopSpinner('btnSearch');
                    console.log(data.error);
                }
            })
        }

        function addUpdateAction() {

            // Checking whether FormData is available in browser
            if (window.FormData !== undefined) {
                // Create FormData object
                var formData = new FormData();
                console.log(moment($("#ngaykichhoatthe").val(), "DD/MM/YYYY HH:mm:ss"));
                // Adding one more key to FormData object
                formData.append('id', $("#id").val());
                formData.append('name', $("#name").val());
                formData.append('fromDate', $("#fromDate").val());
                formData.append('toDate', $("#toDate").val());
                formData.append('gameId', $("#gameId").val());
                //formData.append('ngaykichhoatthe', moment($("#ngaykichhoatthe").val(), "DD/MM/YYYY HH:mm:ss").format("YYYY-MM-DD HH:mm:ss"));
                formData.append('status', $("#status").val());
                formData.append('action', 'add');

                $.ajax({
                    url: '/Admin/RewardReqAddUpdate',
                    type: "POST",
                    contentType: false, // Not to set any content header
                    processData: false, // Not to process data
                    data: formData,
                    success: function (result) {
                        if (result.error == '0') {
                            Swal.fire("Success!", "Success!", "success").
                                then((result) => {
                                    hideModal("modal-add-service");
                                    //search();
                                });
                            //alert('Import success: ' + result.content);
                        } else {
                            Swal.fire("Failed!", result.content, "error");
                            //alert('Import failed: ' + result.content);
                        }
                    },
                    error: function (err) {
                        swal("Failed!", err.statusText, "error");
                        //alert(err.statusText);
                    }
                });
            } else {
                Swal.fire("Failed!", "FormData is not supported.", "error");
                //alert("FormData is not supported.");
            }
        }

        function add() {
            // clear data
            $("#id").val("");
            $("#fromDate").val(moment().startOf('month').format("DD/MM/YYYY HH:mm:ss"));
            $("#toDate").val(moment().endOf('month').format("DD/MM/YYYY HH:mm:ss"));
            $("#name").val("");
            $("#note").val("");
            $("#status").val("@LumilotoUtils.ExportStatus.draft");
            // button
            $("#btnAddUpdate").show();
            $("#btnGetData").hide();
            $("#btnExportData").hide();
            $("#btnExportSystem").show();
            $("#btnSubmit").hide();
            $("#btnImportData").hide();
            $("#btnDeleteData").hide();
            // div
            $("#div-approve").hide();
            // clear table
            clearTable(tableDetail);
            resetTableDetail();
            $("#div_detail").hide();
            // show modal
            showModal("modal-add-service");
        }

        function edit(id) {
            console.log(id);
            $("#btnAddUpdate").hide();
            $("#btnGetData").hide();
            $("#btnImportData").hide();
            $("#btnSubmit").hide();
            $("#btnDeleteData").hide();
            $("#btnExportData").hide();
            $("#btnExportSystem").hide();
            $("#btnApprove").hide();
            $("#btnReject").hide();
            $("#div_detail").hide();
            // get service info
            $.ajax({
                url: "/Admin/RewardReqGetById",
                data: {
                    id: id
                },
                type: "POST",
                success: function (data) {
                    console.log(data);
                    if (data.error != "0" && data.error != "1") {
                        setTimeout(function () {
                            showModal('message-dialog');
                            $('#message-content').html(data.content.split("\n").join("<br />"));
                        }, 1000);
                    } else {
                        var customer = data.data;
                        console.log("status : " + customer.status);
                        // change data
                        $("#id").val(id);
                        $("#name").val(customer.name);
                        $("#fromDate").val(customer.fromDate);
                        $("#toDate").val(customer.toDate);
                        $("#gameId").val(customer.gameId);
                        $("#status").val(customer.status);
                        $("#note").val(customer.note);

                        if (customer.status == "@LumilotoUtils.ExportStatus.draft") {
                            $("#btnGetData").hide();
                            $("#btnImportData").show();
                            $("#btnExportSystem").show();
                            $("#div_detail").hide();
                        } else {
                            $("#div_detail").show();
                        }
                        if (customer.status == "@LumilotoUtils.ExportStatus.startUpload") {
                            $("#btnGetData").show();
                            $("#btnDeleteData").show();
                            $("#btnSubmit").show();
                            $("#btnImportData").show();
                            $("#btnExportSystem").show();
                            $("#div_detail").show();
                        }
                        if (customer.status == "@LumilotoUtils.ExportStatus.finishUpload") {
                            $("#div_detail").show();
                            $("#btnExportData").show();
                        }
                        if (customer.status != "@LumilotoUtils.ExportStatus.approved" && customer.status != "@LumilotoUtils.ExportStatus.rejected"
                        && customer.status != "@LumilotoUtils.ExportStatus.addingMoney" && customer.status != "@LumilotoUtils.ExportStatus.finishAddMoney") {
                            $("#btnApprove").show();
                            $("#btnReject").show();
                        }
                        //$("#btnUpdate").show();
                        //search();

                        viewData();

                        // show modal
                        showModal("modal-add-service");
                    }
                },
                error: function (data) {
                    console.log(data.error);
                }
            })
        }

        function updateStatus(status) {
            var id = $("#id").val();
            console.log(id);
            // get service info
            $.ajax({
                url: "/Admin/RewardReqAddUpdate",
                data: {
                    exportId: id,
                    type: status,
                    action: 'update'
                },
                type: "POST",
                success: function (data) {
                    console.log(data);
                    if (data.error != "0") {
                        setTimeout(function () {
                            showModal('message-dialog');
                            $('#message-content').html(data.content.split("\n").join("<br />"));
                        }, 1000);
                    } else {
                        if (status == '@LumilotoUtils.ExportActionType.deleted') {
                            Swal.fire('Removed!', '', 'success').then((result) => {
                                hideModal("modal-add-service");
                                search();
                            });
                        } else if (status == '@LumilotoUtils.ExportActionType.deleteData') {
                            Swal.fire('Data deleted!', '', 'success').then((result) => {
                                search();
                            });
                        } else if (status == '@LumilotoUtils.ExportActionType.finishUpload') {
                            edit(id);
                            Swal.fire('Request submited!', '', 'success').then((result) => {
                                search();
                            });
                        }
                    }
                },
                error: function (data) {
                    console.log(data.error);
                }
            })
        }

        function process(status) {
            var id = $("#id").val();
            console.log(id);
            // get service info
            $.ajax({
                url: "/Admin/RewardReqProcess",
                data: {
                    exportId: id,
                    type: status
                },
                type: "POST",
                success: function (data) {
                    console.log(data);
                    if (data.error != "0") {
                        setTimeout(function () {
                            showModal('message-dialog');
                            $('#message-content').html(data.content.split("\n").join("<br />"));
                        }, 1000);
                    } else {
                        if (status == '@LumilotoUtils.ExportActionType.rejected') {
                            Swal.fire('Request rejected!', '', 'success').then((result) => {
                                hideModal("modal-add-service");
                                //search();
                            });
                        } else if (status == '@LumilotoUtils.ExportActionType.approved') {
                            Swal.fire('Request approved!', '', 'success').then((result) => {
                                hideModal("modal-add-service");
                                //search();
                            });
                        }
                    }
                },
                error: function (data) {
                    console.log(data.error);
                }
            })
        }

        $('#modal-add-service').on('hidden.bs.modal', function () {
            search();
        });

        function updateGridData(val) {
            console.log(val);
            $("#gridbody").html("");
            var html = "";
            if (val != undefined) {
                for (var i = 0; i < val.length; i++) {
                    var service = val[i];
                    html += "<tr>";
                    html += "<td scope='row'>" + (i + 1) + "</td>";
                    html += "<td class='text-center'><span class='fa fa-edit cursor-pointer' onclick='edit(\"" + service.id + "\")'></span> "
                        + (service.status == '1' || service.status == '0' ? "<span class='fa fa-remove  text-danger cursor-pointer' onclick='remove(\"" + service.id + "\")'></span></td >" : "");
                        //+ (service.status == '2' ? "<span class='fa fa-play text-primary cursor-pointer' onclick='process(\"" + service.id + "\")'></span></td >" : "");
                    //html += "<td class='text-left'>" + service.code + "</td>";
                    html += "<td class='text-left'>" + service.name + "</td>";
                    html += "<td class='text-left'>" + service.fromDate + "</td>";
                    html += "<td class='text-left'>" + service.toDate + "</td>";
                    html += "<td class='text-left'>" + GetGameName(service.gameId) + "</td>";
                    html += "<td class='text-left'>" + service.createUsers + "</td>";
                    html += "<td class='text-left'>" + service.createDate + "</td>";
                    html += "<td class='text-center'>" + GetStatusExportName(service.status) + "</td>";
                    html += "<td class='text-right'>" + formatNumber(service.moneySystem) + "</td>";
                    html += "<td class='text-right'>" + formatNumber(service.moneyImport) + "</td>";
                    html += "<td class='text-right'>" + formatNumber(service.moneyNotImport) + "</td>";
                    html += "<td class='text-right'>" + formatNumber(service.moneyNotSys) + "</td>";
                    html += "<td class='text-left'>" + service.acceptUsers + "</td>";
                    html += "<td class='text-left'>" + service.acceptDate + "</td>";
                    html += "</tr>";
                }
            }
            $("#gridbody").html(html);
        }

        function reject() {
            Swal.fire({
                title: 'Do you want to reject this request?',
                showDenyButton: false,
                showCancelButton: true,
                confirmButtonText: `Yes`,
                denyButtonText: `No`,
            }).then((result) => {
                /* Read more about isConfirmed, isDenied below */
                if (result.isConfirmed) {
                    //Swal.fire('Saved!', '', 'success')
                    process('@LumilotoUtils.ExportActionType.rejected');
                    //edit($("#id").val());
                    //Swal.fire('Data deleted!', '', 'success')
                } else if (result.isDenied) {
                    //Swal.fire('Changes are not saved', '', 'info')
                }
            })
        }

        function approve() {
            Swal.fire({
                title: 'Do you want to approve this request?',
                showDenyButton: false,
                showCancelButton: true,
                confirmButtonText: `Yes`,
                denyButtonText: `No`,
            }).then((result) => {
                /* Read more about isConfirmed, isDenied below */
                if (result.isConfirmed) {
                    //Swal.fire('Saved!', '', 'success')
                    process('@LumilotoUtils.ExportActionType.approved');
                    //edit($("#id").val());
                    //Swal.fire('Data deleted!', '', 'success')
                } else if (result.isDenied) {
                    //Swal.fire('Changes are not saved', '', 'info')
                }
            })
        }

        function deleteData() {
            Swal.fire({
                title: 'Do you want to delete data of this request?',
                showDenyButton: false,
                showCancelButton: true,
                confirmButtonText: `Yes`,
                denyButtonText: `No`,
            }).then((result) => {
                /* Read more about isConfirmed, isDenied below */
                if (result.isConfirmed) {
                    //Swal.fire('Saved!', '', 'success')
                    updateStatus('@LumilotoUtils.ExportActionType.deleteData');
                    edit($("#id").val());
                    //Swal.fire('Data deleted!', '', 'success')
                } else if (result.isDenied) {
                    //Swal.fire('Changes are not saved', '', 'info')
                }
            })
        }

        function remove(id) {
            console.log("remove "  + id);
            $("#id").val(id);
            Swal.fire({
                title: 'Do you want to remove this request?',
                showDenyButton: false,
                showCancelButton: true,
                confirmButtonText: `Yes`,
                denyButtonText: `No`,
            }).then((result) => {
                /* Read more about isConfirmed, isDenied below */
                if (result.isConfirmed) {
                    //Swal.fire('Saved!', '', 'success')
                    updateStatus('@LumilotoUtils.ExportActionType.deleted');
                    //Swal.fire('Removed!', '', 'success')
                } else if (result.isDenied) {
                    //Swal.fire('Changes are not saved', '', 'info')
                }
            })
        }

        function submit() {
            Swal.fire({
                title: 'Do you want to submit this request?',
                showDenyButton: false,
                showCancelButton: true,
                confirmButtonText: `Yes`,
                denyButtonText: `No`,
            }).then((result) => {
                /* Read more about isConfirmed, isDenied below */
                if (result.isConfirmed) {
                    //Swal.fire('Saved!', '', 'success')
                    updateStatus('@LumilotoUtils.ExportActionType.finishUpload');
                    edit($("#id").val());
                    //Swal.fire('Request submited!', '', 'success')
                } else if (result.isDenied) {
                    //Swal.fire('Changes are not saved', '', 'info')
                }
            })
        }


        function importFile() {
            var id = $("#id").val();
            console.log(id);
            // get service info
            var formData = new FormData();

            var importFile = $("#importFile").get(0);
            if (importFile.files.length > 0) {
                formData.append("importFile", importFile.files[0]);
                formData.append("exportId", $("#id").val());

                fetch("/Admin/RewardImportData", {
                    method: "POST",
                    body: formData
                })
                    .then(response => response.json())
                    .then(data => {
                        console.log(data);
                        if (data.error != "0") {
                            setTimeout(function () {
                                showModal('message-dialog');
                                $('#message-content').html(data.content.split("\n").join("<br />"));
                            }, 1000);
                        } else {
                            $("#importFile").val("");
                            edit($("#id").val());
                        }
                    });

                //$.ajax({
                //    url: "/Admin/RewardImportData",
                //    data: formData,
                //    type: "POST",
                //    success: function (data) {
                //        console.log(data);
                //        if (data.error != "0") {
                //            setTimeout(function () {
                //                showModal('message-dialog');
                //                $('#message-content').html(data.content.split("\n").join("<br />"));
                //            }, 1000);
                //        } else {
                //            viewData();
                //        }
                //    },
                //    error: function (data) {
                //        console.log(data.error);
                //    }
                //});
            }
        }

        function exportSystem() {
            var id = $("#id").val();
            console.log(id);
            // get service info
            $.ajax({
                url: "/Admin/ExportWinner",
                data: {
                    gameId: $("#gameId").val(),
                    fromDate: $("#fromDate").val(),
                    toDate: $("#toDate").val(),
                    isPayOnline: "0"
                },
                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) {
                    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) {
                    console.log(data.error);
                }
            })
        }

        function exportData() {
            var id = $("#id").val();
            console.log(id);
            // get service info
            $.ajax({
                url: "/Admin/ExportWinner",
                data: {
                    exportId: id,
                    type: "2"
                },
                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) {
                    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) {
                    console.log(data.error);
                }
            })
        }

    </script>

    <script>
        function viewData() {
            console.log("Search data");
            startSpinner('btnViewData');
            var exportId = $("#id").val();
            console.log("exportId " + exportId);
            //clearTable(tableDetail);
            $.ajax({
                url: "/Admin/RewardGetListWinner",
                data: {
                    exportId: $("#id").val(),
                    type: "2"
                },
                type: "POST",
                success: function (data) {
                    stopSpinner('btnViewData');
                    console.log(data);
                    if (data.error != "0" && data.error != "1") {
                        showModal('message-dialog');
                        $('#message-content').html(data.content.split("\n").join("<br />"));
                    } else {
                        updateGridDataDetail(data.data.listLotoExportData);
                        //resetTableDetail();
                    }
                },
                error: function (data) {
                    stopSpinner('btnViewData');
                    console.log(data.error);
                }
            })
        }

        function updateGridDataDetail(val) {
            console.log(val);
            $("#gridbody_detail").html("");
            var html = "";
            if (val != undefined) {
                for (var i = 0; i < val.length; i++) {
                    var service = val[i];
                    //<th scope="col" class="text-center">Phone</th>
                    //    <th scope="col" class="text-center">Game</th>
                    //    <th scope="col" class="text-center">Term</th>
                    //    <th scope="col" class="text-center">Date</th>
                    //    <th scope="col" class="text-center">Prize</th>
                    //    <th scope="col" class="text-center">Paid</th>
                    html += "<tr>";
                    html += "<td scope='row'>" + (i + 1) + "</td>";
                    html += "<td class='text-left'>" + service.msisdn + "</td>";
                    html += "<td class='text-left'>" + GetGameName(service.gameId) + "</td>";
                    html += "<td class='text-left'>" + service.randomId + "</td>";
                    html += "<td class='text-left'>" + service.date + "</td>";
                    html += "<td class='text-left'>" + service.winnerName + "</td>";
                    html += "<td class='text-left'>" + formatNumber(service.money) + "</td>";
                    html += "<td class='text-left'>" + (service.isPay == '0' ? 'Not yet' : 'Already') + "</td>";
                    html += "</tr>";
                }
            }
            $("#gridbody_detail").html(html);
        }
    </script>
}