lottery/website/Views/Home/FAQ.cshtml

@{
    ViewData["Title"] = "FAQ";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@using LotteryWebApp.Languages;
@using LotteryWebApp.Controllers;
@using LotteryWebApp.Common;

@model HomeFAQ_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 = "FAQ"})
        </div>
    </div>

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

                <div class="faq-container">
                    <div class="faq-container-img">
                        <img src="~/img/image 1.png" />
                    </div>

                    <div class="faq-container-content">
                        <div class="row faq-question" sequence="1">
                            <div class="col-10">
                                <div class="faq-start-box" style="font-weight: 700;">
                                     @Html.Raw(Question.q1)
                                </div>
                            </div>
                            <div class="col-2">
                                <div class="faq-end-box">
                                    <i class="faq-icon-add-1 fa fa-solid fa-plus"></i>
                                    <i class="faq-icon-minus-1 fa fa-solid fa-minus hide"></i>

                                </div>
                            </div>
                        </div>
                        <div class="faq-answer-1 hide">
                            <div class="faq-start-box">
                                @Html.Raw(Question.a1)
                            </div>
                        </div>
                        <hr class="line-2" />

                        <div class="row faq-question" sequence="2">
                            <div class="col-10">
                                <div class="faq-start-box" style="font-weight: 700;">
                                    @Html.Raw(Question.q2)
                                </div>
                            </div>
                            <div class="col-2">
                                <div class="faq-end-box">
                                    <i class="faq-icon-add-2 fa fa-solid fa-plus"></i>
                                    <i class="faq-icon-minus-2 fa fa-solid fa-minus hide"></i>

                                </div>
                            </div>
                        </div>
                        <div class="faq-answer-2 hide">
                            <div class="faq-start-box">
                                @Html.Raw(Question.a2)
                            </div>
                        </div>
                        <hr class="line-2" />

                        <div class="row faq-question" sequence="3">
                            <div class="col-10">
                                <div class="faq-start-box" style="font-weight: 700;">
                                    @Html.Raw(Question.q3)
                                </div>
                            </div>
                            <div class="col-2">
                                <div class="faq-end-box">
                                    <i class="faq-icon-add-3 fa fa-solid fa-plus"></i>
                                    <i class="faq-icon-minus-3 fa fa-solid fa-minus hide"></i>

                                </div>
                            </div>
                        </div>
                        <div class="faq-answer-3 hide">
                            <div class="faq-start-box">
                                @Html.Raw(Question.a3)
                            </div>
                        </div>
                        <hr class="line-2" />

                        <div class="row faq-question" sequence="4">
                            <div class="col-10">
                                <div class="faq-start-box" style="font-weight: 700;">
                                    @Html.Raw(Question.q4)
                                </div>
                            </div>
                            <div class="col-2">
                                <div class="faq-end-box">
                                    <i class="faq-icon-add-4 fa fa-solid fa-plus"></i>
                                    <i class="faq-icon-minus-4 fa fa-solid fa-minus hide"></i>

                                </div>
                            </div>
                        </div>
                        <div class="faq-answer-4 hide">
                            <div class="faq-start-box">
                                @Html.Raw(Question.a4)
                            </div>
                        </div>
                        <hr class="line-2" />

                        <div class="row faq-question" sequence="5">
                            <div class="col-10">
                                <div class="faq-start-box" style="font-weight: 700;">
                                    @Html.Raw(Question.q5)
                                </div>
                            </div>
                            <div class="col-2">
                                <div class="faq-end-box">
                                    <i class="faq-icon-add-5 fa fa-solid fa-plus"></i>
                                    <i class="faq-icon-minus-5 fa fa-solid fa-minus hide"></i>

                                </div>
                            </div>
                        </div>
                        <div class="faq-answer-5 hide">
                            <div class="faq-start-box">
                                @Html.Raw(Question.a5)
                            </div>
                        </div>
                        <hr class="line-2" />

                        <div class="row faq-question" sequence="6">
                            <div class="col-10">
                                <div class="faq-start-box" style="font-weight: 700;">
                                    @Html.Raw(Question.q6)
                                </div>
                            </div>
                            <div class="col-2">
                                <div class="faq-end-box">
                                    <i class="faq-icon-add-6 fa fa-solid fa-plus"></i>
                                    <i class="faq-icon-minus-6 fa fa-solid fa-minus hide"></i>

                                </div>
                            </div>
                        </div>
                        <div class="faq-answer-6 hide">
                            <div class="faq-start-box">
                                @Html.Raw(Question.a6)
                            </div>
                        </div>
                        <hr class="line-2" />

                        <div class="row faq-question" sequence="7">
                            <div class="col-10">
                                <div class="faq-start-box" style="font-weight: 700;">
                                    @Html.Raw(Question.q7)
                                </div>
                            </div>
                            <div class="col-2">
                                <div class="faq-end-box">
                                    <i class="faq-icon-add-7 fa fa-solid fa-plus"></i>
                                    <i class="faq-icon-minus-7 fa fa-solid fa-minus hide"></i>

                                </div>
                            </div>
                        </div>
                        <div class="faq-answer-7 hide">
                            <div class="faq-start-box">
                                @Html.Raw(Question.a7)
                            </div>
                        </div>
                        <hr class="line-2" />

                        <div class="row faq-question" sequence="8">
                            <div class="col-10">
                                <div class="faq-start-box" style="font-weight: 700;">
                                    @Html.Raw(Question.q8)
                                </div>
                            </div>
                            <div class="col-2">
                                <div class="faq-end-box">
                                    <i class="faq-icon-add-8 fa fa-solid fa-plus"></i>
                                    <i class="faq-icon-minus-8 fa fa-solid fa-minus hide"></i>

                                </div>
                            </div>
                        </div>
                        <div class="faq-answer-8 hide">
                            <div class="faq-start-box">
                                @Html.Raw(Question.a8)
                            </div>
                        </div>
                        <hr class="line-2" />

                        <div class="row faq-question" sequence="9">
                            <div class="col-10">
                                <div class="faq-start-box" style="font-weight: 700;">
                                    @Html.Raw(Question.q9)
                                </div>
                            </div>
                            <div class="col-2">
                                <div class="faq-end-box">
                                    <i class="faq-icon-add-9 fa fa-solid fa-plus"></i>
                                    <i class="faq-icon-minus-9 fa fa-solid fa-minus hide"></i>

                                </div>
                            </div>
                        </div>
                        <div class="faq-answer-9 hide">
                            <div class="faq-start-box">
                                @Html.Raw(Question.a9)
                            </div>
                        </div>
                        <hr class="line-2" />

                    </div>


                    @*<div class="faq-end-box" style="margin-top:30px;">
                        <div class="nav-left nav-not-active">
                            <i class="fa fa-solid fa-arrow-left"></i>
                        </div>
                        <div class="nav-page">1/1</div>
                        <div class="nav-right nav-active">
                            <i class="fa fa-solid fa-arrow-right"></i>
                        </div>
                    </div>*@
                </div>

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

<script>
    $(".faq-question").on("click", function() {
        let seq = $(this).attr("sequence");
        if ($(this).hasClass("active")){
            $(this).removeClass("active");
            $(".faq-answer-" + seq).addClass("hide");
            $(".faq-icon-add-" + seq).removeClass("hide");
            $(".faq-icon-minus-" + seq).addClass("hide");
        }
        else {
            $(this).addClass("active");
            $(".faq-answer-" + seq).removeClass("hide");
            $(".faq-icon-add-" + seq).addClass("hide");
            $(".faq-icon-minus-" + seq).removeClass("hide");
        }
    })
</script>