@extends('mentor.layouts.master')
@section('title', 'Dashboard')

@section('content')
    <div class="main">
        <h1 class="hd mb-30">Messages</h1>

        <div class="message-grid">
            @include('mentor.messages.partials.conversations')
            <div class="msg-grid-2" style="position:relative;">
                <div class="grid-2-heading">
                    <h4>{{$user->getFullName()}}</h4>
                </div>
                <div id="chat" class="chat-history mb-4" style="max-height:375px;overflow-y:auto;">
                    @foreach($messages as $message)
                        @if($message->sender->id == auth()->user()->id)
                            <div class="message-group-sent">
                                <div class="message-sent">
                                    <div class="message-sent-text">
                                        {{$message->message}}
                                        <div class="float-right">
                                            <small>{{$message->humans_time}} ago</small>
                                        </div>
                                    </div>
                                    <div class="message-sent-status">
                                        <img src="{{$user->present()->avatar ? $user->present()->avatar  : url('assets/img/profile.png')}}" alt="">
                                    </div>
                                </div>
                            </div>
                        @else
                            <div class="message-group-received mt-4">
                                <div>
                                    <img src="{{ asset('assets/img/profile.png') }}" alt="">
                                </div>
                                <div>
                                    <div class="message-received">
                                        <div class="message-received-text">
                                            {{$message->toHtmlString()}}
                                            <div class="float-right">
                                                <small>{{$message->humans_time}} ago</small>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endif
                    @endforeach
                </div>
                <div class="chat-footer" style="position:absolute; bottom:0;">
                    <div class="chat-media">
                        <form action="" method="post" id="talk-send-message">
                            <input type="text" name="message-data" id="message-data"
                                   placeholder="type a message">
                            <input type="hidden" name="_id" value="{{@request()->route('id')}}">
                        </form>
                    </div>
                </div>
            </div>
            <div class="msg-grid-3">
                <div>
                    <img src="{{$user->present()->avatar ? $user->present()->avatar  : url('assets/img/profile.png')}}" alt="">
                    <h4>{{$user->getFullName()}}</h4>
                    @if(Cache::has('is_online' . $user->id))
                        <span class="text-success chat-p">Online</span>
                    @else
                        <span class="text-danger chat-p">Offline</span>
                    @endif
                </div>

                <h2 class="chat-profile-option">Options</h2>
                <div class="chatProfile">
                    <a href="{{route("user.mentor.profile",$user->id)}}">
                        <p>View profile</p>
                    </a>
                    <i class="fas fa-user"></i>
                </div>
                <div class="chatProfile">
                    <a href="{{ route('user.appointments') }}">
                        <p>View appointments</p>
                    </a>
                    <i class="fas fa-clock"></i>
                </div>
            </div>
        </div>
    </div>
    <div class="aptt-line"></div>
@endsection


@section("scripts")
    <script>
        $(document).ready(function () {
            $("#chat").animate({
                scrollTop: $("#chat").get(0).scrollHeight
            }, 1000);
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });


            $('#talk-send-message').on('submit', function (e) {
                e.preventDefault();
                let url, request, tag, data;
                tag = $(this);
                url = "{{route("mentor.message.new")}}";
                data = tag.serialize();

                request = $.ajax({
                    method: "post",
                    url: url,
                    data: data
                });

                request.done(function (response) {
                    if (response.status === 'success') {
                        $('#chat').append(response.html);
                        tag[0].reset();

                        $("#chat").animate({
                            scrollTop: $("#chat").get(0).scrollHeight
                        }, 1000);
                    }
                });

            });
        });
    </script>

    <script>
        let show = function (data) {
            alert(data.sender.name + " - '" + data.message + "'");
        }

        let msgShow = function (data) {

            let html = `<div class="message-group-received mt-4">
                                <div>
                                    <img src="{{$user->present()->avatar ? $user->present()->avatar  : url('assets/img/profile.png')}}" alt="">
                                </div>
                                <div>
                                    <div class="message-received">
                                        <div class="message-received-text">
                                            ${data.message}
            <div class="float-right">
                <small>1 Second ago</small>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>`;

            $('#chat').append(html);

            $("#chat").animate({
                scrollTop: $("#chat").get(0).scrollHeight
            }, 1000);
        }

    </script>
    {!! talk_live(['user'=>["id"=>auth()->user()->id, 'callback'=>['msgShow']]]) !!}
@endsection