@extends('dashboard/layout.app')
@section('title', 'BettrAi | Care Team Vital Signs QA Report')
@section('content')
<link rel="stylesheet" href="{{ url('/assets/css/bootstrap-multiselect.min.css') }}?v={{ rand(11111,99999) }}" type="text/css" />
<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;
}
.select2-container--default 
.select2-selection--multiple 
.select2-selection__rendered 
.select2-selection__choice 
.select2-selection__choice__remove {
   font-size: 18px;
   display: inline-block;
   line-height: 0;
   margin-right: 0.5rem;
   position: relative;
   margin-top: 5px;
}
.row_heading{
	font-weight: bold;
	border: 1px solid #ECF0F3;
}
.heading_col{
	padding: 0px 3px 0px 3px;
	border-top: 1px solid #ECF0F3;
	border-left: 1px solid #ECF0F3;
	border-right: 1px solid #ECF0F3;
	text-align: center;
}
.data_row{
	border: 1px solid #ECF0F3;
	margin-right: 12px;
}
.heading_col_prog{
	text-align: center !important;
  	font-weight: bolder;
}
.date_filter_div_month{
	background: #ddd;
	border-radius: 10px 0px 0px 10px;
	padding: 10px 5px;
	max-height: 85px;
}
.date_filter_div_year{
	background: #ddd;
	border-radius: 0px 10px 10px 0px;
	padding: 10px 5px;
	max-height: 85px;
}
.period_wise_div_start{
	background: #ddd;
	border-radius: 10px 0px 0px 10px;
	padding: 10px 5px;
	max-height: 90px;
}
.period_wise_div_end{
	background: #ddd;
	border-radius: 0px 10px 10px 0px;
	padding: 10px 5px;
	max-height: 90px;
}
.divider_text{
	margin: 3% 1%;
	font-weight: 450;
}
</style>
<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">Care Team Vital Signs QA Report</span>
				</h3>
				<div class="card-toolbar">
					<a href="{{ URL::to('dashboard/reports') }}" class="btn btn-light-primary font-weight-bold showloader">Back</a>
				</div>
			</div>
			<div class="card-body pt-5">
				<div class="form-group row filter_div">
					<div class="col-lg-6 mb-5">
						<label>Select Locations:<span class="text-danger">*</span></label><br>
						<select id="sel_location" name="sel_location" class="form-control select notranslate" onchange="get_location_users(this.value)">
							<option value="">All</option>
													</select>	
					</div>
					<div class="col-lg-6 mb-5">
						<label>Select Care Team Member:<span class="text-danger">*</span></label>
						<select name="care_team_id" id="care_team_id" class="form-control select notranslate">
							<option value="">Select Care Team Member</option>
								
						</select>
					</div>
					<div class="col-lg-2 mb-5 date_filter_div_month">
						<label>Select Month:</label>
						<select id="sel_month" name="sel_month" class="form-control" onchange="checkyearmonthchange()">
							<option value="">-Select-</option>
													</select>																											
					</div>	
					<div class="col-lg-2 mb-5 date_filter_div_year">
						<label>Select Year:</label>
						<select id="sel_year" name="sel_year" class="form-control" onchange="checkyearmonthchange()">
							<option value="">-Select-</option>
													</select>																											
					</div>	
					<div class="col-lg-1 mt-10">
						<span class="divider_text">(OR)</span>
					</div>
					<div class="col-lg-2 mb-6 period_wise_div_start">
						<label>Start Date:</label>
						<input type="text" class="form-control date_picker" name="sel_start_date" id="sel_start_date" value="" onchange="checkdateschange()" placeholder="MM/DD/YYYY">																											
					</div>	
					<div class="col-lg-2 mb-6 period_wise_div_end">
						<label>End Date:</label>
						<input type="text" class="form-control date_picker" name="sel_end_date" id="sel_end_date" value="" onchange="checkdateschange()" placeholder="MM/DD/YYYY">																											
					</div>
					<div class="col-lg-3 text-center mt-7">
						<button type="button" class="ml-2 mb-2 btn btn-light-primary font-weight-bold" onclick="load_vsreport_details('search');">Search</button>
						<button type="button" class="ml-2 mb-2 btn btn-light-warning font-weight-bold" onclick="resetForm()">Reset</button>
						<button type="button" class="ml-2 mb-2 btn btn-light-success font-weight-bold" onclick="load_vsreport_details('export')">Export</button>
					</div>
					<!-- <div class="col-lg-1">
					</div> -->
				</div>
				<div class="col-lg-12 col-md-12 col-sm-12 mb-4">
					<label class=""><b>Note:</b> Please apply filters to get the data.</label>
				</div>
				<div class="row">
					<div class="col-lg-4"></div>
					<div class="col-lg-4 font-weight-bolder text-left" id="total_duration_string"></div>
					<div class="col-lg-4"></div>
				</div>
				<table class="table table-separate table-head-custom table-checkable" id="kt_datatable_vsqareport">
					<thead>
						<tr>
							<th style="width:18%;">Location</th>
							<th>Patient Name (UID)</th>
							<th style="min-width:30% !important;">Programs and Qualified Program Codes</th>	
							<th>Days VS Reported</th>
							<th>Number of VS Reported</th>
							<th>Number of VS Unreviewed</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 src="{{ url('/assets/js/bootstrap-multiselect.min.js') }}"></script>
