@extends('front.practitioner.import.template.import')
@section('content')

<style>
	.taking-new-table .table td:nth-child(5),
	.taking-new-table .table th:nth-child(5),
	.service-new-table .table td:nth-child(5),
	.service-new-table .table th:nth-child(5),
	.dr-table .table td:nth-child(5),
	.dr-table .table th:nth-child(5) {
		white-space: normal !important;
	}
	.taking-new-table .table td:nth-child(4),
	.taking-new-table .table th:nth-child(4),
	.service-new-table .table td:nth-child(4),
	.service-new-table .table th:nth-child(4),
	.dr-table .table td:nth-child(4),
	.dr-table .table th:nth-child(4) {
		width: 10%;
		white-space: normal !important;
	}
	.taking-new-table .table td:nth-child(2),
	.taking-new-table .table th:nth-child(2),
	.service-new-table .table td:nth-child(2),
	.service-new-table .table th:nth-child(2),
	.dr-table .table td:nth-child(2),
	.dr-table .table th:nth-child(2) {
		width: 10%;
		white-space: normal !important;
	}
	.communication-table table tr td.empty-data {
		padding: 20px !important;
	}
	.communication-table table tr th:nth-of-type(1), .communication-table table tr td:nth-of-type(1) {
		min-width: auto;
		padding: 0;
		padding-left: 15px;
	}
	.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;
		padding: 0;
		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: #ffffff;
		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%;
	}
	a.btn.btn-unfill.mb-3.ml-auto.my-auto.my-plan-head-a {
		margin-left: 10px !important;
		min-height: 37px;
	}
	/* .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;
		vertical-align: middle;
	}

	.my-client-list-new-v1 table  .checkedbox {
		position: unset;
		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;
		}
	}

	.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_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>

<style>
	
	.tabs-my-client-list .rdio-primary label:before {
		display: none;
	}
	.tabs-my-client-list .rdio-primary {
		position: unset;
	}
	.tabs-my-client-list .rdio-primary label {
		position: absolute;
		top: 50%;
		bottom: 0;
		width: 6px;
		height: 26px;
		background: #969696;
		left: 10px;
		transform: translate(0, -50%);
	}
  .select2-container--default .select2-selection--single .select2-selection__rendered {

    /* padding-left: 20px !important; */
}

.treatmentnotenew-nav #create-template {
    width: auto;
}
.search-box-btns {
		display: flex;
		flex-wrap: wrap;
	}

.display-inline-block {
	display: inline-block;
}

.my-income-main .dr-table .table td, .my-income-main .dr-table .table th {
  vertical-align:middle;
}

.invoice-page-menu .navbar-brand {
    margin-right: 0;
}
.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: #ffffff;
    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;
}
.invoice-page-menu a.btn.setting-btn svg {
    width: 20px;
}
.invoice-page-menu .right-menu .btn-fill {
    padding: 5px 24px;
    margin-left:0;
}
.invoice-page-menu .right-menu {
  display:flex;
}
.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;
	}

@media (min-width: 768px) and (max-width: 1199px) {
  .one-time-availability-page {
    padding-top: 150px !important;
  }
}

@media (max-width: 767px) {
  .search-box-outer form {
    width: 160px;
  }
  .invoice-page-menu .btn-unfill {
    font-size: 14px;
    letter-spacing: 0;
    padding: 3px 13px !important;
  }
  .invoice-page-menu a.btn.setting-btn {
    height: 30px;
    width: 30px;
  }
  .search_clients_v1_input {
    height: 30px;
  }
  .invoice-page-menu .right-menu .btn-fill {
    padding: 5px 14px;
    font-size: 14px;
    line-height: 20px;
  }
}

@media (max-width: 575px) {
  .treatmentnotenew-nav #create-template {
      font-size: 14px;
      padding: 5px 10px;
  }

  .treatmentnotenew-nav .page-title {
    width: auto;
    margin: 10px 0;
  }

}

