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



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

@model BuyTicketChoose_ViewModel

@{
    String dateTo = DateTime.Now.ToString("dd/MM/yyyy", CultureInfo.InvariantCulture);
}

<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.buy_ticket })
        </div>
    </div>

    <div class="content-wrapper" style="margin-top:80px; margin-bottom:70px;">
        <div class="content-body">
            <section class="flexbox-container">
                <div class="col-12 align-items-center justify-content-center">

                    <div class="header-choose-container">
                        <div class="row">
                            <div class="col-6 date-choose-box">
                                <span>@Lang.date_purchase</span>
                            </div>
                            <div class="col-6 date-choose-box">
                                <div class="date-choose">
                                    @* <input type="date" value="@dateTo" style="font-size:16px;    pointer-events: none;" /> *@
                                    <span>@dateTo  <i class="fa fa-calendar"></i></span>
                                </div>
                            </div>
                            <div class="col-6 date-choose-box">
                                <span>@Lang.type</span>
                            </div>
                            <div class="col-6 date-choose-box">
                                <div class="date-choose"> 
                                    @* <span>@dateTo  <i class="fa fa-calendar"></i></span> *@
                                    <select id="gameType">
                                        <option value="@Constants.GameType.Direct" selected>Direct</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-6 button-choose-box">
                                <button type="button" class="btn btn-outline-primary btn-block button-style-3"
                                        onclick="cleanAllTicket_Click()">
                                    <img src="~/img/broom 1.png" /> @Lang.clean_all.ToUpper()
                                </button>
                            </div>
                            <div class="col-6 button-choose-box">
                                <button type="button" class="btn btn-outline-primary btn-block button-style-3"
                                        onclick="autoFillAllTicket_Click('@Model.ticketType')">
                                    <img src="~/img/autofill.png" /> @Lang.auto_fill.ToUpper()
                                </button>
                            </div>
                        </div>
                    </div>


                    <div class="ticket-list">
                        <div>
                            @await Component.InvokeAsync("ChooseForm", new {ticketType = Model.ticketType })
                        </div>
                        @*                        <div>
                        @await Component.InvokeAsync("ChooseForm", new {ticketType = Model.ticketType })
                        </div>
                        <div>
                        @await Component.InvokeAsync("ChooseForm", new {ticketType = Model.ticketType })
                        </div>
                        <div>
                        @await Component.InvokeAsync("ChooseForm", new {ticketType = Model.ticketType })
                        </div>*@
                    </div>


                    <div class="row button-on-footer" style="margin-top:50px;">
                        <div class="col-6">
                            <button type="button" class="btn btn-outline-primary btn-block button-style-2 button-add-more"
                                    onclick="addTicket_Click('@Model.ticketType')">
                                <i class="ft-unlock"></i> @Lang.add_more_order.ToUpper()
                            </button>
                        </div>
                        <div class="col-6">
                            <form class="form-horizontal" action="@ViewBag.MyConfig.MyValue/BuyTicket/Payment" method="post">
                                @Html.AntiForgeryToken()
                                <button type="button" class="btn btn-outline-primary btn-block login-button"
                                        onclick="buyTicketConfirmButton_Click('@Model.ticketType')">
                                    <i class="ft-unlock"></i> @Lang.payment.ToUpper()
                                </button>
                            </form>
                        </div>
                    </div>


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

<script>
    stopLoading();
</script>


<script>
    function addTicket_Click(ticketType) {
        console.log("add");
        // kiem tra toi da 5 ve
        var elements = document.getElementsByClassName("ticket-buy-number");
        if (elements.length >= 5) {
            toastr.error('@Lang.max_5_tickets');
            $(".button-add-more").prop('disabled', true);
            $(".button-add-more").addClass('prevent-click');
        } else {
            $(".button-add-more").prop('disabled', false);
            $(".button-add-more").removeClass('prevent-click');

            let subDomain = $("#subDomain").val();
            let otpUrl = subDomain + '/BuyTicket/AddTicket_Action'
            startLoading();
            $.ajax({
                type: "POST",
                url: otpUrl,
                headers: { 'RequestVerificationToken': $('input[name=__RequestVerificationToken]').val() },
                data: {
                    "__RequestVerificationToken": $('input[name=__RequestVerificationToken]').val(),
                    ticketType: ticketType,
                },
                success: function(data) {
                    stopLoading();
                    $(".ticket-list").append(data)
                },
                failure: function(data) {
                    stopLoading();
                },
                error: function(data) {
                    stopLoading();
                }
            });
        }
    }
</script>