@extends('frontend3_chat')

@section('content')

    <div id="siteContent" class="site-content">
        <div class="inbox-page">
            <div class="inbox__list-convo inbox__single-col">
                <div class="inbox__list-convo__header">
                    <div class="list-title"><i class="ion-chatboxes mr-8"></i>Danh sách hội thoại</div>
                </div>
                <div class="inbox__list-convo__search-user">
                    <div class="form-group">
                        <input type="text" class="form-control convo-search-input" placeholder="Tìm trong danh bạ">
                        <i class="ion-ios-search-strong convo-search-icon"></i>
                    </div>
                </div>
                <div class="inbox__list-convo__main">
                    @foreach($items as $item)
                        <a href="#" class="single-prw-convo" data-conversion="{{ $item['info']['id'] }}"
                           data-to="">
                            <div class="sc__user-avatar">
                                <div class="avatar-wrapper ht-bgcover bg-color-grey-200"
                                     style="background-image: url({{ $item['info']['image'] }})"></div>
                            </div>
                            <div class="sc__convo-preview">
                                <div class="sc__user-title ht-oneline">
                                    {{ $item['info']['name'] }}

                                </div>

                                <div class="sc__convo-excerpt ht-oneline" id="last-message-conversation-{{ $item['info']['id'] }}">
                                    {{ $item['last_message']['content'] }}

                                </div>
                            </div>
                            {{--<div class="sc__convo-meta">--}}
                            {{--<div class="sc__single-meta">15:04:15</div>--}}
                            {{--<div class="sc__single-meta">27/02</div>--}}
                            {{--</div>--}}
                        </a>
                    @endforeach
                    {{--<div class="ht-loading"></div>--}}
                    {{--<div class="load-all-messages">Đã tải hết tin nhắn</div>--}}
                </div>
            </div>
            <div class="inbox__current-convo inbox__single-col">
                <div class="current-convo__header">

                </div>
                <div class="current-convo__main">
                    <div class="list-message-in-convo">


                    </div>
                </div>
                <div class="current-convo__input">
                    <div class="input-wrapper">
                        <div class="flex flex-ai-end">
                            <div class="flex-item flex-item-tw">
                                <div class="form-group my-0">
                                    <form id="send-image-form">
                                        <label class="input-message-attachment cs-pt">

                                            <input type="file" name="image" class="hidden" id="send-image">

                                            <i class="ion-images"></i></label>
                                    </form>
                                </div>
                            </div>
                            <div class="flex-item flex-item-dw px-12">
                                <div class="form-group my-0">
                                    <input rows="1" class="form-control input-message-text autosize-form-control"
                                           placeholder="Nhập tin nhắn"
                                           style="overflow: hidden; word-wrap: break-word; height: 34px;">
                                </div>
                            </div>
                            <div class="flex-item flex-item-tw">
                                <button type="submit" class="input-message-summit"><i class="ion-android-send"></i>
                                </button>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <div class="inbox__user-info">

            </div>
        </div>
    </div>

@endsection

