@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 MI-ABOUT SECTION -->
<section class="au-page-sec sec-py">
    <div class="container">
        <div class="row">
            <div class="col-xl-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="mi-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>
                    <!-- <h4>Upcoming Class: Theology on Tap</h4> -->
                    <p class="sec-title-para">
                        {!! @$metaArr['content_description'] !!}
                    </p>
                    <!-- <button type="button" class="btn btn-theme-blue">Find out more</button> -->
                </div>
            </div>
        </div>
    </div>
</section>
<!-- END MI-ABOUT SECTION -->

<!-- START VIDEO SECTION -->
<section class="video-sec sec-py" @if(@$metaArr['video_bg_img_type'] == "image") style="background-image: url({!! getCmsFileUrl(@$metaArr['video_bg_img']) !!});" @endif>
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6 text-center">
                @if(@$metaArr['video_link'])
                <div class="video-wraper" id="videoWraper" style="display:none;">
                    <x-video-js-player :src="$metaArr['video_link']" id="videoPlayer" />
                    <a href="javascript:void(0)" class="video-close-btn">
                        <i class="fas fa-x"></i>
                    </a>
                </div>
                <a href="javascript:void(0)" class="au-video-icon">
                    <img src="{!! asset('assets/frontend/images/play-icon-blue.png') !!}" class="img-fluid" alt="play-icon-blue">
                </a>
                @endif
            </div>
            <div class="col-lg-5 ms-auto">
                <div class="sec-title mb-4">
                    <h2>{!! $metaArr['video_title'] !!}</h2>
                </div>
                <p class="sec-title-para text-light mb-0" style="font-weight: 300;">
                    {!! $metaArr['video_description'] !!}
                </p>
                @if(@$metaArr['video_btn_link'] && @$metaArr['video_btn_caption'])
                <div class="mt-4 mx-auto">
                    <a class="btn btn-outline-white w-100" href='{!! @$metaArr['video_btn_link'] !!}' @if(@$metaArr['video_btn_link_open_in_new_tab']) target="_blank" @endif>{!! @$metaArr['video_btn_caption'] !!}</a>
                </div>
                @endif
            </div>
        </div>
    </div>
</section>
<!-- END VIDEO SECTION -->

@if(isset($metaArr['checklists']) && is_array($metaArr['checklists']) && count($metaArr['checklists']) > 0)
<!-- START STEPS SECTION -->
<section class="mi-steps-sec sec-py bg-lightgray">
    <div class="container">
        <div class="row">
            <div class="col-lg-6">
                @foreach($metaArr['checklists'] as $checklists)
                <div class="fs-steps-card">
                    <div class="fs-steps-card-img"><img src="{!! getCmsFileUrl($checklists['icon']) !!}" alt="mi-icon" /></div>
                    <div class="fs-steps-card-content">
                        <h5>{!! $checklists['title'] !!}</h5>
                        <p class="mb-0">{!! $checklists['description'] !!}</p>
                    </div>
                    <a href="{!! $checklists['more_info'] !!}" class="fs-steps-card-arrow-btn" @if(@$checklists['more_info_open_in_new_tab']) target="_blank" @endif><img src="{!! asset('assets/frontend/images/arrow-right-blue.png') !!}" alt="arrow-right-blue" /></a>
                </div>
                @endforeach
            </div>
            <div class="col-lg-6 ms-auto">
                @if(@$metaArr['checklist_img_type'] == "video")
                <x-video-js-player :src="$metaArr['checklist_img']" id="checklist_img" />
                @else
                <div class="setp-img-col">
                    <img src="{!! getCmsFileUrl(@$metaArr['checklist_img']) !!}" class="img-fluid">
                </div>
                @endif
            </div>
        </div>
    </div>
</section>
<!-- END STEPS SECTION -->
@endif

