@extends('dashboard/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;
}
#divLoadingInPopup.tabloadershow {
   display: none;
   position: fixed;
   z-index: 100;
   background-image: url(../images/loading-icon.gif);
   opacity: 0.4;
   left: 0px;
   bottom: 0px;
   right: 0px;
   top: 50px;
   background-repeat: no-repeat;
   background-position: center center;
}
</style>
<link href="{{ asset('/css/flatpickr.min.css')}}" rel="stylesheet" type="text/css" />

					<div class="d-flex flex-column-fluid mt-1">
							<!--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">Patient Outreach Stats</span>
									</h3>
									<div class="card-toolbar">
										<a href="{{ $back_url }}" class="btn btn-light-primary font-weight-bold showloader">Back</a>
									</div>
								</div>
								<div class="row">
									<div class="col-md-1">
										<label class="mt-2 pl-2 font-weight-bolder">Filter By:</label>
									</div>
									<div class="col-md-2">
										<select class="form-control select" id="period_type" name="period_type" onchange="get_filtered_logs('change')">
											<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>
										</select>
									</div>
									<div class="col-md-2">
										<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-md-2">
										<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-md-1 pl-0">
										<button type="button" class="btn btn-primary" onclick="get_filtered_logs('click')">Search</button>
									</div>
								</div>
                           		<div class="card-body pt-5">
									<table class="table table-separate table-head-custom table-checkable" id="kt_datatable_report">
										<thead>
											<tr>
												<th>User Name</th>
												<th>Programs</th>
												<th>Phone Calls</th>
												<th>Video Chats</th>
												<th>Appointments Set</th>
												<th>Appointments Met</th>
												<th data-orderable="false">Actions</th>
											</tr>
										</thead>
										<tbody>
											<tr class="throw">
											</tr>
										</tbody>
									</table>
								</div>
							</div>
						</div>
					</div>
						<!--end::Entry-->
				
<div class="modal fade" id="viewStats" tabindex="-1" role="dialog" aria-labelledby="viewStats" aria-hidden="true" style="padding-left:65px !important;">
	<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 col-lg-10" id="exampleModalLabel" style="text-align:left !important;">Patient Outreach Stats</h5>
				<div style="position: relative;/*right: -25% !important;*/" class="col-lg-1">
					<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() {
	var load_report_url = '{{ URL::to("/") }}/dashboard/patientOutreachStats?period_type={{ $period_type }}&from_date={{ $from_date }}&to_date={{ $to_date }}';
	$('#kt_datatable_report').DataTable( {
      'processing': true,
		'serverSide': true,
		'serverMethod': 'GET',
		oLanguage: {sProcessing: "<img src='{{ URL::to('images/loading-icon.gif') }}'>"},
		ajax: {
			url: load_report_url,
		},
		'columns': [
			{ data: 'username' },
			{ data: 'programs' },
			{ data: 'phone_calls' },
			{ data: 'video_chats' },
			{ data: 'total_appointments' },
			{ data: 'completed_appointments' },
			{ data: 'action_str' }
		]
   });
});

function view_user_details(user_id){
	var progress_url = "{{ url('/loadUserStats') }}?user_id="+user_id;
	$('#current_user').val(user_id);
	$('#userdet_back_btn').hide();
	$('#load_outreach_stats').html("<div style='text-align:center'><img src='{{ URL::to('images/loading-icon.gif') }}'></div>");
	$('#load_outreach_stats').load(progress_url);
	$('#exampleModalLabel').html('Patient Outreach Stats');
	$('#viewStats').modal('show');
}

function get_details(user_id,activity_type){
	$('#current_user').val(user_id);
	var label_name = 'Programs';
	if(activity_type==0){
		var progress_url = "{{ url('/loadUserProgramDetails') }}?user_id="+user_id;
		var label_name = 'Programs';
	} else if(activity_type==1){
		var progress_url = "{{ url('/loadUserPhoneCalls') }}?user_id="+user_id;
		var label_name = 'Phone Calls';
	} else if(activity_type==2){
		var progress_url = "{{ url('/loadUserVideoChats') }}?user_id="+user_id;
		var label_name = 'Video Chats';
	} else if(activity_type==3){
		var progress_url = "{{ url('/loadUserAppointments') }}?user_id="+user_id+"&type=total";
		var label_name = 'Appointments Scheduled';
	} else {
		var progress_url = "{{ url('/loadUserAppointments') }}?user_id="+user_id+"&type=comp";
		var label_name = 'Appointments Completed';
	}
	$('#load_outreach_stats').html("<div style='text-align:center'><img src='{{ URL::to('images/loading-icon.gif') }}'></div>");
	$('#userdet_back_btn').show();
	$('#exampleModalLabel').html('Patient Outreach Stats - '+label_name);
	$('#load_outreach_stats').load(progress_url);
}

function back_get_userdetails(){
	$('#userdet_back_btn').hide();
	$('#current_user').val(user_id);
	view_user_details(user_id);
}
function get_filtered_logs(action){
	if(action=='click'){
		var period_type = '';
		var from_date = $('#from_date').val();
		var to_date = $('#to_date').val(); 
	} else {
		var period_type = $('#period_type').val();
		var from_date = '';
		var to_date = ''; 
	}
	if(from_date!='' && to_date!=''){
		var load_url = "{{ URL::to('/') }}/dashboard/patientOutreachStats?period_type=&from_date="+from_date+"&to_date="+to_date;
	} else if(period_type!='' && (from_date=='' || to_date=='')){
		var load_url = "{{ URL::to('/') }}/dashboard/patientOutreachStats?period_type="+period_type+"&from_date=&to_date=";
	} else {
		var load_url = "{{ URL::to('/') }}/dashboard/patientOutreachStats?period_type=&from_date=&to_date=";
	}
	$('.tabloadershow').show();
	window.location.href=load_url;
}
</script>
@endsection