@extends('layouts.chat')
@section('title')
Chat - Enjoit Support
@endsection
@section('style')
    <style>
        /*/////////////////////////////////*/
/*/////////  chat styles  /////////*/
/*/////////////////////////////////*/
.chat
{
    list-style: none;
    margin: 0;
    padding: 0;
}

.chat li
{

    margin-bottom: 3px;
    /* padding-bottom: 1px; */
    /* border-bottom: 1px dotted #B3A9A9; */
    margin-top: 3px;
    width: 80%;
}

.chat li .chat-body p
{
    margin: 0;
    /* color: #777777; */
}


.chat-care
{
    overflow-y: auto;
    min-height: 350px;
    /* height: 416px; */
    max-height: 100%;
}
.chat-care .chat-img
{
    width: 30px;
    height: 30px;
}
.chat-care .img-circle
{
    border-radius: 50%;
}
.chat-care .chat-img
{
    display: inline-block;
}
.chat-care .chat-body
{
    display: inline-block;
    max-width: 80%;
    background-color: #FFC195;
    border-radius: 12.5px;
    padding: 15px;
    color: #F5F5F5;
}

.chat-care .chat-body-agent
{
    display: inline-block;
    max-width: 80%;
    background-color: #DB3920   ;
    border-radius: 12.5px;
    padding: 15px;
    color: #F5F5F5;

}

.chat-care .chat-body-admin
{
    display: inline-block;
    max-width: 80%;
    background-color:white;
    border-color: #DB3920;
    border: solid #DB3920;
    border-radius: 12.5px;
    padding: 15px;
    color: black;

}
.chat-care .chat-body strong
{
  color: #0169DA;
}

.chat-care .admin
{
    text-align: right ;
    float: right;
}
.chat-care .admin p
{
    text-align: left ;
}
.chat-care .agent
{
    text-align: left ;
    float: left;
}
.chat-care .left
{
    float: left;
}
.chat-care .right
{
    float: right;
}

.clearfix {
  clear: both;
}





.dot {
  height: 20px;
  width: 20px;
  background-color: #61F924;
  border-radius: 50%;
  display: inline-block;
  color: white;
border-color: white;
   align-items: center;

   justify-items: center;
}

input{
  border:none;
  background-color: transparent;
  border-radius: 50%;
  margin-bottom: 10%;
}


    </style>
@endsection
@section('contenido')


                    <div class="card " style="height: 100%">
                        <div class="card-header text-center" style=" border-buttom: 1px solid #C00;">
                            <strong><span>Agente</span></strong>
                        </div>

                        <div class="card-body chat-care ">
                            <ul class="chat"></ul>
                        </div>
                        <br>
                        <div class="card-footer" >
                            <div class="input-group mb-20">
                                <input id="enviar" type="text" disabled class="form-control input-msg ml-10 mt-10" placeholder="Type your message here..."  style="border-radius: 15px;" onkeypress="return runScript(event)"/>
                                <span class="input-group-btn ml-10 mt-10">
                                <a href="Javascript:;" onclick="enviarChatAdmin()" id="btn-chat" class="btn btn-primary"  style="background-color: #DB3920; border: none;border-radius: 15px; "id="btn-chat" >
                                    <i class="fa fa-paper-plane"></i></a>
                                </span>
                            </div>
                        </div>


</div>
@endsection
@section('js')
<script src="{{ asset('js/chat.js') }}"></script>
<script>
    var nombre = "{{$nombre}}";
    var caso = "{{$caso->noCaso}}";
    visualizarMensajes()

    function runScript(e) {
    //See notes about 'which' and 'key'
    if (e.keyCode == 13) {
        enviarChatAdmin()
        return false;
    }
}
</script>

@endsection