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

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

@model HomeRules_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.rules.ToUpper()})
        </div>
    </div>

    <div class="content-wrapper buy-ticket-container" style="margin-top:65px;">
        <div class="content-body">
            <section class="flexbox-container">

                <div>

                    <div class="row tabs-style" style="    margin-top: 30px;">
                        <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/Rules?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/Rules?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/Rules?termType=@Constants.BOULCHANS_CODE"
                                   class="@(Model.termType == Constants.BOULCHANS_CODE ? "active-tab" : "")">
                                    @*<img style="height: 30px;" src="~/img/siteLogo 2.png" />*@
                                    BOULCHANS
                                </a>
                            </label>
                        </div>
                    </div>

                    @{
                        if (Model.termType == Constants.BOULCHANS_CODE)
                        {
                            <div class="rule-info-container button-box-animation-v1 rule-info-1">
                                <div style="color: #DA5C5C;     font-weight: 900;">BOULCHANS</div>
                                <div class="content-box rule-content-1">
                                    @Html.Raw(Question.h7)
                                </div>

                                <hr class="line2" style="    margin-top: 25px;" />
                            </div>
                        }
                        else if (Model.termType == Constants.NEW_YORK_BOLET_CODE)
                        {
                            <div class="rule-info-container button-box-animation-v1 rule-info-1" onclick="ruleDetailButton_Click(1)">
                                <div>
                                    <img src="~/img/Group 83909.png" />
                                </div>
                                <div class="arrow arrow-1">
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                </div>

                                <div class="content-box rule-content-1 hide">
                                    @Html.Raw(Question.h1)
                                </div>

                                <hr class="line2" style="    margin-top: 25px;" />
                            </div>

                            <div class="rule-info-container button-box-animation-v1 rule-info-2" onclick="ruleDetailButton_Click(2)">
                                <div>
                                    <img src="~/img/MARYAJ.png" />
                                </div>
                                <div class="arrow arrow-2">
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                </div>

                                <div class="content-box rule-content-2 hide">
                                    @Html.Raw(Question.h2)

                                </div>

                                <hr class="line2" style="    margin-top: 25px;" />
                            </div>

                            <div class="rule-info-container button-box-animation-v1 rule-info-3" onclick="ruleDetailButton_Click(3)">
                                <div>
                                    <img src="~/img/LOTTO3.png" />
                                </div>
                                <div class="arrow arrow-3">
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                </div>
                                <div class="content-box rule-content-3 hide">
                                    @Html.Raw(Question.h3)
                                </div>
                                <hr class="line2" style="    margin-top: 25px;" />
                            </div>
                        }
                        else
                        {
                            <div class="rule-info-container button-box-animation-v1 rule-info-1" onclick="ruleDetailButton_Click(1)">
                                <div>
                                    <img src="~/img/Group 83909.png" />
                                </div>
                                <div class="arrow arrow-1">
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                </div>

                                <div class="content-box rule-content-1 hide">
                                    @Html.Raw(Question.h4)
                                </div>

                                <hr class="line2" style="    margin-top: 25px;" />
                            </div>

                            <div class="rule-info-container button-box-animation-v1 rule-info-2" onclick="ruleDetailButton_Click(2)">
                                <div>
                                    <img src="~/img/MARYAJ.png" />
                                </div>
                                <div class="arrow arrow-2">
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                </div>

                                <div class="content-box rule-content-2 hide">
                                    @Html.Raw(Question.h5)

                                </div>

                                <hr class="line2" style="    margin-top: 25px;" />
                            </div>

                            <div class="rule-info-container button-box-animation-v1 rule-info-3" onclick="ruleDetailButton_Click(3)">
                                <div>
                                    <img src="~/img/LOTTO3.png" />
                                </div>
                                <div class="arrow arrow-3">
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                </div>
                                <div class="content-box rule-content-3 hide">
                                    @Html.Raw(Question.h6)
                                </div>
                                <hr class="line2" style="    margin-top: 25px;" />
                            </div>
                        }
                    }
                </div>
            </section>
        </div>
    </div>
</div>

<script>
    function ruleDetailButton_Click(type) {
        if (type == 1) {
            $(".rule-content-1").removeClass("hide");
            $(".arrow-1").addClass("arrow-rotate");

            $(".rule-content-2").addClass("hide");
            $(".rule-content-3").addClass("hide");
            $(".arrow-2").removeClass("arrow-rotate");
            $(".arrow-3").removeClass("arrow-rotate");

        } else if (type == 2) {
            $(".rule-content-2").removeClass("hide");
            $(".arrow-2").addClass("arrow-rotate");

            $(".rule-content-1").addClass("hide");
            $(".rule-content-3").addClass("hide");
            $(".arrow-1").removeClass("arrow-rotate");
            $(".arrow-3").removeClass("arrow-rotate");
        }
        else if (type == 3) {
            $(".rule-content-3").removeClass("hide");
            $(".arrow-3").addClass("arrow-rotate");

            $(".rule-content-2").addClass("hide");
            $(".rule-content-1").addClass("hide");
            $(".arrow-2").removeClass("arrow-rotate");
            $(".arrow-1").removeClass("arrow-rotate");
        }
    }
</script>


<script>
    stopLoading();
</script>