@extends('admin.layout')
@section('content')
<style>
    .msg-info.msg-user-detail{
    display: flex;
    justify-content: flex-start;
    margin-bottom: 10px;
    flex-direction: column;
    align-items: flex-start;
  }
  .msg-info-user {
    color: #dfa1a1;
    font-size: 12px;
}
  .whatsapp_list{
    max-height: 600px;
    overflow: hidden;
    overflow-y: scroll;
    box-shadow: 0 15px 15px -5px rgba(0, 0, 0, 0.2);
  }
  .whatsapp_list_table{
    height: 570px;
  }
  .whatsapp_chat_list{
    height: 600px;
    max-height: 600px;
    overflow: hidden;
    overflow-y: scroll;
  }
  .msger {
    display: flex;
    flex-flow: column wrap;
    justify-content: space-between;
    width: 100%;
    max-width: 867px;
    margin: 0px 0px;
    height: calc(100% - 10px);
    border: var(--border);
    border-radius: 5px;
    background: var(--msger-bg);
    box-shadow: 0 15px 15px -5px rgba(0, 0, 0, 0.2);
  }

  .msger-header {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    border-bottom: var(--border);
    background: #eee;
    color: #666;
  }

  .msger-chat {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
  }
  .msger-chat::-webkit-scrollbar {
    width: 6px;
  }
  .msger-chat::-webkit-scrollbar-track {
    background: #ddd;
  }
  .msger-chat::-webkit-scrollbar-thumb {
    background: #bdbdbd;
  }
  .msg {
    display: flex;
    align-items: flex-end;
    margin-bottom: 10px;
  }
  .msg:last-of-type {
    margin: 0;
  }
  .msg-img {
    width: 30px;
    height: 30px;
    margin-right: 10px;
    background: #ddd;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border-radius: 50%;
  }
  .msg-bubble {
    max-width: 450px;
    padding: 15px;
    border-radius: 15px;
    background: var(--left-msg-bg);
  }
  .msg-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
  }
  .msg-info-name {
    margin-right: 10px;
    font-weight: bold;
  }
  .msg-info-time {
    font-size: 0.80em;
    color: #deb887;
  }

  .left-msg .msg-bubble {
    border-bottom-left-radius: 0;
  }

  .right-msg {
    flex-direction: row-reverse;
  }
  .right-msg .msg-bubble {
    background: var(--right-msg-bg);
    color: #3c8dbc;
    border-bottom-right-radius: 0;
  }
  .right-msg .msg-sent {
    background: var(--right-msg-bg);
    color: #dbc4c4;
    border-bottom-right-radius: 0;
  }
  .right-msg .msg-delivered {
    background: var(--right-msg-bg);
    color: #3c8dbc;
    border-bottom-right-radius: 0;
  }
  .right-msg .msg-read {
    background: var(--right-msg-bg);
    color: #00a65a;
    border-bottom-right-radius: 0;
  }
  .right-msg .msg-img {
    margin: 0 0 0 10px;
  }

  .msger-inputarea {
    display: flex;
    padding: 10px;
    border-top: var(--border);
    background: #eee;
  }
  .msger-inputarea * {
    padding: 10px;
    border: none;
    border-radius: 3px;
    font-size: 1em;
  }
  .msger-input {
    flex: 1;
    background: #ddd;
  }
  .msger-upload-btn {
    margin-left: 10px;
    background: rgb(0, 196, 151, 1);
    color: #fff;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.23s;
  }
  .msger-send-btn {
    margin-left: 10px;
    background: rgb(0, 196, 65);
    color: #fff;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.23s;
  }
  .msg-text {
    /* white-space: pre-wrap; */
  }
  .msger-send-btn:hover {
    background: rgb(0, 180, 50);
  }
  .msg-failed_alert{
    color: #d0342c !important;
  }
  .msger-chat {
    background-color: #fcfcfe;
  }
  .user_msg{
    background-color: #39ddc6 !important;
  }
  .sent{
    background-color: #dbc4c4 !important;
  }
  .delivered{
    background-color: #3c8dbc !important;
  }
  .read{
    background-color: #00a65a !important;
  }
  .failed{
    background-color: #d0342c !important;
  }
  .active_chat{
    background-color: #00c441;
    color: #FFFFFF;
  }
  .blink_chat{
    background-color: #f30707;
    color: #FFFFFF;
    animation: blinker 1s linear infinite;
  }
  @keyframes blinker {
    50% {
      opacity: 0;
    }
  }
