@extends('layouts.app')
@section('title')
    Did You Know?
@endsection
@section('content')
<article class="pageTitleSec__wr text-center dUKnowPageTitleSec__wr">
    <div class="container w_lg_max_1600px__wr w_md_max_100_per__wr px_lg_118px__wr">
        <div class="pageTitleWrap__wr">
            <h2 class="pageTitle__wr fs_32px__wr">{{ translate(get_setting('did_you_know_heading')) }}</h2>
        </div>
    </div>
</article>
<article class="CardBoxSec__wr didUKnowCardBoxSec__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">
                <h2 class="cardBoxHeadTitle__wr">{{ translate(get_setting('did_you_know_title')) }}</h2>
            </div>
            <div class="didUKnowBlockSec__wr">
                @if(get_setting('show_mortgage_product_service') == 'on')
                <div class="didUKnowBlockHead__wr">
                    <h2 class="didUKnowBlockHeadTitle__wr">{{ translate('Mortgage Products And Services:') }}</h2>
                </div>
                <div class="didUKnowAccord__wr">
                    @foreach ($mortgage_product as $item)
                    <div class="card didUKnowAccordCard__wr">
                        <div class="card-header didUKnowAccordCardHead__wr">
                            <button class="btn btn-block didUKnowAccordHeadContent__wr text-left" type="button">
                                <span class="labelText__wr">{{ translate($item->title) }}</span>
                            </button>
                        </div>
                        <div class="didUKnowCollapse__wr" style="display: none;">
                            <div class="card-body didUKnowAccordCardBody__wr">
                                <p>{!! translate($item->content) !!}</p>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
                @endif

                @if(get_setting('show_important_document') == 'on')
                <div class="didUKnowBlockHead__wr">
                    <h2 class="didUKnowBlockHeadTitle__wr">{{ translate('Important Documents:') }}</h2>
                </div>
                <div class="didUKnowAccord__wr">
                    @foreach ($important_document as $item)
                    <div class="card didUKnowAccordCard__wr">
                        <div class="card-header didUKnowAccordCardHead__wr">
                            <button class="btn btn-block didUKnowAccordHeadContent__wr text-left" type="button">
                              <span class="labelText__wr">{{ translate($item->title) }}</span>
                            </button>
                        </div>
                        <div class="didUKnowCollapse__wr" style="display: none;">
                            <div class="card-body didUKnowAccordCardBody__wr">
                                <p>{!! translate($item->content) !!}</p>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
                @endif

                @if(get_setting('show_important_detail') == 'on')
                <div class="didUKnowBlockHead__wr">
                    <h2 class="didUKnowBlockHeadTitle__wr">{{ translate('Important Details:') }}</h2>
                </div>
                <div class="didUKnowAccord__wr">
                    @foreach ($important_detail as $item)
                    <div class="card didUKnowAccordCard__wr">
                        <div class="card-header didUKnowAccordCardHead__wr">
                            <button class="btn btn-block didUKnowAccordHeadContent__wr text-left" type="button">
                              <span class="labelText__wr">{{ translate($item->title) }}</span>
                            </button>
                        </div>
                        <div class="didUKnowCollapse__wr" style="display: none;">
                            <div class="card-body didUKnowAccordCardBody__wr">
                                <p>{!! translate($item->content) !!}</p>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
                @endif
            </div>
        </div>
    </div>
</article>
@endsection
@section('script')
<script type="text/javascript">
    $(document).ready(function() {
           $('.didUKnowCollapse__wr').hide();
        $('.didUKnowAccordHeadContent__wr').click(function() {
            if ($(this).parent().parent().hasClass("active")) {
                $(this).parent().parent().removeClass("active").find(".didUKnowCollapse__wr").slideUp();
            } else {
                $(".didUKnowAccordCard__wr.active .didUKnowCollapse__wr").slideUp();
                $(".didUKnowAccordCard__wr.active").removeClass("active");
                $(this).parent().parent().addClass("active").find(".didUKnowCollapse__wr").slideDown();
            }
            return false;
        });
    });
</script>
@endsection