@extends('layouts.main')
<style>
    .chat-container {
        display: flex;
        width: 100%;
        background-color: #fff;
        min-height: 600px;
        border-radius: 15px;
        outline: 1px solid rgba(141, 153, 174, 0.15);
        margin-top: 40px;
        height: 80vh;
        max-height: 80vh;
    }

    .user-list {
        flex: 0.98;
        border-radius: 15px;
        margin: 15px;
        margin-right: 0px;
        outline: 1px solid rgba(141, 153, 174, 0.15)
    }

    .chat-area {
        flex: 2.5;
        overflow-y: hidden;
        outline: 1px solid rgba(141, 153, 174, 0.15);
        border-radius: 15px;
        margin: 15px;
    }

    .user-list-header,
    .chat-area-header {
        color: black;
        padding: 10px;
        border-bottom: 1px solid rgba(141, 153, 174, 0.15);
        padding-left: 20px
    }

    .user-list ul,
    .chat-messages {
        list-style-type: none;
        padding: 0;
        margin: 0;
    }
    
    .user-list ul{
    	overflow: auto;
        height: 100%
    }
    
    .chat-messages{
        overflow: auto;
        height: 94%;
        padding: 10px;
        background: #F7F7F9;
        padding-bottom: 30px
    }

    .user-list li {
        padding: 10px;
        cursor: pointer;
        height: 60px;
        width: 95%;
        margin: 5px auto;
        border-radius: 15px;
    }

    .user-list li:hover {
        background-color: #f0f0f0;
    }

    .user-list li.active {
        background-color: rgba(140, 62, 255, 0.1);
        border: 1px solid rgba(140, 62, 255, 0.05)
    }

    .message {
        display: flex;
        align-items: flex-start;
        margin-bottom: 10px;
    }

    .message.sent {
        justify-content: flex-end;
        color: rgba(32, 15, 49, 1)
    }

    .message.received {
        justify-content: flex-start;
    }

    .message-bubble {
        display: inline-block;
        padding: 10px;
        border-radius: 10px;
        background-color: #f0f0f0;
        max-width: 70%;
        word-wrap: break-word;
    }

    .display-reply-preview{
        max-width: 70%;
        word-wrap: break-word;
    }

    .message-bubble.sent {
        background-color: rgba(140, 62, 255, 0.1);
        display: flex;
        flex-direction: column;
        text-align: right;
    }

    .user-icon {
        font-size: 16px;
        background: #8C3EFF;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: white;
        width: 35px;
        height: 35px;
        border-radius: 50%;
        margin-right: 10px;
        margin-left: 10px;
    }

    .message.sent .user-icon {
        margin-left: 10px;
        margin-right: 0;
    }

    .pinned_msg {
        background-color: #FAFAD2;
        padding: 5px;
    }

    .message.received .user-icon {
        margin-right: 10px;
        margin-left: 0;
    }
    .chat-input {
        margin: 9px auto;
        width: 98%;
        display: flex;
        justify-content: space-around;
    }

    .chat-input textarea {
        width: calc(100% - 55px);
        height: 45px;
        padding: 11px;
        border: 1px solid rgba(141, 153, 174, 0.15);
        border-radius: 20px;
        resize: none;
    }

    .chat-input button {
        border: 0;
        background: white;
    }

    #tagged-users{
        position: relative;
    }
    
    #tagged-users ul{
        list-style-type: none;
        margin: 0;
        padding: 0;
        border: 1px solid #ccc;
        position: absolute;
        background: #fff;
        min-width: 200px;
        z-index: 1000;
        margin-top: -230px;
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: center;
        row-gap: 10px; 
    }

    #tagged-users li {
        padding: 10px;
        cursor: pointer;
    }

    #tagged-users li:hover {
        background-color: #eee;
    }

    .parent-container{
        width: 90% !important;
        min-width: 700px !important;
        border-radius: 15px;
        padding: 0 !important
    }

    .program_item {
        display: flex; 
        align-items: center; 
    }

    .program-icon {
        font-size: 16px !important;
        background: #8C3EFF !important; 
        display: flex; 
        align-items: center; 
        justify-content: center;
        color: white;
        width: 35px;
        height: 35px; 
        border-radius: 50%;
        margin-right: 10px
    }

    .program_name {
        display: flex;
        align-items: center; 
    }

    .chat-area-header .program-icon {
        font-size: 16px !important;
        background: #8C3EFF !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: white;
        width: 35px;
        height: 35px;
        border-radius: 50%;
        margin-right: 10px;
        vertical-align: middle;
    }

    .chat-area-header.program_name, #program_name {
        display: inline;
        vertical-align: middle;
    }

    .received .timestamps{
        color: rgba(141, 153, 174, 1);
        font-size: 11px;
        text-align: end
    }

    .sent .timestamps{
        color: rgba(64, 65, 85, 1);
        font-size: 11px;
        text-align: end
    }
    .chat-area-container{
        display: flex;
        flex-direction: column;
        height: 100%;
        justify-content: space-between;
    }

    .message_box {
        margin: 10px;
        position: relative;
    }

    .message-menu {
        text-align: left;
        display: none;
        position: absolute;
        right: 40px;
        top: 20px;
        background-color: white;
        border: 1px solid #ccc;
        padding: 5px;
        z-index: 2;
    }

    .message-menu button {
        width: 100px;
        background-color: white;
        display: block;
        border: none;
        padding: 5px;
        text-align: left;
        cursor: pointer;
    }

    .reactions {
        display: flex;
        justify-content: flex-end;
        margin-top: 5px;
    }

    .reaction {
        cursor: pointer;
        margin-left: 5px;
        transition: transform 0.1s ease-in-out;
    }

    .reaction:hover {
        transform: scale(1.2);
    }

    .reaction-btn {
        cursor: pointer;
        font-size: 25px;
        margin-left: 15px;
        margin-right: 15px;
    }

    .context-menu {
        position: absolute;
        background-color: #fff;
        border: 1px solid #ccc;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
        z-index: 1000;
        display: block !important;
    }

    .context-menu .reaction_icon {
        font-size: 16px;
        cursor: pointer;
        display: inline;
        padding-left: 10px;
        padding-right: 10px;
    }

    .reply-preview {
        background-color: #f0f0f0;
        padding: 8px;
        margin-bottom: 10px;
        border-left: 4px solid #007bff;
        border-radius: 4px;
        font-size: 0.85rem;
        color: #555;
    }

    .replyMessage{
        background-color: #F7F7F9;
        padding: 5px;
        margin-bottom: 4px;
    }

    .replyMessage .sender_name{
        color: #8C3EFF ;
    }

    .reaction_item_icon {
        padding: 4px;
        cursor: pointer;
        display: inline !important;
    }
