@extends('dashboard/layout.app')
@section('title', 'BettrAi | Video Call Logs')
@section('content')
<style type="text/css">
.select2-container--default .select2-selection--single .select2-selection__rendered{
	font-size:12px !important;
}
.btn-group, .btn-group-vertical {
	width: 100% !important;
}
.dataTables_wrapper .dataTable thead th {
    border-top: 0;
    max-width: 60px !important;
}
.dataTables_scrollHeadInner{
	width: 100% !important;
}
.dataTables_wrapper .dataTable thead th {
    border-top: 0;
    max-width: 450px !important;
}
#kt_datatable_inactive_report_wrapper .dataTables_wrapper .dataTable thead th {
    border-top: 0;
    max-width: 400px !important;
}
.assign_device{
	min-width: 300px !important;
	max-width: 400px !important;
}
</style>
<link rel="stylesheet" href="{{ asset('assets/css/bootstrap-multiselect.min.css') }}?v={{ rand(11111,99999) }}" type="text/css" />

					<div class="d-flex flex-column-fluid">
							<!--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">BettrAi H/W Device Billing Report</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="form-group row col-lg-12 mt-5">
									<!-- <div class="col-md-1"><label>Filter:</label></div> -->
									 
									<div class="col-lg-3 mb-5" style="display:none;">
										<label>Select Client:</label>
										<select class="form-control" id="selected_facility" name="selected_facility">
																					</select>																									
									</div>	
									
									<div class="col-lg-3 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-3 mb-5">
										<label>Select Program:</label>
										<select id="program_id" name="program_id[]" class="form-control" multiple="multiple" >
												<option value="" >Select</option>
										</select>
									</div>										
									<div class="col-lg-3 mb-5">
										<label>Select Month:</label>
										<select id="sel_month" name="sel_month" class="form-control">
											
																					</select>																											
									</div>
									<div class="col-lg-3 mb-5">
										<label>Select Year:</label>
										<select id="sel_year" name="sel_year" class="form-control">
																					</select>																											
									</div>
									<!-- <div class="col-lg-3 mb-5">
										<label>Select Provider:</label>
										<select id="provider_id" name="provider_id" class="form-control" >
												<option value="" >Select</option>
										</select>
									</div>
									<div class="col-lg-3 mb-5">
										<label>Patient Name:</label>
										<input type="text" id="patient_name" name="patient_name" class="form-control" placeholder="Please enter here" autocomplete="off"> 
									</div> -->
									<div class="col-lg-1 mt-8">
										<input type="button" name="search" id="search" value="Search" class="btn btn-primary">
									</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">
									<div id="datatable_div"></div>
								
									<!-- <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">Billable Patients Lists</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 src="{{ asset('assets/js/bootstrap-multiselect.min.js') }}"></script>
<script>
//	var isloaded = 0;
$(document).ready(function() {
	$('.tabloadershow').hide();
   
    var columns = JSON.parse('null');
	 console.log('columns: ',columns);
   
   $('#program_id').multiselect({
	includeSelectAllOption: true,
    nonSelectedText: 'Select Program',
   });

     setTimeout(function() {
        $('#program_id').next('.btn-group').find('button').click();
    }, 100);
	
     var data = [];
	 
	changeFacility();
	//getcolumns(0);
	//getPatientData();	
	getPatientSummaryData();
});

