@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;
}
.subtable_headings{
   min-width: 300px !important;
}
.device_magmt_th{
   padding: 0 !important;   
   width: 55% !important;
}
.device_magmt_inner_table th{
   
   border: 0 !important;
   padding: 0 !important;
   text-align: left !important;
   min-width: 130px !important;
}
.subtable_tdata_ini{
   min-width: 130px !important;
   border-top: 1px solid #554848 !important;
   border-bottom: 0.2rem dotted #554848 !important;
   border-left: 1px solid #554848 !important;
   border-right: 0.2rem dotted #554848 !important;
   padding: 3px 5px !important;
}
.subtable_tdata_mid{
   min-width: 120px !important;
   border-top: 1px solid #554848 !important;
   border-bottom: 0.2rem dotted #554848 !important;
   /* border-left: 1px solid #000 !important; */
   /* border-right: 0.2rem dotted #000 !important; */
   border-left: 0.2rem dotted #554848 !important;
   border-right: 0.2rem dotted #554848 !important;
   padding: 5px 5px !important;
   text-align: left;
}
.subtable_tdata_last{
   min-width: 120px !important;
   border-top: 1px solid #554848 !important;
   border-bottom: 1px solid #554848 !important;
   /* border-left: 1px solid #000 !important; */
   /* border-right: 0.2rem dotted #000 !important; */
   border-left: 1px solid #554848 !important;
   border-right: 0.2rem dotted #554848 !important;
   padding: 5px 5px !important;
   text-align: left;
}
.first_td_class{
   border-left: 1px solid #554848 !important;
}
.last_td_class{
   border-right: 1px solid #554848 !important;
}
.patient_name_width{
   min-width: 210px !important;
}
.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% 25%;
   font-weight: 450;
}
.device_details_passage{
   text-align: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">
   <div class="container">
      <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">Device Management Report</span>
            </h3>
            <div class="card-toolbar">
               <a href="javascript:void(0)" onclick="reload_page();" class="btn btn-light-primary font-weight-bold showloader">Back</a>
            </div>
         </div>
         <div class="card-body"> 
            <div class="form-group row filter_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-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 Vendor(s):<i class="fa fa-info-circle score_info" data-toggle="tooltip" title="" data-original-title="Select multiple Vendors"></i></label>
                  <select id="vendor_ids" name="vendor_id[]" class="form-control notranslate" multiple="multiple">
                     		
                  </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()">																											
               </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()">																											
               </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="submit_filters('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="submit_filters('export')">Export</button>
               </div>
               <!-- <div class="col-lg-1">
               </div> -->
            </div>
            <ul class="nav nav-tabs nav nav-pills">
               <li class="nav-item"><a class="nav-link active" data-toggle="tab"
                  href="#kt_tab_pane_device_active" id='devices_assigned_active_pt'
                  onclick="getDevicesData(1,'search')">Active Patients (Assigned Devices)</a>
               </li>
               <li class="nav-item"><a class="nav-link" data-toggle="tab"
                  href="#kt_tab_pane_no_device_active" id='no_devices_assigned_active_pt'
                  onclick="getDevicesData(2,'search')">Active Patients (No Devices)</a>
               </li>
               <li class="nav-item"><a class="nav-link" data-toggle="tab"
                  href="#kt_tab_pane_device_inactive" id='devices_assigned_intive_pt'
                  onclick="getDevicesData(3,'search')">Inactive Patients (Assigned Devices)</a>
               </li>
            </ul>
            <div class="tab-content mt-5" id="myTabContent">
               <div class="tab-pane fade show active" id="kt_tab_pane_device_active" role="tabpanel" aria-labelledby="kt_tab_pane_device_active">
                  <!--begin: Datatable-->
                  <table class="table table-separate table-head-custom table-checkable table-responsive" id="kt_datatable_report_devices_active">
                     <thead>
                        <tr>
                           <!-- <th>S.No</th> -->
                           <th class="patient_name_width">Patient Name(UID)</th>
                           <th>Program</th>
                           <th>Vendor Name</th>
                           <th style="text-align:center;" class="device_magmt_th">Device Details</th>
                        </tr>
                     </thead>
                     <tbody>
                     
                     </tbody>
                  </table>
               </div>
            
               <div class="tab-pane fade" id="kt_tab_pane_no_device_active" role="tabpanel" aria-labelledby="kt_tab_pane_no_device_active">
                  <!--begin: Datatable-->
                  <table class="table table-separate table-head-custom table-checkable" id="kt_datatable_report_no_devices_active">
                     <thead>
                        <tr>
                           <!-- <th>S.No</th> -->
                           <th>Patient Name(UID)</th>
                           <th>DOB</th>
                           <th>Gender</th>
                           <th>Location</th>
                           <th>Program</th>
                        </tr>
                     </thead>
                     <tbody>
                     
                     </tbody>
                  </table>
               </div>
            
               <div class="tab-pane fade" id="kt_tab_pane_device_inactive" role="tabpanel" aria-labelledby="kt_tab_pane_device_inactive">
                  <!--begin: Datatable-->
                  <table class="table table-separate table-head-custom table-checkable table-responsive" id="kt_datatable_report_devices_inactive">
                     <thead>
                        <tr>
                           <!-- <th>S.No</th> -->
                           <th class="patient_name_width">Patient Name(UID)</th>
                           <th>Program</th>
                           <th>Vendor Name</th>
                           <th style="text-align:center;" class="device_magmt_th">Device Details</th>
                        </tr>
                     </thead>
                     <tbody>
                     </tbody>
                  </table>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>
<div id="divLoadingInPopup" class="tabloadershow"></div>
<input type="hidden" id='current_tab_status' value="1">

<!-- <script src="{{ asset('assets/js/flatpickr.js')}}"></script> -->
<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() {
   $('#selected_location_ids').select2({
		placeholder: "All Locations",
		dropdownCssClass: "notranslate"
	});
   $('#vendor_ids').select2({
		placeholder: "All Vendors",
		dropdownCssClass: "notranslate"
	});
});
var load_url = "{{ url('images/loading-icon.gif') }}";

