

<?php $__env->startSection('styles'); ?>
    <link href="/assets/global/plugins/bootstrap-tagsinput/bootstrap-tagsinput.css" rel="stylesheet" type="text/css"/>
    <link href="/assets/global/plugins/bootstrap-tagsinput/bootstrap-tagsinput-typeahead.css" rel="stylesheet"
          type="text/css"/>
    <link href="/assets/global/css/components-md-2.min.css" rel="stylesheet" type="text/css"/>
    <link href="/assets/global/css/plugins-md.min.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" href="/frontend_chat/assets/css/ionicons.min.css">
    <link rel="stylesheet" href="/frontend_chat/assets/css/jquery.fancybox.min.css">
    <link rel="stylesheet" href="/frontend_chat/assets/css/main.css">
    <link rel="stylesheet" href="/frontend_chat/assets/css/list_contacts.css">
    <link rel="stylesheet" href="/frontend3/assets/css/main.css">
    <link href="/assets/global/plugins/bootstrap-sweetalert/sweetalert.css" rel="stylesheet" type="text/css"/>



    <style>
        .preview-text {

            display: none;
        }

        .title__image:hover .preview-text {
            display: block;

        }

        .title__image:hover .image-avatar {
            opacity: 0.1;
        }

        .bootstrap-tagsinput {
            margin-left: 5px;
        }

        .bootstrap-tagsinput > span {
            float: left;
        }

        .current-convo__select-users {
            padding: 17px 12px;
            border-bottom: 1px solid #e0e0e0;
        }

        .current-convo__select-users .list-selected-users {
            font-size: 0;
            line-height: 22px;
        }

        .current-convo__select-users .list-selected-users .single-selected-user {
            display: inline-block;
            vertical-align: top;
        }

        .current-convo__select-users .list-selected-users .single-selected-user .ssu__user-title {
            display: inline-block;
            vertical-align: top;
            line-height: 22px;
            font-size: 15px;
            color: #d84315;
        }
    </style>

<?php $__env->stopSection(); ?>

<?php $__env->startSection('content'); ?>


    <div class="section--messenger">
        <div class="section--messenger__wrapper">
            <div class="messenger__left-col">
                <div class="messenger__col-header">
                    <div class="header__actions">
                        <div class="single-action">
                            <div class="dropdown">
                                <a href="#" class="single-action__label" data-toggle="dropdown">
                                    </a>
                                
                                
                                
                                
                                
                                
                                
                                
                                
                                
                                
                                
                                
                            </div>
                        </div>
                    </div>
                    <div class="header__title ht-oneline">Danh sách hội thoại</div>
                    <div class="header__actions">
                        <div class="single-action">
                            <a href="#" class="single-action__label"
                               id="create-new-chat"><i class="ion-md-create"
                                                       data-toggle="tooltip"
                                                       data-placement="right"
                                                       title=""
                                                       data-original-title="Tạo tin nhắn mới"></i></a>
                        </div>
                    </div>
                </div>
                <div class="messenger__col-content vertical-scroll">
                    <div class="messenger__search-convos">
                        <div class="form-group">
                            <input type="text" class="search-input form-control" placeholder="Tìm kiếm hội thoại">
                            <i class="search-icon ion-ios-search"></i>
                            <a href="#" class="search-clear"><i class="ion-ios-close-circle-outline"></i></a>
                        </div>
                    </div>
                    <div class="messenger__list-convos">
                        <?php $__currentLoopData = $items; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <div class="single-preview-convo
