@if(isset(\Auth::user()->id) && in_array(\Auth::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">
	<div class="grey-bg-wrap h-100">
		<div class="post-right-wrapper main-box-white h-100 d-flex flex-column my-profile-sidebar">
			@if(Route::current()->getName() == 'member.private.profile')
				<button class="primary-btn btn-add btn-lg" onclick="location.href='@if(Request::url()==route("member.private.profile","wishlist")) {{getMURL("my-profile")}} @else {{getMURL("post/type-selector")}} @endif';"><i class="fas fa-plus"></i>Create New Post</button>
			@endif

			<h2 class="secondary-title text-capitalize mb-1 text-center">
				Colleagues
				<span class="ml-2 info-icon" data-toggle="modal" data-target="#tooltipBoxProfileColleagues">
					<img src="{{asset('assets/media/extra/tooltip-info-icon-white.gif')}}">
				</span>
			</h2>
			<!-- Nav tabs -->
			<ul class="nav nav-tabs transparent-bg-wrap border-bottom-removed">
				<li class="nav-item">
					<span class="total">{{$sidebar['closeColleagues']->count ?? 0}}</span><a class="nav-link active" data-toggle="tab" href="#closeColleages">Close Colleagues</a>
				</li>
				<li class="nav-item">
					<span class="total">{{$sidebar['savedProfile']->count ?? 0}}</span><a class="nav-link" data-toggle="tab" href="#savedProfiles">Saved Profiles</a>
				</li>
			</ul>

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

					@foreach($sidebar['closeColleagues'] as $data)
					<div class="my-4">
						<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 class="tab-pane" id="savedProfiles">


					@foreach($sidebar['savedProfile'] as $data)
					<div class="my-4">
						<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">
				<button type="button" class="primary-btn" data-toggle="modal" data-target="#viewSavedProfiles">View All</button>
			</div>
			<div class="modal" id="viewSavedProfiles">
				<div class="modal-dialog edit-popup">
					<div class="modal-content">

						<!-- Modal Header -->
						<div class="modal-header">
							<h4 class="modal-title">Close Colleagues and Saved 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['closeColleagues']->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">
												<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="showSavedProfiles" name="showFriendType" value="Save">
												<label for="showSavedProfiles"> Saved Profiles</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['closeColleagues'] 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['closeColleagues'][$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 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">
															<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')}}";

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

		formData.sort = $('#showSelectSort').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-my-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">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">' +
							'<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