LotteryV2/website/Views/Home/Results.cshtml

@{
    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);
}

<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<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.results.ToUpper()})
        </div>
    </div>

    <div class="content-wrapper" style="padding:2px;">
        <div class="content-body">
            <section class="flexbox-container">
                <div class="content-wrapper buy-ticket-container" style="margin-top:35px;">
                    <div class="">
                        <div class="result-date-box">
                            <fieldset class="form-group position-relative has-icon-left">
                                <label>@Lang.from</label>
                                <input type="date" class="form-control small-input-box" id="fromDate" name="fromDate" required value="@dateFrom">

                            </fieldset>
                        </div>
                        <div class=" result-date-box">
                            <fieldset class="form-group position-relative has-icon-left">
                                <label>@Lang.to</label>
                                <input type="date" class="form-control small-input-box" id="toDate" name="toDate" required value="@dateTo">
                            </fieldset>
                        </div>
                        <div class=" result-date-box-button">
                            <button type="button" class="btn btn-outline-primary adv-button btn-block login-button-action small-input-box"
                                    onclick="getResultTermHistoryData(@Model.termType)">
                                @Lang.search.ToUpper()
                            </button>
                        </div>
                    </div>

                    <div class="row tabs-style" style=" ">

                        <div col-12>
                            <select id="gameTypeSelect" style="width:200px" asp-for="termType" onchange="changeGame()">
                                <option value="@Constants.NEW_YORK_BOLET_CODE" data-img="../img/logo-deebef36ed9bb3f8e07e8492eecbb7ae (1) 1.png" >
                                    NEW YORK
                                </option>
                                <option value="@Constants.FLORIDA_BOLET_CODE" data-img="../img/siteLogo 2.png">FLORIDA</option>
                                <option value="@Constants.BOULCHANS_CODE" data-img="">BOULCHANS</option>
                                <option value="@Constants.GEORGIA_BOLET_CODE" data-img="../img/logo/Georgia_Lottery.jpg">GEORGIA</option>
                                <option value="@Constants.TEXAS_BOLET_CODE" data-img="../img/logo/logo_tx.png">TEXAS</option>
                                <option value="@Constants.TENNESSEE_BOLET_CODE" data-img="../img/logo/TN_Lottery.png">TENNESSEE</option>
                            </select>
                        </div>

                       @*<div class="col-4 tab-style">
                            <input type="radio" id="tab-1" name="tab-group-1" @(Model.termType == Constants.NEW_YORK_BOLET_CODE ? "checked" : "")>
                            <label for="tab-1">
                                <a style="font-size: 11px;" href="@ViewBag.MyConfig.MyValue/Home/Results?termType=@Constants.NEW_YORK_BOLET_CODE"
                                   class="@(Model.termType == Constants.NEW_YORK_BOLET_CODE ? "active-tab" : "")">
                                    <img style="height: 30px;" src="~/img/logo-deebef36ed9bb3f8e07e8492eecbb7ae (1) 1.png" />
                                    NEW YORK
                                </a>
                            </label>
                        </div>

                        <div class="col-4 tab-style">
                            <input type="radio" id="tab-2" name="tab-group-1" @(Model.termType == Constants.FLORIDA_BOLET_CODE ? "checked" : "")>
                            <label for="tab-2">
                                <a style="font-size: 11px;" href="@ViewBag.MyConfig.MyValue/Home/Results?termType=@Constants.FLORIDA_BOLET_CODE"
                                   class="@(Model.termType == Constants.FLORIDA_BOLET_CODE ? "active-tab" : "")">
                                    <img style="height: 30px;" src="~/img/siteLogo 2.png" />
                                    FLORIDA
                                </a>
                            </label>
                        </div>

                        <div class="col-4 tab-style">
                            <input type="radio" id="tab-2" name="tab-group-1" @(Model.termType == Constants.BOULCHANS_CODE ? "checked" : "")>
                            <label for="tab-2">
                                <a style="font-size: 11px;" href="@ViewBag.MyConfig.MyValue/Home/Results?termType=@Constants.BOULCHANS_CODE"
                                   class="@(Model.termType == Constants.BOULCHANS_CODE ? "active-tab" : "")">
                                    BOULCHANS
                                </a>
                            </label>
                        </div>*@

                    </div>

                    <div class="result-form-all">
                        <div class="result-form-container">
                            <div class="row result-form-box">
                                <div class="col-3" style="border-right:1px solid white;">
                                    <h5>@Lang.time</h5>
                                </div>
                                <div class="col-9">
                                    <h5>@Lang.results</h5>
                                </div>
                            </div>
                        </div>

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


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

<script>
    stopLoading();
</script>

<script>
    $('#gameTypeSelect').select2({
        templateResult: formatOption,
        templateSelection: formatOption,
        minimumResultsForSearch: Infinity
    });

    function formatOption (state) {
      if (!state.id) return state.text;
      var img = $(state.element).data('img');
      return $('<span><img src="'+img+'" style="width:30px;height:30px;margin-right:5px"/> '+state.text+'</span>');
    }

    function changeGame() {
        var termType = $("#gameTypeSelect").val();
        location.href = "@ViewBag.MyConfig.MyValue/Home/Results?termType=" + termType;
    }
</script>