<?php if(isset($item['last_message'])): ?>
                                    <?php if(isset($item['last_message']['is_read'])): ?>
                            <?php if($item['last_message']['is_read'] == 0): ?>
                                    unread
                                    <?php endif; ?>
                            <?php endif; ?>
                            <?php endif; ?>


                                    " id="convo-<?php echo e($item['info']['id']); ?>">
                                <a href="#" class="convo-active-link" data-conversion="<?php echo e($item['info']['id']); ?>">
                                    <div class="convo__image">
                                        <div class="convo__image__single"><img src="<?php echo e($item['info']['image']); ?>"
                                                                               alt=""></div>
                                    </div>
                                    <div class="convo__content">
                                        <div class="convo__content__title"> <?php echo e($item['info']['name']); ?></div>
                                        <div class="convo__content__excerpt"
                                             id="last-message-<?php echo e($item['info']['id']); ?>"> <?php echo e(strip_tags($item['last_message']['content'])); ?></div>
                                    </div>
                                    <div class="convo__info">
                                        <div class="convo__info__datetime"><?php echo e(\Carbon\Carbon::createFromFormat('d/m/Y H:i:s', $item['last_message']['created_at'] )->format('H:i')); ?></div>
                                        
                                    </div>
                                </a>
                            </div>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        <div class="ht-loading-section sm-size"></div>
                    </div>
                </div>
            </div>
            <div class="messenger__main-col">
                <div class="ht-loading-section hidden"></div>
                <div class="messenger__col-header">
                    <div class="header__title" id="header_chat"></div>
                    <div class="header__actions">
                        <div class="single-action">
                            
                            <a id="Toggle__MessengerInfoCol" href="#" class="single-action__label active"><i
                                        class="ion-md-information-circle"></i></a>
                        </div>
                    </div>
                </div>
                <div class="messenger__col-content">
                    <div class="messenger__convo-main-col">
                        <div class="messenger__list-messages vertical-scroll">

                        </div>
                        <div class="messenger__input-message">
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            <div class="messenger__input__main">
                                <div class="messenger__input-wrap">
                                    <input class="messenger__input__form-control input--auto-adjust-height"
                                           placeholder="Nhập tin nhắn" value=""
                                           style="overflow: hidden; overflow-wrap: break-word; height: 52px;"></input>
                                </div>
                                <div class="messenger__input-more-options">
                                    <div class="single-option">
                                        <a href="javascript:void(0)" class="single-option__label" id="fileupload">
                                            <i class="ion-ios-images"></i>

                                        </a>
                                    </div>
                                    <form id="send-image-form">
                                        <input type="file" name="image" class="hidden" id="upload-file">
                                    </form>
                                    
                                </div>
                            </div>
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                        </div>
                    </div>
                    <div id="MessengerInfoCol" class="messenger__convo-info-col vertical-scroll">

                    </div>
                </div>
            </div>

        </div>
    </div>

    <div class="modal fade bs-modal-lg" id="create-new-chat-modal" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                    <h4 class="modal-title">Tạo hội thoại mới</h4>
                </div>
                <div class="modal-body" id="create-chat-content">


                </div>
                <div class="modal-footer">
                    <button type="button" class="btn dark btn-outline" data-dismiss="modal" id="dismiss-modal">Đóng
                    </button>
                    <button type="button" class="btn green" id="save-new-chat">Lưu</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

<?php $__env->stopSection(); ?>

<?php $__env->startPush('scripts'); ?>


<script src="/frontend3/assets/js/moment.js"></script>
<script src="/frontend_chat/assets/js/autosize.min.js"></script>
<script src="/frontend_chat/assets/js/jquery-resizable.min.js"></script>
<script src="/frontend_chat/assets/js/moment.js"></script>
<script src="/frontend_chat/assets/js/sticky-sidebar.min.js"></script>
<script src="https://js.pusher.com/4.1/pusher.min.js"></script>
<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
<script src="/assets/global/plugins/bootbox/bootbox.min.js" type="text/javascript"></script>
<script src="/assets/global/plugins/bootstrap-sweetalert/sweetalert.min.js" type="text/javascript"></script>
<script src="/assets/global/plugins/bootstrap-tagsinput/bootstrap-tagsinput.min.js" type="text/javascript"></script>
<script src="/assets/global/plugins/typeahead/handlebars.min.js" type="text/javascript"></script>
<script src="/assets/global/plugins/typeahead/typeahead.bundle.min.js" type="text/javascript"></script>
<script>
    function _upload() {
        $('#file_upload_id').click();
    }

    $(document).on('change', '#file_upload_id', function (e) {
        // e.preventDefault();
        update_setting_conversation();

    });

    $(document).on('click', '#create-new-chat', function (e) {
        // e.preventDefault();


    });

    $(document).on('click', '.change-conversation-name', function (e) {
        var name = $('.title__main').text();
        $('.title__main').html('<input id="title-change" style="width: 65%; display: inline-block" value="' + name + '" type="text" class="form-control" /> ' +
            '<div style="display: inline-block; margin-top: 7px; margin-left: 7px"><a href="#" id="change-name">Xong</a></div>');
    });

    $(document).on('click', '#change-name', function (e) {
        var name = $('#title-change').val();
        $('#input-change-name').val(name);
        update_setting_conversation();
    });

    function update_setting_conversation() {

        var data = new FormData($('#form-update-conversation')[0]);
        $.ajax({
            url: '<?php echo e(url('chat/update-conversation')); ?>',
            type: 'post',
            data: data,
            dataType: 'json',
            processData: false,
            contentType: false,
            beforeSend: function () {
                $('.title__image').addClass('ht-on-loading');
            },
            success: function (response) {
                $('.title__image').removeClass('ht-on-loading');
                if (response.image != '' && response.image != null) {
                    $('.title__image').find('img').attr('src', '/files/' + response.image);
                    $('#convo-' + response.conversation_id).find('img').attr('src', '/files/' + response.image);
                }

                if (response.name != '') {
                    $('.title__main').text(response.name);
                    $('#convo-' + response.conversation_id).find('.convo__content__title').text(response.name);
                }
            }
        });
    }

