@extends('frontend.layout.updated.master')
@section('content')
    <div class="page-title">
        <div class="container">
            <h1>Meet our Team</h1>
        </div>
    </div>
    <section class="our-team-section">
        <div class="container">
            @foreach($team_types as $team_type_record)
                <div class="team-outer-wrap">
                    <h2>{{ $team_type_record->team_type }}</h2>
                    <div class="team-inner-wrapper">
                        @foreach($team_types_data as $team_type)
                            @foreach($team_type as $data)
                                @if ($data->team_type == $team_type_record->team_type)
                                    <div class="team-member-wrapper">
                                        @if ($data->team_type === 'Our Founders')
                                            <div class="team-member-inner modal-link" data-link="detail-modal">
                                                <div class="member-photo" id="open-details-modal" data-team-single="{{$data}}">
                                                    <img src="{{ asset('images/teams/our-teams/'.$data->image)}}" alt="team-member">
                                                </div>
                                                <div class="member-detail" id="open-details-modal" data-team-single="{{$data}}">
                                                    <h3 class="name">{{$data->name}}</h3>
                                                    <span>{{$data->occupation}}</span>
                                                    @if (!empty($data->twitter) || !empty($data->linkedIn) || !empty($data->instagram) || !empty($data->facebook) || !empty($data->youtube))
                                                        <div class="social-icons-wrap">
                                                            <ul class="social-icons-listing">
                                                                @if (!empty($data->twitter))
                                                                    <li>
                                                                        <a target="_blank" href="{{$data->twitter}}" class="social-icon twitter" title="Twitter">
                                                                            <i class="fab fa-twitter"></i>
                                                                        </a>
                                                                    </li>
                                                                @endif
                                                                @if (!empty($data->linkedIn))
                                                                    <li>
                                                                        <a target="_blank" href="{{$data->linkedIn}}" class="social-icon linkedin" title="LinkedIn">
                                                                            <i class="fab fa-linkedin"></i>
                                                                        </a>
                                                                    </li>
                                                                @endif
                                                                @if (!empty($data->instagram))
                                                                    <li>
                                                                        <a target="_blank" href="{{$data->instagram}}" class="social-icon linkedin" title="Instagram">
                                                                            <i class="fab fa-instagram"></i>
                                                                        </a>
                                                                    </li>
                                                                @endif
                                                                @if (!empty($data->facebook))
                                                                    <li>
                                                                        <a href="{{$data->facebook}}" target="_blank" title="Facebook" class="social-icon facebook">
                                                                            <i class="fab fa-facebook-f"> </i>
                                                                        </a>
                                                                    </li>
                                                                @endif
                                                                @if (!empty($data->youtube))
                                                                    <li>
                                                                        <a target="_blank" href="{{$data->youtube}}" class="social-icon twitter" title="Youtube">
                                                                            <i class="fab fa-youtube"></i>
                                                                        </a>
                                                                    </li>
                                                                @endif
                                                            </ul>
                                                        </div>
                                                    @endif
                                                </div>
                                            </div>
                                        @else
                                            <div class="team-member-inner" style="cursor: auto;">
                                                <div class="member-photo" style="cursor: auto;">
                                                    <img src="{{ asset('images/teams/our-teams/'.$data->image)}}" alt="team-member">
                                                </div>
                                                <div class="member-detail">
                                                    <h3 class="name">{{$data->name}}</h3>
                                                    <span>{{$data->occupation}}</span>
                                                    @if (!empty($data->twitter) || !empty($data->linkedIn) || !empty($data->instagram) || !empty($data->facebook) || !empty($data->youtube))
                                                        <div class="social-icons-wrap">
                                                            <ul class="social-icons-listing">
                                                                @if (!empty($data->twitter))
                                                                    <li>
                                                                        <a target="_blank" href="{{$data->twitter}}" class="social-icon twitter" title="Twitter">
                                                                            <i class="fab fa-twitter"></i>
                                                                        </a>
                                                                    </li>
                                                                @endif
                                                                @if (!empty($data->linkedIn))
                                                                    <li>
                                                                        <a target="_blank" href="{{$data->linkedIn}}" class="social-icon linkedin" title="LinkedIn">
                                                                            <i class="fab fa-linkedin"></i>
                                                                        </a>
                                                                    </li>
                                                                @endif
                                                                @if (!empty($data->instagram))
                                                                    <li>
                                                                        <a target="_blank" href="{{$data->instagram}}" class="social-icon linkedin" title="Instagram">
                                                                            <i class="fab fa-instagram"></i>
                                                                        </a>
                                                                    </li>
                                                                @endif
                                                                @if (!empty($data->facebook))
                                                                    <li>
                                                                        <a href="{{$data->facebook}}" target="_blank" title="Facebook" class="social-icon facebook">
                                                                            <i class="fab fa-facebook-f"> </i>
                                                                        </a>
                                                                    </li>
                                                                @endif
                                                                @if (!empty($data->youtube))
                                                                    <li>
                                                                        <a target="_blank" href="{{$data->youtube}}" class="social-icon twitter" title="Youtube">
                                                                            <i class="fab fa-youtube"></i>
                                                                        </a>
                                                                    </li>
                                                                @endif
                                                            </ul>
                                                        </div>
                                                    @endif
                                                </div>
                                            </div>
                                        @endif
                                    </div>
                                @endif
                            @endforeach
                        @endforeach
                    </div>
                </div>
            @endforeach
        </div>
    </section>

    <div class="custom-modal detail-modal" data-tab="detail-modal">
        <div class="modal-backdrop"></div>
        <div class="modal-content">
            <div class="modal-content-inner">
                <div class="modal-body founder-info-section">
                    <a href="#" title="Close" class="modal-close">
                        <img src="{{ asset('images/close.svg') }}" alt="close-btn" />
                    </a>
                    <div class="founder-info-wrapper our-teams-wrapper"></div>
                </div>
            </div>
        </div>
    </div>
