lottery/website/Views/History/Index.cshtml

@{
    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" style="margin-top:50px;">
        <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.NEW_YORK_BOLET_CODE ? "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.NEW_YORK_MAYRAJ_CODE ? "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.NEW_YORK_LOTTO3_CODE ? "active-tab" : "")">@Lang.not_win</a>
                            </label>
                        </div>

                    </div>
                </div>

                <div class="row tabs-style" style="    margin-top: 30px !important;">

                    <div class="col-3 tab-style">
                        <input type="radio" id="tab-1" name="tab-group-1" @(Model.gameId == Constants.NEW_YORK_BOLET_CODE ? "checked" : "")>
                        <label for="tab-1">
                            <a style="font-size: 12px;" href="@ViewBag.MyConfig.MyValue/History?gameId=@Constants.NEW_YORK_BOLET_CODE&winType=@Model.winType"
                               class="@(Model.gameId == Constants.NEW_YORK_BOLET_CODE ? "active-tab" : "")">
                                BOLET
                            </a>
                        </label>
                    </div>

                    <div class="col-3 tab-style">
                        <input type="radio" id="tab-2" name="tab-group-1" @(Model.gameId == Constants.NEW_YORK_MAYRAJ_CODE ? "checked" : "")>
                        <label for="tab-2">
                            <a style="font-size: 12px;" href="@ViewBag.MyConfig.MyValue/History?gameId=@Constants.NEW_YORK_MAYRAJ_CODE&winType=@Model.winType"
                               class="@(Model.gameId == Constants.NEW_YORK_MAYRAJ_CODE ? "active-tab" : "")">
                                MARYAJ
                            </a>
                        </label>
                    </div>
                    <div class="col-3 tab-style">
                        <input type="radio" id="tab-2" name="tab-group-1" @(Model.gameId == Constants.NEW_YORK_LOTTO3_CODE ? "checked" : "")>
                        <label for="tab-2">
                            <a style="font-size: 12px;" href="@ViewBag.MyConfig.MyValue/History?gameId=@Constants.NEW_YORK_LOTTO3_CODE&winType=@Model.winType"
                               class="@(Model.gameId == Constants.NEW_YORK_LOTTO3_CODE ? "active-tab" : "")">
                                LOTTO3
                            </a>
                        </label>
                    </div>

                    <div class="col-3 tab-style">
                        <input type="radio" id="tab-2" name="tab-group-1" @(Model.gameId == Constants.BOULCHANS_CODE ? "checked" : "")>
                        <label for="tab-2">
                            <a style="font-size: 12px;" href="@ViewBag.MyConfig.MyValue/History?gameId=@Constants.BOULCHANS_CODE&winType=@Model.winType"
                               class="@(Model.gameId == Constants.BOULCHANS_CODE ? "active-tab" : "")">
                                BOULCHANS
                            </a>
                        </label>
                    </div>
                </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 += 1);
                        }
                    });
                </script>

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

<script>
    stopLoading();
</script>