@if(isset($user->id) && in_array($user->role, ['General', 'PI']))
@php $postId = (isset($post->id) && !empty($post->id)) ? '/' . $post->id : ''; @endphp
<div class="col-xl-3 col-lg-3 col-md-12 col-sm-12 sidebar">
	<div class="grey-bg-wrap h-100">
		<div class="post-right-wrapper main-box-white my-profile-sidebar mb-4">
			<label class="text-center w-100 mb-3">{{ $user->full_name }}</label>
			<div class="row">
				<div class="col-sm-4 post-type-selector-image">
					<img src="{{ getImage($user->image) ?? asset('assets/media/extra/neutron-star.png') }}" class="img-fluid">
				</div>
				<div class="col-sm-8 data-right-content">
					<div class="d-flex justify-content-between align-items-center">
						<div class="title-wrap">
							<label class="m-0 font-size-12">{{ $user->short_bio }}</label>
						</div>
					</div>
				</div>
			</div>
			<div class="row mt-3">
				<div class="col-sm-3 post-type-selector-image">
					<img src="{{asset('assets/media/extra/research-position-icon.png')}}" class="img-fluid">
				</div>
				<div class="col-sm-9 data-right-content post-content-right">
					<label class="mb-0 sub-label">{{ $user->position }}</label>
					@if ($user->role == 'General')
					<div class="pragraph-p">
						<p class="font-size-12">Works in the lab of 
							@if(isset($user->investigator->status) && $user->investigator->status == 'Active')
							<a href="{{getMURL('view-profile/' . $user->investigator_id)}}" class="text-decoration-underline">{{ $user->investigator->full_name ?? '' }}</a>
							@else
							{{ $user->investigator->full_name ?? '' }}
							@endif
						</p>
					</div>
					@endif
				</div>
			</div>
			<div class="row mt-3">
				<div class="col-sm-3 post-type-selector-image">
					<img src="{{asset('assets/media/extra/research-position-landmark.png')}}" class="img-fluid">
				</div>
				<div class="col-sm-9 data-right-content post-content-right">
					<label class="mb-0 sub-label">{{ $user->research_name ?? '' }}</label>
					<div class="pragraph-p">
						<p class="font-size-12">{{ $user->other_info->research_division ?? '' }}</p>
					</div>
				</div>
			</div>

			@isset($user->other_info->collaboration_bandwidth)
			<div class="mt-2 collaboration-bandwidth d-flex justify-content-between">
				<p class="CollaborationBandwidth w-40 mb-0">Collaboration Bandwidth</p>
				<div class="collaboration-wrapper small w-50">
					<div class="radio_container">
						<input type="radio" name="collaboration-side-radio" id="sidebarTemporarilyUnavailable" {{ $user->other_info->collaboration_bandwidth == 'TemporarilyUnavailable' ? 'checked' : '' }} disabled>
						<label for="sidebarTemporarilyUnavailable" class="one"></label>

						<input type="radio" name="collaboration-side-radio" id="sidebarVerySelective" {{ $user->other_info->collaboration_bandwidth == 'VerySelective' ? 'checked' : '' }} disabled>
						<label for="sidebarVerySelective" class="two"></label>

						<input type="radio" name="collaboration-side-radio" id="sidebarSelective" {{ $user->other_info->collaboration_bandwidth == 'Selective' ? 'checked' : '' }} disabled>
						<label for="sidebarSelective" class="three"></label>

						<input type="radio" name="collaboration-side-radio" id="sidebarMotivated" {{ $user->other_info->collaboration_bandwidth == 'Motivated' ? 'checked' : '' }} disabled>
						<label for="sidebarMotivated" class="four"></label>

						<input type="radio" name="collaboration-side-radio" id="sidebarHighlyMotivated" {{ $user->other_info->collaboration_bandwidth == 'HighlyMotivated' ? 'checked' : '' }} disabled>
						<label for="sidebarHighlyMotivated" class="five"></label>
					</div>
					<p class="m-0 CollaborationBandwidth w-100">
						@if ($user->other_info->collaboration_bandwidth == 'TemporarilyUnavailable')
						Temporarily Unavailable
						@elseif($user->other_info->collaboration_bandwidth == 'VerySelective')
						Very Selective
						@elseif($user->other_info->collaboration_bandwidth == 'Selective')
						Selective
						@elseif($user->other_info->collaboration_bandwidth == 'Motivated')
						Motivated
						@elseif($user->other_info->collaboration_bandwidth == 'HighlyMotivated')
						Highly Motivated
						@endif
					</p>
				</div>
			</div>
			@endisset

		</div>
		<div class="post-right-wrapper main-box-white h-100 d-flex flex-column my-profile-sidebar">
			<h2 class="secondary-title text-capitalize text-center">{{ $user->full_name }}</h2>
			<h2 class="secondary-title text-capitalize mb-4 text-center">Close Colleagues</h2>
			<!-- Nav tabs -->
			<ul class="nav nav-tabs transparent-bg-wrap border-bottom-removed" id="other-profile-count">
				<li class="nav-item">
					<span class="total">{{$sidebar["closeColleaguesCount"]}}</span><a class="nav-link active" data-val="close" href="javascript:void(0)">Close Colleagues</a>
				</li>
				<li class="nav-item">
					<span class="total">{{$sidebar["mutualCount"]}}</span><a class="nav-link active" data-val="mutual" href="javascript:void(0)">Mutual Colleagues</a>
				</li>
			</ul>

			<!-- Tab panes -->
			<div class="tab-content">
				<div class="tab-pane active" id="closeColleages">

					@foreach($sidebar['closeMutualColleagues']->take(6) as $data)
					<div class="my-4 list-class-{{$data->frnd_type}}">
						<div class="row feed-redirection" data-post_id="{{$data->id}}" data-action="User" style="cursor: pointer">
							<div class="col-sm-3 post-type-selector-image">
								<img src="{{getImage($data->image) ?? asset('assets/media/extra/neutron-star.png')}}" alt="{{$data->name}}" class="img-fluid">
							</div>
							<div class="col-sm-9 data-right-content">
								<div class="d-flex justify-content-between align-items-center">
									<div class="title-wrap">
										<label class="m-0 w-100 user-name">{{ucfirst($data->name) . ' ' . (($data->middle_name != '') ? (ucfirst($data->middle_name) . ' ') : '') . ucfirst($data->last_name)}}</label>
										<label class="m-0 w-100 research-name">{{$data->research_name ?? ''}}</label>
									</div>
								</div>
							</div>
						</div>
					</div>
					@endforeach

				</div>
			</div>
			<div class="d-flex view-all" style="display:{{$sidebar['closeMutualColleagues']->count()>0 ? '' :'none'}} ;">
				<button type="button" class="primary-btn" data-toggle="modal" data-target="#viewMutualProfiles">View All</button>
			</div>
			<div class="modal" id="viewMutualProfiles">
				<div class="modal-dialog edit-popup">
					<div class="modal-content">

						<!-- Modal Header -->
						<div class="modal-header">
							<h4 class="modal-title">Close Colleagues and Mutual Profiles</h4>
							<button type="button" class="btn-close close" data-dismiss="modal"></button>
						</div>

						<!-- Modal body -->
						<div class="modal-body">

							<div class="col-12 p-0">
								<label id="SearchFriendProfileCount">{{$sidebar['closeMutualColleagues']->count() ?? 0}} Profiles</label>
								<div class="row my-2 filter">
									<div class="col-md-3">
										<div class="form-group m-0 d-flex align-items-center">
											<label for="sort" class="labels mr-2 mb-0">
												Sort by:
											</label>
											<div class="select_wrap" id="showSelectSortBox">
												<input type="hidden" id="showSelectSort" name="showSelectSort" value="RecentlyAdded">
												<input type="hidden" id="user_id" name="user_id" value="{{$user->id}}">
												<div class="d-flex default_option" type="button" data-toggle="dropdown">
													Recently added
												</div>
												<div class="dropdown-menu default_option_list">
													<a class="dropdown-item" href="javascript:void(0);" data-val="RecentlyAdded">Recently Added</a>
													<a class="dropdown-item" href="javascript:void(0);" data-val="FirstName">First Name</a>
													<a class="dropdown-item" href="javascript:void(0);" data-val="LastName">Last Name</a>
												</div>
											</div>
										</div>
									</div>
									<div class="col-md-6">
										<div class="form-group m-0 d-flex align-items-center">
											<label class="labels mb-2">Show</label>
											<div class="form-check ml-4 p-0">
												<input type="radio" class="showFriendType" id="showCloseColleagues" name="showFriendType" value="Colleague" checked>
												<label for="showCloseColleagues"> Close Colleagues</label>
											</div>
											<div class="form-check ml-4 p-0">
												<input type="radio" class="showFriendType" id="showMutualedColleagues" name="showFriendType" value="Mutual">
												<label for="showMutualedColleagues"> Mutual Colleagues</label>
											</div>
										</div>
									</div>
									<div class="col-md-3">
										<div class="form-group has-search m-0">
											<i class="fa fa-search form-control-feedback"></i>
											<input type="text" class="form-control" id="showSearchName" name="showSearchName" placeholder="Search by name">
										</div>
									</div>
								</div>
								<div class="filter-result appendSearchRecordsClass">

									@foreach($sidebar['closeMutualColleagues'] as $key => $data)
									<div class="row mt-2 mb-3" id="{{$data->pivot->type ?? ''}}{{$data->id}}">
										<div class="col-lg-1 text-center">
											<div class="post-type-selector-image">
												<img src="{{getImage($data->image) ?? asset('assets/media/extra/neutron-star.png')}}" alt="{{$data->name}}" class="img-fluid">
											</div>
										</div>
										<div class="col-lg-11 col-sm-12">
											<div class="data-right-content pb-2 {{(isset($sidebar['AllCloseColleagues'][$key + 1]) ? 'border-bottom' : '')}}">
												<div class="d-flex justify-content-between align-items-center">
													<div class="title-wrap">
														<label class="m-0 w-100 user-name">{{ucfirst($data->name) . ' ' . (($data->middle_name != '') ? (ucfirst($data->middle_name) . ' ') : '') . ucfirst($data->last_name)}}<sub>{{getPronounString($data->id)}}</sub></label>
														<label class="m-0 w-100 research-name">{{$data->research_name ?? ''}}</label>
													</div>
													<div class="d-flex align-items-center justify-content-between">
														<!-- <button class="primary-btn mr-4 disabled message-button" disabled>Message</button> -->
														<button class="primary-btn mr-4 message-button viewProfileNewConversationButton FeedNewConversationNewButton" type="button" data-val="{{$data->id}}" data-name="{{ucfirst($data->name) . ' ' . (($data->middle_name != '') ? (ucfirst($data->middle_name) . ' ') : '') . ucfirst($data->last_name)}}" >Message</button>
														<div class="dropdown remove" style="display: none;">
															<div class="dropdown-toggle d-flex " type="button" data-toggle="dropdown">
																<div class="circle"></div>
																<div class="circle"></div>
																<div class="circle"></div>
															</div>
															<ul class="dropdown-menu">
																<a class="dropdown-item deleteUserFriend" href="javascript:void(0);" data-val="{{$data->id}}" data-type="{{$data->pivot->type ?? ''}}"><i class="fas fa-trash-alt"></i> Remove</a>
															</ul>
														</div>
													</div>
												</div>
											</div>
										</div>
									</div>
									@endforeach

								</div>
							</div>
							</form>
						</div>
						<div class="modal-footer d-flex">
							<button type="button" class="primary-btn" data-dismiss="modal">Done</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>