submit_search('search',1);

function getDevicesData(status,action){

   $('#current_tab_status').val(status);
   submit_search(action,status);  
  
}
function submit_filters(type){
   
   var current_tab_status = $('#current_tab_status').val();
   
   getDevicesData(current_tab_status,type);  

}
function submit_search(action_type,pt_type){

   var selected_facility = $('#selected_facility').val();
   var sel_location_array = $('#selected_location_ids').val();
	var vendor_array = $('#vendor_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';

   }

   var sel_location = sel_location_array.join(',');
   
   var vendor_ids = vendor_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/vendor_device_management') }}?data_type=export&sel_location="+sel_location+"&vendor_ids="+vendor_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+'&pt_type='+pt_type;
		window.location.href = export_url;
	} else {

      if(pt_type == 1){
         $('#kt_datatable_report_devices_active').dataTable().fnDestroy();
         $('#kt_datatable_report_devices_active').DataTable({
            'processing': true,
            'serverSide': true,
            //'serverMethod': 'get',
            oLanguage: {sProcessing: "<img src='"+load_url+"'>"},
            ajax: {
               type: 'POST',
               url: "{{ url('/dashboard/vendor_device_management') }}",
               data: {'_token':'{{csrf_token()}}', 'selected_facility':selected_facility,'sel_location':sel_location,'vendor_ids':vendor_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,'pt_type':pt_type},
            },
            'columns': [
               { data: 'patient_name' },
               { data: 'program' },
               { data: 'vendor_name' },
               { data: 'device_details' }
            ],
            "aaSorting": [],
            drawCallback: function () {
               $('[data-toggle="tooltip"]').tooltip();
               $('[data-toggle="popover"]').popover();
               $(".tooltip").tooltip("hide");
            }
         });
      }
      if(pt_type == 2){
         $('#kt_datatable_report_no_devices_active').dataTable().fnDestroy();
         $('#kt_datatable_report_no_devices_active').DataTable({
            'processing': true,
            'serverSide': true,
            //'serverMethod': 'get',
            oLanguage: {sProcessing: "<img src='"+load_url+"'>"},
            ajax: {
               type: 'POST',
               url: "{{ url('/dashboard/vendor_device_management') }}",
               data: {'_token':'{{csrf_token()}}', 'selected_facility':selected_facility,'sel_location':sel_location,'vendor_ids':vendor_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,'pt_type':pt_type},
            },
            'columns': [
               { data: 'patient_name' },
               { data: 'dob_value' },
               { data: 'gender' },
               { data: 'location' },
               { data: 'program' }
            ],
            "aaSorting": [],
            drawCallback: function () {
               $('[data-toggle="tooltip"]').tooltip();
               $('[data-toggle="popover"]').popover();
               $(".tooltip").tooltip("hide");
            }
         });
      }
      if(pt_type == 3){
         $('#kt_datatable_report_devices_inactive').dataTable().fnDestroy();
         $('#kt_datatable_report_devices_inactive').DataTable({
            'processing': true,
            'serverSide': true,
            //'serverMethod': 'get',
            oLanguage: {sProcessing: "<img src='"+load_url+"'>"},
            ajax: {
               type: 'POST',
               url: "{{ url('/dashboard/vendor_device_management') }}",
               data: {'_token':'{{csrf_token()}}', 'selected_facility':selected_facility,'sel_location':sel_location,'vendor_ids':vendor_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,'pt_type':pt_type},
            },
            'columns': [
               { data: 'patient_name' },
               { data: 'program' },
               { data: 'vendor_name' },
               { data: 'device_details' }
            ],
            "aaSorting": [],
            drawCallback: function () {
               $('[data-toggle="tooltip"]').tooltip();
               $('[data-toggle="popover"]').popover();
               $(".tooltip").tooltip("hide");
            }
         });
      }
   }
}
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/reports?report_type=General';
}


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_facility_locations(facility_id){
   $.ajax({
		url: "{{ URL::to('/') }}/getProgramLists?facility_id="+facility_id+"&sel_month=",
		dataType: "json",
		success:function(data){
			$("#selected_location_ids").html('');
			$('#selected_location_ids').empty().append('<option value="">All</option>');
			$.each(data.locations, function (key, dt) {
				$('#selected_location_ids').append('<option value="'+dt.facility_branch_id+'" onchange="changeLocations('+dt.facility_branch_id+')">'+dt.office_name+'</option>');
			});
		}
	});
}
</script>
@endsection