@include('admin.common.meta')
@include('admin.common.scripts')

<style>
  .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;
  }
  .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: #a33131;
    font-size: 12px;
}
  @keyframes blinker {
    50% {
      opacity: 0;
    }
  }

/* Spinner */
.spinner-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Ensure it is on top of other content */
}
.spinner {
    border: 8px solid #f3f3f3;
    border-top: 8px solid #3498db;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
}

/* Spinner animation */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

</style>

<div class="content-wrappers"> 
  <!-- Content Header (Page header) -->
  <!-- <section class="content-header">
    <h1> {{ trans('Whatsapp GuruTV') }} <small>{{ trans('Whatsapp GuruTV') }}...</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 GuruTV') }}</li>
    </ol>
  </section> -->
  
  <!-- Main content -->
  <section class="content"> 
    <!-- Info boxes --> 
    @php
      $getUserRoleData  = Session::get('userRoleData'); 
      $Customers      = explode(",",$getUserRoleData->Customers);
      $Meta      = explode(",",$getUserRoleData->Meta);
  

    @endphp
    <!-- /.row -->

    <div class="row">
    <div class="spinner-overlay" id="spinner" style="display:none">
        <div class="spinner"></div>
    </div>
      <div class="col-md-12">
        <div class="box">
          <div class="box-header">
            <h3 class="box-title">{{ trans('Whatsapp Messages') }} </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>

                @if(Auth::guard('admin')->check() && Auth::guard('admin')->user()->role_id == 19)
                  <button type="button" onclick="logout()" class="btn btn-secondary" style="width:80px; height:30px; border: 1px solid black; margin-left:68%; font-weight: bold;">Log Out</button>
                @endif
              </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)

@php
     if($whatsapp_list->message_sender_id == "16479432566" || $whatsapp_list->message_recipient_id == "16479432566")  {
      $product = "16479432566";
      $product_name = "GuruTv";
     } else if  ($whatsapp_list->message_sender_id == "17783722112" || $whatsapp_list->message_recipient_id == "17783722112") {
      $product = "17783722112";
      $product_name = "BossTv";
     } else if  ($whatsapp_list->message_sender_id == "16479430707" || $whatsapp_list->message_recipient_id == "16479430707") {
      $product = "16479430707";
      $product_name = "TashanTv";
     }
     else if  ($whatsapp_list->message_sender_id == "14037752000" || $whatsapp_list->message_recipient_id == "14037752000") {
      $product = "14037752000";
      $product_name = "VoisTv";
     }

    $last_time = $whatsapp_list->created_at;
    $time_only = date('h:i A', strtotime($last_time)); 

    $button_status = $whatsapp_list->message_status === "read" ? "Unread" : "Read";