</style>
@section('main-container')

<div class="content d-flex flex-column" id="kt_content">
    <div id="kt_content_container" class="container-xxl parent-container" style="">

        <div class="chat-container">
            <div class="user-list">
                <div class="user-list-header">
                    <h2 style="margin: 5px">
                        <img src="{{url('/media/logos/chat2.png')}}" alt="User Icon" style="width: 25px; margin-right: 10px;"/> Chat
                    </h2>
                </div>
                <ul>
                    @foreach ($team as $row)
                    <li class="program_item">
                        <span class="program-icon">{{ substr($row->team_name, 0, 2) }}</span>
                        <span class="program_name">{{ $row->team_name }}</span>
                    </li>
                    @endforeach
                </ul>
            </div>
            <div class="chat-area" style="display: none">
                <span class="chat-area-container">
                    <span style="height: 100%; overflow: hidden;">
                        <input type="hidden" id="sender_id" value="{{ auth()->user()->id }}">
                        <div class="chat-area-header" style="border-radius: 0 25px 0 0;">
                            <div class="row">
                                <div class="col-md-4">
                                    <span id="program-icon" class="program-icon"></span>
                                    <h2 id="program_name"></h2>
                                </div>
                                <div class="col-md-8">
                                    <div class="row thread_header" style="display: none">
                                        <div class="col-md-2" thread_header>
                                            <i class="fa fa-arrow-left thread_back_btn" aria-hidden="true"></i>
                                        </div>
                                        <div class="col-md-10">
                                            <div class="message-content">
                                                <h5>Thread Reply</h5>
                                                <p id="thread_message">This is the main message in the thread.</p>
                                                <span id="thread_message_time">10:00 AM - Aug 15, 2024</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            {{-- <button type="button" class="btn btn-primary load_more">Load More</button> --}}
                        </div>
                        <div class="chat-messages" id="chat-messages">
                            <!-- Messages will be dynamically inserted here -->
                        </div>
                    </span>
                    <div class="row reply-preview" style="display: none">
                        <div class="col-md-11">
                            <p id="display-reply-preview"></p>
                        </div>
                        <div class="col-md-1">
                            <button type="button" class="btn btn-sm btn-danger unselect_reply_message">X</button>
                        </div>
                    </div>
                    <div id="tagged-users"></div>
                    <span style="height: 10%;display: flex;align-items: center;">
                        <div class="chat-input">
                            <input type="hidden" id="action_type">
                            <input type="hidden" id="messageId">
                            <input type="hidden" id="threadMessageId">
                            <textarea id="message-input" rows="3" placeholder="Type a message..."></textarea>
                            <button id="sendMessage">
                                <img src="{{ url('/media/Send.svg') }}" alt="send">
                            </button>
                        </div>
                    </span>
                </span>
            </div>
        </div>

    </div>
