@model List<GheyasPlusShop.Models.Admin.FaqModel>
@{
    ViewBag.Title = "سوالات متداول";
}

@section styles{
    <style>
        body {
            background-color: #eceff1;
        }

        .question {
            background-color: #eceff1;
            padding: 8px 15px;
            border-radius: 4px;
            cursor: pointer;
            margin-bottom: 15px;
        }

            .question label {
                font-size: 14px;
                font-weight: 700;
                margin: 0;
                width: calc(100% - 20px);
                line-height: 28px;
                cursor: pointer;
            }

            .question img {
                transform: rotate(180deg);
                float: left;
                margin-top: 6px;
            }

        .answer {
            display: none;
        }

            .answer p {
                text-align: justify;
                font-size: 14px;
                line-height: 26px;
            }

            .answer > div {
                border-right: 2px solid #009688;
                margin-bottom: 34px;
            }
    </style>
}

<div class="p-4" >
    <div class="form-card" style="padding:30px 45px;min-height:calc(100vh - 538px);">
        @foreach (var item in Model)
        {

                <div class="question">
                    <label>@item.Question</label>
                    <img src="~/App_Images/Product/flashArrow.svg" />
                </div>
                <div class="answer">
                    <div class="px-3">
                        <p>@item.Answer</p>
                    </div>
                </div>

        }
    </div>
</div>

@section scripts{
    <script>
        $(".question").on("click", function () {
            if ($(this).next().is(":hidden")) {
                $(this).next().show();
                $(this).find('img').css('transform', 'unset');
            }
            else {
                $(this).next().hide();
                $(this).find('img').css('transform', 'rotate(180deg)');
            }

        });

    </script>
}