@extends('front.inner-layout.app')

@section('content')

<div class="page-content dashboard-wrapper mdashboard-wrapper clientd-wrapper">
   <div class="row align-items-center">
      <div class="col-lg-4 col-md-4 col-sm-4">
         <h1 class="page-title eagle-font font-400"><span class="arca-font">My</span> Communication</h1>
      </div>
     @include('front.inner-layout.header')
   </div>
   <div class="brdr-bttm"></div>
   <div class="clients-area client-area-bullet">
      <div class="row">
         <div class="col-lg-12">
            <div class="client-top-area clienttop-img ">
               
               {{--<div class="comminication-box-area">
                  <div class="row">
                     <div class="col-2">
                        <div class="comm-box">
                           <img src="{{ asset('assets/images/comm-img-1.png') }}" alt="" class="img-fluid">
                           <h3>Client Referrals</h3>
                        </div>
                     </div>
                     <div class="col-2">
                        <div class="comm-box">
                           <img src="{{ asset('assets/images/comm-img-2.png') }}" alt="" class="img-fluid">
                           <h3>Overdue Appts</h3>
                        </div>
                     </div>
                     <div class="col-2">
                        <div class="comm-box">
                           <img src="{{ asset('assets/images/comm-img-3.png') }}" alt="" class="img-fluid">
                           <h3>New Clients</h3>
                        </div>
                     </div>
                     <div class="col-2">
                        <div class="comm-box">
                           <img src="{{ asset('assets/images/comm-img-4.png') }}" alt="" class="img-fluid">
                           <h3>Missed Appts</h3>
                        </div>
                     </div>
                     <div class="col-2">
                        <div class="comm-box">
                           <img src="{{ asset('assets/images/comm-img-5.png') }}" alt="" class="img-fluid">
                           <h3>Birthdays</h3>
                        </div>
                     </div>
                     <div class="col-2">
                        <div class="comm-box bulkmessag">
                           <img src="{{ asset('assets/images/comm-img-6.png') }}" alt="" class="img-fluid">
                           <h3>Bulk messaging</h3>
                        </div>
                     </div>
                  </div>
               </div>--}}

               <input type="hidden" name="is_team_member" id="is_team_member" value="{{$isMember}}">

               <div class="clients-area client-area-bullet mob-right-none communication-contain">
                  <div class="row">
                     <div class="col-lg-9 col-md-9 col-sm-9">
                        <div class="client-top-area clienttop-img ">
                           <ul class="filtertop-li">
                              <li class="hide" id="clear-filter">
                                 <a href="{{ route('practitioner.communication.index') }}" class="txt-filter greentext cursor-pointer">Clear Filter</a>
                              </li>
                              <li>
                                 <a data-toggle="modal" data-target="#searchCommunicationByPatient"><img src='{{asset("assets/images/search-icon-green.svg")}}'  alt="" class="img-fluid"></a>
                              </li>
                              <li>
                                 <a id="deleteCommunication"><img src='{{asset("assets/images/trash-icon-green.svg")}}' alt="" class="img-fluid cursor-pointer"></a>
                              </li>
                           </ul>
                        </div>
                     </div>
                     <div class="col-lg-3 col-md-3 col-sm-3">
                        <div class="plusdropdown">
                           <button class="btn btn-secondary btn-fill font-weight-normal" type="button" id="dropdownMenuButton1" data-toggle="modal" data-target="#sendSmsMessageGlobal" >Send message</button>
                        </div>
                     </div>
                  </div>

                  <div class=" dr-table communication-table mt-5">
                     <div class="table-responsive">
                        <table class="table table-striped">
                           <thead class="head-brdr">
                              <tr>
                                 <th class="position-relative">
                                    <div class="waitlist-modal client-area-bullet-first">
                                       <div class="delete-check-icon checkedbox">
                                          <ul class="mb-0">
                                             <li>
                                                <div class="rdio rdio-primary radio-inline">
                                                   <input id="allID" name="allID" type="checkbox">
                                                   <label for="allID"></label>
                                                </div>
                                             </li>
                                          </ul>
                                       </div>
                                    </div>
                                 </th>
                                 <th>Type</th>
                                 <th class=" white-space-nowrap">Date</th>
                                 <th class=" white-space-nowrap">Time</th>
                                 <th>To</th>
                                 <th>From</th>
                                 <th>Communication</th>
                                 <th>&nbsp;</th>
                              </tr>
                           </thead>
                           <tbody id="communicationAppend"></tbody>
                        </table>
                     </div>
                     
                  </div>

               </div>
            </div>
            <div class="text-center">
               <a href="javascript:void(0)" class="btn btn-fill load-more hide">Load more</a>
            </div>
         </div>
      </div>
   </div>
