diff --git a/app/Http/Controllers/Chat/ChatController.php b/app/Http/Controllers/Chat/ChatController.php
index 0e936a2..de62c16 100644
--- a/app/Http/Controllers/Chat/ChatController.php
+++ b/app/Http/Controllers/Chat/ChatController.php
@@ -12,6 +12,21 @@
 
 class ChatController extends Controller
 {
+    
+    public function getChat(Request $request){
+        $chat_id = $request->chat_id;
+        
+        return ChatGroup::find($chat_id);
+    }
+    
+    
+     public function getMessages(Request $request){
+        $chat_id = $request->chat_id;
+        
+        return Message::where('chat_id',$chat_id)->get();
+    }
+    
+    
     /**
      * Start a new chat by creating a chat group.
      *
@@ -53,7 +68,7 @@ public function startChat(Request $request)
 
         $chatGroup = ChatGroup::create($data);
 
-        return response()->json(['chat_id' => $chatGroup->id], 200);
+        return response()->json(['chat' => $chatGroup], 200);
         
         }else{
             return response()->json(['message' => 'user not found'], 400);
@@ -109,4 +124,13 @@ public function select_user($company_id){
         return $selected;
         
     }
+    
+      public function getChatGroupsByCompany(Request $request)
+    {
+        $companyId = getSelectedCompany();
+    
+        $chatGroups = ChatGroup::where('company_id', $companyId)->get();
+
+        return response()->json($chatGroups);
+    }
 }
diff --git a/public/assets/noti.wav b/public/assets/noti.wav
new file mode 100644
index 0000000..46c3308
Binary files /dev/null and b/public/assets/noti.wav differ
diff --git a/public/assets/script.js b/public/assets/script.js
index 4add0d0..5d3e529 100644
--- a/public/assets/script.js
+++ b/public/assets/script.js
@@ -9,11 +9,13 @@ $(document).ready(function () {
   });
   initFomanticDropdown(".user-select-dropdown", { action: "activate" });
 
+
+
   //Handle opening / closing of inbox
-  $(".open-inbox").on("click", function () {
-    slideTransition("#chat-feature-widget", "left", true);
-    slideTransition("#inbox", "right", false);
-  });
+//   $(".open-inbox").on("click", function () {
+//     slideTransition("#chat-feature-widget", "left", true);
+//     slideTransition("#inbox", "right", false);
+//   });
 
   $("#back-to-users").on("click", function () {
     slideTransition("#inbox", "left", true);
diff --git a/resources/views/all-tickets.blade.php b/resources/views/all-tickets.blade.php
index 07d979a..0c76294 100644
--- a/resources/views/all-tickets.blade.php
+++ b/resources/views/all-tickets.blade.php
@@ -5,65 +5,153 @@
 @section('content')
 
 <script>
-  $(document).ready(function() {
-        // Initially disable all the buttons
-        $('.handle_multiple__options .tags button').prop('disabled', true);
-
-        // Toggle visibility of handle_multiple__options on button click
-        $('.handle-multiple-btn').click(function() {
-            $('.handle_multiple__options').toggle();
-        });
-
-        // Enable/disable buttons based on the select all checkbox
-        $('#select-all').change(function() {
-            if ($(this).is(':checked')) {
-                $('.handle_multiple__options .tags button').prop('disabled', false);
-            } else {
-                $('.handle_multiple__options .tags button').prop('disabled', true);
-            }
-        });
-
-        // Show the modal when "Assign post" button is clicked
-        $('.handle_multiple__options .tags button:contains("Assign post")').click(function(e) {
-            e.preventDefault(); // Prevent default action to avoid any conflict
-            $('#customModal').show();
-        });
-
-        // Close the modal when the close button or outside the modal is clicked
-        $('.modal-close, .modal').click(function() {
-            $('#customModal').hide();
-        });
-
-        // Prevent modal content from closing the modal when clicked
-        $('.modal-content').click(function(e) {
-            e.stopPropagation();
-        });
-        // Show the modal when "Move" button is clicked
-        $('.handle_multiple__options .tags button:contains("Move")').click(function(e) {
-            e.preventDefault(); // Prevent default action to avoid any conflict
-            $('#customModal2').show();
-        });
-
-        // Close the modal when the close button or outside the modal is clicked
-        $('.modal-close, .modal').click(function() {
-            $('#customModal2').hide();
-        });
-        // Show the modal when "Reply to multiple" button is clicked
-        $('.handle_multiple__options .tags button:contains("Reply to multiple")').click(function(e) {
-            e.preventDefault(); // Prevent default action to avoid any conflict
-            $('#customModal3').show();
-        });
-
-        // Close the modal when the close button or outside the modal is clicked
-        $('.modal-close, .modal').click(function() {
-            $('#customModal3').hide();
-        });
-
-    
+$(document).ready(function() {
+    // Toggle filter dropdown on button click
+    $('.list-filter-btn').click(function() {
+        $('.filter-options').toggle();
     });
 
+    // Initial hide for handle_multiple__options
+    $('.filter-options').hide();
+    $('.handle_multiple__options').hide();
+
+    // Toggle visibility of handle_multiple__options on button click
+    $('.handle-multiple-btn').click(function() {
+        $('.handle_multiple__options').toggle();
+    });
+
+    // Initially disable all the buttons
+    $('.handle_multiple__options .tags button').prop('disabled', true);
+
+    // Enable/disable buttons based on the select all checkbox
+    $('#select-all').change(function() {
+        if ($(this).is(':checked')) {
+            $('.handle_multiple__options .tags button').prop('disabled', false);
+        } else {
+            $('.handle_multiple__options .tags button').prop('disabled', true);
+        }
+    });
+
+    // Show the modal when "Assign post" button is clicked
+    $('.handle_multiple__options .tags button:contains("Assign post")').click(function(e) {
+        e.preventDefault();
+        $('#customModal').show();
+    });
+
+    // Show the modal when "Move" button is clicked
+    $('.handle_multiple__options .tags button:contains("Move")').click(function(e) {
+        e.preventDefault();
+        $('#customModal2').show();
+    });
+
+    // Show the modal when "Reply to multiple" button is clicked
+    $('.handle_multiple__options .tags button:contains("Reply to multiple")').click(function(e) {
+        e.preventDefault();
+        $('#customModal3').show();
+    });
+
+    // Close the modal when the close button or outside the modal is clicked
+    $('.modal-close, .modal').click(function() {
+        $('.modal').hide();
+    });
+
+    // Prevent modal content from closing the modal when clicked
+    $('.modal-content').click(function(e) {
+        e.stopPropagation();
+    });
+
+    // Update Select status options based on Select filter selection
+    $('#filter-select').change(function() {
+        var selectedFilter = $(this).val();
+        console.log("Selected filter:", selectedFilter); // Debugging log
+        updateStatusOptions(selectedFilter);
+    });
+
+    // Initially hide filter based data section
+    $('.filter_based__data').hide();
+
+    // Function to update status options based on selectedFilter
+    function updateStatusOptions(selectedFilter) {
+        console.log("Updating status options for:", selectedFilter); // Debugging log
+        switch (selectedFilter) {
+            case 'Assigned to':
+                $('#status-select').html(`
+                    <option disabled value="">Select assigned to</option>
+                    <option value="Assigned">Assigned</option>
+                    <option value="Unassigned">Unassigned</option>
+                    <option value="Margin">Margin</option>
+                `);
+                $('.filter_based__data').show();
+                break;
+            case 'Which activity':
+                $('#status-select').html(`
+                    <option disabled value="">Select activity</option>
+                    <option value="Marked as spam">Marked as spam</option>
+                    <option value="Not spam">Not spam</option>
+                `);
+                $('.filter_based__data').show();
+                break;
+            case 'No activity':
+                $('#status-select').html(`
+                    <option disabled value="">Select No activity</option>
+                    <option value="Exercise">Exercise</option>
+                    <option value="Not Yoga">Not Yoga</option>
+                `);
+                $('.filter_based__data').show();
+                break;
+            case 'Editor':
+                $('#status-select').html(`
+                    <option disabled value="">Select Editor</option>
+                    <option value="Computer tool">Computer tool</option>
+                    <option value="Direct editor">Direct editor</option>
+                `);
+                $('.filter_based__data').show();
+                break;
+            case 'Spam':
+                $('#status-select').html(`
+                    <option disabled>Select Spam</option>
+                    <option value="Marked as spam">Marked as spam</option>
+                    <option value="Not spam">Not spam</option>
+                `);
+                $('.filter_based__data').show();
+                break;
+            case 'Status':
+                $('#status-select').html(`
+                    <option disabled value="">Select status</option>
+                    <option value="Completed">Completed</option>
+                    <option value="Not Completed">Not Completed</option>
+                `);
+                $('.filter_based__data').show();
+                break;
+            case 'Tags':
+                $('#status-select').html(`
+                    <option disabled value="">Select Tags</option>
+                    <option value="Target">Target</option>
+                    <option value="Mustafa">Mustafa</option>
+                `);
+                $('.filter_based__data').show();
+                break;
+            case 'Users':
+                $('#status-select').html(`
+                    <option disabled value="">Select Users</option>
+                    <option value="Merrs">Merrs</option>
+                    <option value="Abdullah">Abdullah</option>
+                `);
+                $('.filter_based__data').show();
+                break;
+            default:
+                $('#status-select').html(`
+                    <option disabled value="">Select status</option>
+                `);
+                $('.filter_based__data').show();
+                break;
+        }
+    }
+});
+
 </script>
 
+
 <style>
     .handle_multiple__options {
         display: none;
@@ -163,7 +251,27 @@
         text-decoration: none;
         cursor: pointer;
     }
-  
+    .filter-options {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px;
+    background-color: #f3f3f3;
+}
+
+.filter {
+    display: flex;
+    align-items: center;
+}
+
+.filter select {
+    margin-right: 10px;
+    padding: 5px;
+    border-radius: 5px;
+    border: 1px solid #ccc;
+}
+
+
 
 </style>
 
@@ -185,6 +293,28 @@
             </div>
                  
         </div>
+        <div class="filter-options">
+            <div class="filter">
+       <span> <b>Filter on:</b> &nbsp;</span>
+               <select id="filter-select" name="">
+                    <option disabled >Select filter</option>
+                    <option value="Assigned to">Assigned to</option>
+                    <option value="Which activity">Which activity</option>
+                    <option value="No activity">No activity</option>
+                    <option value="Editor">Editor</option>
+                    <option value="Spam">Spam</option>
+                    <option value="Status">Status</option>
+                    <option value="Tags">Tags</option>
+                    <option value="Users">Users</option>
+                </select>
+                    <div class="filter_based__data">
+                    <select id="status-select" name="">
+                        <option disabled>Select status</option>
+                        <!-- Options will be dynamically updated based on selected filter -->
+                    </select>
+                </div>
+            </div>
+            </div>
         <div class="handle_multiple__options">
            <div class="common_shre">
            <label for="select-all"> <input type="checkbox" name="" id="select-all"> Select all</label>
diff --git a/resources/views/components/chat-box.blade.php b/resources/views/components/chat-box.blade.php
new file mode 100644
index 0000000..784875d
--- /dev/null
+++ b/resources/views/components/chat-box.blade.php
@@ -0,0 +1,425 @@
+ <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>
\ No newline at end of file
diff --git a/resources/views/index.blade.php b/resources/views/index.blade.php
index 1dfbc10..6273432 100644
--- a/resources/views/index.blade.php
+++ b/resources/views/index.blade.php
@@ -13,6 +13,277 @@
     
 </script>
 
+<script>
+$(document).ready(function() {
+    // Toggle filter dropdown on button click
+    $('.list-filter-btn').click(function() {
+        $('.filter-options').toggle();
+    });
+
+    // Initial hide for handle_multiple__options
+    $('.filter-options').hide();
+    $('.handle_multiple__options').hide();
+
+    // Toggle visibility of handle_multiple__options on button click
+    $('.handle-multiple-btn').click(function() {
+        $('.handle_multiple__options').toggle();
+    });
+
+    // Initially disable all the buttons
+    $('.handle_multiple__options .tags button').prop('disabled', true);
+
+    // Enable/disable buttons based on the select all checkbox
+    $('#select-all').change(function() {
+        if ($(this).is(':checked')) {
+            $('.handle_multiple__options .tags button').prop('disabled', false);
+        } else {
+            $('.handle_multiple__options .tags button').prop('disabled', true);
+        }
+    });
+
+    // Show the modal when "Assign post" button is clicked
+    $('.handle_multiple__options .tags button:contains("Assign post")').click(function(e) {
+        e.preventDefault();
+        $('#customModal').show();
+    });
+
+    // Show the modal when "Move" button is clicked
+    $('.handle_multiple__options .tags button:contains("Move")').click(function(e) {
+        e.preventDefault();
+        $('#customModal2').show();
+    });
+
+    // Show the modal when "Reply to multiple" button is clicked
+    $('.handle_multiple__options .tags button:contains("Reply to multiple")').click(function(e) {
+        e.preventDefault();
+        $('#customModal3').show();
+    });
+
+    // Close the modal when the close button or outside the modal is clicked
+    $('.modal-close, .modal').click(function() {
+        $('.modal').hide();
+    });
+
+    // Prevent modal content from closing the modal when clicked
+    $('.modal-content').click(function(e) {
+        e.stopPropagation();
+    });
+
+    // Update Select status options based on Select filter selection
+    $('#filter-select').change(function() {
+        var selectedFilter = $(this).val();
+        console.log("Selected filter:", selectedFilter); // Debugging log
+        updateStatusOptions(selectedFilter);
+    });
+
+    // Initially hide filter based data section
+    $('.filter_based__data').hide();
+
+    // Function to update status options based on selectedFilter
+    function updateStatusOptions(selectedFilter) {
+        console.log("Updating status options for:", selectedFilter); // Debugging log
+        switch (selectedFilter) {
+            case 'Assigned to':
+                $('#status-select').html(`
+                    <option disabled value="">Select assigned to</option>
+                    <option value="Assigned">Assigned</option>
+                    <option value="Unassigned">Unassigned</option>
+                    <option value="Margin">Margin</option>
+                `);
+                $('.filter_based__data').show();
+                break;
+            case 'Which activity':
+                $('#status-select').html(`
+                    <option disabled value="">Select activity</option>
+                    <option value="Marked as spam">Marked as spam</option>
+                    <option value="Not spam">Not spam</option>
+                `);
+                $('.filter_based__data').show();
+                break;
+            case 'No activity':
+                $('#status-select').html(`
+                    <option disabled value="">Select No activity</option>
+                    <option value="Exercise">Exercise</option>
+                    <option value="Not Yoga">Not Yoga</option>
+                `);
+                $('.filter_based__data').show();
+                break;
+            case 'Editor':
+                $('#status-select').html(`
+                    <option disabled value="">Select Editor</option>
+                    <option value="Computer tool">Computer tool</option>
+                    <option value="Direct editor">Direct editor</option>
+                `);
+                $('.filter_based__data').show();
+                break;
+            case 'Spam':
+                $('#status-select').html(`
+                    <option disabled>Select Spam</option>
+                    <option value="Marked as spam">Marked as spam</option>
+                    <option value="Not spam">Not spam</option>
+                `);
+                $('.filter_based__data').show();
+                break;
+            case 'Status':
+                $('#status-select').html(`
+                    <option disabled value="">Select status</option>
+                    <option value="Completed">Completed</option>
+                    <option value="Not Completed">Not Completed</option>
+                `);
+                $('.filter_based__data').show();
+                break;
+            case 'Tags':
+                $('#status-select').html(`
+                    <option disabled value="">Select Tags</option>
+                    <option value="Target">Target</option>
+                    <option value="Mustafa">Mustafa</option>
+                `);
+                $('.filter_based__data').show();
+                break;
+            case 'Users':
+                $('#status-select').html(`
+                    <option disabled value="">Select Users</option>
+                    <option value="Merrs">Merrs</option>
+                    <option value="Abdullah">Abdullah</option>
+                `);
+                $('.filter_based__data').show();
+                break;
+            default:
+                $('#status-select').html(`
+                    <option disabled value="">Select status</option>
+                `);
+                $('.filter_based__data').show();
+                break;
+        }
+    }
+});
+
+</script>
+
+
+<style>
+    .handle_multiple__options {
+        display: none;
+        background-color: #f8f9fa; 
+        padding: 10px; 
+        border: 1px solid #ddd; 
+        margin-top: 10px;
+    }
+
+    .handle_multiple__options label {
+        display: flex;
+        align-items: center;
+        margin-bottom: 10px;
+    }
+
+    .handle_multiple__options .tags {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 10px; 
+    }
+
+    .handle_multiple__options .tags button {
+        background-color: #748C62; 
+        color: white; 
+        border: none; 
+        padding: 5px 10px; 
+        border-radius: 4px; 
+        cursor: pointer; 
+    }
+
+    .handle_multiple__options .tags button:hover {
+        background-color: #383F33; 
+    }
+    .handle_multiple__options .tags button:disabled {
+    background-color: #ccc; 
+    cursor: not-allowed;
+}
+
+.handle_multiple__options input{
+    width: 32px;
+    height: 19px;
+}
+.handle_multiple__options .common_shre{
+    display: flex;
+    justify-content: space-between;
+}
+/* Custom Modal CSS */
+.modal {
+        display: none;
+        position: fixed; 
+        z-index: 1000; 
+        left: 0;
+        top: 0;
+        width: 100%;
+        overflow: auto; 
+        background-color: rgb(0,0,0); 
+        background-color: rgba(0,0,0,0.4); 
+    }
+
+    .modal-content {
+    background-color: #fefefe;
+    margin: 15% auto;
+    padding: 20px;
+    border: 1px solid #888;
+    width: 13%;
+    border-radius: 10px;
+    position: relative;
+}
+   #customModal3 .modal-content {
+    background-color: #fefefe;
+    margin: 15% auto;
+    padding: 20px;
+    border: 1px solid #888;
+    width: 40%;
+    border-radius: 10px;
+    position: relative;
+}
+    .modal-content .btn-primary{
+        background-color: #748C62 !important;
+
+}
+
+    .modal-close {
+        color: #aaa;
+        float: right;
+        font-size: 28px;
+        font-weight: bold;
+        position: absolute;
+        right: 20px;
+        top: 10px;
+        cursor: pointer;
+    }
+
+    .modal-close:hover,
+    .modal-close:focus {
+        color: #000;
+        text-decoration: none;
+        cursor: pointer;
+    }
+    .filter-options {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px;
+    background-color: #f3f3f3;
+}
+
+.filter {
+    display: flex;
+    align-items: center;
+}
+
+.filter select {
+    margin-right: 10px;
+    padding: 5px;
+    border-radius: 5px;
+    border: 1px solid #ccc;
+}
+
+
+
+</style>
+
 <div class="content-wrapper">
     <div class="ui card chat-card">
         <div class="content chat-card-header d-flex align-items-center justify-content-between">
