@extends('admin::layouts.master')

@push('styles')
    <style>
        table#chat-table tr td a.button {
            display: none;
        }

        table#chat-table tr:hover td a.button {
            display: inline-block;
        }

        .chat-coversation.right .media-body .text {
            background: var(--primary) !important;
            color: #fff;
        }

        .media-body {
            -ms-flex: 1;
            flex: 1;
        }
    </style>
@endpush

@section('content')
    <div class="card">
        <div class="card-header">
            <h6 class="mb-0">Messages of {{ $chat->user->name }}</h6>
            <a href="javascript:history.back()" class="btn btn-secondary btn-sm mb-3">Back</a>
        </div>
        <div class="card-body">
            <div class="chat-list-wrap c-scrollbar-light scroll-to-btm" id="chat-list-wrap"
                style="overflow: scroll;max-height: calc(100vh - 215px);">
                <div class="chat-list" style="padding-bottom: 40px;">
                    @foreach ($chat->chats as $msg)
                        <div class="chat-coversation {{ $chat->user_id == $msg->user_id ? 'right' : '' }}">
                            <div class="media">
                                @if ($chat->user_id == $msg->user_id)
                                    <div class="media-body">
                                        <div class="text bg-soft-secondary">{{ $msg->message }}</div>
                                        <div>
                                            <span class="time">{{ $msg->created_at }}</span>
                                        </div>
                                    </div>
                                    <span class="avatar avatar-xs flex-shrink-0" data-toggle="tooltip" title=""
                                        data-original-title="{{ $msg->user->name ?? 'User' }}">
                                        <img src="{{ staticAsset('assets/img/avatar-place.png') }}"
                                            onerror="this.onerror=null;this.src='{{ staticAsset('assets/img/avatar-place.png') }}">
                                    </span>
                                @else
                                    <span class="avatar avatar-xs flex-shrink-0" data-toggle="tooltip" title=""
                                        data-original-title="{{ $msg->user->name ?? 'User' }}">
                                        <img src="{{ staticAsset('assets/img/avatar-place.png') }}"
                                            onerror="this.onerror=null;this.src='{{ staticAsset('assets/img/avatar-place.png') }}">
                                    </span>
                                    <div class="media-body">
                                        <div class="text bg-soft-secondary">{{ $msg->message }}</div>
                                        <div>
                                            <span class="time">{{ $msg->created_at }}</span>
                                        </div>
                                    </div>
                                @endif
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
            <div class="chat-footer border-top p-3 attached-bottom bg-white">
                <form id="send-mesaage" action="{{ route('admin.chat.sendMessage', $chat->id) }}" method="POST">
                    @csrf
                    <div class="input-group">

                        <input type="hidden" id="chat_thread_id" name="chat_thread_id" value="{{ $chat->id }}">
                        <input type="text" class="form-control" name="message" id="message"
                            placeholder="Your Message.." autocomplete="off">
                        <input type="hidden" class="" name="attachment" id="attachment">
                        <div class="input-group-append">
                            <button class="btn btn-primary btn-circle btn-icon" type="submit">
                                <i class="las la-paper-plane"></i>
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    @endsection

    @section('script')
        <!-- firebase integration started -->
        <script src="https://www.gstatic.com/firebasejs/6.0.2/firebase.js"></script>

        <script type="text/javascript">
            var firebaseConfig = {
                apiKey: "AIzaSyDSX0gw_nbVJGVcaOCVMKLSdL6vUGgj-RQ",
                authDomain: "dev-majarat.firebaseapp.com",
                databaseURL: "https://PROJECT_ID.firebaseio.com",
                projectId: "dev-majarat",
                storageBucket: "dev-majarat.appspot.com",
                messagingSenderId: "526662308542",
                appId: "1:526662308542:android:be0461ceb13cf176ae44ef"
            };
            const app = firebase.initializeApp(firebaseConfig);

            // Initialize Firebase Cloud Messaging and get a reference to the service
            const messaging = firebase.messaging();

            messaging.requestPermission()
                .then(function() {
                    //MsgElem.innerHTML = "Notification permission granted."
                    console.log("Notification permission granted.");
                    // get the token in the form of promise
                    return messaging.getToken()
                })
                .then(function(token) {
                    // print the token on the HTML page
                    console.log(token);
                })
                .catch(function(err) {
                    console.log("Unable to get permission to notify.", err);
                });

            messaging.onMessage(function(payload) {
                console.log(payload);
                var notify;
                notify = new Notification(payload.notification.title, {
                    body: payload.notification.body,
                    icon: payload.notification.icon,
                    tag: "Dummy"
                });
                console.log(payload.notification);
                location.reload();
            });

            self.addEventListener('notificationclick', function(event) {
                event.notification.close();
            });
        </script>

        <script>
            var objDiv = document.getElementById("chat-list-wrap");
            objDiv.scrollTop = objDiv.scrollHeight;
        </script>
    @endsection