ꦫꦣꦺꦤ꧀ꦄꦤ꧀ꦠꦱꦺꦤ

PATH: home / lab2454c / omvstudio.com / resources / views / front / chat

@extends('front.layouts.master')

@section('title','Chat')

@section('content')

@push('frontend-styles')
<meta name="csrf-token" content="{{ csrf_token() }}">
 <style>
        /* width */
        ::-webkit-scrollbar {
            width: 7px;
        }
        /* Track */
        ::-webkit-scrollbar-track {
            background: #f1f1f1;
        }
        /* Handle */
        ::-webkit-scrollbar-thumb {
            background: #a7a7a7;
        }
        /* Handle on hover */
        ::-webkit-scrollbar-thumb:hover {
            background: #929292;
        }
        ul {
            margin: 0;
            padding: 0;
        }
        li {
            list-style: none;
        }
        .user-wrapper, .message-wrapper {
            border: 1px solid #dddddd;
            overflow-y: auto;
        }
        .user-wrapper {
            height: 600px;
        }
        .user {
            cursor: pointer;
            padding: 5px 0;
            position: relative;
        }
        .user:hover {
            background: #eeeeee;
        }
        .user:last-child {
            margin-bottom: 0;
        }
        .pending {
            position: absolute;
            left: 13px;
            top: 9px;
            /*left: 72px;
            top: 28px;*/
            background: #b600ff;
            margin: 0;
            border-radius: 50%;
            width: 18px;
            height: 18px;
            line-height: 18px;
            padding-left: 5px;
            color: #ffffff;
            font-size: 12px;
        }
        .media-left {
            margin: 0 10px;
        }
        .media-left img {
            width: 64px;
            border-radius: 64px;
        }
        .media-body p {
            margin: 6px 0;
        }
        .message-wrapper {
            padding: 10px;
            height: 536px;
            background: #eeeeee;
        }
        .messages .message {
            margin-bottom: 15px;
        }
        .messages .message:last-child {
            margin-bottom: 0;
        }
        .received, .sent {
            width: 45%;
            padding: 3px 10px;
            border-radius: 10px;
        }
        .received {
            background: #495057;
        }
        .sent {
            background: #007bff;
            float: right;
            text-align: right;
        }
        .message p {
            margin: 5px 0;
            color: #fff;
        }
        .date {
            color: #777777;
            font-size: 12px;
        }
        .active {
            background: #bddcec;
        }
        input[type=text] {
            width: 100%;
            padding: 12px 20px;
            margin: 15px 0 0 0;
            display: inline-block;
            border-radius: 4px;
            box-sizing: border-box;
            outline: none;
            border: 1px solid #cccccc;
        }
        input[type=text]:focus {
            border: 1px solid #aaaaaa;
        }
    </style>
@endpush

<div class="container my-5">
                        <div class="row">
                            <div class="col-md-4">
                                <div class="user-wrapper" style="box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;">
                                    <ul class="users m-3">
                                        @foreach($users as $user)
                                            @php
                                                $detail = App\Models\User::find($user->id);
                                                //dd($detail);
                                            @endphp
                                            <li class="user" id="{{ $user->id }}">
                                                {{--will show unread count notification--}}
                                                @if($user->unread)
                                                    <span class="pending">{{ $user->unread }}</span>
                                                @endif

<div class="media">
                                                    <div class="media-left">
                                                        <img src="{{ !empty($user->profile_picture) ? asset('storage/profiles/'.$user->profile_picture) : asset('front_assets/images/default-user-image.png') }}" alt="" class="media-object">
                                                       {{--  @if (!empty($user->profile_picture))
                                                          <img src="{{ asset('storage/profiles/'.$user->profile_picture) }}" alt="" class="media-object">
                                                        @endif --}}
                                                    </div>

<div class="media-body">
                                                        <p class="name">{{ $user->first_name }}</p>
                                                        {{-- <p class="email">
                                                            @if($detail->IsVendor())
                                                                Vendor - {{$detail->shop->shop_name ?? ''}}
                                                            @else
                                                                Customer
                                                            @endif
                                                        </p> --}}
                                                    </div>
                                                </div>
                                            </li>
                                        @endforeach
                                    </ul>
                                </div>
                            </div>

<div class="col-md-8" id="messages">
                                <div class="text-center my-5"><h4>Select a user to start chat</h4></div>
                            </div>
                        </div>
                      </div>
                      
                    </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>

@endsection

@push('frontend-scripts')
<script src="https://js.pusher.com/5.0/pusher.min.js"></script>
{{-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> --}}

// Enable pusher logging - don't include this in production
        Pusher.logToConsole = true;

var pusher = new Pusher('{{env('PUSHER_APP_KEY')}}', {
            cluster: 'ap2',
            forceTLS: true
        });
        var channel = pusher.subscribe('app-channel');

channel.bind('app-event', function (data) {
            // alert(JSON.stringify(data));
            if (my_id == data.from) {
                
                $('#' + data.to).click();
                console.log('From clicked');

} else if (my_id == data.to) {
                if (receiver_id == data.from) {
                    // if receiver is selected, reload the selected user ...
                    $('#' + data.from).click();
                    console.log('To clicked');
                } else {
                    // if receiver is not seleted, add notification for that user
                    var pending = parseInt($('#' + data.from).find('.pending').html());
                    if (pending) {
                        $('#' + data.from).find('.pending').html(pending + 1);
                    } else {
                        $('#' + data.from).append('<span class="pending">1</span>');
                    }
                }
            }
        });

$('.user').click(function () {
            $('.user').removeClass('active');
            $(this).addClass('active');
            $(this).find('.pending').remove();
            receiver_id = $(this).attr('id');
            $.ajax({
                type: "get",
                url: "message/" + receiver_id, // need to create this route
                data: "",
                cache: false,
                success: function (data) {
                    $('#messages').html(data);
                    scrollToBottomFunc();
                }
            });
        });

$(document).on('keyup', '.input-text input', function (e) {
            var message = $(this).val();
            // check if enter key is pressed and message is not null also receiver is selected
            if (e.keyCode == 13 && message != '' && receiver_id != '') {
                $(this).val(''); // while pressed enter text box will be empty
                var datastr = "receiver_id=" + receiver_id + "&message=" + message;
                $.ajax({
                    type: "post",
                    url: "message", // need to create this post route
                    data: datastr,
                    cache: false,
                    success: function (data) {
                    },
                    error: function (jqXHR, status, err) {
                    },
                    complete: function () {
                        scrollToBottomFunc();
                    }
                })
            }
        });
    });

// make a function to scroll down auto
    function scrollToBottomFunc() {
        $('.message-wrapper').animate({
            scrollTop: $('.message-wrapper').get(0).scrollHeight
        }, 50);
    }
</script>
@endpush

[+] ..
[+] message
[-] chat.blade.php [edit]