@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 OB-ABOUT SECTION -->
<section class="ob-about-sec sec-py">
    <div class="container">
        <div class="row">
            <div class="col-lg-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="ob-about-img">
                    <img src="{!! getCmsFileUrl(@$metaArr['content_img']) !!}" class="img-fluid" alt="ob-about-img" />
                </div>
                @endif
                </div>
                <div class="ob-about-content artical-content">
                    <div class="sec-title line-left">
                        <strong>{!! @$metaArr['content_subtitle'] !!}</strong>
                        <h2>{!! @$metaArr['content_title'] !!}</h2>
                    </div>
                    {!! @$metaArr['content_description'] !!}
                </div>
            </div>
        </div>
    </div>
</section>
<!-- END OB-ABOUT SECTION -->

@if(isset($metaArr['quotes']) && is_array($metaArr['quotes']) && count($metaArr['quotes']) > 0)
<!-- START TESTIMONIAL SECTION -->
<section class="ob-testimonial-sec" style="@if(@$metaArr['quote_img_type'] == "image")background-image:url({!! getCmsFileUrl(@$metaArr['quote_img']) !!});@endif; height:auto;" >
    <div class="container h-100">
        <div class="row h-100 align-content-center">
            <div class="col-md-10 mx-auto">
                <div class="owl-carousel quote-slider">
                    @foreach($metaArr['quotes'] as $quotes)
                    <div class="ob-testimonial-content">
                        <span class="quate">“</span>
                        <p>{!! $quotes['description'] !!}</p>
                        <!-- <span class="quate">“</span> -->
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
    @if(@$metaArr['quote_img_type'] == "video")
    <video autoplay loop muted playsinline>
        <source src="{!! getCmsFileUrl(@$metaArr['quote_img']) !!}" type="video/mp4">
        <source src="{!! getCmsFileUrl(@$metaArr['quote_img']) !!}" type="video/ogg">
        Your browser does not support the video tag.
    </video>
    @endif
</section>
<!-- END TESTIMONIAL SECTION -->
@endif

<!-- START OB-MISSION SECTION -->
<section class="ob-mission-sec sec-py">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="sec-title text-center">
                    <strong>{!! @$metaArr['mission_subtitle'] !!}</strong>
                    <h2>{!! @$metaArr['mission_title'] !!}</h2>
                </div>
            </div>
            </div>
        <div class="row">
            @if(isset($metaArr['missions']) && is_array($metaArr['missions']) && count($metaArr['missions']) > 0)
            <div class="col-lg-9 ms-auto" style="position: relative;">
            <div class="ob-mission-img">
                @if(@$metaArr['mission_img_type'] == "video")
                <x-video-js-player :src="$metaArr['mission_img']" id="mission_img" />
                @else
                <img src="{!! getCmsFileUrl(@$metaArr['mission_img']) !!}" class="img-fluid" alt="ob-mission" />
                @endif
            </div>
                <div class="ob-mission-content">
                    <div class="accordion" id="obMissionAccordion">
                        @foreach($metaArr['missions'] as $key=>$missions)
                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#obMission{!! $key !!}" aria-expanded="false"
                                aria-controls="obMission{!! $key !!}">{!! $missions['title'] !!}</button>
                            </h2>
                            <div id="obMission{!! $key !!}" class="accordion-collapse collapse" data-bs-parent="#obMissionAccordion">
                                <div class="accordion-body">
                                    <p>{!! $missions['description'] !!}</p>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
            @endif
        </div>
        </div>
    </div>
</section>
<!-- END OB-MISSION SECTION -->
@includeIf('front.includes.elexio_form')
@includeIf('front.includes.faq')

@section('js')
@stop
@endsection