@extends('user::layouts.masterlist')
@section('content')
    <style type="text/css">
        .contacts-list > li.active{
            background:#0d0d0d;
        }
    </style>
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>Conversations</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item">
                            <a href="{{ route('dashboard') }}"><i class="fa fa-dashboard"></i> Dashboard</a>
                        </li>                 
                        <li class="breadcrumb-item active">Conversations</li>
                    </ol>
                </div>
            </div>
        </div><!-- /.container-fluid -->
    </section>
    <!-- Main content -->
    <section class="content">
        @include('layouts.flash.alert')
        <div class="row">
            <div class="col-12">
                <div class="card">
                    {{ Form::open(['route' => ['conversations.send'], 'method' => 'post', 'class' => 'conversation-form']) }}
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-9">
                                @if(isset($conversations))
                                    <input  type="hidden" name="receiver_id" value="{{ $receiver->id }}">
                                    @if($conversations->isNotEmpty())
                                        <div class="direct-chat direct-chat-primary">
                                            <div class="direct-chat-messages all-conversations">
                                                @foreach($conversations as $conversation)
                                                    <div class="direct-chat-msg @if($conversation->sender_id == auth()->id()) right @endif">
                                                        <div class="direct-chat-infos clearfix">
                                                            <span class="direct-chat-name float-left">{{ $conversation->sender->full_name }}</span>
                                                            <span class="direct-chat-timestamp float-right">{{ $conversation->created_at->diffForHumans() }}</span>
                                                        </div>
                                                        @if(\Storage::disk('public')->has($conversation->sender->avatar))
                                                            <img class="direct-chat-img" src="{{ asset('storage/'.$conversation->sender->avatar) }}" alt="" >
                                                        @else
                                                            <img class="direct-chat-img" src="{{ asset('images/no-img-100x92.jpg') }}" alt="" >
                                                        @endif
                                                        <div class="direct-chat-text">
                                                            {{ $conversation->message }}
                                                        </div>
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div> 
                                    @else
                                        <div class="direct-chat direct-chat-primary">
                                            <div class="direct-chat-messages all-conversations">
                                                <div class="callout callout-warning should-hide">
                                                    <p>Type somthing to start conversation.</p>
                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                @else
                                    <div class="callout callout-warning">
                                        <p>Please select any user to start conversation.</p>
                                    </div>
                                @endif
                            </div>
                            <div class="col-md-3">
                                <div class="direct-chat-contacts-open">
                                    <div class="direct-chat-contacts" style="position: static !important;">
                                        <div class="input-group input-group-sm" style="padding:2px;">
                                            <input type="text" name="keyword" class="form-control" placeholder="Search" style="border:1px solid #218838; border-radius:0px">
                                            <span class="input-group-append">
                                                <button type="button" class="btn btn-success btn-flat search-contacts">Search</button>
                                            </span>
                                        </div>
                                        <ul class="contacts-list contact-list-wrapper">
                                            @include('chatmanager::contacts')
                                        </ul>
                                    </div>
                                    <!-- /.contatcts-list -->
                                </div>
                            </div>
                        </div>
                    </div>
                    @isset($conversations)
                        <div class="card-footer">
                            <div class="input-group @if($errors->has('message')) has-error @endif">
                                <input type="text" name="message" placeholder="Type Message ..." class="form-control">
                                @if($errors->has('message'))
                                    <span class="invalid-feedback">{{ $errors->first('message') }}</span>
                                @endif
                                <span class="input-group-btn">
                                    <button type="submit" class="btn btn-success btn-flat send-btn">Send</button>
                                </span>
                            </div>
                        </div>
                    @endisset
                    {{ Form::close() }}
                </div>
            </div>
        </div>
    </section>
@stop
@push('scripts')
    <script type="text/javascript">
        function scrollToBottom(){
            var height = 0;
            $('.all-conversations .direct-chat-msg').each(function(i, value){
                height += parseInt($(this).height());
            });
            $('.all-conversations').animate({ scrollTop: height}, 1000);
        }
        $(document).ready(function() {
            scrollToBottom();
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': '{!! csrf_token() !!}'
                }
            });
            $(document).on('submit', '.conversation-form', function(e){
                e.preventDefault();
                var token = $('meta[name="csrf-token"]').attr('content');
                var receiver_id = $(document).find('input[name=receiver_id]').val();
                var message = $(document).find('input[name=message]').val();
                $('.send-btn').text('sending...');
                $.ajax({
                    type:'POST',
                    url: '{{ route("conversations.send") }}',
                    dataType: 'json',
                    data:{
                        _token: '{!! csrf_token() !!}',
                        receiver_id:receiver_id,
                        message:message,
                    },
                    success: function(data){
                        $(document).find('.send-btn').text('send');
                        if(data.status == 'success'){
                            $(document).find('.should-hide').hide();
                            $(document).find('.all-conversations').append(data.html);
                            $(document).find('input[name=message]').val('');
                            scrollToBottom();
                        }else{
                            alert(data.message);
                        }
                    },
                    error: function(error){
                        $(document).find('.send-btn').text('send');
                    }
                });
            });

            $(document).on('click', '.search-contacts', function(){
                var keyword = $(document).find('input[name=keyword]').val();
                var route = "{{ route('conversations.search.contacts') }}";
                route = route+"?keyword="+keyword;
                $.get(route, function(data){
                    $(document).find('.contact-list-wrapper').html(data.html);
                }); 
            })
        });
    </script>
@endpush