@extends('monitoring/layout.app')
@section('title', 'BettrAi | Patient Engagement- Reminders')
@section('content')
<style type="text/css">
.filter_ddl{
   padding: 0.55rem 0.1rem !important;
}
.category_ddl{
   padding-left: 7px !important;
   padding-right: 1px !important;
}
.status_heading {
  padding: 0.25rem 0.5rem !important;
}
.fa-check{
	color:#009E0F;
	cursor: default !important;
	font-size: 12px;
}
.fa-times{
	color:#CC0000;
	cursor: default !important;
	font-size: 12px;
}
.fa-clock{
	color:#FFA800;
	cursor: default !important;
	font-size: 12px;
}
.reminders_div{
	padding: 0px 10px !important;
}
.reminder_col{
	padding-left: 5px !important;
}
.check_icon{
	padding-right: 12px !important;
}
.arrows_div{
	padding-left: 2px !important;
}
.right_arrow_div{
	display:none;
}
.arrow_icons{
	color: #464E5F;
}
.reminder_card_body{
	padding: 2rem 0.5rem !important; 
}
.menu_link_icon{
	margin-left: 5px !important;
}
.notify_bellicon{
	float: right !important;
	height: 16px !important;
	width: 16px !important;
}
.flaticon_chat{
	margin-top: 4px !important;
}
.reminders_block_div{
	border-radius: 5px !important;
	font-size: 10px;
	line-height: 20px;
	padding: 5px 2px;
}
.display_date_value{
	font-size: 8px;
}
.all_reminders_text{
	margin-bottom: 10px;
	font-weight: bold;
}
.checkbox{
   margin-right: 3px !important;
}
.symbol.symbol-lg-75 > img {
	width: 75px;
	height: 75px;
}
.total_heading{
	text-align: right !important;
}
.attend_heading{
	padding:0 !important;
}
.clear_search_input{
   margin: 8px;
   cursor: pointer !important;
}
.clear_search_input i{
   color: #B5B5C3 !important;
   cursor: pointer !important;
}
.totalrem_value{
	padding-left: 5px;
}
.attend_value{
	padding-left: 10pxpx;
}
.percent_value{
	padding-left: 3px;
}
.patient_text_style{
   line-height: 1.5;
   font-size: 13px !important;
   color: #464E5F;
}
.patient_name_style{
   font-size: 1.1rem !important;
   font-weight: 500 !important;
}
</style>
<link rel="stylesheet" href="{{ url('/assets/css/custom_chat_styles_other.css') }}?v={{ rand(11111,99999) }}" type="text/css" />	
<style type="text/css">
.logged-in {
  color: #11d911;
  font-size: 30px;
  position: absolute;
  top: 45%;
  left: 65%;
}
.font-weight-bold{
   font-weight: 500 !important;
}
</style>
<div class="card card-custom rounded-top-0 bg-light-warning">
	<div class="card-header pt-3 pb-3 bg-white pl-1 pr-1">
		<div class="col-lg-6 float-left pt-2">
			<div class="col-lg-8 float-left mb-3">
								<div class="checkbox-inline font-weight-bold">
					<label class="checkbox">
						<input type="checkbox" class="status_filter"  value="over" onchange="get_filter_reminders('status')">Overdue <span></span></label>
					<label class="checkbox">
						<input type="checkbox" class="status_filter"  value="slow" onchange="get_filter_reminders('status')">Slow <span></span></label>
					<label class="checkbox">
						<input type="checkbox" class="status_filter"  value="on" onchange="get_filter_reminders('status')">On-track <span></span></label>
				</div>
			</div>
			<div class="col-lg-4 float-right mb-3">
				<div class="input-group">
					<select name="period_type" id="period_type" class="form-control form-control-solid filter_input filter_ddl mt-n2" onchange="get_filter_reminders('period')">
						<option  value="t">Today</option>
						<option  value="c">Current Month</option>
						<option  value="p">Previous Month</option>
					</select>
				</div>
			</div>
		</div>
		<div class="col-lg-6 float-right">
			<div class="col-lg-6 float-left mb-3">
				<div class="input-group input-group-solid">
					<input type="text" class="form-control filter_input typeahead notranslate" name="search_term" id="search_term" placeholder="Search by Patient Name/DOB(MM/DD/YYYY)/UID" title="Search by Patient Name/DOB(MM/DD/YYYY)/UID" value="{{ $search_term }}">
					<div class="input-group-prepend">
						<span class="clear_search_input" onclick="clear_searchtext_input()">
							<i class="fa fa-times"></i>
						</span>
					</div>
				</div>
			</div>
			<div class="col-lg-4 float-left mb-3">
				<div class="input-group">
					<select name="category" id="category" class="form-control form-control-solid filter_input filter_ddl" onchange="get_filter_reminders('category')">
						<option value="">Select Reminder</option>
						@foreach($reminder_categories as $reminder_cat)
							<option selected="selected" value="{{ $reminder_cat['value'] }}">{{ $reminder_cat['label'] }}</option>
						@endforeach
					 <i class="la la-filter"></i>
					 </span> </div>
					</select>
				</div>
			</div>
			<div class="col-lg-2 float-right mb-3">
				<button type="button" onclick="reset_filters();" class="btn btn-primary btn-md text-uppercase font-weight-bold chat-send py-2 px-6">Reset</button>
			</div>
		</div>
	</div>
	<div class="card-body p-0">
		<div class="row justify-content-center py-8 py-lg-3">
			<div class="col-xl-12 col-xxl-11">
				<!--row 1 -->
				<div class="row" id="patients_reminders_div">
				</div>
				<div id="loader_img" text-align="center" style="text-align: center; display:none;">
					<img src="{{ url('assets/images/ui-anim_basic_16x16.gif') }}">
				</div>
				<div class="row" id="load_more_div" style="display:none;">
					<div class="col-xl-12 col-md-12 col-sm-12 col-lg-12">
						<!--begin::Card-->
						<div>
							<!--begin::Body-->
							<div class="card-body h-300px justify-content-center" text-align="center" style="text-align: center">
							<!--end::Info-->
							<!-- <i class="icon-3x text-success flaticon2-plus-1"></i><br> -->
								<h4 class="more_items_count"><span id="more_items_count">{{ $total_items_count-8 }}</span> more patients</h4>
								<a href="javascript:;" onclick="load_more_items('load')" class="btn btn-outline-primary font-weight-bolder text-uppercase py-4">Load More</a>
							</div>
							<!--end::Body-->
						</div>
						<!--end::Card-->
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<div class="modal modal-sticky modal-sticky-bottom-right" id="kt_chat_modal" role="dialog" data-backdrop="false">
   <div class="modal-dialog" role="document">
      <div class="modal-content">
         <!--begin::Card-->
         <div class="card card-custom">
            <!--begin::Header-->
            <div class="card-header align-items-center px-4 py-3">
               <!-- <div class="text-left flex-grow-1">
               </div> -->
               <div class="text-center flex-grow-1">
                  <div id="header_title" class="text-dark-75 font-weight-bold font-size-h5 cust_header"></div>
               </div>
               <div class="text-right flex-grow-1">
                  <button type="button" class="btn btn-clean btn-sm btn-icon btn-icon-md" data-dismiss="modal" onclick="reset_values();">
                     <i class="ki ki-close icon-1x"></i>
                  </button>
               </div>
            </div>
            <!--end::Header-->
            <!--begin::Body-->
            <div class="card-body">
               <!--begin::Scroll-->
               <div class="scroll scroll-pull" data-height="240" data-mobile-height="350">
                  <!--begin::Messages-->
                  <div class="messages">
                  </div>
                  <!--end::Messages-->
               </div>
               <!--end::Scroll-->
            </div>
            <!--end::Body-->
            <!--begin::Footer-->
            <div class="card-footer align-items-center">
               <form name="chat_message_form" id="chat_message_form">
			   		<input type="hidden" name="sender_id" id="sender_id" value="{{ $user_id }}">
					<input type="hidden" name="sender_uname" id="sender_uname" value="{{ $username }}">
					<input type="hidden" name="receiver_id" id="receiver_id" value="">
					<input type="hidden" name="receiver_uname" id="receiver_uname" value="">
                  <!--begin::Compose-->
				  	<div class="row" id="upload_image_previewer">
					</div>
                  	<div class="row">
						<input type="file" id="chat_file" name="chat_file[]" multiple style="display:none" onchange="preview_file_attachments(this)"/> 
						<input type="file" id="virtual_chat_file" name="virtual_chat_file[]" multiple style="display:none" onchange="virtual_file_attachments(this)"/> 
						<div class="col-1 chat_message_div">
							<span class="svg-icon svg-icon-md svg-icon-success">
								<a href="javascript:void(0)" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
								<i class="fa fa-paperclip"></i>
								</a>
								<div class="dropdown-menu dropdown-menu-md dropdown-menu-right chat-dropdown-menu" style="">
								<!--begin::Navigation-->
								<ul class="navi navi-hover ">
									<li class="navi-item">
										<a href="javascript:void(0)" class="navi-link" onclick="open_browse('document')">
											<span class="navi-icon"><i class="fa fa-file"></i></span>
											<span class="navi-text">Document</span>
										</a>
									</li>
									<li class="navi-item">
										<a href="javascript:void(0)" class="navi-link" onclick="open_browse('image')">
											<span class="navi-icon"><i class="fa fa-image"></i></span>
											<span class="navi-text">Image</span>
										</a>
									</li>
								</ul>
								<!--end::Navigation-->
								</div>
							</span>
						</div>
						<div class="col-9">
							<textarea name="chat_message" id="chat_message" class="form-control border-0 p-0 textarea_form" rows="2" maxlength="5000" placeholder="Type a message" onfocus="update_message_status();"></textarea>
                            <span style="font-size:10px;float:right;">(Max 5000 characters allowed)</span>						
						</div>
						<div class="col-2">
							<button type="button" onclick="sendMessage();" class="btn btn-primary btn-md text-uppercase font-weight-bold chat-send py-2 px-6">Send</button>
							<img id="loader_img" style="display:none;" alt="Logo" src="{{ url('assets/images/ui-anim_basic_16x16.gif') }}" class="logo-sticky max-h-35px" />
						</div>
					</div>
                  <!--begin::Compose-->
               	</form>
            </div>
            <!--end::Footer-->
         </div>
         <!--end::Card-->
      </div>
   </div>
