@extends('layouts.admin')
@section('title')
Casos en espera
@endsection
@section('style')
    <style>
        /*/////////////////////////////////*/
/*/////////  chat styles  /////////*/
/*/////////////////////////////////*/
.chat
{
    list-style: none;
    margin: 0;
    padding: 0;
}
.disabled {
    pointer-events:none; //This makes it not clickable
    opacity:0.6;         //This grays it out to look disabled
}

.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: scroll;
    height: 350px;
}
.chat-care .chat-img
{
    width: 50px;
    height: 50px;
}
.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%;
}


    </style>
@endsection
@section('contenido')
<div class="card"   >
    <div class="card-body"  >

        <div class="row">

            <div class="col-md-4 "
            style=" border-right: 1px solid rgb(212, 208, 208);">
                <nav class="slidebar" >

                    <div class="sidebar-header">
                        <h3>Chats</h3>
                        <div class="input-group">

                        <input type="text" class="form-control mb-10" placeholder="Buscar" style="border-radius: 15px;" id="buscar" onchange="filtro()" value="{{request()->filtrar}}">
                            </div>
                    </div>
                    <div style="overflow-y: auto; max-height: 400px;overflow-x: hidden;" >
                        <ul class="sidebar-menu" data-widget="tree" id="chatsUser">
                            @foreach ($casos as $item)
                            @php
                            $lol=json_decode($item->json_solicitante);
                            if ($item->tipo_servicio==3) {
                                # code...
                            $temp =substr($lol->name, 0, 1);

                            }else{
                                $temp =substr($lol->nombre, 0, 1);

                            }
                        @endphp
                            <li class="" id="{{$item->noCaso}}" name="casoswe" >
                             @if ($item->tipo_servicio==3)
                             <a href="javascript:;" onclick="visualizarMensajes('{{$item->noCaso}}','{{$lol->name}}',{{$item->idCaso}},'{{$lol->email}}',

                                {{$lol->cellphone}},

                                {{$lol->id_number}},'{{$item->descripcion}}','{{ $lol->id  }}')" /  >
                             @else
                             <a href="javascript:;" onclick="visualizarMensajes('{{$item->noCaso}}','{{$lol->nombre}}',{{$item->idCaso}},'{{$lol->email}}','{{$lol->celular}}',0,'{{$item->descripcion}}','{{ $lol->idUsuario  }}')"   >
                             @endif

                                    <div class="row">

                                        <div class="col">

                                            <img src="https://placehold.it/50/55C1E7/fff&text={{$temp[0]}}" alt="Agent" style=" border-radius: 50%;" width="40"/>

                                        <strong>#{{ $item->noCaso}}- {{ $item->nombre  }}</strong>

                                            {{-- <div class="float-right dot text-center mt-10"><span-btn class="" >1</span-btn></div> --}}

                                        </div>

                                    </div>

                                </a>
                            </li>
                             @endforeach


                        </ul>

                    </div>

                </nav>
            </div>

            <div class="col-md-8">
                <div class="container" id="cardChat">

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


                                      </strong>
                                       <button class="btn btn-danger "style="background-color: #DB3920; border: none;border-radius: 15px; " disabled onclick="borrarChat()" id="borrarChatwe"><i class="fa fa-times-circle" aria-hidden="true"></i></button>
                                  </div>

                                  <div class="card-body chat-care ">
                                    <ul class="chat" id="chat">

                                      </ul>
                                  </div>
                                  <br>
                                  <div class="card-footer" >
                                      <div class="input-group">
                                          <input  type="text" class="form-control input-msg ml-10 mt-10" onkeypress="return runScript(event,'{{Auth::user()->name}}','{{Auth::user()->apellido}}')" placeholder="Type your message here..."  style="border-radius: 15px;" id="enviar"  disabled/>
                                          <span class="input-group-btn ml-10 mt-10">
                                            <button class="btn btn-primary"  style="background-color: #DB3920; border: none;border-radius: 15px; "id="btn-chat" onclick="enviarChatAdmin('{{Auth::user()->name}}','{{Auth::user()->apellido}}')"   disabled>
                                              <i class="fa fa-paper-plane"></i></button>
                                          </span>
                                        </div>
                                  </div>

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

            <!-- Modal -->
            <div class="modal fade" id="perfil"  data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
                <div class="modal-dialog">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h5 class="modal-title" id="staticBackdropLabel">Perfil</h5>
                      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </div>
                    <div class="modal-body">

                        <div class="row">
                          <div class="col text-center">
                                <span id="imgUser"><img src="https://placehold.it/50/55C1E7/fff&text=F" alt="Agent" style=" border-radius: 50%;" width="70"class="mr-10" /></span>
                            <br><br><h4><span id="nombreUser">Nombre Usuario</span></h4>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col mt-10 text-center">
                                <strong>Correo:</strong><span id="correoUser">CorreoAll@gmail.com</span>
                            </div>


                        </div>


                        <div class="row">
                            <div class="col mt-10 text-center">
                                <strong>Celular:</strong><span id="celularUser">312241412</span>
                            </div>


                        </div>

                        <div class="row">
                            <div class="col text-center mt-10 ">
                                <strong>Documento:</strong>
                                <span id="documentoUser">100000000</span>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col text-center mt-10 mb-20">
                                <strong>Descripción Caso</strong><br>
                                <span id="descrip"></span>
                            </div>
                        </div>
                    </div>



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



@endsection
@section('js')
<script src="{{ asset('js/firebase.js') }}"></script>
<script>
window.onload=cambiarHost("{{ $_SERVER['HTTP_HOST'] }}","{{ env('API_ROUTE') }}");

</script>
@endsection