@push('scripts')
<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="/frontend3/assets/js/moment.js"></script>
<script>

    var pusher = new Pusher('{{ config('constants.PUSHER_APP_KEY') }}', {
        'wsHost': 'socket.itro.vn',
        'wssPort': '8081',
        'cluster': '{{ config('constants.PUSHER_APP_CLUSTER') }}',
        'enabledTransports': ['ws', 'flash'],
        'secret': '{{ config('constants.PUSHER_APP_SECRET') }}',
        'appId': '{{ config('constants.PUSHER_APP_ID') }}'

    });

    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() {
        $('.current-convo__main').animate({
            scrollTop: $('.current-convo__main').prop("scrollHeight")
        }, 200);
    }


    var channel = pusher.subscribe('chat-{{ auth('backend')->user()->id }}');
    channel.bind('new-message', function (data) {
        var conversation = data.conversation_id;
        var content = data.content;
        var 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 != '{{ auth('backend')->user()->id }}') {
                $('.list-message-in-convo').append(
                    '<div class="single-message">' +
                    '<div class="sm__user-avatar">' +
                    '<div class="avatar-wrapper ht-bgcover" style="background-image: url(' + image + ')"></div>' +
                    '</div>' +

                    '<div class="sm__message-content">' +
                    '<div class="user-single-input">' +
                    '<div class="input__main">' +
                    '<div class="input__main__content input__main__content--text">' + content + '</div>' +
                    '</div>' +
                    '<div class="input__meta">' +
                    '<div class="input__meta__data">15:07:12, 23/04/2017</div>' +
                    '</div>' +
                    '</div>' +
                    '</div>' +
                    '</div>'
                );

                scrollToBottom();
            }
        }

        $("#last-message-conversation-"+conversation).text(content);
    });

    // Initialize Firebase

    $('#send-image').change(function (e) {
        e.preventDefault();
        var form = new FormData($('#send-image-form')[0]);
        form.append('to', to_m);
        form.append('location', location_m);

        $(this).val('');

        $.ajax({
            url: '{{ url('chat/push-image') }}',
            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 () {
                $('.list-message-in-convo').append(
                    '<div class="single-message from-owner">' +
                    '<div class="typing-loading"></div>' +
                    '</div>'
                );
                scrollToBottom();

            },
            success: function (response) {
                $('.typing-loading').parent().remove();
                $('.list-message-in-convo').append(
                    '<div class="single-message from-owner">' +
                    '<div class="sm__user-avatar">' +
                    '<div class="avatar-wrapper ht-bgcover" style="background-image: url({{ auth('backend')->user()->image }})"></div>' +
                    '</div>' +

                    '<div class="sm__message-content">' +
                    '<div class="user-single-input">' +
                    '<div class="input__main">' +
                    '<div class="input__main__content input__main__content--image">' +
                    '<a href="' + response.url + '" class="single-image-attachment" data-fancybox="">' +
                    '<img src="' + response.url + '" alt=""></a>' +
                    '</div>' +
                    '</div>' +
                    '<div class="input__meta">' +
                    '<div class="input__meta__data">' + moment().format('HH:mm:ss, dd/mm/YYYY') + '</div>' +
                    '</div>' +
                    '</div>' +
                    '</div>' +
                    '</div>'
                );
                scrollToBottom();
                $('.list-message-in-convo').imagesLoaded(function () {
                    scrollToBottom();
                });


            },
            error: function (error) {

            }
        });

    });

    $(document).on('keypress', '.input-message-text', function (e) {
        var that = this;
        if (e.keyCode == '13') {
            var content = $(this).val();
            content = sanitizer.sanitize(content);
            content = content.replace(/(\s)(http:\/\/[^\s]+)(\s)/g, '$1<a href="$2">$2</a>$3');
            if (content == '') {
                alert('Tin nhắn không hợp lệ');
                return;
            }
            $.ajax({
                url: '{{ url('chat/send-message') }}',
                type: 'post',
                beforeSend: function () {
                    $(that).val('');
                    $('.list-message-in-convo').append(
                        '<div class="single-message from-owner">' +
                        '<div class="sm__user-avatar">' +
                        '<div class="avatar-wrapper ht-bgcover" style="background-image: url({{ auth('backend')->user()->image }})"></div>' +
                        '</div>' +

                        '<div class="sm__message-content">' +
                        '<div class="user-single-input">' +
                        '<div class="input__main">' +
                        '<div class="input__main__content input__main__content--text">' + content + '</div>' +
                        '</div>' +
                        '<div class="input__meta">' +
                        '<div class="input__meta__data">' + moment().format('HH:mm:ss, DD/MM/YYYY') + '</div>' +
                        '</div>' +
                        '</div>' +
                        '</div>' +
                        '</div>'
                    );
                    scrollToBottom();
                    $('#last-message-to-' + to_m).text(content);
                },
                data: {
                    conversation_id: conversation_id,
                    content: content
                },
                dataType: 'json',
                success: function (response) {

//                    if (response.status == 1) {
//                        location_m = response.location;
//                    }

//                    if (response.status == 0) {
//
//                    }
//                   $('.list-message-in-convo').html(response);
                }
            });
        }
    });

    $(document).ready(function () {
        $('.single-prw-convo').first().click();

    });

    $(document).on('click', '.single-prw-convo', function (e) {
        e.preventDefault();

        conversation = $(this).attr('data-conversion');
        conversation_id = conversation;
        $('.single-prw-convo').removeClass('active');
        $(this).addClass('active');

        $.ajax({
            url: '{{ url('chat/to-info') }}',
            type: 'get',
            data: {
                to: to_m
            },
            dataType: 'json',
            success: function (response) {
                $('.inbox__user-info').html(response.html);
               // $('.current-convo__header').html(response.header);
            }
        });

        $.ajax({
            url: '{{ 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) {
                $('.list-message-in-convo').html(response.html);
                scrollToBottom();
            }
        });
    });

</script>
@endpush