@extends('dashboard/layout.app')
@section('title', 'BettrAi | Appointment')
@section('content')
<link href="{{ asset('/css/flatpickr.min.css')}}" rel="stylesheet"
	type="text/css" />


					<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">Appointment
											Reports</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="card-body pt-5">
									<div class="table-responsive">
										<form
											action="{{ URL::to('dashboard/appointment?user_id='.$user_id.'&role='.$role.'&facility_id='.$facility_id.'&user_tz='.$user_tz) }}"
											name="appointments" id="appointments" method="POST">
											@csrf
											<div class="row form-group mb-3">
												<div class="col-md-1">
													<label class="mt-2 font-weight-bolder">Filter By:</label>
												</div>
												<div class="col-md-3">
													<select class="form-control select" id="status" name="status">
														<option value="">Select Type</option>
														<option value="Todays"
															>Todays Appointments</option>
														<option value="Upcoming"
															>Upcoming Appointments</option>
														<option value="Completed"
															>Completed Appointments</option>
														<option value="Cancelled"
															>Cancelled Appointments</option>
														<option value="Call Rejected by Provider"
															>Call Rejected by Provider</option>
														<option value="Call Rejected by Patient"
															>Call Rejected by Patient</option>
														<option value="Unable to Contact"
															>Unable to Contact</option>
													</select>
												</div>
												
												<div class="col-md-3">
													<select class="form-control select" id="device_location">
														<option value="" selected>Select Location</option> 
														@foreach($locations as $key => $value)
														<option selected="selected" value="{{$key}}">{{$value}}</option> 
														@endforeach
													</select>
												</div>

												<div class="col-md-2">
													<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-md-2">
													<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-md-1 pl-0">
													<input type="button" class="btn btn-primary" value="Search"
														onclick="get_filtered_logs()" />
												</div>
											</div>
											<table
												class="table table-head-custom table-vertical-center p-5"
												id="med_device_list">
												<thead>
													<tr class="text-left">
														<th>Patient Name</th>
														<th>Physician</th>
														<th>Location</th>
														<th>Date</th>
														<th>Appointment Type</th>
														<th>Purpose</th>														
													</tr>
												</thead>


												<tbody>
												@if(!empty($appointments))
													@foreach ($appointments as $item) 
													@php $patient_name = null;
													@endphp 
													@if($item->patient_fname != "" && $item->patient_lname != "") 
													@php 
													$patient_name = EncDecHelper::dec_string($item->patient_lname).", ".EncDecHelper::dec_string($item->patient_fname)."(".$item->patient_id.")";
													$provider_name = EncDecHelper::dec_string($item->provider_lname).", ".EncDecHelper::dec_string($item->provider_fname);
													@endphp 
													@endif 
													@php $date = new DateTime($item->event_from,new DateTimeZone('UTC')); 
													$date->setTimezone(new DateTimeZone($user_tz)); 
													$date = $date->format('m-d-Y h:i A');

													@endphp
													<tr>
														<td class="notranslate">N/A </td>
														<td class="notranslate">N/A</td>
														<td>N/A </td>
														<td>
															<!-- <span style="display:none;"></span> -->
																												
													</td>
														<td></td>
														<td></td>														

													</tr>
													@endforeach
													@endif
												</tbody>
											</table>
										</form>
									</div>

									
								</div>
							</div>
							<!--end::Card-->

						</div>
					</div>
					<!--end::Entry-->
				
<div id="divLoading" class="tabloadershow"></div>
<!-- <script src="{{ asset('assets/js/flatpickr.js')}}"></script> -->
<script src="{{ asset('assets/js/date-pickerJs.js')}}"></script>

<script>
$(document).ready(function(){
	$('.tabloadershow').hide();
	/* $(".flatpickr").flatpickr({
	      altInput: true,
	      altFormat: "d-m-Y",
	      dateFormat: "Y-m-d",
	   }); */
	   var load_meddevice_url='{{ URL::to("/") }}/dashboard/appointment?from_date=&to_date=&user_id=&role=&facility_id=&user_tz=&device_location=&status=&selected_branch_id=';
	var table = $('#med_device_list').DataTable( {
		// dom: 'Bfrtip',
		// buttons: [
		// 	'excel', 'pdf', 'print'
		// ]
		'processing': true,
		'serverSide': true,
		'serverMethod': 'GET',
		oLanguage: {sProcessing: "<img src='{{ URL::to('images/loading-icon.gif') }}'>"},
		ajax: {
			url: load_meddevice_url,
		},
		'columns': [
			{ data: 'patient_name' },
			{ data: 'provider_name' },
			{ data: 'location' },
			{ data: 'date' },
			{ data: 'appointment_type' },
			{ data: 'purpose' }
		]
	});
	
	$('#status').on('change',function(){
		var kit_status = $(this).val();
		if(kit_status!=''){
			if(kit_status=='Todays' || kit_status=='Upcoming'){
				$('#from_date').val('')
				$('#to_date').val('');
				var from_date = '';
				var to_date = '';
			} else {
				var from_date = $('#from_date').val();
				var to_date = $('#to_date').val();
			}
			$('.tabloadershow').show();
			//$('#appointments').submit();
			var reload_url = '{{ URL::to("/") }}/dashboard/appointment?from_date='+from_date+'&to_date='+to_date+'&user_id=&role=&facility_id=&user_tz=&device_location=&status='+kit_status;
			window.location.href=reload_url;
		}
	});

	
		// $('#device_location').on('change', function () {
		// if ($(this).val()=='') {
		// table.column(2).search('').draw();
		// }else{
		//     table.column(2).search("^" + $(this).val() + "$", true, true, true).draw();
		// }
		// });
		$('#device_location').on('change', function () {
			
			var status = $('#status').val();
			var device_location = $(this).val();
			var from_date = $('#from_date').val();
			var to_date = $('#to_date').val();
			$('.tabloadershow').show();
			var reload_url = '{{ URL::to("/") }}/dashboard/appointment?from_date='+from_date+'&to_date='+to_date+'&user_id=&role=&facility_id=&user_tz=&device_location='+device_location+'&status='+status;
			window.location.href=reload_url;
		});
		$('#kit_location').on('change', function () {
			if ($(this).val()=='') {
				kit_table.column(2).search('').draw();
			}else{
				kit_table.column(2).search("^" + $(this).val() + "$", true, true, true).draw();
			}
		});
		
});
function get_filtered_logs(){
		
	   var from_date = $('#from_date').val();
	   var to_date = $('#to_date').val();
	   var username = $('#username').val();
	   var status = $('#status').val();
	   var device_location = $('#device_location').val();
	      if(from_date!='' && to_date==''){
	    	  swal({position: 'top',type: 'error',title: "Please select to date"});
	         return false;
	      }
	      else if(from_date=='' && to_date!=''){
	         
	         swal({position: 'top',type: 'error',title: "Please select from date"});
	         return false;
	      }else{
	   
	      if(from_date=='' || to_date==''){
	         
	         swal({position: 'top',type: 'error',title: "Please select from date and to date"});
	         return false;
	      }else{
	    	  $('.tabloadershow').show();
	   		window.location.href='{{ URL::to("/") }}/dashboard/appointment?from_date='+from_date+'&to_date='+to_date+'&user_id=&role=&facility_id=&user_tz=&device_location='+device_location+'&status='+status;
	      }
	      }
	
	
}
</script>
@endsection