@extends('template.layout')
@section('styles')
    <link href="{{asset('css/icheck/skins/all.css')}}" rel="stylesheet" type="text/css"/>
    <link href="{{asset('css/inbox.min.css')}}" rel="stylesheet" type="text/css"/>
    <style>
        textarea{
            resize: none;
        }
        li.mss {
            border: 1px solid black;
            list-style-type: none;
            margin: 2px 0;
            padding: 2px 5px;
            padding: 0.6% 1%;
            color: #000;
        }
        .him {
            float: left;
            border-radius: 0 10px 10px 0;
            clear: both;
            border: 1px solid #efefef !important;
            background-color: #efefef !important;
        }
        .me {
            float: right;
            border-radius: 10px 0 0 10px;
            clear: both;
            border: 1px solid #e9ffe9 !important;
            background-color: #e9ffe9 !important;
        }
        .him.start {
            border-top-left-radius: 10px;
        }
        .him.end {
            border-bottom-left-radius: 10px;
        }
        .me.start {
            border-top-right-radius: 10px;
        }
        .me.end {
            border-bottom-right-radius: 10px;
        }
    </style>
@endsection
@section('content')
    <h1 class="page-title"> Chat
        <small>Conversación</small>
    </h1>
    <div class="inbox">
        <div class="row">
        <div class="col-md-3">
            <div class="inbox-sidebar">
                <a href="{{ url('messages') }}" data-title="Compose" class="btn green compose-btn btn-block">
                    Regresar </a>
                <ul class="inbox-contacts">
                    <li class="divider margin-bottom-30"></li>
                    <li>
                        <strong>Participantes</strong>
                    </li>
                    <li>
                        @foreach($thread->participants as $participant)
                            <a href="javascript:;">
                                <span class="contact-name">{{$participant->user->nombres}}</span>
                            </a>
                        @endforeach
                    </li>
                </ul>
            </div>
        </div>
        <div class="col-md-9">
            <div class="portlet light bordered">
                <div class="portlet-title">
                    <div class="caption">
                        <i class="icon-bubble font-hide hide"></i>
                        <span class="caption-subject font-hide bold uppercase">{{ $thread->subject }}</span>
                    </div>
                </div>
                <div class="portlet-body">
                    <div class="scroller" id="chat-scroll" style="height: 525px;" data-always-visible="1" data-rail-visible1="1">
                        <ul class="chats" id="message-body">
                            @each('messenger.partials.messages', $thread->messages, 'message')
                        </ul>
                    </div>
                        @include('messenger.partials.form-message')
                </div>
            </div>
        </div>
    </div>
@stop
@section('scripts')

    <script src="{{ asset('plugins/jquery-slimscroll/jquery.slimscroll.min.js') }}" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.7.2/socket.io.min.js"></script>
    <script>
        $(document).ready(function(){
            $('.scroller').slimscroll({
                start: 'bottom',
            });
            $('input[name=message]').focus();
        });
        $('#frm-chat').submit(function(e){
            var url = $('#frm-chat').attr('action');
            e.preventDefault();
            $.ajax({
                url: url,
                type: "POST",
                data: $('#frm-chat').serialize(),
                success: function(ex){
                    $('#message-body').append(
                        "<div class='media'>"+
                            "<div class='media-body'>"+
                                "<li class='out'>"+
                                    "<div class='message'>"+
                                        "<span class='arrow'> </span>"+
                                            "<a href='javascript:;' class='name'>"+ex.user+"</a>"+
                                        "<span class='body'>"+ex.message+"</span>"+
                                    "</div>"+
                                "</li>"+
                            "</div>"+
                        "</div>"
                    );
                    var bottomCoord = $('.scroller')[0].scrollHeight;
                    $('.scroller').slimScroll({scrollTo: bottomCoord});

                },
                complete: function(){

                },
                error: function(ex){
                    console.log(ex);
                }
            });
            $('input[name=message]').val('');
        });
    </script>
    <script>
        {{--var socket = io('http://localhost:5000');--}}
        {{--socket.on('chat-thread-{{ $thread->id }}-{{ Auth::id() }}:App\\Events\\MessageSent', function(data) {--}}
            {{--$('#message-body').append(--}}
                {{--"<div class='media'>"+--}}
                {{--"<div class='media-body'>"+--}}
                {{--"<li class='in'>"+--}}
                {{--"<div class='message'>"+--}}
                {{--"<span class='arrow'> </span>"+--}}
                {{--"<a href='javascript:;' class='name'>"+data.user.nombres+"</a>"+--}}
                {{--"<span class='body'>"+data.message.body+"</span>"+--}}
                {{--"</div>"+--}}
                {{--"</li>"+--}}
                {{--"</div>"+--}}
                {{--"</div>"--}}
            {{--);--}}
            {{--var bottomCoord = $('.scroller')[0].scrollHeight;--}}
            {{--$('.scroller').slimScroll({scrollTo: bottomCoord});--}}
        {{--}.bind(this))--}}
    </script>
@endsection