Webportal/WebPortal/WebPortal/Views/CustomerCare/Index.cshtml

@{
    ViewData["Title"] = "Customer Care";

    ViewBag.description = "Access customer care services at Telemor for support and assistance with all your needs.";
}

@using WebPortal.Texts;
@using WebService;

@model contentTreeObj[]

@{
    var keywords = ViewBag.keywords;
}
@Html.Partial("../Partial/_Ask")

<div class="pathway pt-5">
    <div class="container">
        <ul class="breadcrumb">
            <li class="breadcrumb-item"><a href="/Home">@Lang.Home</a></li>
            <li class="breadcrumb-item active">@Lang.CustomerCare</li>
        </ul>
    </div>
</div>

<div class="tele-customer mb-5">
    <div class="container aos-init" data-aos="fade-up">
        <h3 class="mb-5">
            @Lang.TrendingTopic
        </h3>
        <div class="box-customer">
            <div id="accordion" class="accordion">
                @if (Model != null)
                {
                    foreach (contentTreeObj content in Model)
                    {
                        @if (keywords == null || keywords.Trim().Length == 0)
                        {
                            <div class="card" data-aos="fade-up" data-aos-delay="100">
                                <div class="card-header">
                                    <a class="card-link collapsed" data-toggle="collapse" href="@("#c" + content.id)" onclick="loadFaqs(@content.id)">
                                        @content.nodeName
                                    </a>
                                </div>
                                <div id="@("c" + content.id)" class="collapse " data-parent="#accordion">
                                    <div class="card-body" id="@("body-" + content.id)">
                                    </div>
                                </div>
                            </div>
                        }
                        else
                        {
                            <p><a href="@("/CustomerCare/FaqDetail?id=" + content.id)">@content.nodeName</a></p>
                        }
                    }
                }
            </div>
        </div>
    </div>
</div>

<div class="ads mb-5">
    <div class="container">
        <a href="/CustomerCare/Loyalty" class="d-block"><img src="~/image/banner/ads.png" alt="banner"> </a>
    </div>
</div>

<div class="tele-utili item-product mb-5">
    <div class="container aos-init" data-aos="fade-up">
        <div class="title mb-4">
            <span class="text-uppercase">@Lang.Utilities</span>
        </div>
        <div class="boxcont">
            <div class="row justify-content-center">
                <div class="col-md-4  text-center">
                    <a href="/Home/Error" class="d-block">
                        <div class="rounded-circle">
                            <img src="~/image/policy.svg " alt="policy">
                        </div>
                        <p class="mb-0">
                            <b class="f14">
                                @Lang.WarrantyPolicy
                            </b>
                        </p>
                    </a>
                </div>
                <div class="col-md-4 text-center">
                    <a href="/CustomerCare/Showroom" class="d-block">
                        <div class="rounded-circle">
                            <img src="~/image/service.svg" alt="service">
                        </div>
                        <p class="mb-0">
                            <b class="f14">
                                @Lang.FindStore
                            </b>
                        </p>
                    </a>
                </div>
                @*<div class="col-md-2 text-center">
                    <a href="/Home/Error" class="d-block">
                        <div class="rounded-circle">
                            <img src="~/image/searching.svg ">
                        </div>
                        <p class="mb-0"><b class="f14">@Lang.Searching</b></p>
                    </a>
                </div>*@
                <div class="col-md-4 text-center">
                    <a href="#" class="d-block">
                        <div class="rounded-circle">
                            <img src="~/image/vas1.svg" alt="vas">
                        </div>
                        <p class="mb-0"><b class="f14">@Lang.FAQs</b></p>
                    </a>
                </div>
                @*<div class="col-md-2 text-center">
                    <a href="/Home/Error" class="d-block">
                        <div class="rounded-circle">
                            <img src="~/image/contact.svg">
                        </div>
                        <p class="mb-0"><b class="f14">@Lang.Contact</b></p>
                    </a>
                </div>*@
            </div>

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

@section Scripts {
    <script>
        function loadFaqs(parentId) {
            console.log("loadFaqs " + parentId);
            var target = "body-" + parentId;
            if ($("#c" + parentId + " .card-body").children().length == 0) {
                console.log(target);
                startSpinner(target);
                $.ajax({
                    url: "/Home/TreeLoad",
                    data: {
                        __RequestVerificationToken: $('input[name=__RequestVerificationToken]').val(),
                        parentId: parentId,
                        page: "1",
                        size: "1000"
                    },
                    type: "POST",
                    success: function (result) {
                        console.log(result);
                        stopSpinner(target);
                        if (result.error == "0") {
                            for (var i = 0; i < result.data.length; i++) {
                                let div = '<p><a href="/CustomerCare/FaqDetail?id=' + result.data[i].id + '">' + result.data[i].nodeName + '</a></p>';
                                //console.log(div);
                                $("#c" + parentId + " .card-body").append(div);
                            };
                        }
                    },
                    error: function (data) {
                        stopSpinner(target);
                        console.log(data);
                    }
                });
            }
        };

    </script>
}