@@ -36,6 +307,44 @@
 
             </div>
 
+        </div>
+            <div class="filter-options">
+            <div class="filter">
+       <span> <b>Filter on:</b> &nbsp;</span>
+               <select id="filter-select" name="">
+                    <option disabled >Select filter</option>
+                    <option value="Assigned to">Assigned to</option>
+                    <option value="Which activity">Which activity</option>
+                    <option value="No activity">No activity</option>
+                    <option value="Editor">Editor</option>
+                    <option value="Spam">Spam</option>
+                    <option value="Status">Status</option>
+                    <option value="Tags">Tags</option>
+                    <option value="Users">Users</option>
+                </select>
+                    <div class="filter_based__data">
+                    <select id="status-select" name="">
+                        <option disabled>Select status</option>
+                        <!-- Options will be dynamically updated based on selected filter -->
+                    </select>
+                </div>
+            </div>
+            </div>
+        <div class="handle_multiple__options">
+           <div class="common_shre">
+           <label for="select-all"> <input type="checkbox" name="" id="select-all"> Select all</label>
+            <div class="tags">
+                <button>Assign post</button>
+                <button>Delete</button>
+                <button>Move</button>
+                <button>Open</button>
+                <button>Waiting</button>
+                <button>Done</button>
+                <button>Tag</button>
+                <button>Not spam</button>
+                <button>Reply to multiple</button>
+            </div>
+           </div>
         </div>
         <div class="content chat-content">
             <ul class="chat-details">
