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

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

@model HomeResults_ViewModel

@{
    DateTime oDateFrom = DateTime.ParseExact(Model.fromDate, "dd/MM/yyyy", CultureInfo.InvariantCulture);
    String dateFrom = oDateFrom.ToString("yyyy-MM-dd", CultureInfo.InvariantCulture);

    DateTime oDateTo = DateTime.ParseExact(Model.toDate, "dd/MM/yyyy", CultureInfo.InvariantCulture);
    String dateTo = oDateTo.ToString("yyyy-MM-dd", CultureInfo.InvariantCulture);
}

<style>
    .draw-date {
        padding-right: 26px !important;
        background-repeat: no-repeat;
        /* z-index: 2; */
        background-image: url(../img/ic_calendar.png);
        background-position: right;
    }

    #term-result-history-data {
        margin-top: 20px;
    }
</style>

<div class="app-content content" style="position:relative; overflow-x: visible">
    <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.results.ToUpper() })
        </div>
    </div>

    <div class="content-wrapper">
        <div class="content-body">
            <section class="loto-container">
                <div class="buy-ticket-container div-result">
                    <div class="row py-2 result-header">
                        <div class="col-6 text-left ">
                            <div class="loto-game">@Lang.Singapore4DResult</div>
                        </div>
                        <div class="col-6  text-right ">
                            @* <input type="date" class="form-control small-input-box" id="fromDate" name="fromDate" required value="@dateFrom"> *@

                            <div class="input-group ">
                                <input type="text" class="form-control small-input-box text-right draw-date" id="fromDate" autocomplete="off" />
                                @* <img src="~/img/ic_calendar.png" style="height: 24px; margin:auto" /> *@
                                @* <span><i class="fa fa-calendar"></i></span> *@
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class=" result-date-box-button">
                            <button type="button" class="btn-search-result"
                                    onclick="getResultTermHistoryData(@Model.termType)">
                                @Lang.search.ToUpper()
                            </button>
                        </div>
                    </div>

                    <div class="div-result">
                        <div id="term-result-history-data">
                        </div>
                    </div>

                    @* <div class="result-form-all"> 

                        <div id="term-result-history-data">
                        </div>
                        <script>
                            getResultTermHistoryData(@Model.termType);
                        </script>
                    </div> *@


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

<script>

     $(function () {
        $('#fromDate').datetimepicker({
            format: 'DD/MM/YYYY', // định dạng ngày
            //locale: 'vi',         // nếu muốn dùng tiếng Việt
            useCurrent: false     // không auto chọn ngày hiện tại
        });
        $('#fromDate').data("DateTimePicker").date(moment());
        getResultTermHistoryData(@Model.termType);
    });

    stopLoading();
</script>