@include('layout.header')
<style>
    * {
  box-sizing: border-box;
}

body {
  background-color: #edeff2;
  font-family: "Calibri", "Roboto", sans-serif;
}

.chat_window {
  width: 100%;
  height: 500px;
  border-radius: 10px;
  background-color: #fff;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
  background-color: #f8f8f8;
  overflow: hidden;
}

.top_menu {
  background-color: #fff;
  width: 100%;
  padding: 20px 0 15px;
  box-shadow: 0 1px 30px rgba(0, 0, 0, 0.1);
}
.top_menu .buttons {
  margin: 3px 0 0 20px;
  position: absolute;
}
.top_menu .buttons .button {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 10px;
  position: relative;
}
.top_menu .buttons .button.close {
  background-color: #f5886e;
}
.top_menu .buttons .button.minimize {
  background-color: #fdbf68;
}
.top_menu .buttons .button.maximize {
  background-color: #a3d063;
}
.top_menu .title {
  text-align: center;
  color: #bcbdc0;
  font-size: 20px;
}

.messages {
  position: relative;
  list-style: none;
  padding: 20px 10px 0 10px;
  margin: 0;
  height: 347px;
  overflow: scroll;
}
.messages .message {
  clear: both;
  overflow: hidden;
  margin-bottom: 20px;
  transition: all 0.5s linear;
  opacity: 0;
}
.messages .message.left .avatar {
  background-color: #f5886e;
  float: left;
}
.messages .message.left .text_wrapper {
  background-color: #ffe6cb;
  margin-left: 20px;
}
.messages .message.left .text_wrapper::after, .messages .message.left .text_wrapper::before {
  right: 100%;
  border-right-color: #ffe6cb;
}
.messages .message.left .text {
  color: #c48843;
}
.messages .message.right .avatar {
  background-color: #fdbf68;
  float: right;
}
.messages .message.right .text_wrapper {
  background-color: #c7eafc;
  margin-right: 20px;
  float: right;
}
.messages .message.right .text_wrapper::after, .messages .message.right .text_wrapper::before {
  left: 100%;
  border-left-color: #c7eafc;
}
.messages .message.right .text {
  color: #45829b;
}
.messages .message.appeared {
  opacity: 1;
}
.messages .message .avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: inline-block;
}
.messages .message .text_wrapper {
  display: inline-block;
  padding: 20px;
  border-radius: 6px;
  width: calc(100% - 85px);
  min-width: 100px;
  position: relative;
}
.messages .message .text_wrapper::after, .messages .message .text_wrapper:before {
  top: 18px;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.messages .message .text_wrapper::after {
  border-width: 13px;
  margin-top: 0px;
}
.messages .message .text_wrapper::before {
  border-width: 15px;
  margin-top: -2px;
}
.messages .message .text_wrapper .text {
  font-size: 18px;
  font-weight: 300;
}

.bottom_wrapper {
  position: relative;
  width: 100%;
  background-color: #fff;
  padding: 20px 20px;
  position: absolute;
  bottom: 0;
}
.bottom_wrapper .message_input_wrapper {
  display: inline-block;
  height: 50px;
  border-radius: 25px;
  border: 1px solid #bcbdc0;
  width: calc(100% - 160px);
  position: relative;
  padding: 0 20px;
}
.bottom_wrapper .message_input_wrapper .message_input {
  border: none;
  height: 100%;
  box-sizing: border-box;
  width: calc(100% - 40px);
  position: absolute;
  outline-width: 0;
  color: gray;
}
.bottom_wrapper .send_message {
  width: 140px;
  height: 50px;
  display: inline-block;
  border-radius: 50px;
  background-color: #a3d063;
  border: 2px solid #a3d063;
  color: #fff;
  cursor: pointer;
  transition: all 0.2s linear;
  text-align: center;
  float: right;
}
.bottom_wrapper .send_message:hover {
  color: #a3d063;
  background-color: #fff;
}
.bottom_wrapper .send_message .text {
  font-size: 18px;
  font-weight: 300;
  display: inline-block;
  line-height: 48px;
}

.message_template {
  display: none;
}

.message.left > .avatar{
    padding: 10px;
    color: white;
}
.message.right > .avatar{
    padding: 15px;
    color: white;
}

</style>
<section id="content">
    <section class="bgGrey py-4">
        <div class="container mt-3 p-3">
            <div class="row">
                {{-- chat --}}
                <div class="chat_window">
                    <div class="top_menu">
                        <div class="buttons">
                            <div class="button close"></div>
                            <div class="button minimize"></div>
                            <div class="button maximize"></div>
                        </div>
                        <div class="title">Inbox Complaint #{{ $complaint->number}}</div>
                    </div>
                    <ul class="messages"></ul>
                    <div class="bottom_wrapper clearfix">
                        <div class="message_input_wrapper">
                            <input class="message_input" placeholder="Type your message here..." />
                        </div>
                        <div class="send_message">
                            <div class="icon"></div>
                            <div class="text">Send</div>
                        </div>
                    </div>
                </div>
                <div class="message_template">
                    <li class="message">
                        <div class="avatar"></div>
                        <div class="text_wrapper">
                            <div class="text"></div>
                            <small class="text-secondary text-date"></small>
                        </div>
                    </li>
                </div>
                {{-- end --}}
            </div>
        </div>
    </section>
</section>

@include('layout.footer')

<script>
(function () {
    var Message;
    Message = function (arg) {
        this.text = arg.text, this.message_side = arg.message_side,this.avatar = arg.avatar, this.created_at = arg.created_at;
        this.draw = function (_this) {
            return function () {
                var $message;
                $message = $($('.message_template').clone().html());
                $message.addClass(_this.message_side).find('.text').html(_this.text);
                $message.addClass(_this.message_side).find('.text-date').html(_this.created_at);
                $message.addClass(_this.message_side).find('.avatar').html(_this.avatar);
                $('.messages').append($message);
                return setTimeout(function () {
                    return $message.addClass('appeared');
                }, 0);
            };
        }(this);
        return this;
    };
    $(function () {
        var getMessageText, message_side, sendMessage;
        message_side = 'right';
        getMessageText = function () {
            var $message_input;
            $message_input = $('.message_input');
            return $message_input.val();
        };
        sendMessage = function (text,isAdmin = false,avatar= 'admin', created_at = null) {
            var $messages, message;
            if (text.trim() === '') {
                return;
            }
            $('.message_input').val('');
            $messages = $('.messages');
            message_side = isAdmin === false ? 'right' : 'left';
            message = new Message({
                text: text,
                message_side: message_side,
                avatar: avatar,
                created_at: created_at
            });
            message.draw();
            return $messages.animate({ scrollTop: $messages.prop('scrollHeight') }, 300);
        };
        $('.send_message').click(function (e) {
            var url = "{{ url('/user/inbox_complaint_send') }}";
            var message = getMessageText();
            var complaint_id = "{{$complaint->id}}";
            $.ajax({
                url: url,
                type: 'POST',
                data: { "message" : message,"complaint_id": complaint_id ,"_token": "{{ csrf_token() }}",},
                success: function(res) {
                    if (res.status == 'success') {
                        var cekAdmin = true;
                        if (res.data.is_user_sender == 'yes') {
                            cekAdmin = false;
                            avatar = 'user';
                        }else{
                            cekAdmin = true;
                            avatar = 'admin';
                        }

                        sendMessage(res.data.message,cekAdmin,avatar, res.data.created_at || null);
                    }
                }
            });
        });

        $('.message_input').keyup(function (e) {
            if (e.which === 13) {
              var url = "{{ url('/user/inbox_complaint_send') }}";
            var message = getMessageText();
            var complaint_id = "{{$complaint->id}}";
            $.ajax({
                url: url,
                type: 'POST',
                data: { "message" : message,"complaint_id": complaint_id ,"_token": "{{ csrf_token() }}",},
                success: function(res) {
                    if (res.status == 'success') {
                        var cekAdmin = true;
                        if (res.data.is_user_sender == 'yes') {
                            cekAdmin = false;
                            avatar = 'user';
                        }else{
                            cekAdmin = true;
                            avatar = 'admin';
                        }

                        sendMessage(res.data.message,cekAdmin,avatar, res.data.created_at || null);
                    }
                }
            });
            }
        });

        var url = "{{ url('/user/inbox_complaint_message_all',$complaint->id) }}";
        $.ajax({
            url: url,
            type: 'GET',
            dataType: 'json', // added data type
            success: function(res) {
                if (res.status == 'success') {
                    var cekAdmin = true;
                    for (i = 0; i < res.data.length; i++) {
                        if (res.data[i].is_user_sender == 'yes') {
                            cekAdmin = false;
                            avatar = 'user';
                        }else{
                            cekAdmin = true;
                            avatar = 'admin';
                        }

                        sendMessage(res.data[i].message,cekAdmin,avatar, res.data[i].created_at);
                    }
                }
            }
        });

        // sendMessage('Hello Philip! :)');
        // setTimeout(function () {
        //     return sendMessage('Hi Sandy! How are you?');
        // }, 1000);
        // return setTimeout(function () {
        //     return sendMessage('I\'m fine, thank you!');
        // }, 2000);
    });
}.call(this));
</script>