</div>
<div class="modal fade" id="image_overview" tabindex="-1" role="dialog" aria-labelledby="image_overview" aria-hidden="true">
   <div class="modal-dialog modal-dialog-top" role="document">
      <div class="modal-content" style="background-color: transparent !important;">
         <div class="modal-header" style="border-bottom: none !important;">
            <h5 class="modal-title" id="exampleModalLabel"></h5>
            <button type="button" class="close close_button" data-dismiss="modal" aria-label="Close">
               <i aria-hidden="true" class="ki ki-close fa-1x" style="color: #000;"></i>
            </button>
         </div>
         <div class="modal-body" id="display_image" style="padding: 1px !important; text-align:center">	
            
         </div>
      </div>
   </div>
</div><!--Modal 1 Ends-->   
<div class="modal fade" id="all_reminders" tabindex="-1" role="dialog" aria-labelledby="all_reminders" aria-hidden="true">
   <div class="modal-dialog modal-dialog-top" role="document">
      <div class="modal-content">
         <div class="modal-header">
            <h5 class="modal-title" id="all_reminders_title"></h5>
            <button type="button" class="close close_button" data-dismiss="modal" aria-label="Close">
               <i aria-hidden="true" class="ki ki-close fa-1x" style="color: #000;"></i>
            </button>
         </div>
         <div class="modal-body" id="all_reminders_content">	
         </div>
      </div>
   </div>