</script>
<script>

    var last_id = '';


    var pusher = new Pusher('<?php echo e(config('constants.PUSHER_APP_KEY')); ?>', {
        'wsHost': 'socket.itro.vn',
        'wssPort': '8081',
        'cluster': '<?php echo e(config('constants.PUSHER_APP_CLUSTER')); ?>',
        'enabledTransports': ['ws', 'wss'],
        'secret': '<?php echo e(config('constants.PUSHER_APP_SECRET')); ?>',
        'appId': '<?php echo e(config('constants.PUSHER_APP_ID')); ?>',
        'authEndpoint': 'https://itro.vn/pusher/auth',
        auth: {
            headers: {
                'X-CSRF-Token': '<?php echo e(csrf_token()); ?>',
            }
        }

    });
    console.log(pusher);

    $("#fileupload").click(function () {
        $("#upload-file").click();
    });

    var presenceChannel = '';


    var sanitizer = {};
    (function ($) {
        function trimAttributes(node) {
            $.each(node.attributes, function () {
                var attrName = this.name;
                var attrValue = this.value;
                if (attrName.indexOf('on') == 0 || attrValue.indexOf('javascript:') == 0) {
                    $(node).removeAttr(attrName);
                }
            });
        }

        function sanitize(html) {
            var output = $($.parseHTML('<div>' + html + '</div>', null, false));
            output.find('*').each(function () {
                trimAttributes(this);
            });
            return output.html();
        }

        sanitizer.sanitize = sanitize;
    })(jQuery);


    var conversation_id = '';
    var to_m = '';

    function scrollToBottom() {
        $('.messenger__list-messages').animate({
            scrollTop: $('.messenger__list-messages').prop("scrollHeight")
        }, 200);
    }

    // var channel = pusher.subscribe('chat-669');
    // channel.bind('new-message', function (data) {
    //     console.log(data);
    // });

    var channel = pusher.subscribe('chat-<?php echo e(auth('backend')->user()->id); ?>');
    channel.bind('new-message', function (data) {

        var conversation = data.conversation_id;

        var cl = '';
        if (conversation == conversation_id) {
            cl = 'active';
        } else {
            cl = 'unread';
        }


        if (conversation != conversation_id) {

                $('#convo-' + conversation).remove();
                $('.messenger__list-convos').prepend(
                    '<div class="single-preview-convo ' + cl + '" id="convo-' + conversation + '">' +
                    '<a href="#" class="convo-active-link" data-conversion="' + conversation + '">' +
                    '<div class="convo__image">' +
                    '<div class="convo__image__single"><img src="' + data.conversation_image + '" alt=""></div>' +
                    '</div>' +
                    '<div class="convo__content">' +
                    '<div class="convo__content__title"> ' + data.conversation_name + '</div>' +
                    '<div class="convo__content__excerpt" id="last-message-74"> ' + data.conversation_last_message + '</div>' +
                    '</div>' +
                    '<div class="convo__info">' +
                    '<div class="convo__info__datetime">13:40</div>' +

                    '</div>' +
                    '</a>' +
                    '</div>'
                );

        }


        var content = data.content;
        var image = data.conversation_image;
        var from = data.from;

//        if (message.fromID == response.user_one_id) {
//            image = response.user_one_image;
//        } else {
//            image = response.user_two_image;
//        }

        if (conversation == conversation_id) {
            if (from != '<?php echo e(auth('backend')->user()->id); ?>') {
                if (data.type == '<?php echo e(\App\Models\Message::TYPE_TEXT); ?>')

                    if (!$('.single-message:last').hasClass('single-message--from-current-user')) {
                        $('.single-message:last').find('.sm__list-sends').append(
                            '<div class="sm__single-send">' +
                            '<div class="ht-hc__wrapper">' +

                            '<div class="sm__single-send__content sm__single-send__content--text">' + content + '</div>' +

                            
                                '</div>' + '</div>'
                        );
                    } else {
                        $('.messenger__list-messages').append(
                            '<div class="single-message">' +
                            '<div class="sm__avatar"><img src="' + image + '" style="" alt=""></div>' +
                            '<div class="sm__content">' +
                            '<div class="sm__list-sends">' +

                            '<div class="sm__single-send">' +
                            '<div class="ht-hc__wrapper">' +

                            '<div class="sm__single-send__content sm__single-send__content--text">' + content + '</div>' +

                            
                                '</div>' +
                            '</div>' +

                            '</div>' +
                            
                                '</div>' +

                            '</div>'
                        );
                    }
                else if (data.type == '<?php echo e(\App\Models\Message::TYPE_IMAGE); ?>') {
                    $('.messenger__list-messages').append(
                        '<div class="single-message">' +
                        '<div class="sm__avatar"><img src="' + image + '" style="" alt=""></div>' +
                        '<div class="sm__content">' +
                        '<div class="sm__list-sends">' +

                        '<div class="sm__single-send">' +
                        '<div class="ht-hc__wrapper">' +

                        '<div class="sm__single-send__content sm__single-send__content--image">' +
                        '<a href="#" class="single-image"><img src="' + content + '" alt=""></a>' +
                        '</div>' +

                        
                            '</div>' +
                        '</div>' +

                        '</div>' +
                        
                            '</div>' +

                        '</div>'
                    );
                } else {
                    $('.messenger__list-messages').append(
                        '<div class="convo-start-title">' + content + '</div>'
                    );
                }


                scrollToBottom();
            }
        }

        $("#last-message-conversation-" + conversation).text(content);
    });

    // Initialize Firebase

    $('#upload-file').change(function (e) {
        e.preventDefault();
        var form = new FormData($('#send-image-form')[0]);
        form.append('conversation_id', conversation_id);
        form.append('_token', '<?php echo e(csrf_token()); ?>');

        $(this).val('');

        $.ajax({
            url: '<?php echo e(url('chat/send-message')); ?>',
            data: form,
            type: 'POST',
            contentType: false,       // The content type used when sending data to the server.
            cache: false,             // To unable request pages to be cached
            processData: false,
            dataType: 'json',
            beforeSend: function () {
                $('.messenger__list-messages').append(
                    '<div class="single-message single-message--from-current-user">' +
                    '<div class="sm__content">' +
                    '<div class="sm__loading-animation"></div>' +
                    '</div>' +
                    '</div>'
                );
                scrollToBottom();

            },
            success: function (response) {


                $('.sm__loading-animation').parent().parent().remove();
                $('.messenger__list-messages').append(
                    '<div class="single-message  single-message--from-current-user">' +

                    '<div class="sm__content">' +
                    '<div class="sm__list-sends">' +

                    '<div class="sm__single-send">' +
                    '<div class="ht-hc__wrapper">' +

                    '<div class="sm__single-send__content sm__single-send__content--image">' +
                    '<a href="#" class="single-image"><img src="' + response.data.content + '" alt=""></a>' +
                    '</div>' +

                    
                        '</div>' +
                    '</div>' +

                    '</div>' +
                    
                        '</div>' +

                    '</div>'
                );

                $('.messenger__list-messages').imagesLoaded(function () {
                    scrollToBottom();
                });

                $('#last-message-' + conversation_id).text('Bạn đã gửi 1 ảnh');


            },
            error: function (error) {

            }
        });

    });

    function linkify(inputText) {
        var replacedText, replacePattern1, replacePattern2, replacePattern3;

        //URLs starting with http://, https://, or ftp://
        replacePattern1 = /(\b(https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gim;
        replacedText = inputText.replace(replacePattern1, '<a href="$1" target="_blank">$1</a>');

        //URLs starting with "www." (without // before it, or it'd re-link the ones done above).
        replacePattern2 = /(^|[^\/])(www\.[\S]+(\b|$))/gim;
        replacedText = replacedText.replace(replacePattern2, '$1<a href="http://$2" target="_blank">$2</a>');

        //Change email addresses to mailto:: links.
        replacePattern3 = /(([a-zA-Z0-9\-\_\.])+@[a-zA-Z\_]+?(\.[a-zA-Z]{2,6})+)/gim;
        replacedText = replacedText.replace(replacePattern3, '<a href="mailto:$1">$1</a>');

        return replacedText;
    }

    $(document).on('keypress', '.messenger__input__form-control', function (e) {

        var that = this;
        var new_conversation = $(this).attr('data-new-conversation');
        if (e.keyCode == '13' && !e.shiftKey) {
            var content = $(this).val();
            content = sanitizer.sanitize(content);
            content = linkify(content);
            if (content == '') {
                return;
            }
            $.ajax({
                url: '<?php echo e(url('chat/send-message')); ?>',
                type: 'post',

                beforeSend: function () {
                    $(that).val('');

                    var current_conversation_image = $('#convo-' + conversation_id).find('img').attr('src');
                    var current_conversation_name = $('#convo-' + conversation_id).find('.convo__content__title').text();


                    var firstconvo = $('.single-preview-convo:first').attr('id');

                    if ('convo-' + conversation_id !== firstconvo) {


                        $('#convo-' + conversation_id).remove();

                        $('.messenger__list-convos').prepend(
                            '<div class="single-preview-convo active" id="convo-' + conversation_id + '">' +
                            '<a href="#" class="convo-active-link" data-conversion="' + conversation_id + '">' +
                            '<div class="convo__image">' +
                            '<div class="convo__image__single"><img src="' + current_conversation_image + '" alt=""></div>' +
                            '</div>' +
                            '<div class="convo__content">' +
                            '<div class="convo__content__title"> ' + current_conversation_name + '</div>' +
                            '<div class="convo__content__excerpt" id="last-message-74"> ' + content + '</div>' +
                            '</div>' +
                            '<div class="convo__info">' +
                            '<div class="convo__info__datetime">13:40</div>' +

                            '</div>' +
                            '</a>' +
                            '</div>'
                        );

                    }

                    if ($('.single-message:last').hasClass('single-message--from-current-user')) {
                        $('.single-message:last').find('.sm__list-sends').append(
                            '<div class="sm__single-send">' +
                            '<div class="ht-hc__wrapper">' +

                            '<div class="sm__single-send__content sm__single-send__content--text">' + content + '</div>' +

                            
                                '</div>' + '</div>'
                        );
                    } else {
                        $('.messenger__list-messages').append(
                            '<div class="single-message  single-message--from-current-user">' +

                            '<div class="sm__content">' +
                            '<div class="sm__list-sends">' +

                            '<div class="sm__single-send">' +
                            '<div class="ht-hc__wrapper">' +

                            '<div class="sm__single-send__content sm__single-send__content--text">' + content + '</div>' +

                            
                                '</div>' +
                            '</div>' +

                            '</div>' +
                            
                                '</div>' +

                            '</div>'
                        );
                    }
                    scrollToBottom();
                    //  $('#last-message-' + conversation_id).text(content);
                },
                data: {
                    conversation_id: conversation_id,
                    content: content,
                    _token: '<?php echo e(csrf_token()); ?>',
                    new_conversation: new_conversation,
                    user_ids: $("#new-user-chat").tagsinput('items')
                },
                dataType: 'json',
                success: function (response) {
                    if (new_conversation == 1) {
                        $.ajax({
                            url: '<?php echo e(url('chat')); ?>',
                            type: 'get',
                            beforeSend: function () {
//                $('.list-message-in-convo').html(
//                    '<div class="single-message from-owner">' +
//                    '<div class="typing-loading"></div>' +
//                    '</div>'
//                );

                            },
                            dataType: 'json',
                            success: function (response) {
                                $('.messenger__list-convos').html(response.data);
                                $('.messenger__input__form-control').attr('data-new-conversation', 0);
                                $('.convo-active-link').first().click();


                            }
                        });
                    }

//                    if (response.status == 1) {
//                        location_m = response.location;
//                    }

//                    if (response.status == 0) {
//
//                    }
//                   $('.list-message-in-convo').html(response);
                }
            });
        }
    });

    $(document).ready(function () {
        $('.convo-active-link').first().click();

    });

    $('.messenger__list-messages').scroll(function () {
        var pos = $('.messenger__list-messages').scrollTop();

        var that = this;


        if (pos == 0) {
            $.ajax({
                url: '<?php echo e(url('chat/messages')); ?>',
                type: 'get',
                data: {
                    conversation: conversation,
                    last_id: last_id
                },
                beforeSend: function () {
//                $('.list-message-in-convo').html(
//                    '<div class="single-message from-owner">' +
//                    '<div class="typing-loading"></div>' +
//                    '</div>'
//                );

                },
                dataType: 'json',
                success: function (response) {
                    last_id = response.data;
                    var firstMsg = $('.single-message:first');
                    // Store current scroll/offset
                    var curOffset = firstMsg.offset().top - $(document).scrollTop();
                    $('.messenger__list-messages').prepend(response.html);
                    $(that).scrollTop(firstMsg.offset().top - curOffset);

                }
            });
        }
    });

    $(document).on('click', '.leave-conversation', function (e) {
        e.preventDefault();
        var conversation_id = $(this).attr('data-conversation-id');
        var that = this;
        bootbox.confirm({
            message: "Bạn có chắc chắn muốn rời cuộc hội thoại",
            buttons: {
                confirm: {
                    label: 'Có',
                    className: 'btn-success'
                },
                cancel: {
                    label: 'Không',
                    className: 'btn-danger'
                }
            },


            callback: function (result) {
                if (result == true) {

                    $.ajax({
                        url: '<?php echo e(url('chat/leave-conversation')); ?>',
                        type: 'post',
                        data: {
                            conversation_id: conversation_id
                        },
                        dataType: 'json',
                        success: function (response) {
                            if (response.status == 1) {
                                $('#convo-' + conversation_id).next().find('.convo-active-link').click();
                                $('#convo-' + conversation_id).remove();
                            }
                        }
                    });
                }
            }
        });


    });

    $(document).on('click', '.remove-user-conversation', function (e) {
        e.preventDefault();
        var user_ids = [];
        user_ids[0] = $(this).attr('data-id');
        var conversation_id = $(this).attr('data-conversation-id');
        var that = this;
        bootbox.confirm({
            message: "Bạn có chắc chắn muốn xóa người này khỏi cuộc hội thoại",
            buttons: {
                confirm: {
                    label: 'Có',
                    className: 'btn-success'
                },
                cancel: {
                    label: 'Không',
                    className: 'btn-danger'
                }
            },


            callback: function (result) {
                if (result == true) {

                    $.ajax({
                        url: '<?php echo e(url('chat/remove-user-conversation')); ?>',
                        type: 'post',
                        data: {
                            user_ids: user_ids,
                            conversation_id: conversation_id
                        },
                        dataType: 'json',
                        success: function (response) {
                            if (response.status == 1) {
                                $('.convo-active-link[data-conversion="' + conversation_id + '"]').click();
                            }
                        }
                    });
                }
            }
        });


    });

    $(document).on('click', '.set-admin-conversation', function (e) {
        e.preventDefault();
        var user_id = $(this).attr('data-id');
        var conversation_id = $(this).attr('data-conversation-id');
        var that = this;
        var name = $(this).attr('data-user-name');
        bootbox.confirm({
            message: "Bạn có chắc chắn muốn xóa người này khỏi cuộc hội thoại",
            buttons: {
                confirm: {
                    label: 'Có',
                    className: 'btn-success'
                },
                cancel: {
                    label: 'Không',
                    className: 'btn-danger'
                }
            },


            callback: function (result) {
                if (result == true) {

                    $.ajax({
                        url: '<?php echo e(url('chat/set-admin-conversation')); ?>',
                        type: 'post',
                        data: {
                            user_id: user_id,
                            conversation_id: conversation_id
                        },
                        dataType: 'json',
                        success: function (response) {
                            if (response.status == 1) {
                                $('.convo-active-link[data-conversion="' + conversation_id + '"]').click();
                                swal('Thành công', 'Bạn đã đặt ' + name + ' làm admin thành công', 'success');
                            }
                        }
                    });
                }
            }
        });


    });

    $(document).on('click', '#create-new-chat', function (e) {
        e.preventDefault();
//        $('#header_chat').html('<div class="messenger__input-message">'+
//            '<div class="messenger__input__main">'+
//            '<div class="messenger__input-wrap" id="new-wrap">'+
//            '<input id="new-user-chat" class="messenger__input__form-control input--auto-adjust-height" value="" style="overflow: hidden; overflow-wrap: break-word; height: 52px;">'+
//            '</div>'+
//            '</div>'+
//            '</div>');
        $('#header_chat').html('<input placeholder="Vui lòng nhập tên user" id="new-user-chat" data-role="tagsinput" class="form-control input-large" value="">')
        $('.messenger__list-messages').html('');
        $('.messenger__input__form-control').attr('data-new-conversation', 1);

        $('#new-user-chat').tagsinput({
            itemValue: 'id',
            itemText: 'name',
            typeaheadjs: [{
                minLength: 1,
                highlight: true,
            }, {
                source: function (query, syncresults, process) {
                    return $.ajax({
                        url: '<?php echo e(url('/chat/contacts')); ?>',
                        data: {name: query},
                        dataType: 'json',
                        type: 'get',
                        success: function (response) {
                            return process(response)
                        }
                    });
                },
                display: 'name', // PUT IT HERE
//                templates: {
//                    empty: [
////                    '<div class="empty-message">',
////                    '</div>'
//                    ].join('\n'),
//                    suggestion: function (data) {
//                        return '<div>' + data.name + '</div>';
//                    }
//                }
            }],
            freeInput: true,
            allowDuplicates: false
        });
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        

    });

    $(document).on('click', '.remove-admin-conversation', function (e) {
        e.preventDefault();
        var user_id = $(this).attr('data-id');
        var conversation_id = $(this).attr('data-conversation-id');
        var that = this;
        var name = $(this).attr('data-user-name');
        bootbox.confirm({
            message: "Bạn có chắc chắn muốn xóa người này khỏi cuộc hội thoại",
            buttons: {
                confirm: {
                    label: 'Có',
                    className: 'btn-success'
                },
                cancel: {
                    label: 'Không',
                    className: 'btn-danger'
                }
            },


            callback: function (result) {
                if (result == true) {

                    $.ajax({
                        url: '<?php echo e(url('chat/remove-admin-conversation')); ?>',
                        type: 'post',
                        data: {
                            user_id: user_id,
                            conversation_id: conversation_id
                        },
                        dataType: 'json',
                        success: function (response) {
                            if (response.status == 1) {
                                $('.convo-active-link[data-conversion="' + conversation_id + '"]').click();
                                swal('Thành công', 'Bạn đã xóa ' + name + ' khỏi vị trí admin thành công', 'success');
                            }
                        }
                    });
                }
            }
        });


    });

    $(document).on('click', '.convo-active-link', function (e) {
        e.preventDefault();

        conversation = $(this).attr('data-conversion');
        pusher.unsubscribe('presence-read-conversation-' + conversation_id);
        conversation_id = conversation;
        presenceChannel = pusher.subscribe('presence-read-conversation-' + conversation_id);
        $('.convo-active-link').parent().removeClass('active');
        $(this).parent().addClass('active');
        $(this).parent().removeClass('unread');


        $.ajax({
            url: '<?php echo e(url('chat/conversation')); ?>',
            type: 'get',
            data: {
                conversation: conversation
            },
            beforeSend: function () {
//                $('.list-message-in-convo').html(
//                    '<div class="single-message from-owner">' +
//                    '<div class="typing-loading"></div>' +
//                    '</div>'
//                );

            },
            dataType: 'json',
            success: function (response) {
                $('#MessengerInfoCol').html(response.sidebar);
                $('#header_chat').text(response.title);
            }
        });

        $.ajax({
            url: '<?php echo e(url('chat/messages')); ?>',
            type: 'get',
            data: {
                conversation: conversation
            },
            beforeSend: function () {
//                $('.list-message-in-convo').html(
//                    '<div class="single-message from-owner">' +
//                    '<div class="typing-loading"></div>' +
//                    '</div>'
//                );

            },
            dataType: 'json',
            success: function (response) {
                last_id = response.data;
                $('.messenger__list-messages').html(response.html);
                $('.messenger__list-messages').imagesLoaded(function () {
                    scrollToBottom();
                });

            }
        });
    });

    $('#Toggle__MessengerInfoCol').click(function () {
        $('#MessengerInfoCol').toggle();
    })

</script>
<script>

</script>
<?php $__env->stopPush(); ?>
<?php echo $__env->make('frontend3_chat', \Illuminate\Support\Arr::except(get_defined_vars(), array('__data', '__path')))->render(); ?>