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

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

@model ExportGetListRes
@{
    string gameId = ViewBag.gameId;
}

<style>
    img {
        max-width: 100%;
    }
</style>
<input type="hidden" value="@gameId" id="gameId" />
<div class="content-header row">
    <div class="content-header-left col-md-6 col-xs-12 mb-1">
        <h2 class="content-header-title">Results @(gameId== LumilotoUtils.GameIds.LUCKY_POWER ? "Lucky Power" : gameId == LumilotoUtils.GameIds.LUCKY_DAY ? "Lucky Day" : "Lucky Plus")</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="/Admin/Index">Admin</a>
                </li>
                <li class="breadcrumb-item">
                    <a href="#">Results</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="expand"><i class="icon-expand2"></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>
                                        @if (gameId == LumilotoUtils.GameIds.LUCKY_POWER)
                                        {
                                            <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.GetTermStatus.available">Opening for ticket</option>
                                                        <option value="@LumilotoUtils.GetTermStatus.waitResult,@LumilotoUtils.GetTermStatus.rejected">Need submit result</option>
                                                        <option value="@LumilotoUtils.GetTermStatus.waitApproved">Wait for approving result</option>
                                                        <option value="@LumilotoUtils.GetTermStatus.accepted">Result accepted</option>
                                                        <option value="@LumilotoUtils.GetTermStatus.rejected">Result rejected</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-warning" onclick="exportData()" id="btnExport">
                                                <i class="icon-call-out"></i> Export
                                            </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("_Result" + gameId, 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-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="modalLabelService">Lucky Power Result 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">Game</label>
                            <select class="form-control" id="gameId" name="gameId">
                                <option value="@LumilotoUtils.GameIds.LUCKY_POWER" selected>Lucky Power</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="date">Date Submit</label>
                            <input type="text" class="form-control fromDateTime" id="date" name="date" autocomplete="off" readonly>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="wsdl">Term</label>
                            <select type="text" class="form-control" id="randomId" name="randomId" onchange="selectTerm();"></select>
                            <input type="text" class="form-control" id="randomIdValue" name="randomIdValue" readonly />
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="date">Date Start Term</label>
                            <input type="text" class="form-control fromDateTime" id="dateStart" name="dateStart" autocomplete="off" readonly>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="date">Date End Term</label>
                            <input type="text" class="form-control fromDateTime" id="dateEnd" name="dateEnd" autocomplete="off" readonly>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="date">Date Result Term</label>
                            <input type="text" class="form-control fromDateTime" id="dateRandom" name="dateRandom" autocomplete="off" readonly>
                        </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.GetTermStatus.available">Opening for ticket</option>
                                <option value="@LumilotoUtils.GetTermStatus.waitResult">Need submit result</option>
                                <option value="@LumilotoUtils.GetTermStatus.waitApproved">Wait for approving result</option>
                                <option value="@LumilotoUtils.GetTermStatus.accepted">Result accepted</option>
                                <option value="@LumilotoUtils.GetTermStatus.rejected">Result rejected</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-12" id="div-result">
                        <div class="form-group">
                            <label for="wsdl">Result</label>
                            <input type="hidden" name="result" id="result" />
                            <div class="input-group">
                                @for (int i = 0; i < 6; i++)
                                {
                                    <input type="number" class="form-control text-primary" id="result-@i" name="result-@i" max="55" maxlength="2" min="0">
                                }
                                <input type="number" class="form-control text-danger" id="result-6" name="result-6" max="55" maxlength="2" min="0" />
                            </div>
                        </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()">Submit result</button>
                        <button type="button" class="btn grey btn-outline-secondary" data-dismiss="modal">Close</button>
                    </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="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 class="row">
                    <div class="col-12" style="padding-top: 10px">
                        Change history
                    </div>
                    <div class="col-12" style="padding-top: 10px">
                        @Html.Partial("_ResultHis")
                    </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").DataTable({});
        }

        function resetTableDetail() {
            tableDetail = $("#grid_his").DataTable({
                paging: 0,
                searching: false,
                search: false
            });
        }

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



        // result terms
        function search() {
            console.log("Search");
            startSpinner('btnSearch');
            clearTable(tableReq);
            var gameId = $("#gameId").val();
            $.ajax({
                url: "/Admin/ResultsSearch",
                data: {
                    fromDate: $("#fromDateSearch").val(),
                    toDate: $("#toDateSearch").val(),
                    gameId: gameId,
                    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.listTerm);
                        resetTableReq();
                    }
                },
                error: function (data) {
                    stopSpinner('btnSearch');
                    console.log(data.error);
                }
            })
        }

        function addUpdateAction() {

            // Checking whether FormData is available in browser
            if (window.FormData !== undefined) {
                var result = $("#result-0").val() + "$" + $("#result-1").val() + "$" + $("#result-2").val() + "$" + $("#result-3").val() + "$" + $("#result-4").val()
                    + "$" + $("#result-5").val() + "|" + $("#result-6").val();
                // Create FormData object
                var formData = new FormData();
                // Adding one more key to FormData object
                formData.append('id', $("#id").val());
                formData.append('randomId', $("#id").val());
                formData.append('result', result);
                formData.append('note', $("#note").val());
                formData.append('action', "0");

                $.ajax({
                    url: '/Admin/ResultsAddUpdate',
                    type: "POST",
                    contentType: false, // Not to set any content header
                    processData: false, // Not to process data
                    data: formData,
                    success: function (result) {
                        console.log("result: ");
                        console.log(result);
                        if (result.error == '0') {
                            Swal.fire("Success!", "Success!", "success").
                                then((result) => {
                                    hideModal("modal-add-service");
                                    search();
                                });
                        } else {
                            Swal.fire("Failed!", result.content, "error");
                            //alert('Import failed: ' + result.content);
                        }
                    },
                    error: function (err) {
                        Swal.fire("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("");
            $("#date").val("");
            $("#note").val("");
            $("#status").val("@LumilotoUtils.LuckyPowerResultStatus.waitApprove");
            $("#result").val("");
            $("#result-0").val("");
            $("#result-1").val("");
            $("#result-2").val("");
            $("#result-3").val("");
            $("#result-4").val("");
            $("#result-5").val("");
            $("#result-6").val("");
            $("#randomIdValue").hide();
            // button
            $("#btnAddUpdate").show();
            // div
            $("#div-approve").hide();
            $("#grid_his").hide();
            // clear table
            clearTable(tableDetail);
            // load term need result
            loadTermNeedResult();
            // show modal
            showModal("modal-add-service");
        }

        function edit(id) {
            console.log(id);
            $("#btnApprove").hide();
            $("#btnReject").hide();
            $("#randomId").hide();
            // div
            $("#div-action").hide();
            $("#div-approve").hide();
            $("#div-result").show();
            //
            $("#result").val("");
            $("#result-0").val("");
            $("#result-1").val("");
            $("#result-2").val("");
            $("#result-3").val("");
            $("#result-4").val("");
            $("#result-5").val("");
            $("#result-6").val("");
            // get service info
            $.ajax({
                url: "/Admin/ResultsGetById",
                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(customer);
                        // change data
                        $("#id").val(id);
                        $("#randomIdValue").val(id);
                        $("#date").val(customer.date);
                        $("#gameId").val(customer.gameId);
                        $("#status").val(customer.status);
                        $("#result").val(customer.result);
                        $("#note").val(customer.note);
                        $("#dateStart").val(customer.date_start);
                        $("#dateEnd").val(customer.date_end);
                        $("#dateRandom").val(customer.date_random);

                        // check status
                        if (customer.status == @LumilotoUtils.GetTermStatus.available) {
                            $("#div-result").hide();
                        } else if (customer.status == @LumilotoUtils.GetTermStatus.waitResult || customer.status == @LumilotoUtils.GetTermStatus.rejected) {
                            $("#div-action").show();
                        } else if (customer.status == @LumilotoUtils.GetTermStatus.waitApproved) {
                            $("#div-approve").show();

                            $("#btnApprove").show();
                            $("#btnReject").show();
                        }

                        // result
                        var rs = customer.result.split("|");
                        var rs2 = rs[0].split("$");
                        rs2.forEach(function (item, index) {
                            console.log(index);
                            $("#result-" + index).val(rs2[index]);
                        });
                        $("#result-6").val(rs[1]);

                        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/ResultsUpdateStatus",
                data: {
                    randomId: id,
                    action: status,
                    note: $("#note").val()
                },
                type: "POST",
                success: function (data) {
                    console.log(data);
                    if (data.error != "0") {
                        Swal.fire('Error!', data.content, 'error');
                    } else {
                        if (status == '@LumilotoUtils.LuckyPowerResultStatus.rejected') {
                            Swal.fire('Result rejected!', '', 'success').then((result) => {
                                hideModal("modal-add-service");
                                search();
                            });
                        } else if (status == '@LumilotoUtils.LuckyPowerResultStatus.approved') {
                            Swal.fire('Result approved!', '', 'success').then((result) => {
                                hideModal("modal-add-service");
                                search();
                            });
                        }
                    }
                },
                error: function (data) {
                    console.log(data.error);
                }
            })
        }

        function updateGridData(val) {
            console.log(val);
            $("#gridbody").html("");
            var html = "";
            var gameId = $("#gameId").val();
            if (val != undefined) {
                if (gameId == "@LumilotoUtils.GameIds.LUCKY_POWER") {
                    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></td >";
                        html += "<td class='text-left'>" + GetGameName(service.gameId) + "</td>";
                        html += "<td class='text-left'>" + service.date_end + "</td>";
                        html += "<td class='text-left'>" + service.id + "</td>";
                        html += "<td class='text-left'>" + LuckyPowerResultVisible(service.result) + "</td>";
                        html += "<td class='text-center'>" + GetStatusResultName(service.status) + "</td>";
                        html += "</tr>";
                    }
                } else if (gameId == "@LumilotoUtils.GameIds.LUCKY_DAY") {
                    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-left'>" + GetGameName(service.gameId) + "</td>";
                        html += "<td class='text-left'>" + service.date_end + "</td>";
                        html += "<td class='text-left'>" + service.id + "</td>";
                        html += "<td class='text-left'>" + LuckyDayResultVisible(service.result) + "</td>";
                        html += "</tr>";
                    }
                } else {
                    // lucky plus
                    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-left'>" + GetGameName(service.gameId) + "</td>";
                        html += "<td class='text-left'>" + service.date_end + "</td>";
                        html += "<td class='text-left'>" + service.id + "</td>";
                        html += "<td class='text-left'>" + LuckyPlusResultVisible(service.result) + "</td>";
                        html += "</tr>";
                    }
                }
            }
            $("#gridbody").html(html);
        }

        function reject() {
            Swal.fire({
                title: 'Do you want to reject this result?',
                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.LuckyPowerResultStatus.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 result?',
                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.LuckyPowerResultStatus.approved');
                    //edit($("#id").val());
                    //Swal.fire('Data deleted!', '', 'success')
                } else if (result.isDenied) {
                    //Swal.fire('Changes are not saved', '', 'info')
                }
            })
        }

        function exportData() {
            var gameId = $("#gameId").val();
            console.log(gameId);
            // get service info
            $.ajax({
                url: "/Admin/ResultsExport",
                data: {
                    fromDate: $("#fromDateSearch").val(),
                    toDate: $("#toDateSearch").val(),
                    gameId: gameId,
                    status: $("#statusSearch").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) {
                    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 loadTermNeedResult() {
            console.log("loadTermNeedResult");
            $("$randomId").html("");
            $.ajax({
                url: "/Admin/ResultsSearch",
                data: {
                    gameId: "1",
                    status: "2,4",
                    rowsOnPage: "1000",
                    seqPage: "1"
                },
                type: "POST",
                success: function (data) {
                    console.log(data);
                    if (data.error != "0" && data.error != "1") {
                        showModal('message-dialog');
                        $('#message-content').html(data.content.split("\n").join("<br />"));
                    } else {
                        if (data.data.listTerm != null) {
                            var listTerm = data.data.listTerm;
                            for (let i = 0; i < listTerm; i++) {
                                $("#randomId").html.append('<option value="' + listTerm[i].randomId + (i == 0 ? ' selected' : '') + '">' + listTerm[i].randomId + '</option>');
                            }
                        }
                    }
                },
                error: function (data) {
                    stopSpinner('btnSearch');
                    console.log(data.error);
                }
            })
        }


        function viewData() {
            console.log("Search his");
            var randomId = $("#id").val();
            console.log("randomId " + randomId);
            clearTable(tableDetail);
            $.ajax({
                url: "/Admin/ResultsHistoryLoad",
                data: {
                    randomId: randomId
                },
                type: "POST",
                success: function (data) {
                    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.listHis);
                        resetTableDetail();
                    }
                },
                error: function (data) {
                    console.log(data.error);
                }
            })
        }

        function updateGridDataDetail(val) {
            console.log(val);
            $("#gridbody_his").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-left'>" + service.date + "</td>";
                    //html += "<td class='text-left'>" + service.randomId + "</td>";
                    html += "<td class='text-left'>" + LuckyPowerResultVisible(service.result) + "</td>";
                    html += "<td class='text-left'>" + service.usersName + "</td>";
                    html += "<td class='text-left'>" + service.action + "</td>";
                    html += "<td class='text-left'>" + service.note + "</td>";
                    html += "</tr>";
                }
            }
            $("#gridbody_his").html(html);
        }
    </script>
}