@extends('reports/layout.app')
@section('title', 'BettrAi | Patient Activity Stats')
@section('content')
<style type="text/css">
.select2-container--default .select2-selection--single .select2-selection__rendered{
	font-size:12px !important;
}

</style>


					<div class="d-flex flex-column-fluid mt-14">
							<!--begin::Container-->
						<div class="container">
								<!--begin::Dashboard-->
							<div class="card card-custom">
                           
								<div class="card-header py-5">
									<h3 class="card-title align-items-start flex-column">
										<span class="card-label font-weight-bolder text-dark">Non Active/Previously enrolled</span>
									</h3>
									<div class="card-toolbar">
										<a href="{{ $back_url }}" class="btn btn-primary font-weight-bold showloader">Back</a>
									</div>
								</div>
								<div class="form-group row col-lg-12 mt-5">
									<!-- <div class="col-md-1"><label>Filter:</label></div> -->
									<div class="col-lg-2 mb-5">
										<label>Select Location:</label>
									<select class="form-control" id="selected_location" name="selected_location" onchange="changeLocations(this.value)">
				                   		<option value="">All</option>
					                 					                </select>																									
									</div>
									<div class="col-lg-2 col-md-2">
									<label>Select Period:</label>
										<select class="form-control select" id="period_type" name="period_type" onchange="dateIntervalChange(this.value)">
											<option value="">Select Period</option>
											<option  value="c">Current Month</option>
											<option  value="p">Previous Month</option>
											<option  value="q">Quarterly</option>
											<option  value="h">Half Yearly</option>
											<option  value="y">Yearly</option>
											<option  value="custom">Custom</option>
										</select>
									</div>
																		<div class="col-lg-6 col-md-6 date_range_div" style="display:none">
										<div class="row col-lg-12">
											<div class="col-lg-4 col-md-4">
											<label>From Date:</label>
												<input type="text" class="form-control date_picker"
													placeholder="From Date(MM/DD/YYYY)" name="from_date" id="from_date" data-value="{{ isset($from_date)?$from_date:'' }}"
													value="{{ isset($from_date)?$from_date:'' }}" autocomplete="off">
											</div>
											<div class=" col-lg-4 col-md-4">
												<label>To Date:</label>
												<input type="text" class="form-control date_picker"
													placeholder="To Date(MM/DD/YYYY)" name="to_date" id="to_date" data-value="{{ isset($to_date)?$to_date:'' }}"
													value="{{ isset($to_date)?$to_date:'' }}" autocomplete="off">
											</div>
											<div class="col-lg-4 col-md-4 pl-0">
												<button type="button" class="btn btn-primary mt-7" onclick="dateIntervalChange('Search')">Search</button>
												<a class="btn btn-warning mt-7" onclick="reload_page()">Reset</a>
											</div>
										</div>
									</div>
									<div class="col-lg-2">
										<!-- <button type="button" class="btn btn-primary mt-7 float-right" onclick="exportToExcel()">Export to Excel</button> -->
									</div>
								</div>
                           		<div class="card-body pt-5">
									<table class="table table-separate table-head-custom table-checkable" id="kt_datatable_active_report">
										<thead>
											<tr id="active_header">
																							</tr>
										</thead>
										<tbody>
											<tr class="throw">
											</tr>
										</tbody>
									</table>
								</div>
							</div>
						</div>
					</div>
						
<div class="modal fade" id="viewStats" tabindex="-1" role="dialog" aria-labelledby="viewStats" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered modal-xl" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title patient_stats" id="exampleModalLabel">Patient Outreach Stats</h5>
				<div style="margin-left:55%">
					<button type="button" class="btn btn-primary font-weight-bold" id="userdet_back_btn" onclick="back_get_userdetails()">Back</button>
				</div>				
				<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">												
				<div id="load_outreach_stats">
				</div>					
			</div>					
			
		</div>
	</div>
