@extends('monitoring/layout.app')
@section('title', 'BettrAi | Patient Engagement- Chat Messages')
@section('content')
<style type="text/css">
   .font-size-lg {
      font-size: 12px !important;
   }
   .font-weight-bold {
      font-weight: normal !important;
   }
   .p-5 {
      padding: 6px !important;
   }
   .mt-2, .my-2 {
      margin-top: 1px !important;
   }
   .font-size-h6 {
      font-size: 12px !important;
   }
   .fa-phone-volume{
      color : #7337EE !important;
   }
   .logged-in {
      color: #11d911;
      font-size: 30px;
      position: absolute;
      top: 35%;
      left: 65%;
   }
   .file_attach_style{
      padding: 15px 12px;
      background: #f2f2f2;
      border-radius: 7px;
   }
   .docfaicon_style{
      padding-right : 12px;
   }
   .downfaicon_style{
      padding-left : 12px;
   }
   .attach_image{
      height: 100px;
      width: 200px;
      border-radius: 7px;
      border: 2px solid #ddd;
   }
   .preview_image{
      height: 60px;
      width: 120px;
      border-radius: 7px;
      border: 2px solid #ddd;
      margin-bottom: 20px;
   }
   .remove_preview{
      position: absolute;
      left: 85%;
      bottom: 85%;
   }
   .dropdown-menu.dropdown-menu-md {
      width: 150px !important;
      transform: translate3d(-123px, -92px, 0px) !important;
   }
   .message_count_badge {
      padding: 12px 15px;
      font-size: 12px;
      border: 0;
   }
   .chat_list_div{
      scrollbar-color: rgba(var(--black-rgb),.2) rgba(var(--white-rgb),.1);
      scrollbar-width: thin !important;
      overflow-x: hidden !important;
      overflow-y: scroll !important;
   }
   .add_more_btn{
      padding: 30px;
      height: 50px;
      width: 50px;
      border-radius: 10px !important;
      border: none;
   }
   .modal-content{
      background-color: transparent !important;
   }
   .body_modal{
      text-align:center;
   }
   .modal-body{
      padding: 1px !important;
   }
   .modal-header{
      border-bottom: none !important;
   }
   .close_button{
      background: #fff !important;
      padding: 5px !important;
      border-radius: 5px !important;
   }
   .symbol.symbol-50 > img {
      width: 50px !important;
      height: 50px !important;
   }
   .inner_container{
      padding: 0 5px !important;
   }
   @media (min-width: 992px){
      .content {
         padding: 3px 0 !important;
      }
   }
