 <style>
     
     .aw-chat-head img{
         cursor:pointer;
     }
     
 </style>
 
 <!-- Support and Chat Fixed Buttons -->
                <div class="chat-message-box position-fixed">


                    <!-- Chat Drop Down -->
                    <div class="ui floating bg-dark-green-color chat-widget-wrapper icon dropdown button">
                        <img src="{{ asset('images/icons/Vector 386.png') }}" alt="Chat Icon">

                        <div class="menu chat-menu">
                            <div id="chat-feature-widget" class="ui transition chat-feature-widget">
                                <div class="header d-flex justify-content-between align-items-center text-white">
                                    <p class="chat-popup-label text-light">Chats</p>
                                    <img class="remove-chat" src="{{ asset('images/icons/Vector (3).svg') }}" alt="Cross Chat Icon">
                                </div>
                                
                                <div class="aw-chats">
                                    
                                
                                
                               </div>
                              


                            </div>

                            <!-- User Inbox menu  -->
                            <div id="inbox" class="ui transition hidden chat-feature-widget inbox-wrapper">
                                <div class="header aw-chat-head d-flex align-items-center" style="justify-content: space-between;">
                                    <img id="back-to-users" src="{{ asset('images/icons/Vector 387.png') }}" alt="Back To Chat">
                                    <p class="chat-popup-label text-light">James</p>
                                    <img id="close-chat" src="{{ asset('images/icons/Vector (3).svg') }}" alt="Close Chat">
                                </div>
                                <div class="scrollhint">
                                   
                                   
                                    <!--<div class="item">-->
                                    <!--    <div class="single-user-content d-flex">-->
                                    <!--        <div class="chat-user-img-box receiver-message-box d-flex">-->
                                    <!--            <img class="align-self-end" src="{{ asset('images/Avatar.png') }}" alt="Dummy User">-->
                                    <!--            <p>Typing...</p>-->
                                    <!--        </div>-->
                                    <!--    </div>-->
                                    <!--</div>-->

                                </div>
                                <div class="outer-message-input-box">
                                <div class="inner-message-input d-flex align-items-center justify-content-between">
                                    <input id="aw-sms" type="text" class="border-0" placeholder="Type a reply">
                                    <p class="input-action d-flex align-items-center">
                                        <!--<img src="{{ asset('images/icons/gif.png') }}" alt="Gif">-->
                                        <!--<img src="{{ asset('images/icons/emoji.png') }}" alt="Emoji">-->
                                        <img src="{{ asset('images/icons/attachment.png') }}" alt="Attachment">
                                        <input type="file" id="file-picker" class="file-picker">
                                        <i class="fa fa-paper-plane-o send-icon" aria-hidden="true"></i>
                                      
                                    </p>
                                </div>
                            </div>


                            </div>
                        </div>
                    </div>
                    <!-- End -->



                    <!-- Support Drop down -->
                    <div class="ui floating bg-dark-green-color support-widget-wrapper  icon dropdown button ">
                        <img src="images/icons/support.svg" alt="Support Icon">
                        <div class="menu support-widget">
                            <div class="header support-header mt-0 text-center">
                                <h2 class="color-dark-green">Help & Support</h2>
                            </div>
                            <div class="support-facilities-box d-flex justify-content-between flex-wrap">
                                <div class="item text-center">
                                    <div class="support-img-box align-content-center">
                                        <img src="images/icons/faq-svgrepo-com 1.svg" alt="">
                                    </div>
                                    <p class="color-dark-green">FAQ</p>
                                </div>
                                <div class="item text-center">
                                    <div class="support-img-box align-content-center">
                                        <img src="images/icons/laptop-minimalistic-svgrepo-com 1.svg" alt="">
                                    </div>
                                    <p class="color-dark-green">Using Kundo</p>
                                </div>
                                <div class="item text-center">
                                    <div class="support-img-box align-content-center">
                                        <img src="images/icons/launch-svgrepo-com 1.svg" alt="">
                                    </div>
                                    <p class="color-dark-green text-wrap">Launching Kundo</p>
                                </div>
                                <div class="item text-center">
                                    <div class="support-img-box align-content-center">
                                        <img src="images/icons/setting-svgrepo-com 1.svg" alt="">
                                    </div>
                                    <p class="color-dark-green text-wrap">Technical Settings</p>
                                </div>
                                <div class="item text-center">
                                    <div class="support-img-box align-content-center">
                                        <img src="images/icons/data-mapping-svgrepo-com 1.svg" alt="">
                                    </div>
                                    <p class="color-dark-green ">Integration</p>
                                </div>
                                <div class="item text-center">
                                    <div class="support-img-box align-content-center">
                                        <img src="images/icons/open-door-svgrepo-com 1.svg" alt="">
                                    </div>
                                    <p class="color-dark-green text-wrap">Privacy & Policy</p>
                                </div>
                                <div class="item text-center">
                                    <div class="support-img-box align-content-center">
                                        <img src="images/icons/news-svgrepo-com 1.svg" alt="">
                                    </div>
                                    <p class="color-dark-green text-wrap">News & Updates</p>
                                </div>
                                <div class="item text-center">
                                    <div class="support-img-box align-content-center">
                                        <img src="images/icons/graduate-cap-svgrepo-com 1.svg" alt="">
                                    </div>
                                    <p class="color-dark-green ">Training</p>
                                </div>
                            </div>

                            <div class="header contact-us-header text-center">
                                <h2 class="color-dark-green">Contact Us</h2>
                            </div>

                            <div class="contact-us-box d-flex justify-content-center">
                                <div class="item text-center">
                                    <div class="support-img-box align-content-center">
                                        <img src="images/icons/email-14-svgrepo-com (1) 1.svg" alt="">
                                    </div>
                                    <p class="color-dark-green text-wrap">Technical Questions</p>
                                </div>
                                <div class="item text-center">
                                    <div class="support-img-box align-content-center">
                                        <img src="images/icons/about-filled-svgrepo-com 1.svg" alt="">
                                    </div>
                                    <p class="color-dark-green">About Kundo</p>
                                </div>
                            </div>


                        </div>
                    </div>
                    <!-- End -->

                </div>
                
                <!-- End -->
                
                <audio style="display:none;" id="messageSound" src="{{asset('assets/noti.wav')}}" preload="auto"></audio>

                
                <script src="https://chat.rapidev.tech/socket.io/socket.io.js"></script>
    <script>
    
        var customer_id = false;
        var startData = false;
        var localId = false;
        
        var customers = [];
        
        const socket = io('https://chat.rapidev.tech/', {
            withCredentials: false,
            
        });
        
        
        
        // Event listener for successful connection
        socket.on('connect', () => {
            console.log('Connected to the server with socket ID:', socket.id);
            customer_id = socket.id;
             
                localId = "{{auth()->user()->id}}";
              
             socket.emit('register', localId);
            console.log(localId);
            
           
            
        });
        
        // Optionally, handle the disconnect event
        socket.on('disconnect', (reason) => {
            console.log('Disconnected from the server:', reason);
            customer_id = false;
            if (reason === 'io server disconnect') {
                // The server disconnected the client, try to reconnect
                socket.connect();
            }
        });

        
        
        console.log(socket);
        document.addEventListener('DOMContentLoaded', (event) => {
            
             $.ajax({
                url: "{{route('chatgroups.get')}}",
                method: 'GET',
                success: function(response) {
                    console.log(response);
                    
                    var html = '';
                    
                    for(var i=0;i<response.length;i++){
                        
                        var chat = response[i];
                        
                        chat['isFirst'] = true;
                        
                        customers[chat.id] = chat;
                        
                        html += ` <div class="item open-inbox" data-chat="${chat.id}" data-customer="${chat.customer_id}" data-subject="${chat.subject}" data-user="${chat.user_id}">
                                    <div class="single-user-content d-flex">
                                        <div class="chat-user-img-box">
                                            <img src="{{ asset('images/Avatar.png') }}" alt="Dummy User">
                                        </div>
                                        <div class="user-message-detail">
                                            <p class="recepient-message-detail">${chat.name} <span>Sep 27</span></p>
                                            <p class="text-wrap descriptive-message">${chat.subject}</p>
                                        </div>
                                    </div>
                                </div>`;
                        
                       
                    }
                    
                     $('.aw-chats').html(html);
                    
                    // Update action box with fetched content
                   // $('.action-box').html(response);
                },
                error: function(error) {
                    console.log('Error fetching action box content:', error);
                }
            });
            
            var activeChat = false;
            var inbox = $('#inbox .scrollhint');
            
          
            
            
             $(document).on('click', '.open-inbox', async function()  {
                 
                  var chat = customers[$(this).data('chat')];
                
                 var messages = await getMessage(chat.id);
                 console.log(messages);
                 
                 if(messages){
                 
                         for(var i=0;i<messages.length;i++){
                             var sms = messages[i];
                             
                             if(sms.from == "user"){
                                  inbox.append(` <div class="item">
                                        <div class="single-user-content d-flex">
                                            <div class="chat-user-img-box receiver-message-box d-flex">
                                                <img src="{{ asset('images/Avatar.png') }}" alt="Dummy User">
                                                <p>${sms.message}</p>
                                            </div>
                                        </div>
                                    </div>`);
                             }else{
                                 inbox.append(` <div class="item d-flex justify-content-end">
                                        <div class="sender-message-box text-white">
                                            <p>${sms.message}</p>
                                        </div>
                                    </div>`);
                             }
                             
                         }
                 
                 }
                
                 $('.chat-popup-label').text(chat.name);
                 
                 activeChat = chat;
                 
                 if(chat.isFirst){
                 
                 }
                 
                 console.log(activeChat);
                 
                slideTransition('#chat-feature-widget', 'left', true);
                slideTransition('#inbox', 'right', false);
            });
            
            $('.send-icon').click(async function(){
                
                var sms = $('#aw-sms').val();
                
                if(sms != ""){
                  
                    console.log(activeChat.id);
                  const formData = new FormData();
                    formData.append('chat_id', activeChat.id);  // Static value as per your example
                    formData.append('from', 'company');  // Assuming a static value for simplicity
                    formData.append('message', sms);
                    formData.append('type', 'text');
                    
    
                    // API endpoint
                    const apiUrl = 'https://kundesone.no/api/chat/send-message';
            
                    // Fetch API to send the FormData
                    fetch(apiUrl, {
                        method: 'POST',
                        body: formData
                    })
                    .then(response => response.json())
                    .then(data => {
                        console.log('Success:', data);

                          socket.emit('chat message',{sms:sms,id:activeChat.id},activeChat.customer_id);
                    
                     inbox.append(` <div class="item d-flex justify-content-end">
                                        <div class="sender-message-box text-white">
                                            <p>${sms}</p>
                                        </div>
                                    </div>`);
                                    
                                     $('#aw-sms').val("");
                                     
                                      scrollToBottom();
                    })
                    
                     
                }
                
               
                
            });
            
            
            
            
            async function getMessage(chat_id) {
  const apiUrl = 'https://kundesone.no/api/chat/getMessages';
  try {
    const response = await fetch(apiUrl, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'  // Assuming the server expects JSON
      },
      body: JSON.stringify({ chat_id: chat_id })
    });

    if (!response.ok) {
      throw new Error('Network response was not ok');
    }

    const messages = await response.json();
    return messages;
  } catch (error) {
    console.error('Error:', error);
    return false;
  }
}

         
    
            socket.on('chat message', function(msg) {
                playMessageSound();
                
                if(msg.id == activeChat.id){
                
                inbox.append(`  <div class="item">
                                        <div class="single-user-content d-flex">
                                            <div class="chat-user-img-box receiver-message-box d-flex">
                                                <img class="align-self-end" src="{{ asset('images/Avatar.png') }}" alt="Dummy User">
                                                <p>${msg.sms}</p>
                                            </div>
                                        </div>
                                    </div>`);
                                    
                }
                
                console.log(msg);
                // var item = document.createElement('li');
                // item.textContent = msg;
                // document.getElementById('messages').appendChild(item);
                // window.scrollTo(0, document.body.scrollHeight);
                
                scrollToBottom();
            });
            
            
            socket.on('start_chat', function(msg) {
                console.log(msg);
            });
            
        });
        
        
        function scrollToBottom() {
    var $div = $('#scrollhint');
    $div.scrollTop($div.prop("scrollHeight"));
}
        
        function playMessageSound() {
            var sound = document.getElementById('messageSound');
            
            sound.play();
        }

        
             
        
    </script>