@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 realife content 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" 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 class="row sec-py pb-0 rl-learn-more-sec gx-lg-5">
            @for($i=1;$i<=3;$i++)
            <div class="col-sm-6 col-md-4 mb-md-0 mb-4">
                <div class="rl-lm-card">
                    <div class="img-view">
                        @if(@$metaArr['quick_link_box'.$i.'_img_type'] == "video")
                        <x-video-js-player :src="$metaArr['quick_link_box'.$i.'_img']" id="quick_link_box{{$i}}_img" />
                        @else
                        <img src="{!! getCmsFileUrl(@$metaArr['quick_link_box'.$i.'_img']) !!}" class="w-100 app-display-img" alt="{!! @$metaArr['quick_link_box'.$i.'_img_alt'] !!}">
                        @endif
                        <!-- <h5>{!! @$metaArr['quick_link_box'.$i.'_title'] !!}</h5> -->
                    </div>
                    <div class="readMoreContent">
                        <h4>{!! @$metaArr['quick_link_box'.$i.'_title'] !!}</h4>
                        <p>
                            {!! displayShortDescriptionInCmsBox(@$metaArr['quick_link_box'.$i.'_description']) !!}
                        </p>
                        <div class="text-center mt-3 mt-3 mb-3">
                            <a class="btn btn-theme-blue" href="{!! @$metaArr['quick_link_box'.$i.'_btn_link'] !!}" @if(@$metaArr['quick_link_box'.$i.'_btn_link_open_in_new_tab']) target="_blank" @endif>{!! @$metaArr['quick_link_box'.$i.'_btn_caption'] !!}</a>
                        </div>

                        <div class="modal fade historyParaModal" tabindex="-1" aria-labelledby="quicklinkModal" aria-hidden="true">
                            <div class="modal-dialog modal-lg modal-dialog modal-dialog-centered modal-dialog-scrollable">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title">{!! @$metaArr['quick_link_box'.$i.'_title'] !!}</h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                    </div>
                                    <div class="modal-body">
                                        <div class="quicklinkParaModalInfo">
                                            <div class="img-view">
                                                @if(@$metaArr['quick_link_box'.$i.'_img_type'] == "video")
                                                <x-video-js-player :src="$metaArr['quick_link_box'.$i.'_img']" id="quick_link_box{{$i}}_img_popup" />
                                                @else
                                                <img src="{!! getCmsFileUrl(@$metaArr['quick_link_box'.$i.'_img']) !!}" class="img-fluid">
                                                @endif
                                            </div>
                                        </div>
                                        <div><p>{!! @$metaArr['quick_link_box'.$i.'_description'] !!}</p></div>
                                        <div class="text-center mt-3 mt-3 mb-3">
                                            <a class="btn btn-theme-blue" href="{!! @$metaArr['quick_link_box'.$i.'_btn_link'] !!}" @if(@$metaArr['quick_link_box'.$i.'_btn_link_open_in_new_tab']) target="_blank" @endif>{!! @$metaArr['quick_link_box'.$i.'_btn_caption'] !!}</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @endfor
        </div>
    </div>
</section>
<!-- END realife content SECTION -->

<!-- START APP SECTION -->
<section class="app-sec sec-py" style="background-image: url(
    @if(@$metaArr['app_bg_img_type'] == 'image' && @$metaArr['app_bg_img'])
        {!! getCmsFileUrl(@$metaArr['app_bg_img']) !!}
    @else
        {!! asset('assets/frontend/images/mk-app-bg.png') !!}
    @endif

    ")>
    <div class="container">
        <div class="row gx-xl-5 align-items-center">
            <div class="col-md-6 text-center">
                @if(@$metaArr['app_img_type'] == 'image' && @$metaArr['app_img'])
                <img src="{!! getCmsFileUrl(@$metaArr['app_img']) !!}" class="img-fluid app-display-img" alt="{!! @$metaArr['app_img_alt'] !!}">
                @elseif(@$metaArr['app_img_type'] == 'video' && @$metaArr['app_img'])
                <x-video-js-player :src="$metaArr['app_img']" id="app_img" />
                @else
                <img src="{!! asset('assets/frontend/images/app-display.png') !!}" class="img-fluid app-display-img" alt="app-display">
                @endif
            </div>
            <div class="col-md-6">
                <div class="sec-title line-none">
                    <h2>{!! @$metaArr['app_title'] !!}</h2>
                </div>
                <p class="sec-title-para mb-0">
                    {!! @$metaArr['app_description'] !!}
                </p>
                <div class="d-flex gap-2">
                    @if(@$metaArr['app_btn_link'] && @$metaArr['app_btn_caption'])
                    <a href="{!! @$metaArr['app_btn_link'] !!}" class="btn mk-outline-btn d-block" @if(@$metaArr['app_btn_link_open_in_new_tab']) target="_blank" @endif style="height:auto; line-height:inherit; padding : 10px">{!! @$metaArr['app_btn_caption'] !!}</a>
                    @endif

                    @if(@$metaArr['app_btn2_link'] && @$metaArr['app_btn2_caption'])
                    <a href="{!! @$metaArr['app_btn2_link'] !!}" class="btn mk-outline-btn d-block" @if(@$metaArr['app_btn2_link_open_in_new_tab']) target="_blank" @endif style="height:auto; line-height:inherit; padding : 10px">{!! @$metaArr['app_btn2_caption'] !!}</a>
                    @endif
                </div>
                <div class="btn-view" style="justify-content: start !important;">
                    @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="{!! $sociallinks['icon_alt'] !!}">
                    </a>
                    @endforeach
                    @endif
                </div>
            </div>
        </div>
    </div>
</section>
<!-- END APP SECTION -->

@includeIf('front.cms.sections.invite', ['totalBox' => 3])

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

@endsection

@section('js')
@stack('js')
<script>
$("iframe").hide();
</script>
@endsection