@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 ML-ABOUT SECTION -->
<section class="ob-about-sec sec-py">
    <div class="container">
        <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">
                    </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>
</section>
<!-- END ML-ABOUT SECTION -->

<!-- START SCHOOLER SECTION -->
<section class="schooler-sec sec-py overlay-black" @if(@$metaArr['banner_img_type'] == "image") style="background-image: url({!! getCmsFileUrl(@$metaArr['banner_img']) !!})" @endif>
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6">
                <div class="sec-title line-left">
                    <strong>{!! @$metaArr['banner_subtitle']!!}</strong>
                    <h2>{!! @$metaArr['banner_title']!!}</h2>
                </div>
                <p class="sec-title-para mb-0 text-light">
                    {!! @$metaArr['banner_description']!!}
                </p>
            </div>
            <div class="col-lg-6 mt-lg-0 mt-5 ms-auto">
                <div class="social-icon-row">
                    @if(isset($metaArr['sociallinks']) && is_array($metaArr['sociallinks']) && @count(@$metaArr['sociallinks']) > 0)
                    @foreach(@$metaArr['sociallinks'] as $sociallinks)
                    <a href="{!! $sociallinks['link'] !!}" class="social-icon" @if(@$sociallinks['link_open_in_new_tab']) target="_blank" @endif>
                        <img src="{!! getCmsFileUrl(@$sociallinks['icon']) !!}" class="img-fluid" alt="youtub-img" />
                    </a>
                    @endforeach
                    @endif
                </div>
            </div>
        </div>
    </div>
    @if(@$metaArr['banner_img_type'] == "video")
    <video autoplay loop muted playsinline>
        <source src="{!! getCmsFileUrl(@$metaArr['banner_img']) !!}" type="video/mp4">
        <source src="{!! getCmsFileUrl(@$metaArr['banner_img']) !!}" type="video/ogg">
        Your browser does not support the video tag.
    </video>
    @endif
</section>
<!-- END SCHOOLER SECTION -->

<!-- START MEMBERSHIP INFO SECTION -->
<section class="mbr-info-sec sec-py">
    <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 -->
@includeIf('front.includes.elexio_form')
@includeIf('front.includes.current-week-events')
@includeIf('front.includes.faq')

@endsection

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