@@ -72,4 +381,51 @@
     </div>
 </div>
 
+<!-- Custom Modal post -->
+<div id="customModal" class="modal">
+  <div class="modal-content">
+    <span class="modal-close">&times;</span>
+    <h5>Assign Post</h5>
+    <form>
+      <div class="mb-3">
+        <label for="recipient-name" class="col-form-label">Recipient:</label>
+        <input type="text" class="form-control" id="recipient-name">
+      </div>
+      <div class="mb-3">
+        <label for="message-text" class="col-form-label">Message:</label>
+        <textarea class="form-control" id="message-text"></textarea>
+      </div>
+    </form>
+    <button type="button" class="btn btn-primary">Send</button>
+  </div>
+</div>
+<!-- Custom Modal move-->
+<div id="customModal2" class="modal">
+  <div class="modal-content">
+    <span class="modal-close">&times;</span>
+    <h5>Move</h5>
+    <form>
+      <div class="mb-3">
+        <label for="recipient-name" class="col-form-label">Conversation moved:</label>
+        <input type="text" class="form-control" id="recipient-name" placeholder="Inbox">
+      </div>
+     
+    </form>
+    <button type="button" class="btn btn-primary">Confirm</button>
+  </div>
+</div>
+<!-- Custom Modal Replay to multiple-->
+<div id="customModal3" class="modal">
+  <div class="modal-content">
+    <span class="modal-close">&times;</span>
+    <h5>Replay to multiple</h5>
+    <form>
+      <div class="mb-3 mt-4">
+        <p>Please choose only email conversations and try again</p>
+      </div>
+     
+    </form>
+
+  </div>
+</div>
 @endsection
