<div class="page-margin">
    <div class="row">
        <div class="col-md-3">
            {{SIDEBAR}}
        </div>
        <div class="col-md-9 no-padding-left">
            <div class="settings-header">
                <h3 class="pull-left"><i class="fa fa-envelope-o fa-fw "></i> {{LANG messages}} <?php echo (!empty($pt->chat_user->name)) ? "- <a style='color: #fff;' href='" . $pt->chat_user->url . "'>" . $pt->chat_user->name . "</a>" : "<a style='color: #fff;' class='user-link'></a>";?></h3>
                <?php echo (!empty($pt->chat_user->name)) ? '<div class="pull-right" id="delete-conversation"><i class="fa fa-trash fa-fw"></i></div>' : '';?>
                <div class="clear"></div>
            </div>
            <button id="load-more-messages" title="Load more messages"><i class="fa fa-angle-up"></i></button>
            <div class="user-messages user-setting-panel">
                {{HTML}}
            </div>
            <div class="user-send-message">
            	<form action="#" method="POST" id="new-message-form">
            		<textarea name="new-message" id="new-message" cols="30" rows="2" placeholder="{{LANG write_message}}"></textarea>
                    <button type="button" id="send-button"><i class="fa fa-paper-plane"></i></button>
            		<input type="hidden" id="user-id" name="id" value="<?php echo $pt->chat_id; ?>">
                    <input type="hidden" id="user-avatar" value="<?php echo ($pt->chat_user->avatar) ? $pt->chat_user->avatar : "";?>">
            	</form>
            </div>
        </div>
        <div class="clear"></div>
    </div>
</div>
<br>
<script>
var messagesInterval = <?php echo (!empty($pt->extra_config->ajax_message_update_interval)) ? $pt->extra_config->ajax_message_update_interval : 3000 ?>;
function fetchMessages() {
    $.post('{{LINK aj/messages/fetch}}', {id: $('#user-id').val(), last_id: $('.message:last').attr('data-id')}, function(data, textStatus, xhr) {
        if (data.status == 200) {
            if (data.message.length > 0) {
                $('.messages').append(data.message);
                 $('.user-messages').scrollTop($('.user-messages')[0].scrollHeight);
            }
            if ($('#search-list').val() == 0) {
                $('.messages-sidebar .list-group').html(data.users);
            }
        }
        setTimeout(function () {
            fetchMessages();
        }, messagesInterval);
    });
}
$(document).on('click', '.messages-sidebar a', function(event) {
    clearTimeout(messagesInterval);
    /* Act on the event */
});
$(document).on('click', '#load-more-messages', function(event) {
  event.preventDefault();
  $('#load-more-messages i').removeClass('fa-angle-up');
  $('#load-more-messages i').addClass('fa-spinner fa-spin');
  $.post('{{LINK aj/messages/fetch}}', {id: $('#user-id').val(), first_id: $('.message:first').attr('data-id')}, function(data, textStatus, xhr) {
        $('#load-more-messages i').removeClass('fa-spinner fa-spin');
        $('#load-more-messages i').addClass('fa-angle-up');
        if (data.status == 200) {
            if (data.message.length > 0) {
                $('.messages').prepend(data.message);
            } else {
                $('#load-more-messages').animate({
                    top: "-50",
                }, 200, function() {
                    $('#load-more-messages').hide();
                    $('#load-more-messages').css('top', '60px');
                });
            }
            $('.user-messages').scrollTop(0);
        }
        $('#load-more-messages i').removeClass('fa-spinner fa-spin');
        $('#load-more-messages i').addClass('fa-angle-up');
    });
});

$(document).on('click', '#delete-conversation', function(event) {
    if (!confirm("{{LANG are_you_sure_you_want_delete_chat}}")) {
        return false;
    }
    $(this).find('i').toggleClass('fa-trash fa-spinner fa-spin');
    $.post('{{LINK aj/messages/delete_chat}}', {id: $('#user-id').val()}, function(data, textStatus, xhr) {
        $('#delete-conversation').find('i').removeClass('fa-spinner fa-spin');
        $('#delete-conversation').find('i').addClass('fa-trash');
        $('.messages').empty();
    });
});

$(function() {
        setTimeout(function () {
            fetchMessages();
        }, messagesInterval);
        $('.user-messages').scrollTop($('.user-messages')[0].scrollHeight);
        var $id = makeid();
    	var form = $('form#new-message-form');

        $('#search-list').on('keyup', function(event) {
            $('#search-icon').toggleClass('fa-search fa-spinner fa-spin');
            $.post('{{LINK aj/messages/search}}', {keyword: $(this).val()}, function(data, textStatus, xhr) {
                $('#search-icon').toggleClass('fa-spinner fa-spin fa-search ');
                if (data.status == 200) {
                    $('.messages-sidebar .list-group').html(data.users);
                }
            });
        });

    	$('#new-message').on('keyup', function(event) {
    		if (event.keyCode == 13 && !event.shiftKey) {
                $id = makeid();
                if ($(this).val().length > 1) {
                    form.submit();
                } else {
                    $('#new-message').val('');
                }
    		}
    	});

        form.ajaxForm({
            url: '{{LINK aj/messages/new}}?hash=' + $('.main_session').val(),
            data: {message_id: $('#message_id').val()},
            beforeSubmit: function(formData, jqForm, options) {
                if ($('.messages').length == 0) {
                    $('.user-messages').html('<div class="messages"></div>');
                }
                formData.push({ name: 'message_id', value: $id });
            	$('.messages').append('<div class="data_message" data-id="' + $id + '"><div class="message to-user pull-right" data-id=""><div class="user-message">' + nl2br(escapeHTML($('#new-message').val())) + '</div><div class="clear"></div></div><div class="clear"></div></div>');
            	$('#new-message').val('');
            	$('.user-messages').scrollTop($('.user-messages')[0].scrollHeight);
            },
            success: function(data) {
                $('.data_message[data-id="' + data.message_id + '"]').html(data.message);
            }
        });
    });
</script>