@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 US SECTION -->
<section class="pastor-page-sec sec-py">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 artical-col">
                <div class="artical-img right">
                    <div class="pastor-profile-sec">
                        @if(@$metaArr['pastor_img'] != "")
                        @if(@$metaArr['pastor_img_type'] == "video")
                        <x-video-js-player :src="$metaArr['pastor_img']" id="pastor_img" />
                        @else
                        <div class="pastor-profile-img">
                            <img src="{!! getCmsFileUrl(@$metaArr['pastor_img']) !!}" class="img-fluid" alt="{!! removeTagsFromAltText(@$metaArr['pastor_name']) !!}">
                        </div>
                        @endif
                        @endif
                        <div class="pastor-profile-content">
                            <div class="ppc-content">
                                <div class="paster-name">{!! @$metaArr['pastor_name'] !!}</div>
                                <div class="paster-info">{!! @$metaArr['pastor_designation'] !!}</div>
                            </div>
                            <div class="social-icon-row">
                                @if(@$metaArr['pastor_facebook_link'])
                                <a href="{!! @$metaArr['pastor_facebook_link'] !!}" class="social-icon-btn" target="_blank">
                                    <i class="fab fa-facebook-f"></i>
                                </a>
                                @endif
                                @if(@$metaArr['pastor_twitter_link'])
                                <a href="{!! @$metaArr['pastor_twitter_link'] !!}" class="social-icon-btn" target="_blank" >
                                    {{-- <i class="fab fa-twitter"></i> --}}
                                    <i class="fab fa-x-twitter white"></i>
                                </a>
                                @endif
                                @if(@$metaArr['pastor_instagram_link'])
                                <a href="{!! @$metaArr['pastor_instagram_link'] !!}" class="social-icon-btn" target="_blank">
                                    <i class="fab fa-instagram"></i>
                                </a>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
                <div class="pastor-page-content artical-content">
                    <div class="sec-title line-left">
                        <strong>{!! @$metaArr['pastor_subtitle'] !!}</strong>
                        <h2>{!! @$metaArr['pastor_title'] !!}</h2>
                    </div>
                    {!! @$metaArr['pastor_description'] !!}
                </div>
            </div>
        </div>
    </div>
</section>
<!-- END ABOUT US SECTION -->

<!-- START VIDEO SECTION -->
<section class="au-video-sec" @if(@$metaArr['video_bg_img_type'] == "image") style="background: linear-gradient(0deg, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url({!! getCmsFileUrl(@$metaArr['video_bg_img']) !!});background-size:cover;background-position:center center;" @endif>
    <div class="container h-100">
        <div class="row h-100 align-items-center">
            <div class="col-md-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-md-6 mb-5 mb-md-0">
                <div class="sec-title line-left">
                    <strong>{!! @$metaArr['video_subtitle'] !!}</strong>
                    <h2>{!! @$metaArr['video_title'] !!}</h2>
                </div>
                @if(@$metaArr['video_btn_caption'] != "" && @$metaArr['video_btn_link'])
                <div class="text-center text-md-start mt-4">
                    <a class="btn btn-theme-blue" href="{!! @$metaArr['video_btn_link'] ?? 'javascript:void(0)' !!}" @if(@$metaArr['video_btn_link_open_in_new_tab']) target="_blank" @endif>{!! @$metaArr['video_btn_caption'] !!}</a>
                </div>
                @endif
            </div>
        </div>
    </div>
    @if(@$metaArr['video_bg_img_type'] == "video")
    <video autoplay loop muted playsinline>
        <source src="{!! getCmsFileUrl(@$metaArr['video_bg_img']) !!}" type="video/mp4">
        <source src="{!! getCmsFileUrl(@$metaArr['video_bg_img']) !!}" type="video/ogg">
        Your browser does not support the video tag.
    </video>
    @endif
</section>
<!-- END VIDEO SECTION -->