@else
<div class="col-xl-3 col-lg-3 col-md-5 col-sm-12">

</div>
@endif

@push('footerscript')

<script type="text/javascript">
	var baseProfileURL = "{{getURL('public/storage/')}}";
	var noProfileImage = "{{asset('assets/media/extra/neutron-star.png')}}";
	$("#other-profile-count .nav-link").on("click", function() {
		$("#other-profile-count .nav-link").removeClass("active");
		$(this).addClass("active");
		if ($(this).data("val") == "close") {
			$(".list-class-mutual").show();
			$(".list-class-close").show();
		} else {
			$(".list-class-close").hide();
			$(".list-class-mutual").show();
		}
	})


	function getMyProfileSidebarData() {
		//disabledSearchFriendButton();
		var formData = {};
		let $thisForm = $(this);

		formData.sort = $('#showSelectSort').val();
		formData.user_id = $('#user_id').val();

		formData.type = $("input:checked[name^='showFriendType']").val();
		// $("input:checked[name^='showFriendType[]']").map(function(idx, ele) {
		// 	formData.type.push($(ele).val());
		// }).get();

		formData.name = $('#showSearchName').val();

		$.ajax({
			url: "{{getMURL('ajax/get-other-profile-sidebar')}}",
			method: "POST",
			headers: {
				'X-CSRF-TOKEN': '{{csrf_token()}}'
			},
			data: formData,
			success: function(data) {
				if (data.status == 1) {
					var newData = data.data;

					var html = '';
					newData.forEach(function(user, index) {

						var profilePronoun = (user.pronoun_string != undefined && user.pronoun_string != null && user.pronoun_string.full_pronoun != undefined && user.pronoun_string.full_pronoun != null) ? ('(' + user.pronoun_string.full_pronoun + ')') : '';
						var profileImage = (user.image != undefined && user.image != '') ? baseProfileURL + user.image : noProfileImage;

						html += '<div class="row mt-2 mb-3" id="' + user.pivot.type + user.id + '">' +
							'<div class="col-lg-1 text-center">' +
							'<div class="post-type-selector-image">' +
							'<img src="' + (profileImage) + '" alt="' + user.full_name + '" class="img-fluid">' +
							'</div>' +
							'</div>' +
							'<div class="col-lg-11 col-sm-12">' +
							'<div class="data-right-content pb-2 border-bottom">' +
							'<div class="d-flex justify-content-between align-items-center">' +
							'<div class="title-wrap">' +
							'<label class="m-0 w-100 user-name">' + user.full_name + '<sub>' + (profilePronoun) + '</sub></label>' +
							'<label class="m-0 w-100 research-name">' + (user.research_name ? user.research_name : '') + '</label>' +
							'</div>' +
							'<div class="d-flex align-items-center justify-content-between">' +
							//'<button class="primary-btn mr-4 disabled message-button" disabled>Message</button>' +
							'<button class="primary-btn mr-4 message-button viewProfileNewConversationButton FeedNewConversationNewButton" type="button" data-val="' + user.id + '" data-name="' + user.full_name + '" >Message</button>' +
							'<div class="dropdown remove" style="display: none;">' +
							'<div class="dropdown-toggle d-flex" type="button" data-toggle="dropdown">' +
							'<div class="circle"></div><div class="circle"></div><div class="circle"></div>' +
							'</div>' +
							'<ul class="dropdown-menu"><a class="dropdown-item deleteUserFriend" href="javascript:void(0);" data-val="' + user.id + '" data-type="' + user.pivot.type + '"><i class="fas fa-trash-alt"></i> Remove</a></ul>' +
							'</div>' +
							'</div>' +
							'</div>' +
							'</div>' +
							'</div>' +
							'</div>';
					});

					$('#SearchFriendProfileCount').html(data.count + ' Profiles');
					$('.appendSearchRecordsClass').html(html);
				} else {
					showToastrError(data.message, 'User Data');
				}
			},
			error: function(errorThrown) {
				showToastrError('Something went wrong, Please try again later.', 'User Data');
			}
		});
		//enabledSearchFriendButton();
	}

	$(".default_option").on("click", function(event) {
		//console.log('default_option call');
		$(this).parent().toggleClass("active");
		event.preventDefault();
	});

	$(".default_option_list a").click(function() {
		var currentele = $(this).html();
		console.log('default_option_list call, Class : ' + currentele);
		$('#showSelectSort').val($(this).attr('data-val'));
		$(".default_option").html(currentele);
		$(this).parents(".select_wrap").removeClass("active");

		getMyProfileSidebarData();
	});

	$(".showFriendType").change(function() {
		getMyProfileSidebarData();
	});

	$("#showSearchName").keyup(function() {
		getMyProfileSidebarData();
	});

	function enabledSearchFriendButton() {
		$('#showSelectSortBox').css('pointer-events', 'auto');
		$("#showCloseColleagues,#showSavedProfiles,#showSearchName").removeClass('disabled');
		$("#showCloseColleagues,#showSavedProfiles,#showSearchName").prop('disabled', false);
	}

	function disabledSearchFriendButton() {
		$('#showSelectSortBox').css('pointer-events', 'none');
		$("#showCloseColleagues,#showSavedProfiles,#showSearchName").addClass('disabled');
		$("#showCloseColleagues,#showSavedProfiles,#showSearchName").prop('disabled', true);
	}

	$(document).on('click', '.deleteUserFriend', function() {
		var formData = {};
		formData.user_id = $(this).attr('data-val');
		formData.user_type = $(this).attr('data-type');

		$.ajax({
			url: "{{getMURL('ajax/delete-my-profile-sidebar')}}",
			method: "POST",
			headers: {
				'X-CSRF-TOKEN': '{{csrf_token()}}'
			},
			data: formData,
			success: function(data) {
				if (data.status == 1) {
					showToastrSuccess(data.message, 'Profile Delete');
					$('#' + formData.user_type + formData.user_id).remove();
				} else {
					showToastrError(data.message, 'Profile Delete');
				}
			},
			error: function(errorThrown) {
				showToastrError('Something went wrong, Please try again later.', 'Profile Delete');
			}
		});
	});
</script>
@endpush