@include('includes/header')

@include('includes/sidebar')

<div class="app-content content mb-3">
    
    <div class="content-right">
        <div class="content-wrapper">

            <div class="content-header row">
                <div class="content-header-left col-md-6 col-12 mb-2 d-flex ml-1 mt-1">
                    <a class="btn btn-secondary" href="javascript: history.go(-1)"><i class="fa fa-arrow-left"></i> </a>
                </div>
                
            </div>

            <div class="content-body ml-1 pb-3">
                <section class="chat-app-window shadow">
                    <input type="hidden" id="team_id" value="{{$team_id}}" >
                    <input type="hidden" id="user_id" value="{{Auth::user()->id}}" >
                    <div class="badge badge-default mb-1 text-primary"><h3 id="team-name"><strong>Chats</strong></h3></div>
                    <!-- <div class="chats"> -->
                        <div class="chats" id="chat-messages">
                            
                        </div>
                    <!-- </div> -->
                </section>
                <section class="chat-app-form">
                    <form class="chat-app-input d-flex" id="chat-form">
                        <fieldset class="form-group position-relative has-icon-left col-10 m-0">
                            <div class="form-control-position">
                                <i class="icon-emoticon-smile"></i>
                            </div>
                            <input type="text" class="form-control" id="iconLeft4-message" placeholder="Type your message">
                            <!-- <div class="form-control-position control-position-right">
                                <i class="ft-image"></i>
                            </div> -->
                        </fieldset>
                        <fieldset class="form-group position-relative has-icon-left col-2 m-0">
                            <button type="submit" class="btn btn-info btn-rounded" id="send-chat-btn"><i class="fa fa-paper-plane-o d-lg-none"></i>
                                <span class="d-none d-lg-block">Send</span></button>
                        </fieldset>
                    </form>
                </section>
            </div>
        </div>
    </div>
</div>
<!-- ////////////////////////////////////////////////////////////////////////////-->

