@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 INFO SECTION -->
<section class="cu-info-sec sec-py pb-0">
    <div class="container">
        <div class="row g-md-5 justify-content-center">
            <div class="col-md-4 col-sm-6 mb-lg-0 mb-4">
                <div class="cu-info-card">
                    <div class="cu-info-icon">
                        <img src="{!! asset('assets/frontend/images/pin-white-icon.png') !!}" class="" alt="location"/>
                    </div>
                    <h3>Our Location</h3>
                    <p>
                        <a href="https://www.google.com/maps/place/Mecklenburg+Community+Church,+8335+Browne+Rd,+Charlotte,+NC+28269,+United+States/@35.3557703,-80.7994512,17z/data=!4m2!3m1!1s0x88541d7aa10b8aaf:0x831dd30e35dc70c4?hl=en&gl=IN" target="_blank">
                            {!! $siteSettings->location ?? config('constants.CONTACT_LOCATION') !!}
                        </a>
                    </p>
                    <div class="cu-info-img">
                        @if(@$metaArr['content_img1_type'] == "video")
                        <video autoplay loop muted playsinline>
                            <source src="{!! getCmsFileUrl(@$metaArr['content_img1']) !!}" type="video/mp4">
                            <source src="{!! getCmsFileUrl(@$metaArr['content_img1']) !!}" type="video/ogg">
                            Your browser does not support the video tag.
                        </video>
                        @else
                        <img src="{!! getCmsFileUrl(@$metaArr['content_img1']) !!}" class="img-fluid">
                        @endif
                    </div>
                </div>
            </div>
            <div class="col-md-4 col-sm-6 mb-lg-0 mb-4">
                <div class="cu-info-card">
                    <div class="cu-info-icon">
                        <img src="{!! asset('assets/frontend/images/headphone-white-icon.png') !!}" class="" alt="phone"/>
                    </div>
                    <h3>Phone Number</h3>
                    <p><a href="tel:{!! preg_replace('/[^0-9]/', '', ($siteSettings->phone ?? config('constants.CONTACT_PHONE'))) !!}">{!! $siteSettings->phone ?? config('constants.CONTACT_PHONE') !!}</a></p>
                    <div class="cu-info-img">
                        @if(@$metaArr['content_img2_type'] == "video")
                        <video autoplay loop muted playsinline>
                            <source src="{!! getCmsFileUrl(@$metaArr['content_img2']) !!}" type="video/mp4">
                            <source src="{!! getCmsFileUrl(@$metaArr['content_img2']) !!}" type="video/ogg">
                            Your browser does not support the video tag.
                        </video>
                        @else
                        <img src="{!! getCmsFileUrl(@$metaArr['content_img2']) !!}" class="img-fluid">
                        @endif
                    </div>
                </div>
            </div>
            <div class="col-md-4 col-sm-6">
                <div class="cu-info-card">
                    <div class="cu-info-icon">
                        <img src="{!! asset('assets/frontend/images/mail-white-icon.png') !!}" class="" alt="email"/>
                    </div>
                    <h3>Email Address</h3>
                    <p><a href="mailto:{!! $siteSettings->email ?? config('constants.CONTACT_EMAIL') !!}">{!! $siteSettings->email ?? config('constants.CONTACT_EMAIL') !!}</a></p>
                    <div class="cu-info-img">
                        @if(@$metaArr['content_img3_type'] == "video")
                        <video autoplay loop muted playsinline>
                            <source src="{!! getCmsFileUrl(@$metaArr['content_img3']) !!}" type="video/mp4">
                            <source src="{!! getCmsFileUrl(@$metaArr['content_img3']) !!}" type="video/ogg">
                            Your browser does not support the video tag.
                        </video>
                        @else
                        <img src="{!! getCmsFileUrl(@$metaArr['content_img3']) !!}" class="img-fluid">
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- END INFO SECTION -->

<!-- START CONTACT US SECTION -->
<section class="contact-us-sec sec-py">
    <div class="container">
        <div class="row">
            <div class="col-xl-5 col-md-6 mb-4 mb-md-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-md-start">
                        <button type="submit" class="btn btn-theme-blue">Send Message</button>
                    </div>
                </form>
            </div>
            <div class="col-xl-5 col-md-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.elexio_form')
@includeIf('front.includes.faq')

@endsection

@section('js')
@stack('js')
@endsection