@extends('layouts.app')
@section('content')

    <div class="content-wrapper">

        <section class="msger">
            <header class="msger-header">
                <div class="msger-header-title">
                    <i class="fas fa-comment-alt">

                    </i> <span class="display-user-name"></span>

                </div>
                <div class="msger-header-options">
                    <span><i class="fas fa-cog"></i></span>
                </div>
            </header>

            <main class="msger-chat">

                @foreach ($chats as $chat)
                    <div class="{{ $chat->sender_id == auth()->user()->id ? 'msg right-msg' : 'msg left-msg' }}">
                        <div class="msg-bubble">
                            <div class="msg-text">
                                {{ $chat->message }}
                            </div>
                        </div>
                    </div>
                @endforeach

            </main>

            <form class="msger-inputarea" id="chat-form">
                <input type="text" class="msger-input" placeholder="Enter your message..." name="message" id="message">
                <button type="submit" class="msger-send-btn">Send</button>
            </form>
        </section>
    </div>

@endsection


@section('script')


    <!-- JavaScript -->
    <script src="https://js.pusher.com/8.2.0/pusher.min.js"></script>
    <!-- End JavaScript -->
    <script>
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        var rental_id = {{$id}};
        $(document).ready(function (e) {

            $('#chat-form').submit(function (e) {
                e.preventDefault();
                var message = $('#message').val();

                $.ajax({
                    url: "{{route('user.chat.store')}}",
                    type: 'POST',
                    data: {
                        id: `{{ $id }}`,
                        message: message
                    },

                    success: function (res) {
                        if (res.success) {
                            $('#message').val('');
                            let chat = res.data.message;
                            let html = `
                              <div class="msg right-msg">
                            <div class="msg-bubble">
                                <div class="msg-text">
                                  ` + chat + `
                                </div>
                            </div>
                        </div>`;
                            $('.msger-chat').append(html);
                            scrollChat();
                        } else {

                        }
                    }
                });
            });

            //scroll div
            function scrollChat() {
                $('.msger-chat').animate({
                    scrollTop: $('.msger-chat').offset().top + $('.msger-chat')[0].scrollHeight
                }, 0);
            }


            $(function () {

                const pusher = new Pusher('{{ env('PUSHER_APP_KEY') }}', {
                    cluster: '{{ env('PUSHER_APP_CLUSTER') }}',
                    channelAuthorization: {
                        endpoint: "{{ url('/broadcasting/auth') }}"
                    }
                });
                const messageChannel = pusher.subscribe('private-chat-message.{{ auth()->id() }}')

                messageChannel.bind('user-chat', function (res) {
                    console.log(res)
                    if (res.chat.rental_management_id === rental_id) {
                        var message = res.chat.message;
                        var newRow = ` <div class="msg left-msg">
            <div class="msg-bubble">
                <div class="msg-text">
                ` + message + `
                </div>
            </div>
        </div>`;
                        $('.msger-chat').append(newRow);
                        scrollChat();
                    }


                });
            });


        });

    </script>

@endsection