</div>

<!-- Reply Modal -->
<!-- <div class="reply-modal c-reply-modal chatmodal close-h-img customscroll angelafrost-chatmodal">
   <div class="modal fade" id="openreplyModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
   aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered" role="document">
         <form method="POST" name="frm_send_sms_reply" id="frm_send_sms_reply" action="{{ route('practitioner.communication.sendSmsReplyToClient') }}">
            @csrf
            <input type="hidden" name="msg_client_id" id="msg_client_id" >
            <input type="hidden" name="communication_id" id="communication_id" >
            <div class="modal-content">
               <div class="modal-header p-0">
                  <button type="button" class="close bttn-close" data-dismiss="modal" aria-label="Close">
                     <span aria-hidden="true"><img src='{{asset("assets/images/close-img.png")}}'  alt="" class="img-fluid"></span>
                  </button>
                  <h5 class="modal-title eagle-font" id="message-from-name"></h5>
               </div>
               <div class="modal-body">
                  <div class="mCustomScrollbar">
                     <div id="chat-history-section"></div>
                  </div>
               </div>
               <div class="modal-footer d-block border-0">
                  <div class="spacebt-media chatfill-bg">
                     <div class="media">
                        <div class="form-group w-100 mb-0">
                           <textarea name="send_client_msg_reply" id="send_client_msg_reply" rows="1" class=" w-100  Message-fillbox autosizetextaria" placeholder="Type your message here" style="box-shadow:none !important"></textarea>
                           <span class="div-send_client_msg_reply text-danger invalid-feedback d-block"></span>
                        </div>
                     </div>
                     <div class="text-right light-grey"><span class="sms_second_text_my_comm"> 0/160 = 0 Credit </span>
                  </div>
                  </div>
                  <div class="text-center">
                     <button type="submit" class="cursor-pointer save-btn save-btn-bg confirm-bttn mt-0 w-100">Send</button>
                  </div>
               </div>
            </div>
         </form>
      </div>
   </div>
</div> -->
<!-- Reply Modal -->

<!-- Search by client modal -->
<div class="cilent-popup">
   <div class="modal fade" id="searchCommunicationByPatient" role="dialog">
      <div class="modal-dialog modal-dialog-centered">
         <div class="modal-content">
            <div class="modal-header">
               <button type="button" class="close" data-dismiss="modal"><img src='{{asset("assets/images/close-img.png")}}' alt="" class=""></button>
            </div>
            <form name="frm_search_communication" id="frm_search_communication" data-action="{{route('practitioner.communication.search')}}" method="GET">
               @csrf
               <a href="{{route('practitioner.communication.index')}}"  class="filterclear" >clear filter</a>
               <div class="modal-body">
                  <div class="single-tittle">
                     <label>Name</label>
                     <input type="text" id="client_first_name_or_last_name" name="client_first_name_or_last_name" value=""   placeholder="First or Last Name" class="form-control popup-input">
                  </div>
                  <div class="single-tittle">
                     <label>Keyword</label>
                     <input type="text" id="communication_keyword" name="communication_keyword" value="" placeholder="Keyword" class="form-control popup-input">
                  </div>
                  <div class="single-tittle">
                     <label>Type</label>
                     <ul class="age-title pl-0">
                        <li>
                           <input type="radio" id="communication_type_sms" name="communication_type" value="sms" />
                           <label for="communication_type_sms">SMS</label>
                        </li>
                        <li>
                           <input type="radio" id="communication_type_email" name="communication_type" value="email" />
                           <label for="communication_type_email">Email</label>
                        </li>
                     </ul>
                  </div>
               </div>
               <div class="modal-footer">
                  <button type="submit" class="btn btn-default green-filter">Search</button>
               </div>
            </form>
         </div>
      </div>
   </div>