\ No newline at end of file
diff --git a/resources/views/layouts/master.blade.php b/resources/views/layouts/master.blade.php
index 27dbff3..64d8c13 100644
--- a/resources/views/layouts/master.blade.php
+++ b/resources/views/layouts/master.blade.php
@@ -39,216 +39,10 @@
                 @yield('content')
                 <!-- End -->
 
-                <!-- 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="item open-inbox">
-                                    <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">James <span>Sep 27</span></p>
-                                            <p class="text-wrap descriptive-message">Lorem ipsum dolor sit amet,
-                                                adipiscing
-                                                elit. In lorem est... </p>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="item open-inbox">
-                                    <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">James <span>Sep 27</span></p>
-                                            <p class="text-wrap descriptive-message">Lorem ipsum dolor sit amet,
-                                                adipiscing
-                                                elit. In lorem est... </p>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="item open-inbox">
-                                    <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">James <span>Sep 27</span></p>
-                                            <p class="text-wrap descriptive-message">Lorem ipsum dolor sit amet,
-                                                adipiscing
-                                                elit. In lorem est... </p>
-                                        </div>
-                                    </div>
-                                </div>
-
-
-
-                            </div>
-
-                            <!-- User Inbox menu  -->
-                            <div id="inbox" class="ui transition hidden chat-feature-widget inbox-wrapper">
-                                <div class="header d-flex align-items-center">
-                                    <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>
-                                </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 src="{{ asset('images/Avatar.png') }}" alt="Dummy User">
-                                                <p>👋 Hi there! How can I help?</p>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <div class="item d-flex justify-content-end">
-                                        <div class="sender-message-box text-white">
-                                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing</p>
-                                        </div>
-                                    </div>
-                                    <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>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In lorem
-                                                    est,
-                                                    tincidunt at placerat ultricies, vehicula in erat. Donec vitae ante
-                                                    mollis, pretium augue vel, feugiat risus.</p>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <div class="item d-flex justify-content-end">
-                                        <div class="sender-message-box text-white">
-                                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing</p>
-                                        </div>
-                                    </div>
-                                    <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 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 -->
+               <x-chat-box />
+                
+                
+                
             </div>
         </div>
     </div>
