@extends('front.layouts.app')
@section('content')
    <!-- START BANNER SECTION --------------------------->
    <div class="home-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="row h-100 align-items-center">
                <div class="col-sm-6">
                    <div class="banner-content">
                        <h4>{!! @$metaArr['main_banner_subtitle'] !!}</h4>
                        <h1>{!! @$metaArr['main_banner_title'] !!}</h1>
                        <p>{!! @$metaArr['main_banner_description'] !!}</p>
                        @if(@$metaArr['main_banner_more_info'])
                        <a href="{!! @$metaArr['main_banner_more_info'] !!}" class="btn btn-theme-blue" @if(@$metaArr['main_banner_btn_link_open_in_new_tab']) target="_blank" @endif>{!! @$metaArr['main_banner_btn_caption'] ?? "More Info" !!}</a>
                        @endif
                    </div>
                </div>
                @if(isset($data['liveEvent']))
                <input type="hidden" id="isLive" value="1">
                <div class="col-sm-6">
                    <div class="timer-container live" onclick="javascript:window.location.href='{!! route('onlinecampus') !!}'" style="height:auto">
                        <img src="{!! $data['liveEvent']->image_url !!}" class="img-fluid" alt="{!! removeTagsFromAltText($data['liveEvent']->name) !!}">
                        <div class="live-event-btn-row">
                            <a href="#" class="btn live-event-btn">
                                <span>Click Here To Join</span>
                                <span><i class="bi bi-broadcast"></i> Live Now</span>
                            </a>
                        </div>
                    </div>
                    <div id="live_event_timer" data-start_date_time="{!! $data['liveEvent']->start_date_time !!}" data-end_date_time="{!! $data['liveEvent']->end_date_time !!}" style="display:none"></div>
                </div>
                @elseif(isset($data['nextEvent']))
                <input type="hidden" id="isLive" value="0">
                <div class="col-sm-6">
                    <div class="timer-container" onclick="javascript:window.location.href='{!! $data['nextEvent']->page_url !!}'">
                        <img src="{!! $data['nextEvent']->image_url !!}" class="img-fluid" alt="{!! removeTagsFromAltText($data['nextEvent']->name) !!}">
                        <h5>{!! $metaArr['main_banner_next_event_title'] ?? "Next Event In" !!}</h5>
                        <div class="countdown countdown-row" id="timer" data-start_date_time="{!! $data['nextEvent']->start_date_time !!}">
                            <!-- 16 february 2023 10:00:00 GMT+01:00 -->
                            <div class="countdown-col" id="days"></div>
                            <div class="countdown-col" id="hours"></div>
                            <div class="countdown-col" id="minutes"></div>
                            <div class="countdown-col" id="seconds"></div>
                        </div>
                    </div>
                </div>
                @endif
            </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 BANNER SECTION -->

    <!-- START QUICK LINKS SECTION -->
    <section class="about-us-sec sec-py">
        <div class="container">
            <div class="row">
                <div class="col-12 mb-4">
                    <a href="{!! @$metaArr['quick_link_more_info'] ?? 'javascript:void(0)' !!}" class="campus-warpper first" @if(@$metaArr['quick_link_more_info'] && @$metaArr['quick_link_more_info_open_in_new_tab']) target="_blank" @endif>
                        <h4>{!! @$metaArr['quick_link_title'] !!}</h4>
                        {!! @$metaArr['quick_link_description'] !!}
                        @if(@$metaArr['quick_link_img_type'] == "video")
                        <video autoplay loop muted playsinline>
                            <source src="{!! getCmsFileUrl(@$metaArr['quick_link_img']) !!}" type="video/mp4">
                            <source src="{!! getCmsFileUrl(@$metaArr['quick_link_img']) !!}" type="video/ogg">
                            Your browser does not support the video tag.
                        </video>
                        @else
                        <img src="{!! getCmsFileUrl(@$metaArr['quick_link_img']) !!}" class="img-fluid campus-img" alt="{!! removeTagsFromAltText(@$metaArr['quick_link_title']) !!}">
                        @endif
                    </a>
                </div>
                @for($i=1;$i<=4;$i++)
                <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
                    <a href="{!! @$metaArr['quick_link_box'.$i.'_more_info'] ?? 'javascript:void(0)' !!}" class="campus-warpper" @if(@$metaArr['quick_link_box'.$i.'_more_info'] && @$metaArr['quick_link_box'.$i.'_more_info_open_in_new_tab']) target="_blank" @endif>
                        <img src="{!! getCmsFileUrl(@$metaArr['quick_link_box'.$i.'_icon']) !!}" class="campus-icon" alt="{!! removeTagsFromAltText(@$metaArr['quick_link_box'.$i.'_title']) !!}">
                        <h5>{!! @$metaArr['quick_link_box'.$i.'_title'] !!}</h5>
                        <p>{!! @$metaArr['quick_link_box'.$i.'_description'] !!}</p>
                        @if(@$metaArr['quick_link_box'.$i.'_bgimg_type'] == "video")
                        <video autoplay loop muted playsinline>
                            <source src="{!! getCmsFileUrl(@$metaArr['quick_link_box'.$i.'_bgimg']) !!}" type="video/mp4">
                            <source src="{!! getCmsFileUrl(@$metaArr['quick_link_box'.$i.'_bgimg']) !!}" type="video/ogg">
                            Your browser does not support the video tag.
                        </video>
                        @else
                        <img src="{!! getCmsFileUrl(@$metaArr['quick_link_box'.$i.'_bgimg']) !!}" class="img-fluid campus-img">
                        @endif
                    </a>
                </div>
                @endfor
            </div>
        </div>
    </section>
    <!-- END QUICK LINKS SECTION -->
    <!-- <div id="recommendedProductsSection"></div> -->
    <!-- END PRODUCTS SECTION -->

    <!-- START ABOUT US SECTION -->
    <section class="about-us-sec sec-py">
        <div class="container">
            <div class="about-us-content">
                <div class="sec-title">
                    <strong>About Us</strong>
                    <h2>{!! @$metaArr['aboutus_title'] !!}</h2>
                </div>
                {!! @$metaArr['aboutus_description'] !!}
                @if(@$metaArr['aboutus_more_info'])
                <a href="{!! @$metaArr['aboutus_more_info'] !!}" class="btn btn-theme-blue" @if(@$metaArr['aboutus_more_info_open_in_new_tab']) target="_blank" @endif>{!! @$metaArr['aboutus_btn_caption'] ?? "More Info" !!}</a>
                @endif
            </div>
        </div>
    </section>
    <!-- END ABOUT US SECTION -->

    @if(isset($metaArr['recent_news']) && is_array($metaArr['recent_news']) && count($metaArr['recent_news']) > 0)
    <!-- START SERIES SECTION -->
    <section class="series-sec sec-py">
        <div class="container">
            <div class="row">
                <div class="col-xl-12 mx-auto series-slider-col">
                    <div class="series-slider">
                        @foreach($metaArr['recent_news'] as $key => $recentNews)
                        <div>
                            <div class="series-card">
                                <div class="series-img-wrap">
                                    @if(@$recentNews['img_type'] == "video")
                                    <video controls>
                                        <source src="{!! getCmsFileUrl(@$recentNews['img']) !!}" type="video/mp4">
                                        <source src="{!! getCmsFileUrl(@$recentNews['img']) !!}" type="video/ogg">
                                        Your browser does not support the video tag.
                                    </video>
                                    @else
                                    <img src="@if(@$recentNews['img']) {!! getCmsFileUrl(@$recentNews['img']) !!} @else {!! asset('assets/frontend/images/no-image.png') !!} @endif" class="img-fluid" alt="{!! removeTagsFromAltText($recentNews['title']) !!}">
                                    @endif
                                </div>
                                <div class="series-card-body">
                                    <div class="newsReadMoreContent">
                                        <div class="sec-title">
                                            <strong>{!! $recentNews['category'] !!}</strong>
                                            <h2>{!! $recentNews['title'] !!}</h2>
                                        </div>
                                        <p>
                                            {!! displayShortDescriptionInCmsBox(@$recentNews['description'],350,"recentnews_".$key) !!}
                                        </p>
                                    </div>
                                </div>
                                @if(@$recentNews['more_info'])
                                <a href="{!! $recentNews['more_info'] !!}" class="btn btn-theme-blue" @if(@$recentNews['more_info_open_in_new_tab']) target="_blank" @endif>{!! @$recentNews['btn_caption'] ?? "More Info" !!}</a>
                                @endif
                            </div>
                        </div>
                        @endforeach
                    </div>
                    <!-- <div class="owl-navigation">
                        <div class="owl-prev owl-arrow-btn"><i class="bi bi-chevron-left"></i></div>
                        <div id='custom-dots' class="custom-dots owl-dots"></div>
                        <div class="owl-next owl-arrow-btn"><i class="bi bi-chevron-right"></i></div>
                    </div> -->
                </div>
            </div>
        </div>
    </section>
    @foreach($metaArr['recent_news'] as $key => $recentNews)
    <div class="modal fade historyParaModal" id="recentnews_{!! $key !!}" 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">{!! $recentNews['title'] !!}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div>{!! $recentNews['description'] !!}</div>
                </div>
            </div>
        </div>
    </div>
    @endforeach
    <!-- END SERIES SECTION -->
    @endif

    @if(isset($metaArr['pastor_name']) && isset($metaArr['pastor_description']) && isset($metaArr['pastor_designation']))
    <!-- START PASTOR SECTION -->
    <section class="pastor-sec sec-py">
        <div class="container">
            <div class="row">
                <div class="col-lg-5">
                    @if(@$metaArr['pastor_img_type'] == "video")
                    <x-video-js-player :src="$metaArr['pastor_img']" id="pastor_img" />
                    @else
                        <div class="pastor-wrapper d-lg-none">
                            <img src="{!! getCmsFileUrl(@$metaArr['pastor_img']) !!}" class="img-fluid" alt="{!! removeTagsFromAltText(@$metaArr['pastor_name']) !!}">
                        </div>
                    @endif
                    <div class="pastor-content">
                        <div class="sec-title">
                            <strong>{!! @$metaArr['pastor_designation'] !!}</strong>
                            <h2>{!! @$metaArr['pastor_name'] !!}</h2>
                        </div>
                        {!! @$metaArr['pastor_description'] !!}
                        @if(@$metaArr['pastor_more_info'])
                        <a href="{!! @$metaArr['pastor_more_info'] !!}" class="btn btn-theme-blue" @if(@$metaArr['pastor_more_info_open_in_new_tab']) target="_blank" @endif>{!! @$metaArr['pastor_btn_caption'] ?? "More Info" !!}</a>
                        @endif
                    </div>
                </div>
                <div class="col-lg-6 ms-auto d-none d-lg-block">
                    @if(@$metaArr['pastor_img_type'] == "video")
                    <x-video-js-player :src="$metaArr['pastor_img']" id="pastor_img" />
                    @else
                    <div class="pastor-wrapper">
                        <img src="{!! getCmsFileUrl(@$metaArr['pastor_img']) !!}" class="img-fluid" alt="{!! removeTagsFromAltText(@$metaArr['pastor_name']) !!}">
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </section>
    <!-- END PASTOR SECTION -->
    @endif

    @if(isset($metaArr['testimonials']) && is_array($metaArr['testimonials']) && count($metaArr['testimonials']) > 0)
    <!-- START TESTIMONIAL SECTION -->
    <section class="testimonial-sec" @if(@$metaArr['testimonial_img_type'] == "image") style="background-image: url({!! getCmsFileUrl(@$metaArr['testimonial_img']) !!});" @endif>
        <div class="container h-100">
            <div class="row h-100 align-content-center">
                <div class="col-lg-12">
                    <div class="owl-carousel testimonial-slider">
                        @foreach($metaArr['testimonials'] as $key => $testimonials)
                        <div class="testimonial-content">
                            {!! $testimonials['description'] !!}
                            @if(strlen(strip_tags($testimonials['description'])) > 400)
                            <a href="javascript:void(0)" class="read-more" onclick="javascript:$('#testimonials_{!! $key !!}').modal('show');">Read more...</a>
                            @endif
                            <div>
                                <span class="author">- {!! $testimonials['author'] !!}</span>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
        @if(@$metaArr['testimonial_img_type'] == "video")
        <video autoplay loop muted playsinline>
            <source src="{!! getCmsFileUrl(@$metaArr['testimonial_img']) !!}" type="video/mp4">
            <source src="{!! getCmsFileUrl(@$metaArr['testimonial_img']) !!}" type="video/ogg">
            Your browser does not support the video tag.
        </video>
        @endif

    </section>
    @foreach($metaArr['testimonials'] as $key => $testimonials)
    <div class="modal fade testimonialParaModal" id="testimonials_{!! $key !!}" tabindex="-1" aria-labelledby="testimonialModal" 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">Testimonial</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    {!! $testimonials['description'] !!}
                    <strong>{!! $testimonials['author'] !!}</strong>
                </div>
            </div>
        </div>
    </div>
    @endforeach
    <!-- END TESTIMONIAL SECTION -->
    @endif


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

    @includeIf('front.includes.newsletter')

    <!-- START CONTACT US SECTION -->
    <section class="contact-us-sec sec-py" id="contact-us-sec">
        <div class="container">
            <div class="row">
                <div class="col-xl-5 col-lg-6 mb-4 mb-lg-0">
                    <div class="sec-title">
                        <strong>Contact Form</strong>
                        <h2>Send Us a Message</h2>
                    </div>
                    <form class="contact-us-form row" id="frmContactus" method="post" action="{!! route('storeContactus') !!}">
                        @csrf
                        <div class="col-md-6 mb-4">
                            <input type="text" class="form-control" id="contactus_name" name="name" placeholder="Full Name" autocomplete="off">
                        </div>
                        <div class="col-md-6 mb-4">
                            <input type="email" class="form-control" id="contactus_email" name="email" placeholder="Email" autocomplete="off">
                        </div>
                        <div class="col-md-12 mb-4">
                            <textarea class="form-control" id="contactus_message" name="message" rows="5" placeholder="Message" autocomplete="off"></textarea>
                        </div>
                        <div class="col-md-12 mb-4">
                            <div class="form-check">
                                <input type="checkbox" class="form-check-input" id="contactus_agree" name="agree" value="1">
                                <label class="form-check-label" for="newsletter-check">I agree that my submitted data is being collected and stored.</label>
                            </div>
                        </div>
                        <div class="col-md-12 mb-4">
                            {!! NoCaptcha::renderJs() !!}
                            {!! app('captcha')->display() !!}
                            <input type="hidden" class="hiddenRecaptcha required" name="hiddenRecaptcha" id="hiddenRecaptcha">
                            <label id="hiddenRecaptcha-error" class="error" for="hiddenRecaptcha"></label>
                            @error('g-recaptcha-response')
                            <label class="error">{{ $message }}</label>
                            @enderror
                        </div>
                        <div class="col-md-12 text-center text-lg-start">
                            <button type="submit" class="btn btn-theme-blue">Send Message</button>
                        </div>
                    </form>
                </div>
                <div class="col-xl-5 col-lg-6 ms-auto">
                    <div class="map-wrapp">
                        <iframe src="{!! $siteSettings->location_map_link ?? config('constants.LOCATION_MAP_LINK') !!}" width="100%" height="100%" style="border:0;" allowfullscreen loading="lazy"></iframe>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- END CONTACT US SECTION -->

    @includeIf('front.includes.faq')

@section('js')
<link rel="stylesheet" type="text/css" href="{!! asset('assets/frontend/css/slick.css') !!}" />
<link rel="stylesheet" type="text/css" href="{!! asset('assets/frontend/css/slick-theme.css') !!}" />
<script src="{!! asset('assets/frontend/js/pages/home.js') !!}?v=1.2"></script>
@stop
@endsection