@media (max-width: 991px) {
  
  .sidebar-menu {
    display:none;
  }
}

.buttons {
  padding-right: 10px;
}


</style>

<div class="">
	<div class="one-time-header">
	
	  <div class="container-fluid">
		<div class="row">
		  <nav class="navbar navbar-light bg-light invoice-page-menu notes-menu w-100 treatmentnotenew-nav">
			<a class=" p-0" href="{{ URL::previous() }}"><img src="{{asset('assets/images/My Appointments back icon.svg')}}" alt="" class="img-flude" style="min-width: 40px"></a>
			
			<h1 class="page-title eagle-font font-400 mr-3 ml-2 "><span class="arca-font"></span>  Appointment listing</h1>
	
			<div class="search-box-btns ">
				<div class="search-box-outer display-inline-block">
				   <form id=""  onsubmit="return false;">
					 <input data-action="{{ route('practitioner.search_appointment_listing') }}" type="text" name="search_appt" id="search_appt" autocomplete="off" class="typeahead search_clients_v1_input" placeholder="Search">
					  {{-- <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="" 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-appt-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.appointment_listing')}}" id="clear_button" class="btn btn-unfill mb-3 ml-auto my-auto my-plan-head-a d-none" >Clear filter</a>
			</div>	
			</nav>
		  <div class="brdr-bttm w-100 mb-0"></div>
		</div>
	  </div>
	</div>
	@include('front.inner-layout.sidebar')
<div class="page-content dashboard-wrapper mdashboard-wrapper clientd-wrapper one-time-availability-page">
   <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="future_appt"><a href="#">Future Appointments</a></li>
				<li class="" data-rel="past_appt"><a href="#">Past Appointments</a></li>
				
			</ul>
		</div>
		
	
		<div class="tab-main-box">
			<div class="tab-box col-md-12 active" id="future_appt" 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">
											
										</th>
										<th class="align-middle">Client name</th>
										<th class="align-middle">Appointment date</th>
										<th class="align-middle">Time</th>
										<th class="align-middle">Service booked</th>
										@if(count($service_provider) > 1)
										<th class="align-middle">Service provider</th>
										@endif
										@if(count($locations) > 1)
										<th class="align-middle">Location</th>
										@endif
										<th class="align-middle">Appointment status</th>
										<th class="align-middle">Notes</th>
										<th class="align-middle">Invoice</th>
										
									</tr>
									</thead>
									<tbody id="future_appt_listing"></tbody>

								</table>
							</div>
						
						</div>
					</div>
				
				</div>
			
				<div class="text-center">
					<a href="javascript:void(0)" id="load-more-future_appt" class="btn btn-fill load-more hide">Load more</a>
				</div>
			</div>

			<div class="tab-box col-md-12 active" id="past_appt" 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">
											
										</th>
										<th class="align-middle">Client name</th>
										<th class="align-middle">Appointment date</th>
										<th class="align-middle">Time</th>
										<th class="align-middle">Service booked</th>
										@if(count($service_provider) > 1)
										<th class="align-middle">Service provider</th>
										@endif
										@if(count($locations) > 1)
										<th class="align-middle">Location</th>
										@endif
										<th class="align-middle">Appointment status</th>
										<th class="align-middle">Notes</th>
										<th class="align-middle">Invoice</th>
										
									</tr>
									</thead>
									<tbody id="past_appt_listing"></tbody>

								</table>
							</div>
						
						</div>
					</div>
				
				</div>
			
				<div class="text-center">
					<a href="javascript:void(0)" id="load-more-past_appt" class="btn btn-fill load-more hide">Load more</a>
				</div>
			</div>

		</div>
		</div>

   </div>
</div>
<!-- Date Service Modal S -->
<div class="client-follow-popup customscroll waitlist-modal showpop dateserviceModal">
    <div class="modal fade" id="newfilterpopModalcard" tabindex="-1" role="dialog" aria-hidden="true">
       <div class="modal-dialog modal-dialog-centered" role="document">
          <div class="modal-content">
             <div class="popup-marg">
                <div class="modal-body p-0">
                   <div class="borderbtttm">
                      <form name="frm_filter_appt" id="frm_filter_appt" data-action="{{route('practitioner.search_appointment_listing')}}" method="POST">
                         @csrf
                         <div class="cdropdown-menu borderbtttm">
                            <div class="">
                               <h5>Date</h5>
                               <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>
						<div class="cdropdown-menu borderbtttm">
                            <div class="">
                               <h5>Service</h5>
                               <select class="form-control appointment_types" name="appointment_types" id="appointment_types">
								@isset($appointmentTypes)
									<option value="">Select</option>
									@foreach( $appointmentTypes as $key => $appttypes )
										<option class="form-control navy-text" value="{{@$appttypes->id}}">{{ $appttypes->appointment_type }}</option>
									@endforeach
								@endisset
                             </select>
                            </div>
                         </div>
						 @if(count($service_provider) > 1)
						 <div class="cdropdown-menu borderbtttm">
                            <div class="">
                               <h5>Service Provider</h5>
                               <select class="form-control service_provider" name="service_provider" id="service_provider">
									<option value="">Select</option>
									<option class="form-control navy-text" value="{{$practitioner->id}}">{{ $practitioner->first_name.' '.$practitioner->last_name }}</option>
									@isset($service_provider)
										@foreach($service_provider as $service_providers)
											@if( $service_providers->role == "service_provider" )
												<option value="{{@$service_providers->id}}">{{$service_providers->first_name.' '.$service_providers->last_name}}</option>
											@endif
										@endforeach
									@endisset
                             	</select>
                            </div>
                         </div>
						 @endif
						 @if(count($locations) > 1)
						 <div class="cdropdown-menu borderbtttm">
                            <div class="">
                               <h5>Location</h5>
                               <select class="form-control location" name="location" id="location">
								@isset($locations)
									<option value="">Select</option>
									@foreach( $locations as $key => $value)
										<option value="{{@$value->id}}">{{ getLocationAddress( $value->address ) }}</option>
									@endforeach
								@endisset
                             </select>
                            </div>
                         </div>
						 @endif
                         <div class="cdropdown-menu borderbtttm">
                            <div class="">
                               <h5>Appointment Status</h5>
                               <select class="form-control appt_status" name="appt_status" id="appt_status">
                                <option value="">Select</option>
                                <option value="arrived">Arrived</option>
                                <option value="missed">Missed</option>
                                <option value="cancelled">Cancelled</option>
								<option value="confirmed">Confirmed</option>
								<option value="pending">Scheduled</option>
                             </select>
                            </div>
                         </div>
						 <div class="cdropdown-menu borderbtttm">
                            <div class="">
                               <h5>Invoice Status</h5>
                               <select class="form-control notes_status" name="invoice_status" id="invoice_status">
                                <option value="">Select</option>
                                <option value="1">Sent</option>
                                <option value="0">Not sent</option>
								<option value="paid">Paid</option>
                             </select>
                            </div>
                         </div>   
						 <div class="cdropdown-menu borderbtttm">
                            <div class="">
                               <h5>Notes Status</h5>
                               <select class="form-control notes_status" name="notes_status" id="notes_status">
                                <option value="">Select</option>
                                <option value="1">Added</option>
                                <option value="0">Not added</option>
                             </select>
                            </div>
                         </div>                         

                         <div class="modal-footer mb-0">
                            <button type="submit" class="yellow-btn mt-3 save-btn save-btn-bg w-100 font-15">Apply</button>
                         </div>
                      </form>
                   </div>
                </div>
             </div>
          </div>
       </div>
    </div>
 </div>
<!-- Date Service Modal E -->
@endsection



@section('import-scripts')
<script type="text/javascript">

	var location_count = {{ count($locations) }};
	var service_provider_count = {{ count($service_provider) }};

	//getList(searchData, '');

	$(document).ready(function(e) {
		$("#start_date").datepicker({
        format: 'dd/mm/yyyy',
        weekStart: 1,
        todayHighlight: true,
        autoclose: true,
        clearBtn: false,

		});

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

		});
		
	});

	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 searchData = '';
	var activeTab = 'future_appt';
	getList('future_appt_listing','future_appt',searchData, '');

	$('.tab-menu li').on('click', function(){
		var target = $(this).attr('data-rel');
		activeTab = target;
		var searchData = '';
		
		
		$('#clear_button').addClass('d-none');
		$('#search_appt').val('');
		$('#service_provider').val('').change();
		$('#location').val('').change(); 
		$('#appointment_types').val('').change();
		$('#appt_status').val('').change(); 
		$('#invoice_status').val('').change();
		$('#notes_status').val('').change();
		$('#start_date').datepicker('update', '');
		$('#end_date').datepicker('update', '');
	
		if(target === "future_appt") {	
			getList('future_appt_listing','future_appt',searchData, '');
			
		}
			
		if(target === "past_appt") {
			getList('past_appt_listing','past_appt',searchData, '');
		} 

		
   	});

	function getList(tabId,tabName,searchData, sorting) {
	$.ajax({
		url: "{{ route('practitioner.get_appointment_listing') }}",
		method: 'POST',
		data: {
			tabName:tabName,
			searchData: searchData,
			sorting: sorting
		},
		success: function(data) {
			appt_List(data,tabId,tabName);
		}
	});
	}

	function appt_List(data,tabId,tabName) {
	$(`#${tabId}`).empty();
	console.log(data);
	if( data.data.length != 0 ) {

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

		var html = '';
		$.each( data.data, function( key, value ) {
	
			html += '<tr class="count_tr">';

			html += '<td class="position-relative">';
			if(value?.appointment_type?.colors?.hex_code){
				html += '<div class="rdio rdio-primary radio-inline"><label style="background:'+value.appointment_type.colors.hex_code+';"  for="radio-'+ value.id +'"></label></div>';
			}else{
				html += '<div class="rdio rdio-primary radio-inline"><label for="radio-'+ value.id +'"></label></div>';
			}
			
			html += '</td>';
			if (value.client_id) {
				let clientName = value.name ? value.name : '';
				let clientLastName = value.last_name ? value.last_name : '';

				html += '<td class="align-middle cursor-pointer ClientCardOpen" data-data="' + value.client_id + ';" style="text-transform:capitalize">'
					+ clientName + ' ' + clientLastName + '</td>';
			} else {
				html += '<td></td>';
			}
			if( value.convert_date){
				// html += '<td class="">'+ value.convert_date +'</td>';
				let detailsUrl = "{{ url('practitioner/appointments/details') }}/" + value.appointment_id;
    			html += '<td class=""><a href="' + detailsUrl + '" class="">' + value.convert_date + '</a></td>';
			}else{
				html += '<td class=""></td>';
			}
			if( value.convert_time ){
				html += '<td class="">'+ value.convert_time +'</td>';
			}else{
				html += '<td class=""></td>';
			}
			if(value.appointment_type){
				html += '<td class="">'+ value.appointment_type.appointment_type +'</td>';
			}else{
				html += '<td class=""></td>';
			}
			if(service_provider_count > 1){
				if(value.apptservice_provider){
					html += '<td class="">'+ value.apptservice_provider.first_name +' '+value.apptservice_provider.last_name+'</td>';
				}else{
					html += '<td class=""></td>';
				}
			}
			if(location_count > 1){
				if(value.locations){
					html += '<td class="">'+ value.locations.address +'</td>';
				}else{
					html += '<td class=""></td>';
				}
			}
			if (value.client_appointment_status && value.client_appointment_status.toLowerCase() === "arrived") {
				html += '<td class="" style="text-transform:capitalize">Arrived</td>';
			} else if (value.status) {
				let displayStatus = (value.status.toLowerCase() === "pending") ? "Scheduled" : value.status;
				html += '<td class="" style="text-transform:capitalize">' + displayStatus + '</td>';
			} else {
				html += '<td class=""></td>';
			}
			if(value.notes_status && value.notes_status == '1'){
				//html += '<td title="Notes added" class="">'+ 'Notes added' +'</td>';
				html += '<td title="Notes added" class=""><a href="' + value.notes_url + '"><img src="{{ asset('assets/images/notes-added.svg') }}" alt="" style="width: 26px"></a></td>';
			}else{
				//html += '<td title="Notes not added" class="">'+ 'Notes not added' +'</td>';
				html += '<td title="Notes not added" class=""><a href="JavaScript:void(0);"><img src="{{ asset('assets/images/notes-not-added.svg') }}" alt="" style="width: 26px"></a></td>';
			}
			if (value.pay_status && (value.pay_status == 'credit' || value.pay_status == "paid")) { 
				//html += '<td class="">' + "invoice paid" + '</td>';
				html += '<td title="Invoice paid" class=""><a href="' + value.invoice_details + '"><img src="{{ asset('assets/images/invoice-sent.svg') }}" alt="" style="width: 26px"></a></td>';
			} else if (value.is_invoice_sent  && value.is_invoice_sent == '1') {
				html += '<td title="Invoice sent" class=""><a href="' + value.invoice_details + '"><img src="{{ asset('assets/images/invoice-not-sent.svg') }}" alt="" style="width: 26px"></a></td>';
			} else {
				//html += '<td class="">' + "invoice not sent" + '</td>';
				html += '<td title="Invoice not sent" class=""><a href="JavaScript:void(0);"><img src="{{ asset('assets/images/missed-new.svg') }}" alt="" style="width: 26px"></a></td>';
			}

			html += '</tr>';

			//$("#appt_listing").html(html);
			$(`#${tabId}`).html(html);
		});
		// if ($('.count_tr').length < data.count) {
		// 	$('.load-more').removeClass('hide');
		// } else {
		// 	$('.load-more').addClass('hide');
		// }
		

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

	} else {
		//$("#appt_listing").html('');
		//$('.load-more').addClass('hide');

		$(`#load-more-${tabName}`).addClass('hide');


		var html = '<tr><td  colspan="10" class="text-center text-danger empty-data">No Results Found</td></tr>';
		$(`#${tabId}`).html(html);

		//$("#appt_listing").html(html);
						
	}
	}

	function appt_List_Search(data, tabId, tabName) {
    $(`#${tabId}`).empty();
    console.log(data);

    if (data.data.length != 0) {
        var html = '';

        $.each(data.data, function (key, value) {
            html += '<tr class="count_tr">';

            html += '<td class="position-relative">';
            if (value?.appointment_type?.colors?.hex_code) {
                html += '<div class="rdio rdio-primary radio-inline"><label style="background:' + value.appointment_type.colors.hex_code + ';"  for="radio-' + value.id + '"></label></div>';
            } else {
                html += '<div class="rdio rdio-primary radio-inline"><label for="radio-' + value.id + '"></label></div>';
            }
            html += '</td>';

            // Client Name
			if (value.client_id) {
				let clientName = value.name ? value.name : '';
				let clientLastName = value.last_name ? value.last_name : '';

				html += '<td class="align-middle cursor-pointer ClientCardOpen" data-data="' + value.client_id + ';" style="text-transform:capitalize">'
					+ clientName + ' ' + clientLastName + '</td>';
			} else {
				html += '<td></td>';
			}

            // Appointment Date
            if (value.convert_date) {
                let detailsUrl = "{{ url('practitioner/appointments/details') }}/" + value.appointment_id;
                html += '<td class=""><a href="' + detailsUrl + '" class="">' + value.convert_date + '</a></td>';
            } else {
                html += '<td class=""></td>';
            }

            // Appointment Time
            if (value.convert_time) {
                html += '<td class="">' + value.convert_time + '</td>';
            } else {
                html += '<td class=""></td>';
            }

            // Appointment Type
            if (value.appointment_type) {
                html += '<td class="">' + value.appointment_type.appointment_type + '</td>';
            } else {
                html += '<td class=""></td>';
            }

            // Service Provider
            if (service_provider_count > 1) {
                if (value.practitioner_tab_id) {
					let practifirstName = value.practitioner_first_name ? value.practitioner_first_name : '';
					let practilastName = value.practitioner_last_name ? value.practitioner_last_name : '';
                    html += '<td class="">' + practifirstName + ' ' + practilastName + '</td>';
                } else {
                    html += '<td class=""></td>';
                }
            }

            // Location
            if (location_count > 1) {
                if (value.location_address) {
                    html += '<td class="">' + value.location_address + '</td>';
                } else {
                    html += '<td class=""></td>';
                }
            }

            // Appointment Status
            if (value.client_appointment_status && value.client_appointment_status.toLowerCase() === "arrived") {
                html += '<td class="" style="text-transform:capitalize">Arrived</td>';
            } else if (value.status) {
                let displayStatus = (value.status.toLowerCase() === "pending") ? "Scheduled" : value.status;
                html += '<td class="" style="text-transform:capitalize">' + displayStatus + '</td>';
            } else {
                html += '<td class=""></td>';
            }

            // Notes Status
            if (value.notes_status && value.notes_status == '1') {
                html += '<td title="Notes added" class=""><a href="' + value.notes_url + '"><img src="{{ asset('assets/images/notes-added.svg') }}" alt="" style="width: 26px"></a></td>';
            } else {
                html += '<td title="Notes not added" class=""><a href="JavaScript:void(0);"><img src="{{ asset('assets/images/notes-not-added.svg') }}" alt="" style="width: 26px"></a></td>';
            }

            // Invoice Status
            if (value.pay_status && (value.pay_status == 'credit' || value.pay_status == "paid")) {
                html += '<td title="Invoice paid" class=""><a href="' + value.invoice_details + '"><img src="{{ asset('assets/images/invoice-sent.svg') }}" alt="" style="width: 26px"></a></td>';
            } else if (value.is_invoice_sent && value.is_invoice_sent == '1') {
                html += '<td title="Invoice sent" class=""><a href="' + value.invoice_details + '"><img src="{{ asset('assets/images/invoice-not-sent.svg') }}" alt="" style="width: 26px"></a></td>';
            } else {
                html += '<td title="Invoice not sent" class=""><a href="JavaScript:void(0);"><img src="{{ asset('assets/images/missed-new.svg') }}" alt="" style="width: 26px"></a></td>';
            }

            html += '</tr>';
        });

        $(`#${tabId}`).html(html);

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



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

		if(activeTab === "future_appt") {
			getForLoadMore('future_appt_listing','future_appt','', '');
		} 
			
		if(activeTab === "past_appt") {
			getForLoadMore('past_appt_listing','past_appt','', '');
		} 

	});
	function getForLoadMore(tabId,tabName,searchData, sorting) {
	$.ajax({
		url: "{{ route('practitioner.get_appointment_listing')}}",
		method: 'POST',
		data: {
			tabName:tabName,
			searchData: searchData,
			sorting: sorting,
			skip: $(`#${tabId} .count_tr`).length
		},
		success: function(data) {
			console.log( data );
			if( data.data.length != 0 ) {
				var html = '';
				$.each( data.data, function( key, value ) {
					console.log(value);
					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">';
					if(value?.appointment_type?.colors?.hex_code){
						html += '<div class="rdio rdio-primary radio-inline"><label style="background:'+value.appointment_type.colors.hex_code+';"  for="radio-'+ value.id +'"></label></div>';
					}else{
						html += '<div class="rdio rdio-primary radio-inline"><label for="radio-'+ value.id +'"></label></div>';
					}
					html += '</ul>';
					html += '</div>';
					html += '</div>';
					html += '</td>';
					if (value.client_id) {
						let clientName = value.name ? value.name : '';
						let clientLastName = value.last_name ? value.last_name : '';

						html += '<td class="align-middle cursor-pointer ClientCardOpen" data-data="' + value.client_id + ';" style="text-transform:capitalize">'
							+ clientName + ' ' + clientLastName + '</td>';
					} else {
						html += '<td></td>';
					}
					if( value.convert_date){
						let detailsUrl = "{{ url('practitioner/appointments/details') }}/" + value.appointment_id;
    					html += '<td class=""><a href="' + detailsUrl + '" class="">' + value.convert_date + '</a></td>';
					}else{
						html += '<td class=""></td>';
					}
					if( value.convert_time ){
						html += '<td class="">'+ value.convert_time +'</td>';
					}else{
						html += '<td class=""></td>';
					}
					if(value.appointment_type){
						html += '<td class="">'+ value.appointment_type.appointment_type +'</td>';
					}else{
						html += '<td class=""></td>';
					}
					if(service_provider_count > 1){
						if(value.apptservice_provider){
							html += '<td class="">'+ value.apptservice_provider.first_name +' '+value.apptservice_provider.last_name+'</td>';
						}else{
							html += '<td class=""></td>';
						}
					}
					if(location_count > 1){
						if(value.locations){
							html += '<td class="">'+ value.locations.address +'</td>';
						}else{
							html += '<td class=""></td>';
						}
					}
					if (value.client_appointment_status && value.client_appointment_status.toLowerCase() === "arrived") {
						html += '<td class="" style="text-transform:capitalize">Arrived</td>';
					} else if (value.status) {
						let displayStatus = (value.status.toLowerCase() === "pending") ? "Scheduled" : value.status;
						html += '<td class="" style="text-transform:capitalize">' + displayStatus + '</td>';
					} else {
						html += '<td class=""></td>';
					}
					if(value.notes_status && value.notes_status == '1'){
						//html += '<td title="Notes added" class="">'+ 'Notes added' +'</td>';
						html += '<td title="Notes added" class=""><a href="' + value.notes_url + '"><img src="{{ asset('assets/images/notes-added.svg') }}" alt="" style="width: 26px"></a></td>';
					}else{
						//html += '<td title="Notes not added" class="">'+ 'Notes not added' +'</td>';
						html += '<td title="Notes not added" class=""><a href="JavaScript:void(0);"><img src="{{ asset('assets/images/notes-not-added.svg') }}" alt="" style="width: 26px"></a></td>';
					}
					if (value.pay_status && (value.pay_status == 'credit' || value.pay_status == "paid")) { 
						//html += '<td class="">' + "invoice paid" + '</td>';
						html += '<td title="Invoice paid" class=""><a href="' + value.invoice_details + '"><img src="{{ asset('assets/images/invoice-sent.svg') }}" alt="" style="width: 26px"></a></td>';
					} else if (value.is_invoice_sent  && value.is_invoice_sent == '1') {
						html += '<td title="Invoice sent" class=""><a href="' + value.invoice_details + '"><img src="{{ asset('assets/images/invoice-not-sent.svg') }}" alt="" style="width: 26px"></a></td>';
					} else {
						//html += '<td class="">' + "invoice not sent" + '</td>';
						html += '<td title="Invoice not sent" class=""><a href="JavaScript:void(0);"><img src="{{ asset('assets/images/missed-new.svg') }}" alt="" style="width: 26px"></a></td>';
					}

					html += '</tr>';
				});
					//$("#appt_listing").append(html);
					$(`#${tabId}`).append(html);

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

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

				//$("#appt_listing").html('');
				//$('.load-more').addClass('hide');

				$(`#${tabId}`).html('');
				$(`#load-more-${tabName}`).addClass('hide');
			}
		}
	});
	}
	// $(document).on( 'keyup', '#search_appt', function(e) {
	// 	//$(".loading").addClass("d-block");
    //      e.preventDefault();
	// 	 $('#clear_button').removeClass('d-none');
	// 	 var keyword = $(this).val();
	// 	 var formData = $('#frm_filter_appt').serializeArray();
	// 	 formData.push({ name: "keyword", value: keyword}); 
    //      $.ajax({
    //         type: "POST",
    //         url: $(this).data('action'),
    //         data: formData,
    //         dataType: "JSON",
    //         success: function( response )
    //         {
	// 			$(".loading").removeClass("d-block");
	// 			$("#appt_listing").html('');
	// 			appt_List(response);
    //         },
	// 		error: function(error) {
	// 			$(".loading").removeClass("d-block");
    //         	console.log('Error:', error);
    //     	}
    //      });
    // });

	

	let typingTimer;
	const doneTypingInterval = 500; // 500ms delay after user stops typing

	$(document).on('keyup', '#search_appt', function (e) {
		e.preventDefault();

		clearTimeout(typingTimer);

		var keyword = $(this).val().trim();

		// If search box is empty, stop AJAX request and reset results

		// if (keyword === '') {
		// 	var html = '<tr><td  colspan="10" class="text-center text-danger">No Results Found</td></tr>';
		// 	$("#appt_listing").html(html);
			
		// 	$('#clear_button').addClass('d-none'); // Hide clear button
		// 	$(".loading").removeClass("d-block"); // Hide loader
		// 	return; // Stop further execution
		// }

		typingTimer = setTimeout(() => {
			$('#clear_button').removeClass('d-none');
			var formData = $('#frm_filter_appt').serializeArray();
			formData.push({ name: "keyword", value: keyword });
			formData.push({ name: "tabName", value: activeTab });

			$.ajax({
				type: "POST",
				url: $(this).data('action'),
				data: formData,
				dataType: "JSON",
				beforeSend: function () {
					$(".loading").addClass("d-block"); // Show loader
				},
				success: function (response) {
					$(".loading").removeClass("d-block"); // Hide loader

					// $("#appt_listing").html('');
					// appt_List(response);
					$(`#${activeTab}_listing`).html('');
					//appt_List(response, `${activeTab}_listing`, activeTab);
					appt_List_Search(response, `${activeTab}_listing`, activeTab);
			
				},
				error: function (error) {
					$(".loading").removeClass("d-block"); // Hide loader
					console.log('Error:', error);
				}
			});
		}, doneTypingInterval);
	});

	$(document).on('click', '#filter-appt-btn', function() {
      	$('#newfilterpopModalcard').modal('show');

		$('#service_provider').val('').change();
		$('#location').val('').change(); 
		$('#appointment_types').val('').change();
		$('#appt_status').val('').change(); 
		$('#invoice_status').val('').change();
		$('#notes_status').val('').change();
		$('#start_date').datepicker('update', '');
		$('#end_date').datepicker('update', '');
	
    });

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


			var keyword = $('#search_appt').val();
			var formData = $('#frm_filter_appt').serializeArray();
			formData.push({ name: "keyword", value: keyword}); 
			formData.push({ name: "tabName", value: activeTab });

			$.ajax({
				url: $(this).data('action'),
				method: 'POST',
				data: formData,
				success: function( response )
				{
					$('#newfilterpopModalcard').modal('hide');
					$(".loading").removeClass("d-block");
					// $("#appt_listing").html('');
					// appt_List(response);
					$(`#${activeTab}_listing`).html('');
					appt_List_Search(response, `${activeTab}_listing`, activeTab);
				},
				error: function(error) {
					$('#newfilterpopModalcard').modal('hide');
					$(".loading").removeClass("d-block");
					console.log('Error:', error);
				}
			});
		});

		$(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");
      });



	})
	
</script>
@endsection