@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 PLAN SECTION -->
<section class="fs-plan-sec sec-py">
    <div class="container">
        <div class="row">
            <div class="col-xl-12 artical-col">
                <div class="artical-img right">
                    @if(@$metaArr['content_img1_type'] == "video")
                    <x-video-js-player :src="$metaArr['content_img1']" id="content_img1" />
                    @else
                    <div class="fs-plan-img2">
                        <img src="{!! getCmsFileUrl(@$metaArr['content_img1']) !!}" class="img-fluid">
                    </div>
                    @endif
                </div>
                <div class="artical-content">
                    <div class="sec-title line-left">
                        <strong>{!!@$metaArr['content_subtitle'] !!}</strong>
                        <h2>{!!@$metaArr['content_title'] !!}</h2>
                    </div>
                    <p class="sec-title-para">
                        {!!@$metaArr['content_description'] !!}
                    </p>
                </div>
            </div>
        </div>
        <!-- <div class="fa-plan-img-sec"></div> -->
        <div class="row mt-3">
            @for($i=2;$i<=5;$i++)
            @if(@$metaArr['content_img'.$i.'_type'])
            <div class="col-sm-3">
                @if(@$metaArr['content_img'.$i.'_type'] == "video")
                <x-video-js-player :src="$metaArr['content_img'.$i]" id="content_img{{$i}}" />
                @else
                <div class="fs-plan-img1">
                    <img src="{!! getCmsFileUrl(@$metaArr['content_img'.$i]) !!}" class="img-fluid">
                </div>
                @endif
            </div>
            @endif
            @endfor
        </div>
    </div>
</section>
<!-- END PLAN SECTION -->


<!-- START STEPS SECTION -->
@if(isset($metaArr['contents']) && is_array($metaArr['contents']) && count($metaArr['contents']) > 0)
@php
$contents = $metaArr['contents'] ?? [];
$total = count($contents);
$half = ceil($total / 2);
$leftContents = array_slice($contents, 0, $half);
$rightContents = array_slice($contents, $half);
@endphp
<section class="mi-steps-sec sec-py bg-lightgray">
    <div class="container">
        <div class="row">
            <div class="col-lg-6">
                @foreach($leftContents as $key => $lcontent)
                <div class="fs-steps-card readMoreContent" data-lines="5">
                    <div class="fs-steps-card-img">
                        <img src="{!! getCmsFileUrl($lcontent['icon']) !!}" class="img-fluid" alt="icon">
                    </div>
                    <div class="fs-steps-card-content">
                        <h5>{!! $lcontent['title'] !!}</h5>
                        <p class="mb-0">
                            {!! displayShortDescriptionInCmsBox(@$lcontent['description']) !!}
                        </p>
                    </div>

                    @if(!empty($lcontent['typeform_id']))
                    <a href="javascript:void(0)" data-tf-slider="{!! $lcontent['typeform_id'] !!}" data-tf-width="550" data-tf-medium="snippet" class="fs-steps-card-arrow-btn">
                       <img src="{!! asset('assets/frontend/images/arrow-right-blue.png') !!}" alt="arrow">
                    </a>
                    @elseif(!empty($lcontent['link']))
                    <a href="{!! $lcontent['link'] !!}" class="fs-steps-card-arrow-btn" @if(!empty($lcontent['link_open_in_new_tab'])) target="_blank" @endif>
                       <img src="{!! asset('assets/frontend/images/arrow-right-blue.png') !!}" alt="arrow" />
                    </a>
                    @endif

                    <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">{!! $lcontent['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">
                                            <img src="{!! getCmsFileUrl($lcontent['icon']) !!}" class="img-fluid">
                                        </div>
                                    </div>
                                    <p>{!! @$lcontent['description'] !!}</p>
                                </div>
                                <div class="text-center mt-3 mt-3 mb-3">
                                    @if(!empty($lcontent['typeform_id']))
                                    <a href="javascript:void(0)" data-tf-slider="{!! $lcontent['typeform_id'] !!}" data-tf-width="550" data-tf-medium="snippet" class="">
                                       <img src="{!! asset('assets/frontend/images/arrow-right-blue.png') !!}" alt="arrow">
                                    </a>
                                    @elseif(!empty($lcontent['link']))
                                    <a href="{!! $lcontent['link'] !!}" class="" @if(!empty($lcontent['link_open_in_new_tab'])) target="_blank" @endif>
                                       <img src="{!! asset('assets/frontend/images/arrow-right-blue.png') !!}" alt="arrow" />
                                    </a>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
            <div class="col-lg-6 ms-auto">
                @php /* @endphp
                @if(@$metaArr['content_img6_type'])
                @if(@$metaArr['content_img6_type'] == "video")
                <x-video-js-player :src="$metaArr['content_img6']" id="content_img6" />
                @else
                <div class="fs-img-col">
                    <img src="{!! getCmsFileUrl(@$metaArr['content_img6']) !!}" class="img-fluid">
                </div>
                @endif
                @endif
                @php */ @endphp
                @foreach($rightContents as $key => $rcontent)
                <div class="fs-steps-card readMoreContent" data-lines="5">
                    <div class="fs-steps-card-img">
                        <img src="{!! getCmsFileUrl($rcontent['icon']) !!}" class="img-fluid" alt="icon">
                    </div>
                    <div class="fs-steps-card-content">
                        <h5>{!! $rcontent['title'] !!}</h5>
                        <p class="mb-0">
                            {!! displayShortDescriptionInCmsBox(@$rcontent['description']) !!}
                        </p>
                    </div>

                    @if(!empty($rcontent['typeform_id']))
                    <a href="javascript:void(0)"
                       data-tf-slider="{!! $rcontent['typeform_id'] !!}"
                       data-tf-width="550"
                       data-tf-medium="snippet"
                       class="fs-steps-card-arrow-btn">
                       <img src="{!! asset('assets/frontend/images/arrow-right-blue.png') !!}" alt="arrow">
                    </a>
                    @elseif(!empty($rcontent['link']))
                    <a href="{!! $rcontent['link'] !!}"
                       class="fs-steps-card-arrow-btn"
                       @if(!empty($rcontent['link_open_in_new_tab'])) target="_blank" @endif>
                       <img src="{!! asset('assets/frontend/images/arrow-right-blue.png') !!}" alt="arrow" />
                    </a>
                    @endif

                    <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">{!! $rcontent['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">
                                            <img src="{!! getCmsFileUrl($rcontent['icon']) !!}" class="img-fluid">
                                        </div>
                                    </div>
                                    <p>{!! @$rcontent['description'] !!}</p>
                                </div>
                                <div class="text-center mt-3 mt-3 mb-3">
                                    @if(!empty($rcontent['typeform_id']))
                                    <a href="javascript:void(0)" data-tf-slider="{!! $rcontent['typeform_id'] !!}" data-tf-width="550" data-tf-medium="snippet" class="">
                                       <img src="{!! asset('assets/frontend/images/arrow-right-blue.png') !!}" alt="arrow">
                                    </a>
                                    @elseif(!empty($rcontent['link']))
                                    <a href="{!! $rcontent['link'] !!}" class="" @if(!empty($rcontent['link_open_in_new_tab'])) target="_blank" @endif>
                                       <img src="{!! asset('assets/frontend/images/arrow-right-blue.png') !!}" alt="arrow" />
                                    </a>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </div>