</style>
<div class="content-wrapper"> 
  <!-- Content Header (Page header) -->
  <section class="content-header">
    <h1> {{ trans('WhatsApp TashanTV') }} <small>{{ trans('WhatsApp TashanTV') }}...</small> </h1>
    <ol class="breadcrumb">
      <li><a href="{{ URL::to('admin/dashboard/this_month')}}"><i class="fa fa-dashboard"></i> {{ trans('labels.breadcrumb_dashboard') }}</a></li>
      <li class="active">{{ trans('WhatsApp TashanTV') }}</li>
    </ol>
  </section>
  
  <!-- Main content -->
  <section class="content"> 
    <!-- Info boxes --> 
    @php
      $getUserRoleData  = Session::get('userRoleData'); 
      $Customers      = explode(",",$getUserRoleData->Customers);
    @endphp
    <!-- /.row -->

    <div class="row">
      <div class="col-md-12">
        <div class="box">
          <div class="box-header">
            <h3 class="box-title">{{ trans('WhatsApp TashanTV') }} </h3>
          </div>
          <div class="box-header">
            <form id="search_chat_number" name="search_chat_number" class="">
                <input type="text" class="form-group form-group-lg input-sm" name="wa_search" id="wa_search">
                <button type="submit" class="btn btn-success" name="submit_search" id="submit_search">Search</button>
                <button type="button" onclick="clearWaNumber()" class="btn btn-danger" name="cancel_search" id="cancel_search">Clear Search</button>
            </form>
          </div>
          
          <!-- /.box-header -->
          <div class="box-body">
            <div class="row">
              <div class="col-xs-12">              		
    				  @if (count($errors) > 0)
    					  @if($errors->any())
    						<div class="alert alert-success alert-dismissible" role="alert">
    						  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    						  {{$errors->first()}}
    						</div>
    					  @endif
    				  @endif
              </div>              
            </div>
            <div class="row">
              <!-- <div class="col-xs-12">
                <form class="form-inline form-validate" enctype="multipart/form-data">
                  <div class="form-group">
                    <h5 style="font-weight: bold; padding:0px 5px; ">{{ trans('labels.FilterWhatsappCustomers') }}:</h5>
                  </div>
                    
                  <div class="form-group">
                    <input type="text" name="customers" class="form-control" id="exampleInputPassword3"
                        @if(isset($_REQUEST['customers']) and !empty($_REQUEST['customers']))
                            value="{{ $_REQUEST['customers'] }}"            
                        @endif
                      placeholder="customers">
                  </div>
                  <button type="submit" class="btn btn-success">{{ trans('labels.Search') }}</button>
                  <a href="{{ URL::to('admin/customers')}}" class="btn btn-danger">{{ trans('labels.ClearSearch') }}</a>
                </form>
              </div>
              <br><br><br> -->
            </div>
            <div class="row">
              <div class="col-xs-12">
                <div class="col-xs-3 whatsapp_list">
                  <table id="example1" class="table table-bordered table-striped whatsapp_list_table">
                    <thead>
                      <tr>
                        <th>{{ trans('labels.WhatsappId') }}</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>
                          <table id="wa_number_list" class="table table-bordered table-striped">
                          @if ($whatsapp['count'] > 0)
                            @foreach ($whatsapp['list']  as $key => $whatsapp_list)
                            <tr>
                              <td style="margin:5px; padding:5px;" id="ele_{{ $whatsapp_list->message_sender_id }}" onclick="startChatBox({{ $whatsapp_list->message_sender_id }})">+{{ $whatsapp_list->message_sender_id }} ({{ $whatsapp_list->message_sender_name }})</td>
                            </tr>
                            @endforeach
                          @else
                            <tr>
                              <td>{{ trans('labels.NoRecordFound') }}</td>							
                            </tr>
                          @endif
                          </table>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                  {{--@if (count($customers['result']) > 0)
                  <div class="col-xs-12 text-right">
                    {{$customers['result']->links('vendor.pagination.default')}}
                  </div>
                  @endif--}}
                </div>
                <div class="col-xs-9 whatsapp_chat_list" id="whatsapp_chat_list_div">
                  <section id="click_to_start" class="msger">
                    <header class="msger-header">
                      <div class="msger-header-title">
                        <i class="fa fa-comment-alt"></i> Click on the number to start chating
                      </div>
                      <div class="msger-header-options">
                        <!-- <span><i class="fa fa-cog"></i></span> -->
                      </div>
                    </header>
                  </section> 
                  <section id="start_chat" class="msger hidden">
                    <header class="msger-header">
                      <div class="msger-header-title" id="msger_header_title">
                        Chating with +918860822306
                      </div>
                      <div class="msger-header-options">
                        <span onclick="stopChat()"><i class="fa fa-times"></i></span>
                      </div>
                    </header>

                    <main class="msger-chat" id="msger-chat">
                    </main>

                    <form id="send_chat_message" enctype="multipart/form-data" name="send_chat_message" class="msger-inputarea">
                      <textarea id='chat_message' name="chat_message" class="msger-input" placeholder="Enter your message..."></textarea>
                      <!-- <input type="text" id='chat_message' name="chat_message" value="" class="msger-input" placeholder="Enter your message..."> -->
                      <input type="hidden" id='chat_message_id' name="chat_message_id" value="">
                      <input id='whatsapp_upload' name='whatsapp_upload' type='file' onchange="loadFile(event)" accept="image/*" />
                      <img width="100px" class="hidden" id="whatsapp_upload_output"/>
                      <i class="hidden fa fa-times" onclick="closeDialog()" id="whatsapp_upload_output_remove"></i>
                      <!-- <button type="button" onclick="openDialog()" id="upload_button" class="msger-upload-btn"><i class="fa fa-upload"></i></button> -->
                      <button type="button" onclick="sendChatMessage()" id="send_button" class="msger-send-btn">Send</button>
                    </form>
                  </section>
                </div>
              </div>
            </div>
          </div>
          <!-- /.box-body --> 
        </div>
        <!-- /.box --> 
      </div>
      <!-- /.col --> 
    </div>
    
    <!-- /.row --> 
   

    

    <!-- Main row --> 
    
    <!-- /.row --> 
  </section>
  <!-- /.content --> 
