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

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

@model TrafficDayRes
@{

}

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

<div class="content-header row">
    <div class="content-header-left col-md-6 col-xs-12 mb-1">
        <h2 class="content-header-title">Ticket Buying Trans</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="#">Ticket Buying Trans</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>Phone number</label>
                                                <div class='input-group'>
                                                    <input type="text" class="form-control" id="msisdn" name="msisdn">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-3 col-sm-4 col-6">
                                            <div class="form-group">
                                                <label>Buying from date</label>
                                                <div class='input-group'>
                                                    <input type="text" class="form-control fromDate" id="fromDate" name="fromDate">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-3 col-sm-4 col-6">
                                            <div class="form-group">
                                                <label>Buying to date</label>
                                                <div class='input-group'>
                                                    <input type="text" class="form-control toDate" id="toDate" name="toDate">
                                                </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="gameId" name="gameId">
                                                    <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>
                                    <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="exportExcel()" id="btnExportExcel">
                                                <i class="icon-export"></i> Export Excel
                                            </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("_TradeList", Model)
                        </div>
                    </div>
                </div>
            </div>

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


@section Scripts {
    <script>

        var tableDetail;

        $(document).ready(function () {

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

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

            //$('#grid_reward_detail thead tr').clone(true).appendTo('#grid_reward_detail thead');

            //$('#grid_reward_detail thead tr:eq(1) th').each(function (i) {
            //    var title = $(this).text();
            //    if (title != undefined && title != "") {
            //        $(this).html('<input type="text" placeholder="Search ' + title + '" />');

            //        $('input', this).on('keyup change', function () {
            //            if (tableDetail.column(i).search() !== this.value) {
            //                tableDetail
            //                    .column(i)
            //                    .search(this.value)
            //                    .draw();
            //            }
            //        });
            //    }
            //});

            //search();
        });



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

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

        function search() {
            console.log("Search data");
            startSpinner('btnSearch');
            clearTable(tableDetail);
            $.ajax({
                url: "/Admin/TradeSearch",
                data: {
                    msisdn: $("#msisdn").val(),
                    gameId: $("#gameId").val(),
                    fromDate: $("#fromDate").val(),
                    toDate: $("#toDate").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 {
                        updateGridDataDetail(data.data.listTicketInfo);
                        resetTableDetail();
                    }
                },
                error: function (data) {
                    stopSpinner('btnSearch');
                    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];
                    html += "<tr>";
                    html += "<td scope='row'>" + (i + 1) + "</td>";
                    html += "<td class='text-center'>" + service.date + "</td>";
                    html += "<td class='text-left'>" + service.billCode + "</td>";
                    html += "<td class='text-left'>" + service.subId + "</td>";
                    html += "<td class='text-left'>" + service.users + "</td>";
                    html += "<td class='text-center'>" + GetGameName(service.gameId) + "</td>";
                    html += "<td class='text-left'>" + service.randomId + "</td>";
                    html += "<td class='text-right'>" + formatNumber(service.money) + "</td>";
                    html += "<td class='text-left'>" + TicketVisible(service.ticket) + "</td>"; 
                    html += "</tr>";
                }
            }
            $("#gridbody_detail").html(html);
        }

        function exportExcel() {
            console.log("Export data");
            startSpinner('btnExportExcel');
            $.ajax({
                url: "/Admin/TradeExport",
                data: {
                    msisdn: $("#msisdn").val(),
                    gameId: $("#gameId").val(),
                    fromDate: $("#fromDate").val(),
                    toDate: $("#toDate").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.error);
                }
            })
        }
    </script>
}