@extends('front.layouts.app')
@section('content')
<!-- START INNER BANNER SECTION -->
<div class="inner-banner" @if(@$metaArr['main_banner_img_type'] == "image") style="background-image: url({!! getCmsFileUrl(@$metaArr['main_banner_img']) !!});" @endif>
    <div class="container h-100">
        <div class="d-flex h-100 align-items-center justify-content-center">
            <div class="col-12">
                <div class="inner-banner-content">
                    <h4>{!! @$metaArr['main_banner_subtitle'] !!}</h4>
                    <h1>{!! @$metaArr['main_banner_title'] !!}</h1>
                </div>
            </div>
        </div>
    </div>
    @if(@$metaArr['main_banner_img_type'] == "video")
    <video autoplay loop muted playsinline>
        <source src="{!! getCmsFileUrl(@$metaArr['main_banner_img']) !!}" type="video/mp4">
        <source src="{!! getCmsFileUrl(@$metaArr['main_banner_img']) !!}" type="video/ogg">
        Your browser does not support the video tag.
    </video>
    @endif
</div>
<!-- END INNER BANNER SECTION -->

<!-- START ABOUT SECTION -->
<section class="au-page-sec sec-py">
    <div class="container">
        <!-- <div class="pastor-page-content"> -->
            <div class="row">
                <div class="col-lg-12 artical-col">
                    <div class="artical-img right">
                        @if(@$metaArr['content_img_type'] == "video")
                        <x-video-js-player :src="$metaArr['content_img']" id="content_img" />
                        @else
                        <div class="mk-about-img">
                            <img src="{!! getCmsFileUrl(@$metaArr['content_img']) !!}" class="img-fluid" alt="{!! @$metaArr['content_img_alt'] !!}">
                        </div>
                        @endif
                    </div>
                    <div class="au-learn-content artical-content">
                        <div class="sec-title line-left mb-5">
                            <strong>{!! @$metaArr['content_subtitle'] !!}</strong>
                            <h2>{!! @$metaArr['content_title'] !!}</h2>
                        </div>
                        <p class="sec-title-para mb-0">
                            {!! @$metaArr['content_description'] !!}
                        </p>
                    </div>
                </div>
            </div>
        <!-- </div> -->
    </div>
</section>
<!-- END ABOUT SECTION -->
@if(isset($metaArr['quotes']) && is_array($metaArr['quotes']) && count($metaArr['quotes']) > 0)
<!-- START TESTIMONIAL SECTION -->
<section class="ob-testimonial-sec" @if(@$metaArr['quote_img_type'] == "image") style="background-image:url({!! getCmsFileUrl(@$metaArr['quote_img']) !!})" @endif>
    <div class="container h-100">
        <div class="row h-100 align-content-center">
            <div class="col-md-10 mx-auto">
                <div class="owl-carousel quote-slider">
                    @foreach($metaArr['quotes'] as $quotes)
                    <div class="ob-testimonial-content">
                        <span class="quate">“</span>
                        <p>{!! $quotes['description'] !!}</p>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
        @if(@$metaArr['quote_img_type'] == "video")
        <video autoplay loop muted playsinline>
            <source src="{!! getCmsFileUrl(@$metaArr['quote_img']) !!}" type="video/mp4">
            <source src="{!! getCmsFileUrl(@$metaArr['quote_img']) !!}" type="video/ogg">
            Your browser does not support the video tag.
        </video>
        @endif
    </div>
</section>
<!-- END TESTIMONIAL SECTION -->
@endif
<!-- START MEMBERSHIP INFO SECTION -->
<section class="mbr-info-sec sec-py bg-lightgray">
    <div class="container">
        <div class="row g-0">
            <div class="col-md-4">
                <div class="mbr-info-view">
                    <div class="mbr-info-view-content">
                        <h5>{!! @$metaArr['content_title1'] !!}</h5>
                        <p>{!! @$metaArr['content_description1'] !!}</p>
                        <a href="{!! @$metaArr['content_more_info1'] !!}" class="arrow-right-btn" @if(@$metaArr['content_more_info1_open_in_new_tab']) target="_blank" @endif><img src="{!! asset('assets/frontend/images/arrow-right-blue.png') !!}" alt="arrow-right-blue" /></a>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="mbr-info-view">
                    @if(@$metaArr['content_img1_type'] == "video")
                    <x-video-js-player :src="$metaArr['content_img1']" id="content_img1" />
                    @else
                    <img src="{!! getCmsFileUrl(@$metaArr['content_img1']) !!}" class="img-fluid">
                    @endif
                </div>
            </div>
            <div class="col-md-4">
                <div class="mbr-info-view">
                    <div class="mbr-info-view-content">
                        <h5>{!! @$metaArr['content_title2'] !!}</h5>
                        <p>{!! @$metaArr['content_description2'] !!}</p>
                        <a href="{!! @$metaArr['content_more_info2'] !!}" class="arrow-right-btn" @if(@$metaArr['content_more_info2_open_in_new_tab']) target="_blank" @endif><img src="{!! asset('assets/frontend/images/arrow-right-blue.png') !!}" alt="arrow-right-blue"></a>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="mbr-info-view">
                    @if(@$metaArr['content_img2_type'] == "video")
                    <x-video-js-player :src="$metaArr['content_img2']" id="content_img2" />
                    @else
                    <img src="{!! getCmsFileUrl(@$metaArr['content_img2']) !!}" class="img-fluid">
                    @endif
                </div>
            </div>
            <div class="col-md-4">
                <div class="mbr-info-view">
                    <div class="mbr-info-view-content">
                        <h5>{!! @$metaArr['content_title3'] !!}</h5>
                        <p>{!! @$metaArr['content_description3'] !!}</p>
                        <a href="{!! @$metaArr['content_more_info3'] !!}" class="arrow-right-btn" @if(@$metaArr['content_more_info3_open_in_new_tab']) target="_blank" @endif><img src="{!! asset('assets/frontend/images/arrow-right-blue.png') !!}" alt="arrow-right-blue" /></a>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="mbr-info-view">
                    @if(@$metaArr['content_img3_type'] == "video")
                    <x-video-js-player :src="$metaArr['content_img3']" id="content_img3" />
                    @else
                    <img src="{!! getCmsFileUrl(@$metaArr['content_img3']) !!}" class="img-fluid">
                    @endif
                </div>
            </div>
        </div>
    </div>
</section>
<!-- END MEMBERSHIP INFO SECTION -->


@if(@$metaArr['interest_title'])
<!-- START MEMBER SERVICE INFO SECTION -->
<section class="mbr-service-sec sec-py">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-9 col-md-7">
                <div class="sec-title">
                    <strong>{!! @$metaArr['interest_subtitle'] !!}</strong>
                    <h2>{!! @$metaArr['interest_title'] !!}</h2>
                </div>
            </div>
            @if(@$metaArr['interest_btn_caption'] && @$metaArr['interest_btn_link'])
            <div class="col-lg-3 col-md-5 text-md-end text-center">
                <a href="{!! @$metaArr['interest_btn_link'] !!}" class="btn btn-theme-blue" @if(@$metaArr['interest_btn_link_open_in_new_tab']) target="_blank" @endif>{!! @$metaArr['interest_btn_caption'] !!}</a>
            </div>
            @endif
        </div>
    </div>
</section>
<!-- END MEMBER SERVICE INFO SECTION -->
@endif

@includeIf('front.includes.elexio_form')
@includeIf('front.includes.current-week-events')
@includeIf('front.includes.newsletter')
@includeIf('front.includes.faq')

@endsection

@section('js')
@stack('js')

@endsection