@extends('backpack::layout')

@section('header')
<section class="content-header">
    <h1>
        {{ __('base.chat.chat') }}
    </h1>
</section>
@endsection
@section('content')
<section class="content">
    <div class="row m-t-20">
        <div class="col-md-3">
            <div class="box box-solid">
                <div class="box-header with-border">
                    <h3 class="box-title">{{ __('base.chat.possible_dialogues') }}</h3>

                    <div class="box-tools">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse"><i
                                class="fa fa-minus"></i>
                        </button>
                    </div>
                </div>
                <div class="box-body">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                @if( $recipients->isNotEmpty() )
                                <select class="lecturer_select2" data-show-subtext="true" data-live-search="true" id="selected_recipient" style="max-width: 100%;">
                                    @foreach($recipients as $recipient)
                                    <option selected="selected" value="{{ $recipient->id }}">{{ $recipient->first_name .' '. $recipient->last_name }}</option>
                                    @endforeach
                                </select>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
                <div class="box-footer">
                    <button type="submit" class="btn btn-primary" id="open_chat">{{ __('base.chat.open_chat') }}</button>
                </div>
            </div>
            @if( $active_recipients->isNotEmpty() )
            <div class="box box-solid">
                <div class="box-header with-border">
                    <h3 class="box-title">{{ __('base.chat.active_dialogues') }}</h3>

                    <div class="box-tools">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse"><i
                                class="fa fa-minus"></i>
                        </button>
                    </div>
                </div>
                <div class="box-body">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <select class="active_select2" data-show-subtext="true" data-live-search="true"  id="selected_active_recipient" style="max-width: 100%;">
                                        @foreach($active_recipients as $recipient)
                                        <option value="{{ $recipient->id }}">{{ $recipient->first_name .' '. $recipient->last_name }}</option>
                                        @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="box-footer">
                    <button type="submit" class="btn btn-primary" id="open_active_chat">{{ __('base.chat.open_chat') }}</button>
                </div>
            </div>
            @endif
        </div>


        <div class="col-md-9">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">{{ __('base.chat.messages') }}</h3>

                    <div class="box-tools pull-right">
                        <div class="has-feedback">
                            <button type="button" class="btn btn-default btn-sm" id="messages_refresh"><i class="fa fa-refresh"></i></button>
                        </div>
                    </div>
                </div>

                <div class="box-body no-padding">
                    <div class="table-responsive mailbox-messages" id="messages_main_table" style="height: 500px">
                        <table class="table table-hover table-striped">
                            <tbody>
                            @if( !isset($recipient_id) )
                                <tr>
                                    <td class="mailbox-subject" style="height: 94px; text-align: center; vertical-align: middle">
                                        <b>{{ __('base.chat.select_recipient') }}</b>
                                    </td>
                                </tr>
                            @else
                                @include('admin.chat_messages')
                            @endif
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <form id="send_message" type="post" action="/send_message">
            <div class="col-12">
                <div class="input-group">
                    <input type="text" name="message" id="message_input" class="form-control" placeholder="{{ __('base.chat.enter_message') }}">
                    <span class="input-group-btn">
                        <button class="btn btn-primary" type="submit" id="message_submit_btn" {{ !isset($recipient_id) ? 'disabled' : '' }}>{{ __('base.chat.send_message') }}  <i class="fa fa-btn fa-paper-plane"></i></button>
                    </span>
                </div>
            </div>
            </form>
            <div class="message_alert">
                <div class="alert alert-danger" role="alert">Something went wrong! Please reload page.</div>
            </div>
        </div>
    </div>
</section>

@endsection
@push('after_scripts')
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/standalone/selectize.min.js" integrity="sha256-+C0A5Ilqmu4QcSPxrlGpaZxJ04VjsRjKu+G82kl5UJk=" crossorigin="anonymous"></script>


    <script src="http://thu.test/vendor/backpack/select2/select2.js"></script>
    <script type="text/javascript">

        $(document).ready(function () {
            $('select').selectize({
                sortField: 'text'
            });
        });

        $(document).ready(function() {
            $('.lecturer_select2').select2({
                width: '100%',
            });
            $('.active_select2').select2({
                width: '100%',
            });
            scroll();
        });

        function getMessages(id) {
            $.ajax({
                type:'POST',
                url:'/get_messages',
                data: {
                    recipient_id: id
                },
                success:function(data) {
                    $('#messages_main_table').html(data.html),
                    $('#message_submit_btn').prop('disabled', false);
                    scroll();
                },
                error: function(){
                    $('.message_alert').show();
                }
            });
        }
        function sendMessage(id, message) {
            $.ajax({
                type:'POST',
                url:'/send_message',
                data: {
                    recipient_id: id,
                    message: message
                },
                success:function(data) {
                    $('#messages_tbody').append(data.html);
                    $('#message_input').val(null);
                    scroll();
                },
                error: function(){
                    $('.message_alert').show();
                }
            });
        }

        $('body').on('click', '#open_chat', function () {
            let r_id = $('#selected_recipient').val();
            spinner();
            getMessages(r_id);
        });

        $('body').on('click', '#open_active_chat', function () {
            let r_a_id = $('#selected_active_recipient').val();
            spinner();
            getMessages(r_a_id);
        });

        $('#send_message').on('submit', function(){
            let r_id = $('#recipient_id').val();
            let message = $('#message_input').val();
            sendMessage(r_id, message);
            return false;
        });

        $('#messages_refresh').on('click', function () {
            let r_id = $('#recipient_id').val();
            spinner();
            getMessages(r_id)
        });

        function spinner() {
            $('#messages_main_table').html('\
            <table class="table table-hover table-striped">\
                <tbody>\
                    <tr>\
                    <td class="mailbox-subject" style="height: 94px; text-align: center; vertical-align: middle">\
                        <div class="loader" id="loader-4">\
                            <span></span>\
                            <span></span>\
                            <span></span>\
                        </div>\
                    </td>\
                    </tr>\
                </tbody>\
            </table>\
            ');
        }
        function scroll() {
            let element = document.getElementById("messages_main_table");
            element.scrollTop = element.scrollHeight;
        }
    </script>
@endpush

@push('after_styles')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.bootstrap3.min.css" integrity="sha256-ze/OEYGcFbPRmvCnrSeKbRTtjG4vGLHXgOqsyLFTRjg=" crossorigin="anonymous" />
    <link href="http://thu.test/vendor/backpack/select2/select2.css" rel="stylesheet" type="text/css">
    <style>
        .message_alert{
            display: none;
        }
        .loader{
            width: 100px;
            height: 77px;
            border-radius: 100%;
            position: relative;
            margin: 0 auto;
        }
        #loader-4 span{
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 100%;
            background-color: #3498db;
            margin: 35px 5px;
            opacity: 0;
        }

        #loader-4 span:nth-child(1){
            animation: opacitychange 1s ease-in-out infinite;
        }

        #loader-4 span:nth-child(2){
            animation: opacitychange 1s ease-in-out 0.33s infinite;
        }

        #loader-4 span:nth-child(3){
            animation: opacitychange 1s ease-in-out 0.66s infinite;
        }

        @keyframes opacitychange{
            0%, 100%{
                opacity: 0;
            }
            60%{
                opacity: 1;
            }
        }
        .mailbox-subject {
            word-break: break-word;
        }

    </style>
@endpush