$("#search").click(function(){
	getPatientSummaryData();	
})
function getPatientSummaryData(){
	$('.tabloadershow').show();
	var facility_id = $("#selected_facility").val();
	var location_id = $("#selected_location").val();
	var program_id = $("#program_id").val();
	var sel_month = $("#sel_month").val();
	var sel_year = $("#sel_year").val();
	var provider_id = $("#provider_id").val();
	var patient_name = $("#patient_name").val();

	var load_report_url = '{{ URL::to("/") }}/getPatientDeviceSummaryData?selected_location='+location_id+'&facility_id='+facility_id+'&program_id='+program_id+'&sel_month='+sel_month+'&sel_year='+sel_year+'&provider_id='+provider_id+'&patient_name='+patient_name;
	console.log("load URL "+ load_report_url);
	$('#datatable_div').load(load_report_url);
	//$('#kt_datatable_active_patient_summary').DataTable();
	setTimeout(() => {
		$('.tabloadershow').hide();	
	}, 2000);
	
}
function loadBillingPatientData(location_id){

	$('.tabloadershow').show();
	var facility_id = $("#selected_facility").val();
	var location_id = location_id;
	var program_id = $("#program_id").val();
	var sel_month = $("#sel_month").val();
	var sel_year = $("#sel_year").val();
	var provider_id = $("#provider_id").val();
	var patient_name = $("#patient_name").val();

	var load_report_url = '{{ URL::to("/") }}/enrolledPatientsDeviceList?selected_location='+location_id+'&facility_id='+facility_id+'&program_id='+program_id+'&sel_month='+sel_month+'&sel_year='+sel_year+'&provider_id='+provider_id+'&patient_name='+patient_name;
	console.log("load URL "+ load_report_url);
	$('#load_outreach_stats').load(load_report_url);
	$('.tabloadershow').hide();
	$("#viewStats").modal('show');
}
function getPatientData(){
	$('.tabloadershow').show();
	var facility_id = $("#selected_facility").val();
	var location_id = $("#selected_location").val();
	var program_id = $("#program_id").val();
	var sel_month = $("#sel_month").val();
	var sel_year = $("#sel_year").val();
	var provider_id = $("#provider_id").val();
	var patient_name = $("#patient_name").val();

	var load_report_url = '{{ URL::to("/") }}/enrolledActivePatientsListAjax?selected_location='+location_id+'&facility_id='+facility_id+'&program_id='+program_id+'&sel_month='+sel_month+'&sel_year='+sel_year+'&provider_id='+provider_id+'&patient_name='+patient_name;
	console.log("load URL "+ load_report_url);
	$('#datatable_div').load(load_report_url);
	$('.tabloadershow').hide();
}
$("#selected_facility").change(function(){
	changeFacility();
});
function getcolumns(isloaded){
	var facility_id = $("#selected_facility").val();
	var load_columns_url = '{{ URL::to("/") }}/getEnrolledPatientsColumns?facility_id='+facility_id;
	$.ajax({
		type : "GET",
		url : load_columns_url,
		dataType: 'json',
		success:function(columns){
			 loadpatientdata(columns,isloaded);
		}
	});
}
function loadpatientdata(columns,isloaded){
	var facility_id = $("#selected_facility").val();
	var location_id = $("#selected_location").val();
	var program_id = $("#program_id").val();
	var sel_month = $("#sel_month").val();
	var sel_year = $("#sel_year").val();
	var provider_id = $("#provider_id").val();
	var patient_name = $("#patient_name").val();

	var load_report_url = '{{ URL::to("/") }}/enrolledActivePatientsList?selected_location='+location_id+'&facility_id='+facility_id+'&program_id='+program_id+'&sel_month='+sel_month+'&sel_year='+sel_year+'&provider_id='+provider_id+'&patient_name='+patient_name;
	console.log("load URL "+ load_report_url);
	//$('#kt_datatable_active_report').DataTable().clear().destroy();
	//if ($.fn.DataTable.isDataTable('#kt_datatable_active_report')) {
		//$('#kt_datatable_active_report').DataTable().destroy();
	//}
	//if ( $.fn.DataTable.isDataTable('#kt_datatable_active_report') ) {
	if(isloaded==1){
		$('#kt_datatable_active_report').DataTable().destroy();
	}	
	//isloaded = 1;		
	//}
	//$('#kt_datatable_active_report tbody').empty();
	//$('#kt_datatable_active_report thead').empty();
	$('#kt_datatable_active_report').DataTable( {
      'processing': true,
		'serverSide': true,
		//destroy: 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('/') }}/enrolledActivePatientsList?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('/') }}/enrolledActivePatientsList?period_type="+value+"&from_date=&to_date=&selected_location="+selected_location;
// 		$('.tabloadershow').show();
// 		window.location.href=load_url;		
// 	}
// }
$("#sel_month").change(function(){
	changeFacility();
});
function changeFacility(){
	var facility_id = $("#selected_facility").val();
	var sel_month = $("#sel_month").val();
	//$('.tabloadershow').show();
	$.ajax({
		url: "{{ URL::to('/') }}/getProgramLists?facility_id="+facility_id+'&sel_month='+sel_month,
		//data: 'query=' + query,            
		dataType: "json",
		success: function (data) {
			console.log("programe lists"+data.locations)
			console.log("programe lists"+data.porgrams)
			var selected_location =  $('#selected_location').val();
			$("#selected_location").html('');

			$('#selected_location').empty().append('<option value="">All</option>');
			$.each(data.locations, function (key, dt) {
				console.log("locaitonsssss"+dt.facility_branch_id)
				let selected = '';
				if(selected_location==dt.facility_branch_id){
					selected= 'selected="selected"';
				}
				$('#selected_location').append('<option value="'+dt.facility_branch_id+'" onchange="changeLocations('+dt.facility_branch_id+')" '+selected+'>'+dt.office_name+'</option>');
			});
			//$("#program_id").empty.html('');
			$('#program_id').multiselect('destroy');
			$('#program_id').empty().append(' ');
			$.each(data.porgrams, function (key, dt) {
				$('#program_id').append('<option value="'+dt.id+'">'+dt.service_type+'</option>');
			});
			$('#program_id').multiselect({
				includeSelectAllOption: true,
    			nonSelectedText: 'Select Program'
			});
			$(".multiselect").trigger("click");
			$("#program_id").trigger("change");
			$('.tabloadershow').hide();
		}
	});
}
$("#program_id").change(function(){
	console.log("program changes")
});

function changeLocations(value){
	//alert(value)
	var facility_id = $("#selected_facility").val();
	$('.tabloadershow').show();
	$.ajax({
		url: "{{ URL::to('/') }}/getProvidersByLocations?location_id="+value,
		//data: 'query=' + query,            
		//dataType: "json",
		success: function (data) {
			$("#provider_id").empty().append(data);
			$('.tabloadershow').hide();
		}
	});
	
	// 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('/') }}/enrolledActivePatientsList?period_type="+period_type+"&from_date="+from_date+"&to_date="+to_date+"&selected_location="+selected_location;
	// $('.tabloadershow').show();
	// window.location.href=load_url;		
}

function reload_page(){
   $(".tabloadershow").show();
   window.location.href='{{ URL::to("/") }}/enrolledActivePatientsList';
}
</script>
@endsection