</section>
@endif
<!-- END STEPS SECTION -->

<!-- START BELIEVE SECTION -->
<section class="fs-believe-sec sec-py">
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                @if(@$metaArr['quick_link_img_type'] == "video")
                <x-video-js-player :src="$metaArr['quick_link_img']" id="quick_link_img" />
                @else
                <div class="fs-believe-img">
                    <img src="{!! getCmsFileUrl(@$metaArr['quick_link_img']) !!}" class="img-fluid">
                </div>
                @endif
            </div>
            <div class="col-md-6">
                <div class="sec-title line-left">
                    <strong>{!! @$metaArr['quick_link_subtitle'] !!}</strong>
                    <h2 class="text-dark">{!! @$metaArr['quick_link_title'] !!}</h2>
                </div>
                <p class="sec-title-para">
                    {!! @$metaArr['quick_link_description'] !!}
                </p>

                @if(@$metaArr['quick_link_btn_caption'] && @$metaArr['quick_link_btn_typeform_id'])
                <!-- <a href="{!! @$metaArr['quick_link_btn_link'] !!}" class="btn btn-theme-blue mt-4">{!! @$metaArr['quick_link_btn_caption'] !!}</a> -->
                <button data-tf-slider="{!! @$metaArr['quick_link_btn_typeform_id'] !!}" data-tf-width="550" data-tf-medium="snippet" class="btn btn-theme-blue mt-4">{!! @$metaArr['quick_link_btn_caption'] !!}</button>
                @endif
            </div>
        </div>
    </div>
</section>
<!-- END BELIEVE SECTION -->
@includeIf('front.includes.elexio_form')

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

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

@endsection

@section('js')
@stack('js')
<script src="//embed.typeform.com/next/embed.js"></script>
@endsection