</div>

    <script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-firestore.js"></script> 
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            var start_timestamp = "";
            var end_timestamp = "";
            var base_url = '{{ url("/") }}';
            
            setTimeout(() => {
                $('.program_name:first').click();
            }, 1000);

            let firestore

            $.ajax({
                success: function(response) {
                    firestore = firebase.firestore();
                    let messagesRef;
                    let lastVisible;
                    let loadingMessages = false;
                    let unsubscribe = null;
        
                    $(".program_item").click(function (e) {
                        e.preventDefault();
                        if (unsubscribe) {
                            unsubscribe();
                        }
                        $(".program_item").removeClass("active");
                        $(this).addClass("active");
                        var program_name = $(this).find(".program_name").text();
                        var program_icon = $(this).find(".program-icon").text();
        
                        $("#program_name").text(program_name);
                        $("#program-icon").text(program_icon);
        
                        $(".chat-area").show();
        
                        $('.thread_header').hide();
                        $("#threadMessageId").val("");
                        $('#message-input').val("");
                        $("#chat-messages").empty();
                        getMessages(program_name);
                    });

                    $(document).on('click', '.thread-btn', function() {
                        var  messageId = $(this).data("id");
                        var message = $(".message-"+ messageId).text().trim();
                        var timestamps = $(".message-"+ messageId).parent().find(".timestamps").text().trim();

                        $('#thread_message').text(message);
                        $('#thread_message_time').text(timestamps);
                        $('.thread_header').show();

                        $("#threadMessageId").val(messageId);

                        $('.message-menu').remove();
                        $('.reply-preview').hide();

                        $("#chat-messages").empty();
                        const program_name = $("#program_name").text();
                        $("#program_name").text("Hello123");
                        $("#program_name").val(program_name);
                        getMessages(program_name);
                    });
                    
                    $(document).on("click", ".thread_back_btn", function (e) { 
                        e.preventDefault();

                        $("#program_name").text($("#program_name").val());
                        $('.thread_header').hide();
                        $("#threadMessageId").val("");
                        $('.message-menu').remove();
                        
                        $("#chat-messages").empty();
                        var program_name = $("#program_name").text();
                        getMessages(program_name);
                    });

                    $('#message-input').keyup(function(event) {
        
                        if (event.which === 13 && !event.shiftKey) {
                            $('#sendMessage').click();
                            return false;
                        }
        
                        var query = $(this).val();
                        if(query == ""){
                            $("#messageId").val("");
                        }
                        
                        var trimmedString = query;
                        var wordsArray = trimmedString.split(" ");
                        var lastWord = wordsArray[wordsArray.length - 1];
                        var firstChar = lastWord.charAt(0);;
                        $('#tagged-users').empty();
                        if (query.length > 0 && lastWord.indexOf('@') !== -1 && (firstChar == undefined || firstChar == '@')) {
                            var query = $(this).val().substring($(this).val().lastIndexOf('@') + 1);
                            var message = $(this).val();
                            var position = getCaretPosition(this);
                            var textBeforeCaret = message.substring(0, position);
                            var textAfterCaret = message.substring(position);
                            var typedText = textBeforeCaret.split(' ').pop();
                            $.ajax({
                                url: '{{ url("get-users") }}',
                                type: 'GET',
                                data: { query: typedText },
                                success: function(response) {
                                    var users = response.users;
                                    var suggestions = users.map(function(user) {
                                        var profile_picture = (user.profile_picture != "" && user.profile_picture != null) ? user.profile_picture : "{{ url('media/avatars/300-6.jpg') }}";
                                        return '<li class="user-suggestion" data-username="' + user.username + '"><img src="'+profile_picture+'" style="width:30px;height:30px;border-radius:50%;margin-right:8px">' + user.username + '</li>';
                                    }).join('');
                                    $('#tagged-users').html('<ul>' + suggestions + '</ul>');
                                },
                                error: function(error) {
                                    console.error('Error fetching users:', error);
                                }
                            });
                        }
                    });
        
                    function getCaretPosition(element) {
                        var caretPos = 0;
                        if (document.selection) {
                            element.focus();
                            var sel = document.selection.createRange();
                            sel.moveStart('character', -element.value.length);
                            caretPos = sel.text.length;
                        } else if (element.selectionStart || element.selectionStart === '0') {
                            caretPos = element.selectionStart;
                        }
                        return caretPos;
                    }
        
                    $(document).on('click', '.user-suggestion', function() {
                        var fullName = $(this).data('username');
                        var firstName = fullName.split(' ')[0];
                        var username = "@" + firstName;
                        var message = $('#message-input').val();
                        var position = getCaretPosition($('#message-input')[0]);
                        var textBeforeCaret = message.substring(0, position);
                        var textAfterCaret = message.substring(position);
                        var newText = textBeforeCaret.replace(/\S+$/, '') + username + ' ' + textAfterCaret;
                        $('#message-input').val(newText);
                        $("#message-input").focus();
                        $('#tagged-users').empty();
                        return false;
                    });
        
                    $(document).on("click", ".load_more", function (e) { 
                        e.preventDefault();
                        getPreviousMessages();
                    });
        
                    function timestampToDateTime(timestamp) {
                        var date = new Date(timestamp);
                        var year = date.getFullYear();
                        var month = ('0' + (date.getMonth() + 1)).slice(-2);
                        var day = ('0' + date.getDate()).slice(-2);
                        var hours = ('0' + date.getHours()).slice(-2);
                        var minutes = ('0' + date.getMinutes()).slice(-2);
                        var seconds = ('0' + date.getSeconds()).slice(-2);
                        var formattedDate = day + '-' + month + '-' + year;
                        var formattedTime = hours + ':' + minutes + ':' + seconds;
                        return {
                            date: formattedDate,
                            time: formattedTime
                        };
                    }
        
                    function getMessages(program_name) {
                        var threadMessageId = $("#threadMessageId").val();
                        if(threadMessageId != ""){
                            messagesRef = firestore.collection('COMMUNITY_CHAT').doc(program_name).collection('02-09-2024_Test').doc(threadMessageId).collection('THREAD').doc("THREAD_CHAT").collection('02-09-2024_Test').orderBy('timestamp', 'asc').limitToLast(10);
                        } else {
                            messagesRef = firestore.collection('COMMUNITY_CHAT').doc(program_name).collection('02-09-2024_Test').orderBy('timestamp', 'asc').limitToLast(10);
                        }
                        unsubscribe = messagesRef.onSnapshot(async (querySnapshot) => {
                            if (!querySnapshot.empty) {
                                $("#chat-messages").empty();
                                var messages = "<br />";
                                lastVisible = querySnapshot.docs[0];
                                const messagePromises = querySnapshot.docs.map(async (doc) => {
                                    var replyCount = "";
                                    var val = doc.data();
                                    var dateTime = timestampToDateTime(val.timestamp);
                                    var edited = "";
                                    if(val.edited_timestamp != null){
                                        edited += " - Edited";
                                    }

                                    const userRef = firestore.collection('USERS').doc(val.sender_id);
                                    
                                    var userData = await userRef.get().then((userDoc) => {
                                        if (userDoc.exists) {
                                            return userDoc.data();  // Return user data if it exists
                                        } else {
                                            return null;  // Return null if no user data is found
                                        }
                                    }).catch((error) => {
                                        console.error("Error fetching user:", error);
                                        return null;
                                    });
                                    var sender_id = $("#sender_id").val();
                                    var sender_name = !$.isEmptyObject(userData) ? userData.username : "";
                                    var sender_profile = (userData.profile_picture == "{{ url('/') }}") || userData.profile_picture == "" || userData.profile_picture == null ? "{{ url('/media/avatars/300-6.jpg') }}" : userData.profile_picture;
                                    
                                    var is_pinned_msg = "";
                                    var pinned_msg = "";
                                    var pinned_user_ids = val.pinned_user_ids;
                                    if (Array.isArray(pinned_user_ids)) {
                                        $.each(pinned_user_ids, function(index, value) {
                                            value = value.replace(/['"]/g, '');
                                            if(sender_id == value){
                                                is_pinned_msg = 1;
                                                pinned_msg = "pinned_msg";
                                            }
                                        });
                                    }
                                    var reaction = val.reaction;
                                    var reaction_items = "";
                                    if (Array.isArray(reaction) && val.is_deleted != true) {
                                        if (reaction.length > 0) {
                                            var messageId = String(val.messageId);
                                            reaction_items = "<div class='reaction_items_list'>";
                                            var reactionPromises = $.map(reaction, async function(value) {
                                                const reactionUserRef = firestore.collection('USERS').doc(value.user_id);
                                                var reactionUser = await reactionUserRef.get().then((userDoc) => {
                                                    if (userDoc.exists) {
                                                        return userDoc.data();
                                                    } else {
                                                        return null;
                                                    }
                                                }).catch((error) => {
                                                    return null;
                                                });
                                                var reaction_username = !$.isEmptyObject(reactionUser) ? reactionUser.username : "";
                                                reaction = value.reaction.replace(/['"]/g, '');

                                                reaction_items += `<span class="reaction_item_icon" data-user_id="`+value.user_id+`" data-id="`+messageId+`" title="`+reaction_username+`">`+reaction+`</span>`;
                                            });
                                            await Promise.all(reactionPromises);
                                            reaction_items += "</div>";
                                        }
                                    }
                                    if(threadMessageId == ""){
                                        var messageId = String(val.messageId);
                                        
                                        firestore.collection('COMMUNITY_CHAT').doc(program_name).collection('02-09-2024_Test').doc(messageId).collection('THREAD').doc("THREAD_CHAT").collection('02-09-2024_Test').onSnapshot(function (threadSnapshot) {
                                            if(threadSnapshot.size != 0){
                                                var reply_count = "<b>"+threadSnapshot.size+" Replies</b>";
                                                $(".reply_count_"+ messageId).html(reply_count);
                                            }
                                        });
                                    }

                                    var replyMessage = "";
                                    if(val.replyMessagePath != "" && val.replyMessagePath != null){
                                        var replyPath = val.replyMessagePath;
                                        var messageId = String(val.messageId);
                                        var replyDocRef = firebase.firestore().doc(replyPath);

                                        replyDocRef.get().then(async function(doc) {
                                            if (doc.exists) {
                                                var replydata = doc.data();
                                                replyMessage = replydata.content;
                                                replyMessage = replyMessage.replace(/\n/g, '<br>');
                                                const replyuserRef = firestore.collection('USERS').doc(replydata.sender_id);
                                                var userDataReply = await replyuserRef.get().then((userDoc) => {
                                                    if (userDoc.exists) {
                                                        return userDoc.data();  // Return user data if it exists
                                                    } else {
                                                        return null;  // Return null if no user data is found
                                                    }
                                                }).catch((error) => {
                                                    console.error("Error fetching user:", error);
                                                    return null;
                                                });
                                                var reply_sender_name = $.isEmptyObject(userDataReply) ? userDataReply.username : "";
                                                replyMessage = "<div class='replyMessage'><div class='sender_name'>"+reply_sender_name+"</div>"+replyMessage+"</div>";
                                                if(!$(".menu-btn[data-id='"+ messageId +"']").hasClass("is_deleted")){
                                                    $(".message-"+messageId).prepend(replyMessage);
                                                }
                                            }
                                        });
                                    }

                                    val.content = val.content.replace(/\n/g, '<br>');
                                    val.content = "<span class='msg_content'>"+val.content+"</span>";
                                    var replyCount = "<div class='reply_count_"+messageId+" thread-btn' data-id='"+messageId+"'></div>";
                                    if(sender_id == val.sender_id) {
                                        var is_deleted = "";
                                        var reaction_btn = "<span class='reaction-btn' data-id='"+ val.messageId +"'>\u{263A}</span>";
                                        if(val.is_deleted == true){
                                            val.content = "<i>"+ val.content +"</i>";
                                            is_deleted = "is_deleted";
                                            reaction_btn = "";
                                        }
                                        messages += "<div class='message sent message_box menu-btn "+is_deleted+" "+pinned_msg+"' data-id='"+ val.messageId +"' id='dropdown-menu-"+ val.messageId +"'>"+ reaction_btn +"<div class='message-bubble sent'>"+reaction_items+"<span class='message-"+ val.messageId +"'>"+ val.content +"</span><span class='timestamps'>"+ dateTime.date +" "+ dateTime.time +" "+ edited +"</span>"+replyCount+"</div><img src='"+sender_profile+"' class='user-icon'></div>";
                                    } else {
                                        var is_deleted = "";
                                        var reaction_btn = "<span class='reaction-btn' data-id='"+ val.messageId +"'>\u{263A}</span>";
                                        if(val.is_deleted == true){
                                            val.content = "<i>"+ val.content +"</i>";
                                            is_deleted = "is_deleted";
                                            reaction_btn = "";
                                        }
                                        messages += "<div class='message received message_box menu-btn "+is_deleted+" "+pinned_msg+"' data-id='"+ val.messageId +"'><img src='"+sender_profile+"' class='user-icon' ><div class='message-bubble received'>"+reaction_items+"<b>"+ sender_name +"</b> <br /><span class='message-"+ val.messageId +"'>"+ val.content +"</span><br /><span class='timestamps'>"+ dateTime.date +" "+ dateTime.time +" "+ edited +"</span>"+replyCount+"</div>"+ reaction_btn +"</div>";
                                    }
                                });

                                await Promise.all(messagePromises);
                                
                                var pattern  = /@\w+/g;
                                messages = messages.replace(pattern , function(match) {
                                    return '<strong>' + match + '</strong>';
                                });
                                $("#chat-messages").append(messages);
                                var chat_box = $('#chat-messages');
                                chat_box.scrollTop(chat_box.prop('scrollHeight'));

                                setUpScrollListener(program_name);
                            }
                        });
                    }

                    function setUpScrollListener(program_name) {
                        $('#chat-messages').off('scroll').on('scroll', function() {
                            if ($(this).scrollTop() === 0 && !loadingMessages) {
                                loadPreviousMessages(program_name);
                            }
                        });
                    }
        
                    function loadPreviousMessages(program_name) {
                        loadingMessages = true;
                        var chat_box = $('#chat-messages');
                        var currentHeight = chat_box.prop('scrollHeight');

                        var threadMessageId = $("#threadMessageId").val();
                        if(threadMessageId != ""){
                            messagesRef = firestore.collection('COMMUNITY_CHAT').doc(program_name).collection('02-09-2024_Test').doc(threadMessageId).collection('THREAD').doc("THREAD_CHAT").collection('02-09-2024_Test').orderBy('timestamp', 'asc').endBefore(lastVisible).limitToLast(10);
                        } else {
                            messagesRef = firestore.collection('COMMUNITY_CHAT').doc(program_name).collection('02-09-2024_Test').orderBy('timestamp', 'asc').endBefore(lastVisible).limitToLast(10);
                        }
        
                        messagesRef.get().then(async (querySnapshot) => {
                            if (!querySnapshot.empty) {
                                var messages = "";
                                var replyCount = "";
                                lastVisible = querySnapshot.docs[0];
                                const messagePromises = querySnapshot.docs.map(async (doc) => {
                                    var val = doc.data();
                                    var dateTime = timestampToDateTime(val.timestamp);
                                    var edited = "";
                                    if(val.edited_timestamp != null){
                                        edited += " - Edited";
                                    }
                                    const userRef = firestore.collection('USERS').doc(val.sender_id);
                                    var userData = await userRef.get().then((userDoc) => {
                                        if (userDoc.exists) {
                                            return userDoc.data();  // Return user data if it exists
                                        } else {
                                            return null;  // Return null if no user data is found
                                        }
                                    }).catch((error) => {
                                        console.error("Error fetching user:", error);
                                        return null;
                                    });
                                    var sender_id = $("#sender_id").val();
                                    var sender_name = !$.isEmptyObject(userData) ? userData.username : "";
                                    var sender_profile = (userData.profile_picture == "{{ url('/') }}") || userData.profile_picture == "" || userData.profile_picture == null ? "{{ url('/media/avatars/300-6.jpg') }}" : userData.profile_picture;

                                    var is_pinned_msg = "";
                                    var pinned_msg = "";
                                    var pinned_user_ids = val.pinned_user_ids;
                                    if (Array.isArray(pinned_user_ids)) {
                                        $.each(pinned_user_ids, function(index, value) {
                                            value = value.replace(/['"]/g, '');
                                            if(sender_id == value){
                                                is_pinned_msg = 1;
                                                pinned_msg = "pinned_msg";
                                            }
                                        });
                                    }
                                    var reaction = val.reaction;
                                    var reaction_items = "";
                                    if (Array.isArray(reaction) && val.is_deleted != true) {
                                        if (reaction.length > 0) {
                                            var messageId = String(val.messageId);
                                            reaction_items = "<div class='reaction_items_list'>";
                                            var reactionPromises = $.map(reaction, async function(value) {
                                                const reactionUserRef = firestore.collection('USERS').doc(value.user_id);
                                                var reactionUser = await reactionUserRef.get().then((userDoc) => {
                                                    if (userDoc.exists) {
                                                        return userDoc.data();
                                                    } else {
                                                        return null;
                                                    }
                                                }).catch((error) => {
                                                    return null;
                                                });
                                                var reaction_username = !$.isEmptyObject(reactionUser) ? reactionUser.username : "";
                                                reaction = value.reaction.replace(/['"]/g, '');

                                                reaction_items += `<span class="reaction_item_icon" data-user_id="`+value.user_id+`" data-id="`+messageId+`" title="`+reaction_username+`">`+reaction+`</span>`;
                                            });
                                            await Promise.all(reactionPromises);
                                            reaction_items += "</div>";
                                        }
                                    }
                                    if(threadMessageId == ""){
                                        var messageId = String(val.messageId);
                                        
                                        firestore.collection('COMMUNITY_CHAT').doc(program_name).collection('02-09-2024_Test').doc(messageId).collection('THREAD').doc("THREAD_CHAT").collection('02-09-2024_Test').onSnapshot(function (threadSnapshot) {
                                            if(threadSnapshot.size != 0){
                                                var reply_count = "<b>"+threadSnapshot.size+" Replies</b>";
                                                $(".reply_count_"+ messageId).html(reply_count);
                                            }
                                        });
                                    }

                                    var replyMessage = "";
                                    if(val.replyMessagePath != "" && val.replyMessagePath != null){
                                        var replyPath = val.replyMessagePath;

                                        var replyDocRef = firebase.firestore().doc(replyPath);

                                        replyDocRef.get().then(async function(doc) {
                                            if (doc.exists) {
                                                var replydata = doc.data();
                                                replyMessage = replydata.content;
                                                replyMessage = replyMessage.replace(/\n/g, '<br>');
                                                const replyuserRef = firestore.collection('USERS').doc(replydata.sender_id);
                                                var userDataReply = await replyuserRef.get().then((userDoc) => {
                                                    if (userDoc.exists) {
                                                        return userDoc.data();  // Return user data if it exists
                                                    } else {
                                                        return null;  // Return null if no user data is found
                                                    }
                                                }).catch((error) => {
                                                    console.error("Error fetching user:", error);
                                                    return null;
                                                });
                                                var reply_sender_name = $.isEmptyObject(userDataReply) ? userDataReply.username : "";
                                                replyMessage = "<div class='replyMessage'><div class='sender_name'>"+reply_sender_name+"</div>"+replyMessage+"</div>";
                                                if(!$(".menu-btn[data-id='"+ messageId +"']").hasClass("is_deleted")){
                                                    $(".message-"+messageId).prepend(replyMessage);
                                                }
                                            }
                                        });
                                    }

                                    val.content = val.content.replace(/\n/g, '<br>');
                                    val.content = "<span class='msg_content'>"+val.content+"</span>";
                                    var replyCount = "<div class='reply_count_"+messageId+" thread-btn' data-id='"+messageId+"'></div>";
                                    if(sender_id == val.sender_id) {
                                        var is_deleted = "";
                                        var reaction_btn = "<span class='reaction-btn' data-id='"+ val.messageId +"'>\u{263A}</span>";
                                        if(val.is_deleted == true){
                                            val.content = "<i>"+ val.content +"</i>";
                                            is_deleted = "is_deleted";
                                            reaction_btn = "";
                                        }
                                        messages += "<div class='message sent message_box menu-btn "+is_deleted+" "+pinned_msg+"' data-id='"+ val.messageId +"' id='dropdown-menu-"+ val.messageId +"'>"+ reaction_btn +"<div class='message-bubble sent'>"+reaction_items+"<span class='message-"+ val.messageId +"'>"+ val.content +"</span><span class='timestamps'>"+ dateTime.date +" "+ dateTime.time +" "+ edited +"</span>"+replyCount+"</div><img src='"+sender_profile+"' class='user-icon'></div>";
                                    } else {
                                        var is_deleted = "";
                                        var reaction_btn = "<span class='reaction-btn' data-id='"+ val.messageId +"'>\u{263A}</span>";
                                        if(val.is_deleted == true){
                                            val.content = "<i>"+ val.content +"</i>";
                                            is_deleted = "is_deleted";
                                            reaction_btn = "";
                                        }
                                        messages += "<div class='message received message_box menu-btn "+is_deleted+" "+pinned_msg+"' data-id='"+ val.messageId +"'><img src='"+sender_profile+"' class='user-icon' ><div class='message-bubble received'>"+reaction_items+"<b>"+ sender_name +"</b> <br /> <span class='message-"+ val.messageId +"'>"+ val.content +"</span><br /><span class='timestamps'>"+ dateTime.date +" "+ dateTime.time +" "+ edited +"</span>"+replyCount+"</div>"+ reaction_btn +"</div>";
                                    }
                                });
        
                                await Promise.all(messagePromises);
                                var pattern  = /@\w+/g;
                                messages = messages.replace(pattern , function(match) {
                                    return '<strong>' + match + '</strong>';
                                });
                                $("#chat-messages").prepend(messages);
                                var newHeight = chat_box.prop('scrollHeight');
                                chat_box.scrollTop(newHeight - currentHeight - 10);
                            }
                            loadingMessages = false;
                        });
                    }

                    function getPreviousMessages(first_time = ""){
                        var program_name = $("#program_name").text();
                        var sender_id = $("#sender_id").val();
                        if(program_name != ""){
                            $.ajax({
                                type: "get",
                                url: 'https://spyvebsolutions.com/firestore-chat/public/api/get-messages',
                                data: { "program_name" : program_name, "type" : "previous", "end_timestamp" : end_timestamp},
                                success: function (response) {
                                    if (!$.isEmptyObject(response)) {
                                        var messages = "<br />";
                                        $.each(response.reverse(), function(key,val) {
                                            if(first_time != ""){
                                                start_timestamp = val.timestamp;
                                            }
                                            if(key == 0){
                                                end_timestamp = val.timestamp;
                                            }
                                            var dateTime = timestampToDateTime(val.timestamp);
                                           
                                            var firstLetter = val.sender_name.charAt(0);
                                            if(sender_id == val.sender_id){
                                                messages += "<div class='message sent'><div class='message-bubble sent'><span class='message-"+ val.messageId +"'>"+ val.content +"</span><span class='timestamps'>"+ dateTime.date +" "+ dateTime.time +"</span></div><div class='user-icon'>"+ firstLetter +"</div></div>";
                                            } else {
                                                messages += "<div class='message received'><div class='user-icon'>"+ firstLetter +"</div><div class='message-bubble received'>"+ val.sender_name +" : <span class='message-"+ val.messageId +"'>"+ val.content +"</span><br /><span class='timestamps'>"+ dateTime.date +" "+ dateTime.time +"</span></div></div>";
                                            }
                                        });
                                        $("#chat-messages").append(messages);
                                    }
                                }
                            });
                        }
                    } 
        
        
                    function sendMessage() {
                        var message = $("#message-input").val().trim();
                        var messageId = $("#messageId").val().trim();
                        var threadMessageId = $("#threadMessageId").val().trim();
                        var action_type = $("#action_type").val().trim();
                        var program_name = $("#program_name").text();
                        if(message != ""){
                            $.ajax({
                                type: "post",
                                url: '{{ url("send-message") }}',
                                // url: 'https://spyvebsolutions.com/firestore-chat/public/api/send-message',
                                data: { "_token" : "{{ csrf_token() }}", "message" : message, "program_name" : program_name, "messageId" : messageId, "threadMessageId" : threadMessageId, "action_type" : action_type },
                                success: function (response) {
                                    getMessages(1);
                                }
                            });
                            $("#message-input").val("");
                            $("#messageId").val("");
                            $("#action_type").val("");
                            $('.reply-preview').hide();
                            $('#tagged-users').empty();
                        }
                    }
        
                    $("#sendMessage").click(function (e) { 
                        e.preventDefault();
                        sendMessage();
                    });
        
                    $(document).on("click", ".unselect_reply_message", function (e) { 
                        $("#messageId").val("");
                        $("#action_type").val("");
                        $('.reply-preview').hide();
                    });
                    
                    getMessages(1);
                }
            });

            $(document).on('contextmenu', ".menu-btn", function(event) {
                if(!$(this).hasClass("is_deleted")){
                    var  messageId = $(this).data("id");
                    var messageElement = $(this);

                    var menuHtml = `<div class="message-menu">
                        <button class="reply-btn" data-id="${messageId}">Reply</button>`;

                    var threadMessageId = $("#threadMessageId").val();
                    if (threadMessageId == "") {
                        menuHtml += `<button class="thread-btn" data-id="${messageId}">Thread Message</button>`;
                    }
                    if ($(this).hasClass("pinned_msg")) {
                        menuHtml += '<button class="pin-btn" data-id="' + messageId + '">Unpin Message</button>';
                    } else {
                        menuHtml += '<button class="pin-btn" data-id="' + messageId + '">Pin Message</button>';
                    }

                    menuHtml += `<button class="copy-btn" data-id="${messageId}">Copy Message</button>
                        <button class="edit-btn" data-id="${messageId}">Edit</button>
                        <button class="delete-btn" data-id="${messageId}">Delete</button></div>`;

                    if(messageElement.hasClass("received")){
                        menuHtml = `
                        <div class="message-menu" style="left:40px !important;right:0px !important;width:100px">
                            <button class="reply-btn" data-id="${messageId}+">Reply</button>`;
                            var threadMessageId = $("#threadMessageId").val();
                            if(threadMessageId == ""){
                                menuHtml += `<button class="thread-btn" data-id="${messageId}">Thread Message</button>`;
                            }
                            if($(this).hasClass("pinned_msg")){
                                menuHtml += `<button class="pin-btn" data-id="${messageId}">Unpin Message</button>`;
                            } else {
                                menuHtml += `<button class="pin-btn" data-id="${messageId}">Pin Message</button>`;
                            }
                            menuHtml += `<button class="copy-btn" data-id="${messageId}">Copy Message</button>
                        </div>
                        `;
                    }

                    // Remove any existing menu
                    $('.message-menu').remove();

                    // Append the new menu
                    messageElement.append(menuHtml);
                    
                    
                    $('.message-menu').toggle();

                    $('.message-menu').toggle();
                    var $msgElement = $(this);
                    var $menu = $('.message-menu');

                    var liHeight = $msgElement.outerHeight();
                    var liOffsetTop = $msgElement.offset().top;
                    var menuHeight = $menu.outerHeight();
                    var chatContainer = document.getElementsByClassName('chat-area-container')[0];
                    var windowHeight = chatContainer.clientHeight

                    var spaceBelow = windowHeight - (liOffsetTop + liHeight );
                    var spaceAbove = liOffsetTop;

                    var topPosition = liHeight;

                    if (spaceBelow < menuHeight && spaceAbove >= menuHeight) {
                        topPosition = -menuHeight;
                    } 
                    else if (spaceBelow < menuHeight && spaceAbove < menuHeight) {
                        topPosition = -spaceAbove;
                    }

                    $menu.css({
                        top: topPosition + 'px',
                    });

                    $('.message-menu').toggle();

                    $('.reply-btn').on('click', function() {
                        var  messageId = $(this).data("id");
                        var message = $(".message-"+ messageId).text().trim();

                        $('#display-reply-preview').text(message);

                        $("#messageId").val(messageId);
                        
                        $('.message-menu').remove();
                        $('.reply-preview').show();
                        $("#action_type").val("reply");
                    });

                    $('.copy-btn').on('click', function() {
                        var  messageId = $(this).data("id");
                        var message = $(".message-"+ messageId).find(".msg_content").html().trim();
                        message = message.replace(/<br\s*\/?>/gi, '\n');

                        if (navigator.clipboard) {
                            navigator.clipboard.writeText(message).then(function() {
                                console.log('Text copied to clipboard');
                            }).catch(function(error) {
                                console.error('Error copying text: ', error);
                            });
                        } else {
                            // Fallback method for unsupported browsers
                            const textarea = document.createElement('textarea');
                            textarea.value = message;
                            textarea.id = "copy_textarea";
                            document.body.appendChild(textarea);
                            textarea.select();
                            try {
                                document.execCommand('copy');
                                console.log('Text copied to clipboard using fallback');
                            } catch (error) {
                                console.error('Error copying text using fallback: ', error);
                            } finally {
                                $("#copy_textarea").remove();
                            }
                        }
                        $('.message-menu').remove();
                    });

                    $('.pin-btn').on('click', function() {
                        var  messageId = $(this).data("id");
                        var  threadMessageId = $("#threadMessageId").val();
                        var program_name = $("#program_name").text();
                        
                        $('.message-menu').remove();
                        $.ajax({
                            type: "post",
                            url: "{{ url('pinned-message') }}",
                            data: { "_token" : "{{ csrf_token() }}", "messageId" : messageId, "threadMessageId" : threadMessageId, "program_name" : program_name },
                            success: function (response) {

                            }
                        });
                    });

                    $('.delete-btn').on('click', function() {
                        var  messageId = $(this).data("id");
                        var  threadMessageId = $("#threadMessageId").val();
                        var program_name = $("#program_name").text();
                        
                        $('.message-menu').remove();
                        $.ajax({
                            type: "post",
                            url: "{{ url('delete-message') }}",
                            data: { "_token" : "{{ csrf_token() }}", "messageId" : messageId, "threadMessageId" : threadMessageId, "program_name" : program_name },
                            success: function (response) {

                            }
                        });
                    });

                    $('.edit-btn').on('click', function() {
                        var  messageId = $(this).data("id");
                        var message = $(".message-"+ messageId).find(".msg_content").html().trim();
                        message = message.replace(/<br\s*\/?>/gi, '\n');
                        
                        $('.message-menu').remove();

                        $('.reply-preview').hide();
                        
                        $("#messageId").val(messageId);
                        $("#action_type").val("edit");
                        $("#message-input").val(message).focus();
                    });

                    // Hide the menu if clicked outside
                    $(document).on('click', function(event) {
                        if (!$(event.target).closest('.message-menu, .menu-btn').length) {
                            $('.message-menu').hide();
                        }
                    });
                    event.preventDefault();
                }
            });

            $(document).on('click', '.reaction-btn', function(event) {
				
                var messageId = $(this).data("id");
                var reactionElement = $(this);

                var reactionHtml = `
                    <div class="context-menu" id="context-menu">
                        <div class="reaction_icon" data-id="`+messageId+`">\u{1F602}</div>
                        <div class="reaction_icon" data-id="`+messageId+`">\u{1F44D}</div>
                        <div class="reaction_icon" data-id="`+messageId+`">\u{2764}</div>
                        <div class="reaction_icon" data-id="`+messageId+`">\u{1F44E}</div>
                        <div class="reaction_icon" data-id="`+messageId+`">\u{2049}</div>
                    </div>
                    `;

                $('.context-menu').remove();
                reactionElement.append(reactionHtml);

                var $msgElement = $(this);
                var $menu = $('#context-menu');

                var liHeight = $msgElement.outerHeight();
                var liOffsetTop = $msgElement.offset().top;
                var menuHeight = $menu.outerHeight();
                var chatContainer = document.getElementsByClassName('chat-area-container')[0];
                var windowHeight = chatContainer.clientHeight

                var spaceBelow = windowHeight - (liOffsetTop + liHeight );
                var spaceAbove = liOffsetTop;

                var topPosition = liHeight;

                if (spaceBelow < menuHeight && spaceAbove >= menuHeight) {
                    topPosition = -menuHeight;
                } 
                else if (spaceBelow < menuHeight && spaceAbove < menuHeight) {
                    topPosition = -spaceAbove;
                }
                $menu.css({
                    top: topPosition + 'px',
                });
                $('.context-menu').show();
			});

            $(document).on("click", ".reaction_icon, .reaction_item_icon", function() {
                $('.context-menu').hide();
                if($(this).hasClass("reaction_item_icon")){
                    var sender_id = $("#sender_id").val();
                    if($(this).data("user_id") != sender_id){
                        return false;
                    }
                }
				var reaction = $(this).text();
                var messageId = $(this).data("id");
                var threadMessageId = $("#threadMessageId").val();
                var program_name = $("#program_name").text();

                $('.context-menu').remove();
                
                $.ajax({
                    type: "post",
                    url: "{{ url('reaction-message') }}",
                    data: { "_token" : "{{ csrf_token() }}", "messageId" : messageId, "threadMessageId" : threadMessageId, "program_name" : program_name, "reaction" : reaction },
                    success: function (response) {

                    }
                });
			});

            $(document).on('click', function(event) {
                $('.message-menu').hide();
                $('#context-menu').hide();
                if (!$(event.target).closest('.reaction-btn').length) {
                    $('.context-menu').remove();
                }
            });
            // function sendMessage() {
            //     var messageInput = document.getElementById('message-input');
            //     var message = messageInput.value.trim();

            //     if (message !== '') {
            //         var chatMessages = document.getElementById('chat-messages');
            //         var messageDiv = document.createElement('div');
            //         messageDiv.classList.add('message', 'sent');
            //         var messageBubble = document.createElement('div');
            //         messageBubble.classList.add('message-bubble', 'sent');
            //         messageBubble.textContent = message;
            //         messageDiv.appendChild(messageBubble);
            //         chatMessages.appendChild(messageDiv);

            //         // Clear input field
            //         messageInput.value = '';

            //         // Scroll to bottom
            //         chatMessages.scrollTop = chatMessages.scrollHeight;
            //     }
            // }
        });
    </script>
@endsection