</div><!--Modal 1 Ends-->

<div class="modal fade" id="viewFullDetails" tabindex="-1" role="dialog" aria-labelledby="viewFullDetails" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered modal-xlg" role="document" style="max-width: 90%;">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title patient_full_details" id="exampleModalLabel">Health Status</h5>
				<button type="button" class="close notesClose" data-dismiss="modal" aria-label="Close">
					<i aria-hidden="true" class="ki ki-close"></i>
				</button>
			</div>
			<div class="modal-body" style="min-height: 500px;">												
				<div id="load_patient_detail_view">
				</div>					
			</div>					
		</div>
	</div>
</div>

<div class="modal fade" id="instantMessageToPatient" tabindex="-1" role="dialog" aria-labelledby="instantMessageToPatient" aria-hidden="true">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="exampleModalLabel">Send Message - <span id="sent_patient_name"></span></h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true"></span>
				</button>
			</div>
			<div class="modal-body">
				<input type="hidden" name="send_message_patient_id" id="send_message_patient_id" value="">
				<input type="hidden" name="message_type" id="message_type" value="patient">
				<!-- <input type="hidden" name="careteam_lead_name" id="careteam_lead_name" value=""> -->
			
				<div class="form-group row">
					<div class="col-12">
						<textarea id="send_text_message" name="send_text_message" cols="36" class="form-control" rows="4" style="width: 100% !important;"></textarea>
					</div>
				</div>
			</div>
			<div class="modal-footer">
				<span id="loader_image_span1"></span>
				<button type="button" class="btn btn-primary" onclick="submit_message_patient();">Send</button>
				<button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="cancel_form();">Close</button>
			</div>
		</div>
	</div>
</div>

