@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">
            <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 class="row gx-lg-5 mk-quick-links justify-content-center">
            @for($i=1;$i<=3;$i++)
            @if(@$metaArr['content_btn'.$i.'_caption'] && @$metaArr['content_btn'.$i.'_link'])
            <div class="col-md-4">
                <a href="{!! @$metaArr['content_btn'.$i.'_link'] !!}" class="img" @if(@$metaArr['content_btn'.$i.'_link_open_in_new_tab']) target="_blank" @endif>
                    <div class="mk-quick-link">
                        <div class="content">
                            <h4>{!! @$metaArr['content_btn'.$i.'_caption'] !!}</h4>
                        </div>
                        <img src="{!! asset('assets/frontend/images/arrow-right-circle-white.png') !!}" class="img-fluid">
                    </div>
                </a>
            </div>
            @endif
            @endfor
        </div>
    </div>
</section>
<!-- END MK-ABOUT SECTION -->

<!-- START PARENTS SECTION -->
<section class="mk-parents-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>
                <br/>
                @for($i=1;$i<=3;$i++)
                @if(@$metaArr['app_btn'.$i.'_caption'] && @$metaArr['app_btn'.$i.'_link'])
                <a href="{!! @$metaArr['app_btn'.$i.'_link'] !!}" class="btn mk-outline-btn" @if(@$metaArr['app_btn'.$i.'_link_open_in_new_tab']) target="_blank" @endif>{!! @$metaArr['app_btn'.$i.'_caption'] !!}</a>
                @endif
                @endfor
            </div>
        </div>
    </div>
</section>
<!-- END PARENTS SECTION -->

<!-- START MK-INTEREST SECTION -->
<section class="mk-interest-sec sec-py">
    <div class="container">
        <div class="row gx-xl-5">
            @for($i=1;$i<=3;$i++)
            <div class="col-md-4 col-sm-6 Col">
                <div class="mk-interest-card">
                    <div class="img">
                        @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">
                        @endif
                    </div>
                    <div class="readMoreContent">
                        <h4 class="text-truncate">{!! @$metaArr['quick_link_box'.$i.'_title'] !!}</h4>
                        <p>
                            {!! displayShortDescriptionInCmsBox(@$metaArr['quick_link_box'.$i.'_description']) !!}
                        </p>
                        <div class="text-center">
                            <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">
                                            <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 MK-INTEREST SECTION -->

<!-- START FOLLOW SECTION -->
@includeIf('front.cms.sections.social_media')
<!-- END FOLLOW SECTION -->

<!-- START MK-INVITE SECTION -->
@includeIf('front.cms.sections.invite', ['totalBox' => 4])
<!-- END MK-INVITE SECTION -->

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

@endsection

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