{{-- @extends('front.practitioner.import.template.import') --}}
@extends('front.inner-layout.app')
@section('content')

<style>
	body {
		height: 95vh;
	}
	.tabs-my-client-list .tab-menu ul li {
		min-width: 190px;
		min-height: 41px;
		
		background-color: #b3b3b3;
		display: inline-block;
		text-align: center;
		border-radius: 10px 10px 0px 0px;
	}
	.tabs-my-client-list .tab-menu ul li.active{
		background-color: #68afb5;
	}
	.tabs-my-client-list .tab-menu ul li a{
		font-size: 15px;
		letter-spacing: 0px;
		line-height: 44px;
		color: #ffffff;
		font-family: "Europa";
		text-align: center;
	}
	.tabs-my-client-list .tab-menu ul {
		margin: 0;
		padding: 0;
		margin-left: 15px;
	}
	.my-client-list-new-v1 table tr td a:hover{
		color: #45747a;
	}
	.my-client-list-new-v1 table tr td a{
		color: #24303f;
	}
	.my-client-list-new-v1 table tr td:first-child {
		min-width: auto;
	}
	.my-client-list-new-v1 .dr-table .table th a {    color: #24303f;}

	#client-list table tr td a:hover {
		color: green;
	}
	#my-team-tab .myteam p {
		word-break: inherit;
	}

	ul.search_clients_v1_head_icon {
	padding: 0;
	margin: 0;
	}
	.search_clients_v1_head_icon li a {	
		min-width: 35px;
		min-height: 35px;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1px solid #45747b;
		border-radius: 5px;
	}
	.search_clients_v1_head_icon li {
	display: inline-block;
	vertical-align: middle;
	margin-right: 10px;
	text-align: center;
	}
	.display-inline-block {
	display: inline-block;
	}
	.search-box-outer form {
	width: 350px;
	margin: 0;
	margin-right: 15px;
	position: relative;
	}

	.search_clients_v1_input {
		border-radius: 18px;
		width: 100%;
		height: 35px;
		outline: none;
		border: none;
		padding-left: 20px;
		background-color: transparent;
		border: 0.5px solid #969696;
	}
	button.search_clients_v1_btn {
	background-color: #68afb5;
	border: none;
	outline: none;
	/* height: 37px; */
	/* width: 11.8%; */
	position: absolute;
		right: 0;
		top: 0;
		bottom: 0;
		border-radius: 0 20px 20px 0;
		padding: 0 13px;
		display: flex;
    align-items: center;
    justify-content: center;
	}

	.clientd-wrapper .page-title {
		z-index: 0 !important;
	}

	.search-box-btns {
		display: flex;
		flex-wrap: wrap;
	}
	.tab-box .tab-menu {
		max-width: 998px;
		width: 100%;
	}

	.invoice-page-menu a.btn.setting-btn svg {
    width: 20px;
	}
	.invoice-page-menu a.btn.setting-btn {
		padding: 0 !important;
		max-width: none;
		width: auto;
		min-width: auto;
		height: 36px;
		width: 36px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.invoice-page-menu a.btn:hover svg path {
		fill: #fff;
	}
	.invoice-page-menu a.btn.delete-btn {
		display: flex;
		align-items: center;
		padding: 5px 0 !important;
		justify-content: center;
	}
	.invoice-page-menu a.btn.delete-btn svg {
		width: 15px;
		height: auto;
		margin-right: 10px;
	}

	.dashspace-area .page-content {
		padding-left: 80px;
		padding-right: 0;
	}

	a.btn.btn-unfill.mb-3.ml-auto.my-auto.my-plan-head-a {
		margin: 0 !important;
		margin-left: 10px !important;
		min-height: 34px;
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 120px;
	}
	/* .search-box-outer form {margin-top: -2px;} */
	button.search_clients_v1_btn svg {
		margin-top: -2px;

	}
	.search_clients_v1_head_icon li img {
		max-width: 20px;
		width: 20px;
	}

	.taking-new-table .table td, .taking-new-table .table th, .service-new-table .table td, .service-new-table .table th, .dr-table .table td, .dr-table .table th {
		padding: 18px;
	}

	.my-client-list-new-v1 table  .checkedbox {
		position: relative;
		top: auto;
		left: auto;
	}
	@media (min-width:768px) and (max-width:991px) {
		.notes-menu {
			padding-left: 0;
			padding-right: 0;
		}
		.search-box-btns {
			padding-left: 0;
		}
		.search-box-outer form {
    		width: 250px;
		}
	}
	@media (min-width:992px) and (max-width:1199px) {
		.notes-menu {
			padding-left: 0;
			padding-right: 0;
		}
		.search-box-btns {
			padding-left: 0;
		}
		.search-box-outer form {
			width: 280px;
		}
	}
	@media (min-width: 1200px) and (max-width: 1365px) {
		.page-content {
		padding: 15px 20px 15px 290px;
	}
	}

	@media (max-width:767px) {
	.search_clients_v1_head_icon li {
		margin-right: 0px;
		min-width: 30px;
		min-height: 30px;
		padding-top: 2px;
	}

	.my-client-list-new-v1 table tr td a:hover {
		color:#24303f;
	}
	a.btn.btn-unfill.mb-3.ml-auto.my-auto.my-plan-head-a {
		margin-left: 5px !important;
		padding: 3px 8px !important;
	}
	.search-box-outer {margin-bottom: 10px;}
	.tabs-my-client-list .tab-menu ul li a {
		padding: 10px;
	}
	.tabs-my-client-list .tab-menu ul li {
		min-width: auto;
	}
	.tabs-my-client-list .tab-menu ul {
		margin-left: 0px;
	}

	.taking-new-table .table td, .taking-new-table .table th, .service-new-table .table td, .service-new-table .table th, .dr-table .table td, .dr-table .table th {
		padding: 12px;
	}

	.search-box-btns {
		padding-left: 0px;
		width: 100%;
	}

	.notes-menu {
			padding-left: 0;
			padding-right: 0;
		}
		.search-box-outer form {
			width: 280px;
		}

		.tabs-my-client-list [class*=col-] {
			padding: 0;
		}
	}

	.invoice-page-menu a.btn.delete-btn {
		padding: 5px 9px !important;
	}

	.my-client-list-new-v1 .dr-table .table-responsive {
		border-radius: 5px;
		overflow-y: hidden;
	}
	.my-client-list-new-v1 .table tbody+tbody {
		border-top: none;
	}
	.client_access_file_toggle_permission_access_some_calendars {
		top: -50px !important;
		right: 0 !important;

		top: 20px !important;
		right: 40px !important;
		z-index: 9;
	}

	.client-call-menu .right-menu {
		margin-top: 5px;
	}
	.client_access_file_toggle_permission_access_some_calendars.active {
		display: block !important;
	}
	.communication-table .count_tr .d-inline {
		position: relative;
	}

	.popover-body h5 {
		font-size: 13px;
		line-height: 17px;
		font-weight: 500;
	}
	.popover {
		font-size: 14px !important;
		border: 1px solid #ccc !important;
		background: #fff !important;
		padding: 10px !important;
		border-radius: 5px !important;
		width: 300px !important;
		max-width: 300px;
	}

	.popover .media {
		padding: 0;
	}

	.popover-body .media img {
		width: 18px;
	}
</style>

<div class="">
{{-- @include('front.practitioner.clients.modals.myclientsfilter') --}}

<input type="hidden" name="filter_name" class="filter_name" />
<input type="hidden" name="is_team_member" class="is_team_member" value="{{$is_member}}" />
<input type="hidden" name="sortflag" id="sortflag" value="0">
<input type="hidden" name="order_by_name" id="order_by_name">
<input type="hidden" name="short_by_name" id="short_by_name">
<input type="hidden" name="hidden_client_id" id="hidden_client_id">

<div class="page-content dashboard-wrapper mdashboard-wrapper clientd-wrapper setting-wrapper my-income-main myclient-recall-main">
	<div class="client-call-menu">
		<div class="row align-items-center m-0">
			<nav class="navbar navbar-light invoice-page-menu notes-menu w-100 my-income-menu">
				<div class="left-menu">
					<a href="{{ url()->previous() }}"><img src="{{asset('assets/images/My Appointments back icon.svg')}}" alt="" class="img-flude" style="min-width: 40px"></a>
					<a class="navbar-brand p-0 " href="{{ URL::previous() }}"><img src="{{asset('assets/images/MA Icon Colour.svg')}}" alt="" class="img-flude" style="min-width: 43px"></a>
					<h1 class="page-title eagle-font font-400 mr-3">Client Recalls</h1>
	
					<div class="search-box-btns ">
						<div class="search-box-outer display-inline-block">
						   <form id="generalrecallfilterClientList" method="POST" action="">
							  <input type="text" class="typeahead search_clients_v1_input" id="recall_first_name_or_last_name" name="recall_first_name_or_last_name" value="" placeholder="Search" class="form-control popup-input"  autocomplete="off">
							  <button type="submit" class="search_clients_v1_btn"><svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 17" width="17" height="17"><defs><image  width="17" height="17" id="img1" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAMAAAAMs7fIAAAAAXNSR0IB2cksfwAAAHtQTFRF////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////0GAZzgAAACl0Uk5TAByM2vqOHV/37JlpYv+hEA+fY54eDpGW3Wf8AmCYCD/73EF4AYh7he0GLzIiAAAAhElEQVR4nG2P6Q6CQAyEC7vKHhaQQ0EFLw7f/wndbigmrP3RSb60nQ4AQBQLKcVuD1yJ0sZao9WBAaYZaX7EwoNIpTxcqook1hmTWp9IhFkPwrmhLu2PtJfrXxJuhZdDd7jxh+XyoUM+RedS9PcFUdLH0yV94Xt1GQYvI06wqRHnLZo/X15BBoN7xWvBAAAAAElFTkSuQmCC"/></defs><use id="Artwork 307" href="#img1" x="0" y="0"/></svg></button>
						   </form>
						</div>
						<a id="filter-recall-btn" data-toggle="modal"  class="btn btn-unfill mb-3 mr-3 ml-auto my-auto my-plan-head-a">Filter  </a>
						<a  href="{{route('practitioner.dashboard.client.recalls.index')}}" id="clear_button" class="btn btn-unfill mb-3 ml-auto my-auto my-plan-head-a d-none" >Clear filter</a>
					</div>					

				</div>
				
				<div class="right-menu">
					<a  href="#" id="deleteRecall" class="btn btn-unfill delete-btn recalls_delete d-none">
					<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
								 width="26px" height="30px" viewBox="0 0 26 30" enable-background="new 0 0 26 30" xml:space="preserve">
						<g>
							<g>
								<g>
									<path fill="#45747A" d="M24.898,5.47h-6.666V4.204c0-1.824-1.48-3.305-3.305-3.305h-3.855c-1.824,0-3.305,1.481-3.305,3.305V5.47
										H1.102C0.496,5.47,0,5.966,0,6.572c0,0.605,0.496,1.102,1.102,1.102h1.141L3.586,25.08c0,0.006,0,0.012,0,0.018
										c0.099,1.096,0.606,2.109,1.416,2.853c0.815,0.744,1.867,1.151,2.969,1.151h10.047c2.298,0,4.182-1.707,4.391-3.977
										c0.055-0.606-0.391-1.141-0.996-1.195c-0.606-0.056-1.141,0.391-1.195,0.996c-0.105,1.124-1.047,1.973-2.193,1.973H7.976
										c-1.146,0-2.087-0.859-2.192-1.994L4.451,7.674h17.092l-0.941,12.201c-0.044,0.605,0.408,1.135,1.014,1.185
										c0.027,0,0.055,0.005,0.088,0.005c0.567,0,1.053-0.44,1.097-1.019l0.958-12.372h1.141C25.504,7.674,26,7.178,26,6.572
										C26,5.966,25.504,5.47,24.898,5.47z M16.029,5.47H9.97V4.204c0-0.606,0.496-1.102,1.102-1.102h3.855
										c0.605,0,1.102,0.496,1.102,1.102V5.47z"/>
									<path fill="#45747A" d="M7.993,9.877c-0.606,0.028-1.08,0.54-1.052,1.151l0.551,12.608c0.027,0.59,0.512,1.053,1.102,1.053
										c0.017,0,0.033,0,0.049,0c0.606-0.027,1.08-0.54,1.052-1.151L9.144,10.929C9.117,10.323,8.599,9.85,7.993,9.877z"/>
									<path fill="#45747A" d="M16.855,10.929l-0.551,12.609c-0.027,0.606,0.447,1.124,1.053,1.151c0.016,0,0.033,0,0.049,0
										c0.584,0,1.074-0.463,1.102-1.053l0.552-12.608c0.027-0.606-0.446-1.124-1.052-1.151C17.401,9.85,16.883,10.323,16.855,10.929z"
										/>
									<path fill="#45747A" d="M11.898,10.979v12.609c0,0.605,0.496,1.102,1.102,1.102c0.605,0,1.102-0.496,1.102-1.102V10.979
										c0-0.606-0.496-1.102-1.102-1.102C12.394,9.877,11.898,10.373,11.898,10.979z"/>
								</g>
							</g>
						</g>
					</svg>
						Delete
					</a>
					<div class="dropdown ml-sm-auto">
						<!-- <a href="#" class="dropdown-toggle three-dot-menu" data-toggle="dropdown"><span></span></a> -->
						<a href="javascript:void(0)" class="btn btn-unfill delete-btn recalls_message d-none" data-toggle="dropdown">
							<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
								viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
								<g>
									<g>
										<path fill="#45747A" class="st0" d="M490.1,1.7L8.3,243.6c-4.9,2.4-8,7.3-8.3,12.8c-0.2,5.4,2.5,10.6,7.1,13.4L120,339.2V497
											c0,6.5,4.1,12.2,10.3,14.2c6.1,2,12.9-0.1,16.7-5.2l77.1-102.7l173,106.5c4.2,2.6,9.4,2.9,13.9,1c4.5-2,7.8-6.1,8.7-10.9l92-481.9
											c0-0.2,0.1-0.3,0.1-0.5C513.8,5.3,501-3.9,490.1,1.7z M134.2,312.8l-88.4-54.4L398.7,81.2L134.2,312.8z M150,452.1V338.8
											l248.4-217.6C393,128.5,156.5,443.4,150,452.1z M394.3,472.8l-152.1-93.6L470.1,75.8L394.3,472.8z"/>
									</g>
								</g>
								</svg>
							Message
						</a>
							<div class="dropdown-menu">
								<li>
									<a href="javascript:void(0)" id="sendInvoicesViaSMS" data-type='sms' class="dropdown-item cursor-pointer sendRecallsToClient">Send via SMS</a>
									{{-- @if(isset($practitioner_plan) && $practitioner_plan->plan_id != 1) --}}
								</li>
								@if(isset($practitioner_plan) && $practitioner_plan->plan_id != 1)

									<li class="dropdown">
										<a href="javascript:void(0)" id="" data-type='email' class="dropdown-item cursor-pointer sendRecallsToClient"><img src="{{asset('assets/images/Premium_plan.svg')}}" width="20" alt="" class="img-fluid">Send via email</a>
										
									</li>
									
								@else

									<li class="dropdown">
										<a href="javascript:void(0)" id="unable_recalls_email" data-type='email' class="dropdown-item cursor-pointer"><img src="{{asset('assets/images/Premium_plan.svg')}}" width="20" alt="" class="img-fluid">Send via email</a>
										<div class="dropdown-menu">
											<div class="media">
												<div class="media-body">To access this feature as well as many others, upgrade to Premium.</div>
											
											</div>
											<a type="button" href="{{route('practitioner.myplan')}}" class="btn-unfill cursor-pointer save-btn save-btn-bg confirm-bttn mt-0 btn">View plan options</a>
										</div>
									</li>
								@endif
							</div>
					</div>
					
					@if(!isset($practitioner->parent_id))
						<a id="settings_btn" href="{{route('practitioner.dashboard.client.recalls.add')}}" class="btn btn-unfill setting-btn">
						<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 1467 1467" enable-background="new 0 0 1467 1467" xml:space="preserve">
							<path fill="#45747a" d="M884.695,378.907c-195.905-83.662-422.542,7.354-506.204,203.259s7.354,422.542,203.259,506.204  s422.542-7.354,506.204-203.259c40.166-94.137,41.345-200.414,3.122-295.384C1053.199,494.688,978.902,418.796,884.695,378.907z   M998.812,846.61c-62.504,146.513-231.909,214.636-378.422,152.132S405.754,766.833,468.258,620.32S700.167,405.685,846.68,468.188  c70.343,30.038,125.909,86.715,154.421,157.682C1029.82,696.837,1028.988,776.268,998.812,846.61L998.812,846.61z"/>
							<path fill="#45747a" d="M1463.393,543.248l-71.383-177.591c-10.059-24.904-38.293-36.975-63.197-26.916l-104.335,41.97  c-35.657-49.878-78.876-93.929-127.991-130.626l44.121-103.502c10.544-24.627-0.833-53.208-25.46-63.752h-0.139L938.943,7.631  c-24.627-10.614-53.139,0.763-63.752,25.39v0.208l-44.259,103.502c-60.492-10.059-122.163-10.753-182.863-1.942L606.1,30.454  c-9.99-24.904-38.294-36.975-63.129-26.985L365.38,74.921c-24.904,9.989-36.975,38.293-26.985,63.197l0,0l41.97,104.335  c-49.878,35.657-93.929,78.875-130.627,127.991l-103.502-44.121c-24.627-10.614-53.139,0.763-63.752,25.39v0.208L7.423,527.917  c-10.544,24.627,0.833,53.208,25.459,63.753h0.139l103.502,44.189c-9.99,60.562-10.545,122.232-1.665,182.933l-104.335,41.9  c-24.904,9.99-36.975,38.294-26.916,63.198l0,0l71.383,177.591c10.059,24.835,38.293,36.905,63.128,26.916l104.335-41.97  c35.657,49.878,78.875,93.929,127.991,130.627l-44.12,103.502c-10.545,24.696,0.901,53.208,25.528,63.753h0.069l176.064,74.99  c24.627,10.614,53.139-0.763,63.753-25.39v-0.208l44.259-103.503c60.492,10.059,122.164,10.753,182.863,1.942l41.971,104.335  c9.989,24.904,38.293,36.906,63.128,26.916l177.591-71.383c24.904-9.99,36.906-38.293,26.916-63.197l0,0l-42.039-104.335  c49.879-35.727,93.93-78.876,130.627-127.991l103.502,44.19c24.558,10.613,53.069-0.694,63.684-25.252l0.139-0.347l75.06-176.064  c10.545-24.627-0.901-53.139-25.528-63.684l0,0l-103.502-44.12c10.059-60.492,10.752-122.163,1.941-182.863l104.335-41.97  c24.835-10.059,36.837-38.362,26.778-63.197L1463.393,543.248z M1259.232,572.939c-21.922,8.811-34.339,32.119-29.414,55.22  c15.678,72.979,14.915,148.524-2.358,221.156c-5.411,22.962,6.521,46.549,28.234,55.775l95.108,40.582l-36.975,86.714  l-95.108-40.513c-21.714-9.365-47.034-1.596-59.799,18.245c-40.443,62.712-94.414,115.573-157.959,154.698  c-20.048,12.418-28.234,37.53-19.424,59.382l38.57,95.941l-87.408,35.102l-38.57-95.94c-7.354-18.384-25.182-30.523-45.022-30.523  c-3.398,0-6.798,0.347-10.128,1.11c-72.979,15.678-148.524,14.914-221.156-2.359c-22.962-5.48-46.549,6.452-55.774,28.165  l-40.583,95.247l-86.714-36.975l40.582-95.108c9.227-21.714,1.526-46.965-18.245-59.799  c-62.712-40.443-115.572-94.415-154.768-157.959c-12.487-20.048-37.53-28.234-59.382-19.424l-95.941,38.57l-35.171-87.408  l95.941-38.57c21.921-8.811,34.27-32.119,29.344-55.22c-15.678-72.979-14.915-148.524,2.358-221.156  c5.411-22.962-6.521-46.549-28.234-55.775l-95.108-40.513l36.975-86.714l95.178,40.513c21.713,9.296,46.965,1.596,59.798-18.245  c40.443-62.712,94.415-115.573,157.959-154.698c20.049-12.487,28.234-37.53,19.424-59.452l-38.57-95.872l87.478-35.171l38.57,95.871  c8.811,21.921,32.119,34.339,55.22,29.414c72.979-15.678,148.524-14.845,221.157,2.29c22.961,5.411,46.548-6.452,55.774-28.165  l40.582-95.178l86.715,36.975l-40.583,95.108c-9.227,21.713-1.525,46.964,18.245,59.798  c62.712,40.443,115.573,94.415,154.698,157.959c12.487,20.048,37.53,28.234,59.451,19.424l96.011-38.501l35.171,87.408  l-95.94,38.501L1259.232,572.939z"/>
							</svg>
						</a>
					@endif
				</div>
			</nav>
		</div>
	</div>
   <div class="brdr-bttm"></div>
   <div class="container-fluid">
		<div class="tab-teaser tabs-my-client-list">
		<div class="tab-menu col-md-12">
			<ul>
				<li class="active" data-rel="follow_up_pending"><a href="#">Follow-up pending</a></li>
				<li class="" data-rel="first_follow_up"><a href="#">1st follow-up sent</a></li>
				<li class="" data-rel="second_follow_up"><a href="#">2nd follow-up sent</a></li>
				<li class="" data-rel="third_follow_up"><a href="#">3rd follow-up sent</a></li>
				
			</ul>
		</div>
	
		<div class="tab-main-box " >
			<div class="tab-box col-md-12 active" id="follow_up_pending" style="">
				<div class="row justify-content-center">
					<div class="col-md-12 my-client-list-new-v1">
						<div class=" dr-table communication-table">
							<div class="table-responsive">
								<table class="table table-striped" id="client-list">
									<thead class="head-brdr">
									<tr>
										<th class="position-relative">
											<div class="waitlist-modal client-area-bullet-first">
												<div class="delete-check-icon checkedbox">
												<ul class="mb-0">
													<li>
														<div class="rdio rdio-primary radio-inline">
															<input id="allID" name="allID" type="checkbox" autocomplete="off">
															<label for="allID"></label>
														</div>
													</li>
												</ul>
												</div>
											</div>
										</th>
										<th class="align-middle white-space-nowrap">Client name</th>
										<th class="align-middle white-space-nowrap">Mobile number</th>
										<th class="align-middle white-space-nowrap">Email</th>
										<th class="align-middle white-space-nowrap">Last appt date</th>
										<th class="align-middle white-space-nowrap">Service type</th>
										@if($serviceProviders_count > 1)
											<th class="align-middle white-space-nowrap">Provider</th>
									 	@endif
										{{-- @if($location_count > 1)
											<th class="align-middle white-space-nowrap">Location</th>
									  	@endif --}}
										<th class="align-middle white-space-nowrap">Follow-up due</th>
									</tr>
									</thead>
									<tbody id="recallsAppend"></tbody>
								</table>
							</div>
							
						</div>
						<div class="text-center" >
							<a href="javascript:void(0)" id="load-more-followup_pending" class="btn btn-fill load-more hide">Load more</a>
						</div>
					</div>
				</div>
			</div>

			<div class="tab-box col-md-12 active" id="first_follow_up" style="display: none">
				<div class="row justify-content-center">
					<div class="col-md-12 my-client-list-new-v1">
						<div class=" dr-table communication-table">
							<div class="table-responsive">
								<table class="table table-striped" id="client-list">
									<thead class="head-brdr">
									<tr>
										<th class="position-relative">
											<div class="waitlist-modal client-area-bullet-first">
												<div class="delete-check-icon checkedbox">
												<ul class="mb-0">
													<li>
														<div class="rdio rdio-primary radio-inline">
															<input id="allID_first" name="allID_first" type="checkbox" autocomplete="off">
															<label for="allID_first"></label>
														</div>
													</li>
												</ul>
												</div>
											</div>
										</th>
										<th class="align-middle white-space-nowrap">Client name</th>
										<th class="align-middle white-space-nowrap">Mobile number</th>
										<th class="align-middle white-space-nowrap">Email</th>
										<th class="align-middle white-space-nowrap">Last appt date</th>
										<th class="align-middle white-space-nowrap">Service type</th>
										@if($serviceProviders_count > 1)
											<th class="align-middle white-space-nowrap">Provider</th>
									 	@endif
										{{-- @if($location_count > 1)
											<th class="align-middle white-space-nowrap">Location</th>
									  	@endif --}}
										  <th class="align-middle white-space-nowrap">Last Contacted</th>
										  <th class="align-middle white-space-nowrap">Follow-up due</th>
									</tr>
									</thead>
									<tbody id="firstfollowupAppend"></tbody>
								</table>
							</div>
							
						</div>
						<div class="text-center" >
							<a href="javascript:void(0)" id="load-more-first_followup" class="btn btn-fill load-more hide">Load more</a>
						</div>
					</div>
				</div>
			</div>

			<div class="tab-box col-md-12 active" id="second_follow_up" style="display: none">
				<div class="row justify-content-center">
					<div class="col-md-12 my-client-list-new-v1">
						<div class=" dr-table communication-table">
							<div class="table-responsive">
								<table class="table table-striped" id="client-list">
									<thead class="head-brdr">
									<tr>
										<th class="position-relative">
											<div class="waitlist-modal client-area-bullet-first">
												<div class="delete-check-icon checkedbox">
												<ul class="mb-0">
													<li>
														<div class="rdio rdio-primary radio-inline">
															<input id="allID_second" name="allID_second" type="checkbox" autocomplete="off">
															<label for="allID_second"></label>
														</div>
													</li>
												</ul>
												</div>
											</div>
										</th>
										<th class="align-middle white-space-nowrap">Client name</th>
										<th class="align-middle white-space-nowrap">Mobile number</th>
										<th class="align-middle white-space-nowrap">Email</th>
										<th class="align-middle white-space-nowrap">Last appt date</th>
										<th class="align-middle white-space-nowrap">Service type</th>
										@if($serviceProviders_count > 1)
											<th class="align-middle white-space-nowrap">Provider</th>
									 	@endif
										{{-- @if($location_count > 1)
											<th class="align-middle white-space-nowrap">Location</th>
									  	@endif --}}
										  <th class="align-middle white-space-nowrap">Last Contacted</th>
										  <th class="align-middle white-space-nowrap">Follow-up due</th>
									</tr>
									</thead>
									<tbody id="secondfollowupAppend"></tbody>
								</table>
							</div>
							
						</div>
						<div class="text-center" >
							<a href="javascript:void(0)" id="load-more-second_followup" class="btn btn-fill load-more hide">Load more</a>
						</div>
					</div>
				</div>
			</div>

			<div class="tab-box col-md-12 active" id="third_follow_up" style="display: none">
				<div class="row justify-content-center">
					<div class="col-md-12 my-client-list-new-v1">
						<div class=" dr-table communication-table">
							<div class="table-responsive">
								<table class="table table-striped" id="client-list">
									<thead class="head-brdr">
									<tr>
										<th class="position-relative">
											<div class="waitlist-modal client-area-bullet-first">
												<div class="delete-check-icon checkedbox">
												<ul class="mb-0">
													<li>
														<div class="rdio rdio-primary radio-inline">
															<input id="allID_third" name="allID_third" type="checkbox" autocomplete="off">
															<label for="allID_third"></label>
														</div>
													</li>
												</ul>
												</div>
											</div>
										</th>
										<th class="align-middle white-space-nowrap">Client name</th>
										<th class="align-middle white-space-nowrap">Mobile number</th>
										<th class="align-middle white-space-nowrap">Email</th>
										{{-- <th class="align-middle white-space-nowrap">Client name</th> --}}
										<th class="align-middle white-space-nowrap">Last appt date</th>
										<th class="align-middle white-space-nowrap">Service type</th>
										@if($serviceProviders_count > 1)
											<th class="align-middle white-space-nowrap">Provider</th>
									 	@endif
										{{-- @if($location_count > 1)
											<th class="align-middle white-space-nowrap">Location</th>
									  	@endif --}}
										  <th class="align-middle white-space-nowrap">Last Contacted</th>
										  <th class="align-middle white-space-nowrap">Follow-up due</th>
									</tr>
									</thead>
									<tbody id="thirdfollowupAppend"></tbody>
								</table>
							</div>
							
						</div>
						<div class="text-center">
							<a href="javascript:void(0)" d="load-more-third_followup" class="btn btn-fill load-more hide">Load more</a>
						</div>
					</div>
				</div>
			</div>
			{{-- <div class="tab-box col-md-12" id="archived-client-tab" style="display: none;">
				<h2>Tab 2</h2>
					<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
			</div> --}}
		</div>
		</div>

   </div>
</div>
<!-- Client Modal -->
<div class="cilent-popup">
	<div class="modal fade" id="newfilterpopModalcard" role="dialog">
	   <div class="modal-dialog modal-dialog-centered">
		  <div class="modal-content">
			 <div class="modal-header">
				<!-- <h4 class="modal-title">Filter</h4> -->
				<button type="button" id="close_model" class="close" data-dismiss="modal"><img src='{{asset("assets/images/close-img.png")}}' alt=""></button>
			 </div>
			
			 <form id="frm_filter_recalls" method="POST">
				<input type="hidden" name="from_filter" value="1">
				<div class="modal-body">
				   <div class="filterform">
						{{-- <div class="single-tittle">
							<label>Service Provider</label>
							<input type="text" id="service_provider" name="service_provider" value=""   placeholder="Service Provider" class="typeahead form-control popup-input">
						</div> --}}
						<div class="single-tittle">
							<label class="toplabel d-block">Last appt date</label>
							<ul class="date-textli">
								<li>From</li>
								<li>
								<div class="form-group" id="open_from_date">
									<input class="form-control navy-text" id="start_date" name="start_date" placeholder="DD-MM-YYYY" type="text" autocomplete="off" />
								</div>
								</li>
								<li>To</li>
								<li>
								<div class="form-group">
									<input type="text" name="end_date" id="end_date" class="form-control navy-text" placeholder="DD-MM-YYYY" autocomplete="off" >
								</div>
								</li>
							</ul>
					  	</div>
						<div class="single-tittle ">
							<label class="toplabel d-block">Service Type</label>
							
							<select class="locan-title appn-li single-select2 filter-dropdown-select2 appointment_types_set_value" name="appointment_types" id="appointment_types" data-placeholder="Appointment Types">
								<option value=""></option>
								@foreach( $appointmentTypes as $key => $appttypes )
                                        <option class="form-control navy-text" value="{{@$appttypes->id}}">{{ $appttypes->appointment_type }}</option>
                                @endforeach
							</select>
						</div>
						<div class="single-tittle ">
							<label class="toplabel d-block">Service Provider</label>
							
							<select class="locan-title appn-li single-select2 filter-dropdown-select2 service_provider_set_value" name="service_provider" id="service_provider" data-placeholder="Service Provider">
								<option value=""></option>
								<option class="form-control navy-text" value="{{$practitioner->id}}">{{ $practitioner->first_name.' '.$practitioner->last_name }}</option>
								@foreach( $serviceProviders as $key => $value )
									@if( $value->role == "service_provider" )
                                    	<option class="form-control navy-text" value="{{@$value->id}}">{{ $value->first_name.' '.$value->last_name }}</option>
									@endif
                                @endforeach
							</select>
						</div>
						<div class="single-tittle ">
							<label class="toplabel d-block">Location</label>
							
							<select class="locan-title appn-li single-select2 filter-dropdown-select2 location_set_value" name="location" id="location" data-placeholder="Location">
								<option></option>
								@foreach( $locations as $key => $value)
                                    <option value="{{@$value->id}}">{{ getLocationAddress( $value->address ) }}</option>
                                @endforeach
							
							</select>
						</div>
						
		  		</div>
	   		</div>
			<div class="modal-footer">
				<button type="submit" class="btn btn-default green-filter">Apply</button>
			</div>
	   </form>
	</div>
 </div>
 </div>
 </div>
 <!-- Client Modal -->
</div>


 <!-- For empty recalls start -->
<div class="cliencard-box-wrapper empty_recalls_div d-none">
	<div class="client-follow-popup  bulk-popup customscroll clientabpopup lgheight sms-mobile-main client-info" id="myclienthide">
	  <div class="clientmodalclose" id="myclientModal">
		<div class="popup-marg">
		  <div class="row d-flex d-flex justify-content-center">
			<div class="dashboard-sub-content mb-5">
			  <div class="card">
				<div class="row align-items-center">
				  <div class="col-md-6">
					<div class="mobile-content">
					  <h2 class="page-title eagle-font font-400">Client recalls</h2>
						  <div class="icon">
							<img src="{{asset('assets/images/Recalls-icon.svg')}}" alt="" class="img-fluid">
						  </div>
					  <p class="font-14">Client follow-ups are a vital part of our commitment to delivering the best care and support. Send a quick message to make sure clients are okay.
					  </p>
					</div>
				  </div>
				  <div class="col-md-6">
					<div class="mobileside-content mobileside-content1">
					  <div class="customise-message booking-confirmation ">
						  <h2 class="page-title font-18 mb-4 mt-0">No client recalls</h2>
						  <p class="font-14">Clients will be added here if they haven't had an appointment within the period defined in your settings.
						  </p>
					  </div>
					 
					</div>
				  </div>
				</div>
			  </div>
			</div>
		  </div>
		</div>
	  </div>
	</div>
  </div>
   <!-- For empty recalls end -->


	

@endsection

@section('js')

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazy/1.7.11/jquery.lazy.min.js" integrity="sha512-eviLb3jW7+OaVLz5N3B5F0hpluwkLb8wTXHOTy0CyNaZM5IlShxX1nEbODak/C0k9UdsrWjqIBKOFY0ELCCArw==" crossorigin="anonymous"></script>
   <script type="text/javascript">
//    (document).on('click','#unable_recalls_email',function(){
//       $(".tooltiptext").attr('data-original-title', 'Copied');
//       $(".tooltiptext").tooltip('show');
//    });

	$(document).ready(function(e) {
		$(".access-some-calendar-info-icon").hover(function(e) {
			$(this).parent().find(".access-some-calendar-info-box").toggleClass('active');
		});

		$("[data-toggle=popover]").popover({
        html : true,
		enable:true,
        content: function() {
            var content = $(this).attr("data-popover-content");
            return $(content).children(".popover-body").html();
        },
        
    	});
	});
</script>
<script>

	$(document).on('click', '#allID, #allID_first, #allID_second, #allID_third', function (e) {
		handleSelectAll(this);
	});

	function handleSelectAll(selector) {
		// Check/uncheck all checkboxes
		$('[name="id[]"]').prop('checked', $(selector).prop('checked'));

		// Collect the selected IDs
		var ids = [];
		$('.client-radio:checked').each(function(i) {
			ids[i] = { 'id': $(this).val() };
		});

		//Show or hide elements based on the number of selected checkboxes
		if (ids.length >= 1) {
			$('.recalls_message').removeClass('d-none');
			$('.recalls_delete').removeClass('d-none');
		} else {
			$('.recalls_message').addClass('d-none');
			$('.recalls_delete').addClass('d-none');
		}

		// if (activeTab === "follow_up_pending" || activeTab === "first_follow_up" || activeTab === "second_follow_up") {

		// 	if( ids.length >= 1 ) {
		// 		$('.recalls_message').removeClass('d-none');
		// 	}else{
		// 		$('.recalls_message').addClass('d-none');
		// 	}

		// }else{
		// 	$('.recalls_message').addClass('d-none');
		// }

		// // Handle recalls_delete for all active tabs
		// if (ids.length >= 1) {
		// 	$('.recalls_delete').removeClass('d-none');
		// } else {
		// 	$('.recalls_delete').addClass('d-none');
		// }
	}

	
	

	$(document).on( 'click', '.sendRecallsToClient', function() {
         var ids = [];

		 $('.client-radio:checked').each(function(i) {
			ids[i] = {
				'id': $(this).val(), 
				'last_date': $(this).data('last-date')
			};
		});

        //  $('.client-radio:checked').each(function(i) {
		// 		ids[i] = { 'id': $(this).val() };
		//  });

         if( ids.length > 25 ) {
            Swal.fire({
				icon: 'error',
				title: 'You can only send 25 records at a time',
				showClass: {
				popup: 'animate__animated animate__fadeInDown'
				},
				hideClass: {
				popup: 'animate__animated animate__fadeOutUp'
				}
			});
			
            return false;
         } else {
            var type = $(this).data('type');
            var baseUrl = "{{route('home')}}";

            if( type == 'sms' ) {
               
			   if( activeTab == 'follow_up_pending' ) {
					$.redirect(baseUrl + '/practitioner/dashboard/client/recalls/send-via-sms-page', {
						ids: ids,
						//lastApptDates: lastApptDates,
						type:type,
						followupName: activeTab 
					},"GET", "");
				}else if(activeTab == 'first_follow_up' ){
					$.redirect(baseUrl + '/practitioner/dashboard/client/recalls/send-via-sms-page', {
						ids: ids,
						type:type,
						followupName: activeTab 
					},"GET", "");

				}else if(activeTab == 'second_follow_up' ){
					$.redirect(baseUrl + '/practitioner/dashboard/client/recalls/send-via-sms-page', {
						ids: ids,
						type:type,
						followupName: activeTab 
					},"GET", "");

				}else if(activeTab == 'third_follow_up' ){
					$.redirect(baseUrl + '/practitioner/dashboard/client/recalls/send-via-sms-page', {
						ids: ids,
						type:type,
						followupName: activeTab 
					},"GET", "");
				}
            }

			if( type == 'email'){

				if( activeTab == 'follow_up_pending' ) {
					$.redirect(baseUrl + '/practitioner/dashboard/client/recalls/send-first-followup-via-email-page', {
						ids: ids,
						type:type,
						followupName: activeTab 
					},"GET", "");
				}else if(activeTab == 'first_follow_up' ){
					$.redirect(baseUrl + '/practitioner/dashboard/client/recalls/send-second-followup-via-email-page', {
						ids: ids,
						type:type,
						followupName: activeTab 
					},"GET", "");

				}else if(activeTab == 'second_follow_up' ){
					$.redirect(baseUrl + '/practitioner/dashboard/client/recalls/send-third-followup-via-email-page', {
						ids: ids,
						type:type,
						followupName: activeTab 
					},"GET", "");

				}else if(activeTab == 'third_follow_up' ){
					$.redirect(baseUrl + '/practitioner/dashboard/client/recalls/send-third-followup-via-email-page', {
						ids: ids,
						type:type,
						followupName: activeTab 
					},"GET", "");
				}
		 	}
            
         }
    });

    $(document).on( 'click', '.load-more', function() {
         //getMoreRecalls(activeTab,'', '');

		 if(activeTab === "follow_up_pending") {
			getMoreRecalls('recallsAppend','followup_pending','', '');
		} 
			
		if(activeTab === "first_follow_up") {
			getMoreRecalls('firstfollowupAppend','first_followup','', '');
		} 

		if(activeTab === "second_follow_up") {
			getMoreRecalls('secondfollowupAppend','second_followup','', '');
		} 

		if(activeTab === "third_follow_up") {
			getMoreRecalls('thirdfollowupAppend','third_followup','', '');
		} 
    });
	$(document).ready(function(e) {

		$(document).on('change', '.client-radio', function() {
			var ids = [];
			$('.client-radio:checked').each(function(i) {
				ids[i] = { 'id': $(this).val() };
			});

			if (ids.length >= 1) {
				$('.recalls_message').removeClass('d-none');
				$('.recalls_delete').removeClass('d-none');
			} else {
				$('.recalls_message').addClass('d-none');
				$('.recalls_delete').addClass('d-none');
			}

    	});

		$('#start_date').datepicker({
         format: "dd-mm-yyyy",
         weekStart: 1,
         todayHighlight: true,
         autoclose: true,
         clearBtn: false,
         saveBtn: true,
      });

      $('#end_date').datepicker({
         format: "dd-mm-yyyy",
         weekStart: 1,
         todayHighlight: true,
         autoclose: true,
         clearBtn: false,
         startDate: '-',
      });

	  var startDate = new Date('01/01/2012');
      var FromEndDate = new Date();
      var ToEndDate = new Date();
      ToEndDate.setDate(ToEndDate.getDate() + 365);

      $('#start_date').datepicker({
         weekStart: 1,
         startDate: '01/01/2012',
         endDate: FromEndDate,
         autoclose: true
      })
      .on('changeDate', function(selected) {
         var to_calendar = $(this).parent().parent().next().next().find('input');
         startDate = new Date(selected.date.valueOf());
         startDate.setDate(startDate.getDate(new Date(selected.date.valueOf())));
         to_calendar.datepicker('setStartDate', startDate);
         to_calendar.datepicker().datepicker("setDate", startDate);
      });
		

		
	});
   setTimeout(() => {
      $('.tab-menu li').on('click', function(){
		var target = $(this).attr('data-rel');
		$('.tab-menu li').removeClass('active');
		$(this).addClass('active');
		$("#"+target).fadeIn('slow').siblings(".tab-box").hide();
			return false;
      });
   }, 500);

   var activeTab = 'follow_up_pending';
   var searchData = '';
   getrecallsList('recallsAppend','followup_pending',searchData, '');

   $('.tab-menu li').on('click', function(){
		var target = $(this).attr('data-rel');
		activeTab = target;
		var searchData = '';
		
		$('.recalls_message').addClass('d-none');
		$('.recalls_delete').addClass('d-none');
		$('#clear_button').addClass('d-none');
		$('#recall_first_name_or_last_name').val('');
		$('#allID').prop('checked', false);
		$('#allID_first').prop('checked', false);
		$('#allID_second').prop('checked', false);
		$('#allID_third').prop('checked', false);
		//$('[name="id[]"]').prop('checked', false);

		$('.client-radio').remove();
		
		if(target === "follow_up_pending") {	
			getrecallsList('recallsAppend','followup_pending',searchData, '');
		}
			
		if(target === "first_follow_up") {
			getrecallsList('firstfollowupAppend','first_followup',searchData, '');
		} 

		if(target === "second_follow_up") {
			getrecallsList('secondfollowupAppend','second_followup',searchData, '');
		} 

		if(target === "third_follow_up") {
			getrecallsList('thirdfollowupAppend','third_followup',searchData, '');
		} 

		$(document).ajaxComplete(function() {
       	 	$('.client-radio').prop('checked', false);
    	});
		
   	});
	

   function getrecallsList(followpId,followupName,searchData, sorting ) {
      $.ajax({
         url: "{{ route('practitioner.dashboard.client.get.recalls') }}",
         method: 'POST',
         data: {
			followupName:followupName,
            searchData: searchData,
            sorting: sorting
         },
         success: function(data) {
            recallsList(data,followpId,followupName);
         }
      });
   }

   function recallsList(data,followpId,followupName) {
	$(`#${followpId}`).empty();
      console.log( data );
      if( data.data.length != 0 ) {

		$(".empty_recalls_div").addClass('d-none');
		//$(".empty_main_div").addClass('d-none');

		$(`#${followpId}`).closest('.dr-table').show();
        $(`#${followpId}`).closest('.table-responsive').find('thead').show();


         var html = '';
         $.each( data.data, function( key, value ) {
            html += dynamicContent( value );
            $(`#${followpId}`).html(html);
            $('input').attr('autocomplete', 'off');
         });

        //  if( $('.count_tr').length < data.count ) {
        //     $('.load-more').removeClass('hide');
        //  } else {
        //     $('.load-more').addClass('hide');
        //  }
		//if(followupName === "followup_pending") {
			
		if ($(`#${followpId} .count_tr`).length < data.count) {
			$(`#load-more-${followupName}`).removeClass('hide');
		} else {
			$(`#load-more-${followupName}`).addClass('hide');
		}
		//}

      } else { 
		$(".empty_recalls_div").removeClass('d-none');
		// $(".empty_main_div").removeClass('d-none');

		$(`#${followpId}`).closest('.dr-table').hide();
        $(`#${followpId}`).closest('.table-responsive').find('thead').hide();
        $(`#${followpId}`).html('');

        // $("#recallsAppend").html('');
		//var html = '<tr><td  colspan="8" class="text-center text-danger">No Results Found</td></tr>';
        //$("#recallsAppend").html(html);
		//$(`#${followpId}`).html(html);
		//$('.load-more').addClass('hide');
		//$(`#load-more-${followupName}`).addClass('hide');
         
      }
   }

   function dynamicContent( value )
   {
		// console.log( value );
		var uniqueId = Math.random();    
		var location_count = {{$location_count }};
		var service_provider_count = {{$serviceProviders_count }};

		var service_type = value.service_type ?? '';

		var pract_name = value.pract_full_name ?? '';

		var mobile_number = value.phone ?? '-';

		var email = value.email ?? '-';

		if (value.last_date == null) {
			var lastDate = "";
		} else {
			// var lastDate = moment(value.last_date).format('DD/MM/YY h:mm A');
			var lastDate = moment(value.last_date.substring(0,19)).format('DD/MM/YY')+" "+value.last_date.substring(20);
		}

		var location_address = value.location_address ?? '';

		if (value.followup_date == null) {
			var followup_date = "";
		} else {
			var followup_date = moment(value.followup_date.substring(0,19)).format('DD/MM/YY')+" "+value.followup_date.substring(20);
		}

		var followup_due = value.followup_due ?? '';

		var html = '';
		html += '<tr class="count_tr">';

		html += '<td class="position-relative">';
		html += '<div class="waitlist-modal client-area-bullet-first">';
		html += '<div class="delete-check-icon checkedbox">';
		html += '<ul class="mb-0"><li>';
		html += '<div class="rdio rdio-primary radio-inline">';
		html += '<input name="id[]" id="' + uniqueId + '" value="' + value.last_appt_id + '" type="checkbox" class="client-radio" data-last-date="' + lastDate + '">';
		html += '<label for="' + uniqueId + '"></label>';
		html += '</div></li></ul>';
		html += '</div></div></td>';

		html += '<td class="align-middle cursor-pointer ClientCardOpen" data-data="' + value.client_id + ';" style="text-transform:capitalize">';
		html += '<a href="#">' + value.first_name + ' ' + value.last_name + '</a></td>';

		html += '<td>' + mobile_number + '</td>';

		html += '<td>' + email + '</td>';


		if (lastDate !== '--') {
			html += '<td>' + lastDate + '</td>';
		} else {
			html += '<td>--</td>';
		}

		html += '<td>' + service_type + '</td>';

		// if(service_provider_count > 1){
		// 	html += '<td>' + pract_name + '</td>';
      	// }

		if (service_provider_count > 1) {
			html += `
				<td>
					<label class="tooltip-new">
						<span class="tooltip-info-icon">
							${pract_name}
						</span>
						<div class="tooltiptext">
							<div class="media">
								<div class="media-body">${location_address}</div>
							</div>
						</div>
					</label>
				</td>
			`;
		}

		// if(location_count > 1){
		// 	html += '<td>' + location_address + '</td>';
      	// }

		// html += '<td></td>'; 

		if(activeTab === "first_follow_up" || activeTab === "second_follow_up" || activeTab === "third_follow_up") {
			html += '<td>' + followup_date + '</td>';
		} 

		if(activeTab === "follow_up_pending" || activeTab === "first_follow_up" || activeTab === "second_follow_up") {

			html += '<td>' + followup_due + '</td>';
		} else {
			html += '<td>' + "--" + '</td>';
		}

		html += '</tr>';

     
      	return html;
   }

   function getMoreRecalls(followpId,followupName,searchData, sorting) {
      $.ajax({
         url: "{{ route('practitioner.dashboard.client.get.recalls')}}",
         method: 'POST',
         data: {
			followupName:followupName,
            searchData: searchData,
            sorting: sorting,
            skip: $(`#${followpId} .count_tr`).length
         },
         success: function(data) {
            console.log( data );
            if( data.data.length != 0 ) {
               var html = '';
               $.each( data.data, function( key, value ) {
                  html += dynamicContent( value );
               });

               //$("#recallsAppend").append(html);
			   $(`#${followpId}`).append(html);

               if ($(`#${followpId} .count_tr`).length < data.count) {
					$(`#load-more-${followupName}`).removeClass('hide');
                 // $('.load-more').removeClass('hide');
               } else {
					$(`#load-more-${followupName}`).addClass('hide');
                  //$('.load-more').addClass('hide');
               }
            } else {
			    //$("#recallsAppend").html('');
				var html = '<tr><td  colspan="8" class="text-center text-danger">No Results Found</td></tr>';
                //$("#recallsAppend").html(html);
				// $('.load-more').addClass('hide');
			    $(`#${followpId}`).html(html);
				$(`#load-more-${followupName}`).addClass('hide');
               
            }
         }
      });
   }

	$(function () {
		$("#frm_filter_recalls").submit(function(e) {
			$(".loading").addClass("d-block");
			
			e.preventDefault();
			$('#clear_button').removeClass('d-none');

			var followpId ="";
			var followupName="";

			if (activeTab === "follow_up_pending") {
				followupName = "followup_pending";
				followpId = "recallsAppend";
			} else if (activeTab === "first_follow_up") {
				followupName = "first_followup";
				followpId = "firstfollowupAppend";
			} else if (activeTab === "second_follow_up") {
				followupName = "second_followup";
				followpId = "secondfollowupAppend";
			} else if (activeTab === "third_follow_up") {
				followupName = "third_followup";
				followpId = "thirdfollowupAppend";
			}

			var formData = $('#frm_filter_recalls').serializeArray();
			formData.push({ name: "followupName", value: followupName}); 
			console.log(formData);
			$.ajax({
				url: "{{ route('practitioner.dashboard.client.get.recalls')}}",
				method: 'POST',
				data: formData,
				success: function(data) {
					$(".loading").removeClass("d-block");
					$("#newfilterpopModalcard").modal("hide");
					if( data.data.length != 0 ) {
						var html = '';
						$.each( data.data, function( key, value ) { 
							html += dynamicContent(value);
						});

						// $("#recallsAppend").empty();
						// $("#recallsAppend").html(html);

						// if( $('.count_tr').length < data.count ) {
						// 	$('.load-more').removeClass('hide');
						// } else {
						// 	$('.load-more').addClass('hide');
						// }

						$(`#${followpId}`).empty();
                        $(`#${followpId}`).html(html);

						if ($(`#${followpId} .count_tr`).length < data.count) {
							$(`#load-more-${followupName}`).removeClass('hide');
						} else {
							$(`#load-more-${followupName}`).addClass('hide');
               			}


					} else {
						var html = '<tr><td  colspan="8" class="text-center text-danger">No Results Found</td></tr>';
						$(`#${followpId}`).html(html);
						$(`#load-more-${followupName}`).addClass('hide');
						//$("#recallsAppend").html(html);
						//$('.load-more').addClass('hide');
					}

					$("#clear-filter").removeClass("hide");
				}
			});
		});
	})

	$(function () {
		$("#generalrecallfilterClientList").submit(function(e) {
			$('#clear_button').removeClass('d-none');
			e.preventDefault();

			var followpId ="";
			var followupName="";

			if (activeTab === "follow_up_pending") {
				followupName = "followup_pending";
				followpId = "recallsAppend";
			} else if (activeTab === "first_follow_up") {
				followupName = "first_followup";
				followpId = "firstfollowupAppend";
			} else if (activeTab === "second_follow_up") {
				followupName = "second_followup";
				followpId = "secondfollowupAppend";
			} else if (activeTab === "third_follow_up") {
				followupName = "third_followup";
				followpId = "thirdfollowupAppend";
			}

			$('.filter_name').val($('#recall_first_name_or_last_name').val());
			
			var formData = $('#generalrecallfilterClientList').serializeArray();
			formData.push({ name: "followupName", value: followupName}); 
			//console.log(formData);

			$.ajax({
				url: "{{ route('practitioner.dashboard.client.get.recalls')}}",
				method: 'POST',
				data: formData,
				success: function(data) {
					if( data.data.length != 0 ) {
						var html = '';
						$.each( data.data, function( key, value ) { 
							html += dynamicContent(value);
						});

						$(`#${followpId}`).empty();
                        $(`#${followpId}`).html(html);

						if ($(`#${followpId} .count_tr`).length < data.count) {
							$(`#load-more-${followupName}`).removeClass('hide');
						} else {
							$(`#load-more-${followupName}`).addClass('hide');
               			}
					} else {
						var html = '<tr><td  colspan="8" class="text-center text-danger">No Results Found</td></tr>';
						$(`#${followpId}`).html(html);
						$(`#load-more-${followupName}`).addClass('hide');
						//$("#recallsAppend").html(html);
						//$('.load-more').addClass('hide');
					}

					$("#clear-filter").removeClass("hide");
				}
			});
		});
	})

	/* NEW CODE FOR TEAM MEMBER - START */
	var is_team_member = "{{$is_member}}";
	var baseurl1 = "{{$baseurl}}";
		

	if( is_team_member == 0 ) {
	var searchClientPath = "{{ url('practitioner/search/client') }}";
	} else {
	var searchClientPath = "{{ url('practitioner/search/client') }}";
	// var searchClientPath = "{{ route('practitioner.search.clientteam') }}";
	}
	/* NEW CODE FOR TEAM MEMBER - END */

$(function() {
	var querySet = 0;
	$.ajaxSetup({
		headers: {
			'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
		}
	});
	var querySet = 0;
    $('#recall_first_name_or_last_name').typeahead({
         source: function(query, process) {
            if(querySet == 0){
               console.log(query)
               querySet = 1;
               return $.get(searchClientPath, {
                  query: query
               }, function(data) {
                  querySet = 0;
               if (data.length > 0) {
                  return process(data);   

                  } else {
                     $(".tt-dataset").text('No Results Found');
                     setTimeout(function() {
                        $('.tt-dataset').text('');
                     }, 5000);
                  }
               });
            }
         },
         updater: function(selection) {
            $("#client_id").val(selection.id);
			$('#hidden_client_id').val(selection.id);
			$('#clear_button').removeClass('d-none');
			// e.preventDefault();

			var followpId ="";
			var followupName="";

			if (activeTab === "follow_up_pending") {
				followupName = "followup_pending";
				followpId = "recallsAppend";
			} else if (activeTab === "first_follow_up") {
				followupName = "first_followup";
				followpId = "firstfollowupAppend";
			} else if (activeTab === "second_follow_up") {
				followupName = "second_followup";
				followpId = "secondfollowupAppend";
			} else if (activeTab === "third_follow_up") {
				followupName = "third_followup";
				followpId = "thirdfollowupAppend";
			}

			$('.filter_name').val($('#recall_first_name_or_last_name').val());

			var formData = $('#generalrecallfilterClientList').serializeArray();
			console.log(formData);
			formData.push({ name: "hidden_client_id", value: $('#hidden_client_id').val()}); 
			formData.push({ name: "followupName", value: followupName}); 


			$.ajax({
				url: "{{ route('practitioner.dashboard.client.get.recalls')}}",
				method: 'POST',
				data: formData,
				success: function(data) {
					if( data.data.length != 0 ) {
						var html = '';
						
						$.each( data.data, function( key, value ) { 
							html += dynamicContent(value);
						});

						// $("#recallsAppend").empty();
						// $("#recallsAppend").html(html);
						
						$(`#${followpId}`).empty();
                        $(`#${followpId}`).html(html);

						if ($(`#${followpId} .count_tr`).length < data.count) {
							$(`#load-more-${followupName}`).removeClass('hide');
						} else {
							$(`#load-more-${followupName}`).addClass('hide');
               			}

						// if( $('.count_tr').length < data.count ) {
						// 	$('.load-more').removeClass('hide');
						// } else {
						// 	$('.load-more').addClass('hide');
						// }
					} else {
						var html = '<tr><td  colspan="8" class="text-center text-danger">No Results Found</td></tr>';
						$(`#${followpId}`).html(html);
						$(`#load-more-${followupName}`).addClass('hide');
						//$("#recallsAppend").html(html);
						//$('.load-more').addClass('hide');
					}

					$('#clear_button').removeClass('d-none');
				}
			});
            return selection.name;
         }
    }); 
});
	
   
</script>
<script type="text/javascript">

   $.ajaxSetup({
      headers: {
         'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      }
   });

	$("#referral_source").select2({

	// dropdownParent: $('#referral_source_box')
	});

	$(document).on('click', '#filter-recall-btn', function() {
		$('#newfilterpopModalcard').modal('show');
		$('.service_provider_set_value').val('').change();
		$('.appointment_types_set_value').val('').change();
		$('.location_set_value').val('').change();
	})

   $(function() {

      /** Pre Modal for booking confirmation */
      $(document).on('click', '.ClientCardOpen', function(event) {
			event.preventDefault();
         //  $(".ClientCardOpen").on('click',function(){
         var clientData = $(this).data('data');
		 var baseurl2 = "{{$baseurl}}";
         clientData = clientData.split(";");
         $.redirect(baseurl2 + '/practitioner/clientcard', {
            'client_id': btoa(clientData[0])
         }, "GET");
      });

      $('#appointment-location').select2({
         tokenSeparators: [",", " "],
      });

      $(".order_by").on('click', function(event) {
         getClientList($(this).data('order-by'), $(this).data('sort-by'));
		 $('#sortflag').val(1);
		 $('#order_by_name').val($(this).data('order-by'));
		 $('#short_by_name').val($(this).data('sort-by'))
      });


   	});

	 /** delete recall start*/
	 $(document).on('click', '#deleteRecall', function() {
		var ids = [];
		$('.client-radio:checked').each(function(i) {
			ids[i] = $(this).val();
		});
		if (ids.length === 0) {
			Swal.fire({
				icon: 'error',
				title: 'Please select at least 1 record.',
				showClass: {
				popup: 'animate__animated animate__fadeInDown'
				},
				hideClass: {
				popup: 'animate__animated animate__fadeOutUp'
				}
			});
			return false;
		} else {
			var formData = new FormData();
			formData.append('appointment_id', ids);
			Swal.fire({
                  title: "Delete Follow-Up?",
				  text: 'Once deleted, clients will no longer be added to recalls unless they schedule another appointment. Do you wish to proceed with the deletion?',
                  icon: 'warning',
                  showCancelButton: true,
                  confirmButtonText: 'Yes',
                  cancelButtonText: 'No'
            }).then((result) => {
                if (result.value) {
					$.ajax({
						url: "{{route('practitioner.dashboard.client.recalls.delete')}}",
						data: formData,
						dataType: 'JSON',
						type: "POST",
						contentType: false,
						processData: false,
						beforeSend: function(msg) {
							$(".loading").addClass("d-block");
						},
					}).done( function(response) {
						$(".loading").removeClass("d-block");
						$('.client-radio:checked').parent().parent().parent().parent().parent().parent().parent().remove();
						if( response.status == 'success' ) {
							Swal.fire({
								icon: response.status,
								title: response.msg,
								showClass: {
								popup: 'animate__animated animate__fadeInDown'
								},
								hideClass: {
									popup: 'animate__animated animate__fadeOutUp'
								}
							})
								
						}else{
							Swal.fire({
								icon: response.status,
								title: response.msg,
								showClass: {
								popup: 'animate__animated animate__fadeInDown'
								},
								hideClass: {
									popup: 'animate__animated animate__fadeOutUp'
								}
							})
						}
					});
				}
			});
		}
   	});
   /** delete recall end */

	$(document).on('click','#close_model',function(){ 
		var val = $('#service_provider').val();
		$('.service_provider_set_value').val('').change();
		$('.appointment_types_set_value').val('').change();
		$('.location_set_value').val('').change();
	});
</script>

@endsection