<div class="chat_area-inner">

    <button
        onclick="loadMoreMeassges()"
        
        id="more_btn"
        data-chatroom-id="{{ chat_room_id }}"
        data-skip="5"
    >Öňki hatlar</button>

    <!-- more_messages_area -->

    <!-- end more_messages_area -->

    {% for message in result %}
        <div class="{{ message.sender_id == currentUserId ? 'my_message' : 'friend_message' }}">
            <div class="message_time">{{ message.send_at|date('H:i - d.m.Y') }}</div>
            <div class="message_text">
                {{ message.message }}
            </div>
        </div>
    {% endfor %}

    <!-- latest message -->
    
    <!-- end latest message -->

    <form action="#" class="message_form"
        data-request="onMessageSend"
        data-request-success="showLatestMessage(data)"
    >
        <input type="hidden" name="reciver_id" value="{{chatRoomPartnerId}}">
        <input type="hidden" name="chatroom_id" value="{{chat_room_id}}">

        <div class="message_input">
            <textarea class="form-control" id="order-notes" cols="30" rows="10" name="msg" placeholder="Hatyňyz..."></textarea>
            <!-- <textarea class="form-control" name="msg" required></textarea> -->
        </div>

        <button class="message_btn" type="submit" data-attach-loading>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 23">
                <g id="paper-plane" transform="translate(0 0)">
                    <path id="Path_3270" data-name="Path 3270" d="M8.75,17.612V22.25a.75.75,0,0,0,1.354.444L12.817,19Z" fill="#f37b1c"/>
                    <path id="Path_3271" data-name="Path 3271" d="M23.685.139A.75.75,0,0,0,22.9.085L.4,11.835a.75.75,0,0,0,.1,1.375l6.255,2.138L20.083,3.958,9.775,16.377,20.258,19.96A.767.767,0,0,0,20.5,20a.749.749,0,0,0,.742-.639l2.75-18.5a.751.751,0,0,0-.307-.722Z" fill="#f37b1c"/>
                </g>
            </svg>
            
        </button>
    </form>
</div>

<script>
    function loadMoreMeassges() {
        $('#more_btn').text('Ýüklenýär...');

        $(this).request('onLoadMore',{
            data: {
                chatroom_id: $('#more_btn').attr('data-chatroom-id'),
                skip: $('#more_btn').attr('data-skip')
            },
            success: function(data) {
                $.each(data.more_messages,function(index,element) {
                    $(`
                    <div class="${ element.sender_id == data.currentUserId ? 'my_message' : 'friend_message' }">
                        <div class="message_time">
                            ${
                                new Date(element.send_at).getHours() + 
                                ':' + 
                                (new Date(element.send_at).getMinutes() < 10 ? '0' : '') +
                                new Date(element.send_at).getMinutes() + 
                                ' - ' + 
                                new Date(element.send_at).getDate() + 
                                '.' + 
                                (+new Date(element.send_at).getMonth()+1 < 10 ? '0' : '') +
                                (+new Date(element.send_at).getMonth()+1) + 
                                '.' + 
                                new Date(element.send_at).getFullYear()
                            }    
                        </div>
                        <div class="message_text">
                            ${ element.message }
                        </div>
                    </div>
                    `).insertAfter('#more_btn');
                });

                skip = $('#more_btn').attr('data-skip');
                
                $('#more_btn').attr('data-skip',+skip + 5);

                $('#more_btn').text('Öňki hatlar');
            }
        })
    }

    function showLatestMessage(data) {
        $('.message_form textarea').val('');
        $(data.latest_message_area).insertBefore('.message_form')

        var bottom= $('.chat_area-inner').height()+$('.chat_area-inner').prop('scrollHeight');    
        $('.chat_area-inner').scrollTop(bottom);
    }
    
</script>

