@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 ABOUT SECTION -->
<section class="pastor-page-sec sec-py">
    <div class="container">
        <div class="pastor-page-content">
            <div class="row">
                <div class="col-xl-8 mx-auto">
                    <div class="sec-title text-center">
                        <strong>{!!@$metaArr['content_subtitle'] !!}</strong>
                        <h2>{!!@$metaArr['content_title'] !!}</h2>
                    </div>
                    <p class="mb-0 text-center">
                        {!!@$metaArr['content_description'] !!}
                    </p>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- END ABOUT SECTION -->

<!-- START MRG PRE-PLAN SECTION -->
<section class="pre-plan-sec sec-py" @if(@$metaArr['banner_img_type'] == "image") style="background-image: url({!! getCmsFileUrl(@$metaArr['banner_img']) !!})" @endif style="z-index:150;">
    <div class="container">
        <div class="row">
            <div class="col-lg-10 mx-auto">
                <div class="sec-title text-center">
                    <strong>{!! @$metaArr['banner_subtitle']!!}</strong>
                    <h2>{!! @$metaArr['banner_title']!!}</h2>
                </div>
                <p>{!! @$metaArr['banner_description']!!}</p>
                <div class="row">
                    @for($i=1;$i<=2;$i++)
                    @if(@$metaArr['banner_btn'.$i.'_link'] && @$metaArr['banner_btn'.$i.'_caption'])
                    <div class="col-md-6 mb-md-0 mb-4 mx-auto">
                        <a class="btn btn-outline-white w-100" href='{!! @$metaArr['banner_btn'.$i.'_link'] !!}' @if(@$metaArr['banner_btn'.$i.'_open_in_new_tab']) target="_blank" @endif>{!! @$metaArr['banner_btn'.$i.'_caption'] !!}</a>
                    </div>
                    @endif
                    @endfor
                </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 PRE-PLAN SECTION -->

@includeIf('front.includes.elexio_form')

<!-- START WEDDINGS SECTION -->
<section class="mrg-wedding-sec sec-py bg-lightgray">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-5">
                <div class="sec-title line-left">
                    <strong>{!! @$metaArr['checklist_subtitle'] !!}</strong>
                    <h2>{!! @$metaArr['checklist_title'] !!}</h2>
                </div>
                <p>{!! @$metaArr['checklist_description'] !!}</p>
            </div>
            <div class="col-lg-6 ms-auto mt-lg-0 mt-4">
                @if(isset($metaArr['checklists']) && is_array($metaArr['checklists']) && count($metaArr['checklists']) > 0)
                @foreach($metaArr['checklists'] as $checklists)
                <div class="wedding-checklist-row">
                    <div style="flex:1">
                        <h6>{!! $checklists['title'] !!}</h6>
                        <p>{!! $checklists['description'] !!}</p>
                    </div>

                    @if(@$checklists['typeform_id'])
                    <a href="javascript:void(0)" data-tf-slider="{!! @$checklists['typeform_id'] !!}" data-tf-width="550" data-tf-medium="snippet" class="d-block ms-2"><img src="{!! asset('assets/frontend/images/arrow-right-blue.png') !!}" alt="arrow-right-blue" class="img-fluid class-arrow-icon"></a>
                    @elseif(@$checklists['more_info'])
                    <a href="{!! $checklists['more_info'] !!}" class="d-block ms-2" @if(@$checklists['link_open_in_new_tab']) target="_blank" @endif><img src="{!! asset('assets/frontend/images/arrow-right-blue.png') !!}" alt="arrow-right-blue" class="img-fluid class-arrow-icon"></a>
                    @endif
                </div>
                @endforeach
                @endif
            </div>
        </div>
    </div>
</section>
<!-- END WEDDINGS SECTION -->

<!-- START AFTER MRG SECTION -->
<section class="after-mrg-sec sec-py">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 mx-auto text-center">
                <div class="sec-title">
                    <strong>{!! @$metaArr['quick_link_subtitle']!!}</strong>
                    <h2>{!! @$metaArr['quick_link_title']!!}</h2>
                </div>
                <p class="sec-title-para mb-0">
                    {!! @$metaArr['quick_link_description']!!}
                </p>
            </div>
        </div>
        <div class="row mt-4 g-lg-5">
            @for($i=1;$i<=4;$i++)
            <div class="col-lg-3 col-sm-6 aftr-mrg-card-col">
                <div class="aftr-mrg-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="img-fluid">
                        @endif
                    </div>

                    <h5>{!! @$metaArr['quick_link_box'.$i.'_title'] !!}</h5>
                    <p>{!! @$metaArr['quick_link_box'.$i.'_description'] !!}</p>
                    <a href="{!! @$metaArr['quick_link_box'.$i.'_more_info'] !!}" @if(@$metaArr['quick_link_box'.$i.'_more_info_open_in_new_tab']) target="_blank" @endif>
                        <img src="{!! asset('assets/frontend/images/arrow-right-blue.png') !!}" class="img-fluid class-arrow-icon">
                    </a>
                </div>
            </div>
            @endfor
        </div>
        @if(@$metaArr['bottom_text'])
        <div class="row mt-sm-5 mt-4">
            <div class="col-lg-8 mx-auto text-center">
                <p class="sec-title-para mb-0">
                    {!! @$metaArr['bottom_text'] !!}
                </p>
            </div>
        </div>
        @endif
    </div>
</section>
<!-- END AFTER MRG SECTION -->
@includeIf('front.includes.faq')

@endsection

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