</div>

<script>
  var chat_message_id = '';
  var my_whatsapp_chat_list_interval;
  var my_whatsapp_chat_interval;

  localStorage.removeItem('wa_active_chat_ele');

  function openDialog() {
    document.getElementById('whatsapp_upload').click();
  }

  function closeDialog() {
    $("#whatsapp_upload").val('');
    $("#whatsapp_upload_output").addClass("hidden");
    $("#whatsapp_upload_output_remove").addClass("hidden");
  }

  var loadFile = function(event) {
    $("#whatsapp_upload_output").removeClass("hidden");
    $("#whatsapp_upload_output_remove").removeClass("hidden");
    var output = document.getElementById('whatsapp_upload_output');
    output.src = URL.createObjectURL(event.target.files[0]);
    output.onload = function() {
      URL.revokeObjectURL(output.src) // free memory
    }
  };

  function clearWaNumber(){
    // clearWhatsappChatListInterval()
    localStorage.removeItem("wa_search");
    $("#wa_search").val('');
    stopChat();
    startIntervalChatListBox();
  }

  function searchWaNumber(){
    // clearWhatsappChatListInterval()
    var wa_search = $("#wa_search").val();
    localStorage.setItem("wa_search", wa_search);
    startIntervalChatListBox(wa_search);
  }

  function startIntervalChatListBox(wa_search){
    var message_id = chat_message_id;
    if(wa_search){
      url = "whatsapp-tashan/list?search="+wa_search;
    }
    else{
      wa_search = localStorage.getItem("wa_search");
      if(wa_search){
        url = "whatsapp-tashan/list?search="+wa_search;
      }
      else{
        url = "whatsapp-tashan/list";
      }
    }
    // console.log(wa_search);
    // console.log(url);
    // return;
    ajaxGetCall(url, startIntervalChatListBoxSuccess, failed);
  }

  function startIntervalChatListBoxSuccess(res){
    var list_count = res.data.count;
    var list = res.data.list;
    var list_html = '';
    if(list_count > 0){
      for(var i = 0; i < list_count; i++){
        var message_sender_id = list[i].message_sender_id;
        var message_sender_name = list[i].message_sender_name;
        var message_status = list[i].message_status;
        var active_ele = localStorage.getItem('wa_active_chat_ele');
        var active_class = (active_ele == 'ele_'+message_sender_id) ? "active_chat" : "";
        var blink_class = (message_status == 'delivered') ? "blink_chat" : "";
        list_html += '<tr>'+
        '               <td style="margin:5px; padding:5px;" id="ele_'+message_sender_id+'" class="'+active_class+' '+blink_class+'" onclick="startChatBox('+message_sender_id+')">'+
        '                 +'+message_sender_id+' ('+message_sender_name+')'+
        '               </td>'+
        '             </tr>';
      }
    }
    else{
      list_html += '<tr><td>{{ trans("labels.NoRecordFound") }}</td></tr>';
    }
    $("#wa_number_list").html(list_html);
  }

  function startWhatsappChatListInterval(){
    my_whatsapp_chat_list_interval = setInterval(startIntervalChatListBox,30000);
  }

  function clearWhatsappChatListInterval(){
    console.log(my_whatsapp_chat_list_interval);
    if(typeof my_whatsapp_chat_list_interval != 'undefined'){
      clearInterval(my_whatsapp_chat_list_interval);
    }
  }

  function forceDownload(link){
    fetch(link, {
      mode : 'no-cors',
    })
      .then(response => response.blob())
      .then(blob => {
      let blobUrl = window.URL.createObjectURL(blob);
      let a = document.createElement('a');
      a.download = link.replace(/^.*[\\\/]/, '');
      a.href = blobUrl;
      document.body.appendChild(a);
      a.click();
      a.remove();
    })
  }

  if(typeof my_whatsapp_chat_list_interval == 'undefined'){
    startWhatsappChatListInterval();
  }

  function startChatBox(message_id){
    clearWhatsappInterval();
    $(".active_chat").removeClass("active_chat");
    chat_message_id = message_id;
    var chat_element = "ele_"+chat_message_id;
    localStorage.setItem('wa_active_chat_ele', chat_element);
    $("#"+chat_element).removeClass("blink_chat");
    $("#"+chat_element).addClass("active_chat");
    url = "whatsapp-tashan/listchat?message_id="+message_id;
    ajaxGetCall(url, startChatBoxSuccess, failed);
  }

  function startChatBoxSuccess(res){
    // console.log(chat_message_id);
    var chats = res.data.chat;
    var chat_html = '';

    var date_options = { timeZone: "America/Edmonton", weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
    var time_options = { timeZone: "America/Edmonton", hour: "2-digit", minute: "2-digit" };
    for(var i=0; i < chats.length; i++){
      var msg_pos = (chats[i].message_sender_id == "16479430707" || chats[i].message_sender_id == "16474753691") ? "right-msg" : "left-msg";
      var message_status = chats[i].message_status;
      var status_reason = chats[i].status_reason;
      var msg_icon = '';
      if(chats[i].message_sender_id != "16479430707" && chats[i].message_sender_id != "16474753691"){
        msg_icon = 'user_msg';
      }
      else{
        msg_icon = message_status;
      }
      var failed_message_div = (message_status == "failed") ? '<div class="msg-failed_alert">'+status_reason+'</div>' : ''
      var message_type = chats[i].message_type;
      var text_body = chats[i].text_body;
      var text_body_message = '';
      if(text_body == 'place_message'){
        text_body_message = "{{ config('siteVars.place_message') }}";
      }
      else if(text_body == 'dispatch_message'){
        text_body_message = "{{ config('siteVars.dispatch_message') }}";
      }
      else if(text_body == 'deliver_message'){
        text_body_message = "{{ config('siteVars.deliver_message') }}";
      }
      else if(text_body == 'cancel_message'){
        text_body_message = "{{ config('siteVars.cancel_message') }}";
      }
      else{
        text_body_message = text_body;
      }
      if(text_body_message){
        text_body_message = text_body_message.replaceAll('\n', '<br>');
      }
      // var date_time = new Date(chats[i].created_at);
      var date_time = chats[i].created_at;
      var user_name = (chats[i].user_name) ? chats[i].user_name : "";

      
      // var format_date = date_time.toLocaleDateString("en-US", date_options);
      
      // var format_time = date_time.toLocaleTimeString("en-US", time_options);
      // console.log(date_time, 'ssss', format_date, 'hhhh', format_time);
      if(msg_pos == "right-msg"){
        chat_html += '<div class="msg '+msg_pos+'">'+
      '                        <div class="msg-img '+msg_icon+'"></div>'+
      '                        <div class="msg-bubble">'+
      '                          <div class="msg-info msg-user-detail">'+
      '                            <div class="msg-info-time">'+date_time+'</div>'+
      '                            <div class="msg-info-user">'+user_name+'</div>'+
      '                          </div>';
      }else {
        chat_html += '<div class="msg '+msg_pos+'">'+
      '                        <div class="msg-img '+msg_icon+'"></div>'+
      '                        <div class="msg-bubble">'+
      '                          <div class="msg-info msg-user-detail">'+
      '                            <div class="msg-info-time">'+date_time+'</div>'+
      '                          </div>';
      }

      if(message_type == "media"){
        var forceDownload = "forceDownload('"+text_body_message+"')";
        chat_html += '<div class="msg-text"><img width="100px" src="'+text_body_message+'"></div>'+
        '<div class="msg-text"><a href="'+text_body_message+'" target="_blank">Download</a></div>';
      }
      else if(message_type == "video"){
        var forceDownload = "forceDownload('"+text_body_message+"')";
        chat_html += '<div class="msg-text"></div>'+
        '<div class="msg-text"><a href="'+text_body_message+'" target="_blank">Play Now</a></div>';
      }
      else{
        chat_html += '<div class="msg-text">'+text_body_message+'</div>';
      }
      chat_html +=  failed_message_div+
      '                        </div>'+
      '                      </div>';
    }
    $("#msger-chat").html(chat_html);
    var msger_header_title_html = '<span>Chating with '+chat_message_id+'&nbsp;&nbsp;&nbsp;&nbsp;</span>'+
  '                               Sent-<span class="msg-img sent">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>'+
  '                               Delivered-<span class="msg-img delivered">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>'+
  '                               Read-<span class="msg-img read">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>';
    $("#msger_header_title").html(msger_header_title_html);
    // $("#msger_header_title").text("Chating with "+chat_message_id);
    $("#chat_message_id").val(chat_message_id);
    setTimeout(function() {
      var objDiv = document.getElementById("msger-chat");
      objDiv.scrollTop = objDiv.scrollHeight;
    },1000);
    startWhatsappInterval();
    startChat();
  }

  function startIntervalChatBox(){
    var message_id = chat_message_id;
    var chat_element = "ele_"+chat_message_id;
    $("#"+chat_element).removeClass("blink_chat");
    url = "whatsapp-tashan/listchat?message_id="+message_id+"&interval_id="+message_id;
    ajaxGetCall(url, startIntervalChatBoxSuccess, failed);
  }

  function startIntervalChatBoxSuccess(res){
    // console.log(chat_message_id);
    var chats = res.data.chat;
    var chat_html = '';
    var date_options = { timeZone: "America/Edmonton", weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
    var time_options = { timeZone: "America/Edmonton", hour: "2-digit", minute: "2-digit" };
    for(var i=0; i < chats.length; i++){
      var msg_pos = (chats[i].message_sender_id == "16479430707" || chats[i].message_sender_id == "16474753691") ? "right-msg" : "left-msg";
      var message_status = chats[i].message_status;
      var status_reason = chats[i].status_reason;
      var msg_icon = '';
      if(chats[i].message_sender_id != "16479430707" && chats[i].message_sender_id != "16474753691"){
        msg_icon = 'user_msg';
      }
      else{
        msg_icon = message_status;
      }
      var failed_message_div = (message_status == "failed") ? '<div class="msg-failed_alert">'+status_reason+'</div>' : ''
      var message_type = chats[i].message_type;
      var text_body = chats[i].text_body;
      var text_body_message = '';
      if(text_body == 'place_message'){
        text_body_message = "{{ config('siteVars.place_message') }}";
      }
      else if(text_body == 'dispatch_message'){
        text_body_message = "{{ config('siteVars.dispatch_message') }}";
      }
      else if(text_body == 'deliver_message'){
        text_body_message = "{{ config('siteVars.deliver_message') }}";
      }
      else if(text_body == 'cancel_message'){
        text_body_message = "{{ config('siteVars.cancel_message') }}";
      }
      else{
        text_body_message = text_body;
      }
      if(text_body_message){
        text_body_message = text_body_message.replaceAll('\n', '<br>');
      }
      // var date_time = new Date(chats[i].created_at);
      var date_time = chats[i].created_at;
      var user_name = (chats[i].user_name) ? chats[i].user_name : "";
      // var format_date = date_time.toLocaleDateString("en-US", date_options);

      // var format_time = date_time.toLocaleTimeString("en-US", time_options);
      if(msg_pos == "right-msg"){
        chat_html += '<div class="msg '+msg_pos+'">'+
      '                        <div class="msg-img '+msg_icon+'"></div>'+
      '                        <div class="msg-bubble">'+
      '                          <div class="msg-info msg-user-detail">'+
      '                            <div class="msg-info-time">'+date_time+'</div>'+
      '                            <div class="msg-info-user">'+user_name+'</div>'+
      '                          </div>';
      }else {
        chat_html += '<div class="msg '+msg_pos+'">'+
      '                        <div class="msg-img '+msg_icon+'"></div>'+
      '                        <div class="msg-bubble">'+
      '                          <div class="msg-info msg-user-detail">'+
      '                            <div class="msg-info-time">'+date_time+'</div>'+
      '                          </div>';
      }

      if(message_type == "media"){
        var forceDownload = "forceDownload('"+text_body_message+"')";
        chat_html += '<div class="msg-text"><img width="100px" src="'+text_body_message+'"></div>'+
        '<div class="msg-text"><a href="'+text_body_message+'" target="_blank">Download</a></div>';
      }
      else if(message_type == "video"){
        var forceDownload = "forceDownload('"+text_body_message+"')";
        chat_html += '<div class="msg-text"></div>'+
        '<div class="msg-text"><a href="'+text_body_message+'" target="_blank">Play Now</a></div>';
      }
      else{
        chat_html += '<div class="msg-text">'+text_body_message+'</div>';
      }

      chat_html +=  failed_message_div+
      '                        </div>'+
      '                      </div>';
    }
    $("#msger-chat").html(chat_html);
    var msger_header_title_html = '<span>Chating with '+chat_message_id+'&nbsp;&nbsp;&nbsp;&nbsp;</span>'+
  '                               Sent-<span class="msg-img sent">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>'+
  '                               Delivered-<span class="msg-img delivered">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>'+
  '                               Read-<span class="msg-img read">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>';
    $("#msger_header_title").html(msger_header_title_html);
    $("#chat_message_id").val(chat_message_id);
    setTimeout(function() {
      var objDiv = document.getElementById("msger-chat");
      objDiv.scrollTop = objDiv.scrollHeight;
    },1000);
    startChat();
  }

  if(chat_message_id != ''){
    startWhatsappInterval();
  }
  
  if(chat_message_id == ''){
    clearWhatsappInterval();
  }

  function startWhatsappInterval(){
    my_whatsapp_chat_interval = setInterval(startIntervalChatBox,20000);
  }

  function clearWhatsappInterval(){
    // console.log(my_whatsapp_chat_interval);
    if(typeof my_whatsapp_chat_interval != 'undefined'){
      clearInterval(my_whatsapp_chat_interval);
    }
  }

  jQuery($ => {
    $('#send_chat_message').on('submit', e => {
      e.preventDefault();
      // console.log("send_chat_message form submit")
      sendChatMessage();
    })
    $('#search_chat_number').on('submit', e => {
      e.preventDefault();
      // console.log("send_chat_message form submit")
      searchWaNumber();
    })
  })

  $('#chat_message').keyup(function (event) {
    if (event.keyCode == 13) {
        var content = this.value;  
        var caret = getCaret(this);          
        if(event.shiftKey){
            this.value = content.substring(0, caret - 1) + "\n" + content.substring(caret, content.length);
            event.stopPropagation();
        } else {
            this.value = content.substring(0, caret - 1) + content.substring(caret, content.length);
            $('#send_chat_message').submit();
        }
    }
  });

  function getCaret(el) { 
    if (el.selectionStart) { 
      return el.selectionStart; 
    } else if (document.selection) { 
      el.focus(); 

      var r = document.selection.createRange(); 
      if (r == null) { 
        return 0; 
      } 

      var re = el.createTextRange(), 
          rc = re.duplicate(); 
      re.moveToBookmark(r.getBookmark()); 
      rc.setEndPoint('EndToStart', re); 

      return rc.text.length; 
    }  
    return 0; 
  }

  function sendChatMessage(){
    var message_id = $('#chat_message_id').val();
    var chat_message = $('#chat_message').val();
    var posturl = "whatsapp-tashan/sendtext";
    // var send_chat_message = document.getElementById('send_chat_message');
    // var formData = new FormData(send_chat_message);
    // var ufiles = $("#send_chat_message")[0].files;
    var formData = new FormData();
    var files = $('#whatsapp_upload')[0].files[0];
    formData.append('whatsapp_upload',files);
    formData.append('chat_message_id',message_id);
    formData.append('chat_message',chat_message);
    // var formData = $('#send_chat_message').serialize();
    console.log('formData:'+formData);
    $("#chat_message").val('');
    $("#send_button").text('Sending...');
    ajaxPostCall(posturl, formData, sendChatMessageSuccess, failed);
  }

  function sendChatMessageSuccess(res){
    closeDialog();
    $("#send_button").text('Send');
    startIntervalChatBoxSuccess(res);
  }

  function failed(jqXHR, exception){
    closeDialog();
    $("#send_button").text('Send');
    msg = 'Error.\n' + jqXHR.responseText;
    console.log(jqXHR, exception, msg);
    var error_message = jqXHR.responseJSON.message;
    if(error_message){
      alert(error_message);
    }
  }

  function startChat(){
    $("#click_to_start").addClass("hidden");
    $("#start_chat").removeClass("hidden");
  }

  function stopChat(){
    localStorage.removeItem('wa_active_chat_ele');
    $(".active_chat").removeClass("active_chat");
    $("#click_to_start").removeClass("hidden");
    $("#start_chat").addClass("hidden");    
    clearWhatsappInterval();
  }

  function ajaxGetCall(geturl, success, failed){
    // console.log(geturl);
    $.ajax({
      url: geturl,
      type: "GET",
      async: false,
      success: function (res) {
        success(res);
      },
      error: function (jqXHR, exception) {
        failed(jqXHR, exception);
      },
    });
  }

  function ajaxPostCall(posturl, formData, success, failed){
    $.ajax({
      url: posturl,
      type: "POST",
      data: formData,
      async: false,
      cache: false,
      contentType: false,
      processData: false,
      success: function (res) {
        success(res);
      },
      error: function (jqXHR, exception) {
        failed(jqXHR, exception);
      },
    });
  }
</script>
<script>
  document.getElementById('chat_message').addEventListener('keydown', function(event) {
    if (event.keyCode === 13 && !event.shiftKey) {
        // Prevent default behavior (adding a new line)
        event.preventDefault();
        // Submit the form or send the message
        sendChatMessage();
    }
});
</script>

@endsection