@extends('layouts.landing')

@section('title', 'Mentor')

@section('content')
<div class="container-fluid">
    <div class="row mb-3">
        <div class="col-6">
            <h4>Mentor's Profile</h4>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <div class="card w-100 border-0 p-0 bg-white shadow-xss rounded-xxl">
                <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/image10.png')}}" class="w-100 m-p" alt="image">
                    @elseif($user->cover == 'null')
                        <img src="{{asset('assets/images/image10.png')}}" class="w-100 m-p" alt="image">
                    @else
                        <img src="{{asset('assets/images/image10.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" class="float-right p-1 bg-white w100 h100 rounded-circle" style="object-fit: cover"></figure>
                    <h4 class="fw-700 font-sm mt-2 mb-lg-5 mb-4 pl-15">{{$user->first_name}} {{$user->last_name}} <span class="fw-500 font-xssss text-grey-500 mt-1 mb-3 d-block">{{$user->area_of_specialization}}</span></h4>
                    <div class="d-flex align-items-center justify-content-center position-absolute-md right-15 top-0 me-2">
                        @if(Auth::user()->isSuperAdmin() || Auth::user()->isTenant() || Auth::user()->isAdmin())
                            @if($mentor->status == 'pending')
                                <form action="{{route('mentor.update-profile', $mentor->id)}}" method="POST" class="mb-4">
                                    @csrf
                                    <input type="hidden" name="status" value="accepted">
                                    <button type="submit" class="btn custom-btn" onclick="this.classList.toggle('button--loading')"><i class="mdi mdi-check"></i> Accept</button>
                                </form>
                            @elseif($mentor->status == 'accepted')
                                <form action="{{route('mentor.update-profile', $mentor->id)}}" method="POST" class="mb-4">
                                    @csrf
                                    <input type="hidden" name="status" value="declined">
                                    <button type="submit" onclick="declineFunction()" class="btn custom-btn-red"><i class="mdi mdi-close"></i> Decline this request</button>
                                </form>
                            @elseif($mentor->status == 'declined')
                                <form action="{{route('mentor.update-profile', $mentor->id)}}" method="POST" class="mb-4">
                                    @csrf
                                    <input type="hidden" name="status" value="accepted">
                                    <button type="submit" class="btn custom-btn" onclick="this.classList.toggle('button--loading')"><i class="mdi mdi-check"></i> Accept</button>
                                </form>
                            @endif
                        @elseif($mentor->user_id == Auth::user()->id)
                            @if($mentor->status == 'pending')
                                <span class="alert-primary p-2 rounded theme-dark-bg text-current mb-4 mr-3">Status: Pending</span>
                            @elseif($mentor->status == 'accepted')
                                <span class="alert-primary p-2 rounded theme-dark-bg text-success mb-4 mr-3">Status: Approved</span>
                            @elseif($mentor->status == 'declined')
                                <span class="alert-primary p-2 rounded theme-dark-bg mb-4 mr-3">Status: Declined</span>
                            @endif
                        @else
                            @if($mentor_request)
                                @if($mentor_request->status == 'pending')
                                    <span class="custom-btn-outline rounded-1 text-color mr-2 mb-4" style="opacity: 0.2; cursor: not-allowed">Request sent</span>
                                    <span class="custom-btn-outline rounded-1 text-color mb-4" style="opacity: 0.2; cursor: not-allowed">Book a Session</span>
                                @elseif($mentor_request->status == 'accepted')
                                    @if($mentor_booking)
                                        @if($mentor_booking->status == 'pending')
                                            <span class="custom-btn-outline rounded-1 mb-4">Booking request pending</span>
                                        @elseif($mentor_booking->status == 'rescheduled')
                                            <a href="" data-toggle="modal" data-target="#confirmModal" class="custom-btn rounded-1 mb-4">Confirm reschedule</a>
                                        @elseif($mentor_booking->status == 'accepted')
                                            <span class="custom-btn-outline-green rounded-1 mb-4"><i class="feather-check-circle"></i> Booked</span>
                                        @endif
                                    @else
                                        <a href="" data-toggle="modal" data-target="#bookSessionModal" class="custom-btn rounded-1 mb-4">Book a Session</a>
                                    @endif
                                @elseif($mentor_request->status == 'declined')
                                    <span class="custom-btn-outline-red rounded-1 mb-4">Request declined</span>
                                @endif
                            @else
                                @if($accepted_requested_users->count() < $group->no_of_mentee)
                                    <a href="" data-toggle="modal" data-target="#requestMentorshipModal" class="custom-btn rounded-1 mr-2 mb-4">Request Mentorship</a>
                                    <span class="custom-btn-outline rounded-1 mb-4" style="opacity: 0.2; cursor: not-allowed">Book a Session</span>
                                @endif
                            @endif
                        @endif
                    </div>
                </div>
                <div class="card-body d-block w-100 shadow-none mb-0 p-0 border-top-xs">
                    <ul class="nav nav-tabs h55 d-flex product-info-tab border-bottom-0 ps-4" 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="overview-tab" data-toggle="tab" href="#overview" role="tab" aria-controls="overview" aria-selected="true">
                                Overview
                            </a>
                        </li>
                        <li class="nav-item list-inline-item me-5">
                            <a class="fw-700 font-xsss text-grey-500 pt-3 pb-2 ls-1 d-inline-block" id="review-tab" data-toggle="tab" href="#review" role="tab" aria-controls="review" aria-selected="false">
                                Reviews <span class="font-xsss alert-primary btn-round-xs theme-dark-bg text-current">{{$review_count}}</span>
                            </a>
                        </li>
                        <li class="nav-item list-inline-item me-5">
                            <a class="fw-700 font-xsss text-grey-500 pt-3 pb-2 ls-1 d-inline-block" id="mentee-tab" data-toggle="tab" href="#mentee" role="tab" aria-controls="mentee" aria-selected="false">
                                Mentees
                            </a>
                        </li>
                        @if(Auth::user()->isSuperAdmin())
                            <li class="nav-item list-inline-item me-5">
                                <a class="fw-700 font-xsss text-grey-500 pt-3 pb-2 ls-1 d-inline-block" id="request-tab" data-toggle="tab" href="#request" role="tab" aria-controls="request" aria-selected="false">
                                    Requests <span class="font-xsss alert-primary btn-round-xs theme-dark-bg text-current">{{$mentor_request_count}}</span>
                                </a>
                            </li>
                        @else
                            @if($mentor->user_id == Auth::user()->id)
                                <li class="nav-item list-inline-item me-5">
                                    <a class="fw-700 font-xsss text-grey-500 pt-3 pb-2 ls-1 d-inline-block" id="request-tab" data-toggle="tab" href="#request" role="tab" aria-controls="request" aria-selected="false">
                                        Requests <span class="font-xsss alert-primary btn-round-xs theme-dark-bg text-current">{{$mentor_request_count}}</span>
                                    </a>
                                </li>
                            @endif
                        @endif
                        @if($mentor->user_id == Auth::user()->id)
                            <li class="nav-item list-inline-item me-5">
                                <a class="fw-700 font-xsss text-grey-500 pt-3 pb-2 ls-1 d-inline-block" id="session-tab" data-toggle="tab" href="#session" role="tab" aria-controls="session" aria-selected="false">
                                    Sessions
                                </a>
                            </li>
                        @endif
                        @if($mentor->user_id == Auth::user()->id)
                            <li class="nav-item list-inline-item me-5">
                                <a class="fw-700 font-xsss text-grey-500 pt-3 pb-2 ls-1 d-inline-block" id="group-tab" data-toggle="tab" href="#group" role="tab" aria-controls="group" aria-selected="false">
                                    Group
                                </a>
                            </li>
                        @else
                            @if($accepted_mentee)
                                @if($accepted_mentee->user_id == Auth::user()->id)
                                    <li class="nav-item list-inline-item me-5">
                                        <a class="fw-700 font-xsss text-grey-500 pt-3 pb-2 ls-1 d-inline-block" id="group-tab" data-toggle="tab" href="#group" role="tab" aria-controls="group" aria-selected="false">
                                            Group
                                        </a>
                                    </li>
                                @endif
                            @endif
                        @endif
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="tab-content" id="wizardSteps">
            <div class="tab-pane fade show active" id="overview" role="tabpanel" aria-labelledby="overview-tab">
                <div class="row">
                    <div class="col-12 col-lg-8 col-xl-8">
                        <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">Bio</h6>
                                    <p>{{$mentor_profile->bio}}</p>
                                </div>
                            </div>
                        </div>
                        <div class="card w-100 rounded-xxl border-0 ps-4 pt-4 pe-4 pb-3 mb-3 mt-4">
                            <div class="row mb-4">
                                <div class="col-12">
                                    <h6 class="mb-4">Work Experience</h6>
                                    @php
                                        $experiences = json_decode($mentor_profile->work_experience);
                                    @endphp
                                    @if($experiences)
                                        @foreach ($experiences as $experience)
                                            <div class="row">
                                                <div class="col-md-8">
                                                    <div class="card-body d-flex pt-0 pb-3 overflow-hidden">
                                                        <div style="background: #F1F1FF;" class=" me-2 p-3 rounded-xxl">
                                                            <img src="/assets/images/mentor/bxs_book-reader.svg" alt="">
                                                        </div>
                                                        <h5 class="mt-2 ml-2 text-muted">{{$experience->company_name}}</h5>
                                                    </div>
                                                </div>
                                                <div class="col-md-4 my-auto">
                                                    <div class="rounded text-muted p-2 text-center"
                                                        style="background:#F1F1FF;">
                                                        {{\Carbon\Carbon::parse($experience->start_date)->toFormattedDateString()}} -
                                                        @if($experience->end_date == null)
                                                            Present
                                                        @else
                                                            {{\Carbon\Carbon::parse($experience->end_date)->toFormattedDateString()}}
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    @endif
                                </div>
                            </div>
                        </div>
                        <div class="card w-100 rounded-xxl border-0 ps-4 pt-4 pe-4 pb-3 mb-3 mt-4">
                            <div class="row mb-3">
                                <div class="col-12 mb-3">
                                    <h6>Academic qualifications</h6>
                                </div>
                                @php
                                    $qualifications = json_decode($mentor_profile->academic_qualifications);
                                @endphp
                                @if($qualifications)
                                    @foreach ($qualifications as $qualification)
                                        <p class="fw-500">{{$qualification->school_degree}}</p>
                                        <div class="row">
                                            <div class="col-md-8">
                                                <p>{{$qualification->school_name}}</p>
                                            </div>
                                            <div class="col-md-4">
                                                <p class="rounded text-muted p-2 text-center" style="background:#F1F1FF;">
                                                    {{\Carbon\Carbon::parse($qualification->school_start_date)->toFormattedDateString()}} -
                                                    @if($qualification->school_end_date == null)
                                                        Present
                                                    @else
                                                        {{\Carbon\Carbon::parse($qualification->school_end_date)->toFormattedDateString()}}
                                                    @endif
                                                </p>
                                            </div>
                                        </div>
                                    @endforeach
                                @endif
                            </div>
                        </div>
                        <div class="card w-100 rounded-xxl border-0 ps-4 pt-4 pe-4 pb-3 mb-3 mt-4">
                            <div class="row mb-3">
                                <div class="col-12 mb-3">
                                    <h6>Journals published</h6>
                                </div>
                                <div class="row mb-3">
                                    <div class="col-md-2">
                                        <img src="/assets/images/mentor/pdf.svg" class="border p-3" alt="">
                                    </div>
                                    <div class="col-md-8 my-auto">
                                        <a href="{{$mentor_profile->journals_published}}">{{$mentor_profile->journals_published}}</a>
                                    </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 mb-4">
                                <div class="col-12">
                                    <h6 class="mb-3">Cases handled</h6>
                                    @php
                                        $cases = json_decode($mentor_profile->cases_handled)
                                    @endphp
                                    @if($cases)
                                        @foreach ($cases as $case)
                                            <p>{{$case}}</p>
                                        @endforeach
                                    @endif
                                </div>
                            </div>
                        </div>
                        <div class="card w-100 rounded-xxl border-0 ps-4 pt-4 pe-4 pb-3 mb-3 mt-4">
                            <div class="row mb-4">
                                <div class="col-12">
                                    <h6 class="mb-3">Articles Published</h6>
                                    @php
                                        $articles = json_decode($mentor_profile->articles_published);
                                    @endphp
                                    @if($articles)
                                        @foreach ($articles as $article)
                                            <p><a href="{{$article}}">{{$article}}</a></p>
                                        @endforeach
                                    @endif
                                </div>
                            </div>
                        </div>
                        <div class="card w-100 rounded-xxl border-0 ps-4 pt-4 pe-4 pb-3 mb-3 mt-4">
                            <div class="row mb-3">
                                <div class="col-12 mb-3">
                                    <h6>Certification</h6>
                                </div>
                                @php
                                    $certifications = json_decode($mentor_profile->certifications);
                                @endphp
                                @if($certifications)
                                    @foreach ($certifications as $certification)
                                        <div class="row">
                                            <div class="col-9">
                                                <p class="fw-500">{{$certification->name}}</p>
                                            </div>
                                            <div class="col-3">
                                                <p class="rounded text-muted p-2 text-center" style="background:#F1F1FF;">{{$certification->year}}</p>
                                            </div>
                                        </div>
                                    @endforeach
                                @endif
                            </div>
                        </div>
                        <div class="card w-100 rounded-xxl border-0 ps-4 pt-4 pe-4 pb-3 mb-3 mt-4">
                            <div class="row mb-3">
                                <div class="col-12 mb-3">
                                    <h6>Socials</h6>
                                </div>
                                <div class="col-md-12 mb-3">
                                    <a href=""><img src="/assets/images/mentor/socials/facebook.svg"class="rounded-circle p-3" alt=""></a>
                                    <a href=""><img src="/assets/images/mentor/socials/twitter.svg"class="rounded-circle p-3" alt=""></a>
                                    <a href=""><img src="/assets/images/mentor/socials/linkedin.svg"class="rounded-circle p-3" alt=""></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade" id="review" role="tabpanel" aria-labelledby="review-tab">
                <div class="row">
                    <div class="col-12">
                        <div class="card w-100 shadow-xss rounded-xxl border-0 ps-4 pt-4 pe-4 pb-3 mb-3 mt-3">
                            <div class="card-body d-block w-100 shadow-none mb-0 p-0">
                                <h4>Reviews</h4>
                            </div>
                            <div class="card-body d-block border-top-xs mt-4">
                                <div class="row">
                                    @forelse ($reviews as $review)
                                    <div class="col-12 col-lg-6 col-xl-6">
                                        <div class="card-body d-block rounded-xxl border p-4 mt-4">
                                            <div class="d-flex">
                                                @php
                                                    $user = App\Models\User::where('id', $review->user_id)->first();
                                                @endphp
                                                <a href="{{route('account.profile', $user->id)}}"><img src="{{$user->avatar}}" class="w60 h60 rounded-circle" style="object-fit: cover"></a>
                                                <div class="pl-2">
                                                    <a href="{{route('account.profile', $user->id)}}"><h6>{{$user->first_name}} {{$user->last_name}}</h6></a>
                                                    <p>{{$user->area_of_specialization}}</p>
                                                    <span class="d-flex">
                                                        @if($review->rating)
                                                            {{getRating($review->rating)}}
                                                        @endif
                                                    </span>
                                                </div>
                                            </div>
                                            <p class="pt-2">{{$review->review}}</p>
                                        </div>
                                    </div>
                                @empty
                                    <div class="card-body p-0 my-3 position-relative justify-content-center text-center">
                                        <a href="#!" class="p-4 text-center ms-3 menu-icon center-menu-icon"><i class="mdi mdi-comment-text-multiple font-lg alert-primary btn-round-lg theme-dark-bg text-current"></i></a>
                                        <p class="pt-2">There are no reviews</p>
                                    </div>
                                @endforelse
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade" id="mentee" role="tabpanel" aria-labelledby="mentee-tab">
                <div class="row">
                    <div class="col-12">
                        <div class="card w-100 shadow-xss rounded-xxl border-0 ps-4 pt-4 pe-4 pb-3 mb-3 mt-3">
                            <div class="card-body d-block w-100 shadow-none mb-0 p-0">
                                <h4>Mentees</h4>
                            </div>
                            <div class="card-body d-block w-100 shadow-none mb-0 pt-4 p-0 border-top-xs">
                                <div class="row">
                                    @forelse ($accepted_requested_users as $accepted_requested_user)
                                        <div class="col-12 col-xl-3 col-xxl-3 col-lg-3">
                                            <div class="text-center follow-card custom-shadow p-4">
                                                @php
                                                    $user = App\Models\User::where('id', $accepted_requested_user->user_id)->first();
                                                @endphp
                                                <div class="rounded-circle pt-5">
                                                    <img src="{{$user->avatar}}" class="rounded-circle w60 h60" style="object-fit: cover" alt="">
                                                </div>
                                                <h6 class="mt-2 mb-2">{{$user->first_name}} {{$user->last_name}}</h6>
                                                <p class="mt-4">
                                                    <a href="{{route('account.profile', $user->id)}}" class="btn alert-primary br-50 pl-3 pr-3"><i class="mdi mdi-account-check-outline"></i> View profile</a>
                                                </p>
                                            </div>
                                        </div>
                                    @empty
                                        <div class="row mt-4">
                                            <div class="card-body p-0 my-3 position-relative justify-content-center text-center">
                                                <a href="#!" class="p-4 text-center ms-3 menu-icon center-menu-icon"><i class="mdi mdi-account-group font-lg alert-primary btn-round-lg theme-dark-bg text-current"></i></a>
                                                <p class="pt-2">There are no mentees</p>
                                            </div>
                                        </div>
                                    @endforelse
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade" id="request" role="tabpanel" aria-labelledby="request-tab">
                <div class="row">
                    <div class="col-12">
                        <div class="card w-100 shadow-xss rounded-xxl border-0 ps-4 pt-4 pe-4 pb-3 mb-3 mt-3">
                            <div class="card-body d-block w-100 shadow-none mb-0 p-0">
                                <h4>Requests</h4>
                            </div>
                            <div class="card-body d-block w-100 shadow-none mb-0 pt-4 p-0 border-top-xs">
                                <div class="row">
                                    @forelse ($requested_users as $requested_user)
                                        <div class="col-12 col-xl-3 col-xxl-3 col-lg-3">
                                            <div class="text-center follow-card custom-shadow p-4">
                                                @php
                                                    $user = App\Models\User::where('id', $requested_user->user_id)->first();
                                                @endphp
                                                <div class="rounded-circle pt-5">
                                                    <img src="{{$user->avatar}}" class="rounded-circle w60 h60" style="object-fit: cover" alt="">
                                                </div>
                                                <h6 class="mt-2 mb-2"><a href="{{route('account.profile', $user->id)}}">{{$user->first_name}} {{$user->last_name}}</a></h6>
                                                <p class="mt-4">
                                                    @php
                                                        $requested_at = $requested_user->created_at->diffForHumans();
                                                    @endphp
                                                    <a data-toggle="modal" onclick='showRequestModal("{{$user->first_name}}", "{{$user->last_name}}", "{{$user->avatar}}", "{{$user->id}}", "{{$requested_user->reason}}", "{{$requested_at}}")' class="text-color cursor-pointer">View request</a>
                                                </p>
                                                <div class="mt-4 d-flex">
                                                    <form action="{{route('mentor.accept-request', $requested_user->id)}}" method="POST">
                                                        @csrf
                                                        <input type="hidden" name="status" value="accepted">
                                                        <button type="submit" class="btn button_load custom-btn mr-2" onclick="this.classList.toggle('button--loading')">
                                                            <span class="button__text"><i class="mdi mdi-check"></i> Accept</span>
                                                        </button>
                                                    </form>
                                                    <form action="{{route('mentor.decline-request', $requested_user->id)}}" method="POST">
                                                        @csrf
                                                        <input type="hidden" name="status" value="declined">
                                                        <button type="submit" class="btn custom-btn-outline-red" onclick="declineRequest()"><i class="mdi mdi-close"></i> Decline this request</button>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    @empty
                                    <div class="row mt-4">
                                        <div class="card-body p-0 my-3 position-relative justify-content-center text-center">
                                            <a href="#!" class="p-4 text-center ms-3 menu-icon center-menu-icon"><i class="mdi mdi-account-group font-lg alert-primary btn-round-lg theme-dark-bg text-current"></i></a>
                                            <p class="pt-2">There are no requests</p>
                                        </div>
                                    </div>
                                    @endforelse
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade" id="session" role="tabpanel" aria-labelledby="session-tab">
                <div class="row">
                    <div class="col-12">
                        <div class="card w-100 shadow-xss rounded-xxl border-0 ps-4 pt-4 pe-4 pb-3 mb-3 mt-3">
                            <div class="card-body d-block w-100 shadow-none mb-0 p-0">
                                <h5>Sessions</h5>
                            </div>
                            <div class="card-body d-block border-top-xs mt-4">
                                <div class="row">
                                    @forelse ($mentor_bookings as $mentor_booking)
                                        <div class="col-12 col-lg-4 col-xl-4">
                                            <div class="card-body d-block rounded-xxl border p-4 mt-4">
                                                <div class="my-4">
                                                    <h6>Mentorship Session</h6>
                                                    @php
                                                        $user = App\Models\User::where('id', $mentor_booking->user_id)->first();
                                                    @endphp
                                                    <p>with {{$user->first_name}} {{$user->last_name}}</p>
                                                    @if($mentor_booking->status == 'pending')
                                                        <span class="d-flex mb-4">
                                                            <span class="mr-3">
                                                                <p><i class="feather-calendar text-color"></i> {{\Carbon\Carbon::parse($mentor_booking->mentee_session_time)->toFormattedDateString()}}</p>
                                                            </span>
                                                            <span>
                                                                <p><i class="feather-clock text-color"></i> {{substr($mentor_booking->mentee_session_time, 11)}}</p>
                                                            </span>
                                                        </span>
                                                    @elseif($mentor_booking->status == 'rescheduled')
                                                        @php
                                                            $mentor_session_times = json_decode($mentor_booking->mentor_session_time);
                                                        @endphp
                                                        @foreach($mentor_session_times as $mentor_session_time)
                                                            <span class="d-flex mb-4">
                                                                <span class="mr-3">
                                                                    <i class="feather-calendar text-color"></i> {{\Carbon\Carbon::parse($mentor_session_time)->toFormattedDateString()}}
                                                                </span>
                                                                <span>
                                                                    <i class="feather-clock text-color"></i> {{substr($mentor_session_time, 11)}}
                                                                </span>
                                                            </span>
                                                        @endforeach
                                                    @elseif($mentor_booking->status == 'accepted')
                                                        <span class="d-flex mb-4">
                                                            <span class="mr-3">
                                                                <p><i class="feather-calendar text-color"></i> {{\Carbon\Carbon::parse($mentor_booking->mentee_session_time)->toFormattedDateString()}}</p>
                                                            </span>
                                                            <span class="mr-3">
                                                                <p><i class="feather-clock text-color"></i>
                                                                    @if(substr($mentor_booking->mentee_session_time, 11) > 11.59)
                                                                        {{substr($mentor_booking->mentee_session_time, 11)}} PM
                                                                    @else
                                                                        {{substr($mentor_booking->mentee_session_time, 11)}} AM
                                                                    @endif
                                                                </p>
                                                            </span>
                                                            @if($mentor_booking->mentee_session_time < now())
                                                                <span class="text-gray-400">
                                                                    <i class="feather-check-circle text-gray-400"></i> Ended
                                                                </span>
                                                            @else
                                                                <span class="text-green">
                                                                    <i class="feather-check-circle text-green"></i> Scheduled
                                                                </span>
                                                            @endif
                                                        </span>
                                                    @endif
                                                    @if($mentor_booking->status == 'pending')
                                                        <div class="d-flex">
                                                            <a href="#!" class="custom-btn-outline rounded-1 mr-3" id="reschedule" onclick="reschedule()"><i class="feather-clock"></i> Reschedule</a>
                                                            <form action="{{route('mentor.accept-session', $mentor_booking->id)}}" method="POST" id="accept">
                                                                @csrf
                                                                <input type="hidden" name="status" value="accepted">
                                                                <button type="submit" class="custom-btn rounded-1" onclick="this.classList.toggle('button--loading')">
                                                                    <span class="button__text"><i class="mdi mdi-check"></i> Accept</span>
                                                                </button>
                                                            </form>
                                                        </div>
                                                        <a href="#!" class="custom-btn-outline rounded-1 text-center" id="cancel-reschedule" style="display: none" onclick="cancelReschedule()"><i class="mdi mdi-close"></i> Cancel</a>
                                                        <form action="{{route('mentor.accept-session', $mentor_booking->id)}}" method="POST" id="reschedule-date" style="display: none">
                                                            @csrf
                                                            <div class="form-group mt-4">
                                                                <label>
                                                                    What day(s) are you available for a session?
                                                                </label>
                                                                <input type="datetime-local" name="mentor_session_time[]" class="form-control">
                                                                <div id="new_date"></div>
                                                                <div class="mt-2">
                                                                    <button id="add-day" type="button" class="text-color"><i class="mdi mdi-plus"></i> Add day</button>
                                                                </div>
                                                                <input type="hidden" name="status" value="rescheduled">
                                                                <button type="submit" name="reschedule" class="custom-btn button_load rounded-1 w-100 mt-4" onclick="this.classList.toggle('button--loading')">
                                                                    <span class="button__text"><i class="mdi mdi-check"></i> Confirm Reschedule</span>
                                                                </button>
                                                            </div>
                                                        </form>
                                                    @elseif($mentor_booking->status == 'rescheduled')
                                                        <span class="custom-btn-outline rounded-1 mb-4"><i class="feather-check-circle"></i> Rescheduled</span>
                                                    @elseif($mentor_booking->status == 'accepted')
                                                        @if($mentor_booking->mentee_session_time > now())
                                                            <span class="custom-btn-outline rounded-1" style="opacity: 0.2; cursor: not-allowed">Start Session</span>
                                                        @elseif($mentor_booking->mentee_session_time < now())
                                                            <a class="custom-btn-outline rounded-1">Session closed</a>
                                                        @elseif($mentor_booking->mentee_session_time == now())
                                                            <a href="#!" class="custom-btn-outline rounded-1">Start Session</a>
                                                        @endif
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    @empty
                                        <div class="row my-4">
                                            <div class="card-body p-0 my-3 position-relative justify-content-center text-center">
                                                <a href="#!" class="p-4 text-center ms-3 menu-icon center-menu-icon"><i class="mdi mdi-account-group font-lg alert-primary btn-round-lg theme-dark-bg text-current"></i></a>
                                                <p class="pt-2 pb-4">No Session has been created</p>
                                            </div>
                                        </div>
                                    @endforelse
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade" id="group" role="tabpanel" aria-labelledby="group-tab">
                <div class="row">
                    <div class="col-12">
                        <div class="card w-100 shadow-xss rounded-xxl border-0 ps-4 pt-4 pe-4 pb-3 mb-3 mt-3">
                            <div class="card-body d-block w-100 shadow-none mb-0 p-0">
                                <h5>Mentorship Group</h5>
                            </div>
                            <div class="card-body d-block w-100 shadow-none mb-0 pt-4 p-0 border-top-xs">
                                <div class="row my-4">
                                    <div class="card-body p-0 my-3 position-relative justify-content-center text-center">
                                        <a href="#!" class="p-4 text-center ms-3 menu-icon center-menu-icon"><i class="mdi mdi-account-group font-lg alert-primary btn-round-lg theme-dark-bg text-current"></i></a>
                                        @if($group)
                                            @if($mentor->user_id == Auth::user()->id)
                                                <p class="pt-2 pb-4">Hold conversations in your mentorship group with your mentees</p>
                                            @else
                                                <p class="pt-2 pb-4">You've been added to this mentor's group</p>
                                            @endif
                                            <a href="{{route('mentor.group', $mentor->id)}}" class="custom-btn">View group</a>
                                        @else
                                            @if($mentor->user_id == Auth::user()->id)
                                                <p class="pt-2 pb-4">To create a group for your mentees, you need to have a mentee</p>
                                            @else
                                                <p class="pt-2 pb-4">No group has been created yet</p>
                                            @endif
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="requestMentorshipModal" tabindex="-1" role="dialog" aria-labelledby="requestMentorshipModal" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content p-2">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">Mentorship request</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form action="{{route('mentor.request-mentor')}}" method="POST">
                @csrf
                <div class="modal-body">
                    <div class="mb-3">
                        <small class="text-muted">
                            To request mentorship from this mentor, give explicit reasons why you want to be mentored and what you want to be mentored on.
                            Your mentor can either accept or decline this request. Once accepted, you'll be added to a group with your mentor. Alternatively, you can book a private session
                        </small>
                    </div>
                    <div class="mb-3">
                        <label for="message">Your message</label>
                        <input type="hidden" name="user_id" value="{{Auth::user()->id}}">
                        <input type="hidden" name="mentor_id" value="{{$mentor->id}}">
                        <input type="hidden" name="status" value="pending">
                        <textarea name="reason" id="message" class="form-control" cols="30" rows="10" placeholder="Enter your request"></textarea>
                    </div>
                    <div class="mb-2">
                        <button type="submit" class="btn custom-btn button_load w-100" onclick="this.classList.toggle('button--loading')">
                            <div class="button__text">Send Request</div>
                        </button>
                    </div>
                </div>
            </form>
        </div>
        </div>
    </div>
    <div class="modal fade" id="acceptRequestModal" tabindex="-1" role="dialog" aria-labelledby="acceptRequestModal" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content p-2">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">New request</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form action="{{route('mentor.request-mentor')}}" method="POST">
                @csrf
                <div class="modal-body">
                    <p>Hi Mentor, <span id="first-name"></span> is requesting to be mentored by you</p>
                    <div class="p-4 mt-4">
                        <div class="d-flex">
                            <img id="avatar" class="w60 h60 rounded-circle" style="object-fit: cover">
                            <div class="pl-2">
                                <h6><span id="first-name"></span> <span id="last-name"></span></h6>
                                <p>Requested <span id="created"></span></p>
                                <input type="hidden" id="user-id">
                            </div>
                        </div>
                        <p class="pt-2" id="reason">Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, aspernatur ex cupiditate blanditiis id earum laboriosam saepe commodi assumenda, molestiae culpa alias mollitia esse minus consequatur! Temporibus repellendus ad necessitatibus.</p>
                    </div>
                </div>
            </form>
        </div>
        </div>
    </div>
    <div class="modal fade" id="bookSessionModal" tabindex="-1" role="dialog" aria-labelledby="bookSessionModal" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content p-2">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLongTitle">Book a Session</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form action="{{route('mentor.book-session')}}" method="POST">
                    @csrf
                    <div class="modal-body">
                        <div class="mb-3">
                            <h5>Select date and time</h5>
                            <div class="form-group">
                                <input type="datetime-local" name="mentee_session_time" class="form-control">
                            </div>
                        </div>
                        <div class="mb-2">
                            <input type="hidden" name="user_id" value="{{Auth::user()->id}}">
                            <input type="hidden" name="mentor_id" value="{{$mentor->id}}">
                            <input type="hidden" name="status" value="pending">
                            <button type="submit" class="btn custom-btn button_load w-100" onclick="this.classList.toggle('button--loading')">
                                <div class="button__text">Confirm Booking</div>
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="modal fade" id="confirmModal" tabindex="-1" role="dialog" aria-labelledby="confirmModal" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content p-2">
            <div class="modal-header mt-2">
                <h5 class="modal-title" id="exampleModalLongTitle">Mentorship Booking</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            @php
                $confirm = App\Models\MentorBookingSession::where('mentor_id', $mentor->id)->where('user_id', Auth::user()->id)->first();
            @endphp
            <form action="{{route('mentor.accept-session', $confirm ? $confirm->id : '')}}" method="POST">
                @csrf
                <div class="modal-body">
                    <div class="mb-3">
                        <h6 class="mb-4">Confirm a rescheduled date</h5>

                        @if($confirm)
                            @php
                                $mentor_session_times = json_decode($confirm->mentor_session_time);
                            @endphp
                            @foreach($mentor_session_times as $mentor_session_time)
                                <span class="row mb-4">
                                    <div class="col">
                                        <span>
                                            <i class="feather-calendar text-color mr-2"></i> {{\Carbon\Carbon::parse($mentor_session_time)->toFormattedDateString()}}
                                        </span>
                                    </div>
                                    <div class="col">
                                        <span>
                                            <i class="feather-clock text-color mr-2"></i> {{substr($mentor_session_time, 11)}}
                                        </span>
                                    </div>
                                    <div class="col-auto">
                                        <input type="hidden" name="mentee_session_time" value="{{$mentor_session_time}}">
                                        <input type="hidden" name="status" value="accepted">
                                        <button type="submit" name="accept" class="btn custom-btn br-50 button_load" style="margin-top: -0.5rem" onclick="this.classList.toggle('button--loading')">
                                            <div class="button__text"><i class="mdi mdi-check"></i> Schedule</div>
                                        </button>
                                    </div>
                                </span>
                            @endforeach
                        @endif
                    </div>
                </div>
            </form>
        </div>
        </div>
    </div>
    <script>
         $("#add-day").click(function(e){

            var addDay =  '<input type="datetime-local" name="mentor_session_time[]" class="form-control mt-4"><br><span class="text-red font-xsss cursor-pointer" onClick="deleteInput(this)"  aria-hidden="true"><i class="mdi mdi-close"></i>Remove</span>';

            $("#new_date").append(addDay);
        });

        function deleteInput(e) {
            e.parentElement.remove();
        }

        function declineFunction() {
            if(!confirm("Are you sure you want to decline this Mentor?"))
            event.preventDefault();
            this.classList.toggle('button--loading');
        }

        function declineRequest() {
            if(!confirm("Are you sure you want to decline this mentorship request?"))
            event.preventDefault();
        }

        function showRequestModal(first_name, last_name, avatar, id, reason, created){
            document.getElementById("first-name").innerHTML = first_name;
            document.getElementById("last-name").innerHTML = last_name;
            document.getElementById("avatar").src = avatar;
            document.getElementById("user-id").value = id;
            document.getElementById("reason").innerHTML = reason;
            document.getElementById("created").innerHTML = created;
            $('#acceptRequestModal').modal('show')
        }

        function reschedule() {
            document.getElementById('reschedule-date').style.display = 'block';
            document.getElementById('accept').style.display = 'none';
            document.getElementById('reschedule').style.display = 'none';
            document.getElementById('cancel-reschedule').style.display = 'block';
        }
        function cancelReschedule() {
            document.getElementById('reschedule-date').style.display = 'none';
            document.getElementById('accept').style.display = 'block';
            document.getElementById('reschedule').style.display = 'block';
            document.getElementById('cancel-reschedule').style.display = 'none';
        }


    </script>
@endsection