@extends('monitoring/layout.app')
@section('title', 'BettrAi | Patient Engagement- Monitoring Hub')
@section('content')

<style type="text/css">
.filter_ddl{
   padding: 0.55rem 0.1rem !important;
}
.category_ddl{
   padding-left: 7px !important;
   padding-right: 1px !important;
}
/* .card.card-custom > .card-body{
   padding: 1rem 0.5rem !important;
} */

.gutter-b {
  margin-bottom: 6px !important;
}
.checkbox-inline{
   margin-top: 8px !important;
}
.checkbox{
   margin-right: 5px !important;
}
.search_term_input{
  /* font-size: 12px !important; */
  padding: 0.65rem 0.3rem !important;
}
.menu_link_icon{
	margin-left: 5px !important;
}
.flaticon_chat{
	margin-top: 4px !important;
}
.symbol.symbol-lg-75 > img {
	width: 75px;
	height: 75px;
}
.highcharts-tooltip{
   z-index: 9999999 !important;
}
.clear_search_input{
   cursor: pointer;
   margin: 8px;
}
.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;
}
.select_graph{
   background: #F3F6F9;
   border: 1px solid #F3F6F9;
   border-radius: 5px;
}
</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;
}
.highcharts-root text{
   font-family: Poppins, Helvetica, "sans-serif" !important;
   color: #464E5F !important;
   font-size: 1rem !important;
   fill: #464E5F !important;
}
</style>
<style>
	/* .typeahead { 
      border: 2px solid #FFF;
      border-radius: 4px;padding: 8px 12px;max-width: 300px;min-width: 200px;background: #fff;color: #464E5F;}
	.tt-menu { width:300px; }
	ul.typeahead{margin:0px;padding:10px 0px;}
	ul.typeahead.dropdown-menu li a {padding: 5px 10px !important;	border-bottom:#CCC 1px solid;color:#464E5F;}
	ul.typeahead.dropdown-menu li:last-child a { border-bottom:0px !important; }
	.bgcolor {max-width: 550px;min-width: 290px;max-height:340px;background:url("world-contries.jpg") no-repeat center center;padding: 100px 10px 130px;border-radius:4px;text-align:center;margin:10px;}
	.demo-label {font-size:1.5em;color: #686868;font-weight: 500;color:#FFF;}
	.dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover {
		text-decoration: none;
		background-color: #7337EE;
      color: #FFF;
		outline: 0;
	} */
	</style>	
<div class="card card-custom rounded-top-0 bg-light-warning">
   <div class="card-header pt-3 pb-3 bg-white">
      <div class="col-lg-6 float-left">
         <div class="col-lg-6 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_compliance()">Overdue
               <span></span></label>
               <label class="checkbox">
               <input type="checkbox" class="status_filter"  value="slow" onchange="get_filter_compliance()">Slow
               <span></span></label>
               <label class="checkbox">
               <input type="checkbox" class="status_filter"  value="on" onchange="get_filter_compliance()">On-track
               <span></span></label>
            </div>
         </div>
         <div class="col-lg-3 float-left mb-3">
            <div class="input-group">
               <select name="year" id="year" class="form-control form-control-solid filter_input filter_ddl" onchange="get_filter_compliance()">
                  <!-- <option value="">Select Year</option> -->
                  @for($i=0;$i<=2;$i++)
                                          <option  value="{{ $date_val }}">{{ $date_val }}</option>
                  @endfor
               </select>
            </div>
         </div>
         <div class="col-lg-3 float-right mb-3">
            <div class="input-group">
               <select name="month" id="month" class="form-control form-control-solid filter_input filter_ddl" onchange="get_filter_compliance()">
                  <!-- <option value="">Select Month</option> -->
                                    @for($i=1;$i<=$max_month;$i++)
                                          <option  value="{{ $month_val }}">{{ date('F', mktime(0, 0, 0, $i, 10)) }}</option>
                  @endfor
               </select>
            </div>
         </div>
      </div>
      <div class="col-lg-6 float-right">
         <div class="col-lg-4 float-left mb-3">
            <div class="input-group input-group-solid">
               <input type="text" class="form-control filter_input search_term_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-3 float-left category_ddl mb-3">
            <div class="input-group">
               <select name="category" id="category" class="form-control form-control-solid filter_input filter_ddl" onchange="display_subfilter(this.value)">
                  <option value="">Select Category</option>
                  <option  value="age">Age</option>
                  <option  value="pop">Population</option>
                  <option  value="cpt">Service</option>
               </select>
            </div>
         </div>
         <div class="col-lg-3 float-left mb-3">
            @if($category=='age')
               <div class="input-group" id="age_filter_div">
            @else 
               <div class="input-group" id="age_filter_div" style="display:none;">
            @endif
                  <select name="age_value" id="age_value" class="form-control form-control-solid filter_input" onchange="get_filter_compliance()">
                     <option value="">Select</option>
                     <option  value="0-40">0-40</option>
                     <option  value="41-50">41-50</option>
                     <option  value="51-60">51-60</option>
                     <option  value="61-70">61-70</option>
                     <option  value="71-80">71-80</option>
                     <option  value="81-100">81-100</option>
                  </select>
               </div>
            @if($category=='pop')
               <div class="input-group" id="popu_filter_div">
            @else 
               <div class="input-group" id="popu_filter_div" style="display:none;">
            @endif
               <select name="population_id" id="population_id" class="form-control form-control-solid filter_input" onchange="get_filter_compliance()">
                  <option value="">Select</option>
                  @foreach($population_masters as $population_mas)
                     <option selected="selected" value="{{ $population_mas['population_id'] }}">{{ $population_mas['name'] }}</option>
                  @endforeach
               </select>
            </div>

            
            @if($category=='cpt')
               <div class="input-group" id="servicetype_filter_div">
            @else 
               <div class="input-group" id="servicetype_filter_div" style="display:none;">
            @endif
               <select name="cpt_service_type_id" id="cpt_service_type_id" class="form-control form-control-solid filter_input" onchange="get_filter_compliance()">
                  <option value="">Select</option>
                  @foreach($cpt_service_types as $cpt_service_type)
                     <option selected="selected" value="{{ $cpt_service_type['cpt_service_type_id'] }}">{{ $cpt_service_type['cpt_progress'] }}</option>
                  @endforeach
               </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-1">
         <div class="col-xl-12 col-xxl-11">
            <!--row 1 -->
            <div class="row" id="patients_compliance_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 fade" id="exampleModalSizeSm" tabindex="-1" role="dialog" aria-labelledby="exampleModalSizeSm" aria-hidden="true">
   <div class="modal-dialog modal-dialog-top modal-xl" role="document">
      <div class="modal-content">
         <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel_detail">Patient Reimbursement Detail</h5>
            <div style="margin-right: -3%;"><strong>Select Program:</strong></div>
            <select class="form-control" name="detailed_servicetype_id" id="detailed_servicetype_id" required onchange="getServiceTypeDetails(this.value)" style="width: 35%;">
            </select>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
               <i aria-hidden="true" class="ki ki-close"></i>
            </button>
         </div>
         <div class="modal-body" id="details_modal_popup">	
         </div>
      </div>
   </div>
