@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 {
   position: fixed;
      z-index: 100;
      background-image: url("{{ url('assets/images/loading-icon.gif') }}");
      opacity: 0.90;
      left: 0px;
      bottom: 0px;
      right: 0px;
      top: 0px;
      background-repeat: no-repeat;
      background-position: center center;
      background-color:white;
}
.dataTables_wrapper {
    width: 100%;
}
#kt_datatable_report_wrapper .dataTables_scrollBody thead {
    visibility: collapse !important;
}
.dataTables_wrapper .dataTables_scroll {
    overflow-x: hidden !important;
}
</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 Team Case Load 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 pt-5">
                                    <div class="row form-group mb-3">
                                       <div class="col-md-2">
                                             <label for="branch_id" style="font-weight: bold;">Location:</label>
                                             <select class="form-control select" name="branch_id" id="branch_id" onchange="get_filtered_data('branch')">		
                                                <option value="">All Locations</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">
                                             <label for="role_name" style="font-weight: bold;">Role:</label>
                                             <select class="form-control" name="role_name" id="role_name" onchange="get_filtered_data('role')">		
                                                <option value="">All Roles</option>
                                                <option value="Physicians">Physician</option>
                                                <option value="Nurse">Nurse</option>
                                                <option value="Care Coordinator">Care Coordinator</option>                                          
                                             </select>
                                       </div>
                                       <div class="col-md-2">
                                             <label for="user_status" style="font-weight: bold;">User Status:</label>
                                             <select class="form-control" name="user_status" id="user_status" onchange="get_filtered_data('status')">		
                                                <option value="">Active Users</option>
                                                <option value="1">Active</option>
                                                <option value="0">Inactive</option>
                                             </select>
                                       </div>

                                       <div class="col-md-2">
                                             <label for="userName" style="font-weight: bold;">Users:</label>
                                             <select class="form-control select" name="userName" id="userName" onchange="get_filtered_data('user')">
                                                <option value="">Select Users</option>
                                             </select>
                                       </div>
                                       
                                       <div class="col-md-2">
                                             <label for="year" style="font-weight: bold;">Year:</label>
                                             <select class="form-control" name="year" id="year" onchange="get_filtered_data('year')">		
                                                <option value="">Select Year</option>
                                             </select>
                                       </div>
                                       
                                       <div class="col-md-2">
                                             <label for="month" style="font-weight: bold;">Month:</label>
                                             <select class="form-control" name="month" id="month" onchange="get_filtered_data('month')">		
                                                <option value="">Select Month</option>
                                                <option value="01">January</option>
                                                <option value="02">February</option>
                                                <option value="03">March</option>
                                                <option value="04">April</option>
                                                <option value="05">May</option>
                                                <option value="06">June</option>
                                                <option value="07">July</option>
                                                <option value="08">August</option>
                                                <option value="09">September</option>
                                                <option value="10">October</option>
                                                <option value="11">November</option>
                                                <option value="12">December</option>
                                             </select>
                                       </div>

                                       <div class="col-md-8" style="margin-top: 10px;">
                                       <div class="p-3 border rounded bg-light">
                                          <div class="row">
                                                <div class="col-md-4">
                                                   <label for="from_date" style="font-weight: bold;">From Date:</label>
                                                   <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-4">
                                                   <label for="to_date" style="font-weight: bold;">To Date:</label>
                                                   <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 d-flex align-items-end">
                                                   <input type="button" class="btn btn-primary" value="Search" onclick="get_filtered_data('click')"/>	
                                                </div>
                                          </div>
                                       </div>
                                    </div>

                                    <div class="col-md-4 d-flex align-items-center" style="margin-top: 10px;">
                                       <a class="btn btn-warning" onclick="reload_page()">Reset</a>
                                       <a class="btn btn-primary" href="javascript:void(0)" onclick="export_excel()" style="max-width: 150px; margin-left:20px;">Export to Excel</a>
                                    </div>

                                    </div>


                             
                                 <table class="table table-separate table-head-custom table-checkable" id="kt_datatable_report">
                                    <thead>
                                    <tr>
                                       <th style="width:10% !important;">User Name</th>
                                       <th>Role</th>
                                       <th>Case Load (Total Active Patient Count) </th>
                                       <th>Number of Active Programs</th>
                                       <th>Total Minutes in Platform</th>
                                       <th>Total Program Minutes </th>
                                       <th>Percent of Time in Program</th>
                                       <th>Total Patient Contacts</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                          <tr class="throw">
                                          </tr>
                                    </tbody>
                                 </table>
                                    <!--end: Datatable-->
                              </div>
                           </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 () {
      $('.tabloadershow').show();
      const currentYear = new Date().getFullYear();
      const yearDropdown = document.getElementById('year');

         for (let year = 2025; year <= Math.max(currentYear, 2025); year++) {
            const option = document.createElement('option');
            option.value = year;
            option.textContent = year;
            yearDropdown.appendChild(option);
         }       
      yearDropdown.value = currentYear;

      const currentMonth = new Date().getMonth() + 1;
      const formattedMonth = currentMonth < 10 ? '0' + currentMonth : currentMonth;
      const monthDropdown = document.getElementById('month');
      monthDropdown.value = formattedMonth;

      var load_report_url = '{{ URL::to("/") }}/clinicalTeamMonitoringReport';
      var table = $('#kt_datatable_report').DataTable({
         scrollX: true,
         processing: true,
         serverSide: true,
         serverMethod: 'POST',
         oLanguage: { sProcessing: "<img src='{{ URL::to('images/loading-icon.gif') }}'>" },
         ajax: {
               url: load_report_url,
               data: function (d) {
                  d.branch_id = $('#branch_id').val();
                  d.role_name = $('#role_name').val();
                  d.user_id = $('#userName').val();
                  d.user_status = $('#user_status').val();
                  d.from_date = $('#from_date').val();
                  d.to_date = $('#to_date').val();
                  d.year = $('#year').val();
                  d.month = $('#month').val();
                  d._token = '{{ csrf_token() }}';
               }
         },
         columns: [
               { data: 'username' },
               { data: 'role' },
               { data: 'active_patient_count' },
               { data: 'total_program_count' },
               { data: 'total_active_minutes' },
               { data: 'program_duration' },
               { data: 'percentoftimeinprogram' },
               { data: 'total_patient_contacts' }
         ]
      });

      table.on('xhr', function () {
         $(".tabloadershow").hide();
      });

      $('.select').select2({});

      getUsersList('');
   });

   // Filter Function with AJAX DataTable Reload
   function get_filtered_data(type) {
      //  var branch_id = $('#branch_id').val();
      var role_name = $('#role_name').val();
      //  var user_id = $('#userName').val();
      //  var user_status = $('#user_status').val();
      var from_date = $('#from_date').val();
      var to_date = $('#to_date').val();
      //  var role = $('#role').val();
      //  var year = $('#year').val();
      //  var month = $('#month').val();
      
      if (type === 'click') {
         if (!from_date || !to_date) {
               swal({
                  position: 'top',
                  type: 'error',
                  title: "Please select from date and to date"
               });
               return false;
         }
      }
      $('.tabloadershow').show();

      if(type === 'status' || type === 'role'){
            getUsersList();
      }
      var table = $('#kt_datatable_report').DataTable();
      table.ajax.reload(null, false);
   }

   function getUsersList(){
         var selectedRole = $('#role_name').val();
         var selectedUserStatus = $('#user_status').val();
         $.ajax({
         url: '{{ URL::to("/") }}/getFilteredUsers',
         headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
         },
         type: 'POST',
         data: {
            role: selectedRole,
            userStatus: selectedUserStatus
         },
         success: function(response) {
         $('.tabloadershow').hide();
            if (response.status === 'success') {
                  $('#userName').html('<option value="">Select Users</option>');
                  response.users.forEach(function(user) {
                     $('#userName').append('<option value="' + user.user_id + '">' + user.username + '</option>');
                  });
            } else {
                  $('#userName').html('<option value="">No Users Found</option>');
            }
         },
         error: function(xhr, status, error) {
            console.error('AJAX Error: ' + status + error);
         }
      });

   }

   function reload_page(){
      $(".tabloadershow").show();
      window.location.href='{{ URL::to("/") }}/clinicalTeamMonitoringReport';
   }


   function export_excel(){
      var branch_id = $('#branch_id').val();
      var userName = $('#userName').val();
      var role_name = $('#role_name').val();
      var user_status = $('#user_status').val();
      var from_date = $('#from_date').val();
      var to_date = $('#to_date').val();
      var year = $('#year').val();
      var month = $('#month').val();
      $('.tabloadershow').show();
      window.location.href='{{ URL::to("/") }}/clinicalTeamMonitoringReport?type=Export&branch_id='+branch_id+'&user_id='+userName+'&role_name='+role_name+'&user_status='+user_status+'&year='+year+'&month='+month+'&from_date='+from_date+'&to_date='+to_date;
      setTimeout(function (){
         $(".tabloadershow").hide();
      },2000);
   }


   </script>
   @endsection