@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 MK-ABOUT SECTION -->
<section class="mk-about-sec sec-py">
    <div class="container">
        <div class="row">
            @if(@$metaArr['content_img'])
            <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
                    <img src="{!! getCmsFileUrl(@$metaArr['content_img']) !!}" class="img-fluid">
                    @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>
                    {!! @$metaArr['content_description'] !!}
                </div>
            </div>
            @else
            <div class="col-xl-12 col-md-6 mb-md-0 mb-4">
                <div class="mk-about-content">
                    <div class="sec-title text-center mb-5">
                        <strong>{!! @$metaArr['content_subtitle'] !!}</strong>
                        <h2>{!! @$metaArr['content_title'] !!}</h2>
                    </div>
                    {!! @$metaArr['content_description'] !!}
                </div>
            </div>
            @endif
        </div>
    </div>
</section>
<!-- END MK-ABOUT SECTION -->

@for($ql=1;$ql<=3;$ql++)
@if(isset($metaArr['quick_link'.$ql.'_hide']) && !@$metaArr['quick_link'.$ql.'_hide'])
<section class="ob-about-sec mb-5">
    <div class="container">
        @if(@$metaArr['quick_link'.$ql.'_title'] || @$metaArr['quick_link'.$ql.'_description'])
        <div class="row mb-5">
            <div class="col-lg-8 mx-auto text-center">
                @if(@$metaArr['quick_link'.$ql.'_title'])
                <div class="sec-title mb-5">
                    <h2>{!! @$metaArr['quick_link'.$ql.'_title'] !!}</h2>
                </div>
                @endif
                @if(@$metaArr['quick_link'.$ql.'_description'])
                <p class="sec-title-para mb-0">
                    {!! @$metaArr['quick_link'.$ql.'_description'] !!}
                </p>
                @endif
            </div>
        </div>
        @endif
        <div class="row 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'.$ql.'_box'.$i.'_img_type'] == "video")
                        <x-video-js-player :src="$metaArr['quick_link'.$ql.'_box'.$i.'_img']" id="quick_link{{$ql}}_box{{$i}}_img" />
                        @else
                        <img src="{!! getCmsFileUrl(@$metaArr['quick_link'.$ql.'_box'.$i.'_img']) !!}" class="w-100 app-display-img" alt="{!! removeTagsFromAltText(@$metaArr['quick_link'.$ql.'_box'.$i.'_img_alt']) !!}">
                        @endif
                    </div>
                    <div class="readMoreContent">
                        <h4>{!! @$metaArr['quick_link'.$ql.'_box'.$i.'_title'] !!}</h4>
                        <p>
                            {!! displayShortDescriptionInCmsBox(@$metaArr['quick_link'.$ql.'_box'.$i.'_description']) !!}
                        </p>
                        <div class="text-center mt-3 mt-3 mb-3">
                            @if(@$metaArr['quick_link'.$ql.'_box'.$i.'_btn_caption'])
                            <a class="btn btn-theme-blue" href="{!! @$metaArr['quick_link'.$ql.'_box'.$i.'_btn_link'] !!}" @if(@$metaArr['quick_link'.$ql.'_box'.$i.'_btn_link_open_in_new_tab']) target="_blank" @endif>{!! @$metaArr['quick_link'.$ql.'_box'.$i.'_btn_caption'] !!}</a>
                            @endif
                        </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'.$ql.'_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'.$ql.'_box'.$i.'_img_type'] == "video")
                                                <x-video-js-player :src="$metaArr['quick_link'.$ql.'_box'.$i.'_img']" id="quick_link{{$ql}}_box{{$i}}_img_popup" />
                                                @else
                                                <img src="{!! getCmsFileUrl(@$metaArr['quick_link'.$ql.'_box'.$i.'_img']) !!}" class="img-fluid">
                                                @endif
                                            </div>
                                        </div>
                                        <p>{!! @$metaArr['quick_link'.$ql.'_box'.$i.'_description'] !!}</p>
                                    </div>
                                    <div class="text-center mt-3 mt-3 mb-3">
                                        @if(@$metaArr['quick_link'.$ql.'_box'.$i.'_btn_caption'])
                                        <a class="btn btn-theme-blue" href="{!! @$metaArr['quick_link'.$ql.'_box'.$i.'_btn_link'] !!}" @if(@$metaArr['quick_link'.$ql.'_box'.$i.'_btn_link_open_in_new_tab']) target="_blank" @endif>{!! @$metaArr['quick_link'.$ql.'_box'.$i.'_btn_caption'] !!}</a>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @endfor
        </div>
    </div>
</section>
@endif
@endfor

@if(isset($metaArr['banner_hide']) && !($metaArr['banner_hide']))
@includeIf('front.cms.sections.banner_dropdown')
@endif

@if(isset($metaArr['social_hide']) && !($metaArr['social_hide']))
@includeIf('front.cms.sections.social_media')
@endif

@if(isset($metaArr['invite_hide']) && !($metaArr['invite_hide']))
@includeIf('front.cms.sections.invite', ['totalBox' => 3])
@endif

@includeIf('front.includes.elexio_form')
@includeIf('front.includes.faq')

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