@include('site.controllers.header')
<div class="container  m-h-50 mb-60">
    <section class="global-head p-0">
        <div class="row">
            <div class="col-xs-9">
                <article>
                    <h4><strong>محادثاتى</strong></h4>
                    <p>يوجد هنا جميع الرسائل الخاصه بك</p>
                </article>
            </div>

        </div>
    </section>
    <div class="row">
        <div class="col-md-3 col-sm-4 px-0">
            <div class="sideprofile">
                <!-- tabs -->
                <ul class="nav nav-tabs nav-stacked bg-gray h-60">

                    @foreach($rooms as $room)


                        <li class="active style-adjust" onclick="getMessages({{$room->id}})">
                            <a data-toggle="tab" href="#chat-panel">
                                <div class="row">
                                    <div class="col-xs-2 px-0">
                                        <img src="{{asset('site/images/profile.png')}}" class="chat" alt="">
                                    </div>
                                    <div class="col-xs-7 px-0">
                                        <small class="font-regular"><strong>

                                                @if(\Auth::user()->id == $room->sender_id)
                                                    {{$room->receiver->fullname}}
                                                @else
                                                    {{$room->sender->fullname}}


                                                @endif
                                            </strong></small><br/>
                                        <small
                                            class="font-regular color-gray">{{$room->messages->last() ? $room->messages->last()->message : ""}}</small>
                                    </div>
                                    <div class="col-xs-3 px-0 text-cenetr">
                                        <span
                                            class="time">{{ $room->messages->last() ? \Carbon\Carbon::parse($room->created_at)->toDateString() : ""}}</span><br/>
                                        <span class="count">{{$room->messages->count()}}</span>
                                    </div>
                                </div>
                            </a>
                        </li>
                    @endforeach

                </ul>
            </div>
        </div>
        <div class="col-md-9 col-sm-8 px-0">
            <div class="profilepage">
                <div class="tab-content chat-size">
                    <!-- tabs content -->
                    <!-- chat-panel -->
                    <div id="chat-panel" class="tab-pane fade in active">
                        <h2 style="text-align: center;color: darkslategray;"> محادثاتي </h2>

                        @include('site.chats.messages')

                    </div>
                    <!-- chat-preview -->

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


    </div>
</div>
@include('site.controllers.footer')
<script src="{!!asset('assets')!!}/socket.io.js" type="text/javascript"></script>

<script type="text/javascript">
    $(document).ready(function () {

        $('.chat_btn').on('click', function () {
            $('.chat_container').toggleClass('open_chat');
        });
        $(document).on('click', '.close_user_chat', function () {
            $(this).closest('.chat_single_user_block').remove();
            // console.log("close");
        });
        scrollToTheEndofChatBox();
        // Connect to our node/websockets server
        var socket = io.connect('http://wasata.alkhalaffamily.com:3030');

        socket.on('new Message', function (data) {

            const audio = new Audio("./assets/notification.mp3");


            $('#messageInput').val('');

            var messageFromHtml = '<li  class="rtl m-messenger__wrapper" >' +
                '<p class="chat-p-right" >' + data.message + '</p>' +
                '</li>';

            var messageToHtml = '<li class="m-messenger__wrapper">' +
                '<p class="chat-p-left" >' + data.message + '</p>' +
                '</li>';

            if ($('#messageInput').attr('data-from_id') === data.from_id) {
                messageHtml = messageFromHtml;

            } else {
                messageHtml = messageToHtml;
                audio.play();

            }

            $('#messagesSection').append(messageHtml);
            // $('#messagesSection').append(messageHtml);

            scrollToTheEndofChatBox();

        })

        // New socket connected, display new count on page

        socket.on('users connected', function (data) {
            $('#usersConnected').html('Users connected: ' + data)
        });

        socket.on('get_login_user_id', function (data) {
            @if(Auth()->check())
            socket.emit('loginUserId', {user_id: "{!! Auth()->user()->id !!}"})
            @endif
        });
        socket.on('close room', function (data) {
            if ($('#messagesInputSection').attr('data-room_id') == data.room_id) {
                $('#messagesInputSection').html('');
            }
        });
        socket.on('loginUserId', function (data) {

            $('.m-badge--success').each(function (i) {
                // console.log('a');
                $(this).removeClass('m-badge--success');
                $(this).addClass('m-badge--danger');
            });

            $.each(data, function (index, user_id) {

                $('.online_user_' + user_id).each(function (i) {
                    // console.log('a');
                    $(this).removeClass('m-badge--danger');
                    $(this).addClass('m-badge--success');
                });

            });


        });

        $(document).on('keypress', '#messageInput', function (e) {
            var key = e.which;
            if (key == 13)  // the enter key code
            {
                sendMessage($(this).attr('data-to_id'));
            }

        });


        $(document).on('click', '#sendMessage', function (e) {

            e.preventDefault();
            sendMessage($(this).attr('data-to_id'));

        });


        function sendMessage(userId) {
            // console.log(userId);
            var inputObject = $('#messageInput'),
                message = inputObject.val(),
                room_id = inputObject.attr('data-room_id'),
                from_id = inputObject.attr('data-from_id'),
                to_id = inputObject.attr('data-to_id');
            // console.log(inputObject.val());


            if (message != '') {
                if (message.includes("@") == false) {
                    if (message.includes("966") == false) {
                        if (message.includes("05") == false) {
                            socket.emit('sendMessage', {
                                from_id: from_id,
                                to_id: to_id,
                                room_id: room_id,
                                message: message
                            })

                        } else {
                            socket.emit('sendMessage', {
                                from_id: from_id,
                                to_id: to_id,
                                room_id: room_id,
                                message: "**********"
                            })
                        }
                    } else {
                        socket.emit('sendMessage', {
                            from_id: from_id,
                            to_id: to_id,
                            room_id: room_id,
                            message: "**********"
                        })
                    }

                } else {
                    socket.emit('sendMessage', {
                        from_id: from_id,
                        to_id: to_id,
                        room_id: room_id,
                        message: "**********"
                    })

                }

            }

        }
    });

    $(document).on('click', '.startChatWithUser', function (e) {
        e.preventDefault();
        var route = $(this).attr('data-route');
        var userId = $(this).attr('data-id');
        startChatWithUser(route, userId);
    });


    function startChatWithUser(route, userId) {

        // $('#load').addClass('show');

        $.ajax({
            url: route
        }).done(function (data) {
            if (document.getElementById('userChatBox_' + userId) == null) {
                $('#chatBoxData').append(data);
                scrollToTheEndofChatBox();
                // $('#load').removeClass("show");
                $('.chat_single_user_block').show();
            }

        }).fail(function () {
            alert('an error in loading .');
        });
    }

    function scrollToTheEndofChatBox() {

        if ($('#messagesSection').length <= 0) {
            return false;
        }

        var toScroll = 0;

        var divWindow = $('#messagesSection').offset().top;

        var clickedLink = 0;

        $('.m-messenger__wrapper').each(function (index) {
            clickedLink = parseFloat(clickedLink) + parseFloat($(this).outerHeight());
        });

        toScroll += clickedLink + 5000 - divWindow;

        $('#messagesSection').animate({scrollTop: toScroll}, 900);
    }

    // console.log('ddddddddddddddddddddddd?d');
</script>