<script>
var cur_month = '{{ $cur_month }}';
var cur_year = '{{ $cur_year }}';
$(document).ready(function() {
	$('.select').select2({
		dropdownCssClass: "notranslate"
	});
	$(".select2-selection").addClass("notranslate");
	$(".select2-container").addClass("notranslate");
});
var load_url = "{{ url('images/loading-icon.gif') }}";
//load_idletime_logs('load');
function load_vsreport_details(action_type){
	var sel_location = $('#sel_location').val();
	var care_team_id = $('#care_team_id').val();
	var sel_month = $('#sel_month').val();
	var sel_year = $('#sel_year').val();
	var sel_start_date = $('#sel_start_date').val();
	var sel_end_date = $('#sel_end_date').val();
	var location_text = $('#sel_location option:selected').text();
	var careteam_text = $('#care_team_id option:selected').text();
	if(care_team_id==''){
		swal("Please select care team member");
		return false;
	}
   if((sel_month!='' && sel_year=='') || (sel_month=='' && sel_year!='')){
		swal("Please select month and year");
		return false;
	}
	if((sel_start_date!='' && sel_end_date=='') || (sel_start_date=='' && sel_end_date!='')){
		swal("Please select start and end dates");
		return false;
	}
	if(sel_start_date!='' && sel_end_date!=''){
		var sel_start_date_comp = new Date(sel_start_date);
		var sel_end_date_comp = new Date(sel_end_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 = $('input[type="search"]').val();
		// if(datatable_search === null){
		// 	var dt_search = '';
		// } else {
		// 	var dt_search = datatable_search;
		// }
		$('.tabloadershow').show();
		setTimeout(() => {
			$('.tabloadershow').hide();
         swal({position: 'top',type: 'success',title: "Download is in progress, it may take few seconds, please check in downloads after some time!"});
		}, 3500);
		var export_url = "{{ url('/careteamVitalsignReport') }}?data_type=export&sel_location="+sel_location+"&care_team_id="+care_team_id+"&sel_month="+sel_month+"&sel_year="+sel_year+"&sel_start_date="+sel_start_date+"&sel_end_date="+sel_end_date+"&location_text="+encodeURIComponent(location_text)+"&careteam_text="+encodeURIComponent(careteam_text)+"&datatable_search=";
		window.location.href = export_url;
	} else {
		var load_report_url = '{{ URL::to("/") }}/careteamVitalsignReport';
		$("#kt_datatable_vsqareport").dataTable().fnDestroy();
		$('#kt_datatable_vsqareport').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()}}', 'sel_location':sel_location,'care_team_id':care_team_id,
                     'sel_month':sel_month,'sel_year':sel_year, 'sel_start_date':sel_start_date,'sel_end_date':sel_end_date}
			},
			'columns': [
				{ data: 'location_name' },
				{ data: 'patient_name' },
				{ data: 'program_details' },
				{ data: 'days_reported' },
				{ data: 'vitals_reported' },
				{ data: 'vitals_unreviewed' }
			],
			'columnDefs': [ {
				'targets': [2], /* column index */
				'orderable': false, /* true or false */
			}],
			'aaSorting': []
		});
	}
}
function checkyearmonthchange(){
	var sel_month = $('#sel_month').val();
	var sel_year = $('#sel_year').val();
	if(sel_month!='' || sel_year!=''){
		$('#sel_start_date').val('');
		$('#sel_end_date').val('');
	}
	if(sel_month!='' && sel_year==''){
		$('#sel_year').val(cur_year);
	}
	if(sel_month=='' && sel_year!=''){
		$('#sel_month').val(cur_month);
	}
}
function checkdateschange(){
	var sel_start_date = $('#sel_start_date').val();
	var sel_end_date = $('#sel_end_date').val();
	if(sel_start_date!='' || sel_end_date!=''){
		$('#sel_month').val('');
		$('#sel_year').val('');
	}
}
function resetForm(){
   $(".tabloadershow").show();
   location.reload(true);
}

function get_location_users(location_id){
	var load_details_url = '{{ URL::to("/") }}/getLocationUsers';
	$.ajax({
        url : load_details_url,
        type: "POST",
        data:{'_token':'{{csrf_token()}}','location_id':location_id},
        success: function(data){
			$('#care_team_id').html(data);
			$('.select').select2({
				dropdownCssClass: "notranslate"
			});
			$(".select2-selection").addClass("notranslate");
			$(".select2-container").addClass("notranslate");
        }
	});
}
</script>
@endsection