</div>
<div id="divLoadingInPopup" class="tabloadershow"></div>
<input type="hidden" name="current_user" id="current_user" value="">
<input type="hidden" name="current_username" id="current_username" value="">
<!-- <script src="{{ asset('assets/js/flatpickr.js')}}"></script> -->
<script src="{{ asset('assets/js/date-pickerJs.js')}}"></script>
<script>
$(document).ready(function() {
	$('.tabloadershow').hide();
    var load_columns_url = '{{ URL::to("/") }}/getEnrolledPatientsColumns';

    var columns = JSON.parse('null');
   console.log('columns: ',columns);
/*     var data = [];
	$.ajax({
		type : "GET",
		url : load_columns_url,
		dataType: 'json',
		success:function(columns){
			columns = result;
			console.log(columns);
			var thead = JSON.Stringify(columns);
					
			
		}
	}); */
	var load_report_url = '{{ URL::to("/") }}/nonActivePatientsList?period_type={{ $period_type }}&from_date={{ $from_date }}&to_date={{ $to_date }}&selected_location={{ $selected_location }}';
	
	$('#kt_datatable_active_report').DataTable( {
      'processing': true,
		'serverSide': true,
		'serverMethod': 'GET',
		 "columns": columns,
		oLanguage: {sProcessing: "<img src='{{ URL::to('images/loading-icon.gif') }}'>"},
		ajax: {
			url: load_report_url,
			'dataSrc': function(json) {
				  console.log("aaData: ",json.aaData);
	            return json.aaData;
	        },
	       
			/* success: function (data) {
               // data = JSON.parse(data);
               console.log(data);
               columns = data.columns;
              	 data = data.columns;
              } */
            
		},
		scrollX: true
   });
});
function back_get_userdetails(){
	$('#userdet_back_btn').hide();
	$('#current_user').val(user_id);
	view_user_details(user_id);
}

function dateIntervalChange(value){
	var selected_location = $('#selected_location').val();
	if(value == 'custom'){
		var from_date = $('#from_date').val();
		var to_date = $('#to_date').val();
		 
		$('.date_range_div').show();
		
	}else if(value == 'Search'){
		
		var from_date = $('#from_date').val();
		var to_date = $('#to_date').val();

		$('.date_range_div').show();
		var load_url = "{{ URL::to('/') }}/nonActivePatientsList?period_type="+value+"&from_date="+from_date+"&to_date="+to_date+"&selected_location="+selected_location;
		$('.tabloadershow').show();
		window.location.href=load_url
	}else{
	
		$('.date_range_div').hide();

		var load_url = "{{ URL::to('/') }}/nonActivePatientsList?period_type="+value+"&from_date=&to_date=&selected_location="+selected_location;
		$('.tabloadershow').show();
		window.location.href=load_url;		
	}
}
function changeLocations(value){

	var from_date = $('#from_date').val();
	var to_date = $('#to_date').val();
	var period_type = $('#period_type').val();
	var selected_location = $('#selected_location').val();
	
	var load_url = "{{ URL::to('/') }}/nonActivePatientsList?period_type="+period_type+"&from_date="+from_date+"&to_date="+to_date+"&selected_location="+selected_location;
	$('.tabloadershow').show();
	window.location.href=load_url;		
}
function exportToExcel(){
	
	var from_date = $('#from_date').val();
	var to_date = $('#to_date').val();
	var period_type = $('#period_type').val();
	var selected_location = $('#selected_location').val();
	
	var load_url = "{{ URL::to('/') }}/nonActivePatientsList??period_type="+period_type+"&from_date="+from_date+"&to_date="+to_date+"&selected_location="+selected_location+"&type=Export";

	$('.tabloadershow').show();
	
	window.location.href=load_url;	
	setTimeout(function (){
		$(".tabloadershow").hide();
	},2000);	
}
function reload_page(){
   $(".tabloadershow").show();
   window.location.href='{{ URL::to("/") }}/nonActivePatientsList';
}
</script>
@endsection