@extends('dashboard/layout.app')
@section('title', 'BettrAi | Video Call Logs')
@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;
}
</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">Care Team Idle Time Logs</span>
				</h3>
				<div class="card-toolbar">
					<a href="{{ URL::to('dashboard/reports?report_type=General') }}" 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-4 mb-5">
						<label>Select Care Team Member:<span class="text-danger">*</span></label>
						<select name="user_ids" id="user_ids" class="form-control select notranslate" onchange="get_user_locprograms(this.value)">
							<option value="">Select Care Team Member</option>
									
						</select>
					</div>
					<div class="col-lg-4 mb-5">
						<label>Select Locations: <i class="fa fa-info-circle score_info" data-toggle="tooltip" title="" data-original-title="Select multiple Locations"></i></label><br>
						<select id="selected_location_ids" name="sel_location[]" class="form-control valid" multiple="multiple">
							<option value="">All</option>
						</select>	
					</div>	
					<div class="col-lg-4 mb-5">
						<label>Select Program:</label>
						<select class="form-control" id="selected_program" name="selected_program">                     
							<option value="">Select Program</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_idletime_logs('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_idletime_logs('export')">Export</button>
					</div>
					<!-- <div class="col-lg-1">
					</div> -->
				</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_idlelogs">
					<thead>
						<tr>
							<th style="width:18%;">Patient Name</th>
							<th>Care Team Member</th>
							<th>Program</th>	
							<th>Duration</th>
							<th>From Time</th>
							<th style="width:15%;">To Time</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");
   	$('#selected_location_ids').select2({
		placeholder: "All Locations",
		dropdownCssClass: "notranslate"
	});
//    $('#user_ids').select2({
// 		placeholder: "All Users",
// 		dropdownCssClass: "notranslate"
// 	});
});
var load_url = "{{ url('images/loading-icon.gif') }}";
//load_idletime_logs('load');
function load_idletime_logs(action_type){
	var sel_location_array = $('#selected_location_ids').val();
	var user_ids = $('#user_ids').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 selected_program = $('#selected_program').val();
	var sel_location_names = $('#selected_location_ids option:selected')
                .toArray().map(item => item.text).join();
   if (sel_location_names == '') {
      sel_location_names = 'All';
   }
   if(user_ids==''){
		swal("Please select care team member");
		return false;
   }
   var sel_location = sel_location_array.join(',');
   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_month=='' && sel_year=='' && sel_start_date=='' && sel_end_date==''){
		// $('#sel_month').val(cur_month);
		// $('#sel_year').val(cur_year);
		// display_monthyear(cur_month,cur_year);
	} else if(sel_month!='' && sel_year!=''){
		//display_monthyear(sel_month,sel_year);
	} else 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;
		}
		//display_daterange(sel_start_date,sel_end_date);
	}
	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('/dashboard/userIdleTimeLogs') }}?data_type=export&sel_location="+sel_location+"&user_ids="+user_ids+"&sel_month="+sel_month+"&sel_year="+sel_year+"&sel_start_date="+sel_start_date+"&sel_end_date="+sel_end_date+"&selected_program="+selected_program+"&datatable_search="+encodeURIComponent(dt_search)+'&sel_location_names='+sel_location_names;
		window.location.href = export_url;
	} else {
		var load_report_url = '{{ URL::to("/") }}/dashboard/userIdleTimeLogs';
		$("#kt_datatable_idlelogs").dataTable().fnDestroy();
		$('#kt_datatable_idlelogs').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,'user_ids':user_ids,
                     'sel_month':sel_month,'sel_year':sel_year, 'sel_start_date':sel_start_date,'sel_end_date':sel_end_date,
					 'selected_program':selected_program}
			},
			'columns': [
				{ data: 'patient_name' },
				{ data: 'careteam_member' },
				{ data: 'program_name' },
				{ data: 'duration' },
				{ data: 'from_time' },
				{ data: 'to_time' }
			],
			"drawCallback": function (settings) { 
				var idletime_format = settings.json.idletime_format;
				$('#total_duration_string').html('Total Idle Time : '+idletime_format);
				$('#selected_location_ids').select2({
					placeholder: "All Locations",
					dropdownCssClass: "notranslate"
				});
				$('.select').select2({
					dropdownCssClass: "notranslate"
				});
				$(".select2-selection").addClass("notranslate");
				$(".select2-container").addClass("notranslate");
			},
			'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_user_locprograms(user_id){
	var access_type = $('#user_ids option:selected').data('accesstype');
	var load_details_url = '{{ URL::to("/") }}/userLocationPrograms';
	$.ajax({
        url : load_details_url,
        type: "POST",
        data:{'_token':'{{csrf_token()}}','user_id':user_id,'access_type':access_type,'facility_id':'{{ $facility_id }}'},
        dataType: 'json',
        success: function(data){
            var locations_str = data.locations_str;
			var programs_str = data.programs_str;
            $('#selected_location_ids').html(locations_str);
			$('#selected_program').html(programs_str);
			$('#selected_location_ids').select2({
				placeholder: "All Locations",
				dropdownCssClass: "notranslate"
			});
			$('.select').select2({
				dropdownCssClass: "notranslate"
			});
			$(".select2-selection").addClass("notranslate");
			$(".select2-container").addClass("notranslate");
        }
	});
}
</script>
@endsection