@extends('adminlte::page')
@section('title', 'Chat')
@section('content')
<div class="row">
   <!-- left column -->
   <div class="col-md-12">
      <!-- general form elements -->
      <div class="box box-primary">
         @if ($message = Session::get('success'))
         {{ $message }}
         @endif
         <section class="msger">
            <header class="msger-header">
               <div class="msger-header-title">
                  Chat for user #{{$user->name}}
               </div>
            </header>
            <main class="msger-chat" id="parentDiv">
               @foreach($chat as $message)
               <!-- <div class="msg left-msg">
                  <div class="msg-img">{{$message['type'] == 'admin'?'A':'U'}}</div>
                  <div class="msg-bubble">
                     <div class="msg-info">
                        <div class="msg-info-name">
                           @if($message['type'] == 'admin') 
                           You
                           @else
                           {{$message->sender->name}}
                           @endif
                        </div>
                        <div class="msg-info-time">{{$message['created_at']}}</div>
                     </div>
                     <div class="msg-text">                            
                        {{$message['message']}}
                     </div>
                  </div>
               </div> -->

               <div class="chat-panel">
               @if($message['type'] == 'admin') 
                        <div class="row no-gutters align-items-center self-msg">
                            <div class="col-md-6 offset-md-5">
                                <div class="chat-bubble chat-bubble--right">
                                    <div class="msg-info-time">{{$message['created_at']}}</div>
                                    {{$message['message']}}
                                </div>
                            </div>
                            <div class="col-md-1"><span class="chat-user-name">U</span> </div>
                        </div>
                    @else
                    <div class="row no-gutters align-items-center ">
                        <div class="col-md-1"><span class="chat-user-name">{{substr($message->sender->name, 0, 1)}}</span> </div>
                        <div class="col-md-6">
                            <div class="chat-bubble chat-bubble--left">
                            <div class="msg-info-time">{{$message['created_at']}}</div>
                            {{$message['message']}}
                            </div>
                        </div>
                    </div>
                    @endif
                </div>


               @endforeach
            </main>
            <form class="msger-inputarea"  enctype="multipart/form-data" role="form" method="POST" action="{{ route('visament.chats.submit',$user->id) }}" autocomplete="off">
               @csrf
               <input type="text" class="msger-input" name="message" placeholder="Enter your message..."
                  value="{{ old('message')}}">
               @if ($errors->has('message'))
               <span class="invalid-feedback" role="alert" style="display: block">
               <strong>{{ $errors->first('message') }}</strong>
               </span>
               @endif
               <button class="msger-send-btn" type="submit"><i class="fa fa-location-arrow"></i></button>
            </form>
         </section>
      </div>
      <!-- /.box -->
   </div>
</div>
<script></script>
@section('css')
<style>
   .msger {
   display: flex;
   flex-flow: column wrap;
   justify-content: space-between;
   width: 100%;
   max-width: 867px;
   margin: 25px auto;
   height: calc(100% - 50px);
   border: var(--border);
   border-radius: 5px;
   background: var(--msger-bg);
   box-shadow: 0 15px 15px -5px rgba(0, 0, 0, 0.2);
   border: solid 1px #ddd;
   }
   .msger-header {
   display: flex;
   justify-content: space-between;
   padding: 10px;
   border-bottom: var(--border);
   background: #eee;
   color: #666;
   }

   .msger-chat::-webkit-scrollbar {
   width: 6px;
   }
   .msger-chat::-webkit-scrollbar-track {
   background: #ddd;
   }
   .msger-chat::-webkit-scrollbar-thumb {
   background: #bdbdbd;
   }
   .msg {
   display: flex;
   align-items: flex-end;
   margin-bottom: 10px;
   }
   .msg:last-of-type {
   margin: 0;
   }
   .msg-img {
   width: 40px;
   height: 40px;
   margin-right: 10px;
   background: #ddd;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: bold;
   font-size: 20px;
   }
   .msg-bubble {
   max-width: 450px;
   padding: 15px;
   border-radius: 15px;
   background:#ececec;
   }
   .msg-info {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 10px;
   }
   .msg-info-name {
   margin-right: 10px;
   font-weight: bold;
   }
   .msg-info-time {
   font-size: 0.85em;
   }
   .left-msg .msg-bubble {
   border-bottom-left-radius: 0;
   }
   .right-msg {
   flex-direction: row-reverse;
   }
   .right-msg .msg-bubble {
   background:#716ffe;
   color: #fff;
   border-bottom-right-radius: 0;
   }
   .right-msg .msg-img {
   margin: 0 0 0 10px;
   background:#716ffe;
   color: #fff;
   }
  
   .msger-input {
   flex: 1;
   background: #fff;
   /* border: none; */
   padding: 13px;
   border: solid 1px #ddd;
   }
  
   .msger-chat {
    height:70vh;
    overflow-y: scroll;
    padding: 15px;
}

   
/*Chat-css*/

  
  .chat-bubble {
    padding: 10px 14px;
    background:#fff;
    border-radius: 12px;
    position: relative;
    animation: fadeIn 1s ease-in;
    margin: 15px 15px;
  }
  .chat-bubble:after {
    content: "";
    position: absolute;
    top: 50%;
    width: 0;
    height: 0;
    border: 20px solid transparent;
    border-bottom: 0;
    margin-top: -10px;
  }
  .chat-bubble--left:after {
    left: 0;
    border-right-color:#fff;
    border-left: 0;
    margin-left: -20px;
  }
  .chat-bubble--right:after {
    right: 0;
    border-left-color: #5b7fa3;
    border-right: 0;
    margin-right: -20px;
  }

  .self-msg .chat-user-name{background:#5b7fa3;color: #fff;}




  @keyframes fadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  .self-msg .chat-bubble {
    background:#5b7fa3;
    color: #fff;
  }
  
  .chat-box-tray {
    background: #eee;
    display: flex;
    align-items: baseline;
    padding: 10px 15px;
    align-items: center;
    margin-top: 19px;
    bottom: 0;
  }
  .chat-box-tray input {
    margin: 0 10px;
    padding: 6px 2px;
  }
  .chat-box-tray i {
    color: grey;
    font-size: 30px;
    vertical-align: middle;
  }

.chat-box-tray i:last-of-type {margin-left: 25px;}

.chat-user-name{    border-radius: 50%;width:35px;height:35px;background-color:#fff;display: flex;align-items: center;justify-content: center;font-weight: 600;text-transform: uppercase;}
.msger-inputarea{display:flex;gap:5px;background:#fff;padding:10px;}
.msger-send-btn{background-color:#343a40;border:none;padding:8px 15px;border-radius:3px;}
.msger-send-btn:hover{background-color:#EA1B21;}
.msger-send-btn i{font-size:18px;color: #fff;}
.msger-input{flex: 1;border: solid 1px #ddd;padding: 10px 15px;width: 100%;font-size: 13px;border-radius: 3px;}
.msger-input:focus-visible{outline: none;}


/*Chat-css*/

</style>
@stop

@section('js')
<script>
    var objDiv = document.getElementById("parentDiv");
        objDiv.scrollTop = objDiv.scrollHeight;
</script>
@endsection


@stop