@{
    ViewData["Title"] = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@using LotteryWebApp.Languages;
@using LotteryWebApp.Controllers;
@using LotteryWebApp.Common;

@model History_ViewModel


<div class="app-content content" style="position:relative">

    <div class="card-title text-center ">
        <div class="news-button-header-container" style="text-align: start; margin: 0 10px;">
            @await Component.InvokeAsync("SmallHeader", new { title = Lang.history.ToUpper() })
        </div>
    </div>

    <div class="content-wrapper buy-ticket-container">
        <div class="content-body">
            <section class="flexbox-container">

                <div class="wrapper-style-3">
                    <div class="row tabs-style-3">
                        <div class="col-4 tab-style-3" style="padding:0px; text-align: center;">
                            <input type="radio" name="css-tabs" id="tab-style-3-1" class="tab-switch-style-3" @(Model.winType == Constants.NOT_DRAW_CODE ? "checked" : "")>
                            <label for="tab-style-3-1" class="tab-label-style-3" onclick="actionButton_Click('/History?gameId=@Model.gameId&winType=@Constants.NOT_DRAW_CODE')">
                                <a class="@(Model.gameId == Constants.GameId.Direct4D ? "active-tab" : "")">
                                    @Lang.not_draw
                                </a>
                            </label>
                        </div>

                        <div class="col-4 tab-style-3" style="padding:0px; text-align: center;">
                            <input type="radio" name="css-tabs" id="tab-style-3-2" class="tab-switch-style-3" @(Model.winType == Constants.WIN_CODE ? "checked" : "")>
                            <label for="tab-style-3-2" class="tab-label-style-3" onclick="actionButton_Click('/History?gameId=@Model.gameId&winType=@Constants.WIN_CODE')">
                                <a class="@(Model.gameId == Constants.GameId.Direct3D ? "active-tab" : "")">@Lang.win</a>
                            </label>
                        </div>
                        <div class="col-4 tab-style-3" style="padding:0px; text-align: center;">
                            <input type="radio" name="css-tabs" id="tab-style-3-3" class="tab-switch-style-3" @(Model.winType == Constants.DRAWN_CODE ? "checked" : "")>
                            <label for="tab-style-3-3" class="tab-label-style-3" onclick="actionButton_Click('/History?gameId=@Model.gameId&winType=@Constants.DRAWN_CODE')">
                                <a class="@(Model.gameId == Constants.GameId.Direct2D ? "active-tab" : "")">@Lang.not_win</a>
                            </label>
                        </div>

                    </div>
                </div>

                <div class="row  tabs-style-2" style=" ">
                    <a class="col-4 tab-style-2" href="@ViewBag.MyConfig.MyValue/History?gameId=@Constants.GameId.Direct4D&winType=@Model.winType">
                        @* <input type="radio" id="tab-1" name="tab-group-1" @(Model.gameId == Constants.GameId.Direct4D ? "checked" : "")> *@
                        <label for="tab-1" class="@(Model.gameId == Constants.GameId.Direct4D ? "tab-label-style-2 active-tab" : "tab-label-style-2")">
                            <span>
                                4D
                            </span>
                        </label>
                    </a>

                    <a class="col-4  tab-style-2" href="@ViewBag.MyConfig.MyValue/History?gameId=@Constants.GameId.Direct3D&winType=@Model.winType">
                        @* <input type="radio" id="tab-2" name="tab-group-1" @(Model.gameId == Constants.GameId.Direct3D ? "checked" : "")> *@
                        <label for="tab-2" class="@(Model.gameId == Constants.GameId.Direct3D ? "tab-label-style-2 active-tab" : "tab-label-style-2")">
                            <span>
                                3D
                            </span>
                        </label>
                    </a>
                    <a class="col-4  tab-style-2" href="@ViewBag.MyConfig.MyValue/History?gameId=@Constants.GameId.Direct2D&winType=@Model.winType">
                        @* <input type="radio" id="tab-3" name="tab-group-1" @(Model.gameId == Constants.GameId.Direct2D ? "checked" : "")> *@
                        <label for="tab-2" class="@(Model.gameId == Constants.GameId.Direct2D ? "tab-label-style-2 active-tab" : "tab-label-style-2")">
                            <span>
                                2D
                            </span>
                        </label>
                    </a>
                </div>

                <div id="user-ticket-data">
                </div>
                <script>
                    var countPage = 1;
                    getUserTicketData('@Model.winType', '@Model.gameId', countPage);
                    $(window).scroll(function() {
                        if ($(window).scrollTop() == $(document).height() - $(window).height()) {
                            // ajax call get data from server and append to the div
                            console.log("next " + countPage);
                            getUserTicketData('@Model.winType', '@Model.gameId', ++countPage);
                        }
                    });
                </script>

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

<script>
    stopLoading();
</script>