@extends('layouts.admin.app')
@section('title') Messenger @stop
@section('main')
    <!-- Main content -->
    <section class="content">
        <div class="row">
            <div class="col-md-3">
                <a href="{{route('admin.messenger.index')}}"
                   class="btn btn-primary btn-block margin-bottom">Back To Inbox</a>
            @include('admin.messenger.folder')
            <!-- /. box -->
            </div>
            <!-- /.col -->
            <div class="col-md-9">
                <div class="box box-primary direct-chat direct-chat-success">
                    <div class="box-header with-border">
                        <p class="text-center lead"><strong>{{$user_full_name}}</strong></p>
                    </div>
                    <div class="box-body">

                    <!-- Conversations are loaded here -->
                        <div class="direct-chat-messages" style="height:400px;">

                        @foreach($messages as $message)

                            @if($auth->id == $message->to_id)
                                <!-- Message. Default to the left -->
                                    <div class="direct-chat-msg">
                                        <div class="direct-chat-info clearfix">
                                            <span class="direct-chat-name pull-left">{{$user_full_name}}</span>
                                            <span class="direct-chat-timestamp pull-right">{{$message->created_at->diffForHumans()}}</span>
                                        </div>
                                        <!-- /.direct-chat-info -->
                                        <img class="direct-chat-img" src="{{$auth->photo['file']}}"
                                             alt="Message User Image"><!-- /.direct-chat-img -->
                                        <div class="direct-chat-text">
                                            {{$message->content}}
                                        </div>
                                        <!-- /.direct-chat-text -->
                                    </div>
                                    <!-- /.direct-chat-msg -->

                            @else

                                <!-- Message to the right -->
                                    <div class="direct-chat-msg right">
                                        <div class="direct-chat-info clearfix">
                                            <span class="direct-chat-name pull-right">Me</span>
                                            <span class="direct-chat-timestamp pull-left">{{$message->created_at->diffForHumans()}}</span>
                                        </div>
                                        <!-- /.direct-chat-info -->
                                        <img class="direct-chat-img" src="{{$auth->photo['file']}}"
                                             alt="Message User Image"><!-- /.direct-chat-img -->
                                        <div class="direct-chat-text">
                                            {{$message->content}}
                                        </div>
                                        <!-- /.direct-chat-text -->
                                    </div>
                                    <!-- /.direct-chat-msg -->
                                @endif
                            @endforeach

                        </div>
                        <!--/.direct-chat-messages-->

                        <!-- /.box-body -->
                        <div class="box-footer">
                            {!! Form::open(['method'=>'PUT','action' => ['AdminMessengerController@send',$user_id]]) !!}
                            <div class="input-group">
                                {!! Form::text('message', null, ['class'=>'form-control','placeholder'=>'Type Message...']) !!}
                                <span class="input-group-btn">
                                        <button type="submit" class="btn btn-primary btn-flat">Send</button>
                                    </span>
                            </div>
                            @if ($errors->has('message'))
                                <span class="invalid-feedback">
                                    <strong>{{ $errors->first('message') }}</strong>
                                </span>
                            @endif
                            {!! Form::close() !!}
                        </div>
                        <!-- /.box-footer-->
                    </div>
                    <!--/.direct-chat -->

                </div>
            </div>
            <!-- /. box -->

    </section>
    <!-- /.content -->
@stop
@section('footer')
    <script>
        $(document).ready(function () {
            $('#messages').DataTable({
                "order": [[0, 'desc']]
            });
            $('.direct-chat-messages').scrollTop($('.direct-chat-messages').prop('scrollHeight'))
        });
    </script>
@stop