<div class="modal fade" id="reportToPcp" tabindex="-1" role="dialog" aria-labelledby="reportToPcp" aria-hidden="true">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="exampleModalLabel">Report To PCP</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true"></span>
				</button>
			</div>
			<div class="modal-body">
				<input type="hidden" name="message_patient_id" id="message_patient_id" value="">
				<input type="hidden" name="message_type" id="message_type" value="">
				<!-- <input type="hidden" name="careteam_lead_name" id="careteam_lead_name" value=""> -->
				<div class="form-group row">
					<div class="col-12" style="">
						<label class="col-lg-4 col-form-label text-left">Program <span class="text-danger">*</span></label>
						<div class="col-lg-12">
							<select class="form-control" name="service_type" id="service_type" required onchange="changeServiceType()">
							</select>
						</div>			
					</div>
				</div>
				<div class="form-group row">
					<div class="col-12" style="">
						<div class="col-12">
						<input type="hidden" name="careteam_lead_id" id="careteam_lead_id">
						<span id="pcp_id" class="font-weight-bold text-dark">TO: </span>
						</div>
					</div>
				</div>
				<div class="form-group row">
					<div class="col-12">
						<label class="col-lg-4 col-form-label text-left">Message <span class="text-danger">*</span></label>
						<div class="col-lg-12">
							<textarea id="text_message" name="text_message" cols="36" class="form-control" rows="4" style="width: 100% !important;"></textarea>
						</div>
					</div>
				</div>
			</div>
			<div class="modal-footer">
				<span id="loader_image_span1"></span>
				<button type="button" class="btn btn-primary" onclick="submit_message_patient();">Send</button>
				<button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="cancel_form();">Close</button>
			</div>
		</div>
	</div>
</div>
<div id="divLoading" class="tabloadershow"></div>
<input type="hidden" name="loaded_patients" id="loaded_patients" value="">
<input type="hidden" name="loaded_categories" id="loaded_categories" value="">

<input type="hidden" name="page_num" id="page_num" value="0">
<input type="hidden" name="total_count" id="total_count" value="{{ $total_count }}">
<input type="hidden" name="current_date" id="current_date" value="{{ $current_date }}">
<input type="hidden" name="current_date_val" id="current_date_val" value="{{ $current_date }}">
<input type="hidden" name="user_image" id="user_image" value="{{ $user_image_url }}">
<input type="hidden" name="sender_fullname" id="sender_fullname" value="{{ $user_full_name }}">

<input type="hidden" name="chat_url" id="chat_url" value="{{ $chat_url }}">
<input type="hidden" name="load_img_url" id="load_img_url" value="{{ url('assets/images/ui-anim_basic_16x16.gif') }}">
<input type="hidden" name="base_url" id="base_url" value="{{ url('/') }}">
<input type="hidden" name="chat_user_id" id="chat_user_id" value="{{ $user_id }}">
<input type="hidden" name="chat_facility_id" id="chat_facility_id" value="{{ $facility_id }}">
<input type="hidden" name="csrf_token" id="csrf_token" value="{{csrf_token()}}">

