@extends('layouts.app')

@section('title', __('Conversations'))

@push('css')
    <style>
        .bg-green-lt{
            background-color: rgba(94,186,0,.5) !important;
            color: white !important;
        }
        .bg-green-lt .text-muted{
            color: white !important;
        }
    </style>
@endpush

@section('content')
    <div class="page-header">
        <div class="row align-items-center">
            <div class="col-auto">
                <div class="page-pretitle">
                    {{ __('Conversations') }}
                </div>
                <h2 class="page-title">
                    {{ __("Manage Conversations") }}
                </h2>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-4 mb">
            <div class="card h-100">
                <div class="p-3 pb-0">
                <div class="input-icon">
                    <input type="text" class="form-control" placeholder="Search…" id="searchChat">
                    <span class="input-icon-addon">
                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><circle cx="10" cy="10" r="7"></circle><line x1="21" y1="21" x2="15" y2="15"></line></svg>
                    </span>
                </div>
                </div>

                <ul class="nav nav-tabs nav-fill" data-toggle="tabs">
                    <li class="nav-item">
                        <a href="#messages" class="nav-link active" data-toggle="tab">
                            Messages
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="#groups" class="nav-link" data-toggle="tab">
                            Groups
                        </a>
                    </li>
                </ul>
                <div class="card-body rise-chat-body p-0">
                    <div class="tab-content">
                        <div class="tab-pane active show" id="messages">
                            {{-- Message --}}
                            <div class="message-row newConversationButton">
                                <div class="col-md-12">
                                    <button type="button" class="btn btn-primary w-100 newConversation" data-type="{{ \App\Conversation::Message }}">
                                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></svg>
                                        New Conversation
                                    </button>
                                </div>
                            </div>
                            @foreach($conversations as $con)
                                @include('panel._chat.message-layout', ['con' => $con, 'newMessage' => $con->participants->where('id', auth()->user()->id)->first()->pivot->unread ])
                            @endforeach
                        </div>
                        <div class="tab-pane" id="groups">
                            {{-- Message --}}
                            <div class="message-row newConversationButton">
                                <div class="col-md-12">
                                    <button type="button" class="btn btn-primary w-100 newConversation" data-type="{{ \App\Conversation::Group }}">
                                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></svg>
                                        New Conversation
                                    </button>
                                </div>
                            </div>

                            @foreach($groups as $con)
                                @include('panel._chat.group-layout', ['con' => $con, 'newMessage' => $con->participants->where('id', auth()->user()->id)->first()->pivot->unread])
                            @endforeach

                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-8 mb chatRoom">
            <div class="card h-100"></div>
        </div>
    </div>


@stop

@push('script')
    <script !src="">
        function addMember(el, uid){
            let btn = $(el);
            btn.btnloading();

            axios.get('{{ route('panel.conversations.addMember') }}', {
                params: {
                    conversationId: uid
                }
            }).then(function(r){
                $('.modalData').html(r.data.html);
                $('#addMemberModal').modal('show');
            }).catch(function(e){
                notify('error', e.response.data.message);
            }).then(function(r){
                btn.btnreset();
            });
        }

        function getOldMessages(el){
            axios.get( $(el).attr('data-url') ).then(function(r){
                $(el).closest('#js-chat-messages-container').find('.oldMessages').html(r.data.html);

                $(el).attr('data-url', r.data.nextPageUrl);

                if (!r.data.nextPageUrl)
                    $(el).css('display', 'none');

            }).catch(function(e){
                notify('error', e.response.data.message);
            })
        }


        Echo.private('user.{{ auth()->user()->id }}')
            .listen('NewMessage', (e) => {
                if($('.js-message-row.bg-blue-lt').data('id') == e.conversationId)
                    return;

                $(`.js-message-row[data-id="${e.conversationId}"]`).addClass('bg-green-lt');

                showNotification({
                    title: e.title,
                    body: e.body
                });

                if(e.type == '{{ \App\Conversation::Group }}'){
                    $(`.js-message-row[data-id="${e.conversationId}"]`).insertAfter( $('#groups .newConversationButton') );
                }

                if(e.type == '{{ \App\Conversation::Message }}'){
                    $(`.js-message-row[data-id="${e.conversationId}"]`).insertAfter( $('#messages .newConversationButton') );
                }
            });

        Echo.private('user.{{ auth()->user()->id }}')
            .listen('ConversationNew', (e) => {
                let el = $(e._layout);

                if(e.type == '{{ \App\Conversation::Group }}'){
                    $(el).insertAfter( $('#groups .newConversationButton') );
                }

                if(e.type == '{{ \App\Conversation::Message }}'){
                    $(el).insertAfter( $('#messages .newConversationButton') );
                }

                playSound();
            });

        $(function(){
            let chatId = localStorage.getItem('chatId');
            $(`.js-message-row[data-id="${chatId}"]`).trigger('click');

            $(document).on('change', '#chat-file', function(){
                $('#chat-message-reply-form').trigger('submit');
            })
        });

        const chatLoader = `<div class="dimmer active h-100">
                                <div class="loader"></div>
                                <div class="dimmer-content"></div>
                            </div>`;

        $('.newConversation').click(function(){
            let btn = $(this);
            btn.btnloading();

            leaveActiveChat();
            $(".chatRoom").find('.card').html(chatLoader);
            $('.js-message-row').removeClass('bg-blue-lt bg-green-lt');

            axios.get('{{ route('panel.conversations.modal') }}', {
                params: {
                    type: btn.data('type')
                }
            })
                .then(function (r){
                    $('.chatRoom').find('.card').html(r.data.html)
                })
                .catch(function (e){
                    notify('error', e.response.data.message);
                })
                .then(function (){
                    btn.btnreset();
                });
        });

        function fetchChat(el){
            if($('.js-message-row.bg-blue-lt').data('id') == $(el).data('id'))
                return;

            leaveActiveChat();
            let chatId = $(el).data('id');

            $('.js-message-row').removeClass('bg-blue-lt');
            $(el).removeClass('bg-green-lt').addClass('bg-blue-lt');
            let route = '{{ route('panel.conversations.messages', ':uid') }}';
            route = route.replace(':uid', $(el).data('id'))
            $(".chatRoom").find('.card').html(chatLoader);
            axios.get(route)
                .then(function(r){
                    $(".chatRoom").find('.card').html(r.data.messages);
                    localStorage.setItem('chatId', chatId);

                    setTimeout(function(){
                        objDiv.scrollTop = objDiv.scrollHeight;
                    }, 200);
                })
                .catch(function(e){
                    notify('error', e.response.data.message);
                })
        }

        $('#searchChat').keyup(function(){
            var txt = $('#searchChat').val().toLowerCase();
            $(".chatName").filter(function() {
                $(this).closest('.js-message-row').toggle($(this).text().toLowerCase().indexOf(txt) > -1)
            });
        })
    </script>
@endpush