@extends('frontend::layouts.master')

@section('title')
    <title>{{ $team_member?->getMeta('title') ?? $team_member?->title }}</title>
    <meta name="title" content="{{ $team_member?->getMeta('title') ?? $team_member?->title }}">
    <meta name="description" content="{{ $team_member?->getMeta('description') ?? $team_member?->excerpt }}">
@endsection

@section('content')
    <main class="fix">
        <x-frontend::breadcrumb>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('home') }}">{{ __('translate.Home') }}</a></li>
                <li class="breadcrumb-item"><a href="{{ route('team.member') }}">{{ __('translate.Team') }}</a></li>
                <li class="breadcrumb-item active" aria-current="page">
                    {{ $team_member?->getMeta('title') ?? $team_member?->title }}</li>
            </ol>
        </x-frontend::breadcrumb>

        <!-- team-area -->
        <section class="team-area bg-white">
            <div class="container">
                <div class="row">
                    <div class="col-lg-5 mb-4">
                        <div class="team-img">
                            <img src="{{ asset($team_member->getFirstMediaUrl('featured')) }}"
                                alt="{{ $team_member->title }}">
                        </div>
                    </div>
                    <div class="col-lg-7 mb-4">
                        <div class="section-title-five mb-3">
                            <h2 class="title">
                                {{ $team_member?->title }}
                            </h2>
                            <span>{{ $team_member?->getMeta('occupation') }}</span>
                        </div>
                        <div class="team-social team-social-details mb-5">
                            <ul class="list-wrap">
                                @include('frontend::team.team-social')
                            </ul>
                        </div>
                        <div class="team-description">
                            <h4 class="title">About of {{ $team_member->title }}</h4>
                            {!! clean($team_member->content) !!}
                        </div>
                        <div class="team-contact-info">
                            <h4 class="title">Contact Information</h4>
                            <ul class="list-wrap">

                                @if ($team_member->getMeta('email'))
                                    <li>
                                        <i class="far fa-envelope"></i>
                                        <a href="mailto:{{ $team_member->getMeta('email') }}">
                                            {{ $team_member->getMeta('email') }}
                                        </a>
                                    </li>
                                @endif

                                @if ($team_member->getMeta('phone'))
                                    <li>
                                        <i class="fas fa-phone"></i>
                                        <a href="tel:{{ $team_member->getMeta('phone') }}">
                                            {{ $team_member->getMeta('phone') }}
                                        </a>
                                    </li>
                                @endif

                                @if ($team_member->getMeta('address'))
                                    <li>
                                        <i class="fas fa-map-marker-alt"></i>
                                        <a href="{{ $team_member->getMeta('google_map_link') ?: '#' }}">
                                            {{ $team_member->getMeta('address') }}
                                        </a>
                                    </li>
                                @endif

                                @if ($team_member->getMeta('website'))
                                    <li>
                                        <i class="fas fa-globe"></i>
                                        <a href="{{ $team_member->getMeta('website') }}" target="_blank" rel="noopener">
                                            {{ $team_member->getMeta('website') }}
                                        </a>
                                    </li>
                                @endif
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- team-area-end -->

        @include('frontend::components.newsletter_area')

    </main>
@endsection

@push('style')
    <style>
        [tg-theme=dark] section.team-area.bg-white {
            background: #182330cf !important;
        }

        .team-content {
            background: #f7f7f7;
        }

        .team-social.team-social-details .list-wrap {
            justify-content: start;
            gap: 7px;
            position: initial;
            left: 0;
            right: 0;
            bottom: 40px;
            transform: none;
            opacity: 1;
            visibility: visible;
        }

        .team-social.team-social-details .list-wrap li a {
            width: 40px;
            height: 40px;
            font-size: 16px;
        }

        .team-img {
            padding-bottom: 0;
            border-radius: 5px;
            overflow: hidden;
            max-height: 640px;
        }

        .team-contact-info li i {
            margin-right: 10px;
        }

        .team-contact-info li a,
        .team-contact-info li i {
            color: #070505;
        }

        .team-contact-info li a:hover {
            color: var(--tg-primary-color);
        }
    </style>
@endpush