@extends(themeView('master'))
@php
    foreach ($pagesList as $page) {
        if ($page->slug == 'team') {
            $teamPage = $page;
        }
    }
@endphp
@section('meta-tags')
    @if (isset($teamPage))
        @include(themeView('partials.static-meta'), ['page' => $teamPage])
    @else
        @include(themeView('partials.meta-tags'))
    @endif
    @if (isset($teamPage->schemaSript))
        <script type="application/ld+json">
            {!! $teamPage->schemaSript->script !!}
        </script>
    @endif
@endsection

@section('content')
    <section class="page-box">
        <div class="page-bg">
            @if (isset($teamPage) && isset($teamPage->acf->details) && isset($teamPage->acf->details->acf_banner_image))
                <img src="{!! imgPath('uploads/acf/' . $teamPage->acf->details->acf_banner_image) !!}" alt="">
            @else
                <img src="{{ themePath('images/slide-09.jpg') }}" alt="">
            @endif
            <div class="container page-info">
                <div class="row title-row">
                    <div class="items col-12">
                        <h1 class="titles text-center section-title wow animate__animated animate__fadeIn">
                            Our Team
                        </h1>
                        <ul class="breadcrumbs m-auto float-none d-table wow animate__animated animate__fadeIn">
                            <li class="first">
                                <a href="{{ route('frontend.home') }}" title="Home">Home</a>
                            </li>
                            <li class="active">Our Team</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="detail-section news-articles">
        <div class="container">
                        @foreach ($memberTypes->take(1) as $type)
                @if ($type->members->isNotEmpty())
                    <div class="row about-row">
                        <div class="items col-10 offset-md-1">
                            <span class="titles title-2 section-title text-center pe-3">
                                {{ $type->title }}
                            </span>
                        </div>
                    </div>
                    <div class="row teamlist-box management-teams">
                        @foreach ($type->members->take(1) as $member)
                            <div class="col-sm-6 col-md-3 col-3 slide-item team-item item-team">
                                <figure class="article-img">
                                    <a href="javascript:void(0)" data-bs-toggle="modal"
                                        data-bs-target="#team-{{ $member->id }}" title="{{ $member->name }}">
                                        <img src="{{ $member->image_link }}" alt="{{ $member->name }}">
                                    </a>
                                    <div class="member-info">
                                        <h2 class="titles title-6 member-name">
                                            {{ $member->name }}
                                        </h2>
                                        <span class="titles title-8 designation">
                                            {{ $member->jobtitle }}
                                        </span>
                                        <ul class="hoz-nav text-center social-list">

                                            @if (isset($member->facebook))
                                                <li>
                                                    <a class="text-uppercase" href="{{ $member->facebook }}"
                                                        title="Facebook" target="_blank">
                                                        <span class="social-icon fab fa-facebook-f"></span>
                                                    </a>
                                                </li>
                                            @endif

                                            @if (isset($member->twitter))
                                                <li>
                                                    <a class="text-uppercase" href="{{ $member->twitter }}" title="Twitter"
                                                        target="_blank">
                                                        <span class="social-icon fab fa-twitter"></span>
                                                    </a>
                                                </li>
                                            @endif

                                            @if (isset($member->linkedin))
                                                <li>
                                                    <a class="text-uppercase" href="{{ $member->linkedin }}"
                                                        title="Linkedin" target="_blank">
                                                        <span class="social-icon fab fa-linkedin-in"></span>
                                                    </a>
                                                </li>
                                            @endif

                                            @if (isset($member->instagram))
                                                <li>
                                                    <a class="text-uppercase" href="{{ $member->instagram }}"
                                                        title="Instagram" target="_blank">
                                                        <span class="social-icon fab fa-instagram"></span>
                                                    </a>
                                                </li>
                                            @endif
                                        </ul>
                                    </div>
                                </figure>
                            </div>
                        @endforeach
                    </div>

                    <div class="row teamlist-box management-teams">
                        @foreach ($type->members->slice(1) as $member)
                            <div class="col-sm-6 col-md-3 col-3 slide-item team-item item-team">
                                <figure class="article-img">
                                    <a href="javascript:void(0)" data-bs-toggle="modal"
                                        data-bs-target="#team-{{ $member->id }}" title="{{ $member->name }}">
                                        <img src="{{ $member->image_link }}" alt="{{ $member->name }}">
                                    </a>
                                    <div class="member-info">
                                        <h2 class="titles title-6 member-name">
                                            {{ $member->name }}
                                        </h2>
                                        <span class="titles title-8 designation">
                                            {{ $member->jobtitle }}
                                        </span>
                                        @include(themeView('partials.social-icons-member'))
                                    </div>
                                </figure>
                            </div>
                        @endforeach
                    </div>
                @endif
            @endforeach


            @foreach ($memberTypes->slice(1)->take(1) as $type)
                @if ($type->members->isNotEmpty())
                    <div class="row about-row">
                        <div class="items col-10 offset-md-1">
                            <h2 class="titles title-2 section-title text-center pe-3">
                                {{ $type->title }}
                            </h2>
                        </div>
                    </div>

                    <div class="row teamlist-box management-teams">
                        @foreach ($type->members as $member)
                            <div class="col-sm-6 col-md-3 col-3 slide-item team-item item-team">
                                <figure class="article-img">
                                    <a href="javascript:void(0)" data-bs-toggle="modal"
                                        data-bs-target="#team-{{ $member->id }}" title="{{ $member->name }}">
                                        <img src="{{ $member->image_link }}" alt="{{ $member->name }}">
                                    </a>
                                    <div class="member-info">
                                        <h2 class="titles title-6 member-name">
                                            {{ $member->name }}
                                        </h2>
                                        <span class="titles title-8 designation">
                                            {{ $member->jobtitle }}
                                        </span>
                                        @include(themeView('partials.social-icons-member'))
                                    </div>
                                </figure>
                            </div>
                        @endforeach
                    </div>
                @endif
            @endforeach


            @foreach ($memberTypes->slice(2) as $type)
                @if ($type->members->isNotEmpty())
                    <div class="row about-row">
                        <div class="items col-10 offset-md-1">
                            <h2 class="titles title-2 section-title text-center pe-3">
                                {{ $type->title }}
                            </h2>
                        </div>
                    </div>

                    <div class="row teamlist-box management-teams">
                        @foreach ($type->members as $member)
                            <div class="col-3 slide-item team-item item-team">
                                <figure class="article-img">
                                    <a href="javascript:void(0)" data-bs-toggle="modal"
                                        data-bs-target="#team-{{ $member->id }}" title="">
                                        <img src="{{ $member->image_link }}" alt="{{ $member->name }}">
                                    </a>
                                    <div class="member-info">
                                        <h2 class="titles title-6 member-name">
                                            {{ $member->name }}
                                        </h2>
                                        <span class="titles title-8 designation">
                                            {{ $member->jobtitle }}
                                        </span>
                                        @include(themeView('partials.social-icons-member'))
                                    </div>
                                </figure>
                            </div>
                        @endforeach
                    </div>
                @endif
            @endforeach
        </div>
    </section>
@endsection

@push('team-modal')
    @foreach ($memberTypes as $type)
        @if ($type->members->isNotEmpty())
            @foreach ($type->members as $member)
                <div class="modal fade quick-pop" id="team-{{ $member->id }}" tabindex="-1"
                    aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <span class="cat-title">Our Team</span>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                    aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                                @include(themeView('partials.team-info'))
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        @endif
    @endforeach
@endpush