@if(request()->segment(1) != "upcoming-baptism-information")
<!-- START UPCOMMING CLASSES SECTION -->
<section class="upcmig-clses-sec sec-py bg-lightgray">
    <div class="container">
        <div class="row gx-lg-5">
            <div class="col-md-12 mb-4">
                <div class="sec-title mb-4 text-center text-dark">
                    <!-- <strong>What We do</strong> -->
                    <h2>Upcoming Classes</h2>
                </div>
                @if(isset($data['upcomingClasses']) && $data['upcomingClasses']->total() > 0)
                <div class="grid-list-tab-nav">
                    <ul class="nav nav-pills" id="pills-tab" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" data-bs-toggle="pill" data-bs-target="#gridClasses" type="button" role="tab" aria-controls="gridClasses" aria-selected="true"><i class="bi bi-grid-fill"></i></button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" data-bs-toggle="pill" data-bs-target="#listClasses" type="button" role="tab" aria-controls="listClasses" aria-selected="false"><i class="bi bi-list-ul"></i></button>
                        </li>
                        <li class="nav-item d-lg-none" role="presentation">
                            <button class="nav-link filter-btn text-white px-sm-2" style="background-color:#1E439B;width:auto;" aria-selected="false"><i class="bi bi-funnel"></i> <span class="d-sm-none">Filters</span></button>
                        </li>
                    </ul>
                </div>
                @endif
            </div>
            <div class="col-xxl-3 col-lg-4 filter-col">
                <div class="filter-view">
                    <div class="filter-title">Filters</div>
                    <div class="filter-innerview">
                        <div class="filter-sec-title">Type</div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value="" id="classTypeAll" @if(request()->has('types') && request()->types == "") checked @endif>
                            <label class="form-check-label" for="classTypeAll">All</label>
                        </div>
                        @foreach(classTypes() as $key=>$classType)
                        <div class="form-check">
                            <input class="form-check-input clsClassType" type="checkbox" value="{!! $classType !!}" id="filterCheck{!! $key !!}" @if(request()->has('types') && (in_array($classType,explode(",",request()->types)) || request()->types == "")) checked @endif>
                            <label class="form-check-label" for="filterCheck{!! $key !!}">{!! $classType !!}</label>
                        </div>
                        @endforeach
                        <hr>
                        <div class="filter-sec-title">Categories</div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value="" id="classCatAll" @if(request()->has('catids') && request()->catids == "") checked @endif>
                            <label class="form-check-label" for="clsClassCatAll">
                                All
                            </label>
                        </div>
                        @if(isset($data['classCategories']) && $data['classCategories']->count() > 0)
                        @foreach($data['classCategories'] as $classCategory)
                        <div class="form-check">
                            <input class="form-check-input clsClassCat" type="checkbox" value="{!! $classCategory->id !!}" id="class_cat_{!! $classCategory->id !!}" @if(request()->has('catids') && (in_array($classCategory->id,explode(",",request()->catids)) || request()->catids == "")) checked @endif>
                            <label class="form-check-label" for="class_cat_{!! $classCategory->id !!}">
                                {!! $classCategory->name !!}
                            </label>
                        </div>
                        @endforeach
                        @endif
                    </div>
                    <div class="row w-100 mx-auto p-3">
                        <button type="button" class="btn btn-theme-blue" onclick="javascript:filterClass()" style="flex: 1;margin-right: 3px; min-width:auto;">Apply</button>
                        &nbsp;
                        <button type="button" class="btn btn-theme-blue" onclick="javascript:resetClassFilter()" style="flex:1;margin-left: 3px;min-width:auto;">Clear</button>
                    </div>
                </div>
                <button type="button" class="filter-btn filter-backdrop"></button>
            </div>
            <div class="col-xxl-9 col-lg-8">
                <div class="tab-content" id="pills-tabContent">
                    <div class="tab-pane fade show active" id="gridClasses" role="tabpanel">
                        @if(isset($data['upcomingClasses']) && $data['upcomingClasses']->total() > 0)
                        <div class="row my-classes-card-row">
                            @foreach($data['upcomingClasses'] as $upcomingClassGrid)
                            {!! getClassBlock($upcomingClassGrid) !!}
                            @endforeach
                        </div>
                        <div class="row mt-3">
                            {!! $data['upcomingClasses']->withQueryString()->links() !!}
                        </div>
                        @else
                            @if(@$metaArr['upcoming_classes_not_found_text'])
                            <p>{!! $metaArr['upcoming_classes_not_found_text'] !!}</p>
                            @endif
                            @if(@$metaArr['upcoming_classes_not_found_elexio_embed_code'])
                            <section class="register-form-sec sec-py">
                                {!! $metaArr['upcoming_classes_not_found_elexio_embed_code'] !!}
                            </section>
                            @endif
                        @endif

                        @if(isset($data['seriess']) && $data['seriess']->count() > 0)
                        <h2>On Demand Series</h2>
                        <div class="row my-classes-card-row">
                            @foreach($data['seriess'] as $series)
                            <div class="col-xxl-4 col-xl-6 col-lg-4 col-sm-6 Col mb-4">
                                <a href="{!! $series->page_url !!}" class="my-classes-card">
                                    <div class="my-classes-status"><div class="classes-type-badge clstypein-person">On Demand</div></div>
                                    <div class="my-classes-img"><img src="{!! $series->avatar_url !!}" class="img-fluid" alt="{!! $series->name !!}"></div>
                                    <h4>{!! $series->name !!}</h4>
                                    <p>{!! substr(strip_tags($series->description),0, 175) !!}..</p>
                                </a>
                            </div>

                            <div class="modal fade historyParaModal" id="details_{!! $series->id !!}" tabindex="-1" aria-labelledby="historyModal" 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">{!! $series->name !!}</h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body">
                                            <div>{!! $series->description !!}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        </div>
                        @endif
                    </div>
                    <div class="tab-pane fade" id="listClasses" role="tabpanel">
                        @if(isset($data['upcomingClasses']) && $data['upcomingClasses']->total() > 0)
                        @foreach($data['upcomingClasses'] as $upcomingClassList)
                        <div class="classes-card horizontal">
                            <div class="classes-card-img">
                                <img src="{!! $upcomingClassList->image_url !!}" alt="au-learn-3">
                            </div>
                            <div class="classes-card-content">
                                <h6>
                                    <i class="bi bi-calendar4-week"></i>
                                    {!! convertUtcToLocal($upcomingClassList->start_date_time,'l') !!} | {!! convertUtcToLocal($upcomingClassList->start_date_time,config('constants.DISPLAY_DATE_FORMAT')) !!} @
                                    {!! displayStartEndTime($upcomingClassList) !!}
                                </h6>
                                <h3><a href="{!! $upcomingClassList->page_url !!}">{!! $upcomingClassList->name !!}</a></h3>
                                @if($upcomingClassList->location)
                                <p><i class="bi bi-geo-alt-fill"></i> {!! $upcomingClassList->location !!}</p>
                                @endif
                            </div>
                        </div>
                        @endforeach
                        <div class="row">
                            {!! $data['upcomingClasses']->withQueryString()->links() !!}
                        </div>
                        @else
                            @if(@$metaArr['upcoming_classes_not_found_text'])
                            <p>{!! $metaArr['upcoming_classes_not_found_text'] !!}</p>
                            @endif
                            @if(@$metaArr['upcoming_classes_not_found_elexio_embed_code'])
                            <section class="register-form-sec sec-py">
                                {!! $metaArr['upcoming_classes_not_found_elexio_embed_code'] !!}
                            </section>
                            @endif
                        @endif

                        @if(isset($data['seriess']) && $data['seriess']->count() > 0)
                        <h2>On Demand Series</h2>
                        @foreach($data['seriess'] as $series)
                        <div class="classes-card horizontal">
                            <div class="classes-card-img">
                                <a href="{!! $series->page_url !!}" class="odl-card-img">
                                    <img src="{!! $series->avatar_url !!}" class="img-fluid" alt="{!! $series->image_alt !!}" />
                                </a>
                            </div>
                            <div class="classes-card-content">
                                <a href="{!! $series->page_url !!}"><h4>{!! $series->name !!}</h4></a>
                                <p class="p-0">{!! substr(strip_tags($series->description),0, 200) !!}..</p>
                            </div>
                        </div>
                        @endforeach
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- END UPCOMMING CLASSES SECTION -->
@endif

