@extends('layouts.tenant')

@section('title', 'Speakers')

@section('content')
<style>
    .nav-tabs .nav-link.active {
        color: #fff !important;
        background-color: #5151ff !important;
        border-radius: 8px;
        padding: 0.6rem 1rem;
    }
    .nav-tabs .nav-link {
        background: none;
        border: 1px solid #F6F6F6 !important;
        padding: 0.6rem 1rem;
        border-radius: 8px;
    }

    .negative-margin-top-100 {
        margin-top: -100px;
    }

    .no-margin {
        margin: 0 !important;
    }
    .card {
        border: 1px solid #f1f4f8 !important;
    }

    .quote-icon {
        position: absolute;
        height: 70px;
        width: 70px;
        background: #5151ff;
        border-radius: 50%;
        top: -1rem;
        left: 2rem;
        z-index: 1;
    }
    .quote-icon img {
        padding: 22px;
    }
    .text-yellow {
        color: #FE8B75 !important;
    }
    .bg-custom-1 {
        /* background: #5862fc; */
        background-image: url("{{@$page_content->hero_section_img ?? asset('assets/images/rec_img.png')}}");
        background-size: cover;
        /* background-position: center center; */
    }
    .shape {
        pointer-events: none;
        position: absolute;
    }
    .shape-bottom {
        bottom: 0;
        left: 0;
        right: 0;
    }
    .bgCustomColor {
        color: #5862fc;
    }
    .shape:not([class*=shape-blur])>* {
        transform: scale(2);
    }
</style>
<div class="custom-hero-search-speaker">
    <div class="container">
        <div class="row mt-4 align-items-center justify-content-center">
            <div class="col-12 col-xl-8 col-lg-8">
                @if(Auth::check())
                    @if(Auth::user()->isSuperAdmin() || Auth::user()->isTenant() || Auth::user()->isAdmin())
                        <div class="my-2">
                            <div class="edit-icon">
                                <i class="mdi mdi-pencil edit" data-toggle="modal" data-target="#homeHero"></i>
                            </div>
                        </div>
                    @endif
                @endif
                <div class="my-6 text-center">
                    <h1 class="fw-700 text-white">
                        @if(isset($visibility_content->hero_section_title))
                            {{$visibility_content->hero_section_title}}
                        @else
                            Search and Find Top Thought <br>Leaders in Africa
                        @endif
                    </h1>
                    <p class="text-white">
                        {!! $visibility_content->hero_section_p ?? 'Search our database for top African  executives who are experts and thought leaders in their field.' !!}
                    </p>
                    <div class="mt-4">
                        <form class="d-flex">
                            <i class="feather-search" style="position: absolute;padding: 0.7rem 1rem;font-size: 1.5rem; color: #9ea4a9;"></i>
                            <input type="email" name="subscribe" class="form-control rounded-2" style="padding-left: 3.5rem;" placeholder="Enter for Name, Expertise, INDUSTRY">
                            <button class="custom-btn rounded-2 ml-2" style="padding: 0.4rem 1rem !important; margin: 0.25rem 0; position: absolute; right: 1.2rem;">Search</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="bg-white">
    <div class="container">
        <div class="row my-5">
            @forelse ($speakers as $speaker)
                <div class="col-12 col-xl-3 col-xxl-3 col-lg-3">
                    <div class="follow-card border br-12 my-4 px-2">
                        <div class="row text-center justify-content-center">
                            <div class="col-12">
                                @php
                                    $user = App\Models\User::where('id', $speaker->user_id)->first();
                                    $sectors = json_decode($speaker->sector);
                                    $experiences = json_decode($speaker->work_experience);
                                    $skills = json_decode($speaker->expertise)
                                @endphp
                                <a href="{{route('account.profile', $user->id)}}">
                                    <div class="rounded-circle pt-5">
                                        <img src="{{$user->avatar}}" class="shadow-sm rounded-circle w100 h100" style="object-fit: cover" alt="">
                                    </div>
                                    <h6 class="mt-2 mb-2 text-color"> {{$user->first_name}} {{$user->last_name}}</h6>
                                </a>
                                <p class="text-muted">{{$sectors[0]}}</p>
                                <p>{{$experiences[0]->job_role[0]}} at {{$experiences[0]->company_name[0]}}</p>
                                <div class="text-gray-900 text-dark">
                                    <h6>Expertise: <span class="text-color">@forelse ($skills as $skill) {{$skill}}, @empty @endforelse</span></h6>
                                </div>
                                <div class="mt-4 mb-5 mx-3">
                                    <a href="{{route('speaker.profile', $speaker->user_id)}}" class="custom-btn-outline btn w-100 rounded-1">View Profile</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @empty

            @endforelse
        </div>
        <div class="row">
            {{$speakers->links()}}
        </div>
    </div>
</div>
<section class="bg-custom-1">
    <div class="container py-6">
        <div class="row text-center justify-content-center">
            <div class="col-8 my-auto sm-mt">
                <h2 class="text-white">Build your visibility</h2>
                <p class="text-white">
                    It’s time to build your visibility and thought leadership so you can attract global opportunities and recognition.
                    Get Seen, Get Known, Get Heard.
                </p>
                <div class="mt-2">
                    <a class="btn custom-btn-white px-5 py-3" href="#">Join Now</a>
                </div>
            </div>
        </div>
    </div>
</section>
@include('elements.home-hero')
@include('elements.home-course')
@include('elements.home-course-user')
@include('elements.home-contributor')
@include('elements.home-mentor')
@include('elements.home-qa')
@endsection