@endsection
<script type="module">
    $(document).on('click', '#open-details-modal', function() {
        let teamData = $(this).attr('data-team-single');
        if (teamData) {
            let tData = JSON.parse(teamData);
            let tDataHtml = '';
            $('.our-teams-wrapper').html('');
            tDataHtml += `
                <div class="founder-image">
                    <img src="{{ asset('images/teams/our-teams/${tData.image}') }}" alt="${tData.name}" />
                </div>
                <div class="founder-content">
                    <h2 class="heading-title niveshaay-section-title">
                        ${tData.name}
                    </h2>
                    <p class="green-text">
                        Founder
                    </p>
                    <p>
                        ${tData.description}
                    </p>`;
    
            if (tData.twitter || tData.linkedIn || tData.instagram || tData.facebook || tData.youtube) {
                tDataHtml += `
                    <div class="social-icons-wrap">
                        <ul class="social-icons-listing">
                `;
            }
            
            if (tData.twitter) {
                tDataHtml += `
                    <li>
                        <a href="${tData.twitter}" target="_blank" title="twitter" class="social-icon twitter">
                            <span class="icon">
                                <i class="fab fa-twitter"></i>
                            </span>
                        </a>
                    </li>`;
            }
    
            if (tData.linkedIn) {
                tDataHtml += `
                <li>
                    <a href="${tData.linkedIn}" target="_blank" title="linkedin" class="social-icon linkedin">
                        <span class="icon">
                            <i class="fab fa-linkedin">
                            </i>
                        </span>
                    </a>
                </li>`;
            }
    
            if (tData.instagram) {
                tDataHtml += `
                <li>
                    <a href="${tData.instagram}" target="_blank" title="instagram" class="social-icon linkedin">
                        <span class="icon">
                            <i class="fab fa-instagram">
                            </i>
                        </span>
                    </a>
                </li>`;
            }
    
            if (tData.facebook) {
                tDataHtml += `
                <li>
                    <a href="${tData.facebook}" target="_blank" title="facebook" class="social-icon linkedin">
                    <span class="icon">
                        <i class="fab fa-facebook">
                        </i>
                    </span>
                    </a>
                </li>`;
            }
    
            if (tData.youtube) {
                tDataHtml += `
                <li>
                    <a href="${tData.youtube}" target="_blank" title="youtube" class="social-icon linkedin">
                    <span class="icon">
                        <i class="fab fa-youtube">
                        </i>
                    </span>
                    </a>
                </li>`;
            }
    
            if (tData.twitter || tData.linkedIn || tData.instagram || tData.facebook || tData.youtube) {
                tDataHtml += `
                    </ul>
                        </div>
                `;
            }
    
            tDataHtml += `</div>`;
            $('.our-teams-wrapper').html(tDataHtml);
        }
    });
</script>