@php /* @endphp
<!-- START SHARE CLASSES SECTION -->
<section class="sec-py">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 mx-auto text-center">
                <div class="sec-title">
                    <!-- <strong>Ministry</strong> -->
                    <h2>{!! $metaArr['quick_link_title'] !!}</h2>
                </div>
                <p class="sec-title-para">
                    {!! $metaArr['quick_link_description'] !!}
                </p>
            </div>
        </div>
        @if(isset($metaArr['quicklinks']) && is_array($metaArr['quicklinks']) && count($metaArr['quicklinks']) > 0)
        <div class="row mt-5 gx-md-5 justify-content-center">
        @foreach($metaArr['quicklinks'] as $quicklinks)
            <div class="col-lg-4 col-md-6 mb-lg-0 mb-4">
                <div class="classes-share">
                    <img src="{!! getCmsFileUrl($quicklinks['img']) !!}" class="img-fluid classes-share-img" alt="{!! $quicklinks['title'] !!}">
                    <div class="overlay">
                        <div class="social-row">
                            <a href="javascript:void(0)" class="social-icon-btn" onclick="javascript:socialShare('mail','{!! getCmsFileUrl($quicklinks['img']) !!}','{!! $quicklinks['description'] !!}')"><img src="{!! asset('assets/frontend/images/mail-circle-blue.png') !!}" alt="fb-circle-blue"></a>
                            <a href="javascript:void(0)" class="social-icon-btn" onclick="javascript:socialShare('message','{!! getCmsFileUrl($quicklinks['img']) !!}','{!! $quicklinks['description'] !!}')"><img src="{!! asset('assets/frontend/images/message-circle-blue.png') !!}" alt="fb-circle-blue"></a>
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
        </div>
        @endif
    </div>
</section>
@php */ @endphp

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

@endsection

@section('js')
@stack('js')
<script>
@if(request()->get('sto'))
scrollToDiv('{!! request()->get('sto') !!}')
@endif
</script>
<script src="{!! asset('assets/frontend/js/pages/meck-institute.js') !!}"></script>
@endsection