@extends('reports/layout.app')
@section('title', 'BettrAi | Video Call Logs')
@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(../images/loading-icon.gif);
   opacity: 0.4;
   left: 0px;
   bottom: 0px;
   right: 0px;
   top: 50px;
   background-repeat: no-repeat;
   background-position: center center;
}
</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">Video Call Logs</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="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-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-2">
                                          <select class="form-control select" name="username" id="username">		
                                             <option value="">Select Hosted User</option>
                                             @foreach($hosted_users as $hosted_user)
                                                <option  value="{{ $hosted_user->username }}"><span class="notranslate">{{ $hosted_user->lname }}, {{ $hosted_user->fname }} {{ $hosted_user->specialization_name ? "(".$hosted_user->specialization_name.")" : '' }} - {{ $hosted_user->access_type }}</span></option>
                                             @endforeach
                                          </select>
                                       </div>
                                       <div class="col-md-2">
                                          <input type="button" class="btn btn-primary" value="Search" onclick="get_filtered_logs()"/>	
                                          <a class="btn btn-primary" onclick="reload_page()">Reset</a>	
                                       </div>

                                 </div>

                              
									
										<!--begin: Datatable-->
										<table class="table table-separate table-head-custom table-checkable" id="kt_datatable_report">
											<thead>
                                 <tr>
                                    <!-- <th>S.No</th> -->
                                    <th>Hosted By</th>
                                    <th>Participants</th>
                                    <th>Call Type</th>
                                    <th>Call Start Time</th>
                                    <th>Call End Time</th>
                                    <th>Call Duration<br>HH:MM:SS</th>
                                 </tr>
											</thead>
											<tbody>
                                       <tr class="throw">
                                       </tr>
                                 </tbody>
										</table>
										<!--end: Datatable-->
									</div>
								</div>
								<!--end::Card-->
								
								</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("/") }}/dashboard/video_call_logs?from_date={{ $from_date }}&to_date={{ $to_date }}&username={{ $username }}';
   $('#kt_datatable_report').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_report_url,
		},
		'columns': [
			//{ data: 'sno' },
			{ data: 'hosted_by' },
			{ data: 'participants' },
			{ data: 'call_type' },
			{ data: 'call_start_time' },
			{ data: 'call_end_Time' },
			{ data: 'duration' }
		]
   });
   $(".tabloadershow").hide();
   $('.select').select2({});
  /*  $(".flatpickr").flatpickr({
      altInput: true,
      altFormat: "d-m-Y",
      dateFormat: "Y-m-d",
   }); */
});
function get_filtered_logs(){
   var from_date = $('#from_date').val();
   var to_date = $('#to_date').val();
   var username = $('#username').val();
   if(username!=''){
      if(from_date!='' && to_date==''){        
         swal({position: 'top',type: 'error',title: "Please select to date"});
         return false;
      }
      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;
      }
   }
   $(".tabloadershow").show();
   window.location.href='{{ URL::to("/") }}/dashboard/video_call_logs?from_date='+from_date+'&to_date='+to_date+'&username='+username;
}

function reload_page(){
   $(".tabloadershow").show();
   window.location.href='{{ URL::to("/") }}/dashboard/video_call_logs';
}
</script>
@endsection