@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="mt-about-sec sec-py">
    <div class="container">
        <div class="row">
            <div class="col-md-12 artical-col">
                <div class="artical-img left">
                    @if(@$metaArr['content_img_type'] == "video")
                    <x-video-js-player :src="$metaArr['content_img']" id="content_img" />
                    @else
                    <div class="mt-location-img">
                        <img src="{!! getCmsFileUrl(@$metaArr['content_img']) !!}" class="img-fluid">
                    </div>
                    @endif
                </div>
                <div class="artical-content">
                    <div class="sec-title line-left">
                        <strong>{!! @$metaArr['content_subtitle'] !!}</strong>
                        <h2>{!! @$metaArr['content_title'] !!}</h2>
                    </div>
                    <p class="sec-title-para mb-0">
                        {!! @$metaArr['content_description'] !!}
                    </p>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- END ABOUT US SECTION -->

<!-- START VIDEO SECTION -->
<section class="mt-video-sec sec-py pt-0">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="embed-responsive">
                    @if(@$metaArr['video_link'])
                    <div class="video-wraper" id="videoWraper" style="display:none;width:100%;">
                        <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="mt-bg-view">
                    <img src="{!! getCmsFileUrl(@$metaArr['video_bg_img']) !!}" class="img-fluid" alt="mt-video-bg" />
                </div>
            </div>
        </div>
    </div>
</section>
@includeIf('front.includes.elexio_form')
@includeIf('front.includes.faq')
@section('js')
@stop
@endsection