@extends('layouts.site')
@push('styles')
    @if ($aboutus->seo_other != null)
        {!! $aboutus->seo_other !!}
    @endif
@endpush

@section('seo_title')
    {{ $aboutus->seo_title }}
@endsection

@section('seo_description')
    {{ $aboutus->seo_description }}
@endsection
@section('content')
    <div class="container">
        <a class="btn book-now" data-toggle="modal" data-target="#exampleModal" title="Quick Contact">Quick Contact</a>
    </div>
    <section class="text-center bg-parallax">
        <div class="bg-img"><img src="{{ $aboutus->getFirstMediaurl('banner-image') }}" alt="background"></div>
        <div class="container">
            <div class="row">
                <div class="col-8 offset-2 custom-heading__wrapper">
                    <h1 class="pagetitle__heading mb-10">About Us</h1>
                    <p class="text-center">{{ $aboutus->short_description }}</p>
                </div><!-- /.col-12 -->
            </div><!-- /.row -->
        </div><!-- /.container -->
    </section><!-- /.page-title -->

    <section class="services-layout2 pt-20 pb-20">
        <div class="container">

            <div class="row">

                @foreach ($features as $feature)
                    <div class="col-sm-12 col-md-6 col-lg-4">
                        <div class="service-item dlt-scrollbar overflow-y service-item-custom-card">
                            <div class="service__content">
                                <div class="service__icon">
                                    <img src="{{ $feature->getFirstMediaUrl('feature-icon') }}" alt="{{ $feature->title }}">
                                </div><!-- /.service__icon -->
                                <div class="service__desc_wrap">
                                    <h4 class="service__title">{{ $feature->title }}</h4>
                                    <p class="service__desc">{{ $feature->description }}</p>
                                </div>

                            </div><!-- /.service-content -->
                        </div><!-- /.service-item -->
                    </div><!-- /.col-lg-4 -->
                @endforeach

            </div><!-- /.row -->
        </div><!-- /.container -->
    </section><!-- /.Services Layout 2 -->

    <!-- ========================
                                                                                                  About Layout 1
                                                                                                =========================== -->
    <section id="about" class="about-layout1 bg-gray">
        <div class="container">
            <div class="row">
                <div class="col-sm-12 col-md-12 col-lg-6">
                    <div class="heading mb-30">
                        <h3 class="heading__title mb-40">{{ $aboutus->title }}
                        </h3>
                    </div><!-- /heading -->
                    <div class="position-relative offset-xl-1">
                        <p> {{ $aboutus->description }}</p>
                    </div>
                </div><!-- /.col-lg-6 -->
                <div class="col-sm-12 col-md-12 col-lg-5 offset-lg-1">
                    <div class="about__img mb-40">
                        <img src="{{ $aboutus->getFirstMediaUrl('about-us-image') }}" alt="about">
                    </div><!-- /.about-img -->
                </div><!-- /.col-lg-6 -->
            </div><!-- /.row -->
        </div><!-- /.container -->
    </section><!-- /.About Layout 1 -->


    <!-- =========================
                                                                                                       Banner layout 3
                                                                                                =========================== -->
    <div id="partners" style="padding-top:100px;">
        @include('layouts.components.partners')
    </div>

    <!-- ========================
                                                                                                    Team layout 1
                                                                                                ========================== -->
    <section class="team-layout1 text-center bg-gray" style="padding-top:100px;" id="team">
        <div class="container">
            <div class="row">
                <div class="col-sm-12 col-md-12 col-lg-6 offset-lg-3">
                    <div class="heading text-center mb-40">

                        <h3 class="heading__title">Meet our Directors</h3>
                        <!-- <h2 class="heading__subtitle">We work with both public and private sector organisations across the Middle East</h2> -->
                    </div>
                </div><!-- /col-lg-6 -->
            </div><!-- /.row -->
            <div class="row" style="display: flex;
            justify-content: center;">
                @foreach ($faculties->whereIn('display_order', [1, 2]) as $faculty)
                    <!-- Member #1 -->
                    <div class="col-sm-6 col-md-6 col-lg-3">
                        <div class="member memberShow" data-id="{{ $faculty->id }}">
                            <div class="member__img">
                                <img src="{{ $faculty->getFirstMediaUrl('faculty') }}" alt="member img">
                            </div><!-- /.member-img -->
                            <div class="member__info">
                                <h5 class="member__name">{{ $faculty->name }}</h5>
                                <p class="member__desc">{{ $faculty->designation }}</p>
                                @if ($faculty->email)
                                    <p class="member__desc">E-mail: {{ $faculty->email }}</p>
                                @endif
                            </div><!-- /.member-info -->
                        </div><!-- /.member -->
                    </div><!-- /.col-lg-3 -->
                @endforeach
            </div> <!-- /.row -->
            @foreach ($faculties->whereNotIn('display_order', [1, 2])->chunk(4) as $key => $faculties)
                <div class="row" style="margin-top: 10%;display: flex;
                justify-content: center;">
                    @foreach ($faculties as $faculty)
                        <!-- Member #1 -->
                        <div class="col-sm-6 col-md-6 col-lg-3">
                            <div class="member memberShow" data-id="{{ $faculty->id }}">
                                <div class="member__img">
                                    <img src="{{ $faculty->getFirstMediaUrl('faculty') }}" alt="member img">
                                </div><!-- /.member-img -->
                                <div class="member__info">
                                    <h5 class="member__name">{{ $faculty->name }}</h5>
                                    <p class="member__desc">{{ $faculty->designation }}</p>
                                    @if ($faculty->email)
                                        <p class="member__desc">E-mail: {{ $faculty->email }}</p>
                                    @endif
                                </div><!-- /.member-info -->
                            </div><!-- /.member -->
                        </div><!-- /.col-lg-3 -->
                    @endforeach
                </div> <!-- /.row -->
            @endforeach
        </div><!-- /.container -->
    </section><!-- /.Team layout 1  -->

    <!-- =========================
                                                                                                       Banner layout 3
                                                                                                =========================== -->
    @foreach ($faculties as $faculty)
        <div class="login-popup inActive" id="member-popup_{{ $faculty->id }}">
            <div class="login-popup-wrapper webinar-wrapper member-details">
                <i class="fa fa-times close-icon_1" aria-hidden="true"></i>
                <div class="member__img">
                    <img src="{{ $faculty->getFirstMediaUrl('faculty') }}" alt="member img">
                </div>
                <div class="member__info">
                    <p><b>{{ $faculty->name }}, {{ $faculty->designation }}</b> - {{ $faculty->note }}</p>
                </div>
            </div>
        </div>
    @endforeach

    <div style="margin-top: 100px; padding-top:100px;" id="our-clients">
        @include('layouts.components.clients')
    </div>
@endsection
@push('scripts')
    <script>
        $(document).ready(function() {
            $('.memberShow').click(function() {
                var id = $(this).data('id');
                $('#member-popup_' + id).removeClass('inActive').addClass('active');
            });
            $('.close-icon_1').click(function() {
                $('.login-popup').addClass('inActive').removeClass('active');
            });
        });
    </script>
@endpush