</div>
<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="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_pcp" name="text_message_pcp" 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 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 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" data-placement="right" 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 id="divLoading" class="tabloadershow"></div>
<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="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()}}">

<input type="hidden" name="detailed_patient_id" id="detailed_patient_id" value="">
<input type="hidden" name="detailed_patient_name" id="detailed_patient_name" value="">
<input type="hidden" name="detailed_from_date" id="detailed_from_date" value="">
<input type="hidden" name="detailed_to_date" id="detailed_to_date" value="">
<input type="hidden" name="detailed_qualified_codes" id="detailed_qualified_codes" value="">

<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') }}?v={{ rand(11111,99999) }}"></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
		}
	});
   $('#page_num').val(0);
    $(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_compliance();
      //          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=compliance&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_compliance();
         }
      });
      // $(".dropdown-menu").on( "click", "li", function() {
      //    alert("here it is");
      //    get_filter_compliance();
      // });
   });
   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 year = $('#year').val();
      var month = $('#month').val();
      var search_term = $('#search_term').val();
      var category = $('#category').val();
      var age_value = $('#age_value').val();
      var population_id = $('#population_id').val();
      var cpt_service_type_id = $('#cpt_service_type_id').val();
      var url = "{{ url('/loadPatientCompliance') }}?page_type=compliance&page_num="+page_num+"&status="+status_filter+"&year="+year+"&month="+month+"&search_term="+search_term+"&category="+category+"&age_value="+age_value+"&population_id="+population_id+"&cpt_service_type_id="+cpt_service_type_id;
      $('#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_compliance_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);
            }
            var patient_ids = data.patient_ids.split(",");
            var history_ids = data.history_ids.split(",");
            $('#more_items_count').html(remain_count);
            for(var i=0; i < patient_ids.length; i++){
               get_monthly_graph(patient_ids[i],history_ids[i],'');
            }
            $('[data-toggle="tooltip"]').tooltip();
				$('[data-toggle="popover"]').popover();
         }
      });
   }

   function display_subfilter(category){
      $('#search_term').val('');
      $('#age_value').val('');
      $('#population_id').val('');
      $('#cpt_service_type_id').val('');
      if(category!=''){
         if(category=='age'){
            $('#age_filter_div').show();
            $('#popu_filter_div').hide();
            $('#servicetype_filter_div').hide();
         } else if(category=='pop'){
            $('#age_filter_div').hide();
            $('#popu_filter_div').show();
            $('#servicetype_filter_div').hide();
         } else {
            $('#age_filter_div').hide();
            $('#popu_filter_div').hide();
            $('#servicetype_filter_div').show();
         }
      } else {
         $('#age_filter_div').hide();
         $('#popu_filter_div').hide();
         $('#servicetype_filter_div').hide();
      }
   }

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

   function get_filter_compliance(){
      $(".tabloadershow").show();
      var search_term = $('#search_term').val();
      if(search_term==''){
         var checkedVals = $('.status_filter:checkbox:checked').map(function() {
            return this.value;
         }).get();
         var status_filter = checkedVals.join(",");
      } else {
         var status_filter = '';
      }
      var year = $('#year').val();
      var month = $('#month').val();
      var category = $('#category').val();
      var age_value = $('#age_value').val();
      var population_id = $('#population_id').val();
      var cpt_service_type_id = $('#cpt_service_type_id').val();
      if((year!='' && month=='') || (year=='' && month!='')){
         swal("Please select year and month");
         return false;
      }
      var redirect_url = "{{ url('/viewPatientCompliance') }}?page_type=compliance&page_num=1&status="+status_filter+"&year="+year+"&month="+month+"&search_term="+search_term+"&category="+category+"&age_value="+age_value+"&population_id="+population_id+"&cpt_service_type_id="+cpt_service_type_id;
      window.location.href = redirect_url;
   }

   function load_initial_graphs(){
      // var patient_ids_str = '';
      // var history_ids_str = '';
      // var patient_ids = patient_ids_str.split(",");
      // var history_ids = history_ids_str.split(",");
      // for(var i=0; i < patient_ids.length; i++){
      //    get_monthly_graph(patient_ids[i],history_ids[i],'');
      // }
   }

   function get_monthly_graph(patient_id,history_id,period_type){
      var img_url = "{{ url('assets/images/ui-anim_basic_16x16.gif') }}";
      $('#kt_mixed_widget_'+patient_id).html('<div style="text-align:center;"><img src="'+img_url+'"></div>');
      var progress_url = "{{ url('/loadPatientCptprogress') }}";
      //if(period_type==''){
         var from_date = '{{ $from_date }}';
         var to_date = '{{ $to_date }}';
      // } else {
      //    var from_date = '';
      //    var to_date = '';
      // }
      var load_bar_url = progress_url+'?patient_id='+patient_id+'&history_id='+history_id+'&from_date='+from_date+'&to_date='+to_date+'&period_type='+period_type;
	   $('#kt_mixed_widget_'+patient_id).load(load_bar_url);
   }
   function view_patient_compliance(patient_id,patient_name,from_date,to_date,qualified_codes){
		$('#detailed_patient_id').val(patient_id);
		$('#detailed_patient_name').val(patient_name);
		$('#detailed_from_date').val(from_date);
		$('#detailed_to_date').val(to_date);
		$('#detailed_qualified_codes').val(qualified_codes);
		$('#exampleModalSizeSm').modal('show');
		$.ajax({
    		type: "GET",
    		url: "{{ url('/addPatientTimeLog') }}?patient_id="+patient_id+"&type=monitoring",
    		success:function(data)
    		{
            if(data.hasOwnProperty("status") && data['status']=="validation"){
               swal(data.message); return false;
              }
    			data = jQuery.parseJSON(data);
    			console.log('data: ',data);
    			//$('#service_type').html(data.service_types);
    			$('#detailed_servicetype_id').html(data.patient_service_type);
				var default_service_type = data.default_service_type;
				var img_url = "{{ url('assets/images/ui-anim_basic_16x16.gif') }}";
				$('#details_modal_popup').html('<div style="text-align:center;"><img src="'+img_url+'"></div>');
				$('#exampleModalLabel_detail').html('Patient Reimbursement Detail - '+patient_name);
				var link_url = "{{ url('/viewPatientReimbursement') }}?patient_id="+patient_id+"&default_service_type="+default_service_type+"&from_date="+from_date+"&to_date="+to_date+"&qualified_codes="+qualified_codes;
				$('#details_modal_popup').load(link_url);
    		}
    	});
	}

   function getServiceTypeDetails(default_service_type){
		var patient_id = $('#detailed_patient_id').val();
		var patient_name = $('#detailed_patient_name').val();
		var from_date = $('#detailed_from_date').val();
		var to_date = $('#detailed_to_date').val();
		var qualified_codes = $('#detailed_qualified_codes').val();
		var img_url = "{{ url('assets/images/ui-anim_basic_16x16.gif') }}";
		$('#details_modal_popup').html('<div style="text-align:center;"><img src="'+img_url+'"></div>');
		$('#exampleModalLabel_detail').html('Patient Reimbursement Detail - '+patient_name);
		var link_url = "{{ url('/viewPatientReimbursement') }}?patient_id="+patient_id+"&default_service_type="+default_service_type+"&from_date="+from_date+"&to_date="+to_date+"&qualified_codes="+qualified_codes;
		$('#details_modal_popup').load(link_url);
		//$('#exampleModalSizeSm').modal('show');
	}

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

   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="