@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 TG-TEAM SECTION -->
<section class="tg-team-sec sec-py">
    <div class="container">
        <div class="row">
            <div class="col-lg-6 order-lg-2">
                <div class="au-learn-content">
                    <div class="sec-title line-left">
                        <strong>{!! @$metaArr['content_subtitle'] !!}</strong>
                        <h2>{!! @$metaArr['content_title'] !!}</h2>
                    </div>
                    {!! @$metaArr['content_description'] !!}
                </div>
            </div>
            <div class="col-lg-6">
                <div class="row">
                    @if(@$metaArr['content_img_type'] == "video")
                    <x-video-js-player :src="$metaArr['content_img']" id="content_img" />
                    @else
                    <div class="tg-team-img">
                        <img src="{!! getCmsFileUrl(@$metaArr['content_img']) !!}" class="img-fluid">
                    </div>
                    @endif
                </div>
            </div>
        </div>
        <div class="row mt-5">
            <div class="col-md-12">
                <p class="tg-serviing-card-title">
                    {!! @$metaArr['content_box_title'] !!}
                </p>
            </div>
        </div>
        <div class="row mt-4 gx-lg-5">
            <div class="col-md-4 mb-4 mb-md-0">
                <div class="tg-serviing-card">
                    <p>{!! @$metaArr['content_box_description1'] !!}</p>
                </div>
            </div>
            <div class="col-md-4 mb-4 mb-md-0">
                <div class="tg-serviing-card">
                    <p>{!! @$metaArr['content_box_description2'] !!}</p>
                </div>
            </div>
            <div class="col-md-4 mb-4 mb-md-0">
                <div class="tg-serviing-card">
                    <p>{!! @$metaArr['content_box_description3'] !!}</p>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- END TG-TEAM SECTION -->

<!-- START TG-APPLICATION SECTION -->
<section class="application-sec sec-py" @if(@$metaArr['banner_img_type'] == "image") style="background-image: url({!! getCmsFileUrl(@$metaArr['banner_img']) !!});background-position: center;" @endif>
    <div class="container">
        <div class="row">
            <div class="col-lg-10 mx-auto">
                <div class="sec-title text-center mb-5">
                    <h2>{!! @$metaArr['banner_title1'] !!}</h2>
                </div>
                <div class="row justify-content-center">
                    <div class="col-md-4 mb-4 mb-md-0">
                        <a class="btn btn-outline-white w-100" href="{!! @$metaArr['banner_btn_link1'] !!}" @if(@$metaArr['banner_btn_link1_open_in_new_tab']) target="_blank" @endif>{!! @$metaArr['banner_btn_caption1'] !!}</a>
                    </div>
                    <div class="col-md-4">
                        <a class="btn btn-outline-white w-100" href="{!! @$metaArr['banner_btn_link2'] !!}" @if(@$metaArr['banner_btn_link2_open_in_new_tab']) target="_blank" @endif>{!! @$metaArr['banner_btn_caption2'] !!}</a>
                    </div>
                </div>
            </div>
        </div>
        <hr class="hr1" />
        <hr class="hr2" />
        <div class="row">
            <div class="col-lg-10 mx-auto">
                <div class="sec-title text-center mb-5">
                    <h2>{!! @$metaArr['banner_title2'] !!}</h2>
                </div>
                <div class="row justify-content-center">
                    <div class="col-md-5">
                        <a class="btn btn-outline-white w-100" href="{!! @$metaArr['banner_btn_link3'] !!}" @if(@$metaArr['banner_btn_link3_open_in_new_tab']) target="_blank" @endif>{!! @$metaArr['banner_btn_caption3'] !!}</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @if(@$metaArr['banner_img_type'] == "video")
    <video autoplay loop muted playsinline>
        <source src="{!! getCmsFileUrl(@$metaArr['banner_img']) !!}" type="video/mp4">
        <source src="{!! getCmsFileUrl(@$metaArr['banner_img']) !!}" type="video/ogg">
        Your browser does not support the video tag.
    </video>
    @endif
</section>
<!-- END TG-APPLICATION SECTION -->

<!-- START TG-APPLICATION SECTION -->
<section class="the-meet-sec sec-py">
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                @if(@$metaArr['team_img_type'] == "video")
                <x-video-js-player :src="$metaArr['team_img']" id="team_img" />
                @else
                <div class="the-meet-img">
                    <img src="{!! getCmsFileUrl(@$metaArr['team_img']) !!}" class="img-fluid">
                </div>
                @endif
            </div>
            <div class="col-md-6 ps-lg-5">
                <div class="sec-title line-left">
                    <strong>{!! @$metaArr['team_subtitle'] !!}</strong>
                    <h2>{!! @$metaArr['team_title'] !!}</h2>
                </div>
                <p class="sec-title-para">{!! @$metaArr['team_description'] !!}</p>
                @if(isset($metaArr['teams']) && is_array($metaArr['teams']) && @count(@$metaArr['teams']) > 0)
                <div class="accordion theme-accordion accordion-gray" id="teamAccordion">
                    @foreach(@$metaArr['teams'] as $key=>$teams)
                    <div class="accordion-item">
                        <h2 class="accordion-header">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#team{!! $key !!}" aria-expanded="false"
                            aria-controls="team{!! $key !!}">{!! $teams['title'] !!}</button>
                        </h2>
                        <div id="team{!! $key !!}" class="accordion-collapse collapse" data-bs-parent="#teamAccordion">
                            <div class="accordion-body">
                                <p>{!! $teams['description'] !!}</p>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
                @endif
            </div>
        </div>
    </div>
</section><!-- END TG-APPLICATION SECTION -->
@includeIf('front.includes.elexio_form')
@includeIf('front.includes.faq')

@endsection

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