@extends('layouts.tenant')

@section('title')
    {{$user->first_name}} {{$user->last_name}}
@endsection

@section('content')
<div class="custom-bg-gray">
    <div class="container">
        <div class="row my-4">
            <div class="col-12 col-lg-8 col-xl-8">
                <div class="card w-100 border-0 p-0 bg-white shadow-xss rounded-xxl mb-3">
                    <div class="card-body h250 p-0 rounded-xxl overflow-hidden m-3">
                        @if(isset($user->cover))
                            <img src="{{$user->cover}}" class="w-100 m-p" alt="image">
                        @elseif($user->cover == null)
                            <img src="{{asset('assets/images/visibility_banner.png')}}" class="w-100 m-p" alt="image">
                        @elseif($user->cover == 'null')
                            <img src="{{asset('assets/images/visibility_banner.png')}}" class="w-100 m-p" alt="image">
                        @else
                            <img src="{{asset('assets/images/visibility_banner.png')}}" class="w-100 m-p" alt="image">
                        @endif
                    </div>
                    <div class="card-body p-0 position-relative">
                        <figure class="avatar position-absolute w100 z-index-1" style="top:-40px; left: 30px;">
                            <img src="{{$user->avatar}}" alt="image" style="object-fit: cover" class="float-right p-1 bg-white rounded-circle h100 w100 w-100">
                        </figure>
                        <h4 class="fw-700 font-sm mt-2 mb-lg-4 pl-15">
                            {{$user->first_name}} {{$user->last_name}}
                            @php
                                $experiences = json_decode($speaker->work_experience);
                                $skills = json_decode($speaker->expertise);
                            @endphp
                            <br><small class="pt-1 fw-400 font-xsss">{{$experiences[0]->job_role[0]}} at {{$experiences[0]->company_name[0]}}</small>
                        </h4>
                        <p class="fw-400 font-xsss mb-lg-4 pl-5">Expertise: <span class="text-color">@forelse ($skills as $skill) {{$skill}}, @empty @endforelse</span>
                            <br>
                            <a href="#!" data-toggle="modal" data-target="#contactSpeaker" class="custom-btn btn rounded-2 mt-2"><i class="feather-mail"></i> Contact</a>
                        </p>
                        <div class="d-flex align-items-center justify-content-center position-absolute-md right-15 top-0 me-2">
                            <a href="{{$speaker->linkedin}}" target="_blank" class="d-none d-lg-block custom-btn p-3 z-index-1 rounded-2 font-xsss fw-700 ls-3 mr-2"><i class="feather-linkedin font-sm"></i></a>
                            <a href="{{$user->facebook}}" target="_blank" class="d-none d-lg-block custom-btn p-3 z-index-1 rounded-2 font-xsss fw-700 ls-3 mr-2"><i class="feather-facebook font-sm"></i></a>
                            <a href="{{$user->twitter}}" target="_blank" class="d-none d-lg-block custom-btn p-3 z-index-1 rounded-2 font-xsss fw-700 ls-3"><i class="feather-twitter font-sm"></i></a>
                        </div>
                    </div>
                </div>
                <div class="card w-100 rounded-xxl border-0 ps-4 pt-4 pe-4 pb-3 mb-3 mt-3">
                    <div class="row mb-4">
                        <div class="col-12">
                            <h6 class="mb-3">About </h6>
                            <p>{{$speaker->open_statement}}</p>
                        </div>
                    </div>
                </div>
                <div class="card w-100 rounded-xxl border-0 ps-4 pt-4 pe-4 pb-3 mb-3 mt-3">
                    <div class="row mb-4">
                        <div class="col-12">
                            <h6 class="mb-3">Work Experience</h6>
                            @php
                                $experiences = json_decode($speaker->work_experience);
                            @endphp
                            @forelse ($experiences as $experience)
                                <div class="d-flex">
                                    <img src="{{asset('assets/images/work.png')}}" class="h70 mr-4" alt="">
                                    <p class="border-bottom-xs w-100 pb-4">
                                        <strong>{{$experience->job_role[0]}}</strong><br>
                                        {{$experience->company_name[0]}}, {{\Carbon\Carbon::parse($experience->start_date[0])->toFormattedDateString()}} - {{\Carbon\Carbon::parse($experience->end_date[0])->toFormattedDateString()}}
                                    </p>
                                </div>

                            @empty

                            @endforelse
                        </div>
                    </div>
                </div>
                <div class="card w-100 rounded-xxl border-0 ps-4 pt-4 pe-4 pb-3 mb-3 mt-3">
                    <div class="row mb-4">
                        <div class="col-12">
                            <h6 class="mb-3">Education</h6>
                            <div class="d-flex">
                                <img src="{{asset('assets/images/edu.png')}}" class="h70 mr-4" alt="">
                                <p class="border-bottom-xs w-100 pb-4">
                                    <strong>{{$user->school}}</strong><br>
                                    Bachelor's Degree, History and International Studies
                                    2012 – 2016
                                </p>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="card w-100 rounded-xxl border-0 ps-4 pt-4 pe-4 pb-3 mb-3 mt-3">
                    <div class="row mb-4">
                        <div class="col-12">
                            <h6 class="mb-3">Media</h6>
                            <ul class="nav nav-tabs h55 d-flex product-info-tab border-bottom-0" id="pills-tab" role="tablist">
                                <li class="nav-item list-inline-item me-5">
                                    <a class="fw-700 nav-link font-xsss text-grey-500 pt-3 pb-3 ls-1 d-inline-block active" id="speak-tab" data-toggle="tab" href="#speak" role="tab" aria-controls="speak" aria-selected="true">
                                        Speaking Engagements
                                    </a>
                                </li>
                                <li class="nav-item list-inline-item me-5">
                                    <a class="fw-700 font-xsss text-grey-500 pt-3 pb-3 ls-1 d-inline-block" id="article-tab" data-toggle="tab" href="#article" role="tab" aria-controls="article" aria-selected="false">
                                        My Thought Leadership Articles
                                    </a>
                                </li>
                                <li class="nav-item list-inline-item me-5">
                                    <a class="fw-700 font-xsss text-grey-500 pt-3 pb-3 ls-1 d-inline-block" id="video-tab" data-toggle="tab" href="#video" role="tab" aria-controls="video" aria-selected="false">
                                        Video Footages
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="row">
                        <div class="tab-content" id="wizardSteps">
                            <div class="tab-pane fade show active" id="speak" role="tabpanel" aria-labelledby="speak-tab">
                                <div class="row">
                                    @php
                                        $flyers = json_decode($speaker->flyer);
                                    @endphp
                                    @forelse ($flyers as $flyer)
                                        <div class="col-12 col-xl-4 col-lg-4 pe-1 ps-1 mb-2">
                                            <a href="{{url('storage/'.$flyer)}}" data-lightbox="{{$speaker->id}}">
                                                <img src="{{url('storage/'.$flyer)}}" alt="image" class="img-fluid object-cover h300 w-100 rounded-3">
                                            </a>
                                        </div>
                                    @empty
                                        <h5 class="text-center">No flyers found</h5>
                                    @endforelse
                                </div>
                            </div>
                            <div class="tab-pane fade" id="article" role="tabpanel" aria-labelledby="article-tab">
                                <div class="row">
                                    @php
                                        $articles = json_decode($speaker->article);
                                    @endphp
                                    @forelse ($articles as $article)
                                        <div class="col-12 col-lg-6 col-xl-6">
                                            <div class="card w-100 no-shadow rounded-xxl border ps-4 py-5 pe-4 pb-3 mb-3">
                                                <div class="row mb-4">
                                                    <div class="col-12">
                                                        <h6 class="mb-3"><a href="{{$article->link[0]}}" class="text-color">{{$article->title[0]}}</a></h6>
                                                        <p class="pb-3">{{$article->description[0]}}</p>
                                                        <div class="mt-4">
                                                            <a href="{{$article->link[0]}}" class="custom-btn-outline rounded-1">Read more <i class="mdi mdi-arrow-right"></i></a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @empty

                                    @endforelse

                                </div>
                            </div>
                            <div class="tab-pane fade" id="video" role="tabpanel" aria-labelledby="video-tab">
                                <div class="row">
                                    @php
                                        $video = json_decode($speaker->video_footage);
                                    @endphp
                                    @if ($video)
                                        <div class="col-12 col-xl-6 col-lg-6 pe-1 ps-1 mb-2">
                                            <a href="{{$video[0]}}">
                                                <span class="play-icon-1"><img src="{{asset('assets/images/play-icon.png')}}"></span>
                                                <div class="overlay">
                                                    <img src="{{url('storage/'. $video[1])}}" alt="image" class="img-fluid object-cover h300 w-100 rounded-3">
                                                </div>
                                            </a>
                                        </div>
                                    @else
                                        <h5 class="text-center">No videos found</h5>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 col-lg-4 col-xl-4">
                <div class="card w-100 rounded-xxl border-0 ps-4 pt-4 pe-4 pb-3 mb-3 mt-3">
                    <div class="row my-4">
                        <h5>People also viewed</h5>
                    </div>
                    @forelse ($other_speakers as $speaker)
                        <div class="row mb-4 border-bottom-xs">
                            <div class="col-12">
                                <div class="d-flex">
                                    @php
                                        $user = App\Models\User::where('id', $speaker->user_id)->first();
                                    @endphp
                                    <a href="{{route('account.profile', $user->id)}}">
                                        <img src="{{$user->avatar}}" class="w50 h50 rounded-circle" style="object-fit: cover">
                                    </a>
                                    <div class="pl-2">
                                        <h6 class="mb-3"><span class="text-color">{{$user->first_name}} {{$user->last_name}}</span>
                                            <br><small class="pt-1 fw-400 font-xsss">{{$experiences[0]->job_role[0]}} at {{$experiences[0]->company_name[0]}}</small>
                                        </h6>
                                        <div class="mt-2 mb-4">
                                            <a href="{{route('speaker.profile', $speaker->user_id)}}" class="custom-btn-outline btn rounded-1">View Profile</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @empty

                    @endforelse

                </div>
            </div>
        </div>
    </div>
</div>
@include('elements.contact-speaker')
@endsection