</style>
<div class="content d-flex flex-column flex-column-fluid" id="kt_content">
   <div class="d-flex flex-column-fluid">
      <!--begin::Container-->
      <div class="container inner_container">
         <div class="d-flex flex-row">
            <!--begin::Aside-->
            <div class="flex-row-auto offcanvas-mobile w-350px w-xl-400px" id="kt_chat_aside">
               <!--begin::Card-->
               <div class="card card-custom">
                  <!--begin::Body-->
                  <div class="card-body">
                     <ul class="nav nav-tabs nav-bold nav-tabs-line">
                        <li class="nav-item">
                           <a class="nav-link active" data-toggle="tab" href="#kt_tab_pane_1_4" onclick="load_users_list('patients','load','loader','messages')">
                              <span class="nav-icon">
                                 <i class="fas fa-user-injured"></i>
                              </span>
                              <span class="nav-text">Patients</span>
                              <button id="patient_message_countlar" class="label label-sm label-success message_count_badge">0</button>
                           </a>
                        </li>
                        <!-- <li class="nav-item">
                           <a class="nav-link" data-toggle="tab" href="#kt_tab_pane_2_4" onclick="load_users_list('users','load','loader','messages')">
                              <span class="nav-icon">
                                 <i class="fas fa-user-md"></i>
                              </span>
                              <span class="nav-text">Care Team</span>
                              <button id="user_message_countlar" class="label label-sm label-success message_count_badge">0</button>
                           </a>
                        </li> -->
                     </ul>
                     <div class="tab-content mt-5" id="myTabContent">
                        <div class="tab-pane fade show active" id="kt_tab_pane_1_4" role="tabpanel" aria-labelledby="kt_tab_pane_1_4">
                           <!--begin:Search-->
                           <div class="input-group input-group-solid">
                              <div class="input-group-prepend">
                                 <span class="input-group-text">
                                    <span class="svg-icon svg-icon-lg">
                                       <!--begin::Svg Icon | path:assets/media/svg/icons/General/Search.svg-->
                                       <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                          <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                             <rect x="0" y="0" width="24" height="24" />
                                             <path d="M14.2928932,16.7071068 C13.9023689,16.3165825 13.9023689,15.6834175 14.2928932,15.2928932 C14.6834175,14.9023689 15.3165825,14.9023689 15.7071068,15.2928932 L19.7071068,19.2928932 C20.0976311,19.6834175 20.0976311,20.3165825 19.7071068,20.7071068 C19.3165825,21.0976311 18.6834175,21.0976311 18.2928932,20.7071068 L14.2928932,16.7071068 Z" fill="#000000" fill-rule="nonzero" opacity="0.3" />
                                             <path d="M11,16 C13.7614237,16 16,13.7614237 16,11 C16,8.23857625 13.7614237,6 11,6 C8.23857625,6 6,8.23857625 6,11 C6,13.7614237 8.23857625,16 11,16 Z M11,18 C7.13400675,18 4,14.8659932 4,11 C4,7.13400675 7.13400675,4 11,4 C14.8659932,4 18,7.13400675 18,11 C18,14.8659932 14.8659932,18 11,18 Z" fill="#000000" fill-rule="nonzero" />
                                          </g>
                                       </svg>
                                       <!--end::Svg Icon-->
                                    </span>
                                 </span>
                              </div>
                              <input type="text" id="search_patient_keyword" onkeyup="load_users_list('patients','search','loader','')" class="form-control h-auto" placeholder="Search Patients" />
                              <div class="search_loader_patients" style="display:none;"><img id="small_loader_img" alt="Logo" src="{{ url('assets/images/ui-anim_basic_16x16.gif') }}" class="logo-sticky max-h-35px" /></div>
                              <div class="input-group-prepend">
                                 <span class="input-group-text" onclick="clear_search_data('patients')" style="cursor:pointer;">
                                    <i class="fa fa-times"></i>
                                 </span>
                              </div>
                           </div>
                           <!--end:Search-->
                           <!--begin:Users-->
                           <div class="mt-3 patientslist_div chat_list_div">
                              <!--end:User-->
                           </div>
                        </div>
                        <div class="tab-pane fade" id="kt_tab_pane_2_4" role="tabpanel" aria-labelledby="kt_tab_pane_2_4">
                           <!--begin:Search-->
                           <div class="input-group input-group-solid">
                              <div class="input-group-prepend">
                                 <span class="input-group-text">
                                    <span class="svg-icon svg-icon-lg">
                                       <!--begin::Svg Icon | path:assets/media/svg/icons/General/Search.svg-->
                                       <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                          <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                             <rect x="0" y="0" width="24" height="24" />
                                             <path d="M14.2928932,16.7071068 C13.9023689,16.3165825 13.9023689,15.6834175 14.2928932,15.2928932 C14.6834175,14.9023689 15.3165825,14.9023689 15.7071068,15.2928932 L19.7071068,19.2928932 C20.0976311,19.6834175 20.0976311,20.3165825 19.7071068,20.7071068 C19.3165825,21.0976311 18.6834175,21.0976311 18.2928932,20.7071068 L14.2928932,16.7071068 Z" fill="#000000" fill-rule="nonzero" opacity="0.3" />
                                             <path d="M11,16 C13.7614237,16 16,13.7614237 16,11 C16,8.23857625 13.7614237,6 11,6 C8.23857625,6 6,8.23857625 6,11 C6,13.7614237 8.23857625,16 11,16 Z M11,18 C7.13400675,18 4,14.8659932 4,11 C4,7.13400675 7.13400675,4 11,4 C14.8659932,4 18,7.13400675 18,11 C18,14.8659932 14.8659932,18 11,18 Z" fill="#000000" fill-rule="nonzero" />
                                          </g>
                                       </svg>
                                       <!--end::Svg Icon-->
                                    </span>
                                 </span>
                              </div>
                              <input type="text" id="search_user_keyword" onkeyup="load_users_list('users','search','loader','')" class="form-control h-auto" placeholder="Search Care Team" />
                              <div class="search_loader_users" style="display:none;"><img id="small_loader_img" alt="Logo" src="{{ url('assets/images/ui-anim_basic_16x16.gif') }}" class="logo-sticky max-h-35px" /></div>
                              <div class="input-group-prepend">
                                 <span class="input-group-text" onclick="clear_search_data('users')" style="cursor:pointer;">
                                    <i class="fa fa-times"></i>
                                 </span>
                              </div>
                           </div>
                           <!--end:Search-->
                           <div class="mt-3 userslist_div chat_list_div">
                           </div>
                           <!--end:User-->
                        </div>
                     </div>
                     <!--end:Users-->
                  </div>
                  <!--end::Body-->
               </div>
               <!--end::Card-->
            </div>
            <!--end::Aside-->
            <!--begin::Content-->
            <div class="flex-row-fluid ml-lg-8" id="kt_chat_content">
               <!--begin::Card-->
               <div class="card card-custom">
                  <!--begin::Header-->
                  <div class="card-header align-items-center px-4 pb-3">
                     <div class="flex-grow-1">
                        <div class="row">
                           <div class="col-10">
                              <div id="header_title" class="text-dark-75 font-weight-bold font-size-h5"></div>
                              <!-- <div>
                                 <span class="label label-sm label-dot label-success"></span>
                                 <span class="font-weight-bold text-muted font-size-sm">Active</span>
                              </div> -->
                           </div>
                           <div class="col-2">
                              <a id="audio_request_icon" href="javascript:void(0)" onclick="sendAudioCallRequest()" class="navi-item audioIcon" data-toggle="tooltip" title="Request for Audio Call">
                                 <div class="symbol symbol-40 bg-light mr-3" style="margin-top: 6px;">
                                    <div class="symbol-label">
                                       <span class="svg-icon svg-icon-md svg-icon-success">
                                          <i class="fa fa-phone-volume"></i>
                                       </span>
                                    </div>
                                 </div>
                              </a>
                           </div>
                        </div>
                     </div>
                  </div>
                  <!--end::Header-->
                  <!--begin::Body-->
                  <div class="card-body" id="message_content_div">
                     <!--begin::Scroll-->
                     <div class="scroll scroll-pull" data-mobile-height="300">
                        <!--begin::Messages-->
                        <div class="messages">
                        </div>
                        <!--end::Messages-->
                     <!--end::Scroll-->
                  </div>
                  <!--end::Body-->
                  <!--begin::Footer-->
                  <div class="card-footer align-items-center">
                     <form name="chat_message_form" id="chat_message_form">
                        <input type="hidden" name="sender_id" id="sender_id" value="{{ $user_id }}">
                        <input type="hidden" name="sender_uname" id="sender_uname" value="{{ $username }}">
                        <input type="hidden" name="receiver_id" id="receiver_id" value="">
                        <input type="hidden" name="receiver_uname" id="receiver_uname" value="">
                        <!--begin::Compose-->
                        <div class="row" id="upload_image_previewer">
                        </div>
                        <div class="row">
                           <input type="file" id="chat_file" name="chat_file[]" multiple style="display:none" onchange="preview_file_attachments(this)"/> 
                           <input type="file" id="virtual_chat_file" name="virtual_chat_file[]" multiple style="display:none" onchange="virtual_file_attachments(this)"/> 
                           <div class="col-1 chat_message_div">
                              <span class="svg-icon svg-icon-md svg-icon-success">
                                 <a href="javascript:void(0)" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <i class="fa fa-paperclip"></i>
                                 </a>
                                 <div class="dropdown-menu dropdown-menu-md dropdown-menu-right" style="">
                                    <!--begin::Navigation-->
                                    <ul class="navi navi-hover ">
                                       <li class="navi-item">
                                          <a href="javascript:void(0)" class="navi-link" onclick="open_browse('document')">
                                             <span class="navi-icon"><i class="fa fa-file"></i></span>
                                             <span class="navi-text">Document</span>
                                          </a>
                                       </li>
                                       <li class="navi-item">
                                          <a href="javascript:void(0)" class="navi-link" onclick="open_browse('image')">
                                             <span class="navi-icon"><i class="fa fa-image"></i></span>
                                             <span class="navi-text">Image</span>
                                          </a>
                                       </li>
                                    </ul>
                                    <!--end::Navigation-->
                                 </div>
                              </span>
                           </div>
                           <div class="col-9 chat_message_div">
                              <textarea name="chat_message" id="chat_message" class="form-control border-0 p-0 textarea_form" rows="2" maxlength="5000" placeholder="Type a message" onfocus="update_message_status();"></textarea>
                              <span style="font-size:10px;float:right;">(Max 5000 characters allowed)</span>
                           </div>
                           <div class="col-2 chat_message_div">
                              <button type="button" onclick="sendMessage();" class="btn btn-primary btn-md text-uppercase font-weight-bold chat-send py-2 px-6">Send</button>
                              <img id="loader_img" style="display:none;" alt="Logo" src="{{ url('assets/images/ui-anim_basic_16x16.gif') }}" class="logo-sticky max-h-35px" />
                           </div>
                           <div class="col-12 chat_permission_div" style="display: none;">
                              <p class="text-center" style="font-size: 18px;" id="chat_permission_msg">Physician Cedars does not have chat permissions</p>
                           </div>
                        </div>
                        <!--begin::Compose-->
                     </form>
                  </div>
                  <!--end::Footer-->
               </div>
               <!--end::Card-->
            </div>
            <!--end::Content-->
         </div>
         
      </div>
      <!--end::Container-->
   </div>
   <!--end::Entry-->