<script src="{{ url('/custom/js/scripts.bundle.js') }}"></script>
<script src="{{ url('/assets/js/pages/custom/chat/chat.js') }}"></script>
<script src="{{ $chat_js_url }}"></script>
<script src="{{ url('/assets/js/custom_chat_js.js') }}"></script>
<script src="{{ url('/assets/js/typeahead.js') }}"></script>
<!-- <link rel="stylesheet" href="{{ url('/assets/css/jquery-ui.css') }}" />
<script>var _tooltip = jQuery.fn.tooltip;</script>
<script src="{{ url('/assets/js/jquery-ui.js') }}"></script>
<script>jQuery.fn.tooltip = _tooltip;</script> -->
<script type="text/javascript">
	socket.on('get_usernames', (data) => {
		$('.logged-in').hide();
		console.log('data: '+data);
		var arrayLength = data.length;
		for (var i = 0; i < arrayLength; i++) {
			$('#'+data[i]+'_status').show();
			//Do something
		}
	});
	$(function() {
		// $( "#search_term" ).autocomplete({
		// 	minLength: 0,
		// 	source: "{{ url('/searchHealthStatusPatients') }}",
		// 	focus: function( event, ui ) {
		// 		if(ui.item.label != 'No items found'){
		// 		$( "#search_term" ).val( ui.item.label );
		// 		return false;
		// 	}else{
		// 		$( "#search_term" ).val('');
		// 	}
		// 	},
		// 	select: function( event, ui ) {
		// 		if(ui.item.label != 'No items found'){
		// 		$("#search_term").val(ui.item.label);
		// 		get_filter_reminders('search');
		// 		return false;
		// 		}else{
		// 		$("#search_term").val('');
		// 		return false;
		// 		}
		// 	}
		// }).autocomplete( "instance" )._renderItem = function( ul, item ) {
		// 	return $( "<li>" )
		// 	.append( "<div>" + item.label + "</div>" )
		// 	.appendTo( ul );
		// };
		$( "#search_term" ).typeahead({
			source: function (query, result) {
				$.ajax({
				url: "{{ url('/searchHealthStatusPatients') }}",
				data: 'query='+query+'&module=reminders&category_filter=',
				dataType: "json",
				success: function (data) {
					if(data.hasOwnProperty("status") && data['status']=="validation"){
		               swal(data.message); return false;
		              }
					result($.map(data, function (item) {
						return item;
					}));
				}
				});
			},
			afterSelect: function(item) {
				$("#search_term").val(item);
				get_filter_reminders('search');
			}
		});
   });
	var status = '{{ $status }}';
	$('#page_num').val(0);
	// load_initial_reminders(status);
	// function load_initial_reminders(status){
	// 	var category = '{{ $category }}';
	// 	var period_type = '{{ $period_type }}';
	// 	if(period_type=='t'){
	// 		var date_val = '{{ $current_date }}';
	// 	} else {
	// 		var date_val = '';
	// 	}
	// 	var patient_ids_str = '';
	// 	//var history_ids_str = '';
	// 	var patient_ids = patient_ids_str.split(",");
	// 	//var history_ids = history_ids_str.split(",");
	// 	var categories_str = '';
	// 	//var categories_array = categories_str.split(",");
	// 	get_reminder_details(patient_ids_str,period_type,category,date_val,categories_str);
	// }

	function get_reminder_details(patient_ids_str,period_type,category,date_val,categories_str){
		console.log(patient_ids_str+'---'+period_type+'---'+category+'---'+date_val+'---'+categories_str);
		var patient_ids_array = [];
		if (isNaN(patient_ids_str)){
			var patient_ids_array = patient_ids_str.split(','); 
		} else {
			patient_ids_array.push(patient_ids_str); 
		}
		var categories_array = categories_str.split('@'); 
		var img_url = "{{ url('assets/images/ui-anim_basic_16x16.gif') }}";
		if(category=='' && period_type=='t'){
			for(k=0; k<patient_ids_array.length; k++){
				$('#step_indicator_1_'+patient_ids_array[k]).html('<div style="text-align:center;"><img src="'+img_url+'"></div>');
				$('#step_indicator_2_'+patient_ids_array[k]).html('<div style="text-align:center;"><img src="'+img_url+'"></div>');
			}
			for(m=0; m<patient_ids_array.length; m++){
				var categories_split_str = categories_array[m].split(',');
				if(categories_split_str.length==2){
					var url = "{{ url('/loadPatientReminders') }}?page_type=reminders&patient_ids_str="+patient_ids_array[m]+"&period_type="+period_type+"&category="+categories_split_str[0]+"&date_val="+date_val;
					$.ajax({
						type: "GET",
						url:  url,
						dataType: "json",
						success:function(json_data)
						{
							if(json_data.hasOwnProperty("status") && json_data['status']=="db_error"){
				               swal(json_data.message); return false;
				              }
							var cdata = json_data;
							$.each(cdata, function(key, value) {
								$('#step_indicator_1_'+value.patient_id).html(value.reminders);
							});
							$('[data-toggle="tooltip"]').tooltip();
							$('[data-toggle="popover"]').popover();
							$('.tooltip').removeClass('show');
						}
					});	
					var next_url = "{{ url('/loadPatientReminders') }}?page_type=reminders&patient_ids_str="+patient_ids_array[m]+"&period_type="+period_type+"&category="+categories_split_str[1]+"&date_val="+date_val;
					$.ajax({
						type: "GET",
						url:  next_url,
						dataType: "json",
						success:function(json_data)
						{
							if(json_data.hasOwnProperty("status") && json_data['status']=="db_error"){
				               swal(json_data.message); return false;
				              }
							var cdata = json_data;
							$.each(cdata, function(key, value) {
								$('#step_indicator_2_'+value.patient_id).html(value.reminders);
							});
							$('[data-toggle="tooltip"]').tooltip();
							$('[data-toggle="popover"]').popover();
							$('.tooltip').removeClass('show');
						}
					});
				} else if(categories_split_str.length==1) {
					var next_url = "{{ url('/loadPatientReminders') }}?page_type=reminders&patient_ids_str="+patient_ids_array[m]+"&period_type="+period_type+"&category="+categories_split_str[0]+"&date_val="+date_val;
					$.ajax({
						type: "GET",
						url:  next_url,
						dataType: "json",
						success:function(json_data)
						{
							if(json_data.hasOwnProperty("status") && json_data['status']=="db_error"){
				               swal(json_data.message); return false;
				              }
							var cdata = json_data;
							$.each(cdata, function(key, value) {
								$('#step_indicator_'+value.patient_id).html(value.reminders);
							});
							$('[data-toggle="tooltip"]').tooltip({html:true});
							$('[data-toggle="popover"]').popover();
							$('.tooltip').removeClass('show');
						}
					});
				}
			}
		} else if(category!='' && period_type=='t') {
			for(k=0; k<patient_ids_array.length; k++){
				$('#step_indicator_'+patient_ids_array[k]).html('<div style="text-align:center;"><img src="'+img_url+'"></div>');
			}
			var next_url = "{{ url('/loadPatientReminders') }}?page_type=reminders&patient_ids_str="+patient_ids_str+"&period_type="+period_type+"&category="+category+"&date_val="+date_val;
			$.ajax({
				type: "GET",
				url:  next_url,
				dataType: "json",
				success:function(json_data)
		{
					if(json_data.hasOwnProperty("status") && json_data['status']=="db_error"){
		               swal(json_data.message); return false;
		              }
					var cdata = json_data;
					$.each(cdata, function(key, value) {
						$('#step_indicator_'+value.patient_id).html(value.reminders);
					});
					$('[data-toggle="tooltip"]').tooltip({html:true});
					$('[data-toggle="popover"]').popover();
					$('.tooltip').removeClass('show');
				}
			});
		} else {
			for(k=0; k<patient_ids_array.length; k++){
				$('#filter_data_div_'+patient_ids_array[k]).html('<div style="text-align:center;"><img src="'+img_url+'"></div>');
			}
			var next_url = "{{ url('/loadMonthlyPatientReminders') }}?page_type=reminders&patient_ids_str="+patient_ids_str+"&period_type="+period_type+"&category="+category+"&date_val="+date_val;
			$.ajax({
				type: "GET",
				url:  next_url,
				dataType: "json",
				success:function(json_data)
				{
					if(json_data.hasOwnProperty("status") && json_data['status']=="db_error"){
		               swal(json_data.message); return false;
		              }
					var cdata = json_data;
					$.each(cdata, function(key, value) {
						$('#filter_data_div_'+value.patient_id).html(value.reminders);
					});
					$('[data-toggle="tooltip"]').tooltip({html:true});
					$('[data-toggle="popover"]').popover();
					$('.tooltip').removeClass('show');
				}
			});
		}
		var other_date = '{{ $current_date }}';
		$('#current_date_val').val(other_date);
	}

	function get_otherdate_details(patient_ids_str,type,category,other_type,div_id){
		//var category = '{{ $category }}';
		var period_type = '{{ $period_type }}';
		var cur_dateid = $('#current_date_val').val();
		var cur_date = formatDate();
		var otherdate = nextPreDates(new Date(cur_dateid),type);
		$('#current_date_val').val(otherdate);
		if(otherdate==cur_date){
			if(other_type=='sub'){
				$('#right_arrow_'+div_id+'_'+patient_ids_str).hide();
			} else {
				$('#right_arrow_'+patient_ids_str).hide();
			}
		} else {
			if(other_type=='sub'){
				$('#right_arrow_'+div_id+'_'+patient_ids_str).show();
			} else {
				$('#right_arrow_'+patient_ids_str).show();
			}
		}
		//get_reminder_details(patient_ids_str,period_type,category,otherdate);
		var img_url = "{{ url('assets/images/ui-anim_basic_16x16.gif') }}";
		var other_date_arr = otherdate.split('-');
		var curdate_format = other_date_arr[1]+'/'+other_date_arr[2]+'/'+other_date_arr[0];
		if(other_type=='sub'){
			$('#step_indicator_'+div_id+'_'+patient_ids_str).html('<div style="text-align:center;"><img src="'+img_url+'"></div>');
			$('#date_div_'+div_id+'_'+patient_ids_str).html(curdate_format);
		} else {
			$('#step_indicator_'+patient_ids_str).html('<div style="text-align:center;"><img src="'+img_url+'"></div>');
			$('#date_div_'+patient_ids_str).html(curdate_format);
		}
		var next_url = "{{ url('/loadPatientReminders') }}?page_type=reminders&patient_ids_str="+patient_ids_str+"&period_type="+period_type+"&category="+category+"&date_val="+otherdate;
		$.ajax({
			type: "GET",
			url:  next_url,
			dataType: "json",
			success:function(json_data)
			{
				if(json_data.hasOwnProperty("status") && json_data['status']=="db_error"){
	               swal(json_data.message); return false;
	              }
				var cdata = json_data;
				$.each(cdata, function(key, value) {
					if(other_type=='sub'){
						$('#step_indicator_'+div_id+'_'+value.patient_id).html(value.reminders);
					} else {
						$('#step_indicator_'+value.patient_id).html(value.reminders);
					}
				});
				$('[data-toggle="tooltip"]').tooltip();
				$('[data-toggle="popover"]').popover();
				$('.tooltip').removeClass('show');
			}
		});
	}
	function formatDate() {
		var d = new Date(),
		month = '' + (d.getMonth() + 1),
		day = '' + d.getDate(),
		year = d.getFullYear();
		if (month.length < 2) {
			month = '0' + month;
		}
		if (day.length < 2) {
			day = '0' + day;
		}
		return [year, month, day].join('-');
	}

	function nextPreDates(date = new Date(),type) {
		const previous = new Date(date.getTime());
		if(type=='previous'){
			previous.setDate(date.getDate() - 1);
		} else {
			previous.setDate(date.getDate() + 1);
		}
		return [
			previous.getFullYear(),
			padTo2Digits(previous.getMonth() + 1),
			padTo2Digits(previous.getDate()),
		].join('-');
	}

	function padTo2Digits(num) {
		return num.toString().padStart(2, '0');
	}
	load_more_items('load');
	function load_more_items(type){
      var cur_load = $('#page_num').val();
      var page_num = parseInt(cur_load)+1;

	  var loaded_count = parseInt(page_num) * 8;
	  var total_items = '{{ $total_items_count }}';
	  var remain_count = parseInt(total_items) - parseInt(loaded_count);
	  
      var total_count = $('#total_count').val();
	  var checkedVals = $('.status_filter:checkbox:checked').map(function() {
         return this.value;
      }).get();
      var status_filter = checkedVals.join(",");
	  var period_type = $('#period_type').val();
	  var search_term = $('#search_term').val();
      var category = $('#category').val();
	  var loaded_patients_str = $('#loaded_patients').val();
	  var loaded_categories_str = $('#loaded_categories').val();
      var url = "{{ url('/loadPatientMoreReminders') }}?page_type=reminders&page_num="+page_num+"&status="+status_filter+"&period_type="+period_type+"&search_term="+search_term+"&category="+category;
      $('#loader_img').show();
      $.ajax({
         type: "GET",
         url:  url,
         dataType: "json",
         success:function(data)
         {
         	if(data.hasOwnProperty("status") && data['status']=="validation"){
               swal(data.message); return false;
              }
            $('#patients_reminders_div').append(data.compliance_str);
            $('#page_num').val(page_num);
            if(page_num>=total_count){
               $('#load_more_div').hide();
            } else {
               $('#load_more_div').show();
            }
            $('#loader_img').hide();
			if(cur_load!='0'){
				$('html, body').animate({
					scrollTop: $('#patient_row_'+data.start_patient_id).offset().top
				}, 400);
			}
            if(loaded_patients_str == ''){
				var loaded_patients_loaded = data.patient_ids;
            }else{
            	var loaded_patients_loaded = loaded_patients_str+','+data.patient_ids;
            }
			$('#loaded_patients').val(loaded_patients_loaded);

			var loaded_categories_string = loaded_categories_str+'@'+data.categories_str;
			$('#loaded_categories').val(loaded_categories_string);

            var patient_ids = data.patient_ids.split(",");
            var history_ids = data.history_ids.split(",");
			var categories_array = data.categories_str.split(",");
			if(period_type=='t'){
				var date_val = '{{ $current_date }}';
			} else {
				var date_val = '';
			}
			$('#more_items_count').html(remain_count);
            get_reminder_details(data.patient_ids,period_type,category,date_val,data.categories_str);
			$('[data-toggle="tooltip"]').tooltip();
			$('[data-toggle="popover"]').popover();
			$('.tooltip').removeClass('show');
         }
      });	
   }

   function  clear_searchtext_input(){
      $('#search_term').val('');
      get_filter_reminders('');
   }

	function get_filter_reminders(type){
		$(".tabloadershow").show();
		var search_term = $('#search_term').val();
		var category = $('#category').val();
		if(type=='search'){
			var status_filter = '';
			var period_type = $('#period_type').val();
			var category = $('#category').val();
		} else if(type=='category') {
			var checkedVals = $('.status_filter:checkbox:checked').map(function() {
				return this.value;
			}).get();
			var status_filter = checkedVals.join(",");
			var period_type = '';
		} else if(type=='period') {
			var checkedVals = $('.status_filter:checkbox:checked').map(function() {
				return this.value;
			}).get();
			var status_filter = checkedVals.join(",");
			var period_type = $('#period_type').val();
			var category = '';
		} else {
			var checkedVals = $('.status_filter:checkbox:checked').map(function() {
				return this.value;
			}).get();
			var status_filter = checkedVals.join(",");
			var period_type = $('#period_type').val();
			var category = $('#category').val();
		}
		var link_url = "{{ url('/viewPatientReminders') }}?page_type=reminders&status="+status_filter+"&period_type="+period_type+"&search_term="+search_term+"&category="+category;
		window.location.href = link_url;
	}

	function reset_filters(){
		$(".tabloadershow").show();
		var redirect_url = "{{ url('/viewPatientReminders') }}?page_type=reminders";
		window.location.href = redirect_url;
	}

   	function view_all_reminders(patient_ids_str,period_type, patient_name){
		var date_value = '{{ date("m/d/Y") }}'
		// var category = '{{ $category }}';
		// var date_val = formatDate();
		// var next_url = "{{ url('/loadMonthlyPatientReminders') }}?page_type=reminders&patient_ids_str="+patient_ids_str+"&period_type="+period_type+"&category="+category+"&date_val="+date_val;
		var img_url = "{{ url('assets/images/ui-anim_basic_16x16.gif') }}";
		$('#all_reminders_title').html('All Reminders - '+date_value+' - '+patient_name+'('+patient_ids_str+')');
		$('#all_reminders').modal('show');
		$('#all_reminders_content').html('<div id="loader_img_pop" style="text-align:center;"><img src="'+img_url+'"></div>');
		// $.ajax({
		// 	type: "GET",
		// 	url:  next_url,
		// 	dataType: "json",
		// 	success:function(json_data)
		// 	{
		// 		var cdata = json_data;
		// 		$.each(cdata, function(key, value) {
		// 			$('#all_reminders_content').html(value.reminders);
		// 		});
				
		// 	}
		// });
		var date_val = '{{ $current_date }}';
		var categories_str = 'Vitals,Medication,Appointments,Meals,Assessments';
		var categories_array = categories_str.split(',')
		for(i=0;i<categories_array.length;i++){
			var next_url = "{{ url('/loadPatientReminders') }}?page_type=reminders&patient_ids_str="+patient_ids_str+"&period_type="+period_type+"&category="+categories_array[i]+"&date_val="+date_val;
			$.ajax({
				type: "GET",
				url:  next_url,
				dataType: "json",
				success:function(json_data)
				{
					if(json_data.hasOwnProperty("status") && json_data['status']=="db_error"){
		               swal(json_data.message); return false;
		              }
					var cdata = json_data;
					$.each(cdata, function(key, value) {
						$('#all_reminders_content').append('<div class="row all_reminders_text"><div class="col-5">'+value.category+'</div><div class="col-7">'+value.reminders+'</div></div>');
					});
					$('[data-toggle="tooltip"]').tooltip({html:true});
					$('[data-toggle="popover"]').popover();
					$('.tooltip').removeClass('show');
				}
			});
		}
		$('#loader_img_pop').html('');
}

