@extends('dashboard/layout.app')
@section('title', 'BettrAi | Clinical Nurse Monitoring Report')
@section('content')
<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("{{ URL::to('images/loading-icon.gif') }}");
   opacity: 0.4;
   left: 0px;
   bottom: 0px;
   right: 0px;
   top: 50px;
   background-repeat: no-repeat;
   background-position: center center;
}
</style>
<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">Clinical Nurse Monitoring 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="row form-group mb-3">
                                    <div class="col-md-2">
                                       <select class="form-control select" name="branch_id" id="branch_id" onchange="get_filtered_logs('branch')">		
                                          <option value="">Select Location</option>
                                          @foreach($facility_offices as $facility_office)
                                             <option  value="{{ $facility_office->facility_branch_id }}">{{ $facility_office->office_name }}</option>
                                          @endforeach
                                       </select>
                                    </div>
                                    <div class="col-md-2">
                                       <select class="form-control" name="period_type" id="period_type" onchange="get_filtered_logs('period')">		
                                          <option value="">Select Period</option>
                                          <option  value="c">Current Month</option>
                                          <option  value="p">Last Month</option>
                                          <option  value="q">Quarterly</option>
                                          <option  value="h">Half Yearly</option>
                                       </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-4">
                                       <input type="button" class="btn btn-primary" value="Search" onclick="get_filtered_logs('click')"/>	
                                       <a class="btn btn-warning" onclick="reload_page()">Reset</a>	
                                       <!-- <a class="btn btn-primary float-right" href="javascript:void(0)" onclick="export_excel()" style="max-width:150px;" >Export to Excel</a> -->
                                       
                                    </div>
                                 </div>
                                 <!--begin: Datatable-->
                                 <table class="table table-separate table-head-custom table-checkable" id="kt_datatable_report">
                                    <thead>
                                    <tr>
                                       <th style="width:15% !important;">Account Name</th>
                                       <th>Nurse</th>
                                       <th>Total Case Load</th>
                                       <th>Program(s)</th>
                                       <th>Total Calls made today</th>
                                       <th>Total Patient Contact Made today</th>
                                       <th>Total billable reached today</th>
                                       <th data-orderable="false">Total VM today</th>
                                       <th>Total NA today</th>
                                       <th>Total logged in time</th>
                                       <th>Average calls per hour</th>
                                       <th>Average closed and billable per hour</th>
                                       <th>Total overall Efficiency</th>
                                       <th>Total to date billable</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                          <tr class="throw">
                                          </tr>
                                    </tbody>
                                 </table>
                                    <!--end: Datatable-->
                              </div>
                           </div>
								
                        </div>
							<!--end::Container-->
                     </div>
                 
<div id="divLoadingInPopup" class="tabloadershow"></div>
<!-- <script src="{{ asset('assets/js/flatpickr.js')}}"></script> -->
<script src="{{ asset('assets/js/date-pickerJs.js')}}"></script>
<script>
$(document).ready(function() {
   var load_report_url = '{{ URL::to("/") }}/nurseMonitoringReport?branch_id={{ $branch_id }}&period_type={{ $period_type }}&from_date={{ $from_date }}&to_date={{ $to_date }}';
   $('#kt_datatable_report').DataTable( {
      scrollX: true,
      'processing': true,
		'serverSide': true,
		'serverMethod': 'GET',
		oLanguage: {sProcessing: "<img src='{{ URL::to('images/loading-icon.gif') }}'>"},
		ajax: {
			url: load_report_url,
		},
		'columns': [
			{ data: 'account_name' },
			{ data: 'nurse_name' },
			{ data: 'total_case_load' },
			{ data: 'programs' },
         { data: 'total_calls_made' },
         { data: 'total_contacts' },
         { data: 'total_billable' },
         { data: 'total_vm' },
         { data: 'total_na' },
         { data: 'total_logtime' },
         { data: 'avg_calls' },
         { data: 'avg_closed_calls' },
			{ data: 'efficiency' },
         { data: 'to_date_billable' }
		]
   });
   $(".tabloadershow").hide();
   $('.select').select2({});
});
function get_filtered_logs(type){
   var branch_id = $('#branch_id').val();
   var from_date = $('#from_date').val();
   var to_date = $('#to_date').val();
   if(type=='click'){
      if(from_date=='' || to_date==''){
         swal({position: 'top',type: 'error',title: "Please select from date and to date"});
         return false;
      }
      var period_type = '';
   } else {
      if(type=='period'){
         var from_date = '';
         var to_date = '';
      }
      var period_type = $('#period_type').val();
   }
   $(".tabloadershow").show();
   window.location.href='{{ URL::to("/") }}/nurseMonitoringReport?branch_id='+branch_id+'&period_type='+period_type+'&from_date='+from_date+'&to_date='+to_date;
}

function reload_page(){
   $(".tabloadershow").show();
   window.location.href='{{ URL::to("/") }}/nurseMonitoringReport';
}
function export_excel(){
   var branch_id = $('#branch_id').val();
   var from_date = $('#from_date').val();
   var to_date = $('#to_date').val();
   var period_type = $('#period_type').val();
   $('.tabloadershow').show();
   window.location.href='{{ URL::to("/") }}/nurseMonitoringReport?type=Export&branch_id='+branch_id+'&period_type='+period_type+'&from_date='+from_date+'&to_date='+to_date;
   setTimeout(function (){
		$(".tabloadershow").hide();
	},2000);
}

</script>
@endsection