@using EImece.Domain.Entities;
@using EImece.Domain.Helpers;
@using EImece.Domain.Models.Enums;
@using EImece.Domain.Helpers.Extensions;
@using Resources;
@using EImece.Domain.Models.FrontModels;
@model SendMessageToSellerViewModel

@{
    var SendButtonText = Resource.SendButtonText;
}

<!-- Page Content-->
<div class="container pt-lg-3 pb-5 mb-sm-3">
    <!-- Toast notifications-->
    <div class="toast-container toast-bottom-center">
        <div class="toast mb-3" id="profile-toast" data-delay="5000" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="toast-header bg-success text-white">
                <i class="mr-2" data-feather="check-circle" style="width: 1.25rem; height: 1.25rem;"></i><span class="font-weight-semibold mr-auto">@Resource.Updated!</span>
                <button class="close text-white ml-2 mb-1" type="button" data-dismiss="toast" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            </div>
            <div class="toast-body">@Resource.YourProfileUpdatedSuccessfully</div>
        </div>
    </div>
    <div class="row pt-1">
        <!-- Main content-->
        <!-- Main content-->
        <div class="col-lg-12">
            @Html.Partial("_CustomerDetails", Model.Customer)
            <div class="row">
                <div class="col-md-12">
                    @Html.Raw(Resource.QuestionAboutItemForCustomer)
                    @if (Model.Faqs.IsNotEmpty())
                    {
                        <section class="container pt-4 pb-5 mt-3">
                            <h3 class="text-center pb-2">@Resource.FrequentlyAskedQuestions</h3>
                            <div class="row">
                                <div class="col-sm-12">
                                    <ul class="list-unstyled">
                                        @foreach (Faq faq in Model.Faqs)
                                        {
                                            <li class="d-flex align-items-center border-bottom pb-3 mb-3">
                                                <i class="text-muted mr-2" data-feather="file-text" style="width: 1.2rem; height: 1.2rem;">
                                                </i>
                                                <a href="#" class="nav-link-inline" data-toggle="modal" data-target="@string.Format("#modalScroll{0}",faq.Id)">
                                                    @faq.Question
                                                </a>
                                                @FaqDetailModal(faq)
                                            </li>

                                        }
                                    </ul>
                                </div>
                            </div>
                        </section>
                    }
                </div>
            </div>
        </div>
    </div>
</div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}
@helper FaqDetailModal(Faq faq)
{
    var modalId = string.Format("modalScroll{0}", faq.Id);
    <!-- Modal markup -->
    <div class="modal fade" id="@modalId" tabindex="-1" role="dialog" aria-labelledby="@modalId" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">@faq.Question</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    @Html.Raw(faq.Answer)
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-danger rounded mb-2 mr-1 btn-block" data-dismiss="modal">@Resource.Close</button>
                </div>
            </div>
        </div>
    </div>

}