@extends('dashboard/layout.app')
@section('title', 'BettrAi | Sophie Audit 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;
}
pre {
    white-space: pre-wrap; /* Wrap text if long */
    word-break: break-word;
    font-family: monospace;
    padding: 10px;
    border-radius: 8px;
}
.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;
}
#kt_datatable_sophie_wrapper .dataTable td {
    /*padding: 5px 5px !important;*/
    padding-left: 10px !important;
}
#kt_datatable_sophie_wrapper .dataTable td:last-child {
    padding-right: 0 !important;
    text-align: left !important;
}
</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">Sophie AI Audit 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 Locations:</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-3 mb-5 date_filter_div_month">
						<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" onchange="get_careteam_patients(this.value)">
								<option value="" selected='selected'>My Self</option>
							</select>
													
					</div>
					<div class="col-lg-1 mt-10">
						<span class="divider_text">(OR)</span>
					</div>
					<div class="col-lg-3 mb-5 date_filter_div_month row">
						<label>Select Patient:</label>
						<input type="text" class="form-control search_input_field typeahead notranslate" style="line-height:1; font-size:0.8rem;background-color: #FFF; width:80%" id="sel_patient_id" name="search" placeholder="Search and Select Patient" value="">
						<!-- <span class="input-group-text ml-4" onclick="clearPatientSeach()" style="cursor: pointer; float:right;">
							<i class="quick-search-close ki ki-close icon-sm text-muted"></i>
							</span>		 -->
						<!-- <select name="sel_patient_id" id="sel_patient_id" class="form-control select notranslate">
							<option value="">Select Patient</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_sophie">
					<thead>
						<tr>
							<th>Date & Time of the transaction</th>
							<th>Patient Name (UID)</th>
							<th>Category</th>
							<th>Requested By</th>								
							<th>Request Details</th>								
							<th style="width:40% !important;">Response Details</th>											
						</tr>
					</thead>
					<tbody>
					</tbody>
				</table>
			</div>
		</div>
	</div>
</div>
<div id="providerResponseModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="providerResponseModal" aria-hidden="true">
	<div class="modal-dialog modal-md">
		<div class="modal-content modal-md">
			<div class="modal-header">
				<h4 class="modal-title" id="sophie_res_name">Sophie Conversation</h4>
				<button type="button" class="close" data-dismiss="modal">&times;</button>
			</div>
			<div class="modal-body">
				<div class="col-12 row" id="json_data"></div>
				
			</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 src="{{ url('/assets/js/typeahead_notranslate.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");
    //load_vsreport_details('search')
	 $('.date_picker').datepicker({
        format: 'mm/dd/yyyy',
        endDate: '+0d',
        autoclose: true
    });
});
$( "#sel_patient_id" ).typeahead({
	source: function (query, result) {
		var care_team_id = $('#care_team_id').val();
		var category_filter = 'active';
		var url = "{{ url('/searchSophiePatients') }}?query="+query+"&category_filter="+category_filter+'&care_team_id='+care_team_id;
		$.ajax({
			url: url,
			data: 'query=' + query+'&category_filter='+category_filter,            
			dataType: "json",
			success: function (data) {
				if(data.hasOwnProperty("status") && data['status']=="validation"){
					swal(data.message); return false;
				}
				if(data.session!=undefined && data.session=='expired'){
					window.location.href = "{{ url('/') }}";return false;
				} else {
					result($.map(data, function (item) {
						return item;
					}));
					setTimeout(function (){
						$('ul.typeahead').addClass('notranslate');
						$('ul.typeahead').addClass('spatientsearch_class');
					},100);
				}
			}
		});
	},
	matcher: function(item) {
		return true;
	},
	afterSelect: function(item) {
		if(item=='No items found'){
			$('#sel_patient_id').val('');
			return false;
		} else {
			let itm = item.split('-');
			//let pid = itm[1].replace(')','');
			let pid = itm.at(-1).replace(')','');
			pid = pid.replace(' ','');
			// load_vsreport_details('search',pid)
			//globalPageFilter('Search',pid,'active',item);
		}
	}
});
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();
	//alert($('#sel_patient_id').val())
	let sel_patient = $('#sel_patient_id').val();
	let itm = sel_patient.split('-');
	//let pid = itm[1].replace(')','');
	let pid = itm.at(-1).replace(')','');
	pid = pid.replace(' ','');
	
	var sel_patient_id = pid //$('#sel_patient_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=='' && sel_patient_id==''){
		swal("Please select care team member or patient");
		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;
		}
	}
	const today = new Date();
	const month = today.toLocaleString('default', { month: '2-digit' });
	// $('#sel_month').val(month);
	const year = today.getFullYear();
	if(sel_month!='' && sel_year!=''){
		if(sel_month>month && sel_year>=year){
			swal("Please select valid month and year");
			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('/sophieAuditLogs') }}?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)+"&patient_id="+sel_patient_id+"&datatable_search=";
		window.location.href = export_url;
	} else {
		var load_report_url = '{{ URL::to("/") }}/sophieAuditLogs';
		$("#kt_datatable_sophie").dataTable().fnDestroy();
		var table = $('#kt_datatable_sophie').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,'patient_id':sel_patient_id}
			},
			'columns': [
				{ data: 'date_time' },
				{ data: 'patient_name' },
				{ data: 'category' },
				{ data: 'requested_by' },
				{ data: 'requested_data' },
				{ data: 'response_data' }
			],
			'columnDefs': [ {
				'targets': [2], /* column index */
				'orderable': false, /* true or false */
			}],
			'aaSorting': []
		});
         $('#kt_datatable_sophie_filter input').off();
 
        // Bind your own event (e.g., search after 500ms idle time)
        let searchDelay;
        $('#kt_datatable_sophie_filter input').on('keyup', function () {
            clearTimeout(searchDelay);
            var self = this;
            searchDelay = setTimeout(function () {
                table.search($(self).val()).draw();
            }, 500); // 500ms delay after typing stops
        });
	}
}
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");
        }
	});
}
function get_careteam_patients(care_team_id){
	var load_details_url = '{{ URL::to("/") }}/getCareTeamPatients';
	$('#sel_patient_id').val('');
	// $.ajax({
    //     url : load_details_url,
    //     type: "POST",
    //     data:{'_token':'{{csrf_token()}}','care_team_id':care_team_id},
    //     success: function(data){
	// 		$('#sel_patient_id').html(data);
	// 		$('.select').select2({
	// 			dropdownCssClass: "notranslate"
	// 		});
	// 		$(".select2-selection").addClass("notranslate");
	// 		$(".select2-container").addClass("notranslate");
    //     }
	// });
}
function load_json_data(audit_id,file_path,patient_name,created_date){
	$(".tabloadershow").show();
	var post_url = '{{ URL::to("/") }}/getSophieJsonData';
	$.ajax({
		type : "GET",
		url  : post_url,
		data : {audit_id:audit_id,file_path:file_path},
		success:function(result){
			$("#sophie_res_name").html("Sophie Conversation On "+created_date+" - "+patient_name)
			$("#json_data").html(result);
			$("#providerResponseModal").modal('show');	
			$(".tabloadershow").hide();
		}
	});	
}
</script>
@endsection