@endphp

                            <tr>
                              <td style="margin:5px; padding: 5px; border-bottom: 1px solid #000;margin-bottom:0" id="ele_{{ $whatsapp_list->message_sender_id }}_{{ $product }}"

                              onclick="startChatBox('{{ $whatsapp_list->message_sender_id }}', '{{ $product }}')">
                              <div class="row" id="guru" style="margin-left: 3px;">
                                <div style="display:flex">
                                  <p style="width:74px;" > {{ $product_name }} </p>
                                    
                                  <p style="width: 220px; display: inline-block; margin-bottom: 0; font-size:14px;">
                                  +{{ $whatsapp_list->message_sender_id }} ({{ $whatsapp_list->message_sender_name }})
                                  </p>
                                </div>
                                <div style="display: flex; align-items: center;">
                                    <button style="height: 19px; width: 69px; background-color: #302d2d; color: white; display: flex; align-items: center; padding: 0; border: none;">
                                        <span style="margin-right: 1px;">✔️</span><span style="font-size:13px">{{ $button_status }}</span>
                                    </button>

                                    <p  style="margin: 0; margin-left: 21px;">{{ $time_only }}</p>
                                    
                                    <p style="margin: 0; margin-left: 40px;">
                                        {{ $whatsapp_list->user_name ?? '' }}
                                    </p>
                                </div>
                              </div>
                              </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 type="hidden" id='chat_product_id' name="chat_product_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 chat_product_id = '';
  var my_whatsapp_chat_list_interval;
  var my_whatsapp_chat_interval;
  var wa = {};

  $("#chat_message_id").val('');
  $("#chat_product_id").val('');

  chat_message_id = getParameterByName('message_id');
  chat_product_id = getParameterByName('product_id');
  if(chat_message_id && chat_product_id){
      console.log(chat_message_id, chat_product_id);
      startIntervalChatBox();
      startIntervalChatListBox();
  }
  
  localStorage.removeItem('wa_active_chat_ele');
  localStorage.removeItem('wa_search');

  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()
    delete(wa.search);
    $("#wa_search").val('');
    stopChat();
    startIntervalChatListBox();
  }

  function searchWaNumber(){
    // clearWhatsappChatListInterval()
    wa.search = $("#wa_search").val();
    startIntervalChatListBox();
  }

  function startIntervalChatListBox(){
    var message_id = chat_message_id;
    var name = chat_product_id;

    if(wa.search){
      url = "whatsapp/list?search="+wa.search;
    }
    else{
      url = "whatsapp/list";
    }
    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 message_recipient_id = list[i].message_recipient_id;
        if (message_sender_id === '16479432566' || message_recipient_id === '16479432566') {
            product = 16479432566; 
            product_name = "GuruTv";
        } 
        else if(message_sender_id === '17783722112' || message_recipient_id === '17783722112'){
          product = 17783722112;
          product_name = "BossTv";
        }
        else if(message_sender_id === '14037752000' || message_recipient_id === '14037752000'){
          product = 14037752000;
          product_name = "VoisTv";
        }
        else {
            product = 16479430707;
            product_name = "TashanTv";
        }        

        var active_chat_message_id = $("#chat_message_id").val();
        var active_chat_product_id = $("#chat_product_id").val();
        var active_ele = "ele_"+active_chat_message_id+"_"+active_chat_product_id;//localStorage.getItem('wa_active_chat_ele');
        var active_class = (active_ele == 'ele_'+message_sender_id+'_'+product) ? "active_chat" : "";
        var blink_class = (message_status == 'delivered') ? "blink_chat" : "";
        var received_id = list[i].message_recipient_id;
        var user_name = list[i].user_name || '';

        var last_time  = list[i].created_at;
        var dateObj = new Date(last_time);

        var message_status = list[i].message_status;
        
        var button_status = message_status === "read" ? "Unread" : "Read";

        var formattedTime = dateObj.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' });
   
        list_html += '<tr>' +
            '  <td id="ele_' + message_sender_id + '_'+ product +'" class="' + active_class + ' ' + blink_class + '" onclick="startChatBox(\'' + message_sender_id + '\', \'' + product + '\')" style="margin:5px; padding: 5px; border-bottom: 1px solid #000;margin-bottom:0">' +
            '<div class="row" id="guru" style="margin-left: 3px;">' +
              '<div style="display:flex">' +
              '      <p style="width:74px;">' + product_name + '</p>' +
              '      <p style="width: 220px; display: inline-block; margin-bottom: 0; font-size:14px;">+' + message_sender_id + ' (' + message_sender_name + ')</p>' +
            
              '</div>' +
              '<div style="display: flex; align-items: center;">' +
              '<button style="height: 19px; width: 69px; background-color: #302d2d; color: white; display: flex; align-items: center; padding: 0; border: none;" ' +
              ' onClick="markAsRead(\'' + product + '\', \'' + message_sender_id + '\')">' +
              ' <span style="margin-right: 1px;">✔️</span><span style="font-size:13px">' +button_status + '</span>' +
              '</button>' +
              '      <p style="margin: 0; margin-left: 21px;">' + formattedTime + '</p>' +
              '      <p style="margin: 0; margin-left: 40px;">' + user_name + '</p>' +
              '    </div>' 
              '    </div>' 
            '  </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(){
    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'){
    // console.log(my_whatsapp_chat_list_interval, 'jia shree');
    startWhatsappChatListInterval();
  }

  function startChatBox(message_id, product_id){
    document.getElementById('spinner').style.display = 'flex'; //show spinner
    // console.log(document.getElementById('spinner'));
    // console.log(message_id, product_id, 'startChatBox');
    var start_chat_classes = document.getElementById("start_chat").classList;
    start_chat_class_hidden = start_chat_classes.contains("hidden");
    // if(start_chat_class_hidden){
        clearWhatsappInterval();
        $(".active_chat").removeClass("active_chat");
        chat_message_id = message_id;
        chat_product_id = product_id;
        var chat_element = "ele_"+chat_message_id+"_"+chat_product_id;
        //localStorage.setItem("wa_active_chat_ele", chat_element);
        // $("#"+chat_element).removeClass("blink_chat");
        // $("#"+chat_element).addClass("active_chat");
        url = "whatsapp/listchat?message_id="+message_id + "&chat_product_id="+product_id;
        ajaxGetCall(url, startChatBoxSuccess, failed);
        startIntervalChatListBox();
    // }
    // else{
    //     chat_message_id = $("#chat_message_id").val();
    //     chat_product_id = $("#chat_product_id").val();
    //     if((chat_message_id == message_id) && (chat_product_id == product_id)){
    //         return false;
    //     }
    //     else{
    //         var url = "whatsapp?message_id="+message_id+"&product_id="+product_id;
    //         window.open(url, '_blank').focus();
    //     }
    //     return;
    // }
  }
 
  function startChatBoxSuccess(res){
    document.getElementById('spinner').style.display = 'none';
    // console.log(document.getElementById('spinner'));
    var chats = res.data.chat;
    var active_chat_product_id = res.data.chat_product_id;

    if(active_chat_product_id == "16479432566") {
      var product_name = "GuruTv";
    } else if (active_chat_product_id == "17783722112") {
      var product_name = "BossTv";
    }  else if (active_chat_product_id == "16479430707") {
      var product_name = "TashanTv";
    } else if (active_chat_product_id == "14037752000") {
      var product_name = "VoisTv";
    } 

    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 == "16479432566" || chats[i].message_sender_id == "16479430707" || chats[i].message_sender_id == "17783722112"  || chats[i].message_sender_id == "14037752000" ) ? "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 != "16479432566" && chats[i].message_sender_id != "16479430707" && chats[i].message_sender_id != "17783722112" && chats[i].message_sender_id != "14037752000"){
        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 media_id = chats[i].media_id
      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 (msg_pos == "right-msg") {
        if (message_type == "media") {
            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>' +
                '<div class="msg-delete" data-media_id="' + media_id + '" onclick="deleteMedia(\'' + media_id + '\')"style="cursor: pointer;">Delete</div>';
        } else {
            chat_html += '<div class="msg-text">' + text_body_message + '</div>';
        }
      } else {
        if (message_type == "media") {
              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><strong>'+product_name+'</strong> 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);
    $("#chat_product_id").val(active_chat_product_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 name = chat_product_id;
    var chat_element = "ele_"+chat_message_id+"_"+name;
    // $("#"+chat_element).removeClass("blink_chat");
    url = "whatsapp/listchat?message_id="+message_id+"&interval_id="+message_id+"&chat_product_id="+name;
    ajaxGetCall(url, startIntervalChatBoxSuccess, failed);
  }

  function startIntervalChatBoxSuccess(res){
    var chats = res.data.chat;
    var active_chat_product_id = res.data.chat_product_id;

    if(active_chat_product_id == "16479432566") {
      var product_name = "GuruTv";
    } else if (active_chat_product_id == "17783722112") {
      var product_name = "BossTv";
    }  else if (active_chat_product_id == "16479430707") {
      var product_name = "TashanTv";
    } 
    else if (active_chat_product_id == "14037752000") {
      var product_name = "VoisTv";
    } 

    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 == "16479432566" || chats[i].message_sender_id == "16479430707" || chats[i].message_sender_id == "17783722112" || chats[i].message_sender_id == "14037752000") ? "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 != "16479432566" && chats[i].message_sender_id != "16479430707" && chats[i].message_sender_id != "17783722112" && chats[i].message_sender_id != "14037752000"){
        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 format_date = date_time.toLocaleDateString("en-US", date_options);
      var media_id = chats[i].media_id
      var user_name = (chats[i].user_name) ? chats[i].user_name : "";
      // 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 (msg_pos == "right-msg") {
        if (message_type == "media") {
            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>' +
                '<div class="msg-delete" data-media_id="' + media_id + '" onclick="deleteMedia(\'' + media_id + '\')"style="cursor: pointer;">Delete</div>';
        } else {
            chat_html += '<div class="msg-text">' + text_body_message + '</div>';
        }
      } else {
        if (message_type == "media") {
              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><strong>'+product_name+'</strong> 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);
    $("#chat_product_id").val(active_chat_product_id);
    setTimeout(function() {
      var objDiv = document.getElementById("msger-chat");
      objDiv.scrollTop = objDiv.scrollHeight;
    },1000);
    // startChat();
  }

  if(chat_message_id){
    startWhatsappInterval();
  }
  
  if(chat_message_id == '' || chat_message_id === null){
    clearWhatsappInterval();
  }

  let typing = false; 
  let typingTimeout;
  let gapTimeout;
  const TYPING_GAP_DURATION = 5000;

  function startWhatsappChatListInterval(){
    my_whatsapp_chat_list_interval = setInterval(function() {
        if (!typing) {
          startIntervalChatListBox();
        }
    }, 10000);
  }
  
  function startWhatsappInterval(){
    my_whatsapp_chat_interval = setInterval(function() {
        if (!typing) {
            startIntervalChatBox();
        }
    }, 20000);
  }

  function onTypingStart() {
    typing = true;
    clearTimeout(typingTimeout);
    clearTimeout(gapTimeout);
  }

  function onTypingStop() {
      onTypingStart();
      gapTimeout = setTimeout(() => {
          console.log('5 seconds done');
          typing = false;
          startIntervalChatBox();
          startIntervalChatListBox();
      }, TYPING_GAP_DURATION);
  }
  document.querySelector('#chat_message').addEventListener('keyup', onTypingStop);

  function clearWhatsappInterval(){
    if(typeof my_whatsapp_chat_interval != 'undefined'){
      clearInterval(my_whatsapp_chat_interval);
    }
  }

  jQuery($ => {
    $('#send_chat_message').on('submit', e => {
      e.preventDefault();
      //sendChatMessage();
    })
    $('#search_chat_number').on('submit', e => {
      e.preventDefault();
      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; 
  }

//adding in global varible for get active class Data
  let idProduct; 
  $('td').click(function() {
      if ($(this).hasClass('active_chat')) {
        idProduct = $(this).attr('id');
      }
  });

  function sendChatMessage(){
    var message_id = $('#chat_message_id').val();
    var chat_product_id = $('#chat_product_id').val();
    var chat_message = $('#chat_message').val();
    // $(".active_chat").removeClass("active_chat");
    var posturl = "whatsapp/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);
    formData.append('chat_product_id', chat_product_id);
    // var formData = $('#send_chat_message').serialize();
    $("#chat_message").val('');
    $("#send_button").text('Sending...');
    ajaxPostCall(posturl, formData, sendChatMessageSuccess, failed);
  }

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

  function failed(jqXHR, exception){
    document.getElementById('spinner').style.display = 'none';

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

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

  function stopChat(){
    console.log("stopChat")  
    $('#chat_message_id').val("");
    $('#chat_product_id').val(""); 
    $(".active_chat").removeClass("active_chat");
    $("#click_to_start").removeClass("hidden");
    $("#start_chat").addClass("hidden");    
    clearWhatsappInterval();
  }

  function ajaxGetCall(geturl, success, failed){
    $.ajax({
      url: geturl,
      type: "GET",
      // async: false,
      success: function (res) {
        success(res);
        // setTimeout(function() {
        //   success(res);
        // }, 2000);
      },
      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);
      },
    });
  }

    function getParameterByName(name, url = window.location.href) {
        name = name.replace(/[\[\]]/g, '\\$&');
        var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
            results = regex.exec(url);
        if (!results) return null;
        if (!results[2]) return '';
        return decodeURIComponent(results[2].replace(/\+/g, ' '));
    }
</script>

 <script>
  document.getElementById('chat_message').addEventListener('keydown', function(event) {
    // Check if Enter key is pressed (key code 13)
    if (event.keyCode === 13 && !event.shiftKey) {
        // Prevent default behavior (adding a new line)
        event.preventDefault();
        // Submit the form or send the message
        sendChatMessage(); 
    }
});
</script>

<script>
function deleteMedia(mediaId){
    var posturl = "delete-whatsapp-message"; 
    var formData = new FormData();
    formData.append('media_id', mediaId);
    ajaxPostCall(posturl, formData, sendChatMessageSuccess, failed);
}
</script>

<script>
function markAsRead(productName, messageSenderId) {
  // alert('Product: ' + productName + '\nSender ID: ' + messageSenderId);
    $.ajax({
        url: "whatsapp/mark-as-read", 
        type: "POST",
        data: {'productName':productName, 'messageSenderId':messageSenderId},
        success: function(response) {
          startIntervalChatListBox();
            console.log('Success:', response);
        },
        error: function(xhr, status, error) {
            console.error('Error:', error);
        }
    });
  }
  </script>
<script>
function logout() {
  const baseUrl = window.location.origin; 
    const logoutUrl = `${baseUrl}/admin/logout`; 
    window.location.href = logoutUrl;
}
</script>