@extends('layouts.app')
@push('styles')
@include('inbox.css')
    {{-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css" rel="stylesheet"> --}}
    {{-- <style type="text/css">
    body {
  overflow: hidden; /* Hide scrollbars */
}
        .contact-active{
            background-color: #7CC633 !important;
            color: white !important;
            border-radius: 10px;
        }

        .chat-online {
            color: #34ce57
        }

        .chat-offline {
            color: #e4606d
        }

        .chat-messages {
            display: flex;
            flex-direction: column;
            min-height: 625px;
            max-height: 625px;
            overflow-y: scroll;
        }

        .chat-message-left,
        .chat-message-right {
            display: flex;
            flex-shrink: 0
        }

        .chat-message-left {
            margin-right: auto
        }

        .chat-message-right {
            flex-direction: row-reverse;
            margin-left: auto;
        }
        .sender-message{
            background-color: #dcf8c6 !important;
            border-radius: 20px !important;
            padding:15px;
        }
        .error-message{
            background-color: #fc8f71 !important;
            border-radius: 20px !important;
            padding:15px;
        }
        .receive-message{
            background-color: white !important;
            border-radius: 20px !important;
            padding:15px
        }
        .py-3 {
            padding-top: 1rem!important;
            padding-bottom: 1rem!important;
        }
        .px-4 {
            padding-right: 1.5rem!important;
            padding-left: 1.5rem!important;
        }
        .flex-grow-0 {
            flex-grow: 0!important;
        }
        .border-top {
            border-top: 1px solid #dee2e6!important;
        }

        /* scroll contact*/
        .contacts-list {
            min-height: 400px;
            overflow-y: auto;
            scrollbar-width: thin; /* Untuk Firefox */
            scrollbar-color: #333333 #666666; /* Warna scroll thumb dan track */
        }

        /* Scroll thumb style */
        .contacts-list::-webkit-scrollbar-thumb {
            background-color: #f5f4f4;
            opacity: 30%;
        }

        /* Scroll track style */
        .contacts-list::-webkit-scrollbar {
            width: 6px; /* Lebar scroll */
        }

        /* Scrollbar style for message list */
        .chat-messages {
            scrollbar-width: thin; /* For Firefox */
            scrollbar-color:  #f6f5f5;
        }

        /* Scroll thumb style for message list */
        .chat-messages::-webkit-scrollbar-thumb {
            background-color: rgb(192, 192, 192);
        }

        /* Scroll track style for message list */
        .chat-messages::-webkit-scrollbar {
            width: 6px;
            background-color:  #f6f5f5;
        }

    </style> --}}
    @vite('resources/css/app.css')
@endpush
@section('content')
@include('inbox.header')
{{-- <main class="content">
<div class="container p-0 pt-2"> --}}
{{-- <h1 class="h3 mb-3">Messages</h1> --}}
{{-- <div class="card"> --}}
<div class="row g-0">
    <div class="col-12 col-lg-5 col-xl-3 border-top" style="background-color: white">
        <div class="px-4 d-none d-md-block">
            <div class="d-flex align-items-center">
                <div class="flex-grow-1">
                {{-- <input type="text" class="form-control my-3" placeholder="Search..."> --}}
                </div>
            </div>
        </div>
        <div class="" style="background-color: white">
            <!-- Bagian kontak tetap dengan kemampuan menggulir -->
            <div class="container">
                <div class="row" style="min-width: 290px; margin-left: -30px">
                    <div class="col pl-4">
                        <ul class="nav nav-tabs" id="contactTabs" style="border-bottom: 1px solid white">
                            {{-- <li class="nav-item col">
                                <a class="nav-link active text-sm text-center" id="tabA" data-toggle="tab" href="#contactA">ming</a>
                            </li>
                            <li class="nav-item col">
                                <a class="nav-link text-sm text-center" id="tabB" data-toggle="tab" href="#contactB">prosess</a>
                            </li>
                            <li class="nav-item col">
                                <a class="nav-link text-sm text-center" id="tabC" data-toggle="tab" href="#contactC">finish</a>
                            </li> --}}
                        </ul>
                        <div class="tab-content">
                            <div class="tab-pane fade show active contacts-list" id="contactA" style="max-height: 638px;min-height: 638px;overflow-y: auto;">
                                <!-- Daftar kontak A -->
                                    {{-- <div class="contacts-list p-1" style="max-height: 700px; overflow-y: auto;"> --}}
                                        <br>
                                        <a href="#" class="list-group-item list-group-item-action border-0 contact-active">
                                            <div class="badge bg-success float-right">5</div>
                                            <div class="d-flex align-items-start">
                                                <img src="https://e7.pngegg.com/pngimages/323/705/png-clipart-user-profile-get-em-cardiovascular-disease-zingah-avatar-miscellaneous-white.png" class="rounded-circle mr-1" alt="Vanessa Tucker" width="40" height="40">
                                                    <div class="flex-grow-1 ml-3">
                                                    <span class="font-weight-bold">test</span>
                                                    <div class="small">Lorem ipsum dolor</div>
                                                </div>
                                            </div>
                                        </a>
                                        <a href="#" class="list-group-item list-group-item-action border-0">
                                            <div class="badge bg-success float-right">2</div>
                                            <div class="d-flex align-items-start">
                                                <img src="https://e7.pngegg.com/pngimages/323/705/png-clipart-user-profile-get-em-cardiovascular-disease-zingah-avatar-miscellaneous-white.png" class="rounded-circle mr-1" alt="William Harris" width="40" height="40">
                                                <div class="flex-grow-1 ml-3">
                                                <span class="font-weight-bold">William Harris</span>
                                                <div class="small">Lorem ipsum dolor</div>
                                                </div>
                                            </div>
                                        </a>
                                        @for ($i=1;$i<7;$i++)
                                        <a href="#" class="list-group-item list-group-item-action border-0">
                                            <div class="d-flex align-items-start">
                                                <img src="https://e7.pngegg.com/pngimages/323/705/png-clipart-user-profile-get-em-cardiovascular-disease-zingah-avatar-miscellaneous-white.png" class="rounded-circle mr-1" alt="Sharon Lessman" width="40" height="40">
                                                <div class="flex-grow-1 ml-3">
                                                <span class="font-weight-bold">Sharon Lessman</span>
                                                <div class="small">Lorem ipsum dolor</div>
                                                </div>
                                            </div>
                                        </a>
                                        @endfor
                                    {{-- </div> --}}
                            </div>
                            <div class="tab-pane fade" id="contactB"  style="min-height: 638px;overflow-y: auto;">
                                <!-- Daftar kontak B -->
                                <div class="contacts-list p-1" style="max-height: 700px; overflow-y: auto;">
                                    <!-- Isi kontak B di sini -->
                                </div>
                            </div>
                            <div class="tab-pane fade" id="contactC"  style="min-height: 638px;overflow-y: auto;">
                                <!-- Daftar kontak C -->
                                <div class="contacts-list p-1" style="max-height: 700px; overflow-y: auto;">
                                    <!-- Isi kontak C di sini -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <hr class="d-block d-lg-none mt-1 mb-0">
    </div>
        <div class="col-12 col-lg-7 col-xl-9" style="border-style: solid; border-color:rgba(228, 225, 225, 0.726)">
            <div class="py-2 px-4 border-bottom d-lg-block" style="    background-color: #f1f1f1;margin-left: -7px;margin-right: -7px;">
                <div class="d-flex align-items-center py-1" style="margin-left: 8px">
                    <div class="position-relative">
                        <img src="https://e7.pngegg.com/pngimages/323/705/png-clipart-user-profile-get-em-cardiovascular-disease-zingah-avatar-miscellaneous-white.png" class="rounded-circle mr-1" alt="Sharon Lessman" width="40" height="40">
                    </div>
                    <div class="flex-grow-1 pl-3">
                        <div class="row">
                            <strong id="contact-name">example</strong>
                        </div>
                        <div class="row">
                            <span id="contact-number" class="text-muted">123456789</span>
                        </div>
                
                    {{-- <div class="text-muted small"><em>Typing...</em></div> --}}
                    </div>
                    <div>
                        {{-- <button class="btn btn-primary btn-lg mr-1 px-3"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-phone feather-lg"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path></svg></button>
                        <button class="btn btn-info btn-lg mr-1 px-3 d-none d-md-inline-block"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-video feather-lg"><polygon points="23 7 16 12 23 17 23 7"></polygon><rect x="1" y="5" width="15" height="14" rx="2" ry="2"></rect></svg></button>
                        <button class="btn btn-light border btn-lg px-3"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-horizontal feather-lg"><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle><circle cx="5" cy="12" r="1"></circle></svg></button> --}}
                        {{-- <div class="col-12 col-sm-8 col-md-12">
                            <select name="" id="select_phone_number" class="btn btn-sm btn-light border btn-lg px-3 w-100">
                                @foreach ($whatsapps as $whatsapp)
                                    <option value="{{ $whatsapp->phone_number }}">{{ $whatsapp->phone_name }} - {{ $whatsapp->phone_number }}</option>
                                @endforeach
                            </select>
                        </div> --}}
                    </div>
                </div>
            </div>
            <div class="position-relative">
                <div class="chat-messages p-4" id="chatMessages">
           
                    {{-- <div class="no-chat-container">
                        <div class="no-chat-icon">
                            <i class="fas fa-solid fa-comment-slash"></i>
                        </div>
                        <div class="no-chat-text">
                            No messages available.
                        </div>
                    </div> --}}
          
                    <div class="chat-message-right mb-4">
                        <div class="d-flex align-items-center flex-column">
                            <img src="https://e7.pngegg.com/pngimages/323/705/png-clipart-user-profile-get-em-cardiovascular-disease-zingah-avatar-miscellaneous-white.png" class="rounded-circle mr-1" alt="Chris Wood" width="40" height="40">
                            <div class="text-muted small text-nowrap mt-2">2:43 am</div>
                            <div class="text-primary small text-nowrap">read</div>
                        </div>                   
                        <div class="flex-shrink-1 rounded py-2 px-3 mr-3">
                            <div class="d-flex justify-content-end"> 
                                <div class="font-weight-bold text-muted mb-1">{{ auth()->user()->name }} (620987654321) | 2023-10-10</div>
                            </div>
                            <div class="row sender-message" style="width: fit-content; margin-left: auto;">
                                <span class="text-break">testing</span>
                            </div>
                        </div>                
                    </div>
                    <div class="chat-message-left mb-4">
                        <div class="d-flex align-items-center flex-column">
                            <img src="https://e7.pngegg.com/pngimages/323/705/png-clipart-user-profile-get-em-cardiovascular-disease-zingah-avatar-miscellaneous-white.png" class="rounded-circle mr-1" alt="Chris Wood" width="40" height="40">
                            <div class="text-muted small text-nowrap mt-2">2:43 am</div>
                        </div>                   
                        <div class="flex-shrink-1 rounded py-2 px-3 ml-3">
                            <div class="row"> 
                                <div class="font-weight-bold text-muted mb-1">Sharon Lessman | 2023-10-10</div>
                            </div>
                            <div class="row receive-message" style="width: fit-content; margin-right: auto;">
                                <span class="text-break">aelk</span>
                            </div>
                        </div>                
                    </div>
                    {{-- <div class="chat-message-right mb-4">
                        <div class="d-flex align-items-center flex-column">
                            <img src="https://e7.pngegg.com/pngimages/323/705/png-clipart-user-profile-get-em-cardiovascular-disease-zingah-avatar-miscellaneous-white.png" class="rounded-circle mr-1" alt="Chris Wood" width="40" height="40">
                            <div class="text-muted small text-nowrap mt-2">2:43 am</div>
                            <div class="text-danger small text-nowrap">failed</div>
                        </div>                   
                        <div class="flex-shrink-1 rounded py-2 px-3 mr-3">
                            <div class="d-flex justify-content-end"> 
                                <div class="font-weight-bold text-muted mb-1">{{ auth()->user()->name }} (620987654321) | 2023-10-10</div>
                            </div>
                            <div class="row error-message" style="width: fit-content; margin-left: auto;">
                                <span class="text-break">testing</span>
                            </div>
                            <div class="row" style="width: fit-content; margin-left: auto;">
                                <span class="text-danger">Message failed to send because more than 24 hours have passed since the customer last replied to this number.</span>
                            </div>
                        </div>                
                    </div> --}}
                    <div class="chat-message-right mb-4">
                        <div class="d-flex align-items-center flex-column">
                            <img src="https://e7.pngegg.com/pngimages/323/705/png-clipart-user-profile-get-em-cardiovascular-disease-zingah-avatar-miscellaneous-white.png" class="rounded-circle mr-1" alt="Chris Wood" width="40" height="40">
                            <div class="text-muted small text-nowrap mt-2">2:43 am</div>
                            <div class="text-primary small text-nowrap">read</div>
                        </div>                   
                        <div class="flex-shrink-1 rounded py-2 px-3 mr-3">
                            <div class="d-flex justify-content-end"> 
                                <div class="font-weight-bold text-muted mb-1">{{ auth()->user()->name }} (620987654321) | 2023-10-10</div>
                            </div>
                            <div class="row sender-message" style="width: fit-content; margin-left: auto;">
                                <span class="text-break">sendo</span>
                            </div>
                        </div>                
                    </div>
                </div>
            </div>
        <br>
        <div class="flex-grow-0 py-3 px-4 border-top" style="position: absolute;bottom: 0;left: 0;width: 100%;z-index: 1;background-color: #f1f1f1">
            <div class="input-group">
                <button class="btn btn-md" style="margin-left: -20px" disabled>
                    <i class="fa fa-paperclip" aria-hidden="true"></i>
                </button>
                <textarea id="messageInput" class="form-control" placeholder="Type your message" rows="2" style="border-radius: 20px; max-height: 40px" readonly></textarea>
                <button id="sendMessageButton" class="btn btn-md" style="color: rgb(0, 118, 201); background-color: #f1f1f1" disabled>
                    <i class="fa fa-paper-plane" aria-hidden="true"></i>
                </button>
            </div>
        </div>
    </div>
</div>
{{-- </div> --}}
{{-- </div>
</main> --}}
@endsection
@push('scripts')
@vite('resources/js/app.js')
<script>
    //to disable right click-----------------------------------------------------------
    // document.addEventListener('contextmenu', function(e) {
    //     e.preventDefault();
    // });
    //---------------------------------------------------------------------------------
    
    var selectedPhoneNumber = '';
    var contactdata = [];
    var contactNumber = '';
    const chatMessages = document.getElementById('chatMessages');
    function noMessage() {
        chatMessages.innerHTML = `
            <div class="no-chat-container">
                <div class="no-chat-icon">
                    <i class="fas fa-solid fa-comment-slash"></i>
                </div>
                <div class="no-chat-text">
                    No messages available.
                </div>
            </div>
        `;
    }
    function getPhoneNumber() {
        selectedPhoneNumber = document.getElementById('select_phone_number').value;
        function handleSelectChange() {
            selectedPhoneNumber = this.value;
            contactNumber = null;
            getContactList(contactdata);
            // localStorage.removeItem('activeContactName');
            document.getElementById('contact-name').textContent = '-';
            document.getElementById('contact-number').textContent = '-';
            $("#messageInput").prop("readonly", true);
            $("#sendMessageButton").prop("disabled", true); 
            noMessage();
        }

        document.getElementById('select_phone_number').addEventListener('change', handleSelectChange);
    }
    getPhoneNumber();
</script>
<script>
document.addEventListener('DOMContentLoaded', () => {
    Echo.channel('hello-channel')
        .listen('HelloEvent', (e) => {
            console.log(e);
            getContactList(e);
        });
    Echo.channel('contact-channel')
        .listen('GetListContactEvent', (e) => {
            console.log(e);
            contactdata = e;
            getContactList(e);
        });

    function fetchData() {
        fetch("{{ url('get-list-contact') }}")
        .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        return response.json();
        })
        .then(data => console.log('Success:', data))
        .catch(error => console.error('Error:', error));
    }

    setTimeout(function() {
        fetchData();
        console.log('helo');
    }, 1500);
});
// message list event--------------------------------------------------------------------------------------------------
function getMessageList(data) {
    if (data.length == 0) {
        noMessage();
        return;
    }

    chatMessages.innerHTML = '';
    // Loop through each message in the data array
    data.forEach((message) => {
            // Format HTML based on callback_type
            let messageHtml = '';

            if (message.callback_type === 'inbound') {
                // Handle inbound messages
                messageHtml = `
                    <div class="chat-message-left mb-4">
                        <div class="d-flex align-items-center flex-column">
                            <img src="https://e7.pngegg.com/pngimages/323/705/png-clipart-user-profile-get-em-cardiovascular-disease-zingah-avatar-miscellaneous-white.png" class="rounded-circle mr-1" alt="${message.sender_name_inbound}" width="40" height="40">
                            <div class="text-muted small text-nowrap mt-2">${new Date(message.created_at).toLocaleTimeString('en-US', { hour: 'numeric', minute: 'numeric', hour12: true })}</div>
                        </div>
                        <div class="flex-shrink-1 rounded py-2 px-3 ml-3">
                            <div class="row"> 
                                <div class="font-weight-bold text-muted mb-1">${message.sender_name_inbound} | ${new Date(message.created_at).toLocaleDateString('id-ID', { year: 'numeric', month: 'numeric', day: 'numeric' })}</div>
                            </div>
                            <div class="row receive-message" style="width: fit-content; margin-right: auto;">
                                <span class="text-break">${message.message_body}</span>
                            </div>
                        </div>                
                    </div>
                `;
            } else if (message.callback_type === 'outbound') {
                // Handle outbound messages
                if (message.message_status === 'failed') {
                    // Handle failed outbound messages
                    messageHtml = `
                        <div class="chat-message-right mb-4">
                            <div class="d-flex align-items-center flex-column">
                                <img src="https://e7.pngegg.com/pngimages/323/705/png-clipart-user-profile-get-em-cardiovascular-disease-zingah-avatar-miscellaneous-white.png" class="rounded-circle mr-1" alt="${message.sender_name_inbound}" width="40" height="40">
                                <div class="text-muted small text-nowrap mt-2">${new Date(message.created_at).toLocaleTimeString('en-US', { hour: 'numeric', minute: 'numeric', hour12: true })}</div>
                                <div class="text-danger small text-nowrap">${message.message_status}</div>
                            </div>                   
                            <div class="flex-shrink-1 rounded py-2 px-3 mr-3">
                                <div class="d-flex justify-content-end"> 
                                    <div class="font-weight-bold text-muted mb-1">${message.sender_name_outbound} (${message.business_phone_number}) | ${new Date(message.created_at).toLocaleDateString('id-ID', { year: 'numeric', month: 'numeric', day: 'numeric' })}</div>
                                </div>
                                <div class="row error-message" style="width: fit-content; margin-left: auto;">
                                    <span class="text-break">${message.message_body}</span>
                                </div>
                                <div class="row" style="width: fit-content; margin-left: auto;">
                                    <span class="text-danger">${message.error_detail}</span>
                                </div>
                            </div>                
                        </div>
                    `;
                } else {
                    // Handle successful outbound messages
                    messageHtml = `
                        <div class="chat-message-right mb-4">
                            <div class="d-flex align-items-center flex-column">
                                <img src="https://e7.pngegg.com/pngimages/323/705/png-clipart-user-profile-get-em-cardiovascular-disease-zingah-avatar-miscellaneous-white.png" class="rounded-circle mr-1" alt="${message.sender_name_inbound}" width="40" height="40">
                                <div class="text-muted small text-nowrap mt-2">${new Date(message.created_at).toLocaleTimeString('en-US', { hour: 'numeric', minute: 'numeric', hour12: true })}</div>
                                <div class="text-primary small text-nowrap">${message.message_status}</div>
                            </div>                   
                            <div class="flex-shrink-1 rounded py-2 px-3 mr-3">
                                <div class="d-flex justify-content-end"> 
                                    <div class="font-weight-bold text-muted mb-1">${message.sender_name_outbound} (${message.business_phone_number}) | ${new Date(message.created_at).toLocaleDateString('id-ID', { year: 'numeric', month: 'numeric', day: 'numeric' })}</div>
                                </div>
                                <div class="row sender-message" style="width: fit-content; margin-left: auto;">
                                    <span class="text-break">${message.message_body}</span>
                                </div>
                            </div>                
                        </div>
                    `;
                }
            }

            if (message.callback_type == 'inbound' && message.message_status != 'read') {
                readMessageAPI(message.business_phone_number, message.phone_number_customer)
            }

            // Append the formatted HTML to the chatMessages container
            const tempElement = document.createElement('div');
            tempElement.innerHTML = messageHtml.trim();
            chatMessages.appendChild(tempElement.firstChild);
            chatMessages.scrollTop = chatMessages.scrollHeight;
        });
       
}
// message list event end---------------------------------------------------------------------------------------------

// Contact Event---------------------------------------------------------------------------------------------------
//handle clicked contact a
const contactListA = document.querySelector('#contactA');
contactListA.addEventListener('click', (event) => {
    const clickedContact = event.target.closest('.list-group-item');

    if (clickedContact) {
        Echo.leaveChannel(`message-channel.${selectedPhoneNumber}.${contactNumber}`);
        // Hapus kelas 'contact-active' dari semua elemen kontak
        contactListA.querySelectorAll('.list-group-item').forEach(contact => {
            contact.classList.remove('contact-active');
        });

        // Tambahkan kelas 'contact-active' ke elemen yang diklik
        clickedContact.classList.add('contact-active');

        // Simpan ID elemen yang aktif ke localStorage
        contactNumber = clickedContact.getAttribute('data-number');
        localStorage.setItem('activeContactNumber', contactNumber);
        contactName = clickedContact.getAttribute('data-name');
        localStorage.setItem('activeContactName', contactName);
        console.log(contactNumber);
        console.log(contactName);
        document.getElementById('contact-name').textContent = contactName;
        document.getElementById('contact-number').textContent = contactNumber;
        $("#messageInput").prop("readonly", false);
        $("#sendMessageButton").prop("disabled", false);

    
        Echo.channel(`message-channel.${selectedPhoneNumber}.${contactNumber}`)
        .listen('GetListMessageEvent', (e) => {
            const data = e.data;
            getMessageList(data);
        });

        getListMessageAPI(selectedPhoneNumber, contactNumber);
    }
});
function getContactList(e) {
    if (contactListA) {
        // get contact number active
        const activeContactNumber = contactNumber;

        // remove all element
        contactListA.innerHTML = '';
        contactListA.appendChild(document.createElement("br"));

        e.data.forEach(contactData => {
            const newContact = document.createElement('a');
            newContact.href = '#';
            newContact.classList.add('list-group-item', 'list-group-item-action', 'border-0');
            newContact.setAttribute('data-number', contactData.phone_number_customer);
            newContact.setAttribute('data-name', contactData.sender_name_inbound);

            if (contactData.phone_number_customer === activeContactNumber) {
                newContact.classList.add('contact-active');
            }

            const badge = document.createElement('div');
            badge.classList.add('badge', 'bg-success', 'float-right');
            badge.textContent = contactData.badge;

            const countUnread = document.createElement('div');
            countUnread.classList.add('badge', 'bg-success', 'float-right');
            countUnread.textContent = contactData.unread_message_count ?? null; // Y

            const contactContent = document.createElement('div');
            contactContent.classList.add('d-flex', 'align-items-start');

            const avatarImg = document.createElement('img');
            avatarImg.src = 'https://e7.pngegg.com/pngimages/323/705/png-clipart-user-profile-get-em-cardiovascular-disease-zingah-avatar-miscellaneous-white.png';
            avatarImg.classList.add('rounded-circle', 'mr-1');
            avatarImg.alt = contactData.sender_name_inbound;
            avatarImg.width = 40;
            avatarImg.height = 40;

            const contactDetails = document.createElement('div');
            contactDetails.classList.add('flex-grow-1', 'ml-3');

            const contactName = document.createElement('div');
            contactName.textContent = contactData.sender_name_inbound;
            contactName.classList.add('font-weight-bold');

            const contactMessage = document.createElement('div');
            contactMessage.classList.add('small');
            contactMessage.textContent = contactData.message_body.length > 25 ? contactData.message_body.substring(0, 25) + '...' : contactData.message_body;

            if (contactData.business_phone_number == selectedPhoneNumber) {
                contactDetails.appendChild(contactName);
                contactDetails.appendChild(contactMessage);

                contactContent.appendChild(avatarImg);
                contactContent.appendChild(contactDetails);

                newContact.appendChild(badge);
                //if unread > 0 append to div
                if (contactData.unread_message_count > 0) {
                    newContact.appendChild(countUnread);
                }
                // newContact.appendChild(countUnread);
                newContact.appendChild(contactContent);

                contactListA.appendChild(newContact);
            }
          
        });
        contactListA.appendChild(document.createElement("br"));
    } else {
        console.log("Elemen dengan ID 'contactA' tidak ditemukan.");
    }
}
// contact event end ---------------------------------------------------------------------------------------------------------------
</script>
<script>
    function sendTextMessageAPI(text) {
        var userId = @json(auth()->user()->id);
        $("#messageInput").prop("readonly", true);
        $("#sendMessageButton").prop("disabled", true);
        $.ajaxSetup({
              headers: {
                  'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
              }
          });
        $.ajax({
            method: 'POST',
            url: "{{ url('send-text-message') }}",
            data: {
                from: selectedPhoneNumber,
                to: document.getElementById('contact-number').textContent,
                body: text,
                senderUser: userId
            },
            success: function (response) {
              console.log(response);
            //   sendMessage(response.data.message_body);
              scrollToBottom();
              $("#messageInput").prop("readonly", false);
              $("#sendMessageButton").prop("disabled", false);
              messageInput.value = "";
            },
            error: function (xhr, status, error) {
                console.log(error);
                var response = JSON.parse(xhr.responseText);

                // Cek apakah ada pesan error di dalam objek "error"
                var errorMessage = response.error ? response.error.message : 'Unexpected error occurred';

                Swal.fire({
                    position: 'center',
                    icon: 'error',
                    title: errorMessage,
                    showConfirmButton: false,
                    timer: 2500
                });
            }
        }); 
    }
</script>
<script>
    const messageInput = document.getElementById("messageInput");
    const sendMessageButton = document.getElementById("sendMessageButton");

    messageInput.addEventListener("keydown", function (event) {
        if (event.key === "Enter" && !event.shiftKey) {
            event.preventDefault(); // Hindari perbarisan baru

            const messageText = messageInput.value.trim();

            if (messageText === "") {
                return;
            }

            sendTextMessageAPI(messageText);
            // sendMessage(messageText);
            scrollToBottom();
        }
    });

    sendMessageButton.addEventListener("click", function () {
        const messageText = messageInput.value.trim();

        if (messageText === "") {
            return;
        }

        sendTextMessageAPI(messageText);
        // sendMessage(messageText);
        scrollToBottom();
    });

    function sendMessage(messageText) {
    var userName = @json(auth()->user()->name);
    const messageTime = new Date().toLocaleTimeString('en-US', { hour: 'numeric', minute: 'numeric' });

    // Membuat elemen div chat message
    const chatMessage = document.createElement("div");
    chatMessage.className = "chat-message-right mb-4";

    // Membuat elemen untuk avatar dan waktu
    const avatarTimeContainer = document.createElement("div");
    avatarTimeContainer.className = "d-flex align-items-center flex-column";
    avatarTimeContainer.innerHTML = `
        <img src="https://e7.pngegg.com/pngimages/323/705/png-clipart-user-profile-get-em-cardiovascular-disease-zingah-avatar-miscellaneous-white.png" class="rounded-circle mr-1" alt="Chris Wood" width="40" height="40">
        <div class="text-muted small text-nowrap mt-2">${messageTime}</div>
        <div class="text-primary small text-nowrap">sent</div>
    `;

    // Membuat elemen bubble chat
    const bubbleChat = document.createElement("div");
    const currentDate = new Date().toISOString().split('T')[0];
    bubbleChat.className = "flex-shrink-1 rounded py-2 px-3 mr-3";
    bubbleChat.innerHTML = `
        <div class="d-flex justify-content-end">
            <div class="font-weight-bold text-muted mb-1">${userName} (620987654321) | ${currentDate}</div>
        </div>
        <div class="row sender-message" style="width: fit-content; margin-left: auto;">
            <span class="text-break">${messageText}</span>
        </div>
    `;

    // Menggabungkan elemen-elemen ke dalam chat message
    chatMessage.appendChild(avatarTimeContainer);
    chatMessage.appendChild(bubbleChat);

    // Menambahkan chat message ke dalam div chatMessages
    const chatMessages = document.getElementById("chatMessages");
    chatMessages.appendChild(chatMessage);

    // Mengosongkan input pesan
    messageInput.value = "";
}


    function scrollToBottom() {
        chatMessages.scrollTop = chatMessages.scrollHeight;
    }

    document.addEventListener("DOMContentLoaded", function () {
        scrollToBottom();
    });
</script>

<script>
      function getListMessageAPI(business_phone_number, phone_number_customer) {
        var getListMessageUrl = "{{ url('get-list-message') }}?businessphone=" + encodeURIComponent(business_phone_number) + "&phone_number_customer=" + encodeURIComponent(phone_number_customer);

        $.ajax({
            method: 'GET',
            url: getListMessageUrl,
            success: function (response) {
              console.log(response);
            },
            error: function (xhr, status, error) {
                console.log(error);
                var response = JSON.parse(xhr.responseText);

                // Cek apakah ada pesan error di dalam objek "error"
                var errorMessage = response.error ? response.error.message : 'Unexpected error occurred';

                Swal.fire({
                    position: 'center',
                    icon: 'error',
                    title: errorMessage,
                    showConfirmButton: false,
                    timer: 2500
                });
            }
        }); 
    }
</script>
<script>
    function readMessageAPI(business_phone_number, phone_number_customer) {
        var readMessageUrl = "{{ url('read-message') }}?businessphone=" + encodeURIComponent(business_phone_number) + "&phone_number_customer=" + encodeURIComponent(phone_number_customer);

        $.ajax({
            method: 'GET',
            url: readMessageUrl,
            success: function (response) {
            //   console.log(response);
            },
            error: function (xhr, status, error) {
                console.log(error);
                var response = JSON.parse(xhr.responseText);

                // Cek apakah ada pesan error di dalam objek "error"
                var errorMessage = response.error ? response.error.message : 'Unexpected error occurred';

                Swal.fire({
                    position: 'center',
                    icon: 'error',
                    title: errorMessage,
                    showConfirmButton: false,
                    timer: 2500
                });
            }
        }); 
    }
</script>

@endpush