@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;
}

td div{
    border-bottom:1px dashed #ccc;
    padding:3px 0;
}
td div:last-child{
    border-bottom:none;
}

/* #kt_datatable_carepahyscian_patientslist{
    border-collapse: collapse;
    width: 100%;
}

#kt_datatable_carepahyscian_patientslist th,
#kt_datatable_carepahyscian_patientslist td{
    border: 1px solid #d9d9d9;
    padding: 8px 10px;
    vertical-align: top;
}

#kt_datatable_carepahyscian_patientslist th{
    background-color: #f3f6f9;
}

#kt_datatable_carepahyscian_patientslist tbody tr:hover{
    background: #fafafa;
} */

.vs-multi div{
    padding: 4px 0;
    border-bottom: 1px dashed #ccc;
}

.vs-multi div:last-child{
    border-bottom: none;
}

.vs-block {
    display: flex;
    flex-direction: column;
}

.vs-row {
    padding: 6px 10px;
    border-bottom: 1px dotted #999;
    min-height: 28px;
    display: flex;
    align-items: center;
}

.vs-row:last-child {
    border-bottom: none;
}

#kt_datatable_carepahyscian_patientslist td {
    vertical-align: middle;
}

.vs-category .vs-row {
    white-space: nowrap; 
}
.vs-category {
    min-width: 140px;
}
</style>


<div class="d-flex flex-column-fluid">
   <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">Monthly Patient Clinical Review Report</span>
            </h3>
            <div class="card-toolbar">
               <a href="{{ URL::to('dashboard/reports?report_type=Clinical') }}" 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-3 mb-5">
                  <label>Select Primary Care Physician :<span class="text-danger">*</span></label>
                  <select class="form-control" id="selected_physician" name="selected_physician">                     
                     <option value="">--Select --</option>
                                       </select>	
                  <input type="hidden" name="physician_name" id="physician_name">																								
               </div>
               <div class="col-lg-3 mb-5">
                  <label>Select Locations:<span class="text-danger">*</span> <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">All</option>
                                       </select>	
               </div>	     
              <div class="col-lg-2 mb-5 date_filter_div_month ml-8">
                  <label>Select Month:</label>
                  <select id="sel_month" name="sel_month" class="form-control" onchange="checkyearmonthchange()" required>
                     <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()" required>
                        <option value="">-Select-</option>
                                             </select>
               </div>	
               <div class="col-lg-3 mt-2">
                  <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>

            <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">
                  <table class="table table-separate table-head-custom table-checkable table-responsive" id="kt_datatable_carepahyscian_patientslist">
                     <thead>
                        <tr>
                           <th class="patient_name_width">Patient Name(UID)</th>
                           <th>Programs</th>
                           <th>Diagnoses for Billing</th>
                           <th>VS Category</th>
                           <th>Monthly Minimum VS Reading</th>
                           <th>Monthly Maximum VS Reading</th>
                           <th>Monthly Average VS Reading</th>
                           <th>Number of High Alerts Within Month</th>
                           <th>Direct Patient Contacts</th>
                           <th>Office Contacts</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"
	});

    $('#kt_datatable_carepahyscian_patientslist').DataTable({
      searching: false,
      paging: false,
      info: false,
      language: {
         emptyTable: "Please select filters and click Search to get data"
      }
   });
});
var load_url = "{{ url('images/loading-icon.gif') }}";

$('#selected_physician').change(function(){
    var physicianName = $("#selected_physician option:selected").data('name');
    $('#physician_name').val(physicianName);
});

function submit_filters(type){
   submit_search(type);  
}

function submit_search(action_type){

   var sel_location_array = $('#selected_location_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_physician = $('#selected_physician').val();
   var physician_name = $('#physician_name').val();

   var sel_location_names = $('#selected_location_ids option:selected')
      .toArray().map(item => item.text).join();

   if(selected_physician == ''){
      swal("Please select Primary Care Physician");
      return false;
   }
   if(sel_location_array == null || sel_location_array.length == 0){
      swal("Please select Location");
      return false;
   }

   var sel_location = sel_location_array.join(',');


   if(sel_month == '' || sel_year == ''){
      swal("Please select month and year");
      return false;
   }

   if(action_type == 'export'){

      var rowCount = $('#kt_datatable_carepahyscian_patientslist tbody tr').length;

      if(rowCount == 0){
         swal("Please search the report first before exporting.");
         return false;
      }

      var datatable_search = $('input[type="search"]').val();
      var dt_search = datatable_search ? datatable_search : '';

      $('.tabloadershow').show();

      setTimeout(() => {
         $('.tabloadershow').hide();
         swal({
            position: 'top',
            type: 'success',
            title: "Download is in progress, please check downloads."
         });
      }, 3000);

      var export_url = "{{ url('/patientClinicalReviewReport') }}"
      +"?data_type=export"
      +"&sel_location="+sel_location
      +"&sel_month="+sel_month
      +"&sel_year="+sel_year
      +"&sel_start_date="+sel_start_date
      +"&sel_end_date="+sel_end_date
      +"&selected_physician="+selected_physician
      +"&datatable_search="+encodeURIComponent(dt_search)
      +"&sel_location_names="+sel_location_names
      +"&physician_name="+encodeURIComponent(physician_name);

      window.location.href = export_url;

   } else {

      if($.fn.DataTable.isDataTable('#kt_datatable_carepahyscian_patientslist')){
         $('#kt_datatable_carepahyscian_patientslist').DataTable().destroy();
      }

      var table1 = $('#kt_datatable_carepahyscian_patientslist').DataTable({

         processing: true,
         serverSide: true,

         language: {
            processing: "<img src='"+load_url+"'>",
            emptyTable: "Please search to get data",
            zeroRecords: "No matching records found"
         },

         ajax: {
            type: 'POST',
            url: "{{ url('/patientClinicalReviewReport') }}",
            data: {
               '_token':'{{csrf_token()}}',
               'sel_location':sel_location,
               'sel_month':sel_month,
               'sel_year':sel_year,
               'sel_start_date':sel_start_date,
               'sel_end_date':sel_end_date,
               'selected_physician':selected_physician,
               'physician_name':physician_name
            }
         },

         columns: [
            { data: 'patient_name', orderable: true },
            { data: 'program', orderable: true },
            { data: 'diagnosis_for_billing', orderable: true },
            { data: 'vs_category', orderable: false },
            { data: 'vs_min_reading', orderable: false },
            { data: 'vs_max_reading', orderable: false },
            { data: 'vs_avg_reading', orderable: false },
            { data: 'number_of_hight_alerts', orderable: false },
            { data: 'direct_patient_contact', orderable: false },
            { data: 'office_contact', orderable: false }
         ],

         aaSorting: [],

         drawCallback: function () {
            $('[data-toggle="tooltip"]').tooltip();
            $('[data-toggle="popover"]').popover();
            $(".tooltip").tooltip("hide");
         }

      });

      var table_id = 'kt_datatable_carepahyscian_patientslist';

      $('#'+table_id+'_filter input').off();

      let searchDelay;

      $('#'+table_id+'_filter input').on('keyup', function () {

         clearTimeout(searchDelay);

         var self = this;

         searchDelay = setTimeout(function () {

            table1.search($(self).val()).draw();

         }, 500);

      });

   }

}


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);
}


</script>
@endsection