function send_reminder(patient_id, type){
	swal({
		title: 'Are you sure you want to send a reminder to patient?',
		text: "",
		type: 'warning',
		showCancelButton: true,
		confirmButtonColor: '#218838',
		cancelButtonColor: '#dc3545',
		confirmButtonText: 'Yes',
		showLoaderOnConfirm: true,
		position: 'top',
		preConfirm: function() {
			return new Promise(function(resolve) {
			$(".tabloadershow").show();
				$.ajax({
					url:  "{{ url('/sendNotificationReminder') }}?&patient_id="+patient_id+"&type="+type,
					success:function(data)
					{
					  if(data.hasOwnProperty("status") && data['status']=="validation"){
		               swal(data.message); return false;
		              }
						$(".tabloadershow").hide();
						swal("Reminder sent successfully");
						$('[data-toggle="tooltip"]').tooltip();
						$('[data-toggle="popover"]').popover();
						$('.tooltip').removeClass('show');
					},
					error:function() {
						$(".tabloadershow").hide();
						swal('Something went wrong. Please try again later.');
					}
					
				});
			});
		},
	});
}

function viewFullDetails(patient_id,patient_name,facility_id){
	$('#load_patient_detail_view').empty().html('<div class="div_loader_icon mt-40" style="padding-left:50%;height:100px"><img src="