@extends('themes.frontend.layouts.app')
@if (isset($dataArr['meta_title']))
@section('page-title'){!! $dataArr['meta_title'] !!}@stop
@endif
@if (isset($dataArr['meta_key']))
@section('meta-keywords'){{ $dataArr['meta_key'] }}@stop
@endif
@if (isset($dataArr['meta_description']))
@section('meta-description'){{ $dataArr['meta_description'] }}@stop
@endif
@if (isset($dataArr['image_path']))
@section('meta-image'){{ $dataArr['image_path'] }}@stop
@endif
@if ($dataArr['full_url'])
@section('cur-url'){{ $dataArr['full_url'] }}@stop
@endif
@push('styles')
    @if (isset($dataArr['custom_fields']['image_7']))
        <style>
        .banner.banner__about {
            background-image: url("{{ $defDataArr['media_folder'].$dataArr['custom_fields']['image_7']['value'] }}");
        }
        </style>
    @endif
@endpush
@section('content')
<!-- BODY CONTENT  -->
<main>

    <!-- BANNER  -->
    <section class="banner banner__about">
        <h1 data-aos="fade-up" data-aos-duration="600">{{ $dataArr['title'] }}</h1>
    </section>

    <!-- ABOUT SECTION  -->
    <section class="about-sec">
        <div class="container">
            <div class="about-grid">
                <div class="lft" data-aos="fade-right" data-aos-duration="600">
                    @if ($dataArr['image_path'])
                        <x-img src="{{ $dataArr['image_path'] }}" alt="{{ $dataArr['image_alt'] }}" title="{{ $dataArr['image_title'] }}" />
                    @endif
                </div>
                <div class="rgt" data-aos="fade-left" data-aos-duration="600">
                    {!! $dataArr['descp'] !!}
                </div>
            </div>
        </div>
    </section>

    <!-- COMPANY HISTORY  -->
    <section class="company-history has-center-title pt-60 pb-60">
        <div class="container">
            @if (isset($dataArr['custom_fields']['text_8']))
            <h3 data-aos="fade-up" data-aos-duration="600">{!! $dataArr['custom_fields']['text_8']['value'] !!}</h3>
            @endif
            @if (count($cmpHstMdl) > 0)
            <div class="history-grid" data-aos="fade-up" data-aos-duration="600">
                @foreach ($cmpHstMdl as $recordCh)
                    @if($loop->odd)
                    <div class="col col1 col-red">
                        <div class="circle red-circle">
                            @if ($recordCh->media != null)
								@if ($recordCh->media->path)
									<x-img src="{{ $recordCh->media->getModuleVars()['media_folder'] . $recordCh->media->path }}"
										alt="{{ $recordCh->media->alt }}" title="{{ $recordCh->media->title }}" />
								@endif
							@endif
                        </div>
                        @if ($recordCh->title)
                        <h4 class="yr">{!! $recordCh->title !!}</h4>
                        @endif
                        @if ($recordCh->description && $recordCh->description != '<p><br></p>')
                        <div class="cont">
                            {!! $recordCh->description !!}
                        </div>
                        @endif
                        <div class="light-arrow">
                            <x-img src="{{ asset('themes/frontend/images/light-arrow.png') }}" />
                        </div>
                    </div>
                    @else
                    <div class="col col2 col-black">
                        <div class="light-arrow">
                            <x-img src="{{ asset('themes/frontend/images/light-arrow.png') }}" />
                        </div>
                        @if ($recordCh->description && $recordCh->description != '<p><br></p>')
                        <div class="cont">
                            {!! $recordCh->description !!}
                        </div>
                        @endif
                        @if ($recordCh->title)
                        <h4 class="yr">{!! $recordCh->title !!}</h4>
                        @endif
                        <div class="circle black-circle">
                            @if ($recordCh->media != null)
								@if ($recordCh->media->path)
									<x-img src="{{ $recordCh->media->getModuleVars()['media_folder'] . $recordCh->media->path }}"
										alt="{{ $recordCh->media->alt }}" title="{{ $recordCh->media->title }}" />
								@endif
							@endif
                        </div>
                    </div>
                    @endif
                @endforeach
            </div>
            @endif
        </div>
    </section>

    <!-- COMPANY MISSION -->
    <section class="company-mission has-center-title">
        <div class="container">
            <div class="mission-grid">
                <div class="lft" data-aos="fade-right" data-aos-duration="600">
                    @if (isset($dataArr['custom_fields']['editor_9']))
                    {!! $dataArr['custom_fields']['editor_9']['value'] !!}
                    @endif
                </div>
                <div class="rgt" data-aos="fade-left" data-aos-duration="600">
                    @if (isset($dataArr['custom_fields']['image_10']))
                        <x-img src="{{ $defDataArr['media_folder'].$dataArr['custom_fields']['image_10']['value'] }}" />
                    @endif
                </div>
            </div>
        </div>
    </section>

    <!-- FOUNDER'S VISION  -->
    <section class="founder-vision has-center-title">
        <div class="founder-top">
            @if (isset($dataArr['custom_fields']['text_11']))
            <h3 data-aos="fade-up" data-aos-duration="600">{!! $dataArr['custom_fields']['text_11']['value'] !!}</h3>
            @endif
        </div>
        <div class="container">
            @if (count($teamMdl) > 0)
            <div class="founder-bottom founder-bottom-grid">
                @foreach ($teamMdl as $key => $recordTm)
                <div class="@if($loop->odd){{'lft'}}@else{{'rgt'}}@endif founder" data-aos="fade-right" data-aos-duration="600">
                    <div class="founder-img">
                        @if ($recordTm->media != null)
                            @if ($recordTm->media->path)
                                <x-img src="{{ $recordTm->media->getModuleVars()['media_folder'] . $recordTm->media['path'] }}" alt="{{ $recordTm->media['alt'] }}" title="{{ $recordTm->media['title'] }}" />
                            @endif
                        @endif
                    </div>
                    <h4>{{ $recordTm->name }}</h4>  
                    @if($recordTm->designation)
                    <p class="red-line">{{ $recordTm->designation }}</p>
                    @endif
                    @if ($recordTm->description && $recordTm->description != '<p><br></p>')
                        {!! $recordTm->description !!}
                    @endif
                    @if ($recordTm->facebook_profile_link || $recordTm->instagram_profile_link || $recordTm->linkedin_profile_link)
                    <ul class="social-icon">
                        @if ($recordTm->facebook_profile_link)
                            <li><x-link url="{{ $recordTm->facebook_profile_link }}" target="_blank"><x-img src="{{ asset('themes/frontend/images/facebook-icon.svg') }}" alt="Facebook" /></x-link></li>
                        @endif
                        @if ($recordTm->instagram_profile_link)
                        <li><x-link url="{{ $recordTm->instagram_profile_link }}" target="_blank"><x-img src="{{ asset('themes/frontend/images/instagram-icon.svg') }}" alt="Instagram" /></x-link></li>
                        @endif
                        @if ($recordTm->linkedin_profile_link)
                        <li><x-link url="{{ $recordTm->linkedin_profile_link }}" target="_blank"><x-img src="{{ asset('themes/frontend/images/linkedin-icon.svg') }}" alt="LinkedIn" /></x-link></li>
                        @endif
                    </ul>
                    @endif
                </div>
                @endforeach
            </div>
            @endif
        </div>
    </section>
</main>
@stop