</div>

<div class="modal fade" id="image_overview" tabindex="-1" role="dialog" aria-labelledby="image_overview" aria-hidden="true">
   <div class="modal-dialog modal-dialog-top" role="document">
      <div class="modal-content">
         <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel"></h5>
            <button type="button" class="close close_button" data-dismiss="modal" aria-label="Close">
               <i aria-hidden="true" class="ki ki-close fa-1x" style="color: #000;"></i>
            </button>
         </div>
         <div class="modal-body body_modal" id="display_image" >	
            
         </div>
      </div>
   </div>
</div><!--Modal 1 Ends-->

<div id="divLoading" class="tabloadershow"></div>
<input type="hidden" name="user_image" id="user_image" value="{{ $user_image_url }}">
<input type="hidden" name="sender_fullname" id="sender_fullname" value="{{ $user_full_name }}">
<input type="hidden" name="list_type" id="list_type" value="">

<script src="{{ url('/custom/js/scripts.bundle.js') }}"></script>
<script src="{{ url('/assets/js/pages/custom/chat/chat.js') }}"></script>
<script src="{{ $chat_js_url }}"></script>
<script type="text/javascript">
   var window_height = $(window).height();
   console.log("win hgt-"+window_height);
   var div_height = Math.round(window_height * 68.50/100);
   $('.chat_list_div').attr('style','height: '+div_height+'px !important');

   // var chat_div_height = Math.round(window_height * 46.65/100);
   // $('.chat_messages_div').attr('style','height: '+chat_div_height+'px !important');
   // var $target = $('html,body'); 
   // $target.animate({scrollTop: $target.height()}, 300);
   $("#chat_message").keyup(function (e) {
      if (e.which == 13) {
         sendMessage();
      }
   });
   // $("#search_term").keyup(function (e) {
   //    if (e.which == 13) {
   //       get_filter_compliance();
   //    }
   // });
   
   var first_user_id = $('#first_user_id').val();
   var first_username = $('#first_username').val();
   var first_user_fullname = $('#first_user_fullname').val();
   var first_user_audio = $('#first_user_audio').val();
   var first_user_chat = $('#first_user_chat').val();

   var sender_uname=$('#sender_uname').val();
   const FADE_TIME = 150; // ms
   const TYPING_TIMER_LENGTH = 400; // ms
   // Initialize variables
   const $window = $(window);
   //const $usernameInput = $('.chat_message'); // Input for username
   const $messages = $('.messages');           // Messages area
   const $inputMessage = $('#chat_message');   // Input message input box

   //const $loginPage = $('.login.page');        // The login page
   //const $chatPage = $('.chat.page');          // The chatroom page

   //const socket = io();

   // Prompt for setting a username
   let connected = true;
   let typing = false;
   let lastTypingTime;
   var socket = io.connect('{{ $chat_url }}', {'transports': ['websocket', 'polling']});
   
   socket.emit('add_user', {"username":sender_uname});

   //   // Prevents input from having injected markup
   function cleanInput(input){
      return $('<div/>').text(input).html();
   }
   function sendMessage(){
      var sender_image=$('#user_image').val();
      var sender_id=$('#sender_id').val();
      var receiver_id=$('#receiver_id').val();
      var receiver_uname=$('#receiver_uname').val();
      var sender_fullname=$('#sender_fullname').val();
      //current date and time
      var now     = new Date(); 
      var year    = now.getFullYear();
      var month   = now.getMonth()+1; 
      var day     = now.getDate();
      var hour    = now.getHours();
      var minute  = now.getMinutes();
      var second  = now.getSeconds(); 
      if(month.toString().length == 1) {
         month = '0'+month;
      }
      if(day.toString().length == 1) {
         day = '0'+day;
      }   
      if(hour.toString().length == 1) {
         hour = '0'+hour;
      }
      if(minute.toString().length == 1) {
         minute = '0'+minute;
      }
      if(second.toString().length == 1) {
         second = '0'+second;
      }   
      //var dateTime = year+'-'+month+'-'+day+' '+hour+':'+minute+':'+second;   
      var time_value = hour+''+minute;
      let message = $inputMessage.val();
   
      //UTC date and time
      var nowdate     = new Date();
      var year    = nowdate.getUTCFullYear();
      var month   = nowdate.getUTCMonth()+1; 
      var day     = nowdate.getUTCDate();
      var hour    = nowdate.getUTCHours();
      var minute  = nowdate.getUTCMinutes();
      var second  = nowdate.getUTCSeconds(); 
      if(month.toString().length == 1) {
         month = '0'+month;
      }
      if(day.toString().length == 1) {
         day = '0'+day;
      }   
      if(hour.toString().length == 1) {
         hour = '0'+hour;
      }
      if(minute.toString().length == 1) {
         minute = '0'+minute;
      }
      if(second.toString().length == 1) {
         second = '0'+second;
      }   
      var dateTime = year+'-'+month+'-'+day+' '+hour+':'+minute+':'+second;   

      // Prevent markup from being injected into the message
      message = cleanInput(message);
      // if there is a non-empty message and a socket connection
      if (message && connected) {
         $inputMessage.val('');
         addChatMessage({ message,sender_image,time_value,sender_id,receiver_id,sender_fullname });
         // tell server to execute 'new messsage' and send along one parameter
         // socket.emit('new message', message);
         socket.emit('new_user_message', {
                              "message":message,
                              "sender_id":sender_id,
                              "receiver_id":receiver_id,
                              "sender_uname":sender_uname,
                              "receiver_uname":receiver_uname,
                              "sender_image":'',
                              "sender_fullname":sender_fullname,
                              "message_time":dateTime,
                              "time_value":time_value
                           });
      }
      if ($('#chat_file').get(0).files.length !== 0) {
         file_attachment_func();
      }
   }
   //   // Adds the visual chat message to the message list
   function addChatMessage(data){
      // Don't fade the message in if there is an 'X was typing'
      var message_sender_id=$('#sender_id').val();
      if(data.sender_id==message_sender_id){
         const $messageDiv = $('<div class="d-flex flex-column mb-5 align-items-end">'+
                           '<div class="d-flex align-items-center">'+
                              '<div>'+
                                 '<span class="text-muted font-size-sm mr-3">'+data.time_value.replace(':','')+'</span>'+
                                 '<a href="#" class="text-dark-75 text-hover-primary font-weight-bold font-size-h6"> You</a>'+
                              '</div>'+
                           '</div>'+
                           '<div class="mt-2 rounded p-5 bg-light-primary text-dark-50 font-weight-bold font-size-lg text-left max-w-400px">'+data.message+'</div>'+
                        '</div>');
         addMessageElement($messageDiv,data.sender_id,data.receiver_id);
      } else {
         const $messageDiv = $('<div class="d-flex flex-column mb-5 align-items-start">'+
                           '<div class="d-flex align-items-center">'+
                              '<div>'+
                                 '<a href="#" class="text-dark-75 text-hover-primary font-weight-bold font-size-h6 notranslate">'+data.sender_fullname+'</a>'+
                                 '<span class="text-muted font-size-sm mr-3"> '+data.time_value.replace(':','')+'</span>'+
                              '</div>'+
                           '</div>'+
                           '<div class="mt-2 rounded p-5 bg-light-success text-dark-50 font-weight-bold font-size-lg text-left max-w-400px">'+data.message+'</div>'+
                        '</div>');
         addMessageElement($messageDiv,data.sender_id,data.receiver_id);
      }
   }

   function addChatFile(data){
      // Don't fade the message in if there is an 'X was typing'
      var message_sender_id=$('#sender_id').val();
      var file_type_var = "'"+data.file_type+"'";
      var file_path_url = "'"+data.file_path_url+"'";
      if(data.sender_id==message_sender_id){
         if(data.file_type=='image'){
            var messageDiv = '<div class="d-flex flex-column mb-5 align-items-end">'+
                                    '<div class="d-flex align-items-center">'+
                                       '<div>'+
                                          '<span class="text-muted font-size-sm mr-3">'+data.time_value.replace(':','')+'</span>'+
                                          '<a href="#" class="text-dark-75 text-hover-primary font-weight-bold font-size-h6"> You</a>'+
                                       '</div>'+
                                    '</div>'+
                                    '<a href="javascript:void(0)" onclick="download_file('+file_type_var+','+file_path_url+')">'+
                                       '<img src="'+data.file_path_url+'" class="attach_image">'+
                                    '</a>'+
                                 '</div>';
         } else {
            var messageDiv = '<div class="d-flex flex-column mb-5 align-items-end">'+
                                    '<div class="d-flex align-items-center">'+
                                      '<div>'+
                                          '<span class="text-muted font-size-sm mr-3">'+data.time_value.replace(':','')+'</span>'+
                                          '<a href="#" class="text-dark-75 text-hover-primary font-weight-bold font-size-h6">You</a>'+
                                       '</div>'+
                                    '</div>'+
                                    '<div class="file_attach_style">'+
                                       '<span class="svg-icon svg-icon-md svg-icon-success docfaicon_style">'+
                                          '<a href="javascript:void(0)" onclick="download_file('+file_type_var+','+file_path_url+')"><i class="fa fa-file"></i></a>'+
                                       '</span>'+
                                       '<a href="javascript:void(0)" onclick="download_file('+file_type_var+','+file_path_url+')">'+data.file_name+'</a>'+
                                       '<span class="svg-icon svg-icon-md svg-icon-success downfaicon_style">'+
                                          '<a href="javascript:void(0)" onclick="download_file('+file_type_var+','+file_path_url+')"><i class="fa fa-download"></i></a>'+
                                       '</span>'+
                                    '</div>'+
                                 '</div>';
         }
         addMessageElement(messageDiv,data.sender_id,data.receiver_id);
      } else {
         if(data.file_type=='image'){
            var messageDiv = '<div class="d-flex flex-column mb-5 align-items-start">'+
                                    '<div class="d-flex align-items-center">'+
                                       '<div>'+
                                          '<a href="#" class="text-dark-75 text-hover-primary font-weight-bold font-size-h6">'+data.sender_fullname+'</a>'+
                                          '<span class="text-muted font-size-sm mr-3"> '+data.time_value.replace(':','')+'</span>'+
                                       '</div>'+
                                    '</div>'+
                                    '<a href="javascript:void(0)" onclick="download_file('+file_type_var+','+file_path_url+')">'+
                                       '<img src="'+data.file_path_url+'" class="attach_image">'+
                                    '</a>'+
                                 '</div>';
         } else {
            var messageDiv = '<div class="d-flex flex-column mb-5 align-items-start">'+
                                    '<div class="d-flex align-items-center">'+
                                       '<div>'+
                                          '<a href="#" class="text-dark-75 text-hover-primary font-weight-bold font-size-h6">'+data.sender_fullname+'</a>'+
                                          '<span class="text-muted font-size-sm mr-3"> '+data.time_value.replace(':','')+'</span>'+
                                       '</div>'+
                                    '</div>'+
                                    '<div class="file_attach_style">'+
                                       '<span class="svg-icon svg-icon-md svg-icon-success docfaicon_style">'+
                                          '<a href="javascript:void(0)" onclick="download_file('+file_type_var+','+file_path_url+')"><i class="fa fa-file"></i></a>'+
                                       '</span>'+
                                       '<a href="javascript:void(0)" onclick="download_file('+file_type_var+','+file_path_url+')">'+data.file_name+'</a>'+
                                       '<span class="svg-icon svg-icon-md svg-icon-success downfaicon_style">'+
                                          '<a href="javascript:void(0)" onclick="download_file('+file_type_var+','+file_path_url+')"><i class="fa fa-download"></i></a>'+
                                       '</span>'+
                                    '</div>'+
                                 '</div>';
         }
         addMessageElement(messageDiv,data.sender_id,data.receiver_id);
      }
   }

   function addMessageElement(el,sender_id,receiver_id){
      var message_sender_id=$('#sender_id').val();
      const $el = $(el);
      if(message_sender_id==sender_id){
         $('#messages_div_'+receiver_id).append($el);
      } else {
         $('#messages_div_'+sender_id).append($el);
      }
      
      //$messages[0].scrollTop = $messages[0].scrollHeight;
      $('.scroll-pull').animate({scrollTop: $('.scroll-pull').prop("scrollHeight")}, 300);
      var list_type = $('#list_type').val();
      $('#search_user_keyword').val('');
      $('#search_patient_keyword').val('');
      setTimeout(function (){	
         load_users_list(list_type,'load','','');
      },1200);
   }

   function sendFileAttachment(file_name, file_path_url, file_mime_type, file_type,file_height,file_width){
      var sender_image=$('#user_image').val();
      var sender_id=$('#sender_id').val();
      var receiver_id=$('#receiver_id').val();
      var receiver_uname=$('#receiver_uname').val();
      var sender_fullname=$('#sender_fullname').val();
      //current date and time
      var now     = new Date(); 
      var year    = now.getFullYear();
      var month   = now.getMonth()+1; 
      var day     = now.getDate();
      var hour    = now.getHours();
      var minute  = now.getMinutes();
      var second  = now.getSeconds(); 
      if(month.toString().length == 1) {
         month = '0'+month;
      }
      if(day.toString().length == 1) {
         day = '0'+day;
      }   
      if(hour.toString().length == 1) {
         hour = '0'+hour;
      }
      if(minute.toString().length == 1) {
         minute = '0'+minute;
      }
      if(second.toString().length == 1) {
         second = '0'+second;
      }   
      //var dateTime = year+'-'+month+'-'+day+' '+hour+':'+minute+':'+second;   
      var time_value = hour+''+minute;
      //let message = file_name;
   
      //UTC date and time
      var nowdate     = new Date();
      var year    = nowdate.getUTCFullYear();
      var month   = nowdate.getUTCMonth()+1; 
      var day     = nowdate.getUTCDate();
      var hour    = nowdate.getUTCHours();
      var minute  = nowdate.getUTCMinutes();
      var second  = nowdate.getUTCSeconds(); 
      if(month.toString().length == 1) {
         month = '0'+month;
      }
      if(day.toString().length == 1) {
         day = '0'+day;
      }   
      if(hour.toString().length == 1) {
         hour = '0'+hour;
      }
      if(minute.toString().length == 1) {
         minute = '0'+minute;
      }
      if(second.toString().length == 1) {
         second = '0'+second;
      }   
      var dateTime = year+'-'+month+'-'+day+' '+hour+':'+minute+':'+second;   

      // Prevent markup from being injected into the message
      //message = cleanInput(message);
      // if there is a non-empty message and a socket connection
      if (connected) {
         $inputMessage.val('');
         addChatFile({ file_name,file_path_url,file_mime_type,file_type,sender_image,time_value,sender_id,receiver_id,sender_fullname });
         // tell server to execute 'new messsage' and send along one parameter
         //socket.emit('new message', message);
         socket.emit('new_user_fileattachment', {
                              "file_name":file_name,
                              "file_path_url":file_path_url,
                              "file_mime_type":file_mime_type,
                              "file_type":file_type,
                              "file_height":file_height,
                              "file_width":file_width,
                              "sender_id":sender_id,
                              "receiver_id":receiver_id,
                              "sender_uname":sender_uname,
                              "receiver_uname":receiver_uname,
                              "sender_image":'',
                              "sender_fullname":sender_fullname,
                              "message_time":dateTime,
                              "time_value":time_value
                           });
      }
   }

   socket.on('new_user_message', (data) => {
      addChatMessage(data);
      getUnreadMsgCount();
   });

   socket.on('new_user_fileattachment', (data) => {
      addChatFile(data);
      getUnreadMsgCount();
   });
   
   socket.on('get_usernames', (data) => {
      $('.logged-in').hide();
      var arrayLength = data.length;
      for (var i = 0; i < arrayLength; i++) {
         $('#'+data[i]+'_status').show();
         //Do something
      }
   });
   load_users_list('patients','load','loader','messages');
   function load_users_list(type, list_type, loader, messages){
      var img_url = "{{ url('assets/images/ui-anim_basic_16x16.gif') }}";
      if(type=='users'){
         var search_val = $('#search_user_keyword').val();
         if(loader!=''){
            $('.userslist_div').html('<div style="text-align:center;"><img src="'+img_url+'"></div>');
         }
      } else {
         var search_val = $('#search_patient_keyword').val();
         if(loader!=''){
            $('.patientslist_div').html('<div style="text-align:center;"><img src="'+img_url+'"></div>');
         }
      }
      var url = "{{ url('/loadUsersList') }}?type="+type+"&search_val="+search_val;
      $.ajax({
         type: "GET",
         url:  url,
         success:function(data)
         {  
            if(data.hasOwnProperty("status") && data['status']=="validation"){
              swal(data.message); return false;
            }
            var data_array = data.split("@@@"); 
            if(type=='users'){
               $('.userslist_div').html(data_array[5]);
            } else {
               $('.patientslist_div').html(data_array[5]);
            }
            if(data_array[0]!='--' && list_type=='load'){
               $('#search_user_keyword').val('');
               $('#search_patient_keyword').val('');
               $('#list_type').val(type);
               if(messages!=''){
                  load_user_messages(data_array[0],data_array[1],data_array[2],data_array[3],data_array[4]);
               }
            }
            setTimeout(function (){	
               get_user_images(type,search_val);
            },1000);
         }
      });
      
   }

   function get_user_images(type,search_val){
      var url = "{{ url('/loadUsersImages') }}?type="+type+"&search_val="+search_val;
      $.ajax({
         type: "GET",
         //dataType:"json",
         url:  url,
         success:function(json_data)
         {
             if(json_data.hasOwnProperty("status") && json_data['status']=="db_error"){
                 swal(json_data.message); return false;
               }
            var cdata = jQuery.parseJSON(json_data);
            $.each(cdata, function(key, value) {
               $('#user_img_'+value.user_id).attr('src',value.image_url);
            });
         }
      });
   }

   function clear_search_data(type){
      var user_search = $('#search_user_keyword').val();
      var patient_search = $('#search_patient_keyword').val();
      if(user_search!='' || patient_search!=''){
         $('#search_user_keyword').val('');
         $('#search_patient_keyword').val('');
         load_users_list(type,'load','loader','');
      }
   }

   function load_user_messages(user_id,username, user_ful_name,user_audio,user_chat){
      $('.scroll-pull').animate({scrollTop: 0}, 300);
      var img_url = "{{ url('assets/images/ui-anim_basic_16x16.gif') }}";
      $('.messages').html('<div style="text-align:center;"><img src="'+img_url+'"></div>');
      $('#receiver_id').val(user_id);
      $('#receiver_uname').val(username);
      $('.messages').attr('id','messages_div_'+user_id);
      var user_image_src = $("#user_img_"+user_id).attr("src");
      var user_image = '<div class="symbol symbol-circle symbol-50 mr-3"><img id="user_img_'+user_id+'" alt="Pic" src="'+user_image_src+'"></div>';
      $('#header_title').html(user_image+' <span style="position:absolute;top:15px;">'+user_ful_name+'</span>');
      $(".user_list_tiles").css('background','none');
      $('#userdiv_'+user_id).css('background','#F3F6F9');
      var list_type = $('#list_type').val();
      if(list_type=='users'){
         $('.audioIcon').show();
      }else{
         $('.audioIcon').hide();
      }
      if(list_type=='users'){
         var perm_link_url = "{{ url('/checkChatAudioPermission') }}?chat_user_id="+user_id+"&username="+username;
         $.ajax({
            type: "GET",
            dataType:"json",
            url:  perm_link_url,
            success:function(data)
            {
               if(data.hasOwnProperty("status") && data['status']=="validation"){
                 swal(data.message); return false;
               }
               var user_audio = data.audio_perm;
               var user_chat = data.chat_perm;
               if(user_audio == 1){
                  $('.audioIcon').show();
               }else{
                  $('.audioIcon').hide();
               }
               if(user_chat == 1){
                  $('.chat_message_div').show();
                  $('.chat_permission_div').hide();
               }else{
                  $('.chat_message_div').hide();
                  $('.chat_permission_div').show();
                  $('#chat_permission_msg').html(user_ful_name + ' does not have chat permissions');
               }
            }
         });
      }
      
      var url = "{{ url('/userChatMessages') }}?chat_user_id="+user_id+"&username="+username;
      var logged_user_id = '{{ $user_id }}';
      $.ajax({
         type: "GET",
         //dataType:"json",
         url:  url,
         success:function(data)
         {
          if(data.hasOwnProperty("status") && data['status']=="validation"){
              swal(data.message); return false;
            }
            $('.messages').html(data);
            $('.scroll-pull').animate({scrollTop: $('.scroll-pull').prop("scrollHeight")}, 300);
            var window_height = $('#message_content_div').height();
            var div_height = Math.round(window_height - 40);
            $('.chat_list_div').attr('style','height: '+div_height+'px !important');
         }
      });
      updateMessageStatus(logged_user_id,user_id);
      getUnreadMsgCount();
   }

   function updateMessageStatus(sender_id,receiver_id){
      var url = "{{ url('/updateMessageStatus') }}?sender_id="+sender_id+"&receiver_id="+receiver_id;
      $.ajax({
         type: "GET",
         //dataType:"json",
         url:  url,
         success:function(data)
         {
            if(data.hasOwnProperty("status") && data['status']=="validation"){
              swal(data.message); return false;
            }
            $('#message_count_'+receiver_id).hide();
				$('#message_count_'+receiver_id).html('0');
         }
      });
   }
   
   function open_browse(type){
      if(type=='image'){
         $('#chat_file').attr('accept','image/*');
      } else {
         $('#chat_file').attr('accept','.pdf,.doc,.xls,.xlsx');
      }
      $('#upload_image_previewer').html('');
      $('#chat_file').trigger('click');
   }

   function preview_file_attachments(input){
      //var input = $("input[type=file]")
      var sel_type = $('#chat_file').attr('accept');
      if (input.files) {
         var filesAmount = input.files.length;
         for (var i = 0; i < filesAmount; i++) {
               var reader = new FileReader();
               var fileName = input.files[i].name;
               var fileMimeType = input.files[i].type;
               var mim_type_array = fileMimeType.split("/");
               var temp_url = URL.createObjectURL(input.files[i]);
               if(mim_type_array[0]=='image'){
                  var preview_html = '<div class="col-3" id="preview_file_'+i+'">'+
                                          '<span class="svg-icon svg-icon-md svg-icon-success remove_preview">'+
                                             '<a href="javascript:void(0)" onclick="remove_preview('+i+')"><i class="fa fa-times" style="color:#f26c85;"></i></a>'+
                                          '</span>'+
                                          '<img src="'+temp_url+'" class="preview_image">'+
                                       '</div>';
               } else {
                  var preview_html = '<div class="col-3" id="preview_file_'+i+'">'+
                                          '<span class="svg-icon svg-icon-md svg-icon-success remove_preview">'+
                                             '<a href="javascript:void(0)" onclick="remove_preview('+i+')"><i class="fa fa-times" style="color:#f26c85;"></i></a>'+
                                          '</span>'+
                                          '<div class="file_attach_style notranslate" title="'+fileName+'">'+fileName.slice(0,12)+'...</div>'+
                                       '</div>';
               }
               $('#upload_image_previewer').append(preview_html);
               reader.readAsDataURL(input.files[i]);
         }
         $('#upload_image_previewer').append('<div class="col-3"><a href="javascript:void(0)" onclick="add_more_files()" class="label label-sm add_more_btn"><i class="fa fa-plus" style="color:#9f9797"></i></a></div>');
         
         var $target = $('html,body'); 
         $target.animate({scrollTop: $target.height()}, 300);
      }
   }

   function remove_preview(preview_id){ 
      $('#preview_file_'+preview_id).remove();
      const dt = new DataTransfer()
      const input = document.getElementById('chat_file');
      const { files } = input;
      for (let i = 0; i < files.length; i++) {
         const file = files[i]
         if (preview_id !== i){
            dt.items.add(file); // here you exclude the file. thus removing it.
         }
      }
      input.files = dt.files; // Assign the updates list
      if(input.files.length==0){
         $('#upload_image_previewer').html('');
      }
   }

   function file_attachment_func(){
      var formData = new FormData();
      formData = new FormData($('#chat_message_form')[0]);
      formData.append( "_token", '{{csrf_token()}}' ); 
      var post_url = "{{URL::to('/saveChatAttachment')}}";
      var img_url = "{{ url('assets/images/ui-anim_basic_16x16.gif') }}";
      $('#upload_image_previewer').append('<div style="text-align:center;"><img src="'+img_url+'"></div>');
      $.ajax({
         type : "POST",
         url : post_url,
         data : formData,
         dataType: 'json',
         contentType: false,
         processData: false,
         success : function(result){	
            if(result.hasOwnProperty("status") && result['status']=="validation"){
              swal(result.message); return false;
            }
            $.each(result, function(key,value) {
               var file_name = value.file_name;
               var file_path_url = value.file_path_url;
               var file_mime_type = value.file_mime_type;
               var file_height = value.file_height;
               var file_width = value.file_width;
               var file_type = value.file_type;
               sendFileAttachment(file_name, file_path_url, file_mime_type, file_type,file_height,file_width);
            });
            $('#chat_file').val('');
            $('#upload_image_previewer').html(''); 
         }
      });
   }

   function download_file(file_type, file_url){
      if(file_type=='image'){
         $('#display_image').html('<img src="'+file_url+'" style="max-height:100%; max-width:100%;">');
         $('#image_overview').modal('show');
      } else {
         window.open(file_url, '_blank');
      }
   }
   
   function getUnreadMsgCount(){
      var user_id = '{{ $user_id }}';
      var facility_id = '{{ $facility_id }}';
      var receiver_id = $('#receiver_id').val();
      var post_url = "{{URL::to('/getUserUnread')}}?user_id="+user_id+"&facility_id="+facility_id;
      $.ajax({
         url:  post_url,
         success:function(json_data)
         {
            if(json_data.hasOwnProperty("status") && json_data['status']=="db_error"){
              swal(json_data.message); return false;
            }
            var count_data = jQuery.parseJSON(json_data);
            var cdata = count_data.data;
            $.each(cdata, function(key, value) {
               if(value.unread_count>0){
                  $('#message_count_'+value.user_id).show();
                  $('#message_count_'+value.user_id).html(value.unread_count);
               } else {
                  $('#message_count_'+value.user_id).hide();
                  $('#message_count_'+value.user_id).html('0');
               }
            });
            $('#patient_message_countlar').html(count_data.patient_count);
			   $('#user_message_countlar').html(count_data.careteam_count);
            //$('#user_msg_count').html(count_data.total_count);
            $('#user_msg_count').html(count_data.patient_count);
         }
      });
      parent.reloadNotificationsCount();
   }
   //setInterval(getUnreadMsgCount, 4000);

   function sendAudioCallRequest(){
      var user_id = '{{ $user_id }}';
      var receiver_id=$('#receiver_id').val();
      var link_url = "{{URL::to('/sendAudioCallRequest')}}?user_id="+user_id+"&receiver_id="+receiver_id;
      swal({
         title: 'Are you sure you want to send a Audio call request?',
         text: "",
         type: 'warning',
         showCancelButton: true,
         confirmButtonColor: '#218838',
         cancelButtonColor: '#dc3545',
         confirmButtonText: 'Yes',
         showLoaderOnConfirm: true,
         position: 'top',
         preConfirm: function() {
            return new Promise(function(resolve) {

            $(".tabloadershow").show();
               $.ajax({
                  url:  link_url,
                  success:function(data)
                  {
                     $(".tabloadershow").hide();
                      if(data.hasOwnProperty("status") && data['status']=="validation"){
                          swal(data.message); return false;
                        }
                     swal("Audio call request sent successfully");
                  },
                  error:function() {
                     $(".tabloadershow").hide();
                     swal('Something went wrong. Please try again later.');
                  }
               });
            });
         },
      });
   }
   function add_more_files(){
      $('#virtual_chat_file').trigger('click');
   }

   function virtual_file_attachments(virtual_input){
      const dt = new DataTransfer();
      const input = document.getElementById('chat_file');
      const { files } = input;
      for (let i = 0; i < files.length; i++) {
         const file = files[i]
         dt.items.add(file); // here you exclude the file. thus removing it.
      }
      //add newly added files
      for (let j = 0; j < virtual_input.files.length; j++) {
         const vfile = virtual_input.files[j];
         dt.items.add(vfile); // here you exclude the file. thus removing it.
      }
      input.files = dt.files; // Assign the updates list
      console.log(input.files);
      $('#virtual_chat_file').val('');
      $('#upload_image_previewer').html('');
      preview_file_attachments(input);
   }

   function update_message_status(){
      var logged_user_id = '{{ $user_id }}';
      var user_id = $('#receiver_id').val();
      updateMessageStatus(logged_user_id,user_id);
      getUnreadMsgCount();
   }
   
</script>
@endsection