@extends('dashboard/layout.app')
@section('title', 'BettrAi | Billable Report Telehealth Visit')
@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>
<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">Billable Report Telehealth Visit</span>
				</h3>
				<div class="card-toolbar">
					<a href="{{ URL::to('dashboard/reports') }}?report_type=Billing" class="btn btn-light-primary font-weight-bold showloader">Back</a>
				</div>
			</div>
			<div class="card-body pt-5">
				<div class="row form-group mb-3">
					<div class="col-md-3">
						<select class="form-control select filter_input" id="filter_user_id" name="filter_user_id" onchange="load_telehealth_notes('change');">
							<option value="">All Users</option>	
							@foreach($notes_filter as $notes_fil)
								@if($notes_fil->addedby_id!='' && !in_array($notes_fil->addedby_id,$notes_filter_array))
																		<option value="{{ $notes_fil->addedby_id }}">{{ $user_fullname }}</option>	
								@endif
															@endforeach								                  
						</select>
					</div>	
					<div class="col-md-2">
						<select class="form-control filter_input" id="period_type" name="period_type" onchange="load_telehealth_notes('change')">
							<option value="">Select Interval</option> 
							<option value="6">1 week</option>	
							<option value="9">10 Days</option>
							<option value="14">15 Days</option>
						</select>
					</div>

					<div class="col-md-2">
						<input type="text" class="form-control date_picker filter_input" placeholder="MM/DD/YYYY" name="from_date" id="from_date"
							value="" autocomplete="off">
					</div>
					<div class="col-md-2">
						<input type="text" class="form-control date_picker filter_input" placeholder="MM/DD/YYYY" name="to_date" id="to_date"
							value="" autocomplete="off">
					</div>
					<div class="col-md-3">
						<button type="button" onclick="load_telehealth_notes('search');" class="mr-2 btn btn-primary">Search</button>
						<button type="button" class="mr-2 btn btn-light-warning font-weight-bold" onclick="reset_telenotes()">Reset</button>
						<button type="button" class="mr-2 btn btn-light-success font-weight-bold" onclick="load_telehealth_notes('export')">Export</button>
					</div>  
				</div>
				<table class="table table-separate table-head-custom table-checkable" id="kt_datatable_telenotes">
					<thead>
						<tr>
							<th>Patient Name</th>
							<th>Telehealth Visit Date</th>
							<th>Total Minutes</th>	
							<th style="width:30% !important;">Activity Type</th>
							<th style="width:20% !important;">Added By</th>								
						</tr>
					</thead>
					<tbody>
					</tbody>
				</table>
			</div>
		</div>
	</div>
</div>

<div id="divLoadingInPopup" class="tabloadershow"></div>
<script src="{{ asset('assets/js/date-pickerJs.js')}}"></script>
<script>
load_telehealth_notes('load');
function load_telehealth_notes(action_type){
	if(action_type=='search'){
		$('#period_type').val('');
		var period_type = '';
	}
	var filter_user_id = $('#filter_user_id').val();
	var period_type = $('#period_type').val();
	var from_date = $('#from_date').val();
	var to_date = $('#to_date').val();
	if(period_type!=''){
		$('#from_date').val('');
		$('#to_date').val('');
		var from_date = '';
		var to_date = '';
	} else {
		if((from_date!='' && to_date=='') || (to_date!='' && from_date=='')){
			swal("Please select start date and end date");
			return false;
		}
		if(from_date!='' && to_date!=''){
			var sel_start_date_comp = new Date(from_date);
			var sel_end_date_comp = new Date(to_date);
			if(sel_start_date_comp>sel_end_date_comp){
				swal("End date should be greater than start date");
				return false;
			}
		}
	}
	if(action_type=='export'){
		var datatable_search = $('#kt_datatable_telenotes_filter').find('input').val();
		var export_load_url = '{{ URL::to("/") }}/billableTelehealth?filter_user_id='+filter_user_id+'&period_type='+period_type+'&from_date='+from_date+'&to_date='+to_date+'&action_type=export&datatable_search='+encodeURIComponent(datatable_search);
		window.location.href = export_load_url;
	} else {
		var load_report_url = '{{ URL::to("/") }}/billableTelehealth';
		$("#kt_datatable_telenotes").dataTable().fnDestroy();
		$('#kt_datatable_telenotes').DataTable({
			'processing': true,
			'serverSide': true,
			oLanguage: {sProcessing: "<img src='{{ URL::to('images/loading-icon.gif') }}'>"},
			ajax: {
				url: load_report_url,
				type: 'POST',
				data: {'_token':'{{csrf_token()}}','filter_user_id':filter_user_id,'period_type':period_type,
					'from_date':from_date,'to_date':to_date }
			},
			'columns': [
				{ data: 'patient_name' },
				{ data: 'visit_date' },
				{ data: 'total_minutes' },
				{ data: 'activity_type' },
				{ data: 'username' }
			],
			'aaSorting': []
		});
	}
}

function reset_telenotes(){
	$('.filter_input').val('');
    $('#filter_user_id').val('').trigger('change');
	load_telehealth_notes('load');
}
</script>
@endsection