@extends('layouts.app')
@section('title')
    FAQ
@endsection
@section('content')
<article class="pageTitleSec__wr text-center faqPageTitleSec__wr">
    <div class="container w_lg_max_1600px__wr w_md_max_100_per__wr px_lg_100px__wr">
        <div class="pageTitleWrap__wr">
            <h2 class="pageTitle__wr">{{ translate('FAQs') }}</h2>
        </div>
    </div>
</article>
<article class="pageInnerBannerSec__wr faqBannerSec__wr d-sm-block d-none">
    <div class="container w_lg_max_1600px__wr w_md_max_100_per__wr px_lg_100px__wr">
        <div class="pageInnerBanner__wr">
            <picture class="figure__wr innerBnrSecFigure__wr faqBannerSecFigure__wr">
                <img src="{{ uploaded_asset(get_setting('faq_section_one_image')) }}" loading="lazy" decoding="async"
                    class="img-fluid" alt="" title="" width="100%" height="">
            </picture>
            <div class="contentBlock__wr content__wr text-center innerBnrContentBlock__wr">
                <div class="contentBlocktitleWrap__wr innerBnrContentBlockTitleWrap__wr">
                    <h6 class="contentBlockSupTitle__wr innerBnrContentBlockSupTitle__wr">{{ translate('FAQs') }}</h6>
                    <h2 class="contentBlockTitle__wr innerBnrContentBlockTitle__wr">{{ translate(get_setting('faq_section_one_title')) }}</h2>
                    <p>{!! translate(get_setting('faq_section_one_sub_title')) !!}</p>
                </div>
            </div>
        </div>
    </div>
</article>
<article class="CardBoxSec__wr faqCardBoxSec__wr">
    <div class="container w_lg_max_1600px__wr w_md_max_100_per__wr px_lg_100px__wr">
        <div class="card card-body pageMainCardBox__wr">
            <div class="cardBoxHead__wr text-center d-sm-block d-none">
                <h2 class="cardBoxHeadTitle__wr">{{ translate(get_setting('faq_section_two_title')) }}</h2>
                <p>{{ translate(get_setting('faq_section_two_sub_title')) }}</p>
            </div>

            <div class="faqSecMobHead d-sm-none">
                <h2 class="faqSecMobHeadTitle">{{translate('Frequently Asked Questions - Mortgage Market')}}</h2>
            </div>
            <div class="faqSecMobBanner d-sm-none">
                <picture class="faqSecMobBnrFigure">
                    <img src="{{ uploaded_asset(get_setting('faq_section_one_image')) }}" loading="lazy" decoding="async" class="img-fluid" alt="" title="" width="100%" height="">
                </picture>
                <div class="faqSecMobContentBlock text-center">
                    <p>{{ translate(get_setting('faq_section_two_sub_title')) }}</p>
                </div>
            </div>

            @foreach ($faq as $item)
            <div class="card faqAccordCard__wr">
                <div class="card-header faqAccordCardHead__wr">
                    <button class="btn btn-block faqAccordHeadContent__wr text-left" type="button">
                        <span class="labelText__wr">{{ translate($item->question) }}</span>
                    </button>
                    <span class="faqAccordHeadIcon__wr"></span>
                </div>
                <div class="faqCollapse__wr" style="display: none;">
                    <div class="card-body faqAccordCardBody__wr">
                        {!! translate($item->content) !!}
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</article>
@if(get_setting('show_ask_more_question') == 'on')
<article class="messageContactSec__wr">
    <div class="container w_lg_max_1600px__wr w_md_max_100_per__wr px_lg_100px__wr">
        <div class="msgSecBoxCard__wr">
            <div class="row">
                <div class="col-xxl-12 col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                    <div class="content__wr msgSecBoxContent__wr text-center">
                        <h3 class="secTitle__wr msgSecBoxTitle__wr">{{ translate(get_setting('faq_section_three_title')) }}</h3>
                        <p>{{ translate(get_setting('faq_section_three_sub_title')) }}</p>
                    </div>
                </div>
                <div class="col-xxl-12 col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 d-sm-block d-none">
                    <div class="formBlock__wr msgSecFormBlock__wr">
                        <form action="https://dev-risians.com/html/mortgagemarket/faq.php">
                            <div class="input-group msgSecInputGroup__wr">
                                <input type="text" class="form-control" placeholder="ENTER HERE">
                                <button type="button" class="btn btn-primary primaryBtn__wr py_8px__wr px_40px__wr hoverSecondaryBtn__wr">
                                    <span class="labelText__wr">{{ translate('Send') }}</span>
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</article>
@endif
@endsection
@section('script')
<script type="text/javascript">
    $(document).ready(function() {
           $('.faqCollapse__wr').hide();
        $('.faqAccordHeadContent__wr').click(function() {
            if ($(this).parent().parent().hasClass("active")) {
                $(this).parent().parent().removeClass("active").find(".faqCollapse__wr").slideUp();
            } else {
                $(".faqAccordCard__wr.active .faqCollapse__wr").slideUp();
                $(".faqAccordCard__wr.active").removeClass("active");
                $(this).parent().parent().addClass("active").find(".faqCollapse__wr").slideDown();
            }
            return false;
        });
    });
</script>
@endsection