<script>
    var base_url = "{{env('BASE_URL')}}";
    var team_id = document.getElementById('team_id').value;
    var userId = document.getElementById('user_id').value;
    let lastChatCount = 0;

    function getAllChats() {
        $.ajax({
            url: base_url + 'v1/web/getChats?team_id='+team_id,
            type: 'GET',
            success: function (result) {
                if (result.status === 'success') {
                    const chatItems = result.data.chatItems || [];
                    if (!result.data.chatItems || chatItems.length === 0) {
                        $('.chats').html('<p class="text-center text-muted my-2" style="font-weight:bold;">No messages</p>');
                        lastChatCount = 0;
                        return;
                    }
                    if (chatItems.length === lastChatCount) {
                        return;
                    }

                    lastChatCount = chatItems.length;
                    
                    const chatsContainer = $('#chat-messages');
                    chatsContainer.empty();

                    if (!result.data.chatItems) {
                        chatsContainer.html(`
                            <p class="text-center text-muted my-2" style="font-weight:bold;">No messages</p>
                        `);
                        return;
                    }

                    // document.getElementById('team-name').append(result.data.teamName);

                    const defaultProfilePic = base_url+'app-assets/images/avatar.jpg';
                    let lastFromId = null;
                    let lastMessageDate = null;
                    let currentChatBlock = null;

                    function getDisplayDate(dateStr) {
                        const today = new Date();
                        const msgDate = new Date(dateStr);

                        const todayStr = today.toDateString();
                        const msgDateStr = msgDate.toDateString();

                        const yesterday = new Date();
                        yesterday.setDate(today.getDate() - 1);
                        const yesterdayStr = yesterday.toDateString();

                        if (msgDateStr === todayStr) return "Today";
                        else if (msgDateStr === yesterdayStr) return "Yesterday";
                        else return msgDate.toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' });
                    }

                    result.data.chatItems.forEach((chat, index) => {
                        const isLeft = chat.from_id != userId;
                        const chatClass = isLeft ? 'chat chat-left' : 'chat';
                        const placement = isLeft ? 'left' : 'right';
                        const profilePic = chat.profile_pic ? chat.profile_pic : defaultProfilePic;
                        const chatDate = getDisplayDate(chat.date);
                        const chatTime = chat.time;

                        const isNewDate = chatDate !== lastMessageDate;
                        const isNewSender = chat.from_id !== lastFromId;

                        // Show date if new
                        if (isNewDate) {
                            // Flush current chat block before moving to a new date
                            if (currentChatBlock) {
                                chatsContainer.append(currentChatBlock);
                                currentChatBlock = null;
                            }
                            chatsContainer.append(`
                                <p class="text-center text-muted my-2" style="font-weight:bold;">${chatDate}</p>
                            `);
                        }

                        // Start a new block if new sender or new date
                        if (isNewSender || isNewDate || !currentChatBlock) {
                            // Flush current block first
                            if (currentChatBlock) {
                                chatsContainer.append(currentChatBlock);
                            }

                            currentChatBlock = $(`
                                <div class="${chatClass}">
                                    <div class="chat-avatar">
                                        <a class="avatar" data-toggle="tooltip" href="#" data-placement="${placement}" title="" data-original-title="">
                                            <img class="rounded-circle img-border" src="${profilePic}" onerror="this.onerror=null; this.src='${defaultProfilePic}'" alt="avatar" width="50" >
                                        </a>
                                    </div>
                                    <div class="chat-body"></div>
                                </div>
                            `);

                            currentChatBlock.find('.chat-body').append(`
                                <div class="chat-content">
                                    <span style="font-weight:900">${chat.from}</span>
                                    <p style="font-weight:500; font-size:18px">${chat.message}</p>
                                    <span class="text-muted small">${chat.time}</span>
                                </div>
                            `);
                        } else {
                            // Append to existing block
                            currentChatBlock.find('.chat-body').append(`
                                <div class="chat-content">
                                    <p style="font-weight:500; font-size:18px">${chat.message}</p>
                                    <span class="text-muted small">${chat.time}</span>
                                </div>
                            `);
                        }

                        // Update trackers
                        lastFromId = chat.from_id;
                        lastMessageDate = chatDate;

                        // Append final block at the end
                        if (index === result.data.chatItems.length - 1 && currentChatBlock) {
                            chatsContainer.append(currentChatBlock);
                        }
                    });
                    // chatsContainer.scrollTop(chatsContainer.prop("scrollHeight"));
                    // console.log('Scrolling to:', chatsContainer.prop("scrollHeight"));
                    // chatsContainer.scrollTop(chatsContainer.prop("scrollHeight"));
                    // chatsContainer.animate({ scrollTop: chatsContainer.prop("scrollHeight") }, 300);
                    setTimeout(() => {
                        $('#chat-messages').scrollTop($('#chat-messages')[0].scrollHeight);
                    }, 100);

                } else {
                    console.log('Error fetching chats');
                }
            },
            error: function () {
                console.log('AJAX error');
            }
        });
    }
    getAllChats();
    setInterval(getAllChats, 3000);

    $('#chat-form').on('submit', function (e) {
        console.log('yes clicked');

        var submit_btn = document.getElementById('send-chat-btn');
        
        e.preventDefault(); // prevent page refresh
        const message = $('#iconLeft4-message').val().trim();

        if (message === '') return; // Do not send empty messages

        submit_btn.disabled = true;
        submit_btn.style.opacity = '0.6';
        submit_btn.style.cursor = 'not-allowed';

        $.ajax({
            url: base_url + 'v1/web/chat?team_id='+team_id,
            method: 'POST',
            data: {
                "_token": "{{ csrf_token() }}",
                message: message
            },
            success: function (response) {
                if (response.status === 'success') {
                    $('#iconLeft4-message').val(''); // clear input
                    submit_btn.disabled = false;
                    submit_btn.style.opacity = '1';
                    submit_btn.style.cursor = 'pointer';
                    getAllChats(); // reload messages
                } else {
                    submit_btn.disabled = false;
                    submit_btn.style.opacity = '1';
                    submit_btn.style.cursor = 'pointer';
                    console.log("Error in submitting chat");
                }
            },
            error: function () {
                console.log("AJAX error submitting chat");
            }
        });
    });

</script>


@include('includes/footer')