@if(isset($metaArr['blog_hide']) && !$metaArr['blog_hide'])
<!-- START BLOGS SECTION -->
<section class="personal-blog-sec sec-py">
    <div class="container">
        <div class="sec-title text-center">
            <strong>{!! $metaArr['blog_subtitle'] ?? '' !!}</strong>
            <h2>{!! $metaArr['blog_title'] ?? '' !!}</h2>
        </div>
        <div class="row">
            @if(count($data['blogs'] ?? []) > 0)
                @foreach(array_slice($data['blogs'], 0, 4) as $blogs)
                    <div class="col-lg-3 col-md-4 col-sm-6">
                        <a href="https://www.churchandculture.org{!! $blogs['fullUrl'] ?? '' !!}" class="pb-card" target="_blank">
                            <div class="pb-card-img">
                                <img src="{!! $blogs['assetUrl'] ?? '' !!}" class="img-fluid" alt="{!! $blogs['title'] ?? '' !!}">
                            </div>
                            <h4>{!! $blogs['title'] ?? '' !!}</h4>
                            @if(!empty($blogs['publishOn']))
                                <p class="date">
                                    {!! date(
                                        config('constants.DISPLAY_DATE_FORMAT'),
                                        $blogs['publishOn'] / 1000
                                    ) !!}
                                </p>
                            @endif
                        </a>
                    </div>
                @endforeach
            @endif

            <!-- Custom Blogs -->
            @if(!empty($metaArr['blog_link']) && !empty($metaArr['blog_btn_caption']))
                <div class="col-12 btn-col">
                    <a href="{!! $metaArr['blog_link'] !!}"
                       class="btn btn-theme-blue"
                       @if(!empty($metaArr['blog_link_open_in_new_tab'])) target="_blank" @endif>
                        {!! $metaArr['blog_btn_caption'] !!}
                    </a>
                </div>
            @endif
        </div>
    </div>
</section>
<!-- END BLOGS SECTION -->
@endif

@if(@$metaArr['podcast_iframe'] != "")
<section class="bpt-question-sec sec-py">
    <div class="container">
        <div class="sec-title text-center">
            <strong>{!! @$metaArr['podcast_subtitle'] !!}</strong>
            <h2>{!! @$metaArr['podcast_title'] !!}</h2>
        </div>
        {!! @$metaArr['podcast_iframe'] !!}
    </div>
</section>
@endif

<!-- START BOOKS SECTION -->
<section class="books-sec sec-py">
    <div class="container">
        <div class="books-container">
            <div class="row align-items-center">
                <div class="col-xl-5 col-md-6">
                    <div class="sec-title line-left">
                        <strong>{!! @$metaArr['book_subtitle'] !!}</strong>
                        <h2>{!! @$metaArr['book_title'] !!}</h2>
                    </div>
                    <p class="sec-title-para">{!! @$metaArr['book_description'] !!}</p>
                    <div class="books-img d-md-none">
                        @if(@$metaArr['book_img_type'] == "video")
                        <x-video-js-player :src="$metaArr['book_img']" id="book_img" />
                        @else
                        <img src="{!! getCmsFileUrl(@$metaArr['book_img']) !!}" class="img-fluid" alt="books-pastor">
                        @endif
                    </div>
                    <div class="btn-row">
                        @if(@$metaArr['book_btn1_link'] && @$metaArr['book_btn1_caption'])
                        <a href="{!! @$metaArr['book_btn1_link'] !!}" class="btn btn-theme-blue" @if(@$metaArr['book_btn1_link_open_in_new_tab']) target="_blank" @endif>{!! @$metaArr['book_btn1_caption'] !!}</a>
                        @endif
                        @if(@$metaArr['book_btn2_link'] && @$metaArr['book_btn2_caption'])
                        <a href="{!! @$metaArr['book_btn1_link'] !!}" class="btn btn-theme-blue-outline ms-lg-3" @if(@$metaArr['book_btn2_link_open_in_new_tab']) target="_blank" @endif>{!! @$metaArr['book_btn2_caption'] !!}</a>
                        @endif
                    </div>
                </div>
                <div class="col-md-6 ms-auto d-none d-md-block">
                    <div class="books-img">
                        @if(@$metaArr['book_img_type'] == "video")
                        <x-video-js-player :src="$metaArr['book_img']" id="book_img" />
                        @else
                        <img src="{!! getCmsFileUrl(@$metaArr['book_img']) !!}" class="img-fluid" alt="books-pastor">
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- END BOOKS SECTION -->

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

@section('js')
@stop
@endsection