diff --git a/resources/views/layouts/setting.blade.php b/resources/views/layouts/setting.blade.php
index d7925d1..d3935b1 100644
--- a/resources/views/layouts/setting.blade.php
+++ b/resources/views/layouts/setting.blade.php
@@ -105,211 +105,7 @@ class="side-bar-link bg-light-color d-flex align-items-center justify-content-be
         <!-- End -->
 
         <!-- Support and Chat Fixed Buttons -->
-        <div class="chat-message-box position-fixed">
-
-
-          <!-- Chat Drop Down -->
-          <div class="chat-widget-wrapper ui floating bg-dark-green-color 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="item open-inbox">
-                  <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">James <span>Sep 27</span></p>
-                      <p class="text-wrap descriptive-message">Lorem ipsum dolor sit amet,
-                        adipiscing
-                        elit. In lorem est... </p>
-                    </div>
-                  </div>
-                </div>
-                <div class="item open-inbox">
-                  <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">James <span>Sep 27</span></p>
-                      <p class="text-wrap descriptive-message">Lorem ipsum dolor sit amet,
-                        adipiscing
-                        elit. In lorem est... </p>
-                    </div>
-                  </div>
-                </div>
-                <div class="item open-inbox">
-                  <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">James <span>Sep 27</span></p>
-                      <p class="text-wrap descriptive-message">Lorem ipsum dolor sit amet,
-                        adipiscing
-                        elit. In lorem est... </p>
-                    </div>
-                  </div>
-                </div>
-
-
-
-              </div>
-
-              <!-- User Inbox menu  -->
-              <div id="inbox" class="ui transition hidden chat-feature-widget inbox-wrapper">
-                <div class="header d-flex align-items-center">
-                  <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>
-                </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 src="{{ asset('images/Avatar.png') }}" alt="Dummy User">
-                        <p>👋 Hi there! How can I help?</p>
-                      </div>
-                    </div>
-                  </div>
-                  <div class="item d-flex justify-content-end">
-                    <div class="sender-message-box text-white">
-                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing</p>
-                    </div>
-                  </div>
-                  <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>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In lorem
-                          est,
-                          tincidunt at placerat ultricies, vehicula in erat. Donec vitae ante
-                          mollis, pretium augue vel, feugiat risus.</p>
-                      </div>
-                    </div>
-                  </div>
-                  <div class="item d-flex justify-content-end">
-                    <div class="sender-message-box text-white">
-                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing</p>
-                    </div>
-                  </div>
-                  <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 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="Gif">
-                      <img src="{{ asset('images/icons/attachment.png') }}" alt="Gif">
-                    </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="{{ asset('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 &amp; 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="{{ asset('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="{{ asset('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="{{ asset('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="{{ asset('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="{{ asset('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="{{ asset('images/icons/open-door-svgrepo-com 1.svg') }}" alt="">
-                  </div>
-                  <p class="color-dark-green text-wrap">Privacy &amp; Policy</p>
-                </div>
-                <div class="item text-center">
-                  <div class="support-img-box align-content-center">
-                    <img src="{{ asset('images/icons/news-svgrepo-com 1.svg') }}" alt="">
-                  </div>
-                  <p class="color-dark-green text-wrap">News &amp; Updates</p>
-                </div>
-                <div class="item text-center">
-                  <div class="support-img-box align-content-center">
-                    <img src="{{ asset('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>
+       <x-chat-box />
         <!-- End -->
       </div>
     </div>
diff --git a/resources/views/show-ticket.blade.php b/resources/views/show-ticket.blade.php
index 435cdba..0f52fe0 100644
--- a/resources/views/show-ticket.blade.php
+++ b/resources/views/show-ticket.blade.php
@@ -8,6 +8,10 @@
     div.chat-inbox>.chat-content-wrapper>.chat-message>.single-message-chat>.user-message{
         max-width:90%!important;
     }
+    
+    .receiver-message{
+        word-break: break-all;
+    }
 </style>
 
 <div class="inbox-content-wrapper w-100 ">
diff --git a/resources/views/waiting.blade.php b/resources/views/waiting.blade.php
index 0f7c7c3..5653bdb 100644
--- a/resources/views/waiting.blade.php
+++ b/resources/views/waiting.blade.php
@@ -13,6 +13,279 @@
     
 </script>
 
+
+<script>
+$(document).ready(function() {
+    // Toggle filter dropdown on button click
+    $('.list-filter-btn').click(function() {
+        $('.filter-options').toggle();
+    });
+
+    // Initial hide for handle_multiple__options
+    $('.filter-options').hide();
+    $('.handle_multiple__options').hide();
+
+    // Toggle visibility of handle_multiple__options on button click
+    $('.handle-multiple-btn').click(function() {
+        $('.handle_multiple__options').toggle();
+    });
+
+    // Initially disable all the buttons
+    $('.handle_multiple__options .tags button').prop('disabled', true);
+
+    // Enable/disable buttons based on the select all checkbox
+    $('#select-all').change(function() {
+        if ($(this).is(':checked')) {
+            $('.handle_multiple__options .tags button').prop('disabled', false);
+        } else {
+            $('.handle_multiple__options .tags button').prop('disabled', true);
+        }
+    });
+
+    // Show the modal when "Assign post" button is clicked
+    $('.handle_multiple__options .tags button:contains("Assign post")').click(function(e) {
+        e.preventDefault();
+        $('#customModal').show();
+    });
+
+    // Show the modal when "Move" button is clicked
+    $('.handle_multiple__options .tags button:contains("Move")').click(function(e) {
+        e.preventDefault();
+        $('#customModal2').show();
+    });
+
+    // Show the modal when "Reply to multiple" button is clicked
+    $('.handle_multiple__options .tags button:contains("Reply to multiple")').click(function(e) {
+        e.preventDefault();
+        $('#customModal3').show();
+    });
+
+    // Close the modal when the close button or outside the modal is clicked
+    $('.modal-close, .modal').click(function() {
+        $('.modal').hide();
+    });
+
+    // Prevent modal content from closing the modal when clicked
+    $('.modal-content').click(function(e) {
+        e.stopPropagation();
+    });
+
+    // Update Select status options based on Select filter selection
+    $('#filter-select').change(function() {
+        var selectedFilter = $(this).val();
+        console.log("Selected filter:", selectedFilter); // Debugging log
+        updateStatusOptions(selectedFilter);
+    });
+
+    // Initially hide filter based data section
+    $('.filter_based__data').hide();
+
+    // Function to update status options based on selectedFilter
+    function updateStatusOptions(selectedFilter) {
+        console.log("Updating status options for:", selectedFilter); // Debugging log
+        switch (selectedFilter) {
+            case 'Assigned to':
+                $('#status-select').html(`
+                    <option disabled value="">Select assigned to</option>
+                    <option value="Assigned">Assigned</option>
+                    <option value="Unassigned">Unassigned</option>
+                    <option value="Margin">Margin</option>
+                `);
+                $('.filter_based__data').show();
+                break;
+            case 'Which activity':
+                $('#status-select').html(`
+                    <option disabled value="">Select activity</option>
+                    <option value="Marked as spam">Marked as spam</option>
+                    <option value="Not spam">Not spam</option>
+                `);
+                $('.filter_based__data').show();
+                break;
+            case 'No activity':
+                $('#status-select').html(`
+                    <option disabled value="">Select No activity</option>
+                    <option value="Exercise">Exercise</option>
+                    <option value="Not Yoga">Not Yoga</option>
+                `);
+                $('.filter_based__data').show();
+                break;
+            case 'Editor':
+                $('#status-select').html(`
+                    <option disabled value="">Select Editor</option>
+                    <option value="Computer tool">Computer tool</option>
+                    <option value="Direct editor">Direct editor</option>
+                `);
+                $('.filter_based__data').show();
+                break;
+            case 'Spam':
+                $('#status-select').html(`
+                    <option disabled>Select Spam</option>
+                    <option value="Marked as spam">Marked as spam</option>
+                    <option value="Not spam">Not spam</option>
+                `);
+                $('.filter_based__data').show();
+                break;
+            case 'Status':
+                $('#status-select').html(`
+                    <option disabled value="">Select status</option>
+                    <option value="Completed">Completed</option>
+                    <option value="Not Completed">Not Completed</option>
+                `);
+                $('.filter_based__data').show();
+                break;
+            case 'Tags':
+                $('#status-select').html(`
+                    <option disabled value="">Select Tags</option>
+                    <option value="Target">Target</option>
+                    <option value="Mustafa">Mustafa</option>
+                `);
+                $('.filter_based__data').show();
+                break;
+            case 'Users':
+                $('#status-select').html(`
+                    <option disabled value="">Select Users</option>
+                    <option value="Merrs">Merrs</option>
+                    <option value="Abdullah">Abdullah</option>
+                `);
+                $('.filter_based__data').show();
+                break;
+            default:
+                $('#status-select').html(`
+                    <option disabled value="">Select status</option>
+                `);
+                $('.filter_based__data').show();
+                break;
+        }
+    }
+});
+
+</script>
+
+
+
+<style>
+    .handle_multiple__options {
+        display: none;
+        background-color: #f8f9fa; 
+        padding: 10px; 
+        border: 1px solid #ddd; 
+        margin-top: 10px;
+    }
+
+    .handle_multiple__options label {
+        display: flex;
+        align-items: center;
+        margin-bottom: 10px;
+    }
+
+    .handle_multiple__options .tags {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 10px; 
+    }
+
+    .handle_multiple__options .tags button {
+        background-color: #748C62; 
+        color: white; 
+        border: none; 
+        padding: 5px 10px; 
+        border-radius: 4px; 
+        cursor: pointer; 
+    }
+
+    .handle_multiple__options .tags button:hover {
+        background-color: #383F33; 
+    }
+    .handle_multiple__options .tags button:disabled {
+    background-color: #ccc; 
+    cursor: not-allowed;
+}
+
+.handle_multiple__options input{
+    width: 32px;
+    height: 19px;
+}
+.handle_multiple__options .common_shre{
+    display: flex;
+    justify-content: space-between;
+}
+/* Custom Modal CSS */
+.modal {
+        display: none;
+        position: fixed; 
+        z-index: 1000; 
+        left: 0;
+        top: 0;
+        width: 100%;
+        overflow: auto; 
+        background-color: rgb(0,0,0); 
+        background-color: rgba(0,0,0,0.4); 
+    }
+
+    .modal-content {
+    background-color: #fefefe;
+    margin: 15% auto;
+    padding: 20px;
+    border: 1px solid #888;
+    width: 13%;
+    border-radius: 10px;
+    position: relative;
+}
+   #customModal3 .modal-content {
+    background-color: #fefefe;
+    margin: 15% auto;
+    padding: 20px;
+    border: 1px solid #888;
+    width: 40%;
+    border-radius: 10px;
+    position: relative;
+}
+    .modal-content .btn-primary{
+        background-color: #748C62 !important;
+
+}
+
+    .modal-close {
+        color: #aaa;
+        float: right;
+        font-size: 28px;
+        font-weight: bold;
+        position: absolute;
+        right: 20px;
+        top: 10px;
+        cursor: pointer;
+    }
+
+    .modal-close:hover,
+    .modal-close:focus {
+        color: #000;
+        text-decoration: none;
+        cursor: pointer;
+    }
+    .filter-options {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px;
+    background-color: #f3f3f3;
+}
+
+.filter {
+    display: flex;
+    align-items: center;
+}
+
+.filter select {
+    margin-right: 10px;
+    padding: 5px;
+    border-radius: 5px;
+    border: 1px solid #ccc;
+}
+
+
+
+</style>
+
 <div class="content-wrapper">
     <div class="ui card chat-card waiting-chat-card">
         <div class="content chat-card-header d-flex align-items-center justify-content-between">
@@ -29,6 +302,44 @@
 
             </div>
 
+        </div>
+           <div class="filter-options">
+            <div class="filter">
+       <span> <b>Filter on:</b> &nbsp;</span>
+               <select id="filter-select" name="">
+                    <option disabled >Select filter</option>
+                    <option value="Assigned to">Assigned to</option>
+                    <option value="Which activity">Which activity</option>
+                    <option value="No activity">No activity</option>
+                    <option value="Editor">Editor</option>
+                    <option value="Spam">Spam</option>
+                    <option value="Status">Status</option>
+                    <option value="Tags">Tags</option>
+                    <option value="Users">Users</option>
+                </select>
+                    <div class="filter_based__data">
+                    <select id="status-select" name="">
+                        <option disabled>Select status</option>
+                        <!-- Options will be dynamically updated based on selected filter -->
+                    </select>
+                </div>
+            </div>
+            </div>
+        <div class="handle_multiple__options">
+           <div class="common_shre">
+           <label for="select-all"> <input type="checkbox" name="" id="select-all"> Select all</label>
+            <div class="tags">
+                <button>Assign post</button>
+                <button>Delete</button>
+                <button>Move</button>
+                <button>Open</button>
+                <button>Waiting</button>
+                <button>Done</button>
+                <button>Tag</button>
+                <button>Not spam</button>
+                <button>Reply to multiple</button>
+            </div>
+           </div>
         </div>
         @if(count($tickets) > 0)
         <div class="content chat-content">
@@ -71,4 +382,51 @@
     </div>
 </div>
 
+<!-- Custom Modal post -->
+<div id="customModal" class="modal">
+  <div class="modal-content">
+    <span class="modal-close">&times;</span>
+    <h5>Assign Post</h5>
+    <form>
+      <div class="mb-3">
+        <label for="recipient-name" class="col-form-label">Recipient:</label>
+        <input type="text" class="form-control" id="recipient-name">
+      </div>
+      <div class="mb-3">
+        <label for="message-text" class="col-form-label">Message:</label>
+        <textarea class="form-control" id="message-text"></textarea>
+      </div>
+    </form>
+    <button type="button" class="btn btn-primary">Send</button>
+  </div>
+</div>
+<!-- Custom Modal move-->
+<div id="customModal2" class="modal">
+  <div class="modal-content">
+    <span class="modal-close">&times;</span>
+    <h5>Move</h5>
+    <form>
+      <div class="mb-3">
+        <label for="recipient-name" class="col-form-label">Conversation moved:</label>
+        <input type="text" class="form-control" id="recipient-name" placeholder="Inbox">
+      </div>
+     
+    </form>
+    <button type="button" class="btn btn-primary">Confirm</button>
+  </div>
+</div>
+<!-- Custom Modal Replay to multiple-->
+<div id="customModal3" class="modal">
+  <div class="modal-content">
+    <span class="modal-close">&times;</span>
+    <h5>Replay to multiple</h5>
+    <form>
+      <div class="mb-3 mt-4">
+        <p>Please choose only email conversations and try again</p>
+      </div>
+     
+    </form>
+
+  </div>
+</div>
 @endsection
\ No newline at end of file
diff --git a/routes/api.php b/routes/api.php
index 6393ca0..7c3d892 100644
--- a/routes/api.php
+++ b/routes/api.php
@@ -22,6 +22,9 @@
 Route::post('/chat/start', [ChatController::class, 'startChat']);
 Route::post('/chat/send-message', [ChatController::class, 'sendMessage']);
 
+Route::post('/chat/get', [ChatController::class, 'getChat']);
+Route::post('/chat/getMessages', [ChatController::class, 'getMessages']);
+
 
 
 
diff --git a/routes/web.php b/routes/web.php
index e6f4b54..1ba267c 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -9,6 +9,7 @@
 use App\Http\Controllers\TicketController;
 
 use App\Http\Controllers\Mailgun\MailgunController;
+use App\Http\Controllers\Chat\ChatController;
 
 
 
@@ -24,6 +25,7 @@
 */
 
 
+
 Route::get('/', [LoginController::class, 'login'])->name('login.create');
 Route::post('store/login', [LoginController::class, 'storeLogin'])->name('store.login');
 Route::post('store/register', [RegisterController::class, 'storeRegister'])->name('store.register');
@@ -33,6 +35,10 @@
 
 Route::middleware(['auth'])->group(function(){
     
+    // In routes/web.php
+Route::get('/chatgroups', [ChatController::class, 'getChatGroupsByCompany'])->name('chatgroups.get');
+
+    
     Route::get('/test', [MailgunController::class, 'test'])->name('test');
     
     Route::get('/show-domain/{domain}', [MailgunController::class, 'showDomain'])->name('showDomain');