</div>
<!-- Search by client modal -->

@endsection

@section('css')
   <style>
      .settingwaitlist #sendsmsmessage .modal-content{width: 400px;}
      .c-reply-modal .modal-body{padding:10px 5px;}
      .msgtext {width: 80%;border: none;padding:0 10px 10px;border-radius: 5px;background: transparent;}
      .image, .text-round-img{overflow: hidden;}
      .chatfill-bg .tooltip-info-icon{right: 0px;}
      .clientd-wrapper .communication-contain .client-top-area .checkedbox{
         top: 5px !important
         }
   </style>
@endsection

@section('js')
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazy/1.7.11/jquery.lazy.min.js" integrity="sha512-eviLb3jW7+OaVLz5N3B5F0hpluwkLb8wTXHOTy0CyNaZM5IlShxX1nEbODak/C0k9UdsrWjqIBKOFY0ELCCArw==" crossorigin="anonymous"></script>

   <script>
      $(document).ready(function(e) {
         $('.lazy').lazy();

         var read_message = "{{ $read_message }}";
         if( read_message != '' ) {
            read_message = atob(read_message);
            $.ajax({
               type: "GET",
               url: "{{ url('/practitioner/my-communication/get-chat-history') }}/"+read_message,
               dataType: "JSON",
               success: function( response )
               {
                  // console.log( response );
                  if( response.status == 'success' ) {
                     var data = response.data[0];
                     console.log( data );

                     $("#message-from-name").text( data.send_to_name );
                     $("#msg_client_id").val( data.send_to_id );
                     $("#communication_id").val( data.id );

                     var messages = '';
                     var sms_replies = data.sms_replies;

                     var messages = '';
                     var sms_replies = data.sms_replies;
                     if(response.first_sms !='')
                     {
                        messages +='<div class="spacebt-media chatfill-bg"><div class="media"><div class="media-body width256"><div class="msgtext msgtext-green"><p>'+response.first_sms+'</p><div class="clear"></div><span class="d-block text-right rightext">'+response.created_date+'</span></div></div></div></div>';
                     }

                     if( sms_replies.length > 0 ) {

                        for( var i = 0; i < sms_replies.length; i++ ) {
                           var chat_class = sms_replies[i].status == 'received' ? 'chatunfill-bg' : 'chatfill-bg';
                           var chat_width_class = sms_replies[i].status == 'received' ? 'width254' : 'width256';
                           var chat_color_class = sms_replies[i].status == 'received' ? '' : 'msgtext-green';
                           var chat_date_class = sms_replies[i].status == 'received' ? 'text-left lefttext' : 'text-right rightext';

                           messages += '<div class="spacebt-media '+ chat_class +'">';
                           messages += '<div class="media">';

                           if( sms_replies[i].status == 'received' ) {
                              messages += '<div class="text-round-img no-bg-text mr-2"><img src="'+ data.send_to_img +'" alt="" class="img-fluid" /></div>';
                           }
                           messages += '<div class="media-body '+ chat_width_class +'">';
                           
                           messages += '<div class="msgtext '+ chat_color_class +'">';
                           messages += '<p>'+ sms_replies[i].sms_response +'</p>';

                           if( sms_replies[i].status == 'sent' ) {
                              messages += '<div class="clear"></div>';
                           }

                           messages += '<span class="d-block '+ chat_date_class +'"> '+ sms_replies[i].sms_date +' </span>';
                           messages += '</div>';

                           messages += '</div>';
                           messages += '</div>';
                           messages += '</div>';
                        }
                     }

                     $("#chat-history-section").empty();
                     $("#chat-history-section").html(messages);

                     $("#openreplyModal").modal("show");
                  } else {
                     alert( response.message );
                  }
               }
            });
         }

         var searchData = '';
         getCommunicationList(searchData, '');

         function getCommunicationList(searchData, sorting) {
            $.ajax({
               url: "{{ route('practitioner.communication.get') }}",
               method: 'POST',
               data: {
                  searchData: searchData,
                  sorting: sorting
               },
               success: function(data) {
                  communicationList(data);
               }
            });
         }

         function communicationList(data) {
            console.log( data.data);
            if( data.data.length != 0 ) {
               var html = '';
               $.each( data.data, function( key, value ) {

                  // if(value.sms_replies.length >=1){

                  //    var array = value.sms_replies;
                  //    var l = value.sms_replies.length;
                  //    for(i=0; i< l / 2; i++) {
                  //       var t = array[i];
                  //       array[i] = array[l - 1 - i];
                  //       array[l - 1 - i] = t;
                  //    }

                  //    $.each(array, function(key,sms_replies){
                  //       html += dynamicReplyContent(value,sms_replies);
                  //    });
                  // }
                  html += dynamicContent( value );             

                  $("#communicationAppend").html(html);
                  $('input').attr('autocomplete', 'off');
               });

               if ($('.count_tr').length < data.count) {
                  $('.load-more').removeClass('hide');
               } else {
                  $('.load-more').addClass('hide');
               }
            } else {
               $("#communicationAppend").html('');
               $('.load-more').addClass('hide');
            }
         }

         function dynamicContent( value )
         {
            console.log( value );
            var uniqueId = Math.random();    
            var html = '';
            html += '<tr class="count_tr">';

            html += '<td class="position-relative">';
            html += '<div class="waitlist-modal client-area-bullet-first">';
            html += '<div class="delete-check-icon checkedbox">';
            html += '<ul class="mb-0">';
            html += '<li><div class="rdio rdio-primary radio-inline"><input name="id[]" value="'+ value.my_communication_id +'" data-flag="'+value.flag+'" id="radio-'+ uniqueId +'" type="checkbox" class="communication_id"><label for="radio-'+ uniqueId +'"></label></div></li>';
            html += '</ul>';
            html += '</div>';
            html += '</div>';
            html += '</td>';

            html += '<td>'+ value.send_as +' - '+ value.send_type +'</td>';

            html += '<td class="white-space-nowrap">'+ value.sms_date +'</td>';

            html += '<td class="white-space-nowrap">'+ value.sms_time +'</td>';

            var cardUrl = '';

            if( value.send_to_type == 'client' ) {
               cardUrl = "{{ url('/practitioner/clientcard') }}?client_id="+btoa(value.send_to_id);
            }


            if(value.send_as == 'Sms' || value.send_as =="SMS"){
                html += '<td><a style="color:#24303f;" class="hover-client-name" href="'+ cardUrl +'">'+ value.send_to_name +'<br>'+ value.phone +'</td>';
            }else{
                html += '<td><a style="color:#24303f;" class="hover-client-name" href="'+ cardUrl +'">'+ value.send_to_name +'<br>'+ value.email +'</td>';
            }

           
            // if(value.phone == '' && value.email != ''){
            //    html += '<td><a style="color:#24303f;" class="hover-client-name" href="'+ cardUrl +'">'+ value.send_to_name +'<br>'+ value.email +'</td>';
            // }else if(value.email == '' && value.phone != ''){
            //    html += '<td><a style="color:#24303f;" class="hover-client-name" href="'+ cardUrl +'">'+ value.send_to_name +'<br>'+ value.phone +'</td>';
            // }else if(value.phone != '' && value.email != ''){
            //    html += '<td><a style="color:#24303f;" class="hover-client-name" href="'+ cardUrl +'">'+ value.send_to_name +'<br>'+ value.phone +'/'+value.email +'</td>';
            // }else{
            //    html += '<td><a style="color:#24303f;" class="hover-client-name" href="'+ cardUrl +'">'+ value.send_to_name +'</td>';
            // }
              

            html += '<td>'+ value.send_by_name +'</td>';

            html += '<td>';
            html += '<div class="main-div">';
            html += '<div class="" id="show-read-less">'+ value.read_more_text +'</div>';
            html += '<div class="hide" id="show-read-more">'+ value.communication +'</div>';
            html += '</div>';
            html += '</td>';

            html += '<td>';
            if( value.send_as == 'Sms' && value.sms_replies.length > 0 ) {
               html += '<a href="javascript:void(0)" id="'+ value.parent_id +'" class="open-reply-modal">';
               html += '<img src="'+" {{ asset('assets/images/Communication Reply icon.svg') }}" +'"  alt="" class="img-fluid">';
               html += '</a>';
            }
            html += '</td>';

            html += '</tr>';

            return html;
         }


         function dynamicReplyContent(value,sms_replies)
         {
            var html = '';
            var send_to_name ='';
            var send_by_name ='';

            if(sms_replies.status == 'sent'){
               send_by_name = value.send_by_name;
               send_to_name = value.send_to_name;
            }

            if(sms_replies.status == 'received'){
               send_to_name = value.send_by_name;
               send_by_name = value.send_to_name;
            }

            html += '<tr class="count_tr">';
            html += '<td class="position-relative">';
            html += '<div class="waitlist-modal client-area-bullet-first">';
            html += '<div class="delete-check-icon checkedbox">';
            html += '<ul class="mb-0">';
            html += '<li><div class="rdio rdio-primary radio-inline"><input name="id[]" value="'+ sms_replies.id +'" data-flag="reply" id="radio-'+ sms_replies.id +'" type="checkbox" class="communication_id"><label for="radio-'+ sms_replies.id +'"></label></div></li>';
            html += '</ul>';
            html += '</div>';
            html += '</div>';
            html += '</td>';

            html += '<td>'+ value.send_as +' - '+ value.send_type +'</td>';

            html += '<td class="white-space-nowrap">'+ sms_replies.sms_date +'</td>';

            html += '<td class="white-space-nowrap">'+ sms_replies.sms_time +'</td>';

            html += '<td>'+ send_to_name +'</td>';

            html += '<td>'+ send_by_name +'</td>';

            html += '<td>';
            html += '<div class="main-div">';
            html += '<div class="" id="show-read-less">'+ sms_replies.read_more_text_reply +'</div>';
            html += '<div class="hide" id="show-read-more">'+ sms_replies.sms_response_reply +'</div>';
            html += '</div>';
            html += '</td>';

            html += '<td>';
            if( value.send_as == 'SMS' && value.sms_replies.length > 0 ) {
               
               html += '<a href="javascript:void(0)" id="'+ value.id +'" class=" open-reply-modal">';
               html += '<img src="'+" {{ asset('assets/images/Communication Reply icon.svg') }}" +'"  alt="" class="img-fluid">';
               html += '</a>';
            }
            html += '</td>';

            html += '</tr>';

            return html;
         }

         $(document).on( 'click', '.load-more', function() {
            getProductListForLoadMore('', '');
         });

         // Search communication
         $(document).on( 'submit', '#frm_search_communication', function(e) {
            e.preventDefault();

            $.ajax({
               type: "POST",
               url: $(this).data('action'),
               data: new FormData(this),
               dataType: "JSON",
               cache: false,
               contentType: false,
               processData: false,
               beforeSend: function (msg) {
                  $(".loading").addClass("d-block");
               },
               success: function( data ) {
                  $(".loading").removeClass("d-block");
                  if( data.data.length != 0 ) {
                     var html = '';
                     $.each( data.data, function( key, value ) {  
                        
                        // if(value.sms_replies.length >=1){
                        //    var array = value.sms_replies;
                        //    var l = value.sms_replies.length;
                        //    for(i=0; i< l / 2; i++) {
                        //       var t = array[i];
                        //       array[i] = array[l - 1 - i];
                        //       array[l - 1 - i] = t;
                        //    }
                        //    $.each(array, function(key,sms_replies){
                        //       html += dynamicReplyContent(value,sms_replies);
                        //    });
                        // }

                        html += dynamicContent(value);                       
                     });

                     $("#communicationAppend").empty();
                     $("#communicationAppend").html(html);

                     if( $('.count_tr').length < data.count ) {
                        $('.load-more').removeClass('hide');
                     } else {
                        $('.load-more').addClass('hide');
                     }
                  } else {
                     $("#communicationAppend").html('');
                     $('.load-more').addClass('hide');
                  }
                  $("#clear-filter").removeClass("hide");
                  $("#searchCommunicationByPatient").modal("hide");
               }
            });
         });

         function getProductListForLoadMore(searchData, sorting) {
            $.ajax({
               url: "{{ route('practitioner.communication.get')}}",
               method: 'POST',
               data: {
                  searchData: searchData,
                  sorting: sorting,
                  skip: $('.count_tr').length
               },
               success: function(data) {
                  console.log( data );
                  if( data.data.length != 0 ) {
                     var html = '';
                     $.each( data.data, function( key, value ) {
                        // if(value.sms_replies.length >=1){
                        //    var array = value.sms_replies;
                        //    var l = value.sms_replies.length;
                        //    for(i=0; i< l / 2; i++) {
                        //       var t = array[i];
                        //       array[i] = array[l - 1 - i];
                        //       array[l - 1 - i] = t;
                        //    }
                        //    $.each(array, function(key,sms_replies){
                        //       html += dynamicReplyContent(value,sms_replies);
                        //    });
                        // }
                        html += dynamicContent( value );
                     });
                     $("#communicationAppend").append(html);

                     if( $('.count_tr').length < data.count ) {
                        $('.load-more').removeClass('hide');
                     } else {
                        $('.load-more').addClass('hide');
                     }
                  } else {
                     $("#communicationAppend").html('');
                     $('.load-more').addClass('hide');
                  }
               }
            });
         }

         //Start count string
         $(".sms_second_text_my_comm").text((countString($('#send_client_msg_reply').val())));

         $('#send_client_msg_reply').on('input', function() {
            $(".sms_second_text_my_comm").text(countString($(this).val()));
         });

         $(document).find('.modal').on('hidden.bs.modal', function () {
            $("#send_client_msg_reply").val('');
            $(".sms_second_text_my_comm").text((countString($('#send_client_msg_reply').val())));
         });

         $('.autosizetextaria').each(function () {
            this.setAttribute('style', 'height:' + (this.scrollHeight) + 'px;  overflow: hidden;box-shadow:none !important ');
         }).on('input', function () {
            this.style.height = 'auto';
            this.style.height = (this.scrollHeight) + 'px ';
         });

         // Read more text
         $(document).on( "click", "#show_more_text", function(e) {
            e.preventDefault();

            $(this).closest(".main-div").find('#show-read-more').removeClass("hide");
            $(this).closest(".main-div").find('#show-read-less').addClass("hide");
         });

         // Read less text
         $(document).on( "click", "#show_less_text", function(e) {
            e.preventDefault();

            $(this).closest(".main-div").find('#show-read-more').addClass("hide");
            $(this).closest(".main-div").find('#show-read-less').removeClass("hide");
            
         });



         // Open reply modal
         $(document).on( 'click', '.open-reply-modal', function(e) {
            e.preventDefault();
            var id = $(this).attr('id');

            $.ajax({
               type: "GET",
               url: "{{ url('/practitioner/my-communication/get-chat-history') }}/"+id,
               dataType: "JSON",
               success: function( response )
               {
                  console.log( response );
                  if( response.status == 'success' ) {
                     var data = response.data[0];
                    
                     $("#message-from-name").text( data.send_to_name );
                     $("#msg_client_id").val( data.send_to_id );
                     $("#communication_id").val( data.id );

                     var messages = '';
                     var sms_replies = data.sms_replies;
                     if(response.first_sms !='')
                     {
                        messages +='<div class="spacebt-media chatfill-bg"><div class="media"><div class="media-body width256"><div class="msgtext msgtext-green"><p>'+response.first_sms+'</p><div class="clear"></div><span class="d-block text-right rightext">'+response.created_date+'</span></div></div></div></div>';
                     }

                     if( sms_replies.length > 0 ) {
                        for( var i = 0; i < sms_replies.length; i++ ) {
                           var chat_class = sms_replies[i].status == 'received' ? 'chatunfill-bg' : 'chatfill-bg';
                           var chat_width_class = sms_replies[i].status == 'received' ? 'width254' : 'width256';
                           var chat_color_class = sms_replies[i].status == 'received' ? '' : 'msgtext-green';
                           var chat_date_class = sms_replies[i].status == 'received' ? 'text-left lefttext' : 'text-right rightext';

                           messages += '<div class="spacebt-media '+ chat_class +'">';
                           messages += '<div class="media">';

                           if( sms_replies[i].status == 'received' ) {
                              messages += '<div class="text-round-img no-bg-text mr-2"><img src="'+ data.send_to_img +'" alt="" class="img-fluid" /></div>';
                           }
                           messages += '<div class="media-body '+ chat_width_class +'">';
                           
                           messages += '<div class="msgtext '+ chat_color_class +'">';
                           messages += '<p>'+ sms_replies[i].sms_response +'</p>';

                           if( sms_replies[i].status == 'sent' ) {
                              messages += '<div class="clear"></div>';
                           }

                           messages += '<span class="d-block ' + chat_date_class + '"> ' + sms_replies[i].sms_date + ' ' + sms_replies[i].sms_time + ' </span>';
                           messages += '</div>';

                           messages += '</div>';
                           messages += '</div>';
                           messages += '</div>';
                        }
                     }

                     $("#chat-history-section").empty();
                     $("#chat-history-section").html(messages);

                     $("#openreplyModal").modal("show");

                      $("#openreplyModal").scrollTop(0);
                    

                  } else {
                     alert( response.message );
                  }
               }
            });
         });
         // $(document).on( 'click', '.open-reply-modal', function(e) {
         //    setInterval(updateScroll,1000);
           

         // });
         // function updateScroll(){
         //    //  var element = document.getElementById("chat-history-section");
         //    //  element.scrollTop = element.scrollHeight;


         // }

         $(document).on('click', '#allID', function (e) {
            $('[name="id[]"]').prop('checked', this.checked);
         });


         $(document).on('click','#deleteCommunication',function()
         {
            var ids = [];
            $('.communication_id:checked').each(function (i) {

               ids[i] = { 'id': $(this).val(),
               'flag': $(this).data('flag')};
            });

            if (ids.length === 0) {
               Swal.fire({
                  icon: 'error',   
                  title: 'Please select at least 1 record.',
                  showClass: {
                     popup: 'animate__animated animate__fadeInDown'
                  },
                  hideClass: {
                     popup: 'animate__animated animate__fadeOutUp'
                  }
               });
               return false;
            }else{
               var formData = new FormData();
               formData.append('chat_id', JSON.stringify(ids));
               Swal.fire({
                  title: '',
                  text: "Are you sure you'd like to delete this data? This cannot be undone.",
                  icon: 'warning',
                  showCancelButton: true,
                  confirmButtonText: 'Yes',
                  cancelButtonText: 'No'
               }).then((result) => {
                  if (result.value) {
                     $.ajax({
                        url:"{{route('practitioner.communication.delete')}}",
                        data: formData,
                        type: "POST",
                        contentType: false, // NEEDED, DON'T OMIT THIS (requires jQuery 1.6+)
                        processData: false, // NEEDED, DON'T OMIT THIS
                        beforeSend: function (msg) {
                           $(".loading").addClass("d-block");
                        },
                        success: function (response) {
                           $(".loading").removeClass("d-block");
                           $('.client-radio:checked').parent().parent().parent().parent().parent().parent().parent().remove();
                           Swal.fire({
                              icon:'success',   
                              title: 'Deleted',
                              showClass: {
                                 popup: 'animate__animated animate__fadeInDown'
                              },
                              hideClass: {
                                 popup: 'animate__animated animate__fadeOutUp'
                              }
                           });                           
                           var searchData = '';
                           getCommunicationList(searchData, '');
                        }
                     });